@carbon/themes 10.48.0 → 10.51.0-rc.0

package/scss/modules/generated/_tokens.scss

@@ -88,9 +88,6 @@ $layer-selected-03: _get('layer-selected-03') !default;
 /// The CSS Custom Property for the `layer-selected-hover-03` token
 $layer-selected-hover-03: _get('layer-selected-hover-03') !default;
 
-/// The CSS Custom Property for the `layer-disabled` token
-$layer-disabled: _get('layer-disabled') !default;
-
 /// The CSS Custom Property for the `layer-selected-inverse` token
 $layer-selected-inverse: _get('layer-selected-inverse') !default;
 
@@ -142,9 +139,6 @@ $field-03: _get('field-03') !default;
 /// The CSS Custom Property for the `field-hover-03` token
 $field-hover-03: _get('field-hover-03') !default;
 
-/// The CSS Custom Property for the `field-disabled` token
-$field-disabled: _get('field-disabled') !default;
-
 /// The CSS Custom Property for the `interactive` token
 $interactive: _get('interactive') !default;
 
@@ -223,11 +217,17 @@ $link-primary-hover: _get('link-primary-hover') !default;
 /// The CSS Custom Property for the `link-secondary` token
 $link-secondary: _get('link-secondary') !default;
 
+/// The CSS Custom Property for the `link-visited` token
+$link-visited: _get('link-visited') !default;
+
 /// The CSS Custom Property for the `link-inverse` token
 $link-inverse: _get('link-inverse') !default;
 
-/// The CSS Custom Property for the `link-visited` token
-$link-visited: _get('link-visited') !default;
+/// The CSS Custom Property for the `link-inverse-active` token
+$link-inverse-active: _get('link-inverse-active') !default;
+
+/// The CSS Custom Property for the `link-inverse-hover` token
+$link-inverse-hover: _get('link-inverse-hover') !default;
 
 /// The CSS Custom Property for the `icon-primary` token
 $icon-primary: _get('icon-primary') !default;

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

@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue30,
   blue40,
   blue60,
   blue70,
@@ -23,6 +24,7 @@ import {
   gray60,
   gray70,
   gray80,
+  gray80Hover,
   gray100,
 
   // Support
@@ -39,17 +41,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 +76,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 +107,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;
@@ -156,6 +154,8 @@ export const linkPrimaryHover = blue70;
 export const linkSecondary = blue70;
 export const linkInverse = blue40;
 export const linkVisited = purple60;
+export const linkInverseActive = gray10;
+export const linkInverseHover = blue30;
 
 // Icon
 export const iconPrimary = gray100;
@@ -163,7 +163,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 +184,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);
@@ -163,6 +162,8 @@ export const linkPrimaryHover = blue30;
 export const linkSecondary = blue30;
 export const linkInverse = blue60;
 export const linkVisited = purple40;
+export const linkInverseActive = gray100;
+export const linkInverseHover = blue70;
 
 // Icon
 export const iconPrimary = gray10;
@@ -170,7 +171,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 +181,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 +197,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;
@@ -162,6 +161,8 @@ export const linkPrimaryHover = blue30;
 export const linkSecondary = blue30;
 export const linkInverse = blue60;
 export const linkVisited = purple40;
+export const linkInverseActive = gray100;
+export const linkInverseHover = blue70;
 
 // Icon
 export const iconPrimary = gray10;
@@ -169,7 +170,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 +180,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 +191,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',
-    },
   ],
 });
 
@@ -261,11 +253,13 @@ export const link = TokenGroup.create({
       name: 'link-primary-hover',
     },
     'link-secondary',
-    'link-inverse',
     {
       state: 'visited',
       name: 'link-visited',
     },
+    'link-inverse',
+    'link-inverse-active',
+    'link-inverse-hover',
   ],
 });
 

package/src/next/white.js

@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue30,
   blue40,
   blue60,
   blue70,
@@ -37,8 +38,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 +49,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
@@ -155,6 +154,8 @@ export const linkPrimaryHover = blue70;
 export const linkSecondary = blue70;
 export const linkInverse = blue40;
 export const linkVisited = purple60;
+export const linkInverseActive = gray10;
+export const linkInverseHover = blue30;
 
 // Icon
 export const iconPrimary = gray100;
@@ -162,7 +163,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;