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

Design system of Frontify

import plugin from 'tailwindcss/plugin';

export default {
    theme: {"colors":{"charts":{"dim":{"DEFAULT":"var(--color-charts-dim-default)"},"missing":{"DEFAULT":"var(--color-charts-missing-default)"},"negative":{"DEFAULT":"var(--color-charts-negative-default)","hover":"var(--color-charts-negative-hover)","subtle":"var(--color-charts-negative-subtle)"},"primary":{"DEFAULT":"var(--color-charts-primary-default)","hover":"var(--color-charts-primary-hover)","subtle":"var(--color-charts-primary-subtle)"},"secondary":{"DEFAULT":"var(--color-charts-secondary-default)","hover":"var(--color-charts-secondary-hover)","subtle":"var(--color-charts-secondary-subtle)"},"tertiary":{"DEFAULT":"var(--color-charts-tertiary-default)","hover":"var(--color-charts-tertiary-hover)","subtle":"var(--color-charts-tertiary-subtle)"}},"container":{"disabled":{"DEFAULT":"var(--color-container-disabled-default)","on-disabled-container":"var(--color-container-disabled-on-disabled-container)"},"error":{"active":"var(--color-container-error-active)","DEFAULT":"var(--color-container-error-default)","hover":"var(--color-container-error-hover)","on-error-container":"var(--color-container-error-on-error-container)"},"highlight":{"active":"var(--color-container-highlight-active)","DEFAULT":"var(--color-container-highlight-default)","hover":"var(--color-container-highlight-hover)","on-highlight-container":"var(--color-container-highlight-on-highlight-container)"},"secondary":{"active":"var(--color-container-secondary-active)","DEFAULT":"var(--color-container-secondary-default)","hover":"var(--color-container-secondary-hover)","on-secondary-container":"var(--color-container-secondary-on-secondary-container)","on-secondary-container-variant":"var(--color-container-secondary-on-secondary-container-variant)"},"success":{"active":"var(--color-container-success-active)","DEFAULT":"var(--color-container-success-default)","hover":"var(--color-container-success-hover)","on-success-container":"var(--color-container-success-on-success-container)"},"warning":{"active":"var(--color-container-warning-active)","DEFAULT":"var(--color-container-warning-default)","hover":"var(--color-container-warning-hover)","on-warning-container":"var(--color-container-warning-on-warning-container)"}},"disabled":{"DEFAULT":"var(--color-disabled-default)","on-disabled":"var(--color-disabled-on-disabled)"},"error":{"active":"var(--color-error-active)","DEFAULT":"var(--color-error-default)","hover":"var(--color-error-hover)","on-error":"var(--color-error-on-error)"},"focus":{"contrast":"var(--color-focus-contrast)","DEFAULT":"var(--color-focus-default)"},"highlight":{"active":"var(--color-highlight-active)","DEFAULT":"var(--color-highlight-default)","hover":"var(--color-highlight-hover)","on-highlight":"var(--color-highlight-on-highlight)"},"line":{"mid":"var(--color-line-mid)","strong":"var(--color-line-strong)","subtle":"var(--color-line-subtle)"},"low-contrast":{"DEFAULT":"var(--color-low-contrast-default)"},"overlay":{"DEFAULT":"var(--color-overlay-default)"},"primary":{"active":"var(--color-primary-active)","DEFAULT":"var(--color-primary-default)","hover":"var(--color-primary-hover)","on-primary":"var(--color-primary-on-primary)","on-primary-variant":"var(--color-primary-on-primary-variant)"},"secondary":{"active":"var(--color-secondary-active)","DEFAULT":"var(--color-secondary-default)","hover":"var(--color-secondary-hover)","on-secondary":"var(--color-secondary-on-secondary)"},"shadow":{"DEFAULT":"var(--color-shadow-default)"},"success":{"active":"var(--color-success-active)","DEFAULT":"var(--color-success-default)","hover":"var(--color-success-hover)","on-success":"var(--color-success-on-success)"},"surface":{"active":"var(--color-surface-active)","DEFAULT":"var(--color-surface-default)","dim":"var(--color-surface-dim)","hover":"var(--color-surface-hover)"},"warning":{"active":"var(--color-warning-active)","DEFAULT":"var(--color-warning-default)","hover":"var(--color-warning-hover)","on-warning":"var(--color-warning-on-warning)"},"inherit":"inherit","current":"currentColor","transparent":"transparent"},"fontSize":{"large":"var(--typography-font-size-large)","medium":"var(--typography-font-size-medium)","small":"var(--typography-font-size-small)","x-large":"var(--typography-font-size-x-large)","x-small":"var(--typography-font-size-x-small)","xx-large":"var(--typography-font-size-xx-large)","xx-small":"var(--typography-font-size-xx-small)"},"fontWeight":{"bold":"var(--typography-font-weight-bold)","medium":"var(--typography-font-weight-medium)","regular":"var(--typography-font-weight-regular)"},"fontFamily":{"monospace":"var(--typography-font-family-monospace)","primary":"var(--typography-font-family-primary)"},"letterSpacing":{"DEFAULT":"var(--typography-letter-spacing-default)","wide":"var(--typography-letter-spacing-wide)"},"lineHeight":{"extra-loose":"var(--typography-line-height-extra-loose)","loose":"var(--typography-line-height-loose)","medium":"var(--typography-line-height-medium)","tight":"var(--typography-line-height-tight)","wide":"var(--typography-line-height-wide)"},"borderRadius":{"large":"var(--border-radius-large)","medium":"var(--border-radius-medium)","small":"var(--border-radius-small)","x-large":"var(--border-radius-x-large)","DEFAULT":"var(--border-radius-medium)","full":"9999px"},"borderWidth":{"DEFAULT":"var(--border-width-default)","large":"var(--border-width-large)"},"outlineColor":{"DEFAULT":"var(--color-focus-default)"},"outlineWidth":{"DEFAULT":"4px"},"outlineOffset":{"DEFAULT":"2px"},"boxShadow":{"big":"var(--shadow-big)","DEFAULT":"var(--shadow-default)","mid":"var(--shadow-mid)"},"extend":{"spacing":{"large":"var(--spacing-large)","medium":"var(--spacing-medium)","small":"var(--spacing-small)","x-large":"var(--spacing-x-large)","x-small":"var(--spacing-x-small)","xx-large":"var(--spacing-xx-large)","xx-small":"var(--spacing-xx-small)"}}},
    plugins: [plugin(function({ addUtilities }) {
      addUtilities({
        '.body-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-large-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-medium': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-medium-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-medium-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-small': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-small-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-small-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-category': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-uppercase)", letterSpacing: "var(--typography-letter-spacing-wide)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-category-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-uppercase)", letterSpacing: "var(--typography-letter-spacing-wide)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.heading-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.heading-medium': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-medium-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-x-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-loose)" }, '.heading-x-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-loose)" }, '.heading-xx-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-extra-loose)" }, '.heading-xx-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-extra-loose)" }, 
        '.ring-focus': {boxShadow: '0 0 0 2px var(--color-surface-default), 0 0 0 6px var(--color-focus-default)',outline: 'none',}
      })
    })],
};