Merge pull request #2902 from uswds/dw-blue-cool

Add blue-cool color family
uswds · Feb 2, 2019 · 798945e · 798945e
2 parents da06b50 + eb45108
commit 798945e
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 1 deletion.
diff --git a/src/data/colors/blue-cool.json b/src/data/colors/blue-cool.json
@@ -0,0 +1,40 @@
+{
+  "global": {
+    "category": "system-color-blue-cool"
+  },
+  "props": [
+    {
+      "name": "blue-cool",
+      "value": [
+        { "name": "5", "value": "#e7f2f5" },
+        { "name": "10", "value": "#dae9ee" },
+        { "name": "20", "value": "#adcfdb" },
+        { "name": "30", "value": "#83b5c9" },
+        { "name": "40", "value": "#529ab7" },
+        { "name": "50", "value": "#0d7ca0" },
+        { "name": "60", "value": "#07648d" },
+        { "name": "70", "value": "#074b69" },
+        { "name": "80", "value": "#14333d" },
+        { "name": "90", "value": "#0f191c" },
+        {
+          "name": "vivid",
+          "value": [
+            { "name": "5", "value": false },
+            { "name": "10", "value": false },
+            { "name": "20", "value": false },
+            { "name": "30", "value": false },
+            { "name": "40", "value": false },
+            { "name": "50", "value": false },
+            { "name": "60", "value": false },
+            { "name": "70", "value": false },
+            { "name": "80", "value": false },
+            { "name": "90", "value": false }
+          ]
+        }
+      ]
+    }
+  ],
+  "options": {
+    "file": "system-color"
+  }
+}
diff --git a/src/stylesheets/core/_system-tokens.scss b/src/stylesheets/core/_system-tokens.scss
@@ -248,6 +248,7 @@ Colors
 @import './system-tokens/mint';
 @import './system-tokens/mint-cool';
 @import './system-tokens/cyan';
+@import './system-tokens/blue-cool';
 @import './system-tokens/blue';
 @import './system-tokens/blue-warm';
 @import './system-tokens/indigo-cool';
@@ -303,6 +304,7 @@ $system-colors: map-collect(
   $system-color-mint,
   $system-color-mint-cool,
   $system-color-cyan,
+  $system-color-blue-cool,
   $system-color-blue,
   $system-color-blue-warm,
   $system-color-indigo-cool,
@@ -617,6 +619,28 @@ $color-cyan-70v:  get-system-color('cyan', 70, 'vivid');
 $color-cyan-80v:  get-system-color('cyan', 80, 'vivid');
 $color-cyan-90v:  get-system-color('cyan', 90, 'vivid');
 
+// blue-cool
+$color-blue-cool-5:    get-system-color('blue-cool', 5);
+$color-blue-cool-10:   get-system-color('blue-cool', 10);
+$color-blue-cool-20:   get-system-color('blue-cool', 20);
+$color-blue-cool-30:   get-system-color('blue-cool', 30);
+$color-blue-cool-40:   get-system-color('blue-cool', 40);
+$color-blue-cool-50:   get-system-color('blue-cool', 50);
+$color-blue-cool-60:   get-system-color('blue-cool', 60);
+$color-blue-cool-70:   get-system-color('blue-cool', 70);
+$color-blue-cool-80:   get-system-color('blue-cool', 80);
+$color-blue-cool-90:   get-system-color('blue-cool', 90);
+$color-blue-cool-5v:   get-system-color('blue-cool', 5, 'vivid');
+$color-blue-cool-10v:  get-system-color('blue-cool', 10, 'vivid');
+$color-blue-cool-20v:  get-system-color('blue-cool', 20, 'vivid');
+$color-blue-cool-30v:  get-system-color('blue-cool', 30, 'vivid');
+$color-blue-cool-40v:  get-system-color('blue-cool', 40, 'vivid');
+$color-blue-cool-50v:  get-system-color('blue-cool', 50, 'vivid');
+$color-blue-cool-60v:  get-system-color('blue-cool', 60, 'vivid');
+$color-blue-cool-70v:  get-system-color('blue-cool', 70, 'vivid');
+$color-blue-cool-80v:  get-system-color('blue-cool', 80, 'vivid');
+$color-blue-cool-90v:  get-system-color('blue-cool', 90, 'vivid');
+
 // blue
 $color-blue-5:    get-system-color('blue', 5);
 $color-blue-10:   get-system-color('blue', 10);
@@ -1109,6 +1133,26 @@ $system-color-shortcodes: (
   'cyan-70v':             $color-cyan-70v,
   'cyan-80v':             $color-cyan-80v,
   'cyan-90v':             $color-cyan-90v,
+  'blue-cool-5':          $color-blue-cool-5,
+  'blue-cool-10':         $color-blue-cool-10,
+  'blue-cool-20':         $color-blue-cool-20,
+  'blue-cool-30':         $color-blue-cool-30,
+  'blue-cool-40':         $color-blue-cool-40,
+  'blue-cool-50':         $color-blue-cool-50,
+  'blue-cool-60':         $color-blue-cool-60,
+  'blue-cool-70':         $color-blue-cool-70,
+  'blue-cool-80':         $color-blue-cool-80,
+  'blue-cool-90':         $color-blue-cool-90,
+  'blue-cool-5v':         $color-blue-cool-5v,
+  'blue-cool-10v':        $color-blue-cool-10v,
+  'blue-cool-20v':        $color-blue-cool-20v,
+  'blue-cool-30v':        $color-blue-cool-30v,
+  'blue-cool-40v':        $color-blue-cool-40v,
+  'blue-cool-50v':        $color-blue-cool-50v,
+  'blue-cool-60v':        $color-blue-cool-60v,
+  'blue-cool-70v':        $color-blue-cool-70v,
+  'blue-cool-80v':        $color-blue-cool-80v,
+  'blue-cool-90v':        $color-blue-cool-90v,
   'blue-5':               $color-blue-5,
   'blue-10':              $color-blue-10,
   'blue-20':              $color-blue-20,

diff --git a/src/stylesheets/core/system-tokens/_blue-cool.scss b/src/stylesheets/core/system-tokens/_blue-cool.scss
@@ -0,0 +1,26 @@
+$system-color-blue-cool: (
+  'blue-cool': (
+    5: #e7f2f5,
+    10: #dae9ee,
+    20: #adcfdb,
+    30: #83b5c9,
+    40: #529ab7,
+    50: #0d7ca0,
+    60: #07648d,
+    70: #074b69,
+    80: #14333d,
+    90: #0f191c,
+    'vivid': (
+      5: false,
+      10: false,
+      20: false,
+      30: false,
+      40: false,
+      50: false,
+      60: false,
+      70: false,
+      80: false,
+      90: false,
+    ),
+  ),
+);
diff --git a/src/stylesheets/utilities/palettes/_all.scss b/src/stylesheets/utilities/palettes/_all.scss
@@ -9,6 +9,7 @@
 @import 'colors/gray-cool-palettes';
 @import 'colors/gray-palettes';
 @import 'colors/gray-warm-palettes';
+@import 'colors/blue-cool-palettes';
 @import 'colors/blue-palettes';
 @import 'colors/blue-warm-palettes';
 @import 'colors/cyan-palettes';

diff --git a/src/stylesheets/utilities/palettes/_palette-registry.scss b/src/stylesheets/utilities/palettes/_palette-registry.scss
@@ -17,6 +17,7 @@ $palette-registry: map-collect(
   $palettes-color,
   $palettes-color-black-transparent,
   $palettes-color-blue-warm,
+  $palettes-color-blue-cool,
   $palettes-color-blue,
   $palettes-color-cyan,
   $palettes-color-gray-cool,

diff --git a/src/stylesheets/utilities/palettes/colors/_all-colors-palettes.scss b/src/stylesheets/utilities/palettes/colors/_all-colors-palettes.scss
@@ -12,10 +12,10 @@ $tokens-color-system: map-collect(
   $tokens-color-gray-cool,
   $tokens-color-gray,
   $tokens-color-gray-warm,
+  $tokens-color-blue-cool,
   $tokens-color-blue,
   $tokens-color-blue-warm,
   $tokens-color-cyan,
-  $tokens-color-cyan,
   $tokens-color-gold,
   $tokens-color-green-cool,
   $tokens-color-green,

diff --git a/src/stylesheets/utilities/palettes/colors/_blue-cool-palettes.scss b/src/stylesheets/utilities/palettes/colors/_blue-cool-palettes.scss
@@ -0,0 +1,66 @@
+$tokens-color-blue-cool-light: (
+  'blue-cool-5':  $color-blue-cool-5,
+  'blue-cool-10': $color-blue-cool-10,
+  'blue-cool-20': $color-blue-cool-20,
+  'blue-cool-30': $color-blue-cool-30,
+);
+
+$tokens-color-blue-cool-medium: (
+  'blue-cool-40': $color-blue-cool-40,
+  'blue-cool-50': $color-blue-cool-50,
+  'blue-cool-60': $color-blue-cool-60,
+);
+
+$tokens-color-blue-cool-dark: (
+  'blue-cool-70': $color-blue-cool-70,
+  'blue-cool-80': $color-blue-cool-80,
+  'blue-cool-90': $color-blue-cool-90,
+);
+
+$tokens-color-blue-cool-light-vivid: (
+  'blue-cool-5v':  $color-blue-cool-5v,
+  'blue-cool-10v': $color-blue-cool-10v,
+  'blue-cool-20v': $color-blue-cool-20v,
+  'blue-cool-30v': $color-blue-cool-30v,
+);
+
+$tokens-color-blue-cool-medium-vivid: (
+  'blue-cool-40v': $color-blue-cool-40v,
+  'blue-cool-50v': $color-blue-cool-50v,
+  'blue-cool-60v': $color-blue-cool-60v,
+);
+
+$tokens-color-blue-cool-dark-vivid: (
+  'blue-cool-70v': $color-blue-cool-70v,
+  'blue-cool-80v': $color-blue-cool-80v,
+  'blue-cool-90v': $color-blue-cool-90v,
+);
+
+$tokens-color-blue-cool-standard: map-collect(
+  $tokens-color-blue-cool-light,
+  $tokens-color-blue-cool-medium,
+  $tokens-color-blue-cool-dark
+);
+
+$tokens-color-blue-cool-vivid: map-collect(
+  $tokens-color-blue-cool-light-vivid,
+  $tokens-color-blue-cool-medium-vivid,
+  $tokens-color-blue-cool-dark-vivid
+);
+
+$tokens-color-blue-cool: map-collect(
+  $tokens-color-blue-cool-standard,
+  $tokens-color-blue-cool-vivid
+);
+
+$palettes-color-blue-cool: (
+  'palette-color-system-blue-cool-light': $tokens-color-blue-cool-light,
+  'palette-color-system-blue-cool-medium': $tokens-color-blue-cool-medium,
+  'palette-color-system-blue-cool-dark': $tokens-color-blue-cool-dark,
+  'palette-color-system-blue-cool-light-vivid': $tokens-color-blue-cool-light-vivid,
+  'palette-color-system-blue-cool-medium-vivid': $tokens-color-blue-cool-medium-vivid,
+  'palette-color-system-blue-cool-dark-vivid': $tokens-color-blue-cool-dark-vivid,
+  'palette-color-system-blue-cool-standard': $tokens-color-blue-cool-standard,
+  'palette-color-system-blue-cool-vivid': $tokens-color-blue-cool-vivid,
+  'palette-color-system-blue-cool': $tokens-color-blue-cool,
+);