@carbon/elements 10.37.0 → 10.39.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.37.0",
+  "version": "10.39.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,21 +35,21 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.27.0",
-    "@carbon/grid": "^10.30.0",
-    "@carbon/icons": "^10.34.0",
+    "@carbon/colors": "^10.29.0",
+    "@carbon/grid": "^10.32.0",
+    "@carbon/icons": "^10.36.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.26.0",
-    "@carbon/motion": "^10.20.0",
-    "@carbon/themes": "^10.37.0",
-    "@carbon/type": "^10.30.0"
+    "@carbon/layout": "^10.28.0",
+    "@carbon/motion": "^10.21.0",
+    "@carbon/themes": "^10.39.0",
+    "@carbon/type": "^10.32.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.25.0",
+    "@carbon/cli": "^10.26.0",
     "fs-extra": "^8.1.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "74da5c7df7a93263ed79ed9b3dd6dc2b52d80024"
+  "gitHead": "388008d11f2996c262303445a2e26453cbda9261"
 }

package/scss/colors/mixins.scss

@@ -66,9 +66,16 @@ $ibm-color__magenta-70: #9f1853 !default;
 $ibm-color__magenta-80: #740937 !default;
 $ibm-color__magenta-90: #510224 !default;
 $ibm-color__magenta-100: #2a0a18 !default;
+$ibm-color__orange-10: #fff2e8 !default;
+$ibm-color__orange-20: #ffd9be !default;
+$ibm-color__orange-30: #ffb784 !default;
 $ibm-color__orange-40: #ff832b !default;
+$ibm-color__orange-50: #eb6200 !default;
 $ibm-color__orange-60: #ba4e00 !default;
 $ibm-color__orange-70: #8a3800 !default;
+$ibm-color__orange-80: #5e2900 !default;
+$ibm-color__orange-90: #3e1a00 !default;
+$ibm-color__orange-100: #231000 !default;
 $ibm-color__purple-10: #f6f2ff !default;
 $ibm-color__purple-20: #e8daff !default;
 $ibm-color__purple-30: #d4bbff !default;
@@ -110,10 +117,16 @@ $ibm-color__warm-gray-80: #3c3838 !default;
 $ibm-color__warm-gray-90: #272525 !default;
 $ibm-color__warm-gray-100: #171414 !default;
 $ibm-color__white-0: #ffffff !default;
-$ibm-color__yellow-20: #fdd13a !default;
+$ibm-color__yellow-10: #fcf4d6 !default;
+$ibm-color__yellow-20: #fddc69 !default;
 $ibm-color__yellow-30: #f1c21b !default;
 $ibm-color__yellow-40: #d2a106 !default;
 $ibm-color__yellow-50: #b28600 !default;
+$ibm-color__yellow-60: #8e6a00 !default;
+$ibm-color__yellow-70: #684e00 !default;
+$ibm-color__yellow-80: #483700 !default;
+$ibm-color__yellow-90: #302400 !default;
+$ibm-color__yellow-100: #1c1500 !default;
 $carbon--black-100: #000000 !default;
 $carbon--blue-10: #edf5ff !default;
 $carbon--blue-20: #d0e2ff !default;
@@ -175,9 +188,16 @@ $carbon--magenta-70: #9f1853 !default;
 $carbon--magenta-80: #740937 !default;
 $carbon--magenta-90: #510224 !default;
 $carbon--magenta-100: #2a0a18 !default;
+$carbon--orange-10: #fff2e8 !default;
+$carbon--orange-20: #ffd9be !default;
+$carbon--orange-30: #ffb784 !default;
 $carbon--orange-40: #ff832b !default;
+$carbon--orange-50: #eb6200 !default;
 $carbon--orange-60: #ba4e00 !default;
 $carbon--orange-70: #8a3800 !default;
+$carbon--orange-80: #5e2900 !default;
+$carbon--orange-90: #3e1a00 !default;
+$carbon--orange-100: #231000 !default;
 $carbon--purple-10: #f6f2ff !default;
 $carbon--purple-20: #e8daff !default;
 $carbon--purple-30: #d4bbff !default;
@@ -219,10 +239,16 @@ $carbon--warm-gray-80: #3c3838 !default;
 $carbon--warm-gray-90: #272525 !default;
 $carbon--warm-gray-100: #171414 !default;
 $carbon--white-0: #ffffff !default;
-$carbon--yellow-20: #fdd13a !default;
+$carbon--yellow-10: #fcf4d6 !default;
+$carbon--yellow-20: #fddc69 !default;
 $carbon--yellow-30: #f1c21b !default;
 $carbon--yellow-40: #d2a106 !default;
 $carbon--yellow-50: #b28600 !default;
+$carbon--yellow-60: #8e6a00 !default;
+$carbon--yellow-70: #684e00 !default;
+$carbon--yellow-80: #483700 !default;
+$carbon--yellow-90: #302400 !default;
+$carbon--yellow-100: #1c1500 !default;
 $black-100: #000000 !default;
 $blue-10: #edf5ff !default;
 $blue-20: #d0e2ff !default;
@@ -284,9 +310,16 @@ $magenta-70: #9f1853 !default;
 $magenta-80: #740937 !default;
 $magenta-90: #510224 !default;
 $magenta-100: #2a0a18 !default;
+$orange-10: #fff2e8 !default;
+$orange-20: #ffd9be !default;
+$orange-30: #ffb784 !default;
 $orange-40: #ff832b !default;
+$orange-50: #eb6200 !default;
 $orange-60: #ba4e00 !default;
 $orange-70: #8a3800 !default;
+$orange-80: #5e2900 !default;
+$orange-90: #3e1a00 !default;
+$orange-100: #231000 !default;
 $purple-10: #f6f2ff !default;
 $purple-20: #e8daff !default;
 $purple-30: #d4bbff !default;
@@ -328,10 +361,138 @@ $warm-gray-80: #3c3838 !default;
 $warm-gray-90: #272525 !default;
 $warm-gray-100: #171414 !default;
 $white-0: #ffffff !default;
-$yellow-20: #fdd13a !default;
+$yellow-10: #fcf4d6 !default;
+$yellow-20: #fddc69 !default;
 $yellow-30: #f1c21b !default;
 $yellow-40: #d2a106 !default;
 $yellow-50: #b28600 !default;
+$yellow-60: #8e6a00 !default;
+$yellow-70: #684e00 !default;
+$yellow-80: #483700 !default;
+$yellow-90: #302400 !default;
+$yellow-100: #1c1500 !default;
+$white-hover: #e8e8e8 !default;
+$black-hover: #212121 !default;
+$blue-10-hover: #dbebff !default;
+$blue-20-hover: #b8d3ff !default;
+$blue-30-hover: #8ab6ff !default;
+$blue-40-hover: #5c97ff !default;
+$blue-50-hover: #1f70ff !default;
+$blue-60-hover: #0050e6 !default;
+$blue-70-hover: #0053ff !default;
+$blue-80-hover: #0039c7 !default;
+$blue-90-hover: #00258a !default;
+$blue-100-hover: #001f75 !default;
+$cool-gray-10-hover: #e4e9f1 !default;
+$cool-gray-20-hover: #cdd3da !default;
+$cool-gray-30-hover: #adb5bd !default;
+$cool-gray-40-hover: #9199a1 !default;
+$cool-gray-50-hover: #757b85 !default;
+$cool-gray-60-hover: #585e64 !default;
+$cool-gray-70-hover: #5d646a !default;
+$cool-gray-80-hover: #434a51 !default;
+$cool-gray-90-hover: #2b3236 !default;
+$cool-gray-100-hover: #222a2f !default;
+$cyan-10-hover: #cceeff !default;
+$cyan-20-hover: #99daff !default;
+$cyan-30-hover: #57beff !default;
+$cyan-40-hover: #059fff !default;
+$cyan-50-hover: #0f7ec8 !default;
+$cyan-60-hover: #005fa3 !default;
+$cyan-70-hover: #0066bd !default;
+$cyan-80-hover: #00498a !default;
+$cyan-90-hover: #013360 !default;
+$cyan-100-hover: #0b2947 !default;
+$gray-10-hover: #e8e8e8 !default;
+$gray-20-hover: #d1d1d1 !default;
+$gray-30-hover: #b5b5b5 !default;
+$gray-40-hover: #999999 !default;
+$gray-50-hover: #7a7a7a !default;
+$gray-60-hover: #5e5e5e !default;
+$gray-70-hover: #636363 !default;
+$gray-80-hover: #474747 !default;
+$gray-90-hover: #333333 !default;
+$gray-100-hover: #292929 !default;
+$green-10-hover: #b6f6c8 !default;
+$green-20-hover: #74e792 !default;
+$green-30-hover: #36ce5e !default;
+$green-40-hover: #3bab5a !default;
+$green-50-hover: #208e3f !default;
+$green-60-hover: #166f31 !default;
+$green-70-hover: #11742f !default;
+$green-80-hover: #05521c !default;
+$green-90-hover: #033b11 !default;
+$green-100-hover: #0d300f !default;
+$magenta-10-hover: #ffe0ef !default;
+$magenta-20-hover: #ffbdda !default;
+$magenta-30-hover: #ff94c3 !default;
+$magenta-40-hover: #ff57a0 !default;
+$magenta-50-hover: #e3176f !default;
+$magenta-60-hover: #b0215f !default;
+$magenta-70-hover: #bf1d63 !default;
+$magenta-80-hover: #8e0b43 !default;
+$magenta-90-hover: #68032e !default;
+$magenta-100-hover: #53142f !default;
+$orange-10-hover: #ffe2cc !default;
+$orange-20-hover: #ffc69e !default;
+$orange-30-hover: #ff9d57 !default;
+$orange-40-hover: #fa6800 !default;
+$orange-50-hover: #cc5500 !default;
+$orange-60-hover: #9e4200 !default;
+$orange-70-hover: #a84400 !default;
+$orange-80-hover: #753300 !default;
+$orange-90-hover: #522200 !default;
+$orange-100-hover: #421e00 !default;
+$purple-10-hover: #ede5ff !default;
+$purple-20-hover: #dcc7ff !default;
+$purple-30-hover: #c5a3ff !default;
+$purple-40-hover: #ae7aff !default;
+$purple-50-hover: #9352ff !default;
+$purple-60-hover: #7822fb !default;
+$purple-70-hover: #7c3dd6 !default;
+$purple-80-hover: #5b24ad !default;
+$purple-90-hover: #40197b !default;
+$purple-100-hover: #341c59 !default;
+$red-10-hover: #ffe0e0 !default;
+$red-20-hover: #ffc2c5 !default;
+$red-30-hover: #ff99a0 !default;
+$red-40-hover: #ff6168 !default;
+$red-50-hover: #ee0713 !default;
+$red-60-hover: #b81922 !default;
+$red-70-hover: #c21e25 !default;
+$red-80-hover: #921118 !default;
+$red-90-hover: #66050a !default;
+$red-100-hover: #540d11 !default;
+$teal-10-hover: #acf6f6 !default;
+$teal-20-hover: #57e5e5 !default;
+$teal-30-hover: #25cac8 !default;
+$teal-40-hover: #07aba9 !default;
+$teal-50-hover: #008a87 !default;
+$teal-60-hover: #006b68 !default;
+$teal-70-hover: #007070 !default;
+$teal-80-hover: #005357 !default;
+$teal-90-hover: #033940 !default;
+$teal-100-hover: #0f3034 !default;
+$warm-gray-10-hover: #f0e8e6 !default;
+$warm-gray-20-hover: #d8d0cf !default;
+$warm-gray-30-hover: #b9b3b1 !default;
+$warm-gray-40-hover: #9c9696 !default;
+$warm-gray-50-hover: #7f7b7b !default;
+$warm-gray-60-hover: #605d5d !default;
+$warm-gray-70-hover: #696363 !default;
+$warm-gray-80-hover: #4c4848 !default;
+$warm-gray-90-hover: #343232 !default;
+$warm-gray-100-hover: #2c2626 !default;
+$yellow-10-hover: #f8e6a0 !default;
+$yellow-20-hover: #fccd27 !default;
+$yellow-30-hover: #ddb00e !default;
+$yellow-40-hover: #bc9005 !default;
+$yellow-50-hover: #9e7700 !default;
+$yellow-60-hover: #755800 !default;
+$yellow-70-hover: #806000 !default;
+$yellow-80-hover: #5c4600 !default;
+$yellow-90-hover: #3d2e00 !default;
+$yellow-100-hover: #332600 !default;
 $ibm-color-map: (
   'black': (
     100: #000000,
@@ -421,9 +582,16 @@ $ibm-color-map: (
     100: #2a0a18,
   ),
   'orange': (
+    10: #fff2e8,
+    20: #ffd9be,
+    30: #ffb784,
     40: #ff832b,
+    50: #eb6200,
     60: #ba4e00,
     70: #8a3800,
+    80: #5e2900,
+    90: #3e1a00,
+    100: #231000,
   ),
   'purple': (
     10: #f6f2ff,
@@ -489,10 +657,16 @@ $ibm-color-map: (
     0: #ffffff,
   ),
   'yellow': (
-    20: #fdd13a,
+    10: #fcf4d6,
+    20: #fddc69,
     30: #f1c21b,
     40: #d2a106,
     50: #b28600,
+    60: #8e6a00,
+    70: #684e00,
+    80: #483700,
+    90: #302400,
+    100: #1c1500,
   ),
 ) !default;
 $carbon--colors: (
@@ -584,9 +758,16 @@ $carbon--colors: (
     100: #2a0a18,
   ),
   'orange': (
+    10: #fff2e8,
+    20: #ffd9be,
+    30: #ffb784,
     40: #ff832b,
+    50: #eb6200,
     60: #ba4e00,
     70: #8a3800,
+    80: #5e2900,
+    90: #3e1a00,
+    100: #231000,
   ),
   'purple': (
     10: #f6f2ff,
@@ -652,10 +833,16 @@ $carbon--colors: (
     0: #ffffff,
   ),
   'yellow': (
-    20: #fdd13a,
+    10: #fcf4d6,
+    20: #fddc69,
     30: #f1c21b,
     40: #d2a106,
     50: #b28600,
+    60: #8e6a00,
+    70: #684e00,
+    80: #483700,
+    90: #302400,
+    100: #1c1500,
   ),
 ) !default;
 
@@ -725,9 +912,16 @@ $carbon--colors: (
   $ibm-color__magenta-80: #740937 !global;
   $ibm-color__magenta-90: #510224 !global;
   $ibm-color__magenta-100: #2a0a18 !global;
+  $ibm-color__orange-10: #fff2e8 !global;
+  $ibm-color__orange-20: #ffd9be !global;
+  $ibm-color__orange-30: #ffb784 !global;
   $ibm-color__orange-40: #ff832b !global;
+  $ibm-color__orange-50: #eb6200 !global;
   $ibm-color__orange-60: #ba4e00 !global;
   $ibm-color__orange-70: #8a3800 !global;
+  $ibm-color__orange-80: #5e2900 !global;
+  $ibm-color__orange-90: #3e1a00 !global;
+  $ibm-color__orange-100: #231000 !global;
   $ibm-color__purple-10: #f6f2ff !global;
   $ibm-color__purple-20: #e8daff !global;
   $ibm-color__purple-30: #d4bbff !global;
@@ -769,10 +963,16 @@ $carbon--colors: (
   $ibm-color__warm-gray-90: #272525 !global;
   $ibm-color__warm-gray-100: #171414 !global;
   $ibm-color__white-0: #ffffff !global;
-  $ibm-color__yellow-20: #fdd13a !global;
+  $ibm-color__yellow-10: #fcf4d6 !global;
+  $ibm-color__yellow-20: #fddc69 !global;
   $ibm-color__yellow-30: #f1c21b !global;
   $ibm-color__yellow-40: #d2a106 !global;
   $ibm-color__yellow-50: #b28600 !global;
+  $ibm-color__yellow-60: #8e6a00 !global;
+  $ibm-color__yellow-70: #684e00 !global;
+  $ibm-color__yellow-80: #483700 !global;
+  $ibm-color__yellow-90: #302400 !global;
+  $ibm-color__yellow-100: #1c1500 !global;
   $ibm-color-map: (
     'black': (
       100: #000000,
@@ -862,9 +1062,16 @@ $carbon--colors: (
       100: #2a0a18,
     ),
     'orange': (
+      10: #fff2e8,
+      20: #ffd9be,
+      30: #ffb784,
       40: #ff832b,
+      50: #eb6200,
       60: #ba4e00,
       70: #8a3800,
+      80: #5e2900,
+      90: #3e1a00,
+      100: #231000,
     ),
     'purple': (
       10: #f6f2ff,
@@ -930,10 +1137,16 @@ $carbon--colors: (
       0: #ffffff,
     ),
     'yellow': (
-      20: #fdd13a,
+      10: #fcf4d6,
+      20: #fddc69,
       30: #f1c21b,
       40: #d2a106,
       50: #b28600,
+      60: #8e6a00,
+      70: #684e00,
+      80: #483700,
+      90: #302400,
+      100: #1c1500,
     ),
   ) !global;
 }
@@ -1003,9 +1216,16 @@ $carbon--colors: (
   $carbon--magenta-80: #740937 !global;
   $carbon--magenta-90: #510224 !global;
   $carbon--magenta-100: #2a0a18 !global;
+  $carbon--orange-10: #fff2e8 !global;
+  $carbon--orange-20: #ffd9be !global;
+  $carbon--orange-30: #ffb784 !global;
   $carbon--orange-40: #ff832b !global;
+  $carbon--orange-50: #eb6200 !global;
   $carbon--orange-60: #ba4e00 !global;
   $carbon--orange-70: #8a3800 !global;
+  $carbon--orange-80: #5e2900 !global;
+  $carbon--orange-90: #3e1a00 !global;
+  $carbon--orange-100: #231000 !global;
   $carbon--purple-10: #f6f2ff !global;
   $carbon--purple-20: #e8daff !global;
   $carbon--purple-30: #d4bbff !global;
@@ -1047,10 +1267,16 @@ $carbon--colors: (
   $carbon--warm-gray-90: #272525 !global;
   $carbon--warm-gray-100: #171414 !global;
   $carbon--white-0: #ffffff !global;
-  $carbon--yellow-20: #fdd13a !global;
+  $carbon--yellow-10: #fcf4d6 !global;
+  $carbon--yellow-20: #fddc69 !global;
   $carbon--yellow-30: #f1c21b !global;
   $carbon--yellow-40: #d2a106 !global;
   $carbon--yellow-50: #b28600 !global;
+  $carbon--yellow-60: #8e6a00 !global;
+  $carbon--yellow-70: #684e00 !global;
+  $carbon--yellow-80: #483700 !global;
+  $carbon--yellow-90: #302400 !global;
+  $carbon--yellow-100: #1c1500 !global;
   $carbon--colors: (
     'black': (
       100: #000000,
@@ -1140,9 +1366,16 @@ $carbon--colors: (
       100: #2a0a18,
     ),
     'orange': (
+      10: #fff2e8,
+      20: #ffd9be,
+      30: #ffb784,
       40: #ff832b,
+      50: #eb6200,
       60: #ba4e00,
       70: #8a3800,
+      80: #5e2900,
+      90: #3e1a00,
+      100: #231000,
     ),
     'purple': (
       10: #f6f2ff,
@@ -1208,10 +1441,16 @@ $carbon--colors: (
       0: #ffffff,
     ),
     'yellow': (
-      20: #fdd13a,
+      10: #fcf4d6,
+      20: #fddc69,
       30: #f1c21b,
       40: #d2a106,
       50: #b28600,
+      60: #8e6a00,
+      70: #684e00,
+      80: #483700,
+      90: #302400,
+      100: #1c1500,
     ),
   ) !global;
 }

package/scss/grid/vendor/@carbon/layout/_breakpoint.scss

@@ -198,12 +198,12 @@ $carbon--grid-breakpoints: (
   @if $min and $max {
     $min-width: if(
       not $is-number-lower and $min,
-      map-get($min, width + 0.02),
+      map-get($min, width) + 0.02,
       $min
     );
     $max-width: if(
       not $is-number-upper and $max,
-      map-get($max, width - 0.02),
+      map-get($max, width) - 0.02,
       $max
     );
     @media (min-width: $min-width) and (max-width: $max-width) {

package/scss/layout/_breakpoint.scss

@@ -198,12 +198,12 @@ $carbon--grid-breakpoints: (
   @if $min and $max {
     $min-width: if(
       not $is-number-lower and $min,
-      map-get($min, width + 0.02),
+      map-get($min, width) + 0.02,
       $min
     );
     $max-width: if(
       not $is-number-upper and $max,
-      map-get($max, width - 0.02),
+      map-get($max, width) - 0.02,
       $max
     );
     @media (min-width: $min-width) and (max-width: $max-width) {

package/scss/themes/modules/_config.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$prefix: 'cds' !default;

package/scss/themes/modules/_theme.scss

@@ -7,18 +7,23 @@
 
 @use 'sass:map';
 @use 'sass:meta';
+@use 'config';
 @use 'themes';
 
-$theme: themes.$white !default;
-$-custom-property-prefix: 'cds';
+/// Specify the fallback theme, used as a catch-all for tokens that you may not
+/// have defined in your custom theme
+$fallback: themes.$white !default;
 
-/// @access public
-/// @group @carbon/themes
-@mixin theme($active-theme: $theme, $component-tokens...) {
-  $parent-theme: $theme;
-  $theme: $active-theme !global;
+/// Specify the current theme. This can override existing tokens, or add new
+/// tokens. If you are adding new tokens, it's recommended that you set the
+/// fallback for your current theme
+$theme: () !default;
+$theme: map.merge($fallback, $theme);
 
-  @each $token, $value in $theme {
+/// Include the CSS Custom Properties for the active theme or a given theme on
+/// a selector
+@mixin theme($active-theme: $theme, $component-tokens...) {
+  @each $token, $value in $active-theme {
     @include -custom-property($token, $value);
   }
 
@@ -27,21 +32,20 @@ $-custom-property-prefix: 'cds';
       @include -custom-property($token, $value);
     }
   }
-
-  @content;
-
-  $theme: $parent-theme !global;
 }
 
-/// @access public
-/// @group @carbon/themes
-@mixin set-theme($active-theme) {
-  $theme: $active-theme !global;
+/// Retrieve the value for the given $token from the current $theme
+/// @param {String} $token
+@function get($token) {
+  @if map.has-key($theme, $token) {
+    @return map.get($theme, $token);
+  }
+  @error "Unable to find token: #{$token} in current $theme";
 }
 
 /// @access private
 /// @group @carbon/themes
-@mixin -custom-property($name, $value, $prefix: $-custom-property-prefix) {
+@mixin -custom-property($name, $value) {
   @if meta.type-of($value) == map {
     @each $property, $property-value in $value {
       // Only support one-level of depth for values that are maps. This is to
@@ -51,6 +55,6 @@ $-custom-property-prefix: 'cds';
       }
     }
   } @else {
-    --#{$prefix}-#{$name}: #{$value};
+    --#{config.$prefix}-#{$name}: #{$value};
   }
 }

package/scss/themes/modules/_themes.scss

@@ -6,3 +6,4 @@
 //
 
 @forward 'generated/themes';
+@use 'generated/themes';