archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Working on colors

Browse Source
This commit is contained in:
Adam Wathan 2017-08-18 08:03:29 -04:00
parent dac88161f3
commit a33385f51f
6 changed files with 91 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/source/_layouts/master.blade.php
View File

@ -21,8 +21,11 @@
</div>
</header>
<div class="flex flex-fill">
<nav class="px-8 pb-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
<nav class="px-8 py-8 bg-light-softer text-light text-sm leading-loose" style="flex: 0 0 12rem;">
<div class="mb-8">
<a class="{{ $page->getUrl() === '/examples' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/examples">Examples</a>
</div>
<div class="mb-1 text-dark-softer text-uppercase text-xs">Introduction</div>
<ul>
<li><a class="{{ $page->getUrl() === '/' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
<li><a class="{{ $page->getUrl() === '/installation' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>

30
docs/source/examples.md Normal file
View File

@ -0,0 +1,30 @@
---
extends: _layouts.master
title: "Examples"
---
# Examples
Some component examples, just to get a vibe for what's possible and for us to double check our default utilities are producing good looking stuff!
## Alerts
<div class="bg-amber-lightest border border-amber-light rounded p-4 mb-4">
<div class="text-medium text-amber">
Warning message
</div>
<div class="text-amber">
Some additional text to explain what went wrong.
</div>
</div>
<div class="bg-green-lightest border border-green-light rounded p-4">
<div class="text-medium text-green">
Success message
</div>
<div class="text-green">
Some additional text to explain what went awesome.
</div>
</div>
## Buttons

40
src/colors.less
View File

@ -11,21 +11,25 @@
@color-grey-900: #212121;
@color-black: #000000;
@color-red: #f25451;
@color-red-light: #fa8785;
@color-orange: #ffb447;
@color-orange-light: #ffce85;
@color-yellow: #ffed4a;
@color-yellow-light: #fff6a5;
@color-green: #77d48a;
@color-green-light: #b1f3be;
@color-teal: #4dc0b5;
@color-teal-light: #92e0d8;
@color-blue: #4aa2ea;
@color-blue-light: #acdaff;
@color-indigo: #6574cd;
@color-indigo-light: #a3aeed;
@color-purple: #976ae6;
@color-purple-light: #ceb3ff;
@color-pink: #f66d9b;
@color-pink-light: #ffa5c3;
@color-red: #f25451;
@color-red-light: #fa8785;
@color-orange: #ffb447;
@color-orange-light: #ffce85;
@color-amber: #ffbf00;
@color-amber-light: #ffe493;
@color-amber-lightest: #fff7df;
@color-yellow: #ffed4a;
@color-yellow-light: #fff6a5;
@color-green: #57d06f;
@color-green-light: #b1f3be;
@color-green-lightest: #dfffe6;
@color-teal: #4dc0b5;
@color-teal-light: #92e0d8;
@color-blue: #4aa2ea;
@color-blue-light: #acdaff;
@color-indigo: #6574cd;
@color-indigo-light: #a3aeed;
@color-purple: #976ae6;
@color-purple-light: #ceb3ff;
@color-pink: #f66d9b;
@color-pink-light: #ffa5c3;

40
src/utilities/backgrounds.less
View File

@ -7,24 +7,28 @@
'dark-soft' @color-grey-700,
'dark-softer' @color-grey-600,
'red' @color-red,
'red-light' @color-red-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'teal' @color-teal,
'teal-light' @color-teal-light,
'blue' @color-blue,
'blue-light' @color-blue-light,
'indigo' @color-indigo,
'indigo-light' @color-indigo-light,
'purple' @color-purple,
'purple-light' @color-purple-light,
'pink' @color-pink,
'pink-light' @color-pink-light,
'red' @color-red,
'red-light' @color-red-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'amber' @color-amber,
'amber-light' @color-amber-light,
'amber-lightest' @color-amber-lightest,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'green-lightest' @color-green-lightest,
'teal' @color-teal,
'teal-light' @color-teal-light,
'blue' @color-blue,
'blue-light' @color-blue-light,
'indigo' @color-indigo,
'indigo-light' @color-indigo-light,
'purple' @color-purple,
'purple-light' @color-purple-light,
'pink' @color-pink,
'pink-light' @color-pink-light,
;
.define-bg-colors(@bg-colors; @screens);

10
src/utilities/borders.less
View File

@ -45,10 +45,12 @@
'red' @color-red,
'red-light' @color-red-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'amber' @color-amber,
'amber-light' @color-amber-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'teal' @color-teal,

10
src/utilities/text.less
View File

@ -69,10 +69,12 @@
'red' @color-red,
'red-light' @color-red-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'amber' @color-amber,
'amber-light' @color-amber-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'teal' @color-teal,