@carbon/themes 10.16.0 → 10.18.0

package/lib/index.js

@@ -142,6 +142,7 @@ var disabled03 = colors.gray50;
 var highlight = colors.blue20;
 var decorative01 = colors.gray20;
 var hoverLightUI = '#e5e5e5';
+var buttonSeparator = '#e0e0e0';
 var skeleton01 = '#e5e5e5';
 var skeleton02 = colors.gray30; // Type
 
@@ -212,6 +213,7 @@ var white = /*#__PURE__*/Object.freeze({
   highlight: highlight,
   decorative01: decorative01,
   hoverLightUI: hoverLightUI,
+  buttonSeparator: buttonSeparator,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
   brand01: brand01,
@@ -349,6 +351,7 @@ var disabled03$1 = colors.gray50;
 var highlight$1 = colors.blue20;
 var decorative01$1 = colors.gray20;
 var hoverLightUI$1 = '#e5e5e5';
+var buttonSeparator$1 = '#e0e0e0';
 var skeleton01$1 = '#e5e5e5';
 var skeleton02$1 = colors.gray30;
 
@@ -419,6 +422,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   highlight: highlight$1,
   decorative01: decorative01$1,
   hoverLightUI: hoverLightUI$1,
+  buttonSeparator: buttonSeparator$1,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
   brand01: brand01$1,
@@ -556,6 +560,7 @@ var disabled03$2 = colors.gray50;
 var highlight$2 = colors.blue80;
 var decorative01$2 = colors.gray70;
 var hoverLightUI$2 = '#525252';
+var buttonSeparator$2 = '#161616';
 var skeleton01$2 = '#353535';
 var skeleton02$2 = colors.gray80;
 
@@ -626,6 +631,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   highlight: highlight$2,
   decorative01: decorative01$2,
   hoverLightUI: hoverLightUI$2,
+  buttonSeparator: buttonSeparator$2,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
   brand01: brand01$2,
@@ -763,6 +769,7 @@ var disabled03$3 = colors.gray40;
 var highlight$3 = colors.blue70;
 var decorative01$3 = colors.gray60;
 var hoverLightUI$3 = '#6f6f6f';
+var buttonSeparator$3 = '#161616';
 var skeleton01$3 = '#353535';
 var skeleton02$3 = colors.gray70;
 
@@ -833,6 +840,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   highlight: highlight$3,
   decorative01: decorative01$3,
   hoverLightUI: hoverLightUI$3,
+  buttonSeparator: buttonSeparator$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
   brand01: brand01$3,
@@ -970,6 +978,7 @@ var disabled03$4 = '#cdd1d4';
 var highlight$4 = '#f4f7fb';
 var decorative01$4 = '#EEF4FC';
 var hoverLightUI$4 = '#EEF4FC';
+var buttonSeparator$4 = '#e0e0e0';
 var skeleton01$4 = 'rgba(61, 112, 178, .1)';
 var skeleton02$4 = 'rgba(61, 112, 178, .1)';
 
@@ -1040,6 +1049,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   highlight: highlight$4,
   decorative01: decorative01$4,
   hoverLightUI: hoverLightUI$4,
+  buttonSeparator: buttonSeparator$4,
   skeleton01: skeleton01$4,
   skeleton02: skeleton02$4,
   brand01: brand01$4,
@@ -1120,7 +1130,7 @@ var v9 = /*#__PURE__*/Object.freeze({
 
 var colors$1 = [// Core
 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger', // Interactive states
-'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'selectedLightUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'hoverLightUI', 'skeleton01', 'skeleton02', // Deprecated
+'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'selectedLightUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'hoverLightUI', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -1172,7 +1182,7 @@ var unstable__meta = {
     tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
   }, {
     type: 'interactive',
-    tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'hoverLightUI']
+    tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'hoverLightUI', 'buttonSeparator']
   }],
   deprecated: ['brand01', 'brand02', 'brand03', 'active01']
 };
@@ -1321,6 +1331,7 @@ exports.disabled03 = disabled03;
 exports.highlight = highlight;
 exports.decorative01 = decorative01;
 exports.hoverLightUI = hoverLightUI;
+exports.buttonSeparator = buttonSeparator;
 exports.skeleton01 = skeleton01;
 exports.skeleton02 = skeleton02;
 exports.brand01 = brand01;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.16.0",
+  "version": "10.18.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,15 +24,15 @@
     "build": "yarn clean && bundler bundle src/index.js --name CarbonThemes && node tasks/build.js && bundler check \"scss/*.scss\" && bundler sassdoc \"scss/**/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^10.11.0",
-    "@carbon/layout": "^10.12.0",
-    "@carbon/type": "^10.14.0",
+    "@carbon/colors": "^10.13.0",
+    "@carbon/layout": "^10.13.0",
+    "@carbon/type": "^10.15.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.3.0",
-    "@carbon/scss-generator": "^10.9.0",
-    "@carbon/test-utils": "^10.10.0",
+    "@carbon/scss-generator": "^10.10.0",
+    "@carbon/test-utils": "^10.11.0",
     "change-case": "^4.1.1",
     "core-js": "^3.6.5",
     "fs-extra": "^8.1.0",
@@ -40,5 +40,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "213cbde854a4958334cff9914b91863ce6debb9d"
+  "gitHead": "1ddaf4a45fd03d39ca695505d0c764b5879c924b"
 }

package/scss/generated/_mixins.scss

@@ -98,6 +98,7 @@
   $highlight: map-get($theme, 'highlight') !global;
   $decorative-01: map-get($theme, 'decorative-01') !global;
   $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
+  $button-separator: map-get($theme, 'button-separator') !global;
   $skeleton-01: map-get($theme, 'skeleton-01') !global;
   $skeleton-02: map-get($theme, 'skeleton-02') !global;
   $brand-01: map-get($theme, 'brand-01') !global;
@@ -410,6 +411,10 @@
       --#{$custom-property-prefix}-hover-light-ui,
       map-get($theme, 'hover-light-ui')
     ) !global;
+    $button-separator: var(
+      --#{$custom-property-prefix}-button-separator,
+      map-get($theme, 'button-separator')
+    ) !global;
     $skeleton-01: var(
       --#{$custom-property-prefix}-skeleton-01,
       map-get($theme, 'skeleton-01')
@@ -1103,6 +1108,19 @@
       );
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'button-separator',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'button-separator',
+        map-get($theme, 'button-separator')
+      );
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/generated/_themes.scss

@@ -67,6 +67,7 @@ $carbon--theme--white: (
   highlight: #d0e2ff,
   decorative-01: #e0e0e0,
   hover-light-ui: #e5e5e5,
+  button-separator: #e0e0e0,
   skeleton-01: #e5e5e5,
   skeleton-02: #c6c6c6,
   brand-01: #0f62fe,
@@ -77,42 +78,42 @@ $carbon--theme--white: (
   caption-01: (
     font-size: 0.75rem,
     font-weight: 400,
-    line-height: 1rem,
+    line-height: 1.34,
     letter-spacing: 0.32px,
   ),
   label-01: (
     font-size: 0.75rem,
     font-weight: 400,
-    line-height: 1rem,
+    line-height: 1.34,
     letter-spacing: 0.32px,
   ),
   helper-text-01: (
     font-size: 0.75rem,
-    line-height: 1rem,
+    line-height: 1.34,
     letter-spacing: 0.32px,
   ),
   body-short-01: (
     font-size: 0.875rem,
     font-weight: 400,
-    line-height: 1.125rem,
+    line-height: 1.29,
     letter-spacing: 0.16px,
   ),
   body-long-01: (
     font-size: 0.875rem,
     font-weight: 400,
-    line-height: 1.25rem,
+    line-height: 1.43,
     letter-spacing: 0.16px,
   ),
   body-short-02: (
     font-size: 1rem,
     font-weight: 400,
-    line-height: 1.375rem,
+    line-height: 1.375,
     letter-spacing: 0,
   ),
   body-long-02: (
     font-size: 1rem,
     font-weight: 400,
-    line-height: 1.5rem,
+    line-height: 1.5,
     letter-spacing: 0,
   ),
   code-01: (
@@ -122,7 +123,7 @@ $carbon--theme--white: (
       ),
     font-size: 0.75rem,
     font-weight: 400,
-    line-height: 1rem,
+    line-height: 1.34,
     letter-spacing: 0.32px,
   ),
   code-02: (
@@ -132,84 +133,84 @@ $carbon--theme--white: (
       ),
     font-size: 0.875rem,
     font-weight: 400,
-    line-height: 1.25rem,
+    line-height: 1.43,
     letter-spacing: 0.32px,
   ),
   heading-01: (
     font-size: 0.875rem,
     font-weight: 600,
-    line-height: 1.125rem,
+    line-height: 1.29,
     letter-spacing: 0.16px,
   ),
   productive-heading-01: (
     font-size: 0.875rem,
     font-weight: 600,
-    line-height: 1.125rem,
+    line-height: 1.29,
     letter-spacing: 0.16px,
   ),
   heading-02: (
     font-size: 1rem,
     font-weight: 600,
-    line-height: 1.375rem,
+    line-height: 1.375,
     letter-spacing: 0,
   ),
   productive-heading-02: (
     font-size: 1rem,
     font-weight: 600,
-    line-height: 1.375rem,
+    line-height: 1.375,
     letter-spacing: 0,
   ),
   productive-heading-03: (
     font-size: 1.25rem,
     font-weight: 400,
-    line-height: 1.75rem,
+    line-height: 1.4,
     letter-spacing: 0,
   ),
   productive-heading-04: (
     font-size: 1.75rem,
     font-weight: 400,
-    line-height: 2.25rem,
+    line-height: 1.29,
     letter-spacing: 0,
   ),
   productive-heading-05: (
     font-size: 2rem,
     font-weight: 400,
-    line-height: 2.5rem,
+    line-height: 1.25,
     letter-spacing: 0,
   ),
   productive-heading-06: (
     font-size: 2.625rem,
     font-weight: 300,
-    line-height: 3.125rem,
+    line-height: 1.199,
     letter-spacing: 0,
   ),
   productive-heading-07: (
     font-size: 3.375rem,
     font-weight: 300,
-    line-height: 4rem,
+    line-height: 1.19,
     letter-spacing: 0,
   ),
   expressive-heading-01: (
     font-size: 0.875rem,
     font-weight: 600,
-    line-height: 1.25rem,
+    line-height: 1.25,
     letter-spacing: 0.16px,
   ),
   expressive-heading-02: (
     font-size: 1rem,
     font-weight: 600,
-    line-height: 1.5rem,
+    line-height: 1.5,
     letter-spacing: 0,
   ),
   expressive-heading-03: (
     font-size: 1.25rem,
     font-weight: 400,
-    line-height: 140%,
+    line-height: 1.4,
     letter-spacing: 0,
     breakpoints: (
       xlg: (
         font-size: 1.25rem,
-        line-height: 125%,
+        line-height: 1.25,
       ),
       max: (
         font-size: 1.5rem,
@@ -219,12 +220,12 @@ $carbon--theme--white: (
   expressive-heading-04: (
     font-size: 1.75rem,
     font-weight: 400,
-    line-height: 129%,
+    line-height: 1.29,
     letter-spacing: 0,
     breakpoints: (
       xlg: (
         font-size: 1.75rem,
-        line-height: 125%,
+        line-height: 1.25,
       ),
       max: (
         font-size: 2rem,
@@ -234,31 +235,30 @@ $carbon--theme--white: (
   expressive-heading-05: (
     font-size: 2rem,
     font-weight: 400,
-    line-height: 125%,
+    line-height: 1.25,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 2.25rem,
         font-weight: 300,
-        line-height: 122%,
+        line-height: 1.22,
         letter-spacing: 0,
       ),
       lg: (
         font-size: 2.625rem,
         font-weight: 300,
-        line-height: 119%,
+        line-height: 1.19,
         letter-spacing: 0,
       ),
       xlg: (
         font-size: 3rem,
         font-weight: 300,
-        line-height: 117%,
+        line-height: 1.17,
         letter-spacing: 0,
       ),
       max: (
         font-size: 3.75rem,
         font-weight: 300,
-        line-height: 4.375rem,
         letter-spacing: 0,
       ),
     ),
@@ -266,31 +266,30 @@ $carbon--theme--white: (
   expressive-heading-06: (
     font-size: 2rem,
     font-weight: 600,
-    line-height: 125%,
+    line-height: 1.25,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 2.25rem,
         font-weight: 600,
-        line-height: 122%,
+        line-height: 1.22,
         letter-spacing: 0,
       ),
       lg: (
         font-size: 2.625rem,
         font-weight: 600,
-        line-height: 119%,
+        line-height: 1.19,
         letter-spacing: 0,
       ),
       xlg: (
         font-size: 3rem,
         font-weight: 600,
-        line-height: 117%,
+        line-height: 1.17,
         letter-spacing: 0,
       ),
       max: (
         font-size: 3.75rem,
         font-weight: 600,
-        line-height: 4.375rem,
         letter-spacing: 0,
       ),
     ),
@@ -298,21 +297,21 @@ $carbon--theme--white: (
   expressive-paragraph-01: (
     font-size: 1.5rem,
     font-weight: 300,
-    line-height: 125%,
+    line-height: 1.25,
     letter-spacing: 0,
     lg: (
       font-size: 1.75rem,
-      line-height: 129%,
+      line-height: 1.29,
     ),
     max: (
       font-size: 2rem,
-      line-height: 125%,
+      line-height: 1.25,
     ),
   ),
   quotation-01: (
     font-size: 1.25rem,
     font-weight: 400,
-    line-height: 130%,
+    line-height: 1.3,
     letter-spacing: 0,
     breakpoints: (
       md: (
@@ -323,19 +322,19 @@ $carbon--theme--white: (
       lg: (
         font-size: 1.5rem,
         font-weight: 400,
-        line-height: 125%,
+        line-height: 1.25,
         letter-spacing: 0,
       ),
       xlg: (
         font-size: 1.75rem,
         font-weight: 400,
-        line-height: 129%,
+        line-height: 1.29,
         letter-spacing: 0,
       ),
       max: (
         font-size: 2rem,
         font-weight: 400,
-        line-height: 125%,
+        line-height: 1.25,
         letter-spacing: 0,
       ),
     ),
@@ -343,20 +342,20 @@ $carbon--theme--white: (
   quotation-02: (
     font-size: 2rem,
     font-weight: 300,
-    line-height: 125%,
+    line-height: 1.25,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 2.25rem,
-        line-height: 122%,
+        line-height: 1.22,
       ),
       lg: (
         font-size: 2.625rem,
-        line-height: 119%,
+        line-height: 1.19,
       ),
       xlg: (
         font-size: 3rem,
-        line-height: 117%,
+        line-height: 1.17,
       ),
       max: (
         font-size: 3.75rem,
@@ -366,7 +365,7 @@ $carbon--theme--white: (
   display-01: (
     font-size: 2.625rem,
     font-weight: 300,
-    line-height: 119%,
+    line-height: 1.19,
     letter-spacing: 0,
     breakpoints: (
       md: (
@@ -377,18 +376,18 @@ $carbon--theme--white: (
       ),
       xlg: (
         font-size: 3.75rem,
-        line-height: 117%,
+        line-height: 1.17,
       ),
       max: (
         font-size: 4.75rem,
-        line-height: 113%,
+        line-height: 1.13,
       ),
     ),
   ),
   display-02: (
     font-size: 2.625rem,
     font-weight: 600,
-    line-height: 119%,
+    line-height: 1.19,
     letter-spacing: 0,
     breakpoints: (
       md: (
@@ -399,36 +398,36 @@ $carbon--theme--white: (
       ),
       xlg: (
         font-size: 3.75rem,
-        line-height: 116%,
+        line-height: 1.16,
       ),
       max: (
         font-size: 4.75rem,
-        line-height: 113%,
+        line-height: 1.13,
       ),
     ),
   ),
   display-03: (
     font-size: 2.625rem,
     font-weight: 300,
-    line-height: 119%,
+    line-height: 1.19,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 4.25rem,
-        line-height: 115%,
+        line-height: 1.15,
       ),
       lg: (
         font-size: 5.75rem,
-        line-height: 111%,
+        line-height: 1.11,
         letter-spacing: -0.64px,
       ),
       xlg: (
         font-size: 7.625rem,
-        line-height: 107%,
+        line-height: 1.07,
       ),
       max: (
         font-size: 9.75rem,
-        line-height: 105%,
+        line-height: 1.05,
         letter-spacing: -0.96px,
       ),
     ),
@@ -436,26 +435,26 @@ $carbon--theme--white: (
   display-04: (
     font-size: 2.625rem,
     font-weight: 600,
-    line-height: 119%,
+    line-height: 1.19,
     letter-spacing: 0,
     breakpoints: (
       md: (
         font-size: 4.25rem,
-        line-height: 115%,
+        line-height: 1.15,
       ),
       lg: (
         font-size: 5.75rem,
-        line-height: 111%,
+        line-height: 1.11,
         letter-spacing: -0.64px,
       ),
       xlg: (
         font-size: 7.625rem,
-        line-height: 107%,
+        line-height: 1.07,
         letter-spacing: -0.64px,
       ),
       max: (
         font-size: 9.75rem,
-        line-height: 105%,
+        line-height: 1.05,
         letter-spacing: -0.96px,
       ),
     ),
@@ -564,6 +563,7 @@ $carbon--theme--g90: map-merge(
     highlight: #0043ce,
     decorative-01: #6f6f6f,
     hover-light-ui: #6f6f6f,
+    button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
     brand-02: #6f6f6f,
@@ -629,6 +629,7 @@ $carbon--theme--g100: map-merge(
     highlight: #002d9c,
     decorative-01: #525252,
     hover-light-ui: #525252,
+    button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #393939,
     brand-02: #6f6f6f,
@@ -1076,6 +1077,12 @@ $carbon--theme: (
       $hover-light-ui,
       map-get($carbon--theme--white, 'hover-light-ui')
     ),
+  button-separator:
+    if(
+      global-variable-exists('button-separator'),
+      $button-separator,
+      map-get($carbon--theme--white, 'button-separator')
+    ),
   skeleton-01:
     if(
       global-variable-exists('skeleton-01'),