/* (c) Copyright Frontify Ltd., all rights reserved. */ import defaultColors from 'tailwindcss/colors'; import defaultTheme from 'tailwindcss/defaultTheme'; const entries = Object.entries(Object.getOwnPropertyDescriptors(defaultColors)).filter(([_, descriptor]) => { return typeof descriptor.get !== 'function'; // Exclude getters }); const nonDeprecatedColors = Object.fromEntries(entries.map(([key, descriptor]) => [key, descriptor.value])); export default { presets: [], theme: { extend: { colors: { ...nonDeprecatedColors, base: { DEFAULT: 'var(--color-surface-default)', alt: 'var(--color-surface-dim)' }, box: { neutral: 'var(--color-container-secondary-default)', 'neutral-hover': 'var(--color-container-secondary-hover)', 'neutral-pressed': 'var(--color-container-secondary-active)', 'neutral-inverse': 'var(--color-container-secondary-on-secondary-container)', 'neutral-inverse-hover': 'var(--color-container-secondary-on-secondary-container)', 'neutral-inverse-pressed': 'var(--color-container-secondary-on-secondary-container)', 'neutral-strong': 'var(--color-primary-default)', 'neutral-strong-hover': 'var(--color-primary-hover)', 'neutral-strong-pressed': 'var(--color-primary-active)', 'neutral-strong-inverse': 'var(--color-primary-on-primary)', 'neutral-strong-inverse-hover': 'var(--color-primary-on-primary)', 'neutral-strong-inverse-pressed': 'var(--color-primary-on-primary)', 'neutral-mighty': 'var(--color-primary-default)', 'neutral-mighty-hover': 'var(--color-primary-hover)', 'neutral-mighty-pressed': 'var(--color-primary-active)', 'neutral-mighty-inverse': 'var(--color-primary-on-primary)', 'neutral-mighty-inverse-hover': 'var(--color-primary-on-primary)', 'neutral-mighty-inverse-pressed': 'var(--color-primary-on-primary)', selected: 'var(--color-container-highlight-default)', 'selected-hover': 'var(--color-container-highlight-hover)', 'selected-pressed': 'var(--color-container-highlight-active)', 'selected-inverse': 'var(--color-container-highlight-on-highlight-container)', 'selected-inverse-hover': 'var(--color-container-highlight-on-highlight-container)', 'selected-inverse-pressed': 'var(--color-container-highlight-on-highlight-container)', 'selected-strong': 'var(--color-highlight-default)', 'selected-strong-hover': 'var(--color-highlight-hover)', 'selected-strong-pressed': 'var(--color-highlight-active)', 'selected-strong-inverse': 'var(--color-highlight-on-highlight)', 'selected-strong-inverse-hover': 'var(--color-highlight-on-highlight)', 'selected-strong-inverse-pressed': 'var(--color-highlight-on-highlight)', disabled: 'var(--color-container-disabled-default)', 'disabled-inverse': 'var(--color-container-disabled-on-disabled)', 'disabled-strong': 'var(--color-disabled-default)', 'disabled-strong-inverse': 'var(--color-disabled-on-disabled)', positive: 'var(--color-container-success-default)', 'positive-hover': 'var(--color-container-success-hover)', 'positive-pressed': 'var(--color-container-success-active)', 'positive-inverse': 'var(--color-container-success-on-success-container)', 'positive-inverse-hover': 'var(--color-container-success-on-success-container)', 'positive-inverse-pressed': 'var(--color-container-success-on-success-container)', 'positive-strong': 'var(--color-success-default)', 'positive-strong-hover': 'var(--color-success-hover)', 'positive-strong-pressed': 'var(--color-success-active)', 'positive-strong-inverse': 'var(--color-success-on-success)', 'positive-strong-inverse-hover': 'var(--color-success-on-success)', 'positive-strong-inverse-pressed': 'var(--color-success-on-success)', negative: 'var(--color-container-error-default)', 'negative-hover': 'var(--color-container-error-hover)', 'negative-pressed': 'var(--color-container-error-active)', 'negative-inverse': 'var(--color-container-error-on-error-container)', 'negative-inverse-hover': 'var(--color-container-error-on-error-container)', 'negative-inverse-pressed': 'var(--color-container-error-on-error-container)', 'negative-strong': 'var(--color-error-default)', 'negative-strong-hover': 'var(--color-error-hover)', 'negative-strong-pressed': 'var(--color-error-active)', 'negative-strong-inverse': 'var(--color-error-on-error)', 'negative-strong-inverse-hover': 'var(--color-error-on-error)', 'negative-strong-inverse-pressed': 'var(--color-error-on-error)', warning: 'var(--color-container-warning-default)', 'warning-hover': 'var(--color-container-warning-hover)', 'warning-pressed': 'var(--color-container-warning-active)', 'warning-inverse': 'var(--color-container-warning-on-warning-container)', 'warning-inverse-hover': 'var(--color-container-warning-on-warning-container)', 'warning-inverse-pressed': 'var(--color-container-warning-on-warning-container)', 'warning-strong': 'var(--color-warning-default)', 'warning-strong-hover': 'var(--color-warning-hover)', 'warning-strong-pressed': 'var(--color-warning-active)', 'warning-strong-inverse': 'var(--color-warning-on-warning)', 'warning-strong-inverse-hover': 'var(--color-warning-on-warning)', 'warning-strong-inverse-pressed': 'var(--color-warning-on-warning)', }, focus: { shadow: 'var(--color-focus-default)' }, line: { DEFAULT: 'var(--color-line-mid)', weak: 'var(--color-line-subtle)', strong: 'var(--color-line-strong)', 'x-strong': 'var(--color-line-strong)', 'xx-strong': 'var(--color-line-strong)', mighty: 'var(--color-line-mid)', }, overlay: { shadow: 'var(--color-overlay)' }, shadow: { shadow: 'var(--color-shadow-default)' }, text: { DEFAULT: 'var(--color-primary-default)', hover: 'var(--color-primary-hover)', pressed: 'var(--color-primary-active)', weak: 'var(--color-secondary-default)', 'weak-hover': 'var(--color-secondary-hover)', 'weak-pressed': 'var(--color-secondary-active)', 'x-weak': 'var(--color-secondary-default)', disabled: 'var(--color-disabled-default)', negative: 'var(--color-error-default)', 'negative-hover': 'var(--color-error-hover)', 'negative-pressed': 'var(--color-error-active)', positive: 'var(--color-success-default)', 'positive-hover': 'var(--color-success-hover)', 'positive-pressed': 'var(--color-success-active)', warning: 'var(--color-warning-default)', 'warning-hover': 'var(--color-warning-hover)', 'warning-pressed': 'var(--color-warning-active)', interactive: 'var(--color-highlight-default)', 'interactive-hover': 'var(--color-highlight-hover)', 'interactive-pressed': 'var(--color-highlight-active)', }, button: { background: 'var(--color-container-secondary-default)', 'background-hover': 'var(--color-container-secondary-hover)', 'background-pressed': 'var(--color-container-secondary-active)', text: 'var(--color-primary-default)', icon: 'var(--color-primary-default)', border: 'var(--color-primary-default)', 'negative-background': 'var(--color-container-error-default)', 'negative-background-hover': 'var(--color-container-error-hover)', 'negative-background-pressed': 'var(--color-container-error-active)', 'negative-text': 'var(--color-container-error-on-error-container)', 'negative-icon': 'var(--color-container-error-on-error-container)', 'negative-border': 'var(--color-line-mid)', 'positive-background': 'var(--color-container-success-default)', 'positive-background-hover': 'var(--color-container-success-hover)', 'positive-background-pressed': 'var(--color-container-success-active)', 'positive-text': 'var(--color-container-success-on-success-container)', 'positive-icon': 'var(--color-container-success-on-success-container)', 'positive-border': 'var(--color-line-mid)', 'strong-background': 'var(--color-primary-default)', 'strong-background-hover': 'var(--color-primary-hover)', 'strong-background-pressed': 'var(--color-primary-active)', 'strong-text': 'var(--color-primary-on-primary)', 'strong-icon': 'var(--color-primary-on-primary)', 'strong-border': 'var(--color-line-mid)', 'strong-negative-background': 'var(--color-error-default)', 'strong-negative-background-hover': 'var(--color-error-hover)', 'strong-negative-background-pressed': 'var(--color-error-active)', 'strong-negative-text': 'var(--color-error-on-error)', 'strong-negative-icon': 'var(--color-error-on-error)', 'strong-negative-border': 'var(--color-line-mid)', 'strong-positive-background': 'var(--color-success-default)', 'strong-positive-background-hover': 'var(--color-success-hover)', 'strong-positive-background-pressed': 'var(--color-success-active)', 'strong-positive-text': 'var(--color-success-on-success)', 'strong-positive-icon': 'var(--color-success-on-success)', 'strong-positive-border': 'var(--color-line-mid)', 'danger-background': 'var(--color-error-default)', 'danger-background-hover': 'var(--color-error-hover)', 'danger-background-pressed': 'var(--color-error-active)', 'danger-text': 'var(--color-error-on-error)', 'danger-icon': 'var(--color-error-on-error)', 'danger-border': 'var(--color-line-mid)', }, }, fontSize: { ...defaultTheme.fontSize, 'body-x-small': ['var(--typography-font-size-x-small)', 'var(--typography-line-height-tight)'], 'body-small': ['var(--typography-font-size-small)', 'var(--typography-line-height-tight)'], 'body-medium': ['var(--typography-font-size-medium)', 'var(--typography-line-height-medium)'], 'body-large': ['var(--typography-font-size-large)', 'var(--typography-line-height-wide)'], 'code-small': ['var(--typography-font-size-small)', 'var(--typography-line-height-tight)'], 'code-medium': ['var(--typography-font-size-medium)', 'var(--typography-line-height-medium)'], 'code-large': ['var(--typography-font-size-large)', 'var(--typography-line-height-wide)'], 'heading-medium': ['var(--typography-font-size-medium)', 'var(--typography-line-height-tight)'], 'heading-large': ['var(--typography-font-size-large)', 'var(--typography-line-height-wide)'], 'heading-x-large': ['var(--typography-font-size-x-large)', 'var(--typography-line-height-loose)'], 'heading-xx-large': [ 'var(--typography-font-size-xx-large)', 'var(--typography-line-height-extra-loose)', ], }, fontFamily: { ...defaultTheme.fontFamily, body: 'var(--typography-font-family-primary)', 'body--stack': 'var(--typography-font-family-primary)', code: 'var(--typography-font-family-monospace)', 'code--stack': 'var(--typography-font-family-monospace)', heading: 'var(--typography-font-family-primary)', 'heading--stack': 'var(--typography-font-family-primary)', }, fontWeight: defaultTheme.fontWeight, boxShadow: { ...defaultTheme.boxShadow, matrix: 'var(--shadow-default)', 'top-matrix': 'var(--shadow-default)', 'bottom-matrix': 'var(--shadow-default)', 'large-matrix': 'var(--shadow-default)', 'inner-line': 'inset 0 0 0 var(--border-width-default) var(--color-line-mid)', 'inner-line-strong': 'inset 0 0 0 var(--border-width-default) var(--color-line-strong)', 'inner-line-x-strong': 'inset 0 0 0 var(--border-width-default) var(--color-line-strong)', 'inner-line-xx-strong': 'inset 0 0 0 var(--border-width-default) var(--color-line-strong)', }, letterSpacing: defaultTheme.letterSpacing, lineHeight: defaultTheme.lineHeight, borderWidth: { ...defaultTheme.borderWidth, DEFAULT: 'var(--border-width-default)', large: 'var(--border-width-large)', }, borderRadius: { ...defaultTheme.borderRadius, DEFAULT: 'var(--border-radius-medium)', small: 'var(--border-radius-small)', large: 'var(--border-radius-large)', 'x-large': 'var(--border-radius-x-large)', }, ringColor: { ...defaultTheme.ringColor, DEFAULT: 'var(--color-focus-default)' }, outline: { ...defaultTheme.outline, violet: '1px solid var(--color-focus-default)' }, spacing: { ...defaultTheme.spacing, xxs: 'var(--spacing-xx-small)', xs: 'var(--spacing-x-small)', s: 'var(--spacing-small)', m: 'var(--spacing-medium)', l: 'var(--spacing-large)', xl: 'var(--spacing-x-large)', xxl: 'var(--spacing-xx-large)', }, }, }, };