From d5f5d90c8d6756d2461dcb893582df89aecab04f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 18 Apr 2019 16:02:58 -0700 Subject: [PATCH 1/4] feat(support): add hue maps ($grays, $blues, etc.) --- src/support/variables/color-system.scss | 93 +++++++++++++++++++++++++ 1 file changed, 93 insertions(+) diff --git a/src/support/variables/color-system.scss b/src/support/variables/color-system.scss index 0ea1a7116c..7e12d49f91 100644 --- a/src/support/variables/color-system.scss +++ b/src/support/variables/color-system.scss @@ -112,3 +112,96 @@ $orange: $orange-500 !default; $gray-dark: $gray-900 !default; $gray-light: $gray-400 !default; $gray: $gray-500 !default; + +// -------- Color gradient maps -------- + +$grays: ( + 0: $gray-000, + 1: $gray-100, + 2: $gray-200, + 3: $gray-300, + 4: $gray-400, + 5: $gray-500, + 6: $gray-600, + 7: $gray-700, + 8: $gray-800, + 9: $gray-900, +); + +$blues: ( + 0: $blue-000, + 1: $blue-100, + 2: $blue-200, + 3: $blue-300, + 4: $blue-400, + 5: $blue-500, + 6: $blue-600, + 7: $blue-700, + 8: $blue-800, + 9: $blue-900, +); + +$greens: ( + 0: $green-000, + 1: $green-100, + 2: $green-200, + 3: $green-300, + 4: $green-400, + 5: $green-500, + 6: $green-600, + 7: $green-700, + 8: $green-800, + 9: $green-900, +); + +$yellows: ( + 0: $yellow-000, + 1: $yellow-100, + 2: $yellow-200, + 3: $yellow-300, + 4: $yellow-400, + 5: $yellow-500, + 6: $yellow-600, + 7: $yellow-700, + 8: $yellow-800, + 9: $yellow-900, +); + +$oranges: ( + 0: $orange-000, + 1: $orange-100, + 2: $orange-200, + 3: $orange-300, + 4: $orange-400, + 5: $orange-500, + 6: $orange-600, + 7: $orange-700, + 8: $orange-800, + 9: $orange-900, +); + +$reds: ( + 0: $red-000, + 1: $red-100, + 2: $red-200, + 3: $red-300, + 4: $red-400, + 5: $red-500, + 6: $red-600, + 7: $red-700, + 8: $red-800, + 9: $red-900, +); + +$purples: ( + 0: $purple-000, + 1: $purple-100, + 2: $purple-200, + 3: $purple-300, + 4: $purple-400, + 5: $purple-500, + 6: $purple-600, + 7: $purple-700, + 8: $purple-800, + 9: $purple-900, +); From 19b351b332d8105c1cf06ee00ad0e239dc4ce7b8 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 18 Apr 2019 16:09:38 -0700 Subject: [PATCH 2/4] add $hue-maps mapping of all the color gradients --- src/support/variables/color-system.scss | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/support/variables/color-system.scss b/src/support/variables/color-system.scss index 7e12d49f91..77ff3f74ee 100644 --- a/src/support/variables/color-system.scss +++ b/src/support/variables/color-system.scss @@ -126,7 +126,7 @@ $grays: ( 7: $gray-700, 8: $gray-800, 9: $gray-900, -); +) !default; $blues: ( 0: $blue-000, @@ -139,7 +139,7 @@ $blues: ( 7: $blue-700, 8: $blue-800, 9: $blue-900, -); +) !default; $greens: ( 0: $green-000, @@ -152,7 +152,7 @@ $greens: ( 7: $green-700, 8: $green-800, 9: $green-900, -); +) !default; $yellows: ( 0: $yellow-000, @@ -165,7 +165,7 @@ $yellows: ( 7: $yellow-700, 8: $yellow-800, 9: $yellow-900, -); +) !default; $oranges: ( 0: $orange-000, @@ -178,7 +178,7 @@ $oranges: ( 7: $orange-700, 8: $orange-800, 9: $orange-900, -); +) !default; $reds: ( 0: $red-000, @@ -191,7 +191,7 @@ $reds: ( 7: $red-700, 8: $red-800, 9: $red-900, -); +) !default; $purples: ( 0: $purple-000, @@ -204,4 +204,14 @@ $purples: ( 7: $purple-700, 8: $purple-800, 9: $purple-900, -); +) !default; + +$hue-maps: ( + gray: $grays, + blue: $blues, + green: $greens, + yellow: $yellows, + orange: $oranges, + red: $reds, + purple: $purples, +) !default; From 872d3096094835b2c71f98a0b23bc418786489b8 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 18 Apr 2019 16:10:05 -0700 Subject: [PATCH 3/4] feat(utilities): add .fg-{hue}-{index}, .bg-{hue}-{index} classes --- src/utilities/colors.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss index 00d019af16..1899c74634 100644 --- a/src/utilities/colors.scss +++ b/src/utilities/colors.scss @@ -32,6 +32,14 @@ /* Set the background to $bg-purple-light */ .bg-purple-light { background-color: $bg-purple-light !important; } +// Generate a foreground and background utility for every shade of every hue +@each $hue, $shades in $hue-maps { + @each $index, $color in $shades { + .fg-#{$hue}-#{$index} { color: $color !important; } + .bg-#{$hue}-#{$index} { background-color: $color !important; } + } +} + .bg-shade-gradient { background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important; background-repeat: no-repeat !important; From e3780e37d46a66fb3bc3e7c1068224e33831b5c7 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Fri, 26 Apr 2019 14:01:14 -0700 Subject: [PATCH 4/4] feat(utilities): prefix color system utils with "color-" (not "fg-") --- src/utilities/colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss index 1899c74634..341c5b64ff 100644 --- a/src/utilities/colors.scss +++ b/src/utilities/colors.scss @@ -35,7 +35,7 @@ // Generate a foreground and background utility for every shade of every hue @each $hue, $shades in $hue-maps { @each $index, $color in $shades { - .fg-#{$hue}-#{$index} { color: $color !important; } + .color-#{$hue}-#{$index} { color: $color !important; } .bg-#{$hue}-#{$index} { background-color: $color !important; } } }