@carbon/themes 10.23.0-rc.0 → 10.23.0

package/lib/index.js

@@ -128,7 +128,9 @@ var activeSecondary = colors.gray60;
 var hoverTertiary = '#0353e9';
 var activeTertiary = colors.blue80;
 var hoverUI = '#e5e5e5';
+var hoverLightUI = '#e5e5e5';
 var activeUI = colors.gray30;
+var activeLightUI = colors.gray30;
 var selectedUI = colors.gray20;
 var selectedLightUI = colors.gray20;
 var inverseHoverUI = '#4c4c4c';
@@ -142,7 +144,6 @@ var disabled02 = colors.gray30;
 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
@@ -201,7 +202,9 @@ var white = /*#__PURE__*/Object.freeze({
   hoverTertiary: hoverTertiary,
   activeTertiary: activeTertiary,
   hoverUI: hoverUI,
+  hoverLightUI: hoverLightUI,
   activeUI: activeUI,
+  activeLightUI: activeLightUI,
   selectedUI: selectedUI,
   selectedLightUI: selectedLightUI,
   inverseHoverUI: inverseHoverUI,
@@ -215,7 +218,6 @@ var white = /*#__PURE__*/Object.freeze({
   disabled03: disabled03,
   highlight: highlight,
   decorative01: decorative01,
-  hoverLightUI: hoverLightUI,
   buttonSeparator: buttonSeparator,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
@@ -341,7 +343,9 @@ var activeSecondary$1 = colors.gray60;
 var hoverTertiary$1 = '#0353e9';
 var activeTertiary$1 = colors.blue80;
 var hoverUI$1 = '#e5e5e5';
+var hoverLightUI$1 = '#e5e5e5';
 var activeUI$1 = colors.gray30;
+var activeLightUI$1 = colors.gray30;
 var selectedUI$1 = colors.gray20;
 var selectedLightUI$1 = colors.gray20;
 var inverseHoverUI$1 = '#4c4c4c';
@@ -355,7 +359,6 @@ var disabled02$1 = colors.gray30;
 var disabled03$1 = colors.gray50;
 var highlight$1 = colors.blue10;
 var decorative01$1 = colors.gray20;
-var hoverLightUI$1 = '#e5e5e5';
 var buttonSeparator$1 = '#e0e0e0';
 var skeleton01$1 = '#e5e5e5';
 var skeleton02$1 = colors.gray30;
@@ -414,7 +417,9 @@ var g10 = /*#__PURE__*/Object.freeze({
   hoverTertiary: hoverTertiary$1,
   activeTertiary: activeTertiary$1,
   hoverUI: hoverUI$1,
+  hoverLightUI: hoverLightUI$1,
   activeUI: activeUI$1,
+  activeLightUI: activeLightUI$1,
   selectedUI: selectedUI$1,
   selectedLightUI: selectedLightUI$1,
   inverseHoverUI: inverseHoverUI$1,
@@ -428,7 +433,6 @@ var g10 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$1,
   highlight: highlight$1,
   decorative01: decorative01$1,
-  hoverLightUI: hoverLightUI$1,
   buttonSeparator: buttonSeparator$1,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
@@ -554,7 +558,9 @@ var activeSecondary$2 = colors.gray80;
 var hoverTertiary$2 = colors.gray10;
 var activeTertiary$2 = colors.gray30;
 var hoverUI$2 = '#353535';
+var hoverLightUI$2 = '#4c4c4c';
 var activeUI$2 = colors.gray70;
+var activeLightUI$2 = colors.gray60;
 var selectedUI$2 = colors.gray80;
 var selectedLightUI$2 = colors.gray70;
 var inverseHoverUI$2 = '#e5e5e5';
@@ -568,7 +574,6 @@ 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 buttonSeparator$2 = '#161616';
 var skeleton01$2 = '#353535';
 var skeleton02$2 = colors.gray80;
@@ -627,7 +632,9 @@ var g100 = /*#__PURE__*/Object.freeze({
   hoverTertiary: hoverTertiary$2,
   activeTertiary: activeTertiary$2,
   hoverUI: hoverUI$2,
+  hoverLightUI: hoverLightUI$2,
   activeUI: activeUI$2,
+  activeLightUI: activeLightUI$2,
   selectedUI: selectedUI$2,
   selectedLightUI: selectedLightUI$2,
   inverseHoverUI: inverseHoverUI$2,
@@ -641,7 +648,6 @@ var g100 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$2,
   highlight: highlight$2,
   decorative01: decorative01$2,
-  hoverLightUI: hoverLightUI$2,
   buttonSeparator: buttonSeparator$2,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
@@ -767,7 +773,9 @@ var activeSecondary$3 = colors.gray80;
 var hoverTertiary$3 = colors.gray10;
 var activeTertiary$3 = colors.gray30;
 var hoverUI$3 = '#4c4c4c';
+var hoverLightUI$3 = '#656565';
 var activeUI$3 = colors.gray60;
+var activeLightUI$3 = colors.gray50;
 var selectedUI$3 = colors.gray70;
 var selectedLightUI$3 = colors.gray60;
 var inverseHoverUI$3 = '#e5e5e5';
@@ -781,7 +789,6 @@ 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 buttonSeparator$3 = '#161616';
 var skeleton01$3 = '#353535';
 var skeleton02$3 = colors.gray70;
@@ -840,7 +847,9 @@ var g90 = /*#__PURE__*/Object.freeze({
   hoverTertiary: hoverTertiary$3,
   activeTertiary: activeTertiary$3,
   hoverUI: hoverUI$3,
+  hoverLightUI: hoverLightUI$3,
   activeUI: activeUI$3,
+  activeLightUI: activeLightUI$3,
   selectedUI: selectedUI$3,
   selectedLightUI: selectedLightUI$3,
   inverseHoverUI: inverseHoverUI$3,
@@ -854,7 +863,6 @@ var g90 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$3,
   highlight: highlight$3,
   decorative01: decorative01$3,
-  hoverLightUI: hoverLightUI$3,
   buttonSeparator: buttonSeparator$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
@@ -980,7 +988,9 @@ var activeSecondary$4 = '#414f59';
 var hoverTertiary$4 = '#5a6872';
 var activeTertiary$4 = '#414f59';
 var hoverUI$4 = '#EEF4FC';
+var hoverLightUI$4 = '#EEF4FC';
 var activeUI$4 = '#DFEAFA';
+var activeLightUI$4 = '#DFEAFA';
 var selectedUI$4 = '#EEF4FC';
 var selectedLightUI$4 = '#EEF4FC';
 var inverseHoverUI$4 = '#4c4c4c';
@@ -994,7 +1004,6 @@ var disabled02$4 = '#dfe3e6';
 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)';
@@ -1053,7 +1062,9 @@ var v9 = /*#__PURE__*/Object.freeze({
   hoverTertiary: hoverTertiary$4,
   activeTertiary: activeTertiary$4,
   hoverUI: hoverUI$4,
+  hoverLightUI: hoverLightUI$4,
   activeUI: activeUI$4,
+  activeLightUI: activeLightUI$4,
   selectedUI: selectedUI$4,
   selectedLightUI: selectedLightUI$4,
   inverseHoverUI: inverseHoverUI$4,
@@ -1067,7 +1078,6 @@ var v9 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$4,
   highlight: highlight$4,
   decorative01: decorative01$4,
-  hoverLightUI: hoverLightUI$4,
   buttonSeparator: buttonSeparator$4,
   skeleton01: skeleton01$4,
   skeleton02: skeleton02$4,
@@ -1150,7 +1160,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', 'danger01', 'danger02', // 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', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
+'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -1202,7 +1212,7 @@ var unstable__meta = {
     tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', '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', 'buttonSeparator']
+    tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator']
   }],
   deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger']
 };
@@ -1337,7 +1347,9 @@ exports.activeSecondary = activeSecondary;
 exports.hoverTertiary = hoverTertiary;
 exports.activeTertiary = activeTertiary;
 exports.hoverUI = hoverUI;
+exports.hoverLightUI = hoverLightUI;
 exports.activeUI = activeUI;
+exports.activeLightUI = activeLightUI;
 exports.selectedUI = selectedUI;
 exports.selectedLightUI = selectedLightUI;
 exports.inverseHoverUI = inverseHoverUI;
@@ -1351,7 +1363,6 @@ exports.disabled02 = disabled02;
 exports.disabled03 = disabled03;
 exports.highlight = highlight;
 exports.decorative01 = decorative01;
-exports.hoverLightUI = hoverLightUI;
 exports.buttonSeparator = buttonSeparator;
 exports.skeleton01 = skeleton01;
 exports.skeleton02 = skeleton02;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.23.0-rc.0",
+  "version": "10.23.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,7 +24,7 @@
     "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.16.0-rc.0",
+    "@carbon/colors": "^10.16.0",
     "@carbon/layout": "^10.14.0",
     "@carbon/type": "^10.17.0",
     "color": "^3.1.2"
@@ -40,5 +40,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "29e8535e3699c573eb9f32c234733c28d6763da1"
+  "gitHead": "c8bb7cd25e5e4f92b3e12feb90261bcc87572470"
 }

package/scss/generated/_mixins.scss

@@ -84,10 +84,12 @@
   $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
   $active-tertiary: map-get($theme, 'active-tertiary') !global;
   $hover-ui: map-get($theme, 'hover-ui') !global;
+  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
+  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
   $active-ui: map-get($theme, 'active-ui') !global;
+  $active-light-ui: map-get($theme, 'active-light-ui') !global;
   $selected-ui: map-get($theme, 'selected-ui') !global;
   $selected-light-ui: map-get($theme, 'selected-light-ui') !global;
-  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
   $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;
   $hover-danger: map-get($theme, 'hover-danger') !global;
   $active-danger: map-get($theme, 'active-danger') !global;
@@ -98,7 +100,6 @@
   $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;
   $button-separator: map-get($theme, 'button-separator') !global;
   $skeleton-01: map-get($theme, 'skeleton-01') !global;
   $skeleton-02: map-get($theme, 'skeleton-02') !global;
@@ -357,10 +358,22 @@
       --#{$custom-property-prefix}-hover-ui,
       map-get($theme, 'hover-ui')
     ) !global;
+    $hover-light-ui: var(
+      --#{$custom-property-prefix}-hover-light-ui,
+      map-get($theme, 'hover-light-ui')
+    ) !global;
+    $hover-selected-ui: var(
+      --#{$custom-property-prefix}-hover-selected-ui,
+      map-get($theme, 'hover-selected-ui')
+    ) !global;
     $active-ui: var(
       --#{$custom-property-prefix}-active-ui,
       map-get($theme, 'active-ui')
     ) !global;
+    $active-light-ui: var(
+      --#{$custom-property-prefix}-active-light-ui,
+      map-get($theme, 'active-light-ui')
+    ) !global;
     $selected-ui: var(
       --#{$custom-property-prefix}-selected-ui,
       map-get($theme, 'selected-ui')
@@ -369,10 +382,6 @@
       --#{$custom-property-prefix}-selected-light-ui,
       map-get($theme, 'selected-light-ui')
     ) !global;
-    $hover-selected-ui: var(
-      --#{$custom-property-prefix}-hover-selected-ui,
-      map-get($theme, 'hover-selected-ui')
-    ) !global;
     $inverse-hover-ui: var(
       --#{$custom-property-prefix}-inverse-hover-ui,
       map-get($theme, 'inverse-hover-ui')
@@ -413,10 +422,6 @@
       --#{$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;
     $button-separator: var(
       --#{$custom-property-prefix}-button-separator,
       map-get($theme, 'button-separator')
@@ -971,44 +976,70 @@
       @include custom-property('hover-ui', map-get($theme, 'hover-ui'));
     }
 
-    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'hover-light-ui',
+      $emit-difference
+    )
     {
-      @include custom-property('active-ui', map-get($theme, 'active-ui'));
+      @include custom-property(
+        'hover-light-ui',
+        map-get($theme, 'hover-light-ui')
+      );
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'selected-ui',
+      'hover-selected-ui',
       $emit-difference
     )
     {
-      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+      @include custom-property(
+        'hover-selected-ui',
+        map-get($theme, 'hover-selected-ui')
+      );
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+    {
+      @include custom-property('active-ui', map-get($theme, 'active-ui'));
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'selected-light-ui',
+      'active-light-ui',
       $emit-difference
     )
     {
       @include custom-property(
-        'selected-light-ui',
-        map-get($theme, 'selected-light-ui')
+        'active-light-ui',
+        map-get($theme, 'active-light-ui')
       );
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'hover-selected-ui',
+      'selected-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'selected-light-ui',
       $emit-difference
     )
     {
       @include custom-property(
-        'hover-selected-ui',
-        map-get($theme, 'hover-selected-ui')
+        'selected-light-ui',
+        map-get($theme, 'selected-light-ui')
       );
     }
 
@@ -1111,19 +1142,6 @@
       );
     }
 
-    @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

@@ -53,7 +53,9 @@ $carbon--theme--white: (
   hover-tertiary: #0353e9,
   active-tertiary: #002d9c,
   hover-ui: #e5e5e5,
+  hover-light-ui: #e5e5e5,
   active-ui: #c6c6c6,
+  active-light-ui: #c6c6c6,
   selected-ui: #e0e0e0,
   selected-light-ui: #e0e0e0,
   inverse-hover-ui: #4c4c4c,
@@ -67,7 +69,6 @@ $carbon--theme--white: (
   disabled-03: #8d8d8d,
   highlight: #d0e2ff,
   decorative-01: #e0e0e0,
-  hover-light-ui: #e5e5e5,
   button-separator: #e0e0e0,
   skeleton-01: #e5e5e5,
   skeleton-02: #c6c6c6,
@@ -555,7 +556,9 @@ $carbon--theme--g90: map-merge(
     hover-tertiary: #f4f4f4,
     active-tertiary: #c6c6c6,
     hover-ui: #4c4c4c,
+    hover-light-ui: #656565,
     active-ui: #6f6f6f,
+    active-light-ui: #8d8d8d,
     selected-ui: #525252,
     selected-light-ui: #6f6f6f,
     inverse-hover-ui: #e5e5e5,
@@ -567,7 +570,6 @@ $carbon--theme--g90: map-merge(
     disabled-03: #a8a8a8,
     highlight: #0043ce,
     decorative-01: #6f6f6f,
-    hover-light-ui: #6f6f6f,
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
@@ -623,7 +625,9 @@ $carbon--theme--g100: map-merge(
     hover-tertiary: #f4f4f4,
     active-tertiary: #c6c6c6,
     hover-ui: #353535,
+    hover-light-ui: #4c4c4c,
     active-ui: #525252,
+    active-light-ui: #6f6f6f,
     selected-ui: #393939,
     selected-light-ui: #525252,
     inverse-hover-ui: #e5e5e5,
@@ -634,7 +638,6 @@ $carbon--theme--g100: map-merge(
     disabled-02: #525252,
     highlight: #002d9c,
     decorative-01: #525252,
-    hover-light-ui: #525252,
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #393939,
@@ -693,7 +696,9 @@ $carbon--theme--v9: map-merge(
     hover-tertiary: #5a6872,
     active-tertiary: #414f59,
     hover-ui: #eef4fc,
+    hover-light-ui: #eef4fc,
     active-ui: #dfeafa,
+    active-light-ui: #dfeafa,
     selected-ui: #eef4fc,
     selected-light-ui: #eef4fc,
     hover-selected-ui: #dfeafa,
@@ -706,7 +711,6 @@ $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,
@@ -999,12 +1003,30 @@ $carbon--theme: (
       $hover-ui,
       map-get($carbon--theme--white, 'hover-ui')
     ),
+  hover-light-ui:
+    if(
+      global-variable-exists('hover-light-ui'),
+      $hover-light-ui,
+      map-get($carbon--theme--white, 'hover-light-ui')
+    ),
+  hover-selected-ui:
+    if(
+      global-variable-exists('hover-selected-ui'),
+      $hover-selected-ui,
+      map-get($carbon--theme--white, 'hover-selected-ui')
+    ),
   active-ui:
     if(
       global-variable-exists('active-ui'),
       $active-ui,
       map-get($carbon--theme--white, 'active-ui')
     ),
+  active-light-ui:
+    if(
+      global-variable-exists('active-light-ui'),
+      $active-light-ui,
+      map-get($carbon--theme--white, 'active-light-ui')
+    ),
   selected-ui:
     if(
       global-variable-exists('selected-ui'),
@@ -1017,12 +1039,6 @@ $carbon--theme: (
       $selected-light-ui,
       map-get($carbon--theme--white, 'selected-light-ui')
     ),
-  hover-selected-ui:
-    if(
-      global-variable-exists('hover-selected-ui'),
-      $hover-selected-ui,
-      map-get($carbon--theme--white, 'hover-selected-ui')
-    ),
   inverse-hover-ui:
     if(
       global-variable-exists('inverse-hover-ui'),
@@ -1083,12 +1099,6 @@ $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')
-    ),
   button-separator:
     if(
       global-variable-exists('button-separator'),

package/scss/generated/_tokens.scss

@@ -506,6 +506,27 @@ $hover-ui: if(
   #e5e5e5
 ) !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;
+
+/// Data table selected row hover
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$hover-selected-ui: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'hover-selected-ui'),
+  map-get($carbon--theme, 'hover-selected-ui'),
+  #cacaca
+) !default;
+
 /// `$ui-01` active; `$ui-02` active
 /// @type {undefined}
 /// @access public
@@ -517,6 +538,16 @@ $active-ui: if(
   #c6c6c6
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$active-light-ui: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'active-light-ui'),
+  map-get($carbon--theme, 'active-light-ui'),
+  #c6c6c6
+) !default;
+
 /// Selected UI elements
 /// @type {undefined}
 /// @access public
@@ -538,17 +569,6 @@ $selected-light-ui: if(
   #e0e0e0
 ) !default;
 
-/// Data table selected row hover
-/// @type {undefined}
-/// @access public
-/// @group @carbon/themes
-$hover-selected-ui: if(
-  global-variable-exists('carbon--theme') and
-    map-has-key($carbon--theme, 'hover-selected-ui'),
-  map-get($carbon--theme, 'hover-selected-ui'),
-  #cacaca
-) !default;
-
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes
@@ -657,16 +677,6 @@ $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;
-
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes

package/src/g10.js

@@ -107,7 +107,9 @@ export const hoverTertiary = '#0353e9';
 export const activeTertiary = blue80;
 
 export const hoverUI = '#e5e5e5';
+export const hoverLightUI = '#e5e5e5';
 export const activeUI = gray30;
+export const activeLightUI = gray30;
 export const selectedUI = gray20;
 export const selectedLightUI = gray20;
 export const inverseHoverUI = '#4c4c4c';
@@ -129,8 +131,6 @@ export const highlight = blue10;
 
 export const decorative01 = gray20;
 
-export const hoverLightUI = '#e5e5e5';
-
 export const buttonSeparator = '#e0e0e0';
 
 export const skeleton01 = '#e5e5e5';

package/src/g100.js

@@ -106,7 +106,9 @@ export const hoverTertiary = gray10;
 export const activeTertiary = gray30;
 
 export const hoverUI = '#353535';
+export const hoverLightUI = '#4c4c4c';
 export const activeUI = gray70;
+export const activeLightUI = gray60;
 export const selectedUI = gray80;
 export const selectedLightUI = gray70;
 export const inverseHoverUI = '#e5e5e5';
@@ -128,8 +130,6 @@ export const highlight = blue80;
 
 export const decorative01 = gray70;
 
-export const hoverLightUI = '#525252';
-
 export const buttonSeparator = '#161616';
 
 export const skeleton01 = '#353535';

package/src/g90.js

@@ -108,7 +108,9 @@ export const hoverTertiary = gray10;
 export const activeTertiary = gray30;
 
 export const hoverUI = '#4c4c4c';
+export const hoverLightUI = '#656565';
 export const activeUI = gray60;
+export const activeLightUI = gray50;
 export const selectedUI = gray70;
 export const selectedLightUI = gray60;
 export const inverseHoverUI = '#e5e5e5';
@@ -130,8 +132,6 @@ export const highlight = blue70;
 
 export const decorative01 = gray60;
 
-export const hoverLightUI = '#6f6f6f';
-
 export const buttonSeparator = '#161616';
 
 export const skeleton01 = '#353535';