@carbon/themes 10.49.0 → 10.50.0

package/src/g10.js

@@ -219,8 +219,6 @@ export const layerSelectedHover = hoverSelectedUI;
 export const layerSelectedInverse = ui05;
 export const borderSubtleSelected = activeUI;
 
-export const layerDisabled = disabled01;
-export const fieldDisabled = disabled01;
 export const borderDisabled = disabled01;
 
 export const textDisabled = disabled02;

package/src/g100.js

@@ -218,8 +218,6 @@ export const layerSelectedHover = hoverSelectedUI;
 export const layerSelectedInverse = ui05;
 export const borderSubtleSelected = activeUI;
 
-export const layerDisabled = disabled01;
-export const fieldDisabled = disabled01;
 export const borderDisabled = disabled01;
 
 export const textDisabled = disabled02;

package/src/g80.js

@@ -130,8 +130,6 @@ export const layerSelectedHover = adjustLightness(layerSelected, -6);
 export const layerSelectedInverse = gray10;
 export const borderSubtleSelected = gray50;
 
-export const layerDisabled = gray70;
-export const fieldDisabled = gray70;
 export const borderDisabled = gray70;
 
 export const textDisabled = gray50;
@@ -228,7 +226,7 @@ export const hoverRow = layerHover;
 
 export const visitedLink = linkVisited;
 
-export const disabled01 = layerDisabled;
+export const disabled01 = gray70;
 export const disabled02 = textDisabled;
 export const disabled03 = textOnColorDisabled;
 

package/src/g90.js

@@ -220,8 +220,6 @@ export const layerSelectedHover = hoverSelectedUI;
 export const layerSelectedInverse = ui05;
 export const borderSubtleSelected = activeUI;
 
-export const layerDisabled = disabled01;
-export const fieldDisabled = disabled01;
 export const borderDisabled = disabled01;
 
 export const textDisabled = disabled02;

package/src/next/g10.js

@@ -23,6 +23,7 @@ import {
   gray60,
   gray70,
   gray80,
+  gray80Hover,
   gray100,
 
   // Support
@@ -39,17 +40,17 @@ import {
   white,
   whiteHover,
 } from '@carbon/colors';
-import { adjustLightness, adjustAlpha } from '../tools';
+import { adjustAlpha } from '../tools';
 
 // Background
 export const background = gray10;
 export const backgroundInverse = gray80;
 export const backgroundBrand = blue60;
 export const backgroundActive = gray30;
-export const backgroundHover = adjustLightness(background, -5);
-export const backgroundInverseHover = adjustLightness(backgroundInverse, 6);
+export const backgroundHover = gray10Hover;
+export const backgroundInverseHover = gray80Hover;
 export const backgroundSelected = gray20;
-export const backgroundSelectedHover = adjustLightness(backgroundSelected, -6);
+export const backgroundSelectedHover = gray20Hover;
 
 // Layer
 // layer-01
@@ -74,24 +75,23 @@ export const layerSelected03 = gray20;
 export const layerSelectedHover03 = gray20Hover;
 
 // layer
-export const layerDisabled = white;
 export const layerSelectedInverse = gray100;
 export const layerSelectedDisabled = gray50;
 
 // layer-accent-01
 export const layerAccent01 = gray20;
 export const layerAccentActive01 = gray40;
-export const layerAccentHover01 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover01 = gray20Hover;
 
 // layer-accent-02
 export const layerAccent02 = gray20;
 export const layerAccentActive02 = gray40;
-export const layerAccentHover02 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover02 = gray20Hover;
 
 // layer-accent-03
 export const layerAccent03 = gray20;
 export const layerAccentActive03 = gray40;
-export const layerAccentHover03 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover03 = gray20Hover;
 
 // Field
 // field-01
@@ -106,9 +106,6 @@ export const fieldHover02 = gray10Hover;
 export const field03 = white;
 export const fieldHover03 = whiteHover;
 
-// field
-export const fieldDisabled = white;
-
 // Border
 // border-subtle-00
 export const borderSubtle00 = gray20;
@@ -163,7 +160,7 @@ export const iconSecondary = gray70;
 export const iconInverse = white;
 export const iconOnColor = white;
 export const iconOnColorDisabled = gray50;
-export const iconDisabled = gray30;
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
 
 // Support
 export const supportError = red60;
@@ -184,7 +181,7 @@ export const focusInset = white;
 export const focusInverse = white;
 
 // Skeleton
-export const skeletonBackground = adjustLightness(background, -5);
+export const skeletonBackground = gray10Hover;
 export const skeletonElement = gray30;
 
 // Misc

package/src/next/g100.js

@@ -7,9 +7,10 @@
 
 import {
   // Blue
-  blue20,
   blue40,
   blue60,
+  blue70,
+  blue80,
 
   // Gray
   gray10,
@@ -33,7 +34,7 @@ import {
   green50,
   yellow30,
   orange40,
-  red30,
+  red40,
   red50,
   red60,
   purple40,
@@ -45,6 +46,8 @@ import {
 
   // Tools
   rgba,
+  gray100Hover,
+  gray10Hover,
 } from '@carbon/colors';
 import { adjustLightness, adjustAlpha } from '../tools';
 
@@ -53,16 +56,16 @@ export const background = gray100;
 export const backgroundInverse = gray10;
 export const backgroundBrand = blue60;
 export const backgroundActive = gray80;
-export const backgroundHover = adjustLightness(background, 7);
-export const backgroundInverseHover = adjustLightness(backgroundInverse, -5);
+export const backgroundHover = gray100Hover;
+export const backgroundInverseHover = gray10Hover;
 export const backgroundSelected = gray90;
-export const backgroundSelectedHover = adjustLightness(backgroundSelected, 5);
+export const backgroundSelectedHover = gray90Hover;
 
 // Layer
 // layer-01
 export const layer01 = gray90;
 export const layerActive01 = gray70;
-export const layerHover01 = adjustLightness(layer01, 5);
+export const layerHover01 = gray90Hover;
 export const layerSelected01 = gray80;
 export const layerSelectedHover01 = gray80Hover;
 
@@ -81,14 +84,13 @@ export const layerSelected03 = gray60;
 export const layerSelectedHover03 = gray60Hover;
 
 // layer
-export const layerDisabled = gray90;
 export const layerSelectedInverse = gray10;
 export const layerSelectedDisabled = gray40;
 
 // layer-accent-01
 export const layerAccent01 = gray80;
 export const layerAccentActive01 = gray60;
-export const layerAccentHover01 = adjustLightness(layerAccent01, 6);
+export const layerAccentHover01 = gray80Hover;
 
 // layer-accent-02
 export const layerAccent02 = gray70;
@@ -113,9 +115,6 @@ export const fieldHover02 = gray80Hover;
 export const field03 = gray70;
 export const fieldHover03 = gray70Hover;
 
-// field
-export const fieldDisabled = gray80;
-
 // Border
 // border-subtle-00
 export const borderSubtle00 = gray80;
@@ -151,7 +150,7 @@ export const textPrimary = gray10;
 export const textSecondary = gray30;
 export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
 export const textHelper = gray40;
-export const textError = red30;
+export const textError = red40;
 export const textInverse = gray100;
 export const textOnColor = white;
 export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
@@ -170,7 +169,7 @@ export const iconSecondary = gray30;
 export const iconInverse = gray100;
 export const iconOnColor = white;
 export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
-export const iconDisabled = gray70;
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
 
 // Support
 export const supportError = red50;
@@ -180,7 +179,7 @@ export const supportInfo = blue50;
 export const supportErrorInverse = red60;
 export const supportSuccessInverse = green50;
 export const supportWarningInverse = yellow30;
-export const supportInfoInverse = blue60;
+export const supportInfoInverse = blue70;
 export const supportCautionMinor = yellow30;
 export const supportCautionMajor = orange40;
 export const supportCautionUndefined = purple50;
@@ -196,9 +195,9 @@ export const skeletonElement = gray80;
 
 // Misc
 export const interactive = blue50;
-export const highlight = blue20;
+export const highlight = blue80;
 export const overlay = rgba(black, 0.65);
-export const toggleOff = gray50;
+export const toggleOff = gray60;
 export const shadow = rgba(black, 0.8);
 
 export {

package/src/next/g90.js

@@ -44,24 +44,27 @@ import {
 
   // Tools
   rgba,
+  gray90Hover,
+  gray10Hover,
+  gray80Hover,
 } from '@carbon/colors';
-import { adjustLightness, adjustAlpha } from '../tools';
+import { adjustAlpha } from '../tools';
 
 // Background
 export const background = gray90;
 export const backgroundInverse = gray10;
 export const backgroundBrand = blue60;
 export const backgroundActive = gray80;
-export const backgroundHover = adjustLightness(background, 5);
-export const backgroundInverseHover = adjustLightness(backgroundInverse, -5);
+export const backgroundHover = gray90Hover;
+export const backgroundInverseHover = gray10Hover;
 export const backgroundSelected = gray80;
-export const backgroundSelectedHover = adjustLightness(backgroundSelected, 6);
+export const backgroundSelectedHover = gray80Hover;
 
 // Layer
 // layer-01
 export const layer01 = gray80;
 export const layerActive01 = gray60;
-export const layerHover01 = adjustLightness(layer01, 6);
+export const layerHover01 = gray80Hover;
 export const layerSelected01 = gray70;
 export const layerSelectedHover01 = gray70Hover;
 
@@ -80,19 +83,18 @@ export const layerSelected03 = gray50;
 export const layerSelectedHover03 = gray50Hover;
 
 // layer
-export const layerDisabled = gray80;
 export const layerSelectedInverse = gray10;
 export const layerSelectedDisabled = gray40;
 
 // layer-accent-01
 export const layerAccent01 = gray70;
 export const layerAccentActive01 = gray50;
-export const layerAccentHover01 = adjustLightness(layerAccent01, 7);
+export const layerAccentHover01 = gray70Hover;
 
 // layer-accent-02
 export const layerAccent02 = gray60;
 export const layerAccentActive02 = gray80;
-export const layerAccentHover02 = adjustLightness(layerAccent01, -7);
+export const layerAccentHover02 = gray60Hover;
 
 // layer-accent-03
 export const layerAccent03 = gray50;
@@ -102,7 +104,7 @@ export const layerAccentHover03 = gray50Hover;
 // Field
 // field-01
 export const field01 = gray80;
-export const fieldHover01 = adjustLightness(field01, 6);
+export const fieldHover01 = gray80Hover;
 
 // field-02
 export const field02 = gray70;
@@ -112,9 +114,6 @@ export const fieldHover02 = gray70Hover;
 export const field03 = gray60;
 export const fieldHover03 = gray60Hover;
 
-// field
-export const fieldDisabled = gray80;
-
 // Border
 // border-subtle-00
 export const borderSubtle00 = gray70;
@@ -169,7 +168,7 @@ export const iconSecondary = gray30;
 export const iconInverse = gray100;
 export const iconOnColor = white;
 export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
-export const iconDisabled = gray60;
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
 
 // Support
 export const supportError = red40;
@@ -179,7 +178,7 @@ export const supportInfo = blue50;
 export const supportErrorInverse = red60;
 export const supportSuccessInverse = green50;
 export const supportWarningInverse = yellow30;
-export const supportInfoInverse = blue60;
+export const supportInfoInverse = blue70;
 export const supportCautionMinor = yellow30;
 export const supportCautionMajor = orange40;
 export const supportCautionUndefined = purple50;
@@ -190,7 +189,7 @@ export const focusInset = gray100;
 export const focusInverse = blue60;
 
 // Skeleton
-export const skeletonBackground = adjustLightness(background, 5);
+export const skeletonBackground = gray90Hover;
 export const skeletonElement = gray70;
 
 // Misc

package/src/next/tokens/v11TokenGroup.js

@@ -98,10 +98,6 @@ export const layer = TokenGroup.create({
       state: 'hover',
       name: 'layer-selected-hover-03',
     },
-    {
-      state: 'disabled',
-      name: 'layer-disabled',
-    },
     {
       name: 'layer-selected-inverse',
     },
@@ -170,10 +166,6 @@ export const field = TokenGroup.create({
       state: 'hover',
       name: 'field-hover-03',
     },
-    {
-      state: 'disabled',
-      name: 'field-disabled',
-    },
   ],
 });
 

package/src/next/white.js

@@ -37,8 +37,10 @@ import {
   // Constants
   white,
   whiteHover,
+  gray80Hover,
+  gray10Hover,
 } from '@carbon/colors';
-import { adjustLightness, adjustAlpha } from '../tools';
+import { adjustAlpha } from '../tools';
 
 // Background
 export const background = white;
@@ -46,67 +48,63 @@ export const backgroundInverse = gray80;
 export const backgroundBrand = blue60;
 export const backgroundActive = gray30;
 export const backgroundHover = whiteHover;
-export const backgroundInverseHover = adjustLightness(backgroundInverse, 6);
+export const backgroundInverseHover = gray80Hover;
 export const backgroundSelected = gray20;
-export const backgroundSelectedHover = adjustLightness(backgroundSelected, -6);
+export const backgroundSelectedHover = gray20Hover;
 
 // Layer
 // layer-01
 export const layer01 = gray10;
 export const layerActive01 = gray30;
-export const layerHover01 = adjustLightness(layer01, -5);
+export const layerHover01 = gray10Hover;
 export const layerSelected01 = gray20;
 export const layerSelectedHover01 = gray20Hover;
 
 // layer-02
 export const layer02 = white;
 export const layerActive02 = gray30;
-export const layerHover02 = adjustLightness(layer01, -5);
+export const layerHover02 = whiteHover;
 export const layerSelected02 = gray20;
 export const layerSelectedHover02 = gray20Hover;
 
 // layer-03
 export const layer03 = gray10;
 export const layerActive03 = gray30;
-export const layerHover03 = adjustLightness(layer01, -5);
+export const layerHover03 = gray10Hover;
 export const layerSelected03 = gray20;
 export const layerSelectedHover03 = gray20Hover;
 
 // layer
-export const layerDisabled = gray10;
 export const layerSelectedInverse = gray100;
 export const layerSelectedDisabled = gray50;
 
 // layer-accent-01
 export const layerAccent01 = gray20;
 export const layerAccentActive01 = gray40;
-export const layerAccentHover01 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover01 = gray20Hover;
 
 // layer-accent-02
 export const layerAccent02 = gray20;
 export const layerAccentActive02 = gray40;
-export const layerAccentHover02 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover02 = gray20Hover;
 
 // layer-accent-03
 export const layerAccent03 = gray20;
 export const layerAccentActive03 = gray40;
-export const layerAccentHover03 = adjustLightness(layerAccent01, -6);
+export const layerAccentHover03 = gray20Hover;
 
 // Field
 // field-01
 export const field01 = gray10;
-export const fieldHover01 = adjustLightness(field01, -5);
+export const fieldHover01 = gray10Hover;
 
 // field-02
 export const field02 = white;
-export const fieldHover02 = adjustLightness(field01, -5);
+export const fieldHover02 = whiteHover;
 
 // field-03
 export const field03 = gray10;
-export const fieldHover03 = adjustLightness(field01, -5);
-
-// field
-export const fieldDisabled = gray10;
+export const fieldHover03 = gray10Hover;
 
 // Border
 // border-subtle-00
@@ -162,7 +160,7 @@ export const iconSecondary = gray70;
 export const iconInverse = white;
 export const iconOnColor = white;
 export const iconOnColorDisabled = gray50;
-export const iconDisabled = gray30;
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
 
 // Support
 export const supportError = red60;

package/src/tokens.js

@@ -186,8 +186,6 @@ const colors = [
   'layerSelectedInverse',
   'borderSubtleSelected',
 
-  'layerDisabled',
-  'fieldDisabled',
   'borderDisabled',
 
   'textDisabled',
@@ -420,8 +418,6 @@ export const unstable__meta = {
         'layerSelectedInverse',
         'borderSubtleSelected',
 
-        'layerDisabled',
-        'fieldDisabled',
         'borderDisabled',
 
         'textDisabled',

package/src/v9.js

@@ -183,8 +183,6 @@ export const layerSelectedHover = hoverSelectedUI;
 export const layerSelectedInverse = ui05;
 export const borderSubtleSelected = activeUI;
 
-export const layerDisabled = disabled01;
-export const fieldDisabled = disabled01;
 export const borderDisabled = disabled01;
 
 export const textDisabled = disabled02;

package/src/white.js

@@ -219,8 +219,6 @@ export const layerSelectedHover = hoverSelectedUI;
 export const layerSelectedInverse = ui05;
 export const borderSubtleSelected = activeUI;
 
-export const layerDisabled = disabled01;
-export const fieldDisabled = disabled01;
 export const borderDisabled = disabled01;
 
 export const textDisabled = disabled02;

package/umd/index.js

@@ -207,8 +207,6 @@
   var layerSelectedHover$5 = hoverSelectedUI$5;
   var layerSelectedInverse$5 = ui05$5;
   var borderSubtleSelected$5 = activeUI$5;
-  var layerDisabled$5 = disabled01$5;
-  var fieldDisabled$5 = disabled01$5;
   var borderDisabled$5 = disabled01$5;
   var textDisabled$5 = disabled02$5;
   var buttonDisabled$5 = disabled02$5;
@@ -360,8 +358,6 @@
     layerSelectedHover: layerSelectedHover$5,
     layerSelectedInverse: layerSelectedInverse$5,
     borderSubtleSelected: borderSubtleSelected$5,
-    layerDisabled: layerDisabled$5,
-    fieldDisabled: fieldDisabled$5,
     borderDisabled: borderDisabled$5,
     textDisabled: textDisabled$5,
     buttonDisabled: buttonDisabled$5,
@@ -615,8 +611,6 @@
   var layerSelectedHover$4 = hoverSelectedUI$4;
   var layerSelectedInverse$4 = ui05$4;
   var borderSubtleSelected$4 = activeUI$4;
-  var layerDisabled$4 = disabled01$4;
-  var fieldDisabled$4 = disabled01$4;
   var borderDisabled$4 = disabled01$4;
   var textDisabled$4 = disabled02$4;
   var buttonDisabled$4 = disabled02$4;
@@ -768,8 +762,6 @@
     layerSelectedHover: layerSelectedHover$4,
     layerSelectedInverse: layerSelectedInverse$4,
     borderSubtleSelected: borderSubtleSelected$4,
-    layerDisabled: layerDisabled$4,
-    fieldDisabled: fieldDisabled$4,
     borderDisabled: borderDisabled$4,
     textDisabled: textDisabled$4,
     buttonDisabled: buttonDisabled$4,
@@ -1023,8 +1015,6 @@
   var layerSelectedHover$3 = hoverSelectedUI$3;
   var layerSelectedInverse$3 = ui05$3;
   var borderSubtleSelected$3 = activeUI$3;
-  var layerDisabled$3 = disabled01$3;
-  var fieldDisabled$3 = disabled01$3;
   var borderDisabled$3 = disabled01$3;
   var textDisabled$3 = disabled02$3;
   var buttonDisabled$3 = disabled02$3;
@@ -1176,8 +1166,6 @@
     layerSelectedHover: layerSelectedHover$3,
     layerSelectedInverse: layerSelectedInverse$3,
     borderSubtleSelected: borderSubtleSelected$3,
-    layerDisabled: layerDisabled$3,
-    fieldDisabled: fieldDisabled$3,
     borderDisabled: borderDisabled$3,
     textDisabled: textDisabled$3,
     buttonDisabled: buttonDisabled$3,
@@ -1368,8 +1356,6 @@
   var layerSelectedHover$2 = adjustLightness(layerSelected$2, -6);
   var layerSelectedInverse$2 = colors$1.gray10;
   var borderSubtleSelected$2 = colors$1.gray50;
-  var layerDisabled$2 = colors$1.gray70;
-  var fieldDisabled$2 = colors$1.gray70;
   var borderDisabled$2 = colors$1.gray70;
   var textDisabled$2 = colors$1.gray50;
   var buttonDisabled$2 = colors$1.gray50;
@@ -1439,7 +1425,7 @@
   var activeDanger$2 = buttonDangerActive$2;
   var hoverRow$2 = layerHover$2;
   var visitedLink$2 = linkVisited$2;
-  var disabled01$2 = layerDisabled$2;
+  var disabled01$2 = colors$1.gray70;
   var disabled02$2 = textDisabled$2;
   var disabled03$2 = textOnColorDisabled$2;
   var decorative01$2 = colors$1.gray60;
@@ -1525,8 +1511,6 @@
     layerSelectedHover: layerSelectedHover$2,
     layerSelectedInverse: layerSelectedInverse$2,
     borderSubtleSelected: borderSubtleSelected$2,
-    layerDisabled: layerDisabled$2,
-    fieldDisabled: fieldDisabled$2,
     borderDisabled: borderDisabled$2,
     textDisabled: textDisabled$2,
     buttonDisabled: buttonDisabled$2,
@@ -1842,8 +1826,6 @@
   var layerSelectedHover$1 = hoverSelectedUI$1;
   var layerSelectedInverse$1 = ui05$1;
   var borderSubtleSelected$1 = activeUI$1;
-  var layerDisabled$1 = disabled01$1;
-  var fieldDisabled$1 = disabled01$1;
   var borderDisabled$1 = disabled01$1;
   var textDisabled$1 = disabled02$1;
   var buttonDisabled$1 = disabled02$1;
@@ -1995,8 +1977,6 @@
     layerSelectedHover: layerSelectedHover$1,
     layerSelectedInverse: layerSelectedInverse$1,
     borderSubtleSelected: borderSubtleSelected$1,
-    layerDisabled: layerDisabled$1,
-    fieldDisabled: fieldDisabled$1,
     borderDisabled: borderDisabled$1,
     textDisabled: textDisabled$1,
     buttonDisabled: buttonDisabled$1,
@@ -2250,8 +2230,6 @@
   var layerSelectedHover = hoverSelectedUI;
   var layerSelectedInverse = ui05;
   var borderSubtleSelected = activeUI;
-  var layerDisabled = disabled01;
-  var fieldDisabled = disabled01;
   var borderDisabled = disabled01;
   var textDisabled = disabled02;
   var buttonDisabled = disabled02;
@@ -2403,8 +2381,6 @@
     layerSelectedHover: layerSelectedHover,
     layerSelectedInverse: layerSelectedInverse,
     borderSubtleSelected: borderSubtleSelected,
-    layerDisabled: layerDisabled,
-    fieldDisabled: fieldDisabled,
     borderDisabled: borderDisabled,
     textDisabled: textDisabled,
     buttonDisabled: buttonDisabled,
@@ -2529,7 +2505,7 @@
   'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', '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', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // New color tokens
   // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
-  'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
+  'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'shadow', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
   var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
   /**
@@ -2583,7 +2559,7 @@
     }, {
       type: 'interactive',
       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', // new tokens
-      'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement']
+      'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement']
     }],
     deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger']
   };
@@ -3032,7 +3008,6 @@
   exports.field = field$5;
   exports.field01 = field01$5;
   exports.field02 = field02$5;
-  exports.fieldDisabled = fieldDisabled$5;
   exports.fieldHover = fieldHover$5;
   exports.focus = focus$5;
   exports.focusInset = focusInset$5;
@@ -3081,7 +3056,6 @@
   exports.layerAccentActive = layerAccentActive$5;
   exports.layerAccentHover = layerAccentHover$5;
   exports.layerActive = layerActive$5;
-  exports.layerDisabled = layerDisabled$5;
   exports.layerHover = layerHover$5;
   exports.layerSelected = layerSelected$5;
   exports.layerSelectedDisabled = layerSelectedDisabled$5;