diff --git a/packages/design-tokens/src/js/themes/theme-light-default/colors.ts b/packages/design-tokens/src/js/themes/theme-light-default/colors.ts index 53d328d810..3241c0db6a 100644 --- a/packages/design-tokens/src/js/themes/theme-light-default/colors.ts +++ b/packages/design-tokens/src/js/themes/theme-light-default/colors.ts @@ -1,2 +1,174 @@ /* This file was generated by Supernova, don't change manually */ +export const backgroundBackdrop = '#1a1b1b80'; +export const backgroundInteractiveStateActive = '#f1edff'; +export const backgroundInteractiveStateDefault = '#fff0'; +export const backgroundInteractiveStateHover = '#f8f6ff'; + +export const backgroundPrimary = '#fff'; +export const backgroundSecondary = '#f2f2f2'; +export const backgroundTertiary = '#f1edff'; + +export const borderBasic = '#d9d9d9'; +export const borderFocus = '#7847ff'; + +export const borderInteractiveStateActive = '#a5a5a5'; +export const borderInteractiveStateDefault = '#bfbfbf'; +export const borderInteractiveStateHover = '#b2b2b2'; +export const borderInteractiveStateSelected = '#7847ff'; + +export const componentButtonPlainBorder = '#fff0'; +export const componentButtonPlainContent = '#6039cc'; +export const componentButtonPlainStateActive = '#e4daff'; +export const componentButtonPlainStateDefault = '#fff0'; +export const componentButtonPlainStateHover = '#f1edff'; + +export const componentButtonPrimaryBorder = '#4e2ea6'; +export const componentButtonPrimaryContent = '#fff'; +export const componentButtonPrimaryStateActive = '#6039cc'; +export const componentButtonPrimaryStateDefault = '#7847ff'; +export const componentButtonPrimaryStateHover = '#6c40e5'; + +export const componentButtonSecondaryBorder = '#7847ff'; +export const componentButtonSecondaryContent = '#6039cc'; +export const componentButtonSecondaryStateActive = '#e4daff'; +export const componentButtonSecondaryStateDefault = '#fff'; +export const componentButtonSecondaryStateHover = '#f1edff'; + +export const componentButtonTertiaryBorder = '#e5e5e5'; +export const componentButtonTertiaryContent = '#202020'; +export const componentButtonTertiaryStateActive = '#d9d9d9'; +export const componentButtonTertiaryStateDefault = '#f2f2f2'; +export const componentButtonTertiaryStateHover = '#e5e5e5'; + +export const componentHeaderBackground = '#fff'; +export const componentHeaderItemBackgroundStateActive = '#f1edff'; +export const componentHeaderItemBackgroundStateDefault = '#fff0'; +export const componentHeaderItemBackgroundStateHover = '#f8f6ff'; +export const componentHeaderItemBackgroundStateSelected = '#fff0'; +export const componentHeaderItemStateActive = '#4e2ea6'; +export const componentHeaderItemStateDefault = '#404040'; +export const componentHeaderItemStateHover = '#6039cc'; +export const componentHeaderItemStateSelected = '#6039cc'; +export const componentHeaderStripeStateSelected = '#ffbe00'; +export const componentHeaderStripeStateUnselected = '#e4daff'; + +export const componentToggleSelectedBorder = '#327c3f'; +export const componentToggleSelectedContent = '#fff'; +export const componentToggleSelectedStateActive = '#3e9b4f'; +export const componentToggleSelectedStateDefault = '#327c3f'; +export const componentToggleSelectedStateHover = '#388b47'; +export const componentToggleUnselectedBorder = '#a5a5a5'; +export const componentToggleUnselectedContent = '#404040'; +export const componentToggleUnselectedStateActive = '#f2f2f2'; +export const componentToggleUnselectedStateDefault = '#fff'; +export const componentToggleUnselectedStateHover = '#f9f9f9'; + +export const disabledBackground = '#f9f9f9'; +export const disabledBorder = '#e5e5e5'; +export const disabledContent = '#a5a5a5'; +export const disabledForeground = '#d9d9d9'; + +export const emotionDangerBackgroundBasic = '#b60000'; +export const emotionDangerBackgroundSubtle = '#fef2f2'; +export const emotionDangerBorderBasic = '#b60000'; +export const emotionDangerBorderSubtle = '#f18080'; +export const emotionDangerContentBasic = '#940000'; +export const emotionDangerContentSubtle = '#fff'; +export const emotionDangerStateActive = '#e40000'; +export const emotionDangerStateDefault = '#b60000'; +export const emotionDangerStateHover = '#cd0000'; + +export const emotionInformativeBackgroundBasic = '#0052ad'; +export const emotionInformativeBackgroundSubtle = '#f2f7fd'; +export const emotionInformativeBorderBasic = '#0052ad'; +export const emotionInformativeBorderSubtle = '#80b2eb'; +export const emotionInformativeContentBasic = '#00428c'; +export const emotionInformativeContentSubtle = '#fff'; +export const emotionInformativeStateActive = '#0066d8'; +export const emotionInformativeStateDefault = '#0052ad'; +export const emotionInformativeStateHover = '#005cc2'; + +export const emotionSuccessBackgroundBasic = '#327c3f'; +export const emotionSuccessBackgroundSubtle = '#f5faf6'; +export const emotionSuccessBorderBasic = '#327c3f'; +export const emotionSuccessBorderSubtle = '#9ecda7'; +export const emotionSuccessContentBasic = '#286533'; +export const emotionSuccessContentSubtle = '#fff'; +export const emotionSuccessStateActive = '#3e9b4f'; +export const emotionSuccessStateDefault = '#327c3f'; +export const emotionSuccessStateHover = '#388b47'; + +export const emotionWarningBackgroundBasic = '#c26400'; +export const emotionWarningBackgroundSubtle = '#fef8f2'; +export const emotionWarningBorderBasic = '#c26400'; +export const emotionWarningBorderSubtle = '#f9be80'; +export const emotionWarningContentBasic = '#9d5100'; +export const emotionWarningContentSubtle = '#fff'; +export const emotionWarningStateActive = '#f27d00'; +export const emotionWarningStateDefault = '#c26400'; +export const emotionWarningStateHover = '#da7100'; + +export const focusFocusRingColor01 = '#d2c2ffb2'; + +export const formFieldDanger = '#b60000'; + +export const formFieldFilledBackgroundStateActive = '#fff'; +export const formFieldFilledBackgroundStateDefault = '#fff'; +export const formFieldFilledBackgroundStateHover = '#f9f9f9'; +export const formFieldFilledBorderStateActive = '#7f7f7f'; +export const formFieldFilledBorderStateDefault = '#a5a5a5'; +export const formFieldFilledBorderStateHover = '#999'; +export const formFieldFilledBorderStateSelected = '#7847ff'; +export const formFieldFilledContent = '#202020'; +export const formFieldFilledPlaceholder = '#666'; + +export const formFieldHelperText = '#7f7f7f'; +export const formFieldLabel = '#202020'; +export const formFieldSuccess = '#327c3f'; +export const formFieldWarning = '#c26400'; + +export const gradientBasicOverlayColor01 = '#fff'; +export const gradientBasicOverlayColor02 = '#fff0'; + +export const linkPrimaryStateActive = '#3c2480'; +export const linkPrimaryStateDefault = '#6039cc'; +export const linkPrimaryStateHover = '#4e2ea6'; + +export const linkSecondaryStateActive = '#3c2480'; +export const linkSecondaryStateDefault = '#535353'; +export const linkSecondaryStateHover = '#4e2ea6'; + +export const linkStateVisited = '#3c2480'; + +export const linkTertiaryStateActive = '#3c2480'; +export const linkTertiaryStateDefault = '#7f7f7f'; +export const linkTertiaryStateHover = '#4e2ea6'; + +export const neutralBackgroundBasic = '#202020'; +export const neutralBackgroundSubtle = '#f2f2f2'; +export const neutralBorderBasic = '#202020'; +export const neutralBorderSubtle = '#bfbfbf'; +export const neutralContentBasic = '#202020'; +export const neutralContentSubtle = '#fff'; +export const neutralStateActive = '#535353'; +export const neutralStateDefault = '#202020'; +export const neutralStateHover = '#404040'; + +export const selectedContentBasic = '#4e2ea6'; +export const selectedContentSubtle = '#fff'; +export const selectedStateActive = '#6039cc'; +export const selectedStateDefault = '#7847ff'; +export const selectedStateHover = '#6c40e5'; + +export const shadowShadow100Color01 = '#00000026'; + +export const shadowShadow200Color01 = '#0003'; + +export const shadowShadow300Color01 = '#00000040'; + +export const shadowShadow400Color01 = '#00000040'; + +export const textPrimary = '#202020'; +export const textSecondary = '#535353'; +export const textTertiary = '#7f7f7f'; diff --git a/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts b/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts index 53d328d810..4aa065a9f7 100644 --- a/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts +++ b/packages/design-tokens/src/js/themes/theme-light-on-brand/colors.ts @@ -1,2 +1,174 @@ /* This file was generated by Supernova, don't change manually */ +export const backgroundBackdrop = '#1a1b1b80'; +export const backgroundInteractiveStateActive = '#ffffff1a'; +export const backgroundInteractiveStateDefault = '#fff0'; +export const backgroundInteractiveStateHover = '#ffffff0d'; + +export const backgroundPrimary = '#6039cc'; +export const backgroundSecondary = '#3c2480'; +export const backgroundTertiary = '#1e1240'; + +export const borderBasic = '#a07eff'; +export const borderFocus = '#1e1240'; + +export const borderInteractiveStateActive = '#bba3ff'; +export const borderInteractiveStateDefault = '#a07eff'; +export const borderInteractiveStateHover = '#ae91ff'; +export const borderInteractiveStateSelected = '#ffbe00'; + +export const componentButtonPlainBorder = '#fff0'; +export const componentButtonPlainContent = '#fff'; +export const componentButtonPlainStateActive = '#ffffff26'; +export const componentButtonPlainStateDefault = '#fff0'; +export const componentButtonPlainStateHover = '#ffffff1a'; + +export const componentButtonPrimaryBorder = '#1e1240'; +export const componentButtonPrimaryContent = '#3c2480'; +export const componentButtonPrimaryStateActive = '#e4daff'; +export const componentButtonPrimaryStateDefault = '#fff'; +export const componentButtonPrimaryStateHover = '#f1edff'; + +export const componentButtonSecondaryBorder = '#f8f6ff'; +export const componentButtonSecondaryContent = '#fff'; +export const componentButtonSecondaryStateActive = '#1a1b1b26'; +export const componentButtonSecondaryStateDefault = '#1a1b1b00'; +export const componentButtonSecondaryStateHover = '#1a1b1b1a'; + +export const componentButtonTertiaryBorder = '#1a1b1b00'; +export const componentButtonTertiaryContent = '#fff'; +export const componentButtonTertiaryStateActive = '#1a1b1b4d'; +export const componentButtonTertiaryStateDefault = '#1a1b1b33'; +export const componentButtonTertiaryStateHover = '#1a1b1b40'; + +export const componentHeaderBackground = '#6039cc'; +export const componentHeaderItemBackgroundStateActive = '#1a1b1b26'; +export const componentHeaderItemBackgroundStateDefault = '#fff0'; +export const componentHeaderItemBackgroundStateHover = '#1a1b1b1a'; +export const componentHeaderItemBackgroundStateSelected = '#fff0'; +export const componentHeaderItemStateActive = '#e5e5e5'; +export const componentHeaderItemStateDefault = '#fff'; +export const componentHeaderItemStateHover = '#f2f2f2'; +export const componentHeaderItemStateSelected = '#ffbe00'; +export const componentHeaderStripeStateSelected = '#fff'; +export const componentHeaderStripeStateUnselected = '#ffffff40'; + +export const componentToggleSelectedBorder = '#a07eff'; +export const componentToggleSelectedContent = '#fff'; +export const componentToggleSelectedStateActive = '#3e9b4f'; +export const componentToggleSelectedStateDefault = '#327c3f'; +export const componentToggleSelectedStateHover = '#388b47'; +export const componentToggleUnselectedBorder = '#a07eff'; +export const componentToggleUnselectedContent = '#4e2ea6'; +export const componentToggleUnselectedStateActive = '#e4daff'; +export const componentToggleUnselectedStateDefault = '#fff'; +export const componentToggleUnselectedStateHover = '#f1edff'; + +export const disabledBackground = '#ffffff1a'; +export const disabledBorder = '#fff3'; +export const disabledContent = '#ffffff80'; +export const disabledForeground = '#fff3'; + +export const emotionDangerBackgroundBasic = '#e40000'; +export const emotionDangerBackgroundSubtle = '#fce5e5'; +export const emotionDangerBorderBasic = '#e93333'; +export const emotionDangerBorderSubtle = '#ef6666'; +export const emotionDangerContentBasic = '#720000'; +export const emotionDangerContentSubtle = '#fff'; +export const emotionDangerStateActive = '#ec4d4d'; +export const emotionDangerStateDefault = '#e40000'; +export const emotionDangerStateHover = '#e93333'; + +export const emotionInformativeBackgroundBasic = '#0066d8'; +export const emotionInformativeBackgroundSubtle = '#e5f0fb'; +export const emotionInformativeBorderBasic = '#3385e0'; +export const emotionInformativeBorderSubtle = '#66a3e8'; +export const emotionInformativeContentBasic = '#00336c'; +export const emotionInformativeContentSubtle = '#fff'; +export const emotionInformativeStateActive = '#4d94e4'; +export const emotionInformativeStateDefault = '#0066d8'; +export const emotionInformativeStateHover = '#3385e0'; + +export const emotionSuccessBackgroundBasic = '#3e9b4f'; +export const emotionSuccessBackgroundSubtle = '#ecf5ed'; +export const emotionSuccessBorderBasic = '#65af72'; +export const emotionSuccessBorderSubtle = '#8bc395'; +export const emotionSuccessContentBasic = '#1f4e28'; +export const emotionSuccessContentSubtle = '#fff'; +export const emotionSuccessStateActive = '#78b984'; +export const emotionSuccessStateDefault = '#3e9b4f'; +export const emotionSuccessStateHover = '#65af72'; + +export const emotionWarningBackgroundBasic = '#f27d00'; +export const emotionWarningBackgroundSubtle = '#fef2e5'; +export const emotionWarningBorderBasic = '#f59733'; +export const emotionWarningBorderSubtle = '#f7b166'; +export const emotionWarningContentBasic = '#793f00'; +export const emotionWarningContentSubtle = '#fff'; +export const emotionWarningStateActive = '#f6a44d'; +export const emotionWarningStateDefault = '#f27d00'; +export const emotionWarningStateHover = '#f59733'; + +export const focusFocusRingColor01 = '#d2c2ffb2'; + +export const formFieldDanger = '#ec4d4d'; + +export const formFieldFilledBackgroundStateActive = '#fff'; +export const formFieldFilledBackgroundStateDefault = '#f9f9f9'; +export const formFieldFilledBackgroundStateHover = '#f1edff'; +export const formFieldFilledBorderStateActive = '#936cff'; +export const formFieldFilledBorderStateDefault = '#ae91ff'; +export const formFieldFilledBorderStateHover = '#a07eff'; +export const formFieldFilledBorderStateSelected = '#ffbe00'; +export const formFieldFilledContent = '#202020'; +export const formFieldFilledPlaceholder = '#666'; + +export const formFieldHelperText = '#c9b5ff'; +export const formFieldLabel = '#fff'; +export const formFieldSuccess = '#78b984'; +export const formFieldWarning = '#f6a44d'; + +export const gradientBasicOverlayColor01 = '#606060'; +export const gradientBasicOverlayColor02 = '#60606000'; + +export const linkPrimaryStateActive = '#e5e5e5'; +export const linkPrimaryStateDefault = '#fff'; +export const linkPrimaryStateHover = '#f2f2f2'; + +export const linkSecondaryStateActive = '#e5e5e5'; +export const linkSecondaryStateDefault = '#d6c8ff'; +export const linkSecondaryStateHover = '#f2f2f2'; + +export const linkStateVisited = '#ffbe00'; + +export const linkTertiaryStateActive = '#e5e5e5'; +export const linkTertiaryStateDefault = '#bba3ff'; +export const linkTertiaryStateHover = '#f2f2f2'; + +export const neutralBackgroundBasic = '#202020'; +export const neutralBackgroundSubtle = '#f2f2f2'; +export const neutralBorderBasic = '#202020'; +export const neutralBorderSubtle = '#bfbfbf'; +export const neutralContentBasic = '#202020'; +export const neutralContentSubtle = '#fff'; +export const neutralStateActive = '#535353'; +export const neutralStateDefault = '#202020'; +export const neutralStateHover = '#404040'; + +export const selectedContentBasic = '#fff'; +export const selectedContentSubtle = '#3c2480'; +export const selectedStateActive = '#ffd24d'; +export const selectedStateDefault = '#ffbe00'; +export const selectedStateHover = '#ffcb33'; + +export const shadowShadow100Color01 = '#00000026'; + +export const shadowShadow200Color01 = '#0003'; + +export const shadowShadow300Color01 = '#00000040'; + +export const shadowShadow400Color01 = '#00000040'; + +export const textPrimary = '#f9f9f9'; +export const textSecondary = '#d9d9d9'; +export const textTertiary = '#b2b2b2'; diff --git a/packages/design-tokens/src/scss/themes/_color-tokens.scss b/packages/design-tokens/src/scss/themes/_color-tokens.scss index 53d328d810..776e985669 100644 --- a/packages/design-tokens/src/scss/themes/_color-tokens.scss +++ b/packages/design-tokens/src/scss/themes/_color-tokens.scss @@ -1,2 +1,417 @@ /* This file was generated by Supernova, don't change manually */ +$background-backdrop: var(--spirit-color-background-backdrop); +$background-interactive-state-active: var(--spirit-color-background-interactive-state-active); +$background-interactive-state-default: var(--spirit-color-background-interactive-state-default); +$background-interactive-state-hover: var(--spirit-color-background-interactive-state-hover); + +$background-primary: var(--spirit-color-background-primary); +$background-secondary: var(--spirit-color-background-secondary); +$background-tertiary: var(--spirit-color-background-tertiary); + +$border-basic: var(--spirit-color-border-basic); +$border-focus: var(--spirit-color-border-focus); + +$border-interactive-state-active: var(--spirit-color-border-interactive-state-active); +$border-interactive-state-default: var(--spirit-color-border-interactive-state-default); +$border-interactive-state-hover: var(--spirit-color-border-interactive-state-hover); +$border-interactive-state-selected: var(--spirit-color-border-interactive-state-selected); + +$component-button-plain-border: var(--spirit-color-component-button-plain-border); +$component-button-plain-content: var(--spirit-color-component-button-plain-content); +$component-button-plain-state-active: var(--spirit-color-component-button-plain-state-active); +$component-button-plain-state-default: var(--spirit-color-component-button-plain-state-default); +$component-button-plain-state-hover: var(--spirit-color-component-button-plain-state-hover); + +$component-button-primary-border: var(--spirit-color-component-button-primary-border); +$component-button-primary-content: var(--spirit-color-component-button-primary-content); +$component-button-primary-state-active: var(--spirit-color-component-button-primary-state-active); +$component-button-primary-state-default: var(--spirit-color-component-button-primary-state-default); +$component-button-primary-state-hover: var(--spirit-color-component-button-primary-state-hover); + +$component-button-secondary-border: var(--spirit-color-component-button-secondary-border); +$component-button-secondary-content: var(--spirit-color-component-button-secondary-content); +$component-button-secondary-state-active: var(--spirit-color-component-button-secondary-state-active); +$component-button-secondary-state-default: var(--spirit-color-component-button-secondary-state-default); +$component-button-secondary-state-hover: var(--spirit-color-component-button-secondary-state-hover); + +$component-button-tertiary-border: var(--spirit-color-component-button-tertiary-border); +$component-button-tertiary-content: var(--spirit-color-component-button-tertiary-content); +$component-button-tertiary-state-active: var(--spirit-color-component-button-tertiary-state-active); +$component-button-tertiary-state-default: var(--spirit-color-component-button-tertiary-state-default); +$component-button-tertiary-state-hover: var(--spirit-color-component-button-tertiary-state-hover); + +$component-header-background: var(--spirit-color-component-header-background); +$component-header-item-background-state-active: var(--spirit-color-component-header-item-background-state-active); +$component-header-item-background-state-default: var(--spirit-color-component-header-item-background-state-default); +$component-header-item-background-state-hover: var(--spirit-color-component-header-item-background-state-hover); +$component-header-item-background-state-selected: var(--spirit-color-component-header-item-background-state-selected); +$component-header-item-state-active: var(--spirit-color-component-header-item-state-active); +$component-header-item-state-default: var(--spirit-color-component-header-item-state-default); +$component-header-item-state-hover: var(--spirit-color-component-header-item-state-hover); +$component-header-item-state-selected: var(--spirit-color-component-header-item-state-selected); +$component-header-stripe-state-selected: var(--spirit-color-component-header-stripe-state-selected); +$component-header-stripe-state-unselected: var(--spirit-color-component-header-stripe-state-unselected); + +$component-toggle-selected-border: var(--spirit-color-component-toggle-selected-border); +$component-toggle-selected-content: var(--spirit-color-component-toggle-selected-content); +$component-toggle-selected-state-active: var(--spirit-color-component-toggle-selected-state-active); +$component-toggle-selected-state-default: var(--spirit-color-component-toggle-selected-state-default); +$component-toggle-selected-state-hover: var(--spirit-color-component-toggle-selected-state-hover); +$component-toggle-unselected-border: var(--spirit-color-component-toggle-unselected-border); +$component-toggle-unselected-content: var(--spirit-color-component-toggle-unselected-content); +$component-toggle-unselected-state-active: var(--spirit-color-component-toggle-unselected-state-active); +$component-toggle-unselected-state-default: var(--spirit-color-component-toggle-unselected-state-default); +$component-toggle-unselected-state-hover: var(--spirit-color-component-toggle-unselected-state-hover); + +$disabled-background: var(--spirit-color-disabled-background); +$disabled-border: var(--spirit-color-disabled-border); +$disabled-content: var(--spirit-color-disabled-content); +$disabled-foreground: var(--spirit-color-disabled-foreground); + +$emotion-danger-background-basic: var(--spirit-color-emotion-danger-background-basic); +$emotion-danger-background-subtle: var(--spirit-color-emotion-danger-background-subtle); +$emotion-danger-border-basic: var(--spirit-color-emotion-danger-border-basic); +$emotion-danger-border-subtle: var(--spirit-color-emotion-danger-border-subtle); +$emotion-danger-content-basic: var(--spirit-color-emotion-danger-content-basic); +$emotion-danger-content-subtle: var(--spirit-color-emotion-danger-content-subtle); +$emotion-danger-state-active: var(--spirit-color-emotion-danger-state-active); +$emotion-danger-state-default: var(--spirit-color-emotion-danger-state-default); +$emotion-danger-state-hover: var(--spirit-color-emotion-danger-state-hover); + +$emotion-informative-background-basic: var(--spirit-color-emotion-informative-background-basic); +$emotion-informative-background-subtle: var(--spirit-color-emotion-informative-background-subtle); +$emotion-informative-border-basic: var(--spirit-color-emotion-informative-border-basic); +$emotion-informative-border-subtle: var(--spirit-color-emotion-informative-border-subtle); +$emotion-informative-content-basic: var(--spirit-color-emotion-informative-content-basic); +$emotion-informative-content-subtle: var(--spirit-color-emotion-informative-content-subtle); +$emotion-informative-state-active: var(--spirit-color-emotion-informative-state-active); +$emotion-informative-state-default: var(--spirit-color-emotion-informative-state-default); +$emotion-informative-state-hover: var(--spirit-color-emotion-informative-state-hover); + +$emotion-success-background-basic: var(--spirit-color-emotion-success-background-basic); +$emotion-success-background-subtle: var(--spirit-color-emotion-success-background-subtle); +$emotion-success-border-basic: var(--spirit-color-emotion-success-border-basic); +$emotion-success-border-subtle: var(--spirit-color-emotion-success-border-subtle); +$emotion-success-content-basic: var(--spirit-color-emotion-success-content-basic); +$emotion-success-content-subtle: var(--spirit-color-emotion-success-content-subtle); +$emotion-success-state-active: var(--spirit-color-emotion-success-state-active); +$emotion-success-state-default: var(--spirit-color-emotion-success-state-default); +$emotion-success-state-hover: var(--spirit-color-emotion-success-state-hover); + +$emotion-warning-background-basic: var(--spirit-color-emotion-warning-background-basic); +$emotion-warning-background-subtle: var(--spirit-color-emotion-warning-background-subtle); +$emotion-warning-border-basic: var(--spirit-color-emotion-warning-border-basic); +$emotion-warning-border-subtle: var(--spirit-color-emotion-warning-border-subtle); +$emotion-warning-content-basic: var(--spirit-color-emotion-warning-content-basic); +$emotion-warning-content-subtle: var(--spirit-color-emotion-warning-content-subtle); +$emotion-warning-state-active: var(--spirit-color-emotion-warning-state-active); +$emotion-warning-state-default: var(--spirit-color-emotion-warning-state-default); +$emotion-warning-state-hover: var(--spirit-color-emotion-warning-state-hover); + +$focus-focus-ring-color-01: var(--spirit-color-focus-focus-ring-color-01); + +$form-field-danger: var(--spirit-color-form-field-danger); + +$form-field-filled-background-state-active: var(--spirit-color-form-field-filled-background-state-active); +$form-field-filled-background-state-default: var(--spirit-color-form-field-filled-background-state-default); +$form-field-filled-background-state-hover: var(--spirit-color-form-field-filled-background-state-hover); +$form-field-filled-border-state-active: var(--spirit-color-form-field-filled-border-state-active); +$form-field-filled-border-state-default: var(--spirit-color-form-field-filled-border-state-default); +$form-field-filled-border-state-hover: var(--spirit-color-form-field-filled-border-state-hover); +$form-field-filled-border-state-selected: var(--spirit-color-form-field-filled-border-state-selected); +$form-field-filled-content: var(--spirit-color-form-field-filled-content); +$form-field-filled-placeholder: var(--spirit-color-form-field-filled-placeholder); + +$form-field-helper-text: var(--spirit-color-form-field-helper-text); +$form-field-label: var(--spirit-color-form-field-label); +$form-field-success: var(--spirit-color-form-field-success); +$form-field-warning: var(--spirit-color-form-field-warning); + +$gradient-basic-overlay-color-01: var(--spirit-color-gradient-basic-overlay-color-01); +$gradient-basic-overlay-color-02: var(--spirit-color-gradient-basic-overlay-color-02); + +$link-primary-state-active: var(--spirit-color-link-primary-state-active); +$link-primary-state-default: var(--spirit-color-link-primary-state-default); +$link-primary-state-hover: var(--spirit-color-link-primary-state-hover); + +$link-secondary-state-active: var(--spirit-color-link-secondary-state-active); +$link-secondary-state-default: var(--spirit-color-link-secondary-state-default); +$link-secondary-state-hover: var(--spirit-color-link-secondary-state-hover); + +$link-state-visited: var(--spirit-color-link-state-visited); + +$link-tertiary-state-active: var(--spirit-color-link-tertiary-state-active); +$link-tertiary-state-default: var(--spirit-color-link-tertiary-state-default); +$link-tertiary-state-hover: var(--spirit-color-link-tertiary-state-hover); + +$neutral-background-basic: var(--spirit-color-neutral-background-basic); +$neutral-background-subtle: var(--spirit-color-neutral-background-subtle); +$neutral-border-basic: var(--spirit-color-neutral-border-basic); +$neutral-border-subtle: var(--spirit-color-neutral-border-subtle); +$neutral-content-basic: var(--spirit-color-neutral-content-basic); +$neutral-content-subtle: var(--spirit-color-neutral-content-subtle); +$neutral-state-active: var(--spirit-color-neutral-state-active); +$neutral-state-default: var(--spirit-color-neutral-state-default); +$neutral-state-hover: var(--spirit-color-neutral-state-hover); + +$selected-content-basic: var(--spirit-color-selected-content-basic); +$selected-content-subtle: var(--spirit-color-selected-content-subtle); +$selected-state-active: var(--spirit-color-selected-state-active); +$selected-state-default: var(--spirit-color-selected-state-default); +$selected-state-hover: var(--spirit-color-selected-state-hover); + +$shadow-shadow-100-color-01: var(--spirit-color-shadow-shadow-100-color-01); + +$shadow-shadow-200-color-01: var(--spirit-color-shadow-shadow-200-color-01); + +$shadow-shadow-300-color-01: var(--spirit-color-shadow-shadow-300-color-01); + +$shadow-shadow-400-color-01: var(--spirit-color-shadow-shadow-400-color-01); + +$text-primary: var(--spirit-color-text-primary); +$text-secondary: var(--spirit-color-text-secondary); +$text-tertiary: var(--spirit-color-text-tertiary); + +$background-colors: ( + backdrop: $background-backdrop, + interactive: ( + state-active: $background-interactive-state-active, + state-default: $background-interactive-state-default, + state-hover: $background-interactive-state-hover, + ), + primary: $background-primary, + secondary: $background-secondary, + tertiary: $background-tertiary, +) !default; + +$border-colors: ( + basic: $border-basic, + focus: $border-focus, + interactive: ( + state-active: $border-interactive-state-active, + state-default: $border-interactive-state-default, + state-hover: $border-interactive-state-hover, + state-selected: $border-interactive-state-selected, + ), +) !default; + +$component-colors: ( + button: ( + plain: ( + border: $component-button-plain-border, + content: $component-button-plain-content, + state-active: $component-button-plain-state-active, + state-default: $component-button-plain-state-default, + state-hover: $component-button-plain-state-hover, + ), + primary: ( + border: $component-button-primary-border, + content: $component-button-primary-content, + state-active: $component-button-primary-state-active, + state-default: $component-button-primary-state-default, + state-hover: $component-button-primary-state-hover, + ), + secondary: ( + border: $component-button-secondary-border, + content: $component-button-secondary-content, + state-active: $component-button-secondary-state-active, + state-default: $component-button-secondary-state-default, + state-hover: $component-button-secondary-state-hover, + ), + tertiary: ( + border: $component-button-tertiary-border, + content: $component-button-tertiary-content, + state-active: $component-button-tertiary-state-active, + state-default: $component-button-tertiary-state-default, + state-hover: $component-button-tertiary-state-hover, + ), + ), + header: ( + background: $component-header-background, + item-background-state-active: $component-header-item-background-state-active, + item-background-state-default: $component-header-item-background-state-default, + item-background-state-hover: $component-header-item-background-state-hover, + item-background-state-selected: $component-header-item-background-state-selected, + item-state-active: $component-header-item-state-active, + item-state-default: $component-header-item-state-default, + item-state-hover: $component-header-item-state-hover, + item-state-selected: $component-header-item-state-selected, + stripe-state-selected: $component-header-stripe-state-selected, + stripe-state-unselected: $component-header-stripe-state-unselected, + ), + toggle: ( + selected-border: $component-toggle-selected-border, + selected-content: $component-toggle-selected-content, + selected-state-active: $component-toggle-selected-state-active, + selected-state-default: $component-toggle-selected-state-default, + selected-state-hover: $component-toggle-selected-state-hover, + unselected-border: $component-toggle-unselected-border, + unselected-content: $component-toggle-unselected-content, + unselected-state-active: $component-toggle-unselected-state-active, + unselected-state-default: $component-toggle-unselected-state-default, + unselected-state-hover: $component-toggle-unselected-state-hover, + ), +) !default; + +$disabled-colors: ( + background: $disabled-background, + border: $disabled-border, + content: $disabled-content, + foreground: $disabled-foreground, +) !default; + +$emotion-colors: ( + danger: ( + background-basic: $emotion-danger-background-basic, + background-subtle: $emotion-danger-background-subtle, + border-basic: $emotion-danger-border-basic, + border-subtle: $emotion-danger-border-subtle, + content-basic: $emotion-danger-content-basic, + content-subtle: $emotion-danger-content-subtle, + state-active: $emotion-danger-state-active, + state-default: $emotion-danger-state-default, + state-hover: $emotion-danger-state-hover, + ), + informative: ( + background-basic: $emotion-informative-background-basic, + background-subtle: $emotion-informative-background-subtle, + border-basic: $emotion-informative-border-basic, + border-subtle: $emotion-informative-border-subtle, + content-basic: $emotion-informative-content-basic, + content-subtle: $emotion-informative-content-subtle, + state-active: $emotion-informative-state-active, + state-default: $emotion-informative-state-default, + state-hover: $emotion-informative-state-hover, + ), + success: ( + background-basic: $emotion-success-background-basic, + background-subtle: $emotion-success-background-subtle, + border-basic: $emotion-success-border-basic, + border-subtle: $emotion-success-border-subtle, + content-basic: $emotion-success-content-basic, + content-subtle: $emotion-success-content-subtle, + state-active: $emotion-success-state-active, + state-default: $emotion-success-state-default, + state-hover: $emotion-success-state-hover, + ), + warning: ( + background-basic: $emotion-warning-background-basic, + background-subtle: $emotion-warning-background-subtle, + border-basic: $emotion-warning-border-basic, + border-subtle: $emotion-warning-border-subtle, + content-basic: $emotion-warning-content-basic, + content-subtle: $emotion-warning-content-subtle, + state-active: $emotion-warning-state-active, + state-default: $emotion-warning-state-default, + state-hover: $emotion-warning-state-hover, + ), +) !default; + +$focus-colors: ( + focus-ring: ( + color-01: $focus-focus-ring-color-01, + ), +) !default; + +$form-field-colors: ( + danger: $form-field-danger, + filled: ( + background-state-active: $form-field-filled-background-state-active, + background-state-default: $form-field-filled-background-state-default, + background-state-hover: $form-field-filled-background-state-hover, + border-state-active: $form-field-filled-border-state-active, + border-state-default: $form-field-filled-border-state-default, + border-state-hover: $form-field-filled-border-state-hover, + border-state-selected: $form-field-filled-border-state-selected, + content: $form-field-filled-content, + placeholder: $form-field-filled-placeholder, + ), + helper-text: $form-field-helper-text, + label: $form-field-label, + success: $form-field-success, + warning: $form-field-warning, +) !default; + +$gradient-colors: ( + basic-overlay: ( + color-01: $gradient-basic-overlay-color-01, + color-02: $gradient-basic-overlay-color-02, + ), +) !default; + +$link-colors: ( + primary: ( + state-active: $link-primary-state-active, + state-default: $link-primary-state-default, + state-hover: $link-primary-state-hover, + ), + secondary: ( + state-active: $link-secondary-state-active, + state-default: $link-secondary-state-default, + state-hover: $link-secondary-state-hover, + ), + state-visited: $link-state-visited, + tertiary: ( + state-active: $link-tertiary-state-active, + state-default: $link-tertiary-state-default, + state-hover: $link-tertiary-state-hover, + ), +) !default; + +$neutral-colors: ( + background-basic: $neutral-background-basic, + background-subtle: $neutral-background-subtle, + border-basic: $neutral-border-basic, + border-subtle: $neutral-border-subtle, + content-basic: $neutral-content-basic, + content-subtle: $neutral-content-subtle, + state-active: $neutral-state-active, + state-default: $neutral-state-default, + state-hover: $neutral-state-hover, +) !default; + +$selected-colors: ( + content-basic: $selected-content-basic, + content-subtle: $selected-content-subtle, + state-active: $selected-state-active, + state-default: $selected-state-default, + state-hover: $selected-state-hover, +) !default; + +$shadow-colors: ( + shadow-100: ( + color-01: $shadow-shadow-100-color-01, + ), + shadow-200: ( + color-01: $shadow-shadow-200-color-01, + ), + shadow-300: ( + color-01: $shadow-shadow-300-color-01, + ), + shadow-400: ( + color-01: $shadow-shadow-400-color-01, + ), +) !default; + +$text-colors: ( + primary: $text-primary, + secondary: $text-secondary, + tertiary: $text-tertiary, +) !default; + +$colors: ( + background: $background-colors, + border: $border-colors, + component: $component-colors, + disabled: $disabled-colors, + emotion: $emotion-colors, + focus: $focus-colors, + form-field: $form-field-colors, + gradient: $gradient-colors, + link: $link-colors, + neutral: $neutral-colors, + selected: $selected-colors, + shadow: $shadow-colors, + text: $text-colors, +) !default; diff --git a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss index 25bc377a8c..656f6e043d 100644 --- a/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss +++ b/packages/design-tokens/src/scss/themes/theme-light-default/_colors.scss @@ -1,6 +1,319 @@ /* This file was generated by Supernova, don't change manually */ +$background-backdrop: #1a1b1b80 !default; +$background-interactive-state-active: #f1edff !default; +$background-interactive-state-default: #fff0 !default; +$background-interactive-state-hover: #f8f6ff !default; -@mixin color-css-variables { +$background-primary: #fff !default; +$background-secondary: #f2f2f2 !default; +$background-tertiary: #f1edff !default; + +$border-basic: #d9d9d9 !default; +$border-focus: #7847ff !default; + +$border-interactive-state-active: #a5a5a5 !default; +$border-interactive-state-default: #bfbfbf !default; +$border-interactive-state-hover: #b2b2b2 !default; +$border-interactive-state-selected: #7847ff !default; + +$component-button-plain-border: #fff0 !default; +$component-button-plain-content: #6039cc !default; +$component-button-plain-state-active: #e4daff !default; +$component-button-plain-state-default: #fff0 !default; +$component-button-plain-state-hover: #f1edff !default; + +$component-button-primary-border: #4e2ea6 !default; +$component-button-primary-content: #fff !default; +$component-button-primary-state-active: #6039cc !default; +$component-button-primary-state-default: #7847ff !default; +$component-button-primary-state-hover: #6c40e5 !default; + +$component-button-secondary-border: #7847ff !default; +$component-button-secondary-content: #6039cc !default; +$component-button-secondary-state-active: #e4daff !default; +$component-button-secondary-state-default: #fff !default; +$component-button-secondary-state-hover: #f1edff !default; + +$component-button-tertiary-border: #e5e5e5 !default; +$component-button-tertiary-content: #202020 !default; +$component-button-tertiary-state-active: #d9d9d9 !default; +$component-button-tertiary-state-default: #f2f2f2 !default; +$component-button-tertiary-state-hover: #e5e5e5 !default; + +$component-header-background: #fff !default; +$component-header-item-background-state-active: #f1edff !default; +$component-header-item-background-state-default: #fff0 !default; +$component-header-item-background-state-hover: #f8f6ff !default; +$component-header-item-background-state-selected: #fff0 !default; +$component-header-item-state-active: #4e2ea6 !default; +$component-header-item-state-default: #404040 !default; +$component-header-item-state-hover: #6039cc !default; +$component-header-item-state-selected: #6039cc !default; +$component-header-stripe-state-selected: #ffbe00 !default; +$component-header-stripe-state-unselected: #e4daff !default; + +$component-toggle-selected-border: #327c3f !default; +$component-toggle-selected-content: #fff !default; +$component-toggle-selected-state-active: #3e9b4f !default; +$component-toggle-selected-state-default: #327c3f !default; +$component-toggle-selected-state-hover: #388b47 !default; +$component-toggle-unselected-border: #a5a5a5 !default; +$component-toggle-unselected-content: #404040 !default; +$component-toggle-unselected-state-active: #f2f2f2 !default; +$component-toggle-unselected-state-default: #fff !default; +$component-toggle-unselected-state-hover: #f9f9f9 !default; + +$disabled-background: #f9f9f9 !default; +$disabled-border: #e5e5e5 !default; +$disabled-content: #a5a5a5 !default; +$disabled-foreground: #d9d9d9 !default; + +$emotion-danger-background-basic: #b60000 !default; +$emotion-danger-background-subtle: #fef2f2 !default; +$emotion-danger-border-basic: #b60000 !default; +$emotion-danger-border-subtle: #f18080 !default; +$emotion-danger-content-basic: #940000 !default; +$emotion-danger-content-subtle: #fff !default; +$emotion-danger-state-active: #e40000 !default; +$emotion-danger-state-default: #b60000 !default; +$emotion-danger-state-hover: #cd0000 !default; + +$emotion-informative-background-basic: #0052ad !default; +$emotion-informative-background-subtle: #f2f7fd !default; +$emotion-informative-border-basic: #0052ad !default; +$emotion-informative-border-subtle: #80b2eb !default; +$emotion-informative-content-basic: #00428c !default; +$emotion-informative-content-subtle: #fff !default; +$emotion-informative-state-active: #0066d8 !default; +$emotion-informative-state-default: #0052ad !default; +$emotion-informative-state-hover: #005cc2 !default; + +$emotion-success-background-basic: #327c3f !default; +$emotion-success-background-subtle: #f5faf6 !default; +$emotion-success-border-basic: #327c3f !default; +$emotion-success-border-subtle: #9ecda7 !default; +$emotion-success-content-basic: #286533 !default; +$emotion-success-content-subtle: #fff !default; +$emotion-success-state-active: #3e9b4f !default; +$emotion-success-state-default: #327c3f !default; +$emotion-success-state-hover: #388b47 !default; + +$emotion-warning-background-basic: #c26400 !default; +$emotion-warning-background-subtle: #fef8f2 !default; +$emotion-warning-border-basic: #c26400 !default; +$emotion-warning-border-subtle: #f9be80 !default; +$emotion-warning-content-basic: #9d5100 !default; +$emotion-warning-content-subtle: #fff !default; +$emotion-warning-state-active: #f27d00 !default; +$emotion-warning-state-default: #c26400 !default; +$emotion-warning-state-hover: #da7100 !default; + +$focus-focus-ring-color-01: #d2c2ffb2 !default; + +$form-field-danger: #b60000 !default; +$form-field-filled-background-state-active: #fff !default; +$form-field-filled-background-state-default: #fff !default; +$form-field-filled-background-state-hover: #f9f9f9 !default; +$form-field-filled-border-state-active: #7f7f7f !default; +$form-field-filled-border-state-default: #a5a5a5 !default; +$form-field-filled-border-state-hover: #999 !default; +$form-field-filled-border-state-selected: #7847ff !default; +$form-field-filled-content: #202020 !default; +$form-field-filled-placeholder: #666 !default; + +$form-field-helper-text: #7f7f7f !default; +$form-field-label: #202020 !default; +$form-field-success: #327c3f !default; +$form-field-warning: #c26400 !default; + +$gradient-basic-overlay-color-01: #fff !default; +$gradient-basic-overlay-color-02: #fff0 !default; + +$link-primary-state-active: #3c2480 !default; +$link-primary-state-default: #6039cc !default; +$link-primary-state-hover: #4e2ea6 !default; + +$link-secondary-state-active: #3c2480 !default; +$link-secondary-state-default: #535353 !default; +$link-secondary-state-hover: #4e2ea6 !default; + +$link-state-visited: #3c2480 !default; + +$link-tertiary-state-active: #3c2480 !default; +$link-tertiary-state-default: #7f7f7f !default; +$link-tertiary-state-hover: #4e2ea6 !default; + +$neutral-background-basic: #202020 !default; +$neutral-background-subtle: #f2f2f2 !default; +$neutral-border-basic: #202020 !default; +$neutral-border-subtle: #bfbfbf !default; +$neutral-content-basic: #202020 !default; +$neutral-content-subtle: #fff !default; +$neutral-state-active: #535353 !default; +$neutral-state-default: #202020 !default; +$neutral-state-hover: #404040 !default; + +$selected-content-basic: #4e2ea6 !default; +$selected-content-subtle: #fff !default; +$selected-state-active: #6039cc !default; +$selected-state-default: #7847ff !default; +$selected-state-hover: #6c40e5 !default; + +$shadow-shadow-100-color-01: #00000026 !default; + +$shadow-shadow-200-color-01: #0003 !default; + +$shadow-shadow-300-color-01: #00000040 !default; + +$shadow-shadow-400-color-01: #00000040 !default; + +$text-primary: #202020 !default; +$text-secondary: #535353 !default; +$text-tertiary: #7f7f7f !default; + +@mixin color-css-variables { + --spirit-color-background-backdrop: #{$background-backdrop}; + --spirit-color-background-interactive-state-active: #{$background-interactive-state-active}; + --spirit-color-background-interactive-state-default: #{$background-interactive-state-default}; + --spirit-color-background-interactive-state-hover: #{$background-interactive-state-hover}; + --spirit-color-background-primary: #{$background-primary}; + --spirit-color-background-secondary: #{$background-secondary}; + --spirit-color-background-tertiary: #{$background-tertiary}; + --spirit-color-border-basic: #{$border-basic}; + --spirit-color-border-focus: #{$border-focus}; + --spirit-color-border-interactive-state-active: #{$border-interactive-state-active}; + --spirit-color-border-interactive-state-default: #{$border-interactive-state-default}; + --spirit-color-border-interactive-state-hover: #{$border-interactive-state-hover}; + --spirit-color-border-interactive-state-selected: #{$border-interactive-state-selected}; + --spirit-color-component-button-plain-border: #{$component-button-plain-border}; + --spirit-color-component-button-plain-content: #{$component-button-plain-content}; + --spirit-color-component-button-plain-state-active: #{$component-button-plain-state-active}; + --spirit-color-component-button-plain-state-default: #{$component-button-plain-state-default}; + --spirit-color-component-button-plain-state-hover: #{$component-button-plain-state-hover}; + --spirit-color-component-button-primary-border: #{$component-button-primary-border}; + --spirit-color-component-button-primary-content: #{$component-button-primary-content}; + --spirit-color-component-button-primary-state-active: #{$component-button-primary-state-active}; + --spirit-color-component-button-primary-state-default: #{$component-button-primary-state-default}; + --spirit-color-component-button-primary-state-hover: #{$component-button-primary-state-hover}; + --spirit-color-component-button-secondary-border: #{$component-button-secondary-border}; + --spirit-color-component-button-secondary-content: #{$component-button-secondary-content}; + --spirit-color-component-button-secondary-state-active: #{$component-button-secondary-state-active}; + --spirit-color-component-button-secondary-state-default: #{$component-button-secondary-state-default}; + --spirit-color-component-button-secondary-state-hover: #{$component-button-secondary-state-hover}; + --spirit-color-component-button-tertiary-border: #{$component-button-tertiary-border}; + --spirit-color-component-button-tertiary-content: #{$component-button-tertiary-content}; + --spirit-color-component-button-tertiary-state-active: #{$component-button-tertiary-state-active}; + --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default}; + --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover}; + --spirit-color-component-header-background: #{$component-header-background}; + --spirit-color-component-header-item-background-state-active: #{$component-header-item-background-state-active}; + --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default}; + --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover}; + --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected}; + --spirit-color-component-header-item-state-active: #{$component-header-item-state-active}; + --spirit-color-component-header-item-state-default: #{$component-header-item-state-default}; + --spirit-color-component-header-item-state-hover: #{$component-header-item-state-hover}; + --spirit-color-component-header-item-state-selected: #{$component-header-item-state-selected}; + --spirit-color-component-header-stripe-state-selected: #{$component-header-stripe-state-selected}; + --spirit-color-component-header-stripe-state-unselected: #{$component-header-stripe-state-unselected}; + --spirit-color-component-toggle-selected-border: #{$component-toggle-selected-border}; + --spirit-color-component-toggle-selected-content: #{$component-toggle-selected-content}; + --spirit-color-component-toggle-selected-state-active: #{$component-toggle-selected-state-active}; + --spirit-color-component-toggle-selected-state-default: #{$component-toggle-selected-state-default}; + --spirit-color-component-toggle-selected-state-hover: #{$component-toggle-selected-state-hover}; + --spirit-color-component-toggle-unselected-border: #{$component-toggle-unselected-border}; + --spirit-color-component-toggle-unselected-content: #{$component-toggle-unselected-content}; + --spirit-color-component-toggle-unselected-state-active: #{$component-toggle-unselected-state-active}; + --spirit-color-component-toggle-unselected-state-default: #{$component-toggle-unselected-state-default}; + --spirit-color-component-toggle-unselected-state-hover: #{$component-toggle-unselected-state-hover}; + --spirit-color-disabled-background: #{$disabled-background}; + --spirit-color-disabled-border: #{$disabled-border}; + --spirit-color-disabled-content: #{$disabled-content}; + --spirit-color-disabled-foreground: #{$disabled-foreground}; + --spirit-color-emotion-danger-background-basic: #{$emotion-danger-background-basic}; + --spirit-color-emotion-danger-background-subtle: #{$emotion-danger-background-subtle}; + --spirit-color-emotion-danger-border-basic: #{$emotion-danger-border-basic}; + --spirit-color-emotion-danger-border-subtle: #{$emotion-danger-border-subtle}; + --spirit-color-emotion-danger-content-basic: #{$emotion-danger-content-basic}; + --spirit-color-emotion-danger-content-subtle: #{$emotion-danger-content-subtle}; + --spirit-color-emotion-danger-state-active: #{$emotion-danger-state-active}; + --spirit-color-emotion-danger-state-default: #{$emotion-danger-state-default}; + --spirit-color-emotion-danger-state-hover: #{$emotion-danger-state-hover}; + --spirit-color-emotion-informative-background-basic: #{$emotion-informative-background-basic}; + --spirit-color-emotion-informative-background-subtle: #{$emotion-informative-background-subtle}; + --spirit-color-emotion-informative-border-basic: #{$emotion-informative-border-basic}; + --spirit-color-emotion-informative-border-subtle: #{$emotion-informative-border-subtle}; + --spirit-color-emotion-informative-content-basic: #{$emotion-informative-content-basic}; + --spirit-color-emotion-informative-content-subtle: #{$emotion-informative-content-subtle}; + --spirit-color-emotion-informative-state-active: #{$emotion-informative-state-active}; + --spirit-color-emotion-informative-state-default: #{$emotion-informative-state-default}; + --spirit-color-emotion-informative-state-hover: #{$emotion-informative-state-hover}; + --spirit-color-emotion-success-background-basic: #{$emotion-success-background-basic}; + --spirit-color-emotion-success-background-subtle: #{$emotion-success-background-subtle}; + --spirit-color-emotion-success-border-basic: #{$emotion-success-border-basic}; + --spirit-color-emotion-success-border-subtle: #{$emotion-success-border-subtle}; + --spirit-color-emotion-success-content-basic: #{$emotion-success-content-basic}; + --spirit-color-emotion-success-content-subtle: #{$emotion-success-content-subtle}; + --spirit-color-emotion-success-state-active: #{$emotion-success-state-active}; + --spirit-color-emotion-success-state-default: #{$emotion-success-state-default}; + --spirit-color-emotion-success-state-hover: #{$emotion-success-state-hover}; + --spirit-color-emotion-warning-background-basic: #{$emotion-warning-background-basic}; + --spirit-color-emotion-warning-background-subtle: #{$emotion-warning-background-subtle}; + --spirit-color-emotion-warning-border-basic: #{$emotion-warning-border-basic}; + --spirit-color-emotion-warning-border-subtle: #{$emotion-warning-border-subtle}; + --spirit-color-emotion-warning-content-basic: #{$emotion-warning-content-basic}; + --spirit-color-emotion-warning-content-subtle: #{$emotion-warning-content-subtle}; + --spirit-color-emotion-warning-state-active: #{$emotion-warning-state-active}; + --spirit-color-emotion-warning-state-default: #{$emotion-warning-state-default}; + --spirit-color-emotion-warning-state-hover: #{$emotion-warning-state-hover}; + --spirit-color-focus-focus-ring-color-01: #{$focus-focus-ring-color-01}; + --spirit-color-form-field-danger: #{$form-field-danger}; + --spirit-color-form-field-filled-background-state-active: #{$form-field-filled-background-state-active}; + --spirit-color-form-field-filled-background-state-default: #{$form-field-filled-background-state-default}; + --spirit-color-form-field-filled-background-state-hover: #{$form-field-filled-background-state-hover}; + --spirit-color-form-field-filled-border-state-active: #{$form-field-filled-border-state-active}; + --spirit-color-form-field-filled-border-state-default: #{$form-field-filled-border-state-default}; + --spirit-color-form-field-filled-border-state-hover: #{$form-field-filled-border-state-hover}; + --spirit-color-form-field-filled-border-state-selected: #{$form-field-filled-border-state-selected}; + --spirit-color-form-field-filled-content: #{$form-field-filled-content}; + --spirit-color-form-field-filled-placeholder: #{$form-field-filled-placeholder}; + --spirit-color-form-field-helper-text: #{$form-field-helper-text}; + --spirit-color-form-field-label: #{$form-field-label}; + --spirit-color-form-field-success: #{$form-field-success}; + --spirit-color-form-field-warning: #{$form-field-warning}; + --spirit-color-gradient-basic-overlay-color-01: #{$gradient-basic-overlay-color-01}; + --spirit-color-gradient-basic-overlay-color-02: #{$gradient-basic-overlay-color-02}; + --spirit-color-link-primary-state-active: #{$link-primary-state-active}; + --spirit-color-link-primary-state-default: #{$link-primary-state-default}; + --spirit-color-link-primary-state-hover: #{$link-primary-state-hover}; + --spirit-color-link-secondary-state-active: #{$link-secondary-state-active}; + --spirit-color-link-secondary-state-default: #{$link-secondary-state-default}; + --spirit-color-link-secondary-state-hover: #{$link-secondary-state-hover}; + --spirit-color-link-state-visited: #{$link-state-visited}; + --spirit-color-link-tertiary-state-active: #{$link-tertiary-state-active}; + --spirit-color-link-tertiary-state-default: #{$link-tertiary-state-default}; + --spirit-color-link-tertiary-state-hover: #{$link-tertiary-state-hover}; + --spirit-color-neutral-background-basic: #{$neutral-background-basic}; + --spirit-color-neutral-background-subtle: #{$neutral-background-subtle}; + --spirit-color-neutral-border-basic: #{$neutral-border-basic}; + --spirit-color-neutral-border-subtle: #{$neutral-border-subtle}; + --spirit-color-neutral-content-basic: #{$neutral-content-basic}; + --spirit-color-neutral-content-subtle: #{$neutral-content-subtle}; + --spirit-color-neutral-state-active: #{$neutral-state-active}; + --spirit-color-neutral-state-default: #{$neutral-state-default}; + --spirit-color-neutral-state-hover: #{$neutral-state-hover}; + --spirit-color-selected-content-basic: #{$selected-content-basic}; + --spirit-color-selected-content-subtle: #{$selected-content-subtle}; + --spirit-color-selected-state-active: #{$selected-state-active}; + --spirit-color-selected-state-default: #{$selected-state-default}; + --spirit-color-selected-state-hover: #{$selected-state-hover}; + --spirit-color-shadow-shadow-100-color-01: #{$shadow-shadow-100-color-01}; + --spirit-color-shadow-shadow-200-color-01: #{$shadow-shadow-200-color-01}; + --spirit-color-shadow-shadow-300-color-01: #{$shadow-shadow-300-color-01}; + --spirit-color-shadow-shadow-400-color-01: #{$shadow-shadow-400-color-01}; + --spirit-color-text-primary: #{$text-primary}; + --spirit-color-text-secondary: #{$text-secondary}; + --spirit-color-text-tertiary: #{$text-tertiary}; } diff --git a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss index 25bc377a8c..fab7bda4c4 100644 --- a/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss +++ b/packages/design-tokens/src/scss/themes/theme-light-on-brand/_colors.scss @@ -1,6 +1,319 @@ /* This file was generated by Supernova, don't change manually */ +$background-backdrop: #1a1b1b80 !default; +$background-interactive-state-active: #ffffff1a !default; +$background-interactive-state-default: #fff0 !default; +$background-interactive-state-hover: #ffffff0d !default; -@mixin color-css-variables { +$background-primary: #6039cc !default; +$background-secondary: #3c2480 !default; +$background-tertiary: #1e1240 !default; + +$border-basic: #a07eff !default; +$border-focus: #1e1240 !default; + +$border-interactive-state-active: #bba3ff !default; +$border-interactive-state-default: #a07eff !default; +$border-interactive-state-hover: #ae91ff !default; +$border-interactive-state-selected: #ffbe00 !default; + +$component-button-plain-border: #fff0 !default; +$component-button-plain-content: #fff !default; +$component-button-plain-state-active: #ffffff26 !default; +$component-button-plain-state-default: #fff0 !default; +$component-button-plain-state-hover: #ffffff1a !default; + +$component-button-primary-border: #1e1240 !default; +$component-button-primary-content: #3c2480 !default; +$component-button-primary-state-active: #e4daff !default; +$component-button-primary-state-default: #fff !default; +$component-button-primary-state-hover: #f1edff !default; + +$component-button-secondary-border: #f8f6ff !default; +$component-button-secondary-content: #fff !default; +$component-button-secondary-state-active: #1a1b1b26 !default; +$component-button-secondary-state-default: #1a1b1b00 !default; +$component-button-secondary-state-hover: #1a1b1b1a !default; + +$component-button-tertiary-border: #1a1b1b00 !default; +$component-button-tertiary-content: #fff !default; +$component-button-tertiary-state-active: #1a1b1b4d !default; +$component-button-tertiary-state-default: #1a1b1b33 !default; +$component-button-tertiary-state-hover: #1a1b1b40 !default; + +$component-header-background: #6039cc !default; +$component-header-item-background-state-active: #1a1b1b26 !default; +$component-header-item-background-state-default: #fff0 !default; +$component-header-item-background-state-hover: #1a1b1b1a !default; +$component-header-item-background-state-selected: #fff0 !default; +$component-header-item-state-active: #e5e5e5 !default; +$component-header-item-state-default: #fff !default; +$component-header-item-state-hover: #f2f2f2 !default; +$component-header-item-state-selected: #ffbe00 !default; +$component-header-stripe-state-selected: #fff !default; +$component-header-stripe-state-unselected: #ffffff40 !default; + +$component-toggle-selected-border: #a07eff !default; +$component-toggle-selected-content: #fff !default; +$component-toggle-selected-state-active: #3e9b4f !default; +$component-toggle-selected-state-default: #327c3f !default; +$component-toggle-selected-state-hover: #388b47 !default; +$component-toggle-unselected-border: #a07eff !default; +$component-toggle-unselected-content: #4e2ea6 !default; +$component-toggle-unselected-state-active: #e4daff !default; +$component-toggle-unselected-state-default: #fff !default; +$component-toggle-unselected-state-hover: #f1edff !default; + +$disabled-background: #ffffff1a !default; +$disabled-border: #fff3 !default; +$disabled-content: #ffffff80 !default; +$disabled-foreground: #fff3 !default; + +$emotion-danger-background-basic: #e40000 !default; +$emotion-danger-background-subtle: #fce5e5 !default; +$emotion-danger-border-basic: #e93333 !default; +$emotion-danger-border-subtle: #ef6666 !default; +$emotion-danger-content-basic: #720000 !default; +$emotion-danger-content-subtle: #fff !default; +$emotion-danger-state-active: #ec4d4d !default; +$emotion-danger-state-default: #e40000 !default; +$emotion-danger-state-hover: #e93333 !default; + +$emotion-informative-background-basic: #0066d8 !default; +$emotion-informative-background-subtle: #e5f0fb !default; +$emotion-informative-border-basic: #3385e0 !default; +$emotion-informative-border-subtle: #66a3e8 !default; +$emotion-informative-content-basic: #00336c !default; +$emotion-informative-content-subtle: #fff !default; +$emotion-informative-state-active: #4d94e4 !default; +$emotion-informative-state-default: #0066d8 !default; +$emotion-informative-state-hover: #3385e0 !default; + +$emotion-success-background-basic: #3e9b4f !default; +$emotion-success-background-subtle: #ecf5ed !default; +$emotion-success-border-basic: #65af72 !default; +$emotion-success-border-subtle: #8bc395 !default; +$emotion-success-content-basic: #1f4e28 !default; +$emotion-success-content-subtle: #fff !default; +$emotion-success-state-active: #78b984 !default; +$emotion-success-state-default: #3e9b4f !default; +$emotion-success-state-hover: #65af72 !default; + +$emotion-warning-background-basic: #f27d00 !default; +$emotion-warning-background-subtle: #fef2e5 !default; +$emotion-warning-border-basic: #f59733 !default; +$emotion-warning-border-subtle: #f7b166 !default; +$emotion-warning-content-basic: #793f00 !default; +$emotion-warning-content-subtle: #fff !default; +$emotion-warning-state-active: #f6a44d !default; +$emotion-warning-state-default: #f27d00 !default; +$emotion-warning-state-hover: #f59733 !default; + +$focus-focus-ring-color-01: #d2c2ffb2 !default; + +$form-field-danger: #ec4d4d !default; +$form-field-filled-background-state-active: #fff !default; +$form-field-filled-background-state-default: #f9f9f9 !default; +$form-field-filled-background-state-hover: #f1edff !default; +$form-field-filled-border-state-active: #936cff !default; +$form-field-filled-border-state-default: #ae91ff !default; +$form-field-filled-border-state-hover: #a07eff !default; +$form-field-filled-border-state-selected: #ffbe00 !default; +$form-field-filled-content: #202020 !default; +$form-field-filled-placeholder: #666 !default; + +$form-field-helper-text: #c9b5ff !default; +$form-field-label: #fff !default; +$form-field-success: #78b984 !default; +$form-field-warning: #f6a44d !default; + +$gradient-basic-overlay-color-01: #606060 !default; +$gradient-basic-overlay-color-02: #60606000 !default; + +$link-primary-state-active: #e5e5e5 !default; +$link-primary-state-default: #fff !default; +$link-primary-state-hover: #f2f2f2 !default; + +$link-secondary-state-active: #e5e5e5 !default; +$link-secondary-state-default: #d6c8ff !default; +$link-secondary-state-hover: #f2f2f2 !default; + +$link-state-visited: #ffbe00 !default; + +$link-tertiary-state-active: #e5e5e5 !default; +$link-tertiary-state-default: #bba3ff !default; +$link-tertiary-state-hover: #f2f2f2 !default; + +$neutral-background-basic: #202020 !default; +$neutral-background-subtle: #f2f2f2 !default; +$neutral-border-basic: #202020 !default; +$neutral-border-subtle: #bfbfbf !default; +$neutral-content-basic: #202020 !default; +$neutral-content-subtle: #fff !default; +$neutral-state-active: #535353 !default; +$neutral-state-default: #202020 !default; +$neutral-state-hover: #404040 !default; + +$selected-content-basic: #fff !default; +$selected-content-subtle: #3c2480 !default; +$selected-state-active: #ffd24d !default; +$selected-state-default: #ffbe00 !default; +$selected-state-hover: #ffcb33 !default; + +$shadow-shadow-100-color-01: #00000026 !default; + +$shadow-shadow-200-color-01: #0003 !default; + +$shadow-shadow-300-color-01: #00000040 !default; + +$shadow-shadow-400-color-01: #00000040 !default; + +$text-primary: #f9f9f9 !default; +$text-secondary: #d9d9d9 !default; +$text-tertiary: #b2b2b2 !default; + +@mixin color-css-variables { + --spirit-color-background-backdrop: #{$background-backdrop}; + --spirit-color-background-interactive-state-active: #{$background-interactive-state-active}; + --spirit-color-background-interactive-state-default: #{$background-interactive-state-default}; + --spirit-color-background-interactive-state-hover: #{$background-interactive-state-hover}; + --spirit-color-background-primary: #{$background-primary}; + --spirit-color-background-secondary: #{$background-secondary}; + --spirit-color-background-tertiary: #{$background-tertiary}; + --spirit-color-border-basic: #{$border-basic}; + --spirit-color-border-focus: #{$border-focus}; + --spirit-color-border-interactive-state-active: #{$border-interactive-state-active}; + --spirit-color-border-interactive-state-default: #{$border-interactive-state-default}; + --spirit-color-border-interactive-state-hover: #{$border-interactive-state-hover}; + --spirit-color-border-interactive-state-selected: #{$border-interactive-state-selected}; + --spirit-color-component-button-plain-border: #{$component-button-plain-border}; + --spirit-color-component-button-plain-content: #{$component-button-plain-content}; + --spirit-color-component-button-plain-state-active: #{$component-button-plain-state-active}; + --spirit-color-component-button-plain-state-default: #{$component-button-plain-state-default}; + --spirit-color-component-button-plain-state-hover: #{$component-button-plain-state-hover}; + --spirit-color-component-button-primary-border: #{$component-button-primary-border}; + --spirit-color-component-button-primary-content: #{$component-button-primary-content}; + --spirit-color-component-button-primary-state-active: #{$component-button-primary-state-active}; + --spirit-color-component-button-primary-state-default: #{$component-button-primary-state-default}; + --spirit-color-component-button-primary-state-hover: #{$component-button-primary-state-hover}; + --spirit-color-component-button-secondary-border: #{$component-button-secondary-border}; + --spirit-color-component-button-secondary-content: #{$component-button-secondary-content}; + --spirit-color-component-button-secondary-state-active: #{$component-button-secondary-state-active}; + --spirit-color-component-button-secondary-state-default: #{$component-button-secondary-state-default}; + --spirit-color-component-button-secondary-state-hover: #{$component-button-secondary-state-hover}; + --spirit-color-component-button-tertiary-border: #{$component-button-tertiary-border}; + --spirit-color-component-button-tertiary-content: #{$component-button-tertiary-content}; + --spirit-color-component-button-tertiary-state-active: #{$component-button-tertiary-state-active}; + --spirit-color-component-button-tertiary-state-default: #{$component-button-tertiary-state-default}; + --spirit-color-component-button-tertiary-state-hover: #{$component-button-tertiary-state-hover}; + --spirit-color-component-header-background: #{$component-header-background}; + --spirit-color-component-header-item-background-state-active: #{$component-header-item-background-state-active}; + --spirit-color-component-header-item-background-state-default: #{$component-header-item-background-state-default}; + --spirit-color-component-header-item-background-state-hover: #{$component-header-item-background-state-hover}; + --spirit-color-component-header-item-background-state-selected: #{$component-header-item-background-state-selected}; + --spirit-color-component-header-item-state-active: #{$component-header-item-state-active}; + --spirit-color-component-header-item-state-default: #{$component-header-item-state-default}; + --spirit-color-component-header-item-state-hover: #{$component-header-item-state-hover}; + --spirit-color-component-header-item-state-selected: #{$component-header-item-state-selected}; + --spirit-color-component-header-stripe-state-selected: #{$component-header-stripe-state-selected}; + --spirit-color-component-header-stripe-state-unselected: #{$component-header-stripe-state-unselected}; + --spirit-color-component-toggle-selected-border: #{$component-toggle-selected-border}; + --spirit-color-component-toggle-selected-content: #{$component-toggle-selected-content}; + --spirit-color-component-toggle-selected-state-active: #{$component-toggle-selected-state-active}; + --spirit-color-component-toggle-selected-state-default: #{$component-toggle-selected-state-default}; + --spirit-color-component-toggle-selected-state-hover: #{$component-toggle-selected-state-hover}; + --spirit-color-component-toggle-unselected-border: #{$component-toggle-unselected-border}; + --spirit-color-component-toggle-unselected-content: #{$component-toggle-unselected-content}; + --spirit-color-component-toggle-unselected-state-active: #{$component-toggle-unselected-state-active}; + --spirit-color-component-toggle-unselected-state-default: #{$component-toggle-unselected-state-default}; + --spirit-color-component-toggle-unselected-state-hover: #{$component-toggle-unselected-state-hover}; + --spirit-color-disabled-background: #{$disabled-background}; + --spirit-color-disabled-border: #{$disabled-border}; + --spirit-color-disabled-content: #{$disabled-content}; + --spirit-color-disabled-foreground: #{$disabled-foreground}; + --spirit-color-emotion-danger-background-basic: #{$emotion-danger-background-basic}; + --spirit-color-emotion-danger-background-subtle: #{$emotion-danger-background-subtle}; + --spirit-color-emotion-danger-border-basic: #{$emotion-danger-border-basic}; + --spirit-color-emotion-danger-border-subtle: #{$emotion-danger-border-subtle}; + --spirit-color-emotion-danger-content-basic: #{$emotion-danger-content-basic}; + --spirit-color-emotion-danger-content-subtle: #{$emotion-danger-content-subtle}; + --spirit-color-emotion-danger-state-active: #{$emotion-danger-state-active}; + --spirit-color-emotion-danger-state-default: #{$emotion-danger-state-default}; + --spirit-color-emotion-danger-state-hover: #{$emotion-danger-state-hover}; + --spirit-color-emotion-informative-background-basic: #{$emotion-informative-background-basic}; + --spirit-color-emotion-informative-background-subtle: #{$emotion-informative-background-subtle}; + --spirit-color-emotion-informative-border-basic: #{$emotion-informative-border-basic}; + --spirit-color-emotion-informative-border-subtle: #{$emotion-informative-border-subtle}; + --spirit-color-emotion-informative-content-basic: #{$emotion-informative-content-basic}; + --spirit-color-emotion-informative-content-subtle: #{$emotion-informative-content-subtle}; + --spirit-color-emotion-informative-state-active: #{$emotion-informative-state-active}; + --spirit-color-emotion-informative-state-default: #{$emotion-informative-state-default}; + --spirit-color-emotion-informative-state-hover: #{$emotion-informative-state-hover}; + --spirit-color-emotion-success-background-basic: #{$emotion-success-background-basic}; + --spirit-color-emotion-success-background-subtle: #{$emotion-success-background-subtle}; + --spirit-color-emotion-success-border-basic: #{$emotion-success-border-basic}; + --spirit-color-emotion-success-border-subtle: #{$emotion-success-border-subtle}; + --spirit-color-emotion-success-content-basic: #{$emotion-success-content-basic}; + --spirit-color-emotion-success-content-subtle: #{$emotion-success-content-subtle}; + --spirit-color-emotion-success-state-active: #{$emotion-success-state-active}; + --spirit-color-emotion-success-state-default: #{$emotion-success-state-default}; + --spirit-color-emotion-success-state-hover: #{$emotion-success-state-hover}; + --spirit-color-emotion-warning-background-basic: #{$emotion-warning-background-basic}; + --spirit-color-emotion-warning-background-subtle: #{$emotion-warning-background-subtle}; + --spirit-color-emotion-warning-border-basic: #{$emotion-warning-border-basic}; + --spirit-color-emotion-warning-border-subtle: #{$emotion-warning-border-subtle}; + --spirit-color-emotion-warning-content-basic: #{$emotion-warning-content-basic}; + --spirit-color-emotion-warning-content-subtle: #{$emotion-warning-content-subtle}; + --spirit-color-emotion-warning-state-active: #{$emotion-warning-state-active}; + --spirit-color-emotion-warning-state-default: #{$emotion-warning-state-default}; + --spirit-color-emotion-warning-state-hover: #{$emotion-warning-state-hover}; + --spirit-color-focus-focus-ring-color-01: #{$focus-focus-ring-color-01}; + --spirit-color-form-field-danger: #{$form-field-danger}; + --spirit-color-form-field-filled-background-state-active: #{$form-field-filled-background-state-active}; + --spirit-color-form-field-filled-background-state-default: #{$form-field-filled-background-state-default}; + --spirit-color-form-field-filled-background-state-hover: #{$form-field-filled-background-state-hover}; + --spirit-color-form-field-filled-border-state-active: #{$form-field-filled-border-state-active}; + --spirit-color-form-field-filled-border-state-default: #{$form-field-filled-border-state-default}; + --spirit-color-form-field-filled-border-state-hover: #{$form-field-filled-border-state-hover}; + --spirit-color-form-field-filled-border-state-selected: #{$form-field-filled-border-state-selected}; + --spirit-color-form-field-filled-content: #{$form-field-filled-content}; + --spirit-color-form-field-filled-placeholder: #{$form-field-filled-placeholder}; + --spirit-color-form-field-helper-text: #{$form-field-helper-text}; + --spirit-color-form-field-label: #{$form-field-label}; + --spirit-color-form-field-success: #{$form-field-success}; + --spirit-color-form-field-warning: #{$form-field-warning}; + --spirit-color-gradient-basic-overlay-color-01: #{$gradient-basic-overlay-color-01}; + --spirit-color-gradient-basic-overlay-color-02: #{$gradient-basic-overlay-color-02}; + --spirit-color-link-primary-state-active: #{$link-primary-state-active}; + --spirit-color-link-primary-state-default: #{$link-primary-state-default}; + --spirit-color-link-primary-state-hover: #{$link-primary-state-hover}; + --spirit-color-link-secondary-state-active: #{$link-secondary-state-active}; + --spirit-color-link-secondary-state-default: #{$link-secondary-state-default}; + --spirit-color-link-secondary-state-hover: #{$link-secondary-state-hover}; + --spirit-color-link-state-visited: #{$link-state-visited}; + --spirit-color-link-tertiary-state-active: #{$link-tertiary-state-active}; + --spirit-color-link-tertiary-state-default: #{$link-tertiary-state-default}; + --spirit-color-link-tertiary-state-hover: #{$link-tertiary-state-hover}; + --spirit-color-neutral-background-basic: #{$neutral-background-basic}; + --spirit-color-neutral-background-subtle: #{$neutral-background-subtle}; + --spirit-color-neutral-border-basic: #{$neutral-border-basic}; + --spirit-color-neutral-border-subtle: #{$neutral-border-subtle}; + --spirit-color-neutral-content-basic: #{$neutral-content-basic}; + --spirit-color-neutral-content-subtle: #{$neutral-content-subtle}; + --spirit-color-neutral-state-active: #{$neutral-state-active}; + --spirit-color-neutral-state-default: #{$neutral-state-default}; + --spirit-color-neutral-state-hover: #{$neutral-state-hover}; + --spirit-color-selected-content-basic: #{$selected-content-basic}; + --spirit-color-selected-content-subtle: #{$selected-content-subtle}; + --spirit-color-selected-state-active: #{$selected-state-active}; + --spirit-color-selected-state-default: #{$selected-state-default}; + --spirit-color-selected-state-hover: #{$selected-state-hover}; + --spirit-color-shadow-shadow-100-color-01: #{$shadow-shadow-100-color-01}; + --spirit-color-shadow-shadow-200-color-01: #{$shadow-shadow-200-color-01}; + --spirit-color-shadow-shadow-300-color-01: #{$shadow-shadow-300-color-01}; + --spirit-color-shadow-shadow-400-color-01: #{$shadow-shadow-400-color-01}; + --spirit-color-text-primary: #{$text-primary}; + --spirit-color-text-secondary: #{$text-secondary}; + --spirit-color-text-tertiary: #{$text-tertiary}; }