Merge pull request #84 from adamwathan/new-greys
Switch from neutral greys to cool greys
This commit is contained in:
Adam Wathan
GitHub
commit
620192955b
5 changed files with 314 additions and 157 deletions
|
|
@ -5,105 +5,179 @@ 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-orange 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-orange</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-orange-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-orange-light</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-yellow 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-yellow</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-yellow-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-yellow-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-teal 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-teal</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-teal-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-teal-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>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-purple 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-purple</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-purple-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-purple-light</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-pink 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-pink</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="w-24 h-12 bg-pink-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-pink-light</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
</table>
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#colors">Colors</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
|
||||
<div class="row pull-x-4 mb-4">
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="bg-light px-6 py-4 text-sm">
|
||||
.bg-light
|
||||
</div>
|
||||
<div class="bg-light-soft px-6 py-4 text-sm">
|
||||
.bg-light-soft
|
||||
</div>
|
||||
<div class="bg-light-softer px-6 py-4 text-sm">
|
||||
.bg-light-softer
|
||||
</div>
|
||||
<div class="bg-light-softest px-6 py-4 text-sm">
|
||||
.bg-light-softest
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-dark px-6 py-4 text-sm">
|
||||
.bg-dark
|
||||
</div>
|
||||
<div class="text-light bg-dark-soft px-6 py-4 text-sm">
|
||||
.bg-dark-soft
|
||||
</div>
|
||||
<div class="text-light bg-dark-softer px-6 py-4 text-sm">
|
||||
.bg-dark-softer
|
||||
</div>
|
||||
<div class="text-light bg-dark-softest px-6 py-4 text-sm">
|
||||
.bg-dark-softest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pull-x-4 mb-4">
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-red-dark px-6 py-4 text-sm">
|
||||
.bg-red-dark
|
||||
</div>
|
||||
<div class="text-light bg-red px-6 py-4 text-sm">
|
||||
.bg-red
|
||||
</div>
|
||||
<div class="text-light bg-red-light px-6 py-4 text-sm">
|
||||
.bg-red-light
|
||||
</div>
|
||||
<div class="text-red-dark bg-red-lightest px-6 py-4 text-sm">
|
||||
.bg-red-lightest
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-orange-dark px-6 py-4 text-sm">
|
||||
.bg-orange-dark
|
||||
</div>
|
||||
<div class="text-light bg-orange px-6 py-4 text-sm">
|
||||
.bg-orange
|
||||
</div>
|
||||
<div class="text-light bg-orange-light px-6 py-4 text-sm">
|
||||
.bg-orange-light
|
||||
</div>
|
||||
<div class="text-orange-dark bg-orange-lightest px-6 py-4 text-sm">
|
||||
.bg-orange-lightest
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-yellow-dark px-6 py-4 text-sm">
|
||||
.bg-yellow-dark
|
||||
</div>
|
||||
<div class="text-light bg-yellow px-6 py-4 text-sm">
|
||||
.bg-yellow
|
||||
</div>
|
||||
<div class="text-light bg-yellow-light px-6 py-4 text-sm">
|
||||
.bg-yellow-light
|
||||
</div>
|
||||
<div class="text-yellow-dark bg-yellow-lightest px-6 py-4 text-sm">
|
||||
.bg-yellow-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pull-x-4 mb-4">
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-green-dark px-6 py-4 text-sm">
|
||||
.bg-green-dark
|
||||
</div>
|
||||
<div class="text-light bg-green px-6 py-4 text-sm">
|
||||
.bg-green
|
||||
</div>
|
||||
<div class="text-light bg-green-light px-6 py-4 text-sm">
|
||||
.bg-green-light
|
||||
</div>
|
||||
<div class="text-green-dark bg-green-lightest px-6 py-4 text-sm">
|
||||
.bg-green-lightest
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-teal-dark px-6 py-4 text-sm">
|
||||
.bg-teal-dark
|
||||
</div>
|
||||
<div class="text-light bg-teal px-6 py-4 text-sm">
|
||||
.bg-teal
|
||||
</div>
|
||||
<div class="text-light bg-teal-light px-6 py-4 text-sm">
|
||||
.bg-teal-light
|
||||
</div>
|
||||
<div class="text-teal-dark bg-teal-lightest px-6 py-4 text-sm">
|
||||
.bg-teal-lightest
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-blue-dark px-6 py-4 text-sm">
|
||||
.bg-blue-dark
|
||||
</div>
|
||||
<div class="text-light bg-blue px-6 py-4 text-sm">
|
||||
.bg-blue
|
||||
</div>
|
||||
<div class="text-light bg-blue-light px-6 py-4 text-sm">
|
||||
.bg-blue-light
|
||||
</div>
|
||||
<div class="text-blue-dark bg-blue-lightest px-6 py-4 text-sm">
|
||||
.bg-blue-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pull-x-4 mb-4">
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-indigo-dark px-6 py-4 text-sm">
|
||||
.bg-indigo-dark
|
||||
</div>
|
||||
<div class="text-light bg-indigo px-6 py-4 text-sm">
|
||||
.bg-indigo
|
||||
</div>
|
||||
<div class="text-light bg-indigo-light px-6 py-4 text-sm">
|
||||
.bg-indigo-light
|
||||
</div>
|
||||
<div class="text-indigo-dark bg-indigo-lightest px-6 py-4 text-sm">
|
||||
.bg-indigo-lightest
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-purple-dark px-6 py-4 text-sm">
|
||||
.bg-purple-dark
|
||||
</div>
|
||||
<div class="text-light bg-purple px-6 py-4 text-sm">
|
||||
.bg-purple
|
||||
</div>
|
||||
<div class="text-light bg-purple-light px-6 py-4 text-sm">
|
||||
.bg-purple-light
|
||||
</div>
|
||||
<div class="text-purple-dark bg-purple-lightest px-6 py-4 text-sm">
|
||||
.bg-purple-lightest
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 px-4">
|
||||
<div class="text-light bg-pink-dark px-6 py-4 text-sm">
|
||||
.bg-pink-dark
|
||||
</div>
|
||||
<div class="text-light bg-pink px-6 py-4 text-sm">
|
||||
.bg-pink
|
||||
</div>
|
||||
<div class="text-light bg-pink-light px-6 py-4 text-sm">
|
||||
.bg-pink-light
|
||||
</div>
|
||||
<div class="text-pink-dark bg-pink-lightest px-6 py-4 text-sm">
|
||||
.bg-pink-lightest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Using the utilities in HTML:
|
||||
|
||||
|
|
@ -135,7 +209,7 @@ div {
|
|||
}
|
||||
```
|
||||
|
||||
## Responsive
|
||||
<h2 id="responsive">Responsive</h2>
|
||||
|
||||
The background utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
|
||||
|
||||
|
|
@ -156,42 +230,125 @@ div {
|
|||
```
|
||||
|
||||
|
||||
## Custom backgrounds
|
||||
<h2 id="customizing">Customizing</h2>
|
||||
|
||||
How to generate custom background utilities:
|
||||
To customize the available background colors, start by creating a copy of the default `@bg-colors` variable in your own Less file:
|
||||
|
||||
```less
|
||||
.define-text-color('primary';
|
||||
default #3498db,
|
||||
'light' #a0cfee,
|
||||
'dark' #2980b9
|
||||
;);
|
||||
@bg-colors:
|
||||
'light' @color-white,
|
||||
'light-soft' @color-grey-200,
|
||||
'light-softer' @color-grey-300,
|
||||
|
||||
'dark' @color-grey-900,
|
||||
'dark-soft' @color-grey-800,
|
||||
'dark-softer' @color-grey-700,
|
||||
|
||||
'red-dark' @color-red-dark,
|
||||
'red' @color-red,
|
||||
'red-light' @color-red-light,
|
||||
'red-lightest' @color-red-lightest,
|
||||
|
||||
'orange-dark' @color-orange-dark,
|
||||
'orange' @color-orange,
|
||||
'orange-light' @color-orange-light,
|
||||
'orange-lightest' @color-orange-lightest,
|
||||
|
||||
'yellow-dark' @color-yellow-dark,
|
||||
'yellow' @color-yellow,
|
||||
'yellow-light' @color-yellow-light,
|
||||
'yellow-lightest' @color-yellow-lightest,
|
||||
|
||||
'green-dark' @color-green-dark,
|
||||
'green' @color-green,
|
||||
'green-light' @color-green-light,
|
||||
'green-lightest' @color-green-lightest,
|
||||
|
||||
'teal-dark' @color-teal-dark,
|
||||
'teal' @color-teal,
|
||||
'teal-light' @color-teal-light,
|
||||
'teal-lightest' @color-teal-lightest,
|
||||
|
||||
'blue-dark' @color-blue-dark,
|
||||
'blue' @color-blue,
|
||||
'blue-light' @color-blue-light,
|
||||
'blue-lightest' @color-blue-lightest,
|
||||
|
||||
'indigo-dark' @color-indigo-dark,
|
||||
'indigo' @color-indigo,
|
||||
'indigo-light' @color-indigo-light,
|
||||
'indigo-lightest' @color-indigo-lightest,
|
||||
|
||||
'purple-dark' @color-purple-dark,
|
||||
'purple' @color-purple,
|
||||
'purple-light' @color-purple-light,
|
||||
'purple-lightest' @color-purple-lightest,
|
||||
|
||||
'pink-dark' @color-pink-dark,
|
||||
'pink' @color-pink,
|
||||
'pink-light' @color-pink-light,
|
||||
'pink-lightest' @color-pink-lightest,
|
||||
;
|
||||
```
|
||||
|
||||
How to use custom background utilities:
|
||||
If you don't need certain background colors, remove them or comment them out to prevent those utilities from being generated:
|
||||
|
||||
```less
|
||||
@bg-colors:
|
||||
// ...
|
||||
|
||||
// 'yellow-dark' @color-yellow-dark,
|
||||
// 'yellow' @color-yellow,
|
||||
// 'yellow-light' @color-yellow-light,
|
||||
// 'yellow-lightest' @color-yellow-lightest,
|
||||
|
||||
'green-dark' @color-green-dark,
|
||||
'green' @color-green,
|
||||
'green-light' @color-green-light,
|
||||
'green-lightest' @color-green-lightest,
|
||||
|
||||
// 'teal-dark' @color-teal-dark,
|
||||
// 'teal' @color-teal,
|
||||
// 'teal-light' @color-teal-light,
|
||||
// 'teal-lightest' @color-teal-lightest,
|
||||
|
||||
'blue-dark' @color-blue-dark,
|
||||
'blue' @color-blue,
|
||||
'blue-light' @color-blue-light,
|
||||
'blue-lightest' @color-blue-lightest,
|
||||
|
||||
'indigo-dark' @color-indigo-dark,
|
||||
'indigo' @color-indigo,
|
||||
'indigo-light' @color-indigo-light,
|
||||
'indigo-lightest' @color-indigo-lightest,
|
||||
|
||||
// 'purple-dark' @color-purple-dark,
|
||||
// 'purple' @color-purple,
|
||||
// 'purple-light' @color-purple-light,
|
||||
// 'purple-lightest' @color-purple-lightest,
|
||||
|
||||
// 'pink-dark' @color-pink-dark,
|
||||
// 'pink' @color-pink,
|
||||
// 'pink-light' @color-pink-light,
|
||||
// 'pink-lightest' @color-pink-lightest,
|
||||
;
|
||||
```
|
||||
|
||||
If you'd like to add new background colors, add them to the end of the `@bg-colors` variable like so:
|
||||
|
||||
```less
|
||||
@bg-colors:
|
||||
// ...
|
||||
|
||||
'brand-primary' #cf4646,
|
||||
'brand-secondary' #f6c92e,
|
||||
;
|
||||
```
|
||||
|
||||
New background color utilities (including responsive versions) will be generated for those colors and can be used in your markup like any other background color utility:
|
||||
|
||||
```html
|
||||
<!-- Using custom utilities in HTML: -->
|
||||
|
||||
<div class="bg-primary"></div>
|
||||
<div class="bg-primary-light"></div>
|
||||
<div class="bg-primary-dark"></div>
|
||||
|
||||
<!-- Responsive example -->
|
||||
<div class="bg-primary sm:bg-primary-dark"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
// Using custom utilities in Less:
|
||||
|
||||
div {
|
||||
.bg-primary;
|
||||
.bg-primary-light;
|
||||
.bg-primary-dark;
|
||||
|
||||
// Responsive example
|
||||
.screen(lg, {
|
||||
.bg-primary;
|
||||
});
|
||||
}
|
||||
<div class="bg-brand-primary md:bg-brand-secondary">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
@color-white: #ffffff;
|
||||
@color-grey-50: #fafafa;
|
||||
@color-grey-100: #f5f5f5;
|
||||
@color-grey-200: #eeeeee;
|
||||
@color-grey-300: #e0e0e0;
|
||||
@color-grey-400: #bdbdbd;
|
||||
@color-grey-500: #9e9e9e;
|
||||
@color-grey-600: #757575;
|
||||
@color-grey-700: #616161;
|
||||
@color-grey-800: #424242;
|
||||
@color-grey-900: #212121;
|
||||
@color-black: #000000;
|
||||
@color-grey-900: #212b35;
|
||||
@color-grey-800: #404e5c;
|
||||
@color-grey-700: #647382;
|
||||
@color-grey-600: #919eab;
|
||||
@color-grey-500: #c5ced6;
|
||||
@color-grey-400: #dfe3e8;
|
||||
@color-grey-300: #f0f2f5;
|
||||
@color-grey-200: #f7f9fa;
|
||||
@color-white: #ffffff;
|
||||
|
||||
@color-red-dark: #d43633;
|
||||
@color-red: #f25451;
|
||||
|
|
@ -19,12 +17,12 @@
|
|||
@color-orange-dark: #f29500;
|
||||
@color-orange: #ffb82b;
|
||||
@color-orange-light: #ffd685;
|
||||
@color-orange-lightest: #fff8eb;
|
||||
@color-orange-lightest: #fff8eb;
|
||||
|
||||
@color-yellow-dark: #ffc400;
|
||||
@color-yellow: #ffe14a;
|
||||
@color-yellow-light: #ffea83;
|
||||
@color-yellow-lightest: #fffbe5;
|
||||
@color-yellow-lightest: #fffbe5;
|
||||
|
||||
@color-green-dark: #34ae4c;
|
||||
@color-green: #57d06f;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
@bg-colors:
|
||||
'light' @color-white,
|
||||
'light-soft' @color-grey-100,
|
||||
'light-softer' @color-grey-200,
|
||||
'light-soft' @color-grey-200,
|
||||
'light-softer' @color-grey-300,
|
||||
'light-softest' @color-grey-400,
|
||||
|
||||
'dark' @color-grey-800,
|
||||
'dark-soft' @color-grey-700,
|
||||
'dark-softer' @color-grey-600,
|
||||
'dark' @color-grey-900,
|
||||
'dark-soft' @color-grey-800,
|
||||
'dark-softer' @color-grey-700,
|
||||
'dark-softest' @color-grey-600,
|
||||
|
||||
'red-dark' @color-red-dark,
|
||||
'red' @color-red,
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
|
||||
// Colors
|
||||
@border-dark: @color-grey-600;
|
||||
@border-dark-soft: @color-grey-400;
|
||||
@border-dark-softer: @color-grey-300;
|
||||
@border-dark-soft: @color-grey-500;
|
||||
@border-dark-softer: @color-grey-400;
|
||||
|
||||
@border-light: @color-white;
|
||||
@border-light-soft: @color-grey-100;
|
||||
@border-light-softer: @color-grey-200;
|
||||
@border-light-soft: @color-grey-200;
|
||||
@border-light-softer: @color-grey-300;
|
||||
|
||||
@border-dark-overlay: hsla(0, 0%, 0%, 20%);
|
||||
@border-dark-overlay-soft: hsla(0, 0%, 0%, 10%);
|
||||
|
|
|
|||
|
|
@ -53,10 +53,10 @@
|
|||
@text-light-softer: fade(@color-white, 45%);
|
||||
@text-light-softest: fade(@color-white, 35%);
|
||||
|
||||
@text-dark: @color-grey-800;
|
||||
@text-dark-soft: @color-grey-600;
|
||||
@text-dark-softer: @color-grey-500;
|
||||
@text-dark-softest: @color-grey-400;
|
||||
@text-dark: @color-grey-900;
|
||||
@text-dark-soft: @color-grey-700;
|
||||
@text-dark-softer: @color-grey-600;
|
||||
@text-dark-softest: @color-grey-500;
|
||||
|
||||
@text-colors:
|
||||
'light' @text-light,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue