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-14 19:54:23 -04:00
parent 6e26f14d0a
commit 5955bd2ae8
3 changed files with 96 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/colors.less
View File

@ -1,13 +1,31 @@
@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: #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-white: @color-gray-10;
@color-black: @color-gray-1;
@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;

31
src/utilities/backgrounds.less
View File

@ -1,11 +1,30 @@
@bg-colors:
'light' hsl(0, 0%, 100%),
'light-soft' hsl(0, 0%, 98%),
'light-softer' hsl(0, 0%, 96%),
'light' @color-white,
'light-soft' @color-grey-100,
'light-softer' @color-grey-200,
'dark' hsl(0, 0%, 33%),
'dark-soft' hsl(0, 0%, 42%),
'dark-softer' hsl(0, 0%, 52%),
'dark' @color-grey-800,
'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,
;
.define-bg-colors(@bg-colors; @screens);

63
src/utilities/text.less
View File

@ -12,13 +12,13 @@
@line-height: 1.5;
// Sizes
@font-size-xs: (12rem / 16rem); // 12px
@font-size-sm: (14rem / 16rem); // 14px
@font-size-base: 1rem; // 16px
@font-size-lg: (18rem / 16rem); // 18px
@font-size-xl: (22rem / 16rem); // 22px
@font-size-2xl: (30rem / 16rem); // 30px
@font-size-3xl: (40rem / 16rem); // 40px
@font-size-xs: (12rem / 16rem); // 12px
@font-size-sm: (14rem / 16rem); // 14px
@font-size-base: (16rem / 16rem); // 16px
@font-size-lg: (18rem / 16rem); // 18px
@font-size-xl: (22rem / 16rem); // 22px
@font-size-2xl: (30rem / 16rem); // 30px
@font-size-3xl: (40rem / 16rem); // 40px
@text-size-scale:
'xs' @font-size-xs,
@ -46,26 +46,45 @@
;
// Colors
@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-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-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%);
@text-dark: @color-grey-800;
@text-dark-soft: @color-grey-600;
@text-dark-softer: @color-grey-500;
@text-dark-softest: @color-grey-400;
@text-colors:
'light' @text-light,
'light-soft' @text-light-soft,
'light-softer' @text-light-softer,
'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,
'dark' @text-dark,
'dark-soft' @text-dark-soft,
'dark-softer' @text-dark-softer,
'dark-softest' @text-dark-softest,
'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,
;
// Line heights