@frontify/fondue/dist/packages/tokens/legacy/deprecatedTailwindConfig.ts

Design system of Frontify

/* (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)',
            },
        },
    },
};