@carbon/themes 11.17.0-rc.0 → 11.17.0

package/es/index.js

@@ -637,13 +637,13 @@ var fieldHover03$3 = gray10Hover; // Border
 
 var borderSubtle00$3 = gray20; // border-subtle-01
 
-var borderSubtle01$3 = gray20;
+var borderSubtle01$3 = gray30;
 var borderSubtleSelected01$3 = gray30; // border-subtle-02
 
 var borderSubtle02$3 = gray20;
 var borderSubtleSelected02$3 = gray30; // border-subtle-03
 
-var borderSubtle03$3 = gray20;
+var borderSubtle03$3 = gray30;
 var borderSubtleSelected03$3 = gray30; // border-strong
 
 var borderStrong01$3 = gray50;
@@ -683,7 +683,8 @@ var iconSecondary$7 = gray70;
 var iconInverse$7 = white$2;
 var iconOnColor$7 = white$2;
 var iconOnColorDisabled$7 = gray50;
-var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25); // Support
+var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25);
+var iconInteractive$3 = blue60; // Support
 
 var supportError$7 = red60;
 var supportSuccess$7 = green50;
@@ -790,6 +791,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   iconOnColor: iconOnColor$7,
   iconOnColorDisabled: iconOnColorDisabled$7,
   iconDisabled: iconDisabled$7,
+  iconInteractive: iconInteractive$3,
   supportError: supportError$7,
   supportSuccess: supportSuccess$7,
   supportWarning: supportWarning$7,
@@ -938,12 +940,12 @@ var field03$2 = white$2;
 var fieldHover03$2 = whiteHover; // Border
 // border-subtle-00
 
-var borderSubtle00$2 = gray20; // border-subtle-01
+var borderSubtle00$2 = gray30; // border-subtle-01
 
 var borderSubtle01$2 = gray20;
 var borderSubtleSelected01$2 = gray30; // border-subtle-02
 
-var borderSubtle02$2 = gray20;
+var borderSubtle02$2 = gray30;
 var borderSubtleSelected02$2 = gray30; // border-subtle-03
 
 var borderSubtle03$2 = gray20;
@@ -986,7 +988,8 @@ var iconSecondary$6 = gray70;
 var iconInverse$6 = white$2;
 var iconOnColor$6 = white$2;
 var iconOnColorDisabled$6 = gray50;
-var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25); // Support
+var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25);
+var iconInteractive$2 = blue60; // Support
 
 var supportError$6 = red60;
 var supportSuccess$6 = green50;
@@ -1093,6 +1096,7 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   iconOnColor: iconOnColor$6,
   iconOnColorDisabled: iconOnColorDisabled$6,
   iconDisabled: iconDisabled$6,
+  iconInteractive: iconInteractive$2,
   supportError: supportError$6,
   supportSuccess: supportSuccess$6,
   supportWarning: supportWarning$6,
@@ -1289,7 +1293,8 @@ var iconSecondary$5 = gray30;
 var iconInverse$5 = gray100;
 var iconOnColor$5 = white$2;
 var iconOnColorDisabled$5 = adjustAlpha(iconOnColor$5, 0.25);
-var iconDisabled$5 = adjustAlpha(iconPrimary$5, 0.25); // Support
+var iconDisabled$5 = adjustAlpha(iconPrimary$5, 0.25);
+var iconInteractive$1 = white$2; // Support
 
 var supportError$5 = red40;
 var supportSuccess$5 = green40;
@@ -1396,6 +1401,7 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   iconOnColor: iconOnColor$5,
   iconOnColorDisabled: iconOnColorDisabled$5,
   iconDisabled: iconDisabled$5,
+  iconInteractive: iconInteractive$1,
   supportError: supportError$5,
   supportSuccess: supportSuccess$5,
   supportWarning: supportWarning$5,
@@ -1592,7 +1598,8 @@ var iconSecondary$4 = gray30;
 var iconInverse$4 = gray100;
 var iconOnColor$4 = white$2;
 var iconOnColorDisabled$4 = adjustAlpha(iconOnColor$4, 0.25);
-var iconDisabled$4 = adjustAlpha(iconPrimary$4, 0.25); // Support
+var iconDisabled$4 = adjustAlpha(iconPrimary$4, 0.25);
+var iconInteractive = white$2; // Support
 
 var supportError$4 = red50;
 var supportSuccess$4 = green40;
@@ -1699,6 +1706,7 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   iconOnColor: iconOnColor$4,
   iconOnColorDisabled: iconOnColorDisabled$4,
   iconDisabled: iconDisabled$4,
+  iconInteractive: iconInteractive,
   supportError: supportError$4,
   supportSuccess: supportSuccess$4,
   supportWarning: supportWarning$4,
@@ -4585,7 +4593,7 @@ var icon = TokenGroup.create({
   }, {
     state: 'disabled',
     name: 'icon-disabled'
-  }]
+  }, 'icon-interactive']
 });
 var support = TokenGroup.create({
   name: 'Support',
@@ -4758,4 +4766,4 @@ var themes = {
   g100: g100$1
 };
 
-export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, borderTile01$3 as borderTile01, borderTile02$3 as borderTile02, borderTile03$3 as borderTile03, index$2 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, index as notificationTokens, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index$1 as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$3 as v10, white$1 as white };
+export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, borderTile01$3 as borderTile01, borderTile02$3 as borderTile02, borderTile03$3 as borderTile03, index$2 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInteractive$3 as iconInteractive, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, index as notificationTokens, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index$1 as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$3 as v10, white$1 as white };

package/lib/index.js

@@ -643,13 +643,13 @@ var fieldHover03$3 = colors$1.gray10Hover; // Border
 
 var borderSubtle00$3 = colors$1.gray20; // border-subtle-01
 
-var borderSubtle01$3 = colors$1.gray20;
+var borderSubtle01$3 = colors$1.gray30;
 var borderSubtleSelected01$3 = colors$1.gray30; // border-subtle-02
 
 var borderSubtle02$3 = colors$1.gray20;
 var borderSubtleSelected02$3 = colors$1.gray30; // border-subtle-03
 
-var borderSubtle03$3 = colors$1.gray20;
+var borderSubtle03$3 = colors$1.gray30;
 var borderSubtleSelected03$3 = colors$1.gray30; // border-strong
 
 var borderStrong01$3 = colors$1.gray50;
@@ -689,7 +689,8 @@ var iconSecondary$7 = colors$1.gray70;
 var iconInverse$7 = colors$1.white;
 var iconOnColor$7 = colors$1.white;
 var iconOnColorDisabled$7 = colors$1.gray50;
-var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25); // Support
+var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25);
+var iconInteractive$3 = colors$1.blue60; // Support
 
 var supportError$7 = colors$1.red60;
 var supportSuccess$7 = colors$1.green50;
@@ -796,6 +797,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   iconOnColor: iconOnColor$7,
   iconOnColorDisabled: iconOnColorDisabled$7,
   iconDisabled: iconDisabled$7,
+  iconInteractive: iconInteractive$3,
   supportError: supportError$7,
   supportSuccess: supportSuccess$7,
   supportWarning: supportWarning$7,
@@ -944,12 +946,12 @@ var field03$2 = colors$1.white;
 var fieldHover03$2 = colors$1.whiteHover; // Border
 // border-subtle-00
 
-var borderSubtle00$2 = colors$1.gray20; // border-subtle-01
+var borderSubtle00$2 = colors$1.gray30; // border-subtle-01
 
 var borderSubtle01$2 = colors$1.gray20;
 var borderSubtleSelected01$2 = colors$1.gray30; // border-subtle-02
 
-var borderSubtle02$2 = colors$1.gray20;
+var borderSubtle02$2 = colors$1.gray30;
 var borderSubtleSelected02$2 = colors$1.gray30; // border-subtle-03
 
 var borderSubtle03$2 = colors$1.gray20;
@@ -992,7 +994,8 @@ var iconSecondary$6 = colors$1.gray70;
 var iconInverse$6 = colors$1.white;
 var iconOnColor$6 = colors$1.white;
 var iconOnColorDisabled$6 = colors$1.gray50;
-var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25); // Support
+var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25);
+var iconInteractive$2 = colors$1.blue60; // Support
 
 var supportError$6 = colors$1.red60;
 var supportSuccess$6 = colors$1.green50;
@@ -1099,6 +1102,7 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   iconOnColor: iconOnColor$6,
   iconOnColorDisabled: iconOnColorDisabled$6,
   iconDisabled: iconDisabled$6,
+  iconInteractive: iconInteractive$2,
   supportError: supportError$6,
   supportSuccess: supportSuccess$6,
   supportWarning: supportWarning$6,
@@ -1295,7 +1299,8 @@ var iconSecondary$5 = colors$1.gray30;
 var iconInverse$5 = colors$1.gray100;
 var iconOnColor$5 = colors$1.white;
 var iconOnColorDisabled$5 = adjustAlpha(iconOnColor$5, 0.25);
-var iconDisabled$5 = adjustAlpha(iconPrimary$5, 0.25); // Support
+var iconDisabled$5 = adjustAlpha(iconPrimary$5, 0.25);
+var iconInteractive$1 = colors$1.white; // Support
 
 var supportError$5 = colors$1.red40;
 var supportSuccess$5 = colors$1.green40;
@@ -1402,6 +1407,7 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   iconOnColor: iconOnColor$5,
   iconOnColorDisabled: iconOnColorDisabled$5,
   iconDisabled: iconDisabled$5,
+  iconInteractive: iconInteractive$1,
   supportError: supportError$5,
   supportSuccess: supportSuccess$5,
   supportWarning: supportWarning$5,
@@ -1598,7 +1604,8 @@ var iconSecondary$4 = colors$1.gray30;
 var iconInverse$4 = colors$1.gray100;
 var iconOnColor$4 = colors$1.white;
 var iconOnColorDisabled$4 = adjustAlpha(iconOnColor$4, 0.25);
-var iconDisabled$4 = adjustAlpha(iconPrimary$4, 0.25); // Support
+var iconDisabled$4 = adjustAlpha(iconPrimary$4, 0.25);
+var iconInteractive = colors$1.white; // Support
 
 var supportError$4 = colors$1.red50;
 var supportSuccess$4 = colors$1.green40;
@@ -1705,6 +1712,7 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   iconOnColor: iconOnColor$4,
   iconOnColorDisabled: iconOnColorDisabled$4,
   iconDisabled: iconDisabled$4,
+  iconInteractive: iconInteractive,
   supportError: supportError$4,
   supportSuccess: supportSuccess$4,
   supportWarning: supportWarning$4,
@@ -4591,7 +4599,7 @@ var icon = TokenGroup.create({
   }, {
     state: 'disabled',
     name: 'icon-disabled'
-  }]
+  }, 'icon-interactive']
 });
 var support = TokenGroup.create({
   name: 'Support',
@@ -5060,6 +5068,7 @@ exports.g100 = g100$1;
 exports.g90 = g90$1;
 exports.highlight = highlight$7;
 exports.iconDisabled = iconDisabled$7;
+exports.iconInteractive = iconInteractive$3;
 exports.iconInverse = iconInverse$7;
 exports.iconOnColor = iconOnColor$7;
 exports.iconOnColorDisabled = iconOnColorDisabled$7;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "11.17.0-rc.0",
+  "version": "11.17.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,18 +29,18 @@
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^11.13.0-rc.0",
-    "@carbon/layout": "^11.12.0-rc.0",
-    "@carbon/type": "^11.16.0-rc.0",
+    "@carbon/colors": "^11.13.0",
+    "@carbon/layout": "^11.12.0",
+    "@carbon/type": "^11.16.0",
     "color": "^4.0.0"
   },
   "devDependencies": {
     "@babel/node": "^7.17.10",
     "@babel/preset-env": "^7.18.2",
-    "@carbon/cli": "^11.9.0-rc.0",
-    "@carbon/cli-reporter": "^10.6.0-rc.0",
-    "@carbon/scss-generator": "^10.16.0-rc.0",
-    "@carbon/test-utils": "^10.27.0-rc.0",
+    "@carbon/cli": "^11.9.0",
+    "@carbon/cli-reporter": "^10.6.0",
+    "@carbon/scss-generator": "^10.16.0",
+    "@carbon/test-utils": "^10.27.0",
     "change-case": "^4.1.1",
     "core-js": "^3.16.0",
     "fs-extra": "^10.0.0",
@@ -48,5 +48,5 @@
     "rimraf": "^4.0.0"
   },
   "sideEffects": false,
-  "gitHead": "0554718f48299a56a0525c4fb3e2b0271f13440b"
+  "gitHead": "07168bf0272678a04c92cd1e700ac60e66355a95"
 }

package/scss/generated/_themes.scss

@@ -27,9 +27,9 @@ $white: (
   border-strong-02: #8d8d8d,
   border-strong-03: #8d8d8d,
   border-subtle-00: #e0e0e0,
-  border-subtle-01: #e0e0e0,
+  border-subtle-01: #c6c6c6,
   border-subtle-02: #e0e0e0,
-  border-subtle-03: #e0e0e0,
+  border-subtle-03: #c6c6c6,
   border-subtle-selected-01: #c6c6c6,
   border-subtle-selected-02: #c6c6c6,
   border-subtle-selected-03: #c6c6c6,
@@ -47,6 +47,7 @@ $white: (
   focus-inverse: #ffffff,
   highlight: #d0e2ff,
   icon-disabled: rgba(22, 22, 22, 0.25),
+  icon-interactive: #0f62fe,
   icon-inverse: #ffffff,
   icon-on-color: #ffffff,
   icon-on-color-disabled: #8d8d8d,
@@ -134,9 +135,9 @@ $g10: (
   border-strong-01: #8d8d8d,
   border-strong-02: #8d8d8d,
   border-strong-03: #8d8d8d,
-  border-subtle-00: #e0e0e0,
+  border-subtle-00: #c6c6c6,
   border-subtle-01: #e0e0e0,
-  border-subtle-02: #e0e0e0,
+  border-subtle-02: #c6c6c6,
   border-subtle-03: #e0e0e0,
   border-subtle-selected-01: #c6c6c6,
   border-subtle-selected-02: #c6c6c6,
@@ -155,6 +156,7 @@ $g10: (
   focus-inverse: #ffffff,
   highlight: #d0e2ff,
   icon-disabled: rgba(22, 22, 22, 0.25),
+  icon-interactive: #0f62fe,
   icon-inverse: #ffffff,
   icon-on-color: #ffffff,
   icon-on-color-disabled: #8d8d8d,
@@ -263,6 +265,7 @@ $g90: (
   focus-inverse: #0f62fe,
   highlight: #0043ce,
   icon-disabled: rgba(244, 244, 244, 0.25),
+  icon-interactive: #ffffff,
   icon-inverse: #161616,
   icon-on-color: #ffffff,
   icon-on-color-disabled: rgba(255, 255, 255, 0.25),
@@ -371,6 +374,7 @@ $g100: (
   focus-inverse: #0f62fe,
   highlight: #002d9c,
   icon-disabled: rgba(244, 244, 244, 0.25),
+  icon-interactive: #ffffff,
   icon-inverse: #161616,
   icon-on-color: #ffffff,
   icon-on-color-disabled: rgba(255, 255, 255, 0.25),

package/scss/generated/_tokens.scss

@@ -256,6 +256,9 @@ $icon-on-color-disabled: _get('icon-on-color-disabled') !default;
 /// The CSS Custom Property for the `icon-disabled` token
 $icon-disabled: _get('icon-disabled') !default;
 
+/// The CSS Custom Property for the `icon-interactive` token
+$icon-interactive: _get('icon-interactive') !default;
+
 /// The CSS Custom Property for the `support-error` token
 $support-error: _get('support-error') !default;
 

package/src/g10.js

@@ -109,14 +109,14 @@ export const fieldHover03 = whiteHover;
 
 // Border
 // border-subtle-00
-export const borderSubtle00 = gray20;
+export const borderSubtle00 = gray30;
 
 // border-subtle-01
 export const borderSubtle01 = gray20;
 export const borderSubtleSelected01 = gray30;
 
 // border-subtle-02
-export const borderSubtle02 = gray20;
+export const borderSubtle02 = gray30;
 export const borderSubtleSelected02 = gray30;
 
 // border-subtle-03
@@ -169,6 +169,7 @@ export const iconInverse = white;
 export const iconOnColor = white;
 export const iconOnColorDisabled = gray50;
 export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
+export const iconInteractive = blue60;
 
 // Support
 export const supportError = red60;

package/src/g100.js

@@ -176,6 +176,7 @@ export const iconInverse = gray100;
 export const iconOnColor = white;
 export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
 export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
+export const iconInteractive = white;
 
 // Support
 export const supportError = red50;

package/src/g90.js

@@ -176,6 +176,7 @@ export const iconInverse = gray100;
 export const iconOnColor = white;
 export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
 export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
+export const iconInteractive = white;
 
 // Support
 export const supportError = red40;

package/src/tokens/v11TokenGroup.js

@@ -286,6 +286,7 @@ export const icon = TokenGroup.create({
       state: 'disabled',
       name: 'icon-disabled',
     },
+    'icon-interactive',
   ],
 });
 

package/src/white.js

@@ -112,7 +112,7 @@ export const fieldHover03 = gray10Hover;
 export const borderSubtle00 = gray20;
 
 // border-subtle-01
-export const borderSubtle01 = gray20;
+export const borderSubtle01 = gray30;
 export const borderSubtleSelected01 = gray30;
 
 // border-subtle-02
@@ -120,7 +120,7 @@ export const borderSubtle02 = gray20;
 export const borderSubtleSelected02 = gray30;
 
 // border-subtle-03
-export const borderSubtle03 = gray20;
+export const borderSubtle03 = gray30;
 export const borderSubtleSelected03 = gray30;
 
 // border-strong
@@ -169,6 +169,7 @@ export const iconInverse = white;
 export const iconOnColor = white;
 export const iconOnColorDisabled = gray50;
 export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
+export const iconInteractive = blue60;
 
 // Support
 export const supportError = red60;

package/umd/index.js

@@ -640,13 +640,13 @@
 
   var borderSubtle00$3 = colors$1.gray20; // border-subtle-01
 
-  var borderSubtle01$3 = colors$1.gray20;
+  var borderSubtle01$3 = colors$1.gray30;
   var borderSubtleSelected01$3 = colors$1.gray30; // border-subtle-02
 
   var borderSubtle02$3 = colors$1.gray20;
   var borderSubtleSelected02$3 = colors$1.gray30; // border-subtle-03
 
-  var borderSubtle03$3 = colors$1.gray20;
+  var borderSubtle03$3 = colors$1.gray30;
   var borderSubtleSelected03$3 = colors$1.gray30; // border-strong
 
   var borderStrong01$3 = colors$1.gray50;
@@ -686,7 +686,8 @@
   var iconInverse$7 = colors$1.white;
   var iconOnColor$7 = colors$1.white;
   var iconOnColorDisabled$7 = colors$1.gray50;
-  var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25); // Support
+  var iconDisabled$7 = adjustAlpha(iconPrimary$7, 0.25);
+  var iconInteractive$3 = colors$1.blue60; // Support
 
   var supportError$7 = colors$1.red60;
   var supportSuccess$7 = colors$1.green50;
@@ -793,6 +794,7 @@
     iconOnColor: iconOnColor$7,
     iconOnColorDisabled: iconOnColorDisabled$7,
     iconDisabled: iconDisabled$7,
+    iconInteractive: iconInteractive$3,
     supportError: supportError$7,
     supportSuccess: supportSuccess$7,
     supportWarning: supportWarning$7,
@@ -941,12 +943,12 @@
   var fieldHover03$2 = colors$1.whiteHover; // Border
   // border-subtle-00
 
-  var borderSubtle00$2 = colors$1.gray20; // border-subtle-01
+  var borderSubtle00$2 = colors$1.gray30; // border-subtle-01
 
   var borderSubtle01$2 = colors$1.gray20;
   var borderSubtleSelected01$2 = colors$1.gray30; // border-subtle-02
 
-  var borderSubtle02$2 = colors$1.gray20;
+  var borderSubtle02$2 = colors$1.gray30;
   var borderSubtleSelected02$2 = colors$1.gray30; // border-subtle-03
 
   var borderSubtle03$2 = colors$1.gray20;
@@ -989,7 +991,8 @@
   var iconInverse$6 = colors$1.white;
   var iconOnColor$6 = colors$1.white;
   var iconOnColorDisabled$6 = colors$1.gray50;
-  var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25); // Support
+  var iconDisabled$6 = adjustAlpha(iconPrimary$6, 0.25);
+  var iconInteractive$2 = colors$1.blue60; // Support
 
   var supportError$6 = colors$1.red60;
   var supportSuccess$6 = colors$1.green50;
@@ -1096,6 +1099,7 @@
     iconOnColor: iconOnColor$6,
     iconOnColorDisabled: iconOnColorDisabled$6,
     iconDisabled: iconDisabled$6,
+    iconInteractive: iconInteractive$2,
     supportError: supportError$6,
     supportSuccess: supportSuccess$6,
     supportWarning: supportWarning$6,
@@ -1292,7 +1296,8 @@
   var iconInverse$5 = colors$1.gray100;
   var iconOnColor$5 = colors$1.white;
   var iconOnColorDisabled$5 = adjustAlpha(iconOnColor$5, 0.25);
-  var iconDisabled$5 = adjustAlpha(iconPrimary$5, 0.25); // Support
+  var iconDisabled$5 = adjustAlpha(iconPrimary$5, 0.25);
+  var iconInteractive$1 = colors$1.white; // Support
 
   var supportError$5 = colors$1.red40;
   var supportSuccess$5 = colors$1.green40;
@@ -1399,6 +1404,7 @@
     iconOnColor: iconOnColor$5,
     iconOnColorDisabled: iconOnColorDisabled$5,
     iconDisabled: iconDisabled$5,
+    iconInteractive: iconInteractive$1,
     supportError: supportError$5,
     supportSuccess: supportSuccess$5,
     supportWarning: supportWarning$5,
@@ -1595,7 +1601,8 @@
   var iconInverse$4 = colors$1.gray100;
   var iconOnColor$4 = colors$1.white;
   var iconOnColorDisabled$4 = adjustAlpha(iconOnColor$4, 0.25);
-  var iconDisabled$4 = adjustAlpha(iconPrimary$4, 0.25); // Support
+  var iconDisabled$4 = adjustAlpha(iconPrimary$4, 0.25);
+  var iconInteractive = colors$1.white; // Support
 
   var supportError$4 = colors$1.red50;
   var supportSuccess$4 = colors$1.green40;
@@ -1702,6 +1709,7 @@
     iconOnColor: iconOnColor$4,
     iconOnColorDisabled: iconOnColorDisabled$4,
     iconDisabled: iconDisabled$4,
+    iconInteractive: iconInteractive,
     supportError: supportError$4,
     supportSuccess: supportSuccess$4,
     supportWarning: supportWarning$4,
@@ -4588,7 +4596,7 @@
     }, {
       state: 'disabled',
       name: 'icon-disabled'
-    }]
+    }, 'icon-interactive']
   });
   var support = TokenGroup.create({
     name: 'Support',
@@ -5057,6 +5065,7 @@
   exports.g90 = g90$1;
   exports.highlight = highlight$7;
   exports.iconDisabled = iconDisabled$7;
+  exports.iconInteractive = iconInteractive$3;
   exports.iconInverse = iconInverse$7;
   exports.iconOnColor = iconOnColor$7;
   exports.iconOnColorDisabled = iconOnColorDisabled$7;