@carbon/themes 10.5.0 → 10.6.0

package/docs/sass.md

@@ -49,6 +49,7 @@
   - [✅inverse-support-04 [variable]](#inverse-support-04-variable)
   - [✅overlay-01 [variable]](#overlay-01-variable)
   - [✅focus [variable]](#focus-variable)
+  - [✅inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [✅hover-primary [variable]](#hover-primary-variable)
   - [✅active-primary [variable]](#active-primary-variable)
   - [✅hover-primary-text [variable]](#hover-primary-text-variable)
@@ -123,6 +124,7 @@ Define theme variables from a map of tokens
   $inverse-support-04: map-get($theme, 'inverse-support-04') !global;
   $overlay-01: map-get($theme, 'overlay-01') !global;
   $focus: map-get($theme, 'focus') !global;
+  $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global;
   $hover-primary: map-get($theme, 'hover-primary') !global;
   $active-primary: map-get($theme, 'active-primary') !global;
   $hover-primary-text: map-get($theme, 'hover-primary-text') !global;
@@ -185,6 +187,7 @@ Define theme variables from a map of tokens
     --inverse-support-04: #{map-get($theme, 'inverse-support-04')};
     --overlay-01: #{map-get($theme, 'overlay-01')};
     --focus: #{map-get($theme, 'focus')};
+    --inverse-focus-ui: #{map-get($theme, 'inverse-focus-ui')};
     --hover-primary: #{map-get($theme, 'hover-primary')};
     --active-primary: #{map-get($theme, 'active-primary')};
     --hover-primary-text: #{map-get($theme, 'hover-primary-text')};
@@ -292,6 +295,7 @@ Define theme variables from a map of tokens
   - [inverse-support-04 [variable]](#inverse-support-04-variable)
   - [overlay-01 [variable]](#overlay-01-variable)
   - [focus [variable]](#focus-variable)
+  - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [hover-primary [variable]](#hover-primary-variable)
   - [active-primary [variable]](#active-primary-variable)
   - [hover-primary-text [variable]](#hover-primary-text-variable)
@@ -363,6 +367,7 @@ $carbon--theme--white: (
   inverse-support-04: #408bfc,
   overlay-01: rgba(23, 23, 23, 0.5),
   focus: #0062ff,
+  inverse-focus-ui: #ffffff,
   hover-primary: #0353e9,
   active-primary: #0530ad,
   hover-primary-text: #054ada,
@@ -442,6 +447,7 @@ $carbon--theme--g10: (
   inverse-support-04: #408bfc,
   overlay-01: rgba(23, 23, 23, 0.5),
   focus: #0062ff,
+  inverse-focus-ui: #ffffff,
   hover-primary: #0353e9,
   active-primary: #0530ad,
   hover-primary-text: #054ada,
@@ -519,6 +525,7 @@ $carbon--theme--g90: (
   inverse-support-04: #0062ff,
   overlay-01: rgba(23, 23, 23, 0.7),
   focus: #ffffff,
+  inverse-focus-ui: #0062ff,
   hover-primary: #0353e9,
   active-primary: #0530ad,
   hover-primary-text: #97c1ff,
@@ -596,6 +603,7 @@ $carbon--theme--g100: (
   inverse-support-04: #0062ff,
   overlay-01: rgba(23, 23, 23, 0.7),
   focus: #ffffff,
+  inverse-focus-ui: #0062ff,
   hover-primary: #0353e9,
   active-primary: #0530ad,
   hover-primary-text: #97c1ff,
@@ -673,6 +681,7 @@ $carbon--theme--v9: (
   inverse-support-04: #5aaafa,
   overlay-01: rgba(223, 227, 230, 0.5),
   focus: #3d70b2,
+  inverse-focus-ui: #3d70b2,
   hover-primary: #30588c,
   active-primary: #30588c,
   hover-primary-text: #294c86,
@@ -1320,6 +1329,22 @@ $focus: map-get($carbon--theme, 'focus');
 
 </details>
 
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅inverse-focus-ui [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$inverse-focus-ui: map-get($carbon--theme, 'inverse-focus-ui');
+```
+
+</details>
+
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `Color`
 - **Used by**:

package/es/index.js

@@ -40,6 +40,7 @@ var inverseSupport04 = blue50;
 var overlay01 = rgba(gray100, 0.5); // Interaction states
 
 var focus = blue60;
+var inverseFocusUi = white;
 var hoverPrimary = '#0353e9';
 var activePrimary = blue80;
 var hoverPrimaryText = blue70;
@@ -103,6 +104,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04,
   overlay01: overlay01,
   focus: focus,
+  inverseFocusUi: inverseFocusUi,
   hoverPrimary: hoverPrimary,
   activePrimary: activePrimary,
   hoverPrimaryText: hoverPrimaryText,
@@ -172,6 +174,7 @@ var inverseSupport04$1 = blue50;
 var overlay01$1 = rgba(gray100, 0.5); // Interaction states
 
 var focus$1 = blue60;
+var inverseFocusUi$1 = white;
 var hoverPrimary$1 = '#0353e9';
 var activePrimary$1 = blue80;
 var hoverPrimaryText$1 = blue70;
@@ -235,6 +238,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04$1,
   overlay01: overlay01$1,
   focus: focus$1,
+  inverseFocusUi: inverseFocusUi$1,
   hoverPrimary: hoverPrimary$1,
   activePrimary: activePrimary$1,
   hoverPrimaryText: hoverPrimaryText$1,
@@ -304,6 +308,7 @@ var inverseSupport04$2 = blue60;
 var overlay01$2 = rgba(gray100, 0.7); // Interaction states
 
 var focus$2 = white;
+var inverseFocusUi$2 = blue60;
 var hoverPrimary$2 = '#0353e9';
 var activePrimary$2 = blue80;
 var hoverPrimaryText$2 = blue30;
@@ -367,6 +372,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04$2,
   overlay01: overlay01$2,
   focus: focus$2,
+  inverseFocusUi: inverseFocusUi$2,
   hoverPrimary: hoverPrimary$2,
   activePrimary: activePrimary$2,
   hoverPrimaryText: hoverPrimaryText$2,
@@ -436,6 +442,7 @@ var inverseSupport04$3 = blue60;
 var overlay01$3 = rgba(gray100, 0.7); // Interaction states
 
 var focus$3 = white;
+var inverseFocusUi$3 = blue60;
 var hoverPrimary$3 = '#0353e9';
 var activePrimary$3 = blue80;
 var hoverPrimaryText$3 = blue30;
@@ -499,6 +506,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04$3,
   overlay01: overlay01$3,
   focus: focus$3,
+  inverseFocusUi: inverseFocusUi$3,
   hoverPrimary: hoverPrimary$3,
   activePrimary: activePrimary$3,
   hoverPrimaryText: hoverPrimaryText$3,
@@ -568,6 +576,7 @@ var inverseSupport04$4 = '#5aaafa';
 var overlay01$4 = 'rgba(223, 227, 230, 0.5)'; // Interaction states
 
 var focus$4 = '#3d70b2';
+var inverseFocusUi$4 = '#3d70b2';
 var hoverPrimary$4 = '#30588c';
 var activePrimary$4 = '#30588c';
 var hoverPrimaryText$4 = '#294c86';
@@ -631,6 +640,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04$4,
   overlay01: overlay01$4,
   focus: focus$4,
+  inverseFocusUi: inverseFocusUi$4,
   hoverPrimary: hoverPrimary$4,
   activePrimary: activePrimary$4,
   hoverPrimaryText: hoverPrimaryText$4,
@@ -670,7 +680,7 @@ var v9 = /*#__PURE__*/Object.freeze({
 // exported as in JavaScript
 var colors = [// Core
 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', // Interactive states
-'focus', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
+'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -720,7 +730,7 @@ var unstable__meta = {
     tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
   }, {
     type: 'interactive',
-    tokens: ['focus', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField']
+    tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField']
   }],
   deprecated: ['brand01', 'brand02', 'brand03', 'active01']
 };
@@ -739,4 +749,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, icon01, icon02, icon03, link01, inverseLink, field01, field02, inverse01, inverse02, support01, support02, support03, support04, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, overlay01, focus, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, 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, icon01, icon02, icon03, link01, inverseLink, field01, field02, inverse01, inverse02, support01, support02, support03, support04, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, overlay01, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField };

package/lib/index.js

@@ -44,6 +44,7 @@ var inverseSupport04 = colors.blue50;
 var overlay01 = colors.rgba(colors.gray100, 0.5); // Interaction states
 
 var focus = colors.blue60;
+var inverseFocusUi = colors.white;
 var hoverPrimary = '#0353e9';
 var activePrimary = colors.blue80;
 var hoverPrimaryText = colors.blue70;
@@ -107,6 +108,7 @@ var white = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04,
   overlay01: overlay01,
   focus: focus,
+  inverseFocusUi: inverseFocusUi,
   hoverPrimary: hoverPrimary,
   activePrimary: activePrimary,
   hoverPrimaryText: hoverPrimaryText,
@@ -176,6 +178,7 @@ var inverseSupport04$1 = colors.blue50;
 var overlay01$1 = colors.rgba(colors.gray100, 0.5); // Interaction states
 
 var focus$1 = colors.blue60;
+var inverseFocusUi$1 = colors.white;
 var hoverPrimary$1 = '#0353e9';
 var activePrimary$1 = colors.blue80;
 var hoverPrimaryText$1 = colors.blue70;
@@ -239,6 +242,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04$1,
   overlay01: overlay01$1,
   focus: focus$1,
+  inverseFocusUi: inverseFocusUi$1,
   hoverPrimary: hoverPrimary$1,
   activePrimary: activePrimary$1,
   hoverPrimaryText: hoverPrimaryText$1,
@@ -308,6 +312,7 @@ var inverseSupport04$2 = colors.blue60;
 var overlay01$2 = colors.rgba(colors.gray100, 0.7); // Interaction states
 
 var focus$2 = colors.white;
+var inverseFocusUi$2 = colors.blue60;
 var hoverPrimary$2 = '#0353e9';
 var activePrimary$2 = colors.blue80;
 var hoverPrimaryText$2 = colors.blue30;
@@ -371,6 +376,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04$2,
   overlay01: overlay01$2,
   focus: focus$2,
+  inverseFocusUi: inverseFocusUi$2,
   hoverPrimary: hoverPrimary$2,
   activePrimary: activePrimary$2,
   hoverPrimaryText: hoverPrimaryText$2,
@@ -440,6 +446,7 @@ var inverseSupport04$3 = colors.blue60;
 var overlay01$3 = colors.rgba(colors.gray100, 0.7); // Interaction states
 
 var focus$3 = colors.white;
+var inverseFocusUi$3 = colors.blue60;
 var hoverPrimary$3 = '#0353e9';
 var activePrimary$3 = colors.blue80;
 var hoverPrimaryText$3 = colors.blue30;
@@ -503,6 +510,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04$3,
   overlay01: overlay01$3,
   focus: focus$3,
+  inverseFocusUi: inverseFocusUi$3,
   hoverPrimary: hoverPrimary$3,
   activePrimary: activePrimary$3,
   hoverPrimaryText: hoverPrimaryText$3,
@@ -572,6 +580,7 @@ var inverseSupport04$4 = '#5aaafa';
 var overlay01$4 = 'rgba(223, 227, 230, 0.5)'; // Interaction states
 
 var focus$4 = '#3d70b2';
+var inverseFocusUi$4 = '#3d70b2';
 var hoverPrimary$4 = '#30588c';
 var activePrimary$4 = '#30588c';
 var hoverPrimaryText$4 = '#294c86';
@@ -635,6 +644,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   inverseSupport04: inverseSupport04$4,
   overlay01: overlay01$4,
   focus: focus$4,
+  inverseFocusUi: inverseFocusUi$4,
   hoverPrimary: hoverPrimary$4,
   activePrimary: activePrimary$4,
   hoverPrimaryText: hoverPrimaryText$4,
@@ -674,7 +684,7 @@ var v9 = /*#__PURE__*/Object.freeze({
 // exported as in JavaScript
 var colors$1 = [// Core
 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', // Interactive states
-'focus', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
+'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -724,7 +734,7 @@ var unstable__meta = {
     tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
   }, {
     type: 'interactive',
-    tokens: ['focus', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField']
+    tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField']
   }],
   deprecated: ['brand01', 'brand02', 'brand03', 'active01']
 };
@@ -785,6 +795,7 @@ exports.inverseSupport03 = inverseSupport03;
 exports.inverseSupport04 = inverseSupport04;
 exports.overlay01 = overlay01;
 exports.focus = focus;
+exports.inverseFocusUi = inverseFocusUi;
 exports.hoverPrimary = hoverPrimary;
 exports.activePrimary = activePrimary;
 exports.hoverPrimaryText = hoverPrimaryText;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.5.0",
+  "version": "10.6.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -37,5 +37,5 @@
     "node-sass": "^4.11.0",
     "rimraf": "^2.6.3"
   },
-  "gitHead": "99fd2683b9bc303f704bad86d229d1e364ac68d2"
+  "gitHead": "ca5231b52a0e8e673df35f753089f61e4b595f4c"
 }

package/scss/_mixins.scss

@@ -63,6 +63,7 @@
   $inverse-support-04: map-get($theme, 'inverse-support-04') !global;
   $overlay-01: map-get($theme, 'overlay-01') !global;
   $focus: map-get($theme, 'focus') !global;
+  $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global;
   $hover-primary: map-get($theme, 'hover-primary') !global;
   $active-primary: map-get($theme, 'active-primary') !global;
   $hover-primary-text: map-get($theme, 'hover-primary-text') !global;
@@ -125,6 +126,7 @@
     --inverse-support-04: #{map-get($theme, 'inverse-support-04')};
     --overlay-01: #{map-get($theme, 'overlay-01')};
     --focus: #{map-get($theme, 'focus')};
+    --inverse-focus-ui: #{map-get($theme, 'inverse-focus-ui')};
     --hover-primary: #{map-get($theme, 'hover-primary')};
     --active-primary: #{map-get($theme, 'active-primary')};
     --hover-primary-text: #{map-get($theme, 'hover-primary-text')};

package/scss/_theme-maps.scss

@@ -43,6 +43,7 @@ $carbon--theme--white: (
   inverse-support-04: #408bfc,
   overlay-01: rgba(23, 23, 23, 0.5),
   focus: #0062ff,
+  inverse-focus-ui: #ffffff,
   hover-primary: #0353e9,
   active-primary: #0530ad,
   hover-primary-text: #054ada,
@@ -109,6 +110,7 @@ $carbon--theme--g10: (
   inverse-support-04: #408bfc,
   overlay-01: rgba(23, 23, 23, 0.5),
   focus: #0062ff,
+  inverse-focus-ui: #ffffff,
   hover-primary: #0353e9,
   active-primary: #0530ad,
   hover-primary-text: #054ada,
@@ -175,6 +177,7 @@ $carbon--theme--g90: (
   inverse-support-04: #0062ff,
   overlay-01: rgba(23, 23, 23, 0.7),
   focus: #ffffff,
+  inverse-focus-ui: #0062ff,
   hover-primary: #0353e9,
   active-primary: #0530ad,
   hover-primary-text: #97c1ff,
@@ -241,6 +244,7 @@ $carbon--theme--g100: (
   inverse-support-04: #0062ff,
   overlay-01: rgba(23, 23, 23, 0.7),
   focus: #ffffff,
+  inverse-focus-ui: #0062ff,
   hover-primary: #0353e9,
   active-primary: #0530ad,
   hover-primary-text: #97c1ff,
@@ -307,6 +311,7 @@ $carbon--theme--v9: (
   inverse-support-04: #5aaafa,
   overlay-01: rgba(223, 227, 230, 0.5),
   focus: #3d70b2,
+  inverse-focus-ui: #3d70b2,
   hover-primary: #30588c,
   active-primary: #30588c,
   hover-primary-text: #294c86,

package/scss/_tokens.scss

@@ -170,6 +170,10 @@ $overlay-01: map-get($carbon--theme, 'overlay-01') !default;
 /// @access public
 /// @group @carbon/themes
 $focus: map-get($carbon--theme, 'focus') !default;
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$inverse-focus-ui: map-get($carbon--theme, 'inverse-focus-ui') !default;
 /// `$interactive-01` hover
 /// @type Color
 /// @access public

package/src/g10.js

@@ -86,6 +86,7 @@ export const overlay01 = rgba(gray100, 0.5);
 
 // Interaction states
 export const focus = blue60;
+export const inverseFocusUi = white;
 
 export const hoverPrimary = '#0353e9';
 export const activePrimary = blue80;

package/src/g100.js

@@ -84,6 +84,7 @@ export const overlay01 = rgba(gray100, 0.7);
 
 // Interaction states
 export const focus = white;
+export const inverseFocusUi = blue60;
 
 export const hoverPrimary = '#0353e9';
 export const activePrimary = blue80;

package/src/g90.js

@@ -86,6 +86,7 @@ export const overlay01 = rgba(gray100, 0.7);
 
 // Interaction states
 export const focus = white;
+export const inverseFocusUi = blue60;
 
 export const hoverPrimary = '#0353e9';
 export const activePrimary = blue80;

package/src/tokens.js

@@ -55,6 +55,7 @@ const colors = [
 
   // Interactive states
   'focus',
+  'inverseFocusUi',
 
   'hoverPrimary',
   'activePrimary',
@@ -187,6 +188,7 @@ export const unstable__meta = {
       type: 'interactive',
       tokens: [
         'focus',
+        'inverseFocusUi',
         'hoverPrimary',
         'hoverPrimaryText',
         'hoverSecondary',

package/src/v9.js

@@ -53,6 +53,7 @@ export const overlay01 = 'rgba(223, 227, 230, 0.5)';
 
 // Interaction states
 export const focus = '#3d70b2';
+export const inverseFocusUi = '#3d70b2';
 
 export const hoverPrimary = '#30588c';
 export const activePrimary = '#30588c';

package/src/white.js

@@ -86,6 +86,7 @@ export const overlay01 = rgba(gray100, 0.5);
 
 // Interaction states
 export const focus = blue60;
+export const inverseFocusUi = white;
 
 export const hoverPrimary = '#0353e9';
 export const activePrimary = blue80;

package/umd/index.js

@@ -44,6 +44,7 @@
   var overlay01 = colors.rgba(colors.gray100, 0.5); // Interaction states
 
   var focus = colors.blue60;
+  var inverseFocusUi = colors.white;
   var hoverPrimary = '#0353e9';
   var activePrimary = colors.blue80;
   var hoverPrimaryText = colors.blue70;
@@ -107,6 +108,7 @@
     inverseSupport04: inverseSupport04,
     overlay01: overlay01,
     focus: focus,
+    inverseFocusUi: inverseFocusUi,
     hoverPrimary: hoverPrimary,
     activePrimary: activePrimary,
     hoverPrimaryText: hoverPrimaryText,
@@ -176,6 +178,7 @@
   var overlay01$1 = colors.rgba(colors.gray100, 0.5); // Interaction states
 
   var focus$1 = colors.blue60;
+  var inverseFocusUi$1 = colors.white;
   var hoverPrimary$1 = '#0353e9';
   var activePrimary$1 = colors.blue80;
   var hoverPrimaryText$1 = colors.blue70;
@@ -239,6 +242,7 @@
     inverseSupport04: inverseSupport04$1,
     overlay01: overlay01$1,
     focus: focus$1,
+    inverseFocusUi: inverseFocusUi$1,
     hoverPrimary: hoverPrimary$1,
     activePrimary: activePrimary$1,
     hoverPrimaryText: hoverPrimaryText$1,
@@ -308,6 +312,7 @@
   var overlay01$2 = colors.rgba(colors.gray100, 0.7); // Interaction states
 
   var focus$2 = colors.white;
+  var inverseFocusUi$2 = colors.blue60;
   var hoverPrimary$2 = '#0353e9';
   var activePrimary$2 = colors.blue80;
   var hoverPrimaryText$2 = colors.blue30;
@@ -371,6 +376,7 @@
     inverseSupport04: inverseSupport04$2,
     overlay01: overlay01$2,
     focus: focus$2,
+    inverseFocusUi: inverseFocusUi$2,
     hoverPrimary: hoverPrimary$2,
     activePrimary: activePrimary$2,
     hoverPrimaryText: hoverPrimaryText$2,
@@ -440,6 +446,7 @@
   var overlay01$3 = colors.rgba(colors.gray100, 0.7); // Interaction states
 
   var focus$3 = colors.white;
+  var inverseFocusUi$3 = colors.blue60;
   var hoverPrimary$3 = '#0353e9';
   var activePrimary$3 = colors.blue80;
   var hoverPrimaryText$3 = colors.blue30;
@@ -503,6 +510,7 @@
     inverseSupport04: inverseSupport04$3,
     overlay01: overlay01$3,
     focus: focus$3,
+    inverseFocusUi: inverseFocusUi$3,
     hoverPrimary: hoverPrimary$3,
     activePrimary: activePrimary$3,
     hoverPrimaryText: hoverPrimaryText$3,
@@ -572,6 +580,7 @@
   var overlay01$4 = 'rgba(223, 227, 230, 0.5)'; // Interaction states
 
   var focus$4 = '#3d70b2';
+  var inverseFocusUi$4 = '#3d70b2';
   var hoverPrimary$4 = '#30588c';
   var activePrimary$4 = '#30588c';
   var hoverPrimaryText$4 = '#294c86';
@@ -635,6 +644,7 @@
     inverseSupport04: inverseSupport04$4,
     overlay01: overlay01$4,
     focus: focus$4,
+    inverseFocusUi: inverseFocusUi$4,
     hoverPrimary: hoverPrimary$4,
     activePrimary: activePrimary$4,
     hoverPrimaryText: hoverPrimaryText$4,
@@ -674,7 +684,7 @@
   // exported as in JavaScript
   var colors$1 = [// Core
   'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', // Interactive states
-  'focus', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
+  'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
   var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
   /**
@@ -724,7 +734,7 @@
       tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
     }, {
       type: 'interactive',
-      tokens: ['focus', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField']
+      tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField']
     }],
     deprecated: ['brand01', 'brand02', 'brand03', 'active01']
   };
@@ -785,6 +795,7 @@
   exports.inverseSupport04 = inverseSupport04;
   exports.overlay01 = overlay01;
   exports.focus = focus;
+  exports.inverseFocusUi = inverseFocusUi;
   exports.hoverPrimary = hoverPrimary;
   exports.activePrimary = activePrimary;
   exports.hoverPrimaryText = hoverPrimaryText;