@carbon/themes 10.30.0 → 10.32.0

package/scss/modules/generated/_themes.scss

@@ -82,6 +82,80 @@ $white: utilities.merge(
     button-separator: #e0e0e0,
     skeleton-01: #e5e5e5,
     skeleton-02: #c6c6c6,
+    background: #ffffff,
+    layer: #f4f4f4,
+    layer-accent: #e0e0e0,
+    field: #f4f4f4,
+    background-inverse: #393939,
+    background-brand: #0f62fe,
+    interactive: #0f62fe,
+    border-subtle: #e0e0e0,
+    border-strong: #8d8d8d,
+    border-inverse: #161616,
+    border-interactive: #0f62fe,
+    text-primary: #161616,
+    text-secondary: #525252,
+    text-placeholder: #a8a8a8,
+    text-helper: #6f6f6f,
+    text-on-color: #ffffff,
+    text-inverse: #ffffff,
+    link-primary: #0f62fe,
+    link-secondary: #0043ce,
+    link-visited: #8a3ffc,
+    link-inverse: #78a9ff,
+    icon-primary: #161616,
+    icon-secondary: #525252,
+    icon-on-color: #ffffff,
+    icon-inverse: #ffffff,
+    support-error: #da1e28,
+    support-success: #24a148,
+    support-warning: #f1c21b,
+    support-info: #0043ce,
+    support-error-inverse: #fa4d56,
+    support-success-inverse: #42be65,
+    support-warning-inverse: #f1c21b,
+    support-info-inverse: #4589ff,
+    overlay: rgba(22, 22, 22, 0.5),
+    toggle-off: #8d8d8d,
+    button-primary: #0f62fe,
+    button-secondary: #393939,
+    button-tertiary: #0f62fe,
+    button-danger-primary: #da1e28,
+    button-danger-secondary: #da1e28,
+    background-active: #c6c6c6,
+    layer-active: #c6c6c6,
+    button-danger-active: #750e13,
+    button-primary-active: #002d9c,
+    button-secondary-active: #6f6f6f,
+    button-tertiary-active: #002d9c,
+    focus-inset: #ffffff,
+    focus-inverse: #ffffff,
+    background-hover: #e5e5e5,
+    layer-hover: #e5e5e5,
+    field-hover: #e5e5e5,
+    background-inverse-hover: #4c4c4c,
+    link-primary-hover: #0043ce,
+    button-danger-hover: #b81921,
+    button-primary-hover: #0353e9,
+    button-secondary-hover: #4c4c4c,
+    button-tertiary-hover: #0353e9,
+    background-selected: #e0e0e0,
+    background-selected-hover: #cacaca,
+    layer-selected: #e0e0e0,
+    layer-selected-hover: #cacaca,
+    layer-selected-inverse: #161616,
+    border-subtle-selected: #c6c6c6,
+    layer-disabled: #f4f4f4,
+    field-disabled: #f4f4f4,
+    border-disabled: #f4f4f4,
+    text-disabled: #c6c6c6,
+    button-disabled: #c6c6c6,
+    icon-disabled: #c6c6c6,
+    text-on-color-disabled: #8d8d8d,
+    icon-on-color-disabled: #8d8d8d,
+    layer-selected-disabled: #8d8d8d,
+    skeleton-background: #e5e5e5,
+    skeleton-element: #c6c6c6,
     brand-01: #0f62fe,
     brand-02: #393939,
     brand-03: #0f62fe,
@@ -104,7 +178,12 @@ $g10: map.merge(
     field-01: #ffffff,
     field-02: #f4f4f4,
     disabled-01: #ffffff,
-    highlight: #edf5ff,
+    background: #f4f4f4,
+    layer: #ffffff,
+    field: #ffffff,
+    layer-disabled: #ffffff,
+    field-disabled: #ffffff,
+    border-disabled: #ffffff,
   )
 ) !default;
 
@@ -170,6 +249,67 @@ $g90: map.merge(
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
+    background: #262626,
+    layer: #393939,
+    layer-accent: #525252,
+    field: #393939,
+    background-inverse: #f4f4f4,
+    interactive: #4589ff,
+    border-subtle: #525252,
+    border-inverse: #f4f4f4,
+    border-interactive: #4589ff,
+    text-primary: #f4f4f4,
+    text-secondary: #c6c6c6,
+    text-placeholder: #6f6f6f,
+    text-helper: #8d8d8d,
+    text-inverse: #161616,
+    link-primary: #78a9ff,
+    link-secondary: #a6c8ff,
+    link-visited: #be95ff,
+    link-inverse: #0f62fe,
+    icon-primary: #f4f4f4,
+    icon-secondary: #c6c6c6,
+    icon-inverse: #161616,
+    support-error: #ff8389,
+    support-success: #42be65,
+    support-info: #4589ff,
+    support-error-inverse: #da1e28,
+    support-success-inverse: #24a148,
+    support-info-inverse: #0f62fe,
+    overlay: rgba(22, 22, 22, 0.7),
+    button-secondary: #6f6f6f,
+    button-tertiary: #ffffff,
+    button-danger-secondary: #ff8389,
+    background-active: #6f6f6f,
+    layer-active: #6f6f6f,
+    button-secondary-active: #393939,
+    button-tertiary-active: #c6c6c6,
+    focus-inset: #161616,
+    focus-inverse: #0f62fe,
+    background-hover: #4c4c4c,
+    layer-hover: #4c4c4c,
+    field-hover: #4c4c4c,
+    background-inverse-hover: #e5e5e5,
+    link-primary-hover: #a6c8ff,
+    button-secondary-hover: #606060,
+    button-tertiary-hover: #f4f4f4,
+    background-selected: #525252,
+    background-selected-hover: #656565,
+    layer-selected: #525252,
+    layer-selected-hover: #656565,
+    layer-selected-inverse: #f4f4f4,
+    border-subtle-selected: #6f6f6f,
+    layer-disabled: #393939,
+    field-disabled: #393939,
+    border-disabled: #393939,
+    text-disabled: #6f6f6f,
+    button-disabled: #6f6f6f,
+    icon-disabled: #6f6f6f,
+    text-on-color-disabled: #a8a8a8,
+    icon-on-color-disabled: #a8a8a8,
+    layer-selected-disabled: #a8a8a8,
+    skeleton-background: #353535,
+    skeleton-element: #525252,
     brand-02: #6f6f6f,
     brand-03: #ffffff,
     active-01: #6f6f6f,
@@ -239,6 +379,66 @@ $g100: map.merge(
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
+    background: #161616,
+    layer: #262626,
+    layer-accent: #393939,
+    field: #262626,
+    background-inverse: #f4f4f4,
+    interactive: #4589ff,
+    border-subtle: #393939,
+    border-strong: #6f6f6f,
+    border-inverse: #f4f4f4,
+    border-interactive: #4589ff,
+    text-primary: #f4f4f4,
+    text-secondary: #c6c6c6,
+    text-placeholder: #6f6f6f,
+    text-helper: #8d8d8d,
+    text-inverse: #161616,
+    link-primary: #78a9ff,
+    link-secondary: #a6c8ff,
+    link-visited: #be95ff,
+    link-inverse: #0f62fe,
+    icon-primary: #f4f4f4,
+    icon-secondary: #c6c6c6,
+    icon-inverse: #161616,
+    support-error: #fa4d56,
+    support-success: #42be65,
+    support-info: #4589ff,
+    support-error-inverse: #da1e28,
+    support-success-inverse: #24a148,
+    support-info-inverse: #0f62fe,
+    overlay: rgba(22, 22, 22, 0.7),
+    toggle-off: #6f6f6f,
+    button-secondary: #6f6f6f,
+    button-tertiary: #ffffff,
+    button-danger-secondary: #fa4d56,
+    background-active: #525252,
+    layer-active: #525252,
+    button-secondary-active: #393939,
+    button-tertiary-active: #c6c6c6,
+    focus-inset: #161616,
+    focus-inverse: #0f62fe,
+    background-hover: #353535,
+    layer-hover: #353535,
+    field-hover: #353535,
+    background-inverse-hover: #e5e5e5,
+    link-primary-hover: #a6c8ff,
+    button-secondary-hover: #606060,
+    button-tertiary-hover: #f4f4f4,
+    background-selected: #393939,
+    background-selected-hover: #4c4c4c,
+    layer-selected: #393939,
+    layer-selected-hover: #4c4c4c,
+    layer-selected-inverse: #f4f4f4,
+    border-subtle-selected: #525252,
+    layer-disabled: #262626,
+    field-disabled: #262626,
+    border-disabled: #262626,
+    text-disabled: #525252,
+    button-disabled: #525252,
+    icon-disabled: #525252,
+    skeleton-background: #353535,
+    skeleton-element: #525252,
     brand-02: #6f6f6f,
     brand-03: #ffffff,
     active-01: #525252,

package/src/g10.js

@@ -8,7 +8,7 @@ import { adjustLightness } from './tools';
 
 import {
   // Blue
-  blue10,
+  blue20,
   blue40,
   blue60,
   blue70,
@@ -128,7 +128,7 @@ export const disabled01 = white;
 export const disabled02 = gray30;
 export const disabled03 = gray50;
 
-export const highlight = blue10;
+export const highlight = blue20;
 
 export const decorative01 = gray20;
 
@@ -137,6 +137,99 @@ export const buttonSeparator = '#e0e0e0';
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 
+// New color tokens
+// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+export const background = uiBackground;
+export const layer = ui01;
+export const layerAccent = ui03;
+export const field = field01;
+export const backgroundInverse = inverse02;
+export const backgroundBrand = interactive01;
+export const interactive = interactive04;
+
+export const borderSubtle = ui03;
+export const borderStrong = ui04;
+export const borderInverse = ui05;
+export const borderInteractive = interactive04;
+
+export const textPrimary = text01;
+export const textSecondary = text02;
+export const textPlaceholder = text03;
+export const textHelper = text05;
+export const textOnColor = text04;
+export const textInverse = inverse01;
+
+export const linkPrimary = link01;
+export const linkSecondary = link02;
+export const linkVisited = visitedLink;
+export const linkInverse = inverseLink;
+
+export const iconPrimary = icon01;
+export const iconSecondary = icon02;
+export const iconOnColor = icon03;
+export const iconInverse = inverse01;
+
+export const supportError = support01;
+export const supportSuccess = support02;
+export const supportWarning = support03;
+export const supportInfo = support04;
+export const supportErrorInverse = inverseSupport01;
+export const supportSuccessInverse = inverseSupport02;
+export const supportWarningInverse = inverseSupport03;
+export const supportInfoInverse = inverseSupport04;
+
+export const overlay = overlay01;
+export const toggleOff = ui04;
+
+export const buttonPrimary = interactive01;
+export const buttonSecondary = interactive02;
+export const buttonTertiary = interactive03;
+export const buttonDangerPrimary = danger01;
+export const buttonDangerSecondary = danger02;
+
+export const backgroundActive = activeUI;
+export const layerActive = activeUI;
+
+export const buttonDangerActive = activeDanger;
+export const buttonPrimaryActive = activePrimary;
+export const buttonSecondaryActive = activeSecondary;
+export const buttonTertiaryActive = activeTertiary;
+
+export const focusInset = inverse01;
+export const focusInverse = inverseFocusUi;
+
+export const backgroundHover = hoverUI;
+export const layerHover = hoverUI;
+export const fieldHover = hoverUI;
+export const backgroundInverseHover = inverseHoverUI;
+export const linkPrimaryHover = hoverPrimaryText;
+export const buttonDangerHover = hoverDanger;
+export const buttonPrimaryHover = hoverPrimary;
+export const buttonSecondaryHover = hoverSecondary;
+export const buttonTertiaryHover = hoverTertiary;
+
+export const backgroundSelected = selectedUI;
+export const backgroundSelectedHover = hoverSelectedUI;
+export const layerSelected = selectedUI;
+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;
+export const buttonDisabled = disabled02;
+export const iconDisabled = disabled02;
+
+export const textOnColorDisabled = disabled03;
+export const iconOnColorDisabled = disabled03;
+export const layerSelectedDisabled = disabled03;
+
+export const skeletonBackground = skeleton01;
+export const skeletonElement = skeleton02;
+
 export {
   // Type
   caption01,
@@ -184,12 +277,14 @@ export {
   spacing10,
   spacing11,
   spacing12,
+  spacing13,
   // Fluid spacing
   fluidSpacing01,
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
   // Layout
+  // Deprecated -- Remove in v11
   layout01,
   layout02,
   layout03,

package/src/g100.js

@@ -136,6 +136,99 @@ export const buttonSeparator = '#161616';
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 
+// New color tokens
+// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+export const background = uiBackground;
+export const layer = ui01;
+export const layerAccent = ui03;
+export const field = field01;
+export const backgroundInverse = inverse02;
+export const backgroundBrand = interactive01;
+export const interactive = interactive04;
+
+export const borderSubtle = ui03;
+export const borderStrong = ui04;
+export const borderInverse = ui05;
+export const borderInteractive = interactive04;
+
+export const textPrimary = text01;
+export const textSecondary = text02;
+export const textPlaceholder = text03;
+export const textHelper = text05;
+export const textOnColor = text04;
+export const textInverse = inverse01;
+
+export const linkPrimary = link01;
+export const linkSecondary = link02;
+export const linkVisited = visitedLink;
+export const linkInverse = inverseLink;
+
+export const iconPrimary = icon01;
+export const iconSecondary = icon02;
+export const iconOnColor = icon03;
+export const iconInverse = inverse01;
+
+export const supportError = support01;
+export const supportSuccess = support02;
+export const supportWarning = support03;
+export const supportInfo = support04;
+export const supportErrorInverse = inverseSupport01;
+export const supportSuccessInverse = inverseSupport02;
+export const supportWarningInverse = inverseSupport03;
+export const supportInfoInverse = inverseSupport04;
+
+export const overlay = overlay01;
+export const toggleOff = ui04;
+
+export const buttonPrimary = interactive01;
+export const buttonSecondary = interactive02;
+export const buttonTertiary = interactive03;
+export const buttonDangerPrimary = danger01;
+export const buttonDangerSecondary = danger02;
+
+export const backgroundActive = activeUI;
+export const layerActive = activeUI;
+
+export const buttonDangerActive = activeDanger;
+export const buttonPrimaryActive = activePrimary;
+export const buttonSecondaryActive = activeSecondary;
+export const buttonTertiaryActive = activeTertiary;
+
+export const focusInset = inverse01;
+export const focusInverse = inverseFocusUi;
+
+export const backgroundHover = hoverUI;
+export const layerHover = hoverUI;
+export const fieldHover = hoverUI;
+export const backgroundInverseHover = inverseHoverUI;
+export const linkPrimaryHover = hoverPrimaryText;
+export const buttonDangerHover = hoverDanger;
+export const buttonPrimaryHover = hoverPrimary;
+export const buttonSecondaryHover = hoverSecondary;
+export const buttonTertiaryHover = hoverTertiary;
+
+export const backgroundSelected = selectedUI;
+export const backgroundSelectedHover = hoverSelectedUI;
+export const layerSelected = selectedUI;
+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;
+export const buttonDisabled = disabled02;
+export const iconDisabled = disabled02;
+
+export const textOnColorDisabled = disabled03;
+export const iconOnColorDisabled = disabled03;
+export const layerSelectedDisabled = disabled03;
+
+export const skeletonBackground = skeleton01;
+export const skeletonElement = skeleton02;
+
 export {
   // Type
   caption01,
@@ -183,12 +276,14 @@ export {
   spacing10,
   spacing11,
   spacing12,
+  spacing13,
   // Fluid spacing
   fluidSpacing01,
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
   // Layout
+  // Deprecated -- Remove in v11
   layout01,
   layout02,
   layout03,

package/src/g90.js

@@ -138,6 +138,99 @@ export const buttonSeparator = '#161616';
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 
+// New color tokens
+// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+export const background = uiBackground;
+export const layer = ui01;
+export const layerAccent = ui03;
+export const field = field01;
+export const backgroundInverse = inverse02;
+export const backgroundBrand = interactive01;
+export const interactive = interactive04;
+
+export const borderSubtle = ui03;
+export const borderStrong = ui04;
+export const borderInverse = ui05;
+export const borderInteractive = interactive04;
+
+export const textPrimary = text01;
+export const textSecondary = text02;
+export const textPlaceholder = text03;
+export const textHelper = text05;
+export const textOnColor = text04;
+export const textInverse = inverse01;
+
+export const linkPrimary = link01;
+export const linkSecondary = link02;
+export const linkVisited = visitedLink;
+export const linkInverse = inverseLink;
+
+export const iconPrimary = icon01;
+export const iconSecondary = icon02;
+export const iconOnColor = icon03;
+export const iconInverse = inverse01;
+
+export const supportError = support01;
+export const supportSuccess = support02;
+export const supportWarning = support03;
+export const supportInfo = support04;
+export const supportErrorInverse = inverseSupport01;
+export const supportSuccessInverse = inverseSupport02;
+export const supportWarningInverse = inverseSupport03;
+export const supportInfoInverse = inverseSupport04;
+
+export const overlay = overlay01;
+export const toggleOff = ui04;
+
+export const buttonPrimary = interactive01;
+export const buttonSecondary = interactive02;
+export const buttonTertiary = interactive03;
+export const buttonDangerPrimary = danger01;
+export const buttonDangerSecondary = danger02;
+
+export const backgroundActive = activeUI;
+export const layerActive = activeUI;
+
+export const buttonDangerActive = activeDanger;
+export const buttonPrimaryActive = activePrimary;
+export const buttonSecondaryActive = activeSecondary;
+export const buttonTertiaryActive = activeTertiary;
+
+export const focusInset = inverse01;
+export const focusInverse = inverseFocusUi;
+
+export const backgroundHover = hoverUI;
+export const layerHover = hoverUI;
+export const fieldHover = hoverUI;
+export const backgroundInverseHover = inverseHoverUI;
+export const linkPrimaryHover = hoverPrimaryText;
+export const buttonDangerHover = hoverDanger;
+export const buttonPrimaryHover = hoverPrimary;
+export const buttonSecondaryHover = hoverSecondary;
+export const buttonTertiaryHover = hoverTertiary;
+
+export const backgroundSelected = selectedUI;
+export const backgroundSelectedHover = hoverSelectedUI;
+export const layerSelected = selectedUI;
+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;
+export const buttonDisabled = disabled02;
+export const iconDisabled = disabled02;
+
+export const textOnColorDisabled = disabled03;
+export const iconOnColorDisabled = disabled03;
+export const layerSelectedDisabled = disabled03;
+
+export const skeletonBackground = skeleton01;
+export const skeletonElement = skeleton02;
+
 export {
   // Type
   caption01,
@@ -185,12 +278,14 @@ export {
   spacing10,
   spacing11,
   spacing12,
+  spacing13,
   // Fluid spacing
   fluidSpacing01,
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
   // Layout
+  // Deprecated -- Remove in v11
   layout01,
   layout02,
   layout03,