@carbon/themes 10.15.0 → 10.17.0

package/docs/sass.md

@@ -78,6 +78,7 @@
   - [✅highlight [variable]](#highlight-variable)
   - [✅decorative-01 [variable]](#decorative-01-variable)
   - [✅hover-light-ui [variable]](#hover-light-ui-variable)
+  - [✅button-separator [variable]](#button-separator-variable)
   - [✅skeleton-01 [variable]](#skeleton-01-variable)
   - [✅skeleton-02 [variable]](#skeleton-02-variable)
   - [✅⚠️brand-01 [variable]](#brand-01-variable)
@@ -284,6 +285,7 @@ Define theme variables from a map of tokens
   $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;
@@ -596,6 +598,10 @@ Define theme variables from a map of tokens
       --#{$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')
@@ -1289,6 +1295,19 @@ Define theme variables from a map of tokens
       );
     }
 
+    @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,
@@ -2072,6 +2091,7 @@ Define theme variables from a map of tokens
   - [highlight [variable]](#highlight-variable)
   - [decorative-01 [variable]](#decorative-01-variable)
   - [hover-light-ui [variable]](#hover-light-ui-variable)
+  - [button-separator [variable]](#button-separator-variable)
   - [skeleton-01 [variable]](#skeleton-01-variable)
   - [skeleton-02 [variable]](#skeleton-02-variable)
   - [brand-01 [variable]](#brand-01-variable)
@@ -2228,6 +2248,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,
@@ -2303,6 +2324,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,
@@ -2469,6 +2491,7 @@ $carbon--theme: (
   highlight: if(global-variable-exists('highlight'), $highlight, map-get($carbon--theme--white, 'highlight')),
   decorative-01: if(global-variable-exists('decorative-01'), $decorative-01, map-get($carbon--theme--white, 'decorative-01')),
   hover-light-ui: if(global-variable-exists('hover-light-ui'), $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'), $skeleton-01, map-get($carbon--theme--white, 'skeleton-01')),
   skeleton-02: if(global-variable-exists('skeleton-02'), $skeleton-02, map-get($carbon--theme--white, 'skeleton-02')),
   brand-01: if(global-variable-exists('brand-01'), $brand-01, map-get($carbon--theme--white, 'brand-01')),
@@ -4035,6 +4058,29 @@ $hover-light-ui: if(
 
 </details>
 
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅button-separator [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$button-separator: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'button-separator'
+    ),
+  map-get($carbon--theme, 'button-separator'),
+  #e0e0e0
+);
+```
+
+</details>
+
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `{undefined}`
 - **Used by**:

package/es/index.js

@@ -138,6 +138,7 @@ var disabled03 = gray50;
 var highlight = blue20;
 var decorative01 = gray20;
 var hoverLightUI = '#e5e5e5';
+var buttonSeparator = '#e0e0e0';
 var skeleton01 = '#e5e5e5';
 var skeleton02 = gray30; // Type
 
@@ -208,6 +209,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   highlight: highlight,
   decorative01: decorative01,
   hoverLightUI: hoverLightUI,
+  buttonSeparator: buttonSeparator,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
   brand01: brand01,
@@ -345,6 +347,7 @@ var disabled03$1 = gray50;
 var highlight$1 = blue20;
 var decorative01$1 = gray20;
 var hoverLightUI$1 = '#e5e5e5';
+var buttonSeparator$1 = '#e0e0e0';
 var skeleton01$1 = '#e5e5e5';
 var skeleton02$1 = gray30;
 
@@ -415,6 +418,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,
@@ -552,6 +556,7 @@ var disabled03$2 = gray50;
 var highlight$2 = blue80;
 var decorative01$2 = gray70;
 var hoverLightUI$2 = '#525252';
+var buttonSeparator$2 = '#161616';
 var skeleton01$2 = '#353535';
 var skeleton02$2 = gray80;
 
@@ -622,6 +627,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,
@@ -759,6 +765,7 @@ var disabled03$3 = gray40;
 var highlight$3 = blue70;
 var decorative01$3 = gray60;
 var hoverLightUI$3 = '#6f6f6f';
+var buttonSeparator$3 = '#161616';
 var skeleton01$3 = '#353535';
 var skeleton02$3 = gray70;
 
@@ -829,6 +836,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,
@@ -966,6 +974,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)';
 
@@ -1036,6 +1045,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,
@@ -1116,7 +1126,7 @@ var v9 = /*#__PURE__*/Object.freeze({
 
 var colors = [// 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'];
 /**
@@ -1168,7 +1178,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']
 };
@@ -1187,4 +1197,4 @@ var themes = {
   v9: v9
 };
 
-export { g10, g90, g100, white$1 as white, v9, tokens, formatTokenName, unstable__meta, themes, 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, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, selectedLightUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, decorative01, hoverLightUI, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField };
+export { g10, g90, g100, white$1 as white, v9, tokens, formatTokenName, unstable__meta, themes, 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, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, selectedLightUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, decorative01, hoverLightUI, buttonSeparator, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField };

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.15.0",
+  "version": "10.17.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,9 +24,9 @@
     "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/colors": "^10.12.0",
     "@carbon/layout": "^10.12.0",
-    "@carbon/type": "^10.13.0",
+    "@carbon/type": "^10.14.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "4d9cf186a840c295ac15dad2d38907e93d4eb256"
+  "gitHead": "00f22e2f25c76f02e67c4c95c4a050afc2bc10c5"
 }

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,
@@ -564,6 +565,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 +631,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 +1079,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'),

package/scss/generated/_tokens.scss

@@ -657,6 +657,16 @@ $hover-light-ui: if(
   #e5e5e5
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$button-separator: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'button-separator'),
+  map-get($carbon--theme, 'button-separator'),
+  #e0e0e0
+) !default;
+
 /// Skeleton state of graphics
 /// @type {undefined}
 /// @access public

package/src/g10.js

@@ -130,6 +130,8 @@ export const decorative01 = gray20;
 
 export const hoverLightUI = '#e5e5e5';
 
+export const buttonSeparator = '#e0e0e0';
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

package/src/g100.js

@@ -129,6 +129,8 @@ export const decorative01 = gray70;
 
 export const hoverLightUI = '#525252';
 
+export const buttonSeparator = '#161616';
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray80;
 

package/src/g90.js

@@ -131,6 +131,8 @@ export const decorative01 = gray60;
 
 export const hoverLightUI = '#6f6f6f';
 
+export const buttonSeparator = '#161616';
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 

package/src/tokens.js

@@ -99,6 +99,8 @@ const colors = [
 
   'hoverLightUI',
 
+  'buttonSeparator',
+
   'skeleton01',
   'skeleton02',
 
@@ -233,6 +235,7 @@ export const unstable__meta = {
         'hoverField',
         'decorative01',
         'hoverLightUI',
+        'buttonSeparator',
       ],
     },
   ],

package/src/v9.js

@@ -94,6 +94,8 @@ export const decorative01 = '#EEF4FC';
 
 export const hoverLightUI = '#EEF4FC';
 
+export const buttonSeparator = '#e0e0e0';
+
 export const skeleton01 = 'rgba(61, 112, 178, .1)';
 export const skeleton02 = 'rgba(61, 112, 178, .1)';
 

package/src/white.js

@@ -130,6 +130,8 @@ export const decorative01 = gray20;
 
 export const hoverLightUI = '#e5e5e5';
 
+export const buttonSeparator = '#e0e0e0';
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

package/umd/index.js

@@ -139,6 +139,7 @@
   var highlight = colors.blue20;
   var decorative01 = colors.gray20;
   var hoverLightUI = '#e5e5e5';
+  var buttonSeparator = '#e0e0e0';
   var skeleton01 = '#e5e5e5';
   var skeleton02 = colors.gray30; // Type
 
@@ -209,6 +210,7 @@
     highlight: highlight,
     decorative01: decorative01,
     hoverLightUI: hoverLightUI,
+    buttonSeparator: buttonSeparator,
     skeleton01: skeleton01,
     skeleton02: skeleton02,
     brand01: brand01,
@@ -346,6 +348,7 @@
   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;
 
@@ -416,6 +419,7 @@
     highlight: highlight$1,
     decorative01: decorative01$1,
     hoverLightUI: hoverLightUI$1,
+    buttonSeparator: buttonSeparator$1,
     skeleton01: skeleton01$1,
     skeleton02: skeleton02$1,
     brand01: brand01$1,
@@ -553,6 +557,7 @@
   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;
 
@@ -623,6 +628,7 @@
     highlight: highlight$2,
     decorative01: decorative01$2,
     hoverLightUI: hoverLightUI$2,
+    buttonSeparator: buttonSeparator$2,
     skeleton01: skeleton01$2,
     skeleton02: skeleton02$2,
     brand01: brand01$2,
@@ -760,6 +766,7 @@
   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;
 
@@ -830,6 +837,7 @@
     highlight: highlight$3,
     decorative01: decorative01$3,
     hoverLightUI: hoverLightUI$3,
+    buttonSeparator: buttonSeparator$3,
     skeleton01: skeleton01$3,
     skeleton02: skeleton02$3,
     brand01: brand01$3,
@@ -967,6 +975,7 @@
   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)';
 
@@ -1037,6 +1046,7 @@
     highlight: highlight$4,
     decorative01: decorative01$4,
     hoverLightUI: hoverLightUI$4,
+    buttonSeparator: buttonSeparator$4,
     skeleton01: skeleton01$4,
     skeleton02: skeleton02$4,
     brand01: brand01$4,
@@ -1117,7 +1127,7 @@
 
   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'];
   /**
@@ -1169,7 +1179,7 @@
       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']
   };
@@ -1318,6 +1328,7 @@
   exports.highlight = highlight;
   exports.decorative01 = decorative01;
   exports.hoverLightUI = hoverLightUI;
+  exports.buttonSeparator = buttonSeparator;
   exports.skeleton01 = skeleton01;
   exports.skeleton02 = skeleton02;
   exports.brand01 = brand01;