@carbon/themes 10.31.0 → 10.33.0

package/scss/modules/_theme.scss

@@ -29,7 +29,7 @@ $-custom-property-prefix: 'cds';
 
 /// @access public
 /// @group @carbon/themes
-@mixin set($active-theme) {
+@mixin set-theme($active-theme) {
   $theme: $active-theme !global;
 }
 

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,146 @@ $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;
+
+/// Carbon's g80 color theme
+/// @type Map
+/// @access public
+/// @group @carbon/themes
+$g80: map.merge(
+  $white,
+  (
+    background: #393939,
+    layer: #525252,
+    layer-accent: #6f6f6f,
+    field: #525252,
+    background-inverse: #f4f4f4,
+    interactive: #78a9ff,
+    border-subtle: #6f6f6f,
+    border-strong: #a8a8a8,
+    border-inverse: #f4f4f4,
+    border-interactive: #4589ff,
+    text-primary: #f4f4f4,
+    text-secondary: #c6c6c6,
+    text-placeholder: #6f6f6f,
+    text-helper: #a8a8a8,
+    text-error: #ffb3b8,
+    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,
+    button-separator: #161616,
+    background-active: #525252,
+    layer-active: #6f6f6f,
+    button-secondary-active: #525252,
+    button-tertiary-active: #c6c6c6,
+    focus: #ffffff,
+    focus-inset: #161616,
+    focus-inverse: #0f62fe,
+    highlight: #0043ce,
+    background-hover: #474747,
+    layer-hover: #636363,
+    field-hover: #636363,
+    background-inverse-hover: #e8e8e8,
+    link-primary-hover: #a6c8ff,
+    button-primary-hover: #0151e4,
+    button-secondary-hover: #5e5e5e,
+    button-tertiary-hover: #ffffff,
+    background-selected: #525252,
+    background-selected-hover: #636363,
+    layer-selected: #6f6f6f,
+    layer-selected-hover: #616161,
+    layer-selected-inverse: #f4f4f4,
+    border-subtle-selected: #8d8d8d,
+    layer-disabled: #525252,
+    field-disabled: #525252,
+    border-disabled: #525252,
+    text-disabled: #8d8d8d,
+    button-disabled: #8d8d8d,
+    icon-disabled: #8d8d8d,
+    text-on-color-disabled: #c6c6c6,
+    icon-on-color-disabled: #c6c6c6,
+    layer-selected-disabled: #c6c6c6,
+    skeleton-background: #474747,
+    skeleton-element: #6f6f6f,
+    interactive-02: #6f6f6f,
+    interactive-03: #ffffff,
+    interactive-04: #78a9ff,
+    ui-background: #393939,
+    ui-01: #525252,
+    ui-02: #525252,
+    ui-03: #6f6f6f,
+    ui-04: #a8a8a8,
+    ui-05: #f4f4f4,
+    text-01: #f4f4f4,
+    text-02: #c6c6c6,
+    text-03: #6f6f6f,
+    text-05: #a8a8a8,
+    icon-01: #f4f4f4,
+    icon-02: #c6c6c6,
+    link-01: #78a9ff,
+    link-02: #a6c8ff,
+    inverse-link: #0f62fe,
+    field-01: #525252,
+    field-02: #6f6f6f,
+    inverse-01: #161616,
+    inverse-02: #f4f4f4,
+    support-01: #ff8389,
+    support-02: #42be65,
+    support-04: #4589ff,
+    inverse-support-01: #da1e28,
+    inverse-support-02: #24a148,
+    inverse-support-04: #0f62fe,
+    overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #ff8389,
+    inverse-focus-ui: #0f62fe,
+    hover-primary: #0151e4,
+    hover-primary-text: #a6c8ff,
+    hover-secondary: #5e5e5e,
+    active-secondary: #525252,
+    hover-tertiary: #ffffff,
+    active-tertiary: #c6c6c6,
+    hover-ui: #474747,
+    hover-light-ui: #5e5e5e,
+    active-ui: #525252,
+    active-light-ui: #8d8d8d,
+    selected-ui: #525252,
+    selected-light-ui: #8d8d8d,
+    inverse-hover-ui: #e8e8e8,
+    hover-selected-ui: #616161,
+    hover-row: #636363,
+    visited-link: #be95ff,
+    disabled-01: #525252,
+    disabled-02: #8d8d8d,
+    disabled-03: #c6c6c6,
+    decorative-01: #6f6f6f,
+    skeleton-01: #474747,
+    skeleton-02: #6f6f6f,
+    brand-02: #6f6f6f,
+    brand-03: #ffffff,
+    active-01: #525252,
+    hover-field: #474747,
   )
 ) !default;
 
@@ -170,6 +383,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 +513,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,

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,