diff options
author | Mark Otto <markd.otto@gmail.com> | 2021-07-07 00:31:20 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-07 00:31:20 +0300 |
commit | 47bbd945f0f92f50dd2f2dbdd78d10ada39a41cb (patch) | |
tree | 4bb93b698a31b403cfed938d38e5365493133e0e /scss | |
parent | 66ce774e2abc0b10ef204b1a88cb750abaa96e93 (diff) |
Add maps for all colors, document how to extend color utilities (#32319)
* Add maps for all colors, document how to extend color utilities
* Updates to make this more functional for v5
- Moves color maps into _variables.scss for now (felt weird to split them out when the variables are there)
- Adds a new function, map-merge-multiple(), and updates docs that reference combo-map
- Updates code snippet and docs guidance about how to extend the color utils to handle this
* Update site/content/docs/5.0/customize/color.md
Co-authored-by: Gaƫl Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_functions.scss | 10 | ||||
-rw-r--r-- | scss/_variables.scss | 120 |
2 files changed, 130 insertions, 0 deletions
diff --git a/scss/_functions.scss b/scss/_functions.scss index 870f36790f..f8e43702d5 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -55,6 +55,16 @@ @return $result; } +// Merge multiple maps +@function map-merge-multiple($maps...) { + $merged-maps: (); + + @each $map in $maps { + $merged-maps: map-merge($merged-maps, $map); + } + @return $merged-maps; +} + // Replace `$search` with `$replace` in `$string` // Used on our SVG icon backgrounds for custom forms. // diff --git a/scss/_variables.scss b/scss/_variables.scss index 7f93df4e34..f790214670 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -198,6 +198,126 @@ $cyan-600: shade-color($cyan, 20%) !default; $cyan-700: shade-color($cyan, 40%) !default; $cyan-800: shade-color($cyan, 60%) !default; $cyan-900: shade-color($cyan, 80%) !default; + +$blues: ( + "blue-100": $blue-100, + "blue-200": $blue-200, + "blue-300": $blue-300, + "blue-400": $blue-400, + "blue-500": $blue-500, + "blue-600": $blue-600, + "blue-700": $blue-700, + "blue-800": $blue-800, + "blue-900": $blue-900 +) !default; + +$indigos: ( + "indigo-100": $indigo-100, + "indigo-200": $indigo-200, + "indigo-300": $indigo-300, + "indigo-400": $indigo-400, + "indigo-500": $indigo-500, + "indigo-600": $indigo-600, + "indigo-700": $indigo-700, + "indigo-800": $indigo-800, + "indigo-900": $indigo-900 +) !default; + +$purples: ( + "purple-100": $purple-200, + "purple-200": $purple-100, + "purple-300": $purple-300, + "purple-400": $purple-400, + "purple-500": $purple-500, + "purple-600": $purple-600, + "purple-700": $purple-700, + "purple-800": $purple-800, + "purple-900": $purple-900 +) !default; + +$pinks: ( + "pink-100": $pink-100, + "pink-200": $pink-200, + "pink-300": $pink-300, + "pink-400": $pink-400, + "pink-500": $pink-500, + "pink-600": $pink-600, + "pink-700": $pink-700, + "pink-800": $pink-800, + "pink-900": $pink-900 +) !default; + +$reds: ( + "red-100": $red-100, + "red-200": $red-200, + "red-300": $red-300, + "red-400": $red-400, + "red-500": $red-500, + "red-600": $red-600, + "red-700": $red-700, + "red-800": $red-800, + "red-900": $red-900 +) !default; + +$oranges: ( + "orange-100": $orange-100, + "orange-200": $orange-200, + "orange-300": $orange-300, + "orange-400": $orange-400, + "orange-500": $orange-500, + "orange-600": $orange-600, + "orange-700": $orange-700, + "orange-800": $orange-800, + "orange-900": $orange-900 +) !default; + +$yellows: ( + "yellow-100": $yellow-100, + "yellow-200": $yellow-200, + "yellow-300": $yellow-300, + "yellow-400": $yellow-400, + "yellow-500": $yellow-500, + "yellow-600": $yellow-600, + "yellow-700": $yellow-700, + "yellow-800": $yellow-800, + "yellow-900": $yellow-900 +) !default; + +$greens: ( + "green-100": $green-100, + "green-200": $green-200, + "green-300": $green-300, + "green-400": $green-400, + "green-500": $green-500, + "green-600": $green-600, + "green-700": $green-700, + "green-800": $green-800, + "green-900": $green-900 +) !default; + +$teals: ( + "teal-100": $teal-100, + "teal-200": $teal-200, + "teal-300": $teal-300, + "teal-400": $teal-400, + "teal-500": $teal-500, + "teal-600": $teal-600, + "teal-700": $teal-700, + "teal-800": $teal-800, + "teal-900": $teal-900 +) !default; + +$cyans: ( + "cyan-100": $cyan-100, + "cyan-200": $cyan-200, + "cyan-300": $cyan-300, + "cyan-400": $cyan-400, + "cyan-500": $cyan-500, + "cyan-600": $cyan-600, + "cyan-700": $cyan-700, + "cyan-800": $cyan-800, + "cyan-900": $cyan-900 +) !default; // fusv-enable // Characters which are escaped by the escape-svg function |