mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2026-02-01 17:26:34 +00:00
WIP on tons of color crap
This commit is contained in:
Adam Wathan
parent
5955bd2ae8
commit
e881b69bf5
@ -31,33 +31,3 @@ a {
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
|
||||
@text-colors:
|
||||
'light' @text-light,
|
||||
'light-soft' @text-light-soft,
|
||||
'light-softer' @text-light-softer,
|
||||
'light-softest' @text-light-softest,
|
||||
|
||||
'dark' @text-dark,
|
||||
'dark-soft' @text-dark-soft,
|
||||
'dark-softer' @text-dark-softer,
|
||||
'dark-softest' @text-dark-softest,
|
||||
|
||||
'primary' #3498DB,
|
||||
'primary-light' lighten(#3498DB, 25%),
|
||||
'primary-dark' #2980B9,
|
||||
;
|
||||
|
||||
@bg-colors:
|
||||
'light' hsl(0, 0%, 100%),
|
||||
'light-soft' hsl(0, 0%, 98%),
|
||||
'light-softer' hsl(0, 0%, 96%),
|
||||
|
||||
'dark' hsl(0, 0%, 33%),
|
||||
'dark-soft' hsl(0, 0%, 42%),
|
||||
'dark-softer' hsl(0, 0%, 52%),
|
||||
|
||||
'primary' #3498db,
|
||||
'primary-light' #a0cfee,
|
||||
'primary-dark' #2980b9,
|
||||
;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
.text-primary;
|
||||
.text-blue;
|
||||
}
|
||||
|
||||
p code {
|
||||
@ -38,13 +38,13 @@
|
||||
.text-dark-softer;
|
||||
.text-thin;
|
||||
.text-2xl;
|
||||
.text-primary;
|
||||
.text-blue;
|
||||
}
|
||||
|
||||
h2 {
|
||||
.mt-16;
|
||||
.mb-8;
|
||||
.text-primary;
|
||||
.text-blue;
|
||||
.leading-none;
|
||||
.text-thin;
|
||||
.text-xl;
|
||||
|
||||
@ -9,14 +9,14 @@
|
||||
<script type="text/javascript" src="/js/prism.js" defer=""></script>
|
||||
</head>
|
||||
<body class="full-height flex-col">
|
||||
<header class="px-8 py-6 bg-primary">
|
||||
<header class="px-8 py-6 bg-blue">
|
||||
<div class="flex-y-center">
|
||||
<svg class="mr-2" style="height: 34px; width: auto;" xmlns="http://www.w3.org/2000/svg" viewBox="173.345 95.819 442.976 281.173">
|
||||
<path fill="#ffffff" d="M173.345 188.574l100.745 78.263-.216 110.155 80.33-53.23-28.388-26.996 111.5 80.226L616.32 95.82l-442.975 92.754zM576.58 122.36L331.837 278.67l-39.912 67.82.622-86.155 284.03-137.974z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<a class="text-light text-lg" href="/">Tailwind CSS</a>
|
||||
<div class="text-primary-light text-xs">A utility-first CSS framework for rapid UI development</div>
|
||||
<div class="text-blue-light text-xs">A utility-first CSS framework for rapid UI development</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@ -24,36 +24,36 @@
|
||||
<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>
|
||||
<ul>
|
||||
<li><a class="{{ $page->getUrl() === '/' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/installation' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/changelog' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
|
||||
<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>
|
||||
<li><a class="{{ $page->getUrl() === '/changelog' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
|
||||
</ul>
|
||||
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Concepts</div>
|
||||
<ul>
|
||||
<li><a class="{{ $page->getUrl() === '/principles' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/customization' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/customization">Customization</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/responsive' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/responsive">Responsive</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/colors' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/colors">Colors</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/principles' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/customization' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/customization">Customization</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/responsive' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/responsive">Responsive</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/colors' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/colors">Colors</a></li>
|
||||
</ul>
|
||||
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
|
||||
<ul>
|
||||
<li><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/borders' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/constrain' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/display' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/flexbox' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/grid' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/images' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/position' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/shadows' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/spacing' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/text' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/z-index' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/backgrounds' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/backgrounds">Backgrounds</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/borders' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/borders">Borders</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/constrain' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/constrain">Constrain</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/display' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/display">Display</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/flexbox' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/grid' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/images' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/position' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/shadows' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/spacing' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/text' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/z-index' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
|
||||
</ul>
|
||||
<div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Components</div>
|
||||
<ul>
|
||||
<li><a class="{{ $page->getUrl() === '/buttons' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/buttons">Buttons</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/forms' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/buttons' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/buttons">Buttons</a></li>
|
||||
<li><a class="{{ $page->getUrl() === '/forms' ? 'text-blue' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="p-12 constrain-lg markdown">
|
||||
|
||||
@ -5,6 +5,73 @@ title: "Backgrounds"
|
||||
|
||||
# Backgrounds
|
||||
|
||||
<table class="text-sm" style="border-collapse: separate; border-spacing: 0; width: 100%;">
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-light border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-light-soft border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light-soft</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-light-softer border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-light-softer</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-dark border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-dark-soft border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark-soft</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-dark-softer border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-dark-softer</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-red border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-red</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-red-light border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-red-light</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-amber border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-amber-light border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber-light</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-green border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-green</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-green-light border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-green-light</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-blue border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-blue</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-blue-light border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-blue-light</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-indigo border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-indigo</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-indigo-light border-b border-dark-overlay-softer"></td>
|
||||
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-indigo-light</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Using the utilities in HTML:
|
||||
|
||||
```html
|
||||
|
||||
@ -13,18 +13,16 @@
|
||||
|
||||
@color-red: #f25451;
|
||||
@color-red-light: #fa8785;
|
||||
@color-orange: #ffb447;
|
||||
@color-orange-light: #ffce85;
|
||||
@color-yellow: #ffed4a;
|
||||
@color-yellow-light: #fff6a5;
|
||||
@color-amber: #ffd129;
|
||||
@color-amber-light: #ffedad;
|
||||
@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-indigo: #6b64cc;
|
||||
@color-indigo-light: #a9a4ed;
|
||||
@color-purple: #976ae6;
|
||||
@color-purple-light: #ceb3ff;
|
||||
@color-pink: #f66d9b;
|
||||
|
||||
@ -9,10 +9,8 @@
|
||||
|
||||
'red' @color-red,
|
||||
'red-light' @color-red-light,
|
||||
'orange' @color-orange,
|
||||
'orange-light' @color-orange-light,
|
||||
'yellow' @color-yellow,
|
||||
'yellow-light' @color-yellow-light,
|
||||
'amber' @color-amber,
|
||||
'amber-light' @color-amber-light,
|
||||
'green' @color-green,
|
||||
'green-light' @color-green-light,
|
||||
'teal' @color-teal,
|
||||
|
||||
@ -8,24 +8,57 @@
|
||||
;
|
||||
|
||||
// Colors
|
||||
@border-dark: hsl(0, 0%, 82%);
|
||||
@border-dark-soft: hsl(0, 0%, 90%);
|
||||
@border-dark-softer: hsl(0, 0%, 96%);
|
||||
@border-dark: @color-grey-600;
|
||||
@border-dark-soft: @color-grey-400;
|
||||
@border-dark-softer: @color-grey-300;
|
||||
|
||||
@border-light: hsl(0, 0%, 100%);
|
||||
@border-light-soft: hsl(0, 0%, 60%);
|
||||
@border-light-softer: hsl(0, 0%, 35%);
|
||||
@border-light: @color-white;
|
||||
@border-light-soft: @color-grey-100;
|
||||
@border-light-softer: @color-grey-200;
|
||||
|
||||
@border-dark-overlay: hsla(0, 0%, 0%, 20%);
|
||||
@border-dark-overlay-soft: hsla(0, 0%, 0%, 10%);
|
||||
@border-dark-overlay-softer: hsla(0, 0%, 0%, 5%);
|
||||
|
||||
@border-light-overlay: hsla(0, 0%, 100%, 100%);
|
||||
@border-light-overlay-soft: hsla(0, 0%, 100%, 60%);
|
||||
@border-light-overlay-softer: hsla(0, 0%, 100%, 35%);
|
||||
|
||||
@default-border-color: @border-dark-soft;
|
||||
|
||||
@border-colors:
|
||||
'dark' @border-dark,
|
||||
'dark-soft' @border-dark-soft,
|
||||
'dark-softer' @border-dark-softer,
|
||||
'dark' @border-dark,
|
||||
'dark-soft' @border-dark-soft,
|
||||
'dark-softer' @border-dark-softer,
|
||||
|
||||
'light' @border-light,
|
||||
'light-soft' @border-light-soft,
|
||||
'light' @border-light,
|
||||
'light-soft' @border-light-soft,
|
||||
'light-softer' @border-light-softer,
|
||||
|
||||
'dark-overlay' @border-dark-overlay,
|
||||
'dark-overlay-soft' @border-dark-overlay-soft,
|
||||
'dark-overlay-softer' @border-dark-overlay-softer,
|
||||
|
||||
'light-overlay' @border-light-overlay,
|
||||
'light-overlay-soft' @border-light-overlay-soft,
|
||||
'light-overlay-softer' @border-light-overlay-softer,
|
||||
|
||||
'red' @color-red,
|
||||
'red-light' @color-red-light,
|
||||
'amber' @color-amber,
|
||||
'amber-light' @color-amber-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,
|
||||
;
|
||||
|
||||
// Radius
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
'24' 6rem,
|
||||
;
|
||||
|
||||
@width-scale: @sizing-scale;
|
||||
|
||||
@ -69,10 +69,8 @@
|
||||
|
||||
'red' @color-red,
|
||||
'red-light' @color-red-light,
|
||||
'orange' @color-orange,
|
||||
'orange-light' @color-orange-light,
|
||||
'yellow' @color-yellow,
|
||||
'yellow-light' @color-yellow-light,
|
||||
'amber' @color-amber,
|
||||
'amber-light' @color-amber-light,
|
||||
'green' @color-green,
|
||||
'green-light' @color-green-light,
|
||||
'teal' @color-teal,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user