@frontify/fondue/dist/packages/tokens/tailwind.config.js

Design system of Frontify

/**
 * Do not edit directly
 * Generated on Wed, 28 May 2025 08:41:22 GMT
 */

import plugin from 'tailwindcss/plugin';

export default {
    darkMode: "class",
    prefix: "tw-",
    theme: {"colors":{"base":{"DEFAULT":"var(--base-color)","alt":"var(--base-color-alt)"},"box":{"neutral":"var(--box-neutral-color)","neutral-hover":"var(--box-neutral-color-hover)","neutral-pressed":"var(--box-neutral-color-pressed)","neutral-inverse":"var(--box-neutral-inverse-color)","neutral-inverse-hover":"var(--box-neutral-inverse-color-hover)","neutral-inverse-pressed":"var(--box-neutral-inverse-color-pressed)","neutral-strong":"var(--box-neutral-strong-color)","neutral-strong-hover":"var(--box-neutral-strong-color-hover)","neutral-strong-pressed":"var(--box-neutral-strong-color-pressed)","neutral-strong-inverse":"var(--box-neutral-strong-inverse-color)","neutral-strong-inverse-hover":"var(--box-neutral-strong-inverse-color-hover)","neutral-strong-inverse-pressed":"var(--box-neutral-strong-inverse-color-pressed)","neutral-mighty":"var(--box-neutral-mighty-color)","neutral-mighty-hover":"var(--box-neutral-mighty-color-hover)","neutral-mighty-pressed":"var(--box-neutral-mighty-color-pressed)","neutral-mighty-inverse":"var(--box-neutral-mighty-inverse-color)","neutral-mighty-inverse-hover":"var(--box-neutral-mighty-inverse-color-hover)","neutral-mighty-inverse-pressed":"var(--box-neutral-mighty-inverse-color-pressed)","selected":"var(--box-selected-color)","selected-hover":"var(--box-selected-color-hover)","selected-pressed":"var(--box-selected-color-pressed)","selected-inverse":"var(--box-selected-inverse-color)","selected-inverse-hover":"var(--box-selected-inverse-color-hover)","selected-inverse-pressed":"var(--box-selected-inverse-color-pressed)","selected-strong":"var(--box-selected-strong-color)","selected-strong-hover":"var(--box-selected-strong-color-hover)","selected-strong-pressed":"var(--box-selected-strong-color-pressed)","selected-strong-inverse":"var(--box-selected-strong-inverse-color)","selected-strong-inverse-hover":"var(--box-selected-strong-inverse-color-hover)","selected-strong-inverse-pressed":"var(--box-selected-strong-inverse-color-pressed)","disabled":"var(--box-disabled-color)","disabled-inverse":"var(--box-disabled-color-inverse)","disabled-strong":"var(--box-disabled-strong-color)","disabled-strong-inverse":"var(--box-disabled-strong-color-inverse)","positive":"var(--box-positive-color)","positive-hover":"var(--box-positive-color-hover)","positive-pressed":"var(--box-positive-color-pressed)","positive-inverse":"var(--box-positive-inverse-color)","positive-inverse-hover":"var(--box-positive-inverse-color-hover)","positive-inverse-pressed":"var(--box-positive-inverse-color-pressed)","positive-strong":"var(--box-positive-strong-color)","positive-strong-hover":"var(--box-positive-strong-color-hover)","positive-strong-pressed":"var(--box-positive-strong-color-pressed)","positive-strong-inverse":"var(--box-positive-strong-inverse-color)","positive-strong-inverse-hover":"var(--box-positive-strong-inverse-color-hover)","positive-strong-inverse-pressed":"var(--box-positive-strong-inverse-color-pressed)","negative":"var(--box-negative-color)","negative-hover":"var(--box-negative-color-hover)","negative-pressed":"var(--box-negative-color-pressed)","negative-inverse":"var(--box-negative-inverse-color)","negative-inverse-hover":"var(--box-negative-inverse-color-hover)","negative-inverse-pressed":"var(--box-negative-inverse-color-pressed)","negative-strong":"var(--box-negative-strong-color)","negative-strong-hover":"var(--box-negative-strong-color-hover)","negative-strong-pressed":"var(--box-negative-strong-color-pressed)","negative-strong-inverse":"var(--box-negative-strong-inverse-color)","negative-strong-inverse-hover":"var(--box-negative-strong-inverse-color-hover)","negative-strong-inverse-pressed":"var(--box-negative-strong-inverse-color-pressed)","warning":"var(--box-warning-color)","warning-hover":"var(--box-warning-color-hover)","warning-pressed":"var(--box-warning-color-pressed)","warning-inverse":"var(--box-warning-inverse-color)","warning-inverse-hover":"var(--box-warning-inverse-color-hover)","warning-inverse-pressed":"var(--box-warning-inverse-color-pressed)","warning-strong":"var(--box-warning-strong-color)","warning-strong-hover":"var(--box-warning-strong-color-hover)","warning-strong-pressed":"var(--box-warning-strong-color-pressed)","warning-strong-inverse":"var(--box-warning-strong-inverse-color)","warning-strong-inverse-hover":"var(--box-warning-strong-inverse-color-hover)","warning-strong-inverse-pressed":"var(--box-warning-strong-inverse-color-pressed)"},"focus":{"shadow":"var(--focus-ring-color)"},"line":{"DEFAULT":"var(--line-color)","weak":"var(--line-color-weak)","strong":"var(--line-color-strong)","x-strong":"var(--line-color-x-strong)","xx-strong":"var(--line-color-xx-strong)","mighty":"var(--line-color-mighty)"},"overlay":{"shadow":"var(--overlay-color)"},"shadow":{"shadow":"var(--shadow-large-color)"},"text":{"DEFAULT":"var(--text-color)","hover":"var(--text-color-hover)","pressed":"var(--text-color-pressed)","weak":"var(--text-color-weak)","weak-hover":"var(--text-color-weak-hover)","weak-pressed":"var(--text-color-weak-pressed)","x-weak":"var(--text-color-x-weak)","disabled":"var(--text-color-disabled)","negative":"var(--text-color-negative)","negative-hover":"var(--text-color-negative-hover)","negative-pressed":"var(--text-color-negative-pressed)","positive":"var(--text-color-positive)","positive-hover":"var(--text-color-positive-hover)","positive-pressed":"var(--text-color-positive-pressed)","warning":"var(--text-color-warning)","warning-hover":"var(--text-color-warning-hover)","warning-pressed":"var(--text-color-warning-pressed)","interactive":"var(--text-color-interactive)","interactive-hover":"var(--text-color-interactive-hover)","interactive-pressed":"var(--text-color-interactive-pressed)"},"button":{"background":"var(--button-background-color)","background-hover":"var(--button-background-color-hover)","background-pressed":"var(--button-background-color-pressed)","text":"var(--button-text-color)","icon":"var(--button-icon-color)","border":"var(--button-border-color)","negative-background":"var(--button-negative-background-color)","negative-background-hover":"var(--button-negative-background-color-hover)","negative-background-pressed":"var(--button-negative-background-color-pressed)","negative-text":"var(--button-negative-text-color)","negative-icon":"var(--button-negative-icon-color)","negative-border":"var(--button-negative-border-color)","positive-background":"var(--button-positive-background-color)","positive-background-hover":"var(--button-positive-background-color-hover)","positive-background-pressed":"var(--button-positive-background-color-pressed)","positive-text":"var(--button-positive-text-color)","positive-icon":"var(--button-positive-icon-color)","positive-border":"var(--button-positive-border-color)","strong-background":"var(--button-strong-background-color)","strong-background-hover":"var(--button-strong-background-color-hover)","strong-background-pressed":"var(--button-strong-background-color-pressed)","strong-text":"var(--button-strong-text-color)","strong-icon":"var(--button-strong-icon-color)","strong-border":"var(--button-strong-border-color)","strong-negative-background":"var(--button-strong-negative-background-color)","strong-negative-background-hover":"var(--button-strong-negative-background-color-hover)","strong-negative-background-pressed":"var(--button-strong-negative-background-color-pressed)","strong-negative-text":"var(--button-strong-negative-text-color)","strong-negative-icon":"var(--button-strong-negative-icon-color)","strong-negative-border":"var(--button-strong-negative-border-color)","strong-positive-background":"var(--button-strong-positive-background-color)","strong-positive-background-hover":"var(--button-strong-positive-background-color-hover)","strong-positive-background-pressed":"var(--button-strong-positive-background-color-pressed)","strong-positive-text":"var(--button-strong-positive-text-color)","strong-positive-icon":"var(--button-strong-positive-icon-color)","strong-positive-border":"var(--button-strong-positive-border-color)","danger-background":"var(--button-danger-background-color)","danger-background-hover":"var(--button-danger-background-color-hover)","danger-background-pressed":"var(--button-danger-background-color-pressed)","danger-text":"var(--button-danger-text-color)","danger-icon":"var(--button-danger-icon-color)","danger-border":"var(--button-danger-border-color)"}},"extend":{"fontSize":{"body-x-small":["var(--body-size-x-small)","var(--body-size-x-small-line-height)"],"body-small":["var(--body-size-small)","var(--body-size-small-line-height)"],"body-medium":["var(--body-size-medium)","var(--body-size-medium-line-height)"],"body-large":["var(--body-size-large)","var(--body-size-large-line-height)"],"code-small":["var(--code-size-small)","var(--code-size-small-line-height)"],"code-medium":["var(--code-size-medium)","var(--code-size-medium-line-height)"],"code-large":["var(--code-size-large)","var(--code-size-large-line-height)"],"heading-medium":["var(--heading-size-medium)","var(--heading-size-medium-line-height)"],"heading-large":["var(--heading-size-large)","var(--heading-size-large-line-height)"],"heading-x-large":["var(--heading-size-x-large)","var(--heading-size-x-large-line-height)"],"heading-xx-large":["var(--heading-size-xx-large)","var(--heading-size-xx-large-line-height)"]},"fontFamily":{"body":"var(--body-family)","body--stack":"var(--body-family-stack)","code":"var(--code-family)","code--stack":"var(--code-family-stack)","heading":"var(--heading-family)","heading--stack":"var(--heading-family-stack)"},"boxShadow":{"matrix":"var(--shadow-matrix)","top-matrix":"var(--shadow-top-matrix)","bottom-matrix":"var(--shadow-bottom-matrix)","large-matrix":"var(--shadow-large-matrix)","inner-line":"inset 0 0 0 var(--line-width) var(--line-color)","inner-line-strong":"inset 0 0 0 var(--line-width) var(--line-color-strong)","inner-line-x-strong":"inset 0 0 0 var(--line-width) var(--line-color-x-strong)","inner-line-xx-strong":"inset 0 0 0 var(--line-width) var(--line-color-xx-strong)"},"borderWidth":{"DEFAULT":"var(--line-width)","large":"var(--line-width-large)"},"borderRadius":{"DEFAULT":"var(--radius)","small":"var(--radius-small)","large":"var(--radius-large)","x-large":"var(--radius-x-large)"},"ringColor":{"DEFAULT":"var(--focus-ring-color)"},"outline":{"violet":"1px solid var(--focus-ring-color)"},"spacing":{"xxs":"var(--space-xxs)","xs":"var(--space-xs)","s":"var(--space-s)","m":"var(--space-m)","l":"var(--space-l)","xl":"var(--space-xl)","xxl":"var(--space-xxl)"}}},
    plugins: [
        plugin(function({ addComponents, addUtilities}) {
            const components = {};
            addComponents(components);
        }),
    ]
}

export const fondueDiatypeTypographyUtil = plugin(({ addUtilities }) => {
    addUtilities({
        '.italic, i, em': {
            fontStyle: normal,
            fontFeatureSettings: '"ss01"',
            fontVariationSettings: '"slnt" -12',
        },
    });
});