wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Desaturate all default colors to pure gray

Browse source 
We should put some thought into the lightness scale for these too; a
lot of the numbers are currently oddly precise for framework defaults,
like 52% or 16%.
This commit is contained in:
Adam Wathan 2017-08-01 19:13:11 -04:00
parent 5319c64822
commit f323d5d5b2
4 changed files with 30 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/colors.less
View file

@ -1,15 +1,13 @@
@hue-gray: 208;
@color-gray-10: hsl(@hue-gray, 20%, 100%);
@color-gray-9: hsl(@hue-gray, 20%, 98%);
@color-gray-8: hsl(@hue-gray, 25%, 96%);
@color-gray-7: hsl(@hue-gray, 25%, 90%);
@color-gray-6: hsl(@hue-gray, 25%, 82%);
@color-gray-5: hsl(@hue-gray, 25%, 62%);
@color-gray-4: hsl(@hue-gray, 25%, 52%);
@color-gray-3: hsl(@hue-gray, 25%, 35%);
@color-gray-2: hsl(@hue-gray, 25%, 25%);
@color-gray-1: hsl(@hue-gray, 25%, 16%);
@color-gray-10: hsl(0, 0%, 100%);
@color-gray-9: hsl(0, 0%, 98%);
@color-gray-8: hsl(0, 0%, 96%);
@color-gray-7: hsl(0, 0%, 90%);
@color-gray-6: hsl(0, 0%, 82%);
@color-gray-5: hsl(0, 0%, 62%);
@color-gray-4: hsl(0, 0%, 52%);
@color-gray-3: hsl(0, 0%, 35%);
@color-gray-2: hsl(0, 0%, 25%);
@color-gray-1: hsl(0, 0%, 16%);
@color-white: @color-gray-10;
@color-black: @color-gray-1;

19
src/utilities/backgrounds.less
View file

@ -1,14 +1,10 @@
@bg-light-hue: @hue-gray;
@bg-light: hsl(@bg-light-hue, 0%, 100%);
@bg-light-soft: hsl(@bg-light-hue, 20%, 98%);
@bg-light-softer: hsl(@bg-light-hue, 20%, 96%);
@bg-light: hsl(0, 0%, 100%);
@bg-light-soft: hsl(0, 0%, 98%);
@bg-light-softer: hsl(0, 0%, 96%);
@bg-dark-hue: @hue-gray;
@bg-dark: hsl(@bg-dark-hue, 14%, 33%);
@bg-dark-soft: hsl(@bg-dark-hue, 14%, 42%);
@bg-dark-softer: hsl(@bg-dark-hue, 14%, 52%);
@bg-highlight: hsl(215, 99%, 63%);
@bg-dark: hsl(0, 0%, 33%);
@bg-dark-soft: hsl(0, 0%, 42%);
@bg-dark-softer: hsl(0, 0%, 52%);
.bg-light { background-color: @bg-light; }
.bg-light-soft { background-color: @bg-light-soft; }
@ -26,9 +22,6 @@
.bg-overlay-soft { background-color: rgba(0,0,0,0.5); }
.bg-overlay-dark { background-color: rgba(0,0,0,0.75); }
.bg-highlight { background-color: @bg-highlight; }
.hover-bg-highlight { &:hover { .bg-highlight; } }
.generate-responsive-versions({
&bg-light { .bg-light; }
&bg-light-soft { .bg-light-soft; }

13
src/utilities/borders.less
View file

@ -1,11 +1,10 @@
@border-dark-hue: @hue-gray;
@border-dark: hsl(@border-dark-hue, 25%, 82%);
@border-dark-soft: hsl(@border-dark-hue, 25%, 90%);
@border-dark-softer: hsl(@border-dark-hue, 25%, 96%);
@border-dark: hsl(0, 0%, 82%);
@border-dark-soft: hsl(0, 0%, 90%);
@border-dark-softer: hsl(0, 0%, 96%);
@border-light: @color-white;
@border-light-soft: fade(@color-white, 60%);
@border-light-softer: fade(@color-white, 35%);
@border-light: hsl(0, 0%, 100%);
@border-light-soft: hsl(0, 0%, 60%);
@border-light-softer: hsl(0, 0%, 35%);
@border-default-color: @border-dark-soft;

17
src/utilities/text.less
View file

@ -23,16 +23,15 @@
@font-weight-bold: 700;
// Colors
@text-light: @color-white;
@text-light-soft: fade(@color-white, 60%);
@text-light-softer: fade(@color-white, 45%);
@text-light-softest: fade(@color-white, 35%);
@text-light: hsl(0, 0%, 100%);
@text-light-soft: hsl(0, 0%, 60%);
@text-light-softer: hsl(0, 0%, 45%);
@text-light-softest: hsl(0, 0%, 35%);
@text-dark-hue: @hue-gray;
@text-dark: hsl(@text-dark-hue, 0%, 25%);
@text-dark-soft: hsl(@text-dark-hue, 0%, 50%);
@text-dark-softer: hsl(@text-dark-hue, 0%, 65%);
@text-dark-softest: hsl(@text-dark-hue, 0%, 75%);
@text-dark: hsl(0, 0%, 25%);
@text-dark-soft: hsl(0, 0%, 50%);
@text-dark-softer: hsl(0, 0%, 65%);
@text-dark-softest: hsl(0, 0%, 75%);
// Sizes