@carbon/themes 10.49.0-rc.0 → 10.51.0

package/scss/modules/generated/_themes.scss

@@ -36,7 +36,6 @@ $white: (
   field-01: #f4f4f4,
   field-02: #ffffff,
   field-03: #f4f4f4,
-  field-disabled: #f4f4f4,
   field-hover-01: #e8e8e8,
   field-hover-02: #e8e8e8,
   field-hover-03: #e8e8e8,
@@ -44,7 +43,7 @@ $white: (
   focus-inset: #ffffff,
   focus-inverse: #ffffff,
   highlight: #d0e2ff,
-  icon-disabled: #c6c6c6,
+  icon-disabled: rgba(22, 22, 22, 0.25),
   icon-inverse: #ffffff,
   icon-on-color: #ffffff,
   icon-on-color-disabled: #8d8d8d,
@@ -66,7 +65,6 @@ $white: (
   layer-active-01: #c6c6c6,
   layer-active-02: #c6c6c6,
   layer-active-03: #c6c6c6,
-  layer-disabled: #f4f4f4,
   layer-hover-01: #e8e8e8,
   layer-hover-02: #e8e8e8,
   layer-hover-03: #e8e8e8,
@@ -79,6 +77,8 @@ $white: (
   layer-selected-hover-03: #d1d1d1,
   layer-selected-inverse: #161616,
   link-inverse: #78a9ff,
+  link-inverse-active: #f4f4f4,
+  link-inverse-hover: #a6c8ff,
   link-primary: #0f62fe,
   link-primary-hover: #0043ce,
   link-secondary: #0043ce,
@@ -141,7 +141,6 @@ $g10: (
   field-01: #ffffff,
   field-02: #f4f4f4,
   field-03: #ffffff,
-  field-disabled: #ffffff,
   field-hover-01: #e8e8e8,
   field-hover-02: #e8e8e8,
   field-hover-03: #e8e8e8,
@@ -149,7 +148,7 @@ $g10: (
   focus-inset: #ffffff,
   focus-inverse: #ffffff,
   highlight: #d0e2ff,
-  icon-disabled: #c6c6c6,
+  icon-disabled: rgba(22, 22, 22, 0.25),
   icon-inverse: #ffffff,
   icon-on-color: #ffffff,
   icon-on-color-disabled: #8d8d8d,
@@ -171,7 +170,6 @@ $g10: (
   layer-active-01: #c6c6c6,
   layer-active-02: #c6c6c6,
   layer-active-03: #c6c6c6,
-  layer-disabled: #ffffff,
   layer-hover-01: #e8e8e8,
   layer-hover-02: #e8e8e8,
   layer-hover-03: #e8e8e8,
@@ -184,6 +182,8 @@ $g10: (
   layer-selected-hover-03: #d1d1d1,
   layer-selected-inverse: #161616,
   link-inverse: #78a9ff,
+  link-inverse-active: #f4f4f4,
+  link-inverse-hover: #a6c8ff,
   link-primary: #0f62fe,
   link-primary-hover: #0043ce,
   link-secondary: #0043ce,
@@ -246,7 +246,6 @@ $g90: (
   field-01: #393939,
   field-02: #525252,
   field-03: #6f6f6f,
-  field-disabled: #393939,
   field-hover-01: #474747,
   field-hover-02: #636363,
   field-hover-03: #5e5e5e,
@@ -254,7 +253,7 @@ $g90: (
   focus-inset: #161616,
   focus-inverse: #0f62fe,
   highlight: #0043ce,
-  icon-disabled: #6f6f6f,
+  icon-disabled: rgba(244, 244, 244, 0.25),
   icon-inverse: #161616,
   icon-on-color: #ffffff,
   icon-on-color-disabled: rgba(255, 255, 255, 0.25),
@@ -271,12 +270,11 @@ $g90: (
   layer-accent-active-02: #393939,
   layer-accent-active-03: #525252,
   layer-accent-hover-01: #636363,
-  layer-accent-hover-02: #404040,
+  layer-accent-hover-02: #5e5e5e,
   layer-accent-hover-03: #7a7a7a,
   layer-active-01: #6f6f6f,
   layer-active-02: #8d8d8d,
   layer-active-03: #393939,
-  layer-disabled: #393939,
   layer-hover-01: #474747,
   layer-hover-02: #636363,
   layer-hover-03: #5e5e5e,
@@ -289,6 +287,8 @@ $g90: (
   layer-selected-hover-03: #7a7a7a,
   layer-selected-inverse: #f4f4f4,
   link-inverse: #0f62fe,
+  link-inverse-active: #161616,
+  link-inverse-hover: #0043ce,
   link-primary: #78a9ff,
   link-primary-hover: #a6c8ff,
   link-secondary: #a6c8ff,
@@ -303,7 +303,7 @@ $g90: (
   support-error: #ff8389,
   support-error-inverse: #da1e28,
   support-info: #4589ff,
-  support-info-inverse: #0f62fe,
+  support-info-inverse: #0043ce,
   support-success: #42be65,
   support-success-inverse: #24a148,
   support-warning: #f1c21b,
@@ -351,15 +351,14 @@ $g100: (
   field-01: #262626,
   field-02: #393939,
   field-03: #525252,
-  field-disabled: #393939,
   field-hover-01: #333333,
   field-hover-02: #474747,
   field-hover-03: #636363,
   focus: #ffffff,
   focus-inset: #161616,
   focus-inverse: #0f62fe,
-  highlight: #d0e2ff,
-  icon-disabled: #525252,
+  highlight: #002d9c,
+  icon-disabled: rgba(244, 244, 244, 0.25),
   icon-inverse: #161616,
   icon-on-color: #ffffff,
   icon-on-color-disabled: rgba(255, 255, 255, 0.25),
@@ -381,7 +380,6 @@ $g100: (
   layer-active-01: #525252,
   layer-active-02: #6f6f6f,
   layer-active-03: #8d8d8d,
-  layer-disabled: #262626,
   layer-hover-01: #333333,
   layer-hover-02: #474747,
   layer-hover-03: #636363,
@@ -394,6 +392,8 @@ $g100: (
   layer-selected-hover-03: #5e5e5e,
   layer-selected-inverse: #f4f4f4,
   link-inverse: #0f62fe,
+  link-inverse-active: #161616,
+  link-inverse-hover: #0043ce,
   link-primary: #78a9ff,
   link-primary-hover: #a6c8ff,
   link-secondary: #a6c8ff,
@@ -408,13 +408,13 @@ $g100: (
   support-error: #fa4d56,
   support-error-inverse: #da1e28,
   support-info: #4589ff,
-  support-info-inverse: #0f62fe,
+  support-info-inverse: #0043ce,
   support-success: #42be65,
   support-success-inverse: #24a148,
   support-warning: #f1c21b,
   support-warning-inverse: #f1c21b,
   text-disabled: rgba(244, 244, 244, 0.25),
-  text-error: #ffb3b8,
+  text-error: #ff8389,
   text-helper: #a8a8a8,
   text-inverse: #161616,
   text-on-color: #ffffff,
@@ -422,7 +422,7 @@ $g100: (
   text-placeholder: rgba(244, 244, 244, 0.4),
   text-primary: #f4f4f4,
   text-secondary: #c6c6c6,
-  toggle-off: #8d8d8d,
+  toggle-off: #6f6f6f,
 ) !default;
 $g100: utilities.merge(
   $g100,

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',
   ],
 });