@carbon/themes 10.14.0 → 10.16.0

package/docs/sass.md

@@ -77,6 +77,7 @@
   - [✅disabled-03 [variable]](#disabled-03-variable)
   - [✅highlight [variable]](#highlight-variable)
   - [✅decorative-01 [variable]](#decorative-01-variable)
+  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
   - [✅skeleton-01 [variable]](#skeleton-01-variable)
   - [✅skeleton-02 [variable]](#skeleton-02-variable)
   - [✅⚠️brand-01 [variable]](#brand-01-variable)
@@ -282,6 +283,7 @@ Define theme variables from a map of tokens
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
   $decorative-01: map-get($theme, 'decorative-01') !global;
+  $hover-light-ui: map-get($theme, 'hover-light-ui') !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;
@@ -590,6 +592,10 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-decorative-01,
       map-get($theme, 'decorative-01')
     ) !global;
+    $hover-light-ui: var(
+      --#{$custom-property-prefix}-hover-light-ui,
+      map-get($theme, 'hover-light-ui')
+    ) !global;
     $skeleton-01: var(
       --#{$custom-property-prefix}-skeleton-01,
       map-get($theme, 'skeleton-01')
@@ -1270,6 +1276,19 @@ Define theme variables from a map of tokens
       );
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'hover-light-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'hover-light-ui',
+        map-get($theme, 'hover-light-ui')
+      );
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,
@@ -2052,6 +2071,7 @@ Define theme variables from a map of tokens
   - [disabled-03 [variable]](#disabled-03-variable)
   - [highlight [variable]](#highlight-variable)
   - [decorative-01 [variable]](#decorative-01-variable)
+  - [hover-light-ui [variable]](#hover-light-ui-variable)
   - [skeleton-01 [variable]](#skeleton-01-variable)
   - [skeleton-02 [variable]](#skeleton-02-variable)
   - [brand-01 [variable]](#brand-01-variable)
@@ -2207,6 +2227,7 @@ $carbon--theme--g90: map-merge(
     disabled-03: #a8a8a8,
     highlight: #0043ce,
     decorative-01: #6f6f6f,
+    hover-light-ui: #6f6f6f,
     skeleton-01: #353535,
     skeleton-02: #525252,
     brand-02: #6f6f6f,
@@ -2281,6 +2302,7 @@ $carbon--theme--g100: map-merge(
     disabled-02: #525252,
     highlight: #002d9c,
     decorative-01: #525252,
+    hover-light-ui: #525252,
     skeleton-01: #353535,
     skeleton-02: #393939,
     brand-02: #6f6f6f,
@@ -2361,6 +2383,7 @@ $carbon--theme--v9: map-merge(
     disabled-03: #cdd1d4,
     highlight: #f4f7fb,
     decorative-01: #eef4fc,
+    hover-light-ui: #eef4fc,
     skeleton-01: rgba(61, 112, 178, 0.1),
     skeleton-02: rgba(61, 112, 178, 0.1),
     brand-01: #3d70b2,
@@ -2445,6 +2468,7 @@ $carbon--theme: (
   disabled-03: if(global-variable-exists('disabled-03'), $disabled-03, map-get($carbon--theme--white, 'disabled-03')),
   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')),
   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')),
@@ -3988,6 +4012,29 @@ $decorative-01: if(
 
 </details>
 
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅hover-light-ui [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$hover-light-ui: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'hover-light-ui'
+    ),
+  map-get($carbon--theme, 'hover-light-ui'),
+  #e5e5e5
+);
+```
+
+</details>
+
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `{undefined}`
 - **Used by**:

package/es/index.js

@@ -137,6 +137,7 @@ var disabled02 = gray30;
 var disabled03 = gray50;
 var highlight = blue20;
 var decorative01 = gray20;
+var hoverLightUI = '#e5e5e5';
 var skeleton01 = '#e5e5e5';
 var skeleton02 = gray30; // Type
 
@@ -206,6 +207,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03,
   highlight: highlight,
   decorative01: decorative01,
+  hoverLightUI: hoverLightUI,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
   brand01: brand01,
@@ -342,6 +344,7 @@ var disabled02$1 = gray30;
 var disabled03$1 = gray50;
 var highlight$1 = blue20;
 var decorative01$1 = gray20;
+var hoverLightUI$1 = '#e5e5e5';
 var skeleton01$1 = '#e5e5e5';
 var skeleton02$1 = gray30;
 
@@ -411,6 +414,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$1,
   highlight: highlight$1,
   decorative01: decorative01$1,
+  hoverLightUI: hoverLightUI$1,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
   brand01: brand01$1,
@@ -547,6 +551,7 @@ var disabled02$2 = gray70;
 var disabled03$2 = gray50;
 var highlight$2 = blue80;
 var decorative01$2 = gray70;
+var hoverLightUI$2 = '#525252';
 var skeleton01$2 = '#353535';
 var skeleton02$2 = gray80;
 
@@ -616,6 +621,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$2,
   highlight: highlight$2,
   decorative01: decorative01$2,
+  hoverLightUI: hoverLightUI$2,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
   brand01: brand01$2,
@@ -752,6 +758,7 @@ var disabled02$3 = gray60;
 var disabled03$3 = gray40;
 var highlight$3 = blue70;
 var decorative01$3 = gray60;
+var hoverLightUI$3 = '#6f6f6f';
 var skeleton01$3 = '#353535';
 var skeleton02$3 = gray70;
 
@@ -821,6 +828,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$3,
   highlight: highlight$3,
   decorative01: decorative01$3,
+  hoverLightUI: hoverLightUI$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
   brand01: brand01$3,
@@ -957,6 +965,7 @@ var disabled02$4 = '#dfe3e6';
 var disabled03$4 = '#cdd1d4';
 var highlight$4 = '#f4f7fb';
 var decorative01$4 = '#EEF4FC';
+var hoverLightUI$4 = '#EEF4FC';
 var skeleton01$4 = 'rgba(61, 112, 178, .1)';
 var skeleton02$4 = 'rgba(61, 112, 178, .1)';
 
@@ -1026,6 +1035,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$4,
   highlight: highlight$4,
   decorative01: decorative01$4,
+  hoverLightUI: hoverLightUI$4,
   skeleton01: skeleton01$4,
   skeleton02: skeleton02$4,
   brand01: brand01$4,
@@ -1106,7 +1116,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', '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', 'skeleton01', 'skeleton02', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -1158,7 +1168,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']
+    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']
   }],
   deprecated: ['brand01', 'brand02', 'brand03', 'active01']
 };
@@ -1177,4 +1187,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, 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, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField };

package/lib/index.js

@@ -141,6 +141,7 @@ var disabled02 = colors.gray30;
 var disabled03 = colors.gray50;
 var highlight = colors.blue20;
 var decorative01 = colors.gray20;
+var hoverLightUI = '#e5e5e5';
 var skeleton01 = '#e5e5e5';
 var skeleton02 = colors.gray30; // Type
 
@@ -210,6 +211,7 @@ var white = /*#__PURE__*/Object.freeze({
   disabled03: disabled03,
   highlight: highlight,
   decorative01: decorative01,
+  hoverLightUI: hoverLightUI,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
   brand01: brand01,
@@ -346,6 +348,7 @@ var disabled02$1 = colors.gray30;
 var disabled03$1 = colors.gray50;
 var highlight$1 = colors.blue20;
 var decorative01$1 = colors.gray20;
+var hoverLightUI$1 = '#e5e5e5';
 var skeleton01$1 = '#e5e5e5';
 var skeleton02$1 = colors.gray30;
 
@@ -415,6 +418,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$1,
   highlight: highlight$1,
   decorative01: decorative01$1,
+  hoverLightUI: hoverLightUI$1,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
   brand01: brand01$1,
@@ -551,6 +555,7 @@ var disabled02$2 = colors.gray70;
 var disabled03$2 = colors.gray50;
 var highlight$2 = colors.blue80;
 var decorative01$2 = colors.gray70;
+var hoverLightUI$2 = '#525252';
 var skeleton01$2 = '#353535';
 var skeleton02$2 = colors.gray80;
 
@@ -620,6 +625,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$2,
   highlight: highlight$2,
   decorative01: decorative01$2,
+  hoverLightUI: hoverLightUI$2,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
   brand01: brand01$2,
@@ -756,6 +762,7 @@ var disabled02$3 = colors.gray60;
 var disabled03$3 = colors.gray40;
 var highlight$3 = colors.blue70;
 var decorative01$3 = colors.gray60;
+var hoverLightUI$3 = '#6f6f6f';
 var skeleton01$3 = '#353535';
 var skeleton02$3 = colors.gray70;
 
@@ -825,6 +832,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$3,
   highlight: highlight$3,
   decorative01: decorative01$3,
+  hoverLightUI: hoverLightUI$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
   brand01: brand01$3,
@@ -961,6 +969,7 @@ var disabled02$4 = '#dfe3e6';
 var disabled03$4 = '#cdd1d4';
 var highlight$4 = '#f4f7fb';
 var decorative01$4 = '#EEF4FC';
+var hoverLightUI$4 = '#EEF4FC';
 var skeleton01$4 = 'rgba(61, 112, 178, .1)';
 var skeleton02$4 = 'rgba(61, 112, 178, .1)';
 
@@ -1030,6 +1039,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$4,
   highlight: highlight$4,
   decorative01: decorative01$4,
+  hoverLightUI: hoverLightUI$4,
   skeleton01: skeleton01$4,
   skeleton02: skeleton02$4,
   brand01: brand01$4,
@@ -1110,7 +1120,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', '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', 'skeleton01', 'skeleton02', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -1162,7 +1172,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']
+    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']
   }],
   deprecated: ['brand01', 'brand02', 'brand03', 'active01']
 };
@@ -1310,6 +1320,7 @@ exports.disabled02 = disabled02;
 exports.disabled03 = disabled03;
 exports.highlight = highlight;
 exports.decorative01 = decorative01;
+exports.hoverLightUI = hoverLightUI;
 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.14.0",
+  "version": "10.16.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,8 +25,8 @@
   },
   "dependencies": {
     "@carbon/colors": "^10.11.0",
-    "@carbon/layout": "^10.11.0",
-    "@carbon/type": "^10.12.0",
+    "@carbon/layout": "^10.12.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": "ff543b3d3dbbf51170a185c0ecff62b7dca253c7"
+  "gitHead": "213cbde854a4958334cff9914b91863ce6debb9d"
 }

package/scss/generated/_mixins.scss

@@ -97,6 +97,7 @@
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
   $decorative-01: map-get($theme, 'decorative-01') !global;
+  $hover-light-ui: map-get($theme, 'hover-light-ui') !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;
@@ -405,6 +406,10 @@
       --#{$custom-property-prefix}-decorative-01,
       map-get($theme, 'decorative-01')
     ) !global;
+    $hover-light-ui: var(
+      --#{$custom-property-prefix}-hover-light-ui,
+      map-get($theme, 'hover-light-ui')
+    ) !global;
     $skeleton-01: var(
       --#{$custom-property-prefix}-skeleton-01,
       map-get($theme, 'skeleton-01')
@@ -1085,6 +1090,19 @@
       );
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'hover-light-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'hover-light-ui',
+        map-get($theme, 'hover-light-ui')
+      );
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/generated/_themes.scss

@@ -66,6 +66,7 @@ $carbon--theme--white: (
   disabled-03: #8d8d8d,
   highlight: #d0e2ff,
   decorative-01: #e0e0e0,
+  hover-light-ui: #e5e5e5,
   skeleton-01: #e5e5e5,
   skeleton-02: #c6c6c6,
   brand-01: #0f62fe,
@@ -562,6 +563,7 @@ $carbon--theme--g90: map-merge(
     disabled-03: #a8a8a8,
     highlight: #0043ce,
     decorative-01: #6f6f6f,
+    hover-light-ui: #6f6f6f,
     skeleton-01: #353535,
     skeleton-02: #525252,
     brand-02: #6f6f6f,
@@ -626,6 +628,7 @@ $carbon--theme--g100: map-merge(
     disabled-02: #525252,
     highlight: #002d9c,
     decorative-01: #525252,
+    hover-light-ui: #525252,
     skeleton-01: #353535,
     skeleton-02: #393939,
     brand-02: #6f6f6f,
@@ -696,6 +699,7 @@ $carbon--theme--v9: map-merge(
     disabled-03: #cdd1d4,
     highlight: #f4f7fb,
     decorative-01: #eef4fc,
+    hover-light-ui: #eef4fc,
     skeleton-01: rgba(61, 112, 178, 0.1),
     skeleton-02: rgba(61, 112, 178, 0.1),
     brand-01: #3d70b2,
@@ -1066,6 +1070,12 @@ $carbon--theme: (
       $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')
+    ),
   skeleton-01:
     if(
       global-variable-exists('skeleton-01'),

package/scss/generated/_tokens.scss

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

package/src/g10.js

@@ -128,6 +128,8 @@ export const highlight = blue20;
 
 export const decorative01 = gray20;
 
+export const hoverLightUI = '#e5e5e5';
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

package/src/g100.js

@@ -127,6 +127,8 @@ export const highlight = blue80;
 
 export const decorative01 = gray70;
 
+export const hoverLightUI = '#525252';
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray80;
 

package/src/g90.js

@@ -129,6 +129,8 @@ export const highlight = blue70;
 
 export const decorative01 = gray60;
 
+export const hoverLightUI = '#6f6f6f';
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 

package/src/tokens.js

@@ -97,6 +97,8 @@ const colors = [
 
   'decorative01',
 
+  'hoverLightUI',
+
   'skeleton01',
   'skeleton02',
 
@@ -230,6 +232,7 @@ export const unstable__meta = {
         'active01',
         'hoverField',
         'decorative01',
+        'hoverLightUI',
       ],
     },
   ],

package/src/v9.js

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

package/src/white.js

@@ -128,6 +128,8 @@ export const highlight = blue20;
 
 export const decorative01 = gray20;
 
+export const hoverLightUI = '#e5e5e5';
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

package/umd/index.js

@@ -138,6 +138,7 @@
   var disabled03 = colors.gray50;
   var highlight = colors.blue20;
   var decorative01 = colors.gray20;
+  var hoverLightUI = '#e5e5e5';
   var skeleton01 = '#e5e5e5';
   var skeleton02 = colors.gray30; // Type
 
@@ -207,6 +208,7 @@
     disabled03: disabled03,
     highlight: highlight,
     decorative01: decorative01,
+    hoverLightUI: hoverLightUI,
     skeleton01: skeleton01,
     skeleton02: skeleton02,
     brand01: brand01,
@@ -343,6 +345,7 @@
   var disabled03$1 = colors.gray50;
   var highlight$1 = colors.blue20;
   var decorative01$1 = colors.gray20;
+  var hoverLightUI$1 = '#e5e5e5';
   var skeleton01$1 = '#e5e5e5';
   var skeleton02$1 = colors.gray30;
 
@@ -412,6 +415,7 @@
     disabled03: disabled03$1,
     highlight: highlight$1,
     decorative01: decorative01$1,
+    hoverLightUI: hoverLightUI$1,
     skeleton01: skeleton01$1,
     skeleton02: skeleton02$1,
     brand01: brand01$1,
@@ -548,6 +552,7 @@
   var disabled03$2 = colors.gray50;
   var highlight$2 = colors.blue80;
   var decorative01$2 = colors.gray70;
+  var hoverLightUI$2 = '#525252';
   var skeleton01$2 = '#353535';
   var skeleton02$2 = colors.gray80;
 
@@ -617,6 +622,7 @@
     disabled03: disabled03$2,
     highlight: highlight$2,
     decorative01: decorative01$2,
+    hoverLightUI: hoverLightUI$2,
     skeleton01: skeleton01$2,
     skeleton02: skeleton02$2,
     brand01: brand01$2,
@@ -753,6 +759,7 @@
   var disabled03$3 = colors.gray40;
   var highlight$3 = colors.blue70;
   var decorative01$3 = colors.gray60;
+  var hoverLightUI$3 = '#6f6f6f';
   var skeleton01$3 = '#353535';
   var skeleton02$3 = colors.gray70;
 
@@ -822,6 +829,7 @@
     disabled03: disabled03$3,
     highlight: highlight$3,
     decorative01: decorative01$3,
+    hoverLightUI: hoverLightUI$3,
     skeleton01: skeleton01$3,
     skeleton02: skeleton02$3,
     brand01: brand01$3,
@@ -958,6 +966,7 @@
   var disabled03$4 = '#cdd1d4';
   var highlight$4 = '#f4f7fb';
   var decorative01$4 = '#EEF4FC';
+  var hoverLightUI$4 = '#EEF4FC';
   var skeleton01$4 = 'rgba(61, 112, 178, .1)';
   var skeleton02$4 = 'rgba(61, 112, 178, .1)';
 
@@ -1027,6 +1036,7 @@
     disabled03: disabled03$4,
     highlight: highlight$4,
     decorative01: decorative01$4,
+    hoverLightUI: hoverLightUI$4,
     skeleton01: skeleton01$4,
     skeleton02: skeleton02$4,
     brand01: brand01$4,
@@ -1107,7 +1117,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', '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', 'skeleton01', 'skeleton02', // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
   var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
   /**
@@ -1159,7 +1169,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']
+      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']
     }],
     deprecated: ['brand01', 'brand02', 'brand03', 'active01']
   };
@@ -1307,6 +1317,7 @@
   exports.disabled03 = disabled03;
   exports.highlight = highlight;
   exports.decorative01 = decorative01;
+  exports.hoverLightUI = hoverLightUI;
   exports.skeleton01 = skeleton01;
   exports.skeleton02 = skeleton02;
   exports.brand01 = brand01;