@jgmelgares/tw-presets
Version:
A reusable Tailwind CSS preset package for creating consistent and customizable design systems. This package includes a Tailwind preset configuration and a CSS file with predefined variables to streamline your development workflow.
970 lines (945 loc) • 53.2 kB
text/typescript
import { type Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";
import { type PluginAPI } from "tailwindcss/types/config";
const tailwindPreset: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
textColor: {
"content-primary": "var(--text-content-primary)",
"content-secondary": "var(--text-content-secondary)",
"content-tertiary": "var(--text-content-tertiary)",
"content-primary-inverse": "var(--text-content-primary-inverse)",
"content-secondary-inverse": "var(--text-content-secondary-inverse)",
"content-tertiary-inverse": "var(--text-content-tertiary-inverse)",
neutral: "var(--text-neutral)",
"neutral-hover": "var(--text-neutral-hover)",
"neutral-active": "var(--text-neutral-active)",
"neutral-subtle": "var(--text-neutral-subtle)",
"neutral-bold": "var(--text-neutral-bold)",
"neutral-inverse": "var(--text-neutral-inverse)",
"neutral-disabled": "var(--text-neutral-disabled)",
"neutral-placeholder": "var(--text-neutral-placeholder)",
primary: "var(--text-primary)",
"primary-hover": "var(--text-primary-hover)",
"primary-active": "var(--text-primary-active)",
"primary-subtle": "var(--text-primary-subtle)",
"primary-bold": "var(--text-primary-bold)",
"primary-inverse": "var(--text-primary-inverse)",
"primary-disabled": "var(--text-primary-disabled)",
"primary-placeholder": "var(--text-primary-placeholder)",
secondary: "var(--text-secondary)",
"secondary-hover": "var(--text-secondary-hover)",
"secondary-active": "var(--text-secondary-active)",
"secondary-subtle": "var(--text-secondary-subtle)",
"secondary-bold": "var(--text-secondary-bold)",
"secondary-inverse": "var(--text-secondary-inverse)",
"secondary-disabled": "var(--text-secondary-disabled)",
"secondary-placeholder": "var(--text-secondary-placeholder)",
info: "var(--text-info)",
"info-hover": "var(--text-info-hover)",
"info-active": "var(--text-info-active)",
"info-subtle": "var(--text-info-subtle)",
"info-bold": "var(--text-info-bold)",
"info-inverse": "var(--text-info-inverse)",
"info-disabled": "var(--text-info-disabled)",
"info-placeholder": "var(--text-info-placeholder)",
success: "var(--text-success)",
"success-hover": "var(--text-success-hover)",
"success-active": "var(--text-success-active)",
"success-subtle": "var(--text-success-subtle)",
"success-bold": "var(--text-success-bold)",
"success-inverse": "var(--text-success-inverse)",
"success-disabled": "var(--text-success-disabled)",
"success-placeholder": "var(--text-success-placeholder)",
warning: "var(--text-warning)",
"warning-hover": "var(--text-warning-hover)",
"warning-active": "var(--text-warning-active)",
"warning-subtle": "var(--text-warning-subtle)",
"warning-bold": "var(--text-warning-bold)",
"warning-inverse": "var(--text-warning-inverse)",
"warning-disabled": "var(--text-warning-disabled)",
"warning-placeholder": "var(--text-warning-placeholder)",
danger: "var(--text-danger)",
"danger-hover": "var(--text-danger-hover)",
"danger-active": "var(--text-danger-active)",
"danger-subtle": "var(--text-danger-subtle)",
"danger-bold": "var(--text-danger-bold)",
"danger-inverse": "var(--text-danger-inverse)",
"danger-disabled": "var(--text-danger-disabled)",
"danger-placeholder": "var(--text-danger-placeholder)",
advertising: "var(--text-advertising)",
"advertising-hover": "var(--text-advertising-hover)",
"advertising-active": "var(--text-advertising-active)",
"advertising-subtle": "var(--text-advertising-subtle)",
"advertising-bold": "var(--text-advertising-bold)",
"advertising-inverse": "var(--text-advertising-inverse)",
"advertising-disabled": "var(--text-advertising-disabled)",
"advertising-placeholder": "var(--text-advertising-placeholder)",
link: "var(--link)",
"link-active": "var(--link-active)",
"link-visited": "var(--link-visited)",
"link-visited-active": "var(--link-visited-active)",
"link-disabled": "var(--link-disabled)",
},
font: {
"heading-9xl": "var(--heading-9xlarge)",
"heading-8xl": "var(--heading-8xlarge)",
"heading-7xl": "var(--heading-7xlarge)",
"heading-6xl": "var(--heading-6xlarge)",
"heading-5xl": "var(--heading-5xlarge)",
"heading-4xl": "var(--heading-4xlarge)",
"heading-3xl": "var(--heading-3xlarge)",
"heading-2xl": "var(--heading-2xlarge)",
"heading-xl": "var(--heading-xlarge)",
"heading-lg": "var(--heading-large)",
"heading-md": "var(--heading-base)",
"heading-sm": "var(--heading-small)",
"heading-xs": "var(--heading-xsmall)",
"body-lg-light": "var(--body-lg-light)",
"body-light": "var(--body-base-light)",
"body-sm-light": "var(--body-sm-light)",
"body-lg": "var(--body-lg)",
body: "var(--body-base)",
"body-sm": "var(--body-sm)",
"body-lg-medium": "var(--body-lg-medium)",
"body-medium": "var(--body-base-medium)",
"body-sm-medium": "var(--body-sm-medium)",
"body-lg-semibold": "var(--body-lg-semibold)",
"body-semibold": "var(--body-base-semibold)",
"body-sm-semibold": "var(--body-sm-semibold)",
"body-lg-bold": "var(--body-lg-bold)",
"body-bold": "var(--body-base-bold)",
"body-sm-bold": "var(--body-sm-bold)",
code: "var(--code)",
},
backgroundColor: {
"surface-base": "var(--surface-base)",
"surface-content": "var(--surface-content)",
"surface-content-hover": "var(--surface-content-hover)",
"surface-content-active": "var(--surface-content-active)",
"surface-raised": "var(--surface-raised)",
"surface-raised-hover": "var(--surface-raised-hover)",
"surface-raised-active": "var(--surface-raised-active)",
"surface-overlay": "var(--surface-overlay)",
"surface-overlay-hover": "var(--surface-overlay-hover)",
"surface-overlay-active": "var(--surface-overlay-active)",
"surface-sunken": "var(--surface-sunken)",
neutral: "var(--background-neutral)",
"neutral-hover": "var(--background-neutral-hover)",
"neutral-active": "var(--background-neutral-active)",
"neutral-focus": "var(--background-neutral-focus)",
"neutral-disabled": "var(--background-neutral-disabled)",
"neutral-subtle": "var(--background-neutral-subtle)",
"neutral-subtle-hover": "var(--background-neutral-subtle-hover)",
"neutral-subtle-active": "var(--background-neutral-subtle-active)",
"neutral-subtle-focus": "var(--background-neutral-subtle-focus)",
"neutral-bold": "var(--background-neutral-bold)",
"neutral-bold-hover": "var(--background-neutral-bold-hover)",
"neutral-bold-active": "var(--background-neutral-bold-active)",
"neutral-bold-focus": "var(--background-neutral-bold-focus)",
primary: "var(--background-primary)",
"primary-hover": "var(--background-primary-hover)",
"primary-active": "var(--background-primary-active)",
"primary-focus": "var(--background-primary-focus)",
"primary-disabled": "var(--background-primary-disabled)",
"primary-subtle": "var(--background-primary-subtle)",
"primary-subtle-hover": "var(--background-primary-subtle-hover)",
"primary-subtle-active": "var(--background-primary-subtle-active)",
"primary-subtle-focus": "var(--background-primary-subtle-focus)",
"primary-bold": "var(--background-primary-bold)",
"primary-bold-hover": "var(--background-primary-bold-hover)",
"primary-bold-active": "var(--background-primary-bold-active)",
"primary-bold-focus": "var(--background-primary-bold-focus)",
secondary: "var(--background-secondary)",
"secondary-hover": "var(--background-secondary-hover)",
"secondary-active": "var(--background-secondary-active)",
"secondary-focus": "var(--background-secondary-focus)",
"secondary-disabled": "var(--background-secondary-disabled)",
"secondary-subtle": "var(--background-secondary-subtle)",
"secondary-subtle-hover": "var(--background-secondary-subtle-hover)",
"secondary-subtle-active": "var(--background-secondary-subtle-active)",
"secondary-subtle-focus": "var(--background-secondary-subtle-focus)",
"secondary-bold": "var(--background-secondary-bold)",
"secondary-bold-hover": "var(--background-secondary-bold-hover)",
"secondary-bold-active": "var(--background-secondary-bold-active)",
"secondary-bold-focus": "var(--background-secondary-bold-focus)",
info: "var(--background-info)",
"info-hover": "var(--background-info-hover)",
"info-active": "var(--background-info-active)",
"info-focus": "var(--background-info-focus)",
"info-disabled": "var(--background-info-disabled)",
"info-subtle": "var(--background-info-subtle)",
"info-subtle-hover": "var(--background-info-subtle-hover)",
"info-subtle-active": "var(--background-info-subtle-active)",
"info-subtle-focus": "var(--background-info-subtle-focus)",
"info-bold": "var(--background-info-bold)",
"info-bold-hover": "var(--background-info-bold-hover)",
"info-bold-active": "var(--background-info-bold-active)",
"info-bold-focus": "var(--background-info-bold-focus)",
success: "var(--background-success)",
"success-hover": "var(--background-success-hover)",
"success-active": "var(--background-success-active)",
"success-focus": "var(--background-success-focus)",
"success-disabled": "var(--background-success-disabled)",
"success-subtle": "var(--background-success-subtle)",
"success-subtle-hover": "var(--background-success-subtle-hover)",
"success-subtle-active": "var(--background-success-subtle-active)",
"success-subtle-focus": "var(--background-success-subtle-focus)",
"success-bold": "var(--background-success-bold)",
"success-bold-hover": "var(--background-success-bold-hover)",
"success-bold-active": "var(--background-success-bold-active)",
"success-bold-focus": "var(--background-success-bold-focus)",
warning: "var(--background-warning)",
"warning-hover": "var(--background-warning-hover)",
"warning-active": "var(--background-warning-active)",
"warning-focus": "var(--background-warning-focus)",
"warning-disabled": "var(--background-warning-disabled)",
"warning-subtle": "var(--background-warning-subtle)",
"warning-subtle-hover": "var(--background-warning-subtle-hover)",
"warning-subtle-active": "var(--background-warning-subtle-active)",
"warning-subtle-focus": "var(--background-warning-subtle-focus)",
"warning-bold": "var(--background-warning-bold)",
"warning-bold-hover": "var(--background-warning-bold-hover)",
"warning-bold-active": "var(--background-warning-bold-active)",
"warning-bold-focus": "var(--background-warning-bold-focus)",
danger: "var(--background-danger)",
"danger-hover": "var(--background-danger-hover)",
"danger-active": "var(--background-danger-active)",
"danger-focus": "var(--background-danger-focus)",
"danger-disabled": "var(--background-danger-disabled)",
"danger-subtle": "var(--background-danger-subtle)",
"danger-subtle-hover": "var(--background-danger-subtle-hover)",
"danger-subtle-active": "var(--background-danger-subtle-active)",
"danger-subtle-focus": "var(--background-danger-subtle-focus)",
"danger-bold": "var(--background-danger-bold)",
"danger-bold-hover": "var(--background-danger-bold-hover)",
"danger-bold-active": "var(--background-danger-bold-active)",
"danger-bold-focus": "var(--background-danger-bold-focus)",
advertising: "var(--background-advertising)",
"advertising-hover": "var(--background-advertising-hover)",
"advertising-active": "var(--background-advertising-active)",
"advertising-focus": "var(--background-advertising-focus)",
"advertising-disabled": "var(--background-advertising-disabled)",
"advertising-subtle": "var(--background-advertising-subtle)",
"advertising-subtle-hover":
"var(--background-advertising-subtle-hover)",
"advertising-subtle-active":
"var(--background-advertising-subtle-active)",
"advertising-subtle-focus":
"var(--background-advertising-subtle-focus)",
"advertising-bold": "var(--background-advertising-bold)",
"advertising-bold-hover": "var(--background-advertising-bold-hover)",
"advertising-bold-active": "var(--background-advertising-bold-active)",
"advertising-bold-focus": "var(--background-advertising-bold-focus)",
overlay: "var(--background-overlay)",
progressbar: {
background: "var(--progressbar-background)",
neutral: "var(--progressbar-neutral)",
primary: "var(--progressbar-primary)",
secondary: "var(--progressbar-secondary)",
info: "var(--progressbar-info)",
success: "var(--progressbar-success)",
warning: "var(--progressbar-warning)",
danger: "var(--progressbar-danger)",
advertising: "var(--progressbar-advertising)",
},
},
borderColor: {
neutral: "var(--border-neutral)",
"neutral-hover": "var(--border-neutral-hover)",
"neutral-active": "var(--border-neutral-active)",
"neutral-focus": "var(--border-neutral-focus)",
"neutral-subtle": "var(--border-neutral-subtle)",
"neutral-subtle-hover": "var(--border-neutral-subtle-hover)",
"neutral-subtle-active": "var(--border-neutral-subtle-active)",
"neutral-subtle-focus": "var(--border-neutral-subtle-focus)",
"neutral-bold": "var(--border-neutral-bold)",
"neutral-bold-hover": "var(--border-neutral-bold-hover)",
"neutral-bold-active": "var(--border-neutral-bold-active)",
"neutral-bold-focus": "var(--border-neutral-bold-focus)",
"neutral-disabled": "var(--border-neutral-disabled)",
divider: "var(--border-divider)",
"divider-bold": "var(--border-divider-bold)",
primary: "var(--border-primary)",
"primary-hover": "var(--border-primary-hover)",
"primary-active": "var(--border-primary-active)",
"primary-focus": "var(--border-primary-focus)",
"primary-subtle": "var(--border-primary-subtle)",
"primary-subtle-hover": "var(--border-primary-subtle-hover)",
"primary-subtle-active": "var(--border-primary-subtle-active)",
"primary-subtle-focus": "var(--border-primary-subtle-focus)",
"primary-bold": "var(--border-primary-bold)",
"primary-bold-hover": "var(--border-primary-bold-hover)",
"primary-bold-active": "var(--border-primary-bold-active)",
"primary-bold-focus": "var(--border-primary-bold-focus)",
"primary-disabled": "var(--border-primary-disabled)",
secondary: "var(--border-secondary)",
"secondary-hover": "var(--border-secondary-hover)",
"secondary-active": "var(--border-secondary-active)",
"secondary-focus": "var(--border-secondary-focus)",
"secondary-subtle": "var(--border-secondary-subtle)",
"secondary-subtle-hover": "var(--border-secondary-subtle-hover)",
"secondary-subtle-active": "var(--border-secondary-subtle-active)",
"secondary-subtle-focus": "var(--border-secondary-subtle-focus)",
"secondary-bold": "var(--border-secondary-bold)",
"secondary-bold-hover": "var(--border-secondary-bold-hover)",
"secondary-bold-active": "var(--border-secondary-bold-active)",
"secondary-bold-focus": "var(--border-secondary-bold-focus)",
"secondary-disabled": "var(--border-secondary-disabled)",
info: "var(--border-info)",
"info-hover": "var(--border-info-hover)",
"info-active": "var(--border-info-active)",
"info-focus": "var(--border-info-focus)",
"info-subtle": "var(--border-info-subtle)",
"info-subtle-hover": "var(--border-info-subtle-hover)",
"info-subtle-active": "var(--border-info-subtle-active)",
"info-subtle-focus": "var(--border-info-subtle-focus)",
"info-bold": "var(--border-info-bold)",
"info-bold-hover": "var(--border-info-bold-hover)",
"info-bold-active": "var(--border-info-bold-active)",
"info-bold-focus": "var(--border-info-bold-focus)",
"info-disabled": "var(--border-info-disabled)",
success: "var(--border-success)",
"success-hover": "var(--border-success-hover)",
"success-active": "var(--border-success-active)",
"success-focus": "var(--border-success-focus)",
"success-subtle": "var(--border-success-subtle)",
"success-subtle-hover": "var(--border-success-subtle-hover)",
"success-subtle-active": "var(--border-success-subtle-active)",
"success-subtle-focus": "var(--border-success-subtle-focus)",
"success-bold": "var(--border-success-bold)",
"success-bold-hover": "var(--border-success-bold-hover)",
"success-bold-active": "var(--border-success-bold-active)",
"success-bold-focus": "var(--border-success-bold-focus)",
"success-disabled": "var(--border-success-disabled)",
warning: "var(--border-warning)",
"warning-hover": "var(--border-warning-hover)",
"warning-active": "var(--border-warning-active)",
"warning-focus": "var(--border-warning-focus)",
"warning-subtle": "var(--border-warning-subtle)",
"warning-subtle-hover": "var(--border-warning-subtle-hover)",
"warning-subtle-active": "var(--border-warning-subtle-active)",
"warning-subtle-focus": "var(--border-warning-subtle-focus)",
"warning-bold": "var(--border-warning-bold)",
"warning-bold-hover": "var(--border-warning-bold-hover)",
"warning-bold-active": "var(--border-warning-bold-active)",
"warning-bold-focus": "var(--border-warning-bold-focus)",
"warning-disabled": "var(--border-warning-disabled)",
danger: "var(--border-danger)",
"danger-hover": "var(--border-danger-hover)",
"danger-active": "var(--border-danger-active)",
"danger-focus": "var(--border-danger-focus)",
"danger-subtle": "var(--border-danger-subtle)",
"danger-subtle-hover": "var(--border-danger-subtle-hover)",
"danger-subtle-active": "var(--border-danger-subtle-active)",
"danger-subtle-focus": "var(--border-danger-subtle-focus)",
"danger-bold": "var(--border-danger-bold)",
"danger-bold-hover": "var(--border-danger-bold-hover)",
"danger-bold-active": "var(--border-danger-bold-active)",
"danger-bold-focus": "var(--border-danger-bold-focus)",
"danger-disabled": "var(--border-danger-disabled)",
advertising: "var(--border-advertising)",
"advertising-hover": "var(--border-advertising-hover)",
"advertising-active": "var(--border-advertising-active)",
"advertising-focus": "var(--border-advertising-focus)",
"advertising-subtle": "var(--border-advertising-subtle)",
"advertising-subtle-hover": "var(--border-advertising-subtle-hover)",
"advertising-subtle-active": "var(--border-advertising-subtle-active)",
"advertising-subtle-focus": "var(--border-advertising-subtle-focus)",
"advertising-bold": "var(--border-advertising-bold)",
"advertising-bold-hover": "var(--border-advertising-bold-hover)",
"advertising-bold-active": "var(--border-advertising-bold-active)",
"advertising-bold-focus": "var(--border-advertising-bold-focus)",
"advertising-disabled": "var(--border-advertising-disabled)",
},
outlineColor: {
neutral: "var(--border-neutral)",
"neutral-hover": "var(--border-neutral-hover)",
"neutral-active": "var(--border-neutral-active)",
"neutral-focus": "var(--border-neutral-focus)",
"neutral-subtle": "var(--border-neutral-subtle)",
"neutral-subtle-hover": "var(--border-neutral-subtle-hover)",
"neutral-subtle-active": "var(--border-neutral-subtle-active)",
"neutral-subtle-focus": "var(--border-neutral-subtle-focus)",
"neutral-bold": "var(--border-neutral-bold)",
"neutral-bold-hover": "var(--border-neutral-bold-hover)",
"neutral-bold-active": "var(--border-neutral-bold-active)",
"neutral-bold-focus": "var(--border-neutral-bold-focus)",
"neutral-disabled": "var(--border-neutral-disabled)",
primary: "var(--border-primary)",
"primary-hover": "var(--border-primary-hover)",
"primary-active": "var(--border-primary-active)",
"primary-focus": "var(--border-primary-focus)",
"primary-subtle": "var(--border-primary-subtle)",
"primary-subtle-hover": "var(--border-primary-subtle-hover)",
"primary-subtle-active": "var(--border-primary-subtle-active)",
"primary-subtle-focus": "var(--border-primary-subtle-focus)",
"primary-bold": "var(--border-primary-bold)",
"primary-bold-hover": "var(--border-primary-bold-hover)",
"primary-bold-active": "var(--border-primary-bold-active)",
"primary-bold-focus": "var(--border-primary-bold-focus)",
"primary-disabled": "var(--border-primary-disabled)",
secondary: "var(--border-secondary)",
"secondary-hover": "var(--border-secondary-hover)",
"secondary-active": "var(--border-secondary-active)",
"secondary-focus": "var(--border-secondary-focus)",
"secondary-subtle": "var(--border-secondary-subtle)",
"secondary-subtle-hover": "var(--border-secondary-subtle-hover)",
"secondary-subtle-active": "var(--border-secondary-subtle-active)",
"secondary-subtle-focus": "var(--border-secondary-subtle-focus)",
"secondary-bold": "var(--border-secondary-bold)",
"secondary-bold-hover": "var(--border-secondary-bold-hover)",
"secondary-bold-active": "var(--border-secondary-bold-active)",
"secondary-bold-focus": "var(--border-secondary-bold-focus)",
"secondary-disabled": "var(--border-secondary-disabled)",
info: "var(--border-info)",
"info-hover": "var(--border-info-hover)",
"info-active": "var(--border-info-active)",
"info-focus": "var(--border-info-focus)",
"info-subtle": "var(--border-info-subtle)",
"info-subtle-hover": "var(--border-info-subtle-hover)",
"info-subtle-active": "var(--border-info-subtle-active)",
"info-subtle-focus": "var(--border-info-subtle-focus)",
"info-bold": "var(--border-info-bold)",
"info-bold-hover": "var(--border-info-bold-hover)",
"info-bold-active": "var(--border-info-bold-active)",
"info-bold-focus": "var(--border-info-bold-focus)",
"info-disabled": "var(--border-info-disabled)",
success: "var(--border-success)",
"success-hover": "var(--border-success-hover)",
"success-active": "var(--border-success-active)",
"success-focus": "var(--border-success-focus)",
"success-subtle": "var(--border-success-subtle)",
"success-subtle-hover": "var(--border-success-subtle-hover)",
"success-subtle-active": "var(--border-success-subtle-active)",
"success-subtle-focus": "var(--border-success-subtle-focus)",
"success-bold": "var(--border-success-bold)",
"success-bold-hover": "var(--border-success-bold-hover)",
"success-bold-active": "var(--border-success-bold-active)",
"success-bold-focus": "var(--border-success-bold-focus)",
"success-disabled": "var(--border-success-disabled)",
warning: "var(--border-warning)",
"warning-hover": "var(--border-warning-hover)",
"warning-active": "var(--border-warning-active)",
"warning-focus": "var(--border-warning-focus)",
"warning-subtle": "var(--border-warning-subtle)",
"warning-subtle-hover": "var(--border-warning-subtle-hover)",
"warning-subtle-active": "var(--border-warning-subtle-active)",
"warning-subtle-focus": "var(--border-warning-subtle-focus)",
"warning-bold": "var(--border-warning-bold)",
"warning-bold-hover": "var(--border-warning-bold-hover)",
"warning-bold-active": "var(--border-warning-bold-active)",
"warning-bold-focus": "var(--border-warning-bold-focus)",
"warning-disabled": "var(--border-warning-disabled)",
danger: "var(--border-danger)",
"danger-hover": "var(--border-danger-hover)",
"danger-active": "var(--border-danger-active)",
"danger-focus": "var(--border-danger-focus)",
"danger-subtle": "var(--border-danger-subtle)",
"danger-subtle-hover": "var(--border-danger-subtle-hover)",
"danger-subtle-active": "var(--border-danger-subtle-active)",
"danger-subtle-focus": "var(--border-danger-subtle-focus)",
"danger-bold": "var(--border-danger-bold)",
"danger-bold-hover": "var(--border-danger-bold-hover)",
"danger-bold-active": "var(--border-danger-bold-active)",
"danger-bold-focus": "var(--border-danger-bold-focus)",
"danger-disabled": "var(--border-danger-disabled)",
advertising: "var(--border-advertising)",
"advertising-hover": "var(--border-advertising-hover)",
"advertising-active": "var(--border-advertising-active)",
"advertising-focus": "var(--border-advertising-focus)",
"advertising-subtle": "var(--border-advertising-subtle)",
"advertising-subtle-hover": "var(--border-advertising-subtle-hover)",
"advertising-subtle-active": "var(--border-advertising-subtle-active)",
"advertising-subtle-focus": "var(--border-advertising-subtle-focus)",
"advertising-bold": "var(--border-advertising-bold)",
"advertising-bold-hover": "var(--border-advertising-bold-hover)",
"advertising-bold-active": "var(--border-advertising-bold-active)",
"advertising-bold-focus": "var(--border-advertising-bold-focus)",
"advertising-disabled": "var(--border-advertising-disabled)",
},
ringColor: {
neutral: "var(--border-neutral)",
"neutral-hover": "var(--border-neutral-hover)",
"neutral-active": "var(--border-neutral-active)",
"neutral-focus": "var(--border-neutral-focus)",
"neutral-subtle": "var(--border-neutral-subtle)",
"neutral-subtle-hover": "var(--border-neutral-subtle-hover)",
"neutral-subtle-active": "var(--border-neutral-subtle-active)",
"neutral-subtle-focus": "var(--border-neutral-subtle-focus)",
"neutral-bold": "var(--border-neutral-bold)",
"neutral-bold-hover": "var(--border-neutral-bold-hover)",
"neutral-bold-active": "var(--border-neutral-bold-active)",
"neutral-bold-focus": "var(--border-neutral-bold-focus)",
"neutral-disabled": "var(--border-neutral-disabled)",
primary: "var(--border-primary)",
"primary-hover": "var(--border-primary-hover)",
"primary-active": "var(--border-primary-active)",
"primary-focus": "var(--border-primary-focus)",
"primary-subtle": "var(--border-primary-subtle)",
"primary-subtle-hover": "var(--border-primary-subtle-hover)",
"primary-subtle-active": "var(--border-primary-subtle-active)",
"primary-subtle-focus": "var(--border-primary-subtle-focus)",
"primary-bold": "var(--border-primary-bold)",
"primary-bold-hover": "var(--border-primary-bold-hover)",
"primary-bold-active": "var(--border-primary-bold-active)",
"primary-bold-focus": "var(--border-primary-bold-focus)",
"primary-disabled": "var(--border-primary-disabled)",
secondary: "var(--border-secondary)",
"secondary-hover": "var(--border-secondary-hover)",
"secondary-active": "var(--border-secondary-active)",
"secondary-focus": "var(--border-secondary-focus)",
"secondary-subtle": "var(--border-secondary-subtle)",
"secondary-subtle-hover": "var(--border-secondary-subtle-hover)",
"secondary-subtle-active": "var(--border-secondary-subtle-active)",
"secondary-subtle-focus": "var(--border-secondary-subtle-focus)",
"secondary-bold": "var(--border-secondary-bold)",
"secondary-bold-hover": "var(--border-secondary-bold-hover)",
"secondary-bold-active": "var(--border-secondary-bold-active)",
"secondary-bold-focus": "var(--border-secondary-bold-focus)",
"secondary-disabled": "var(--border-secondary-disabled)",
info: "var(--border-info)",
"info-hover": "var(--border-info-hover)",
"info-active": "var(--border-info-active)",
"info-focus": "var(--border-info-focus)",
"info-subtle": "var(--border-info-subtle)",
"info-subtle-hover": "var(--border-info-subtle-hover)",
"info-subtle-active": "var(--border-info-subtle-active)",
"info-subtle-focus": "var(--border-info-subtle-focus)",
"info-bold": "var(--border-info-bold)",
"info-bold-hover": "var(--border-info-bold-hover)",
"info-bold-active": "var(--border-info-bold-active)",
"info-bold-focus": "var(--border-info-bold-focus)",
"info-disabled": "var(--border-info-disabled)",
success: "var(--border-success)",
"success-hover": "var(--border-success-hover)",
"success-active": "var(--border-success-active)",
"success-focus": "var(--border-success-focus)",
"success-subtle": "var(--border-success-subtle)",
"success-subtle-hover": "var(--border-success-subtle-hover)",
"success-subtle-active": "var(--border-success-subtle-active)",
"success-subtle-focus": "var(--border-success-subtle-focus)",
"success-bold": "var(--border-success-bold)",
"success-bold-hover": "var(--border-success-bold-hover)",
"success-bold-active": "var(--border-success-bold-active)",
"success-bold-focus": "var(--border-success-bold-focus)",
"success-disabled": "var(--border-success-disabled)",
warning: "var(--border-warning)",
"warning-hover": "var(--border-warning-hover)",
"warning-active": "var(--border-warning-active)",
"warning-focus": "var(--border-warning-focus)",
"warning-subtle": "var(--border-warning-subtle)",
"warning-subtle-hover": "var(--border-warning-subtle-hover)",
"warning-subtle-active": "var(--border-warning-subtle-active)",
"warning-subtle-focus": "var(--border-warning-subtle-focus)",
"warning-bold": "var(--border-warning-bold)",
"warning-bold-hover": "var(--border-warning-bold-hover)",
"warning-bold-active": "var(--border-warning-bold-active)",
"warning-bold-focus": "var(--border-warning-bold-focus)",
"warning-disabled": "var(--border-warning-disabled)",
danger: "var(--border-danger)",
"danger-hover": "var(--border-danger-hover)",
"danger-active": "var(--border-danger-active)",
"danger-focus": "var(--border-danger-focus)",
"danger-subtle": "var(--border-danger-subtle)",
"danger-subtle-hover": "var(--border-danger-subtle-hover)",
"danger-subtle-active": "var(--border-danger-subtle-active)",
"danger-subtle-focus": "var(--border-danger-subtle-focus)",
"danger-bold": "var(--border-danger-bold)",
"danger-bold-hover": "var(--border-danger-bold-hover)",
"danger-bold-active": "var(--border-danger-bold-active)",
"danger-bold-focus": "var(--border-danger-bold-focus)",
"danger-disabled": "var(--border-danger-disabled)",
advertising: "var(--border-advertising)",
"advertising-hover": "var(--border-advertising-hover)",
"advertising-active": "var(--border-advertising-active)",
"advertising-focus": "var(--border-advertising-focus)",
"advertising-subtle": "var(--border-advertising-subtle)",
"advertising-subtle-hover": "var(--border-advertising-subtle-hover)",
"advertising-subtle-active": "var(--border-advertising-subtle-active)",
"advertising-subtle-focus": "var(--border-advertising-subtle-focus)",
"advertising-bold": "var(--border-advertising-bold)",
"advertising-bold-hover": "var(--border-advertising-bold-hover)",
"advertising-bold-active": "var(--border-advertising-bold-active)",
"advertising-bold-focus": "var(--border-advertising-bold-focus)",
"advertising-disabled": "var(--border-advertising-disabled)",
},
boxShadow: {
content: "var(--shadow-content)",
raised: "var(--shadow-raised)",
overlay: "var(--shadow-overlay)",
},
colors: {
white: "var(--white)",
black: "var(--black)",
transparent: "var(--transparent)",
current: "var(--current)",
"rose-50": "var(--rose-50)",
"rose-100": "var(--rose-100)",
"rose-200": "var(--rose-200)",
"rose-300": "var(--rose-300)",
"rose-400": "var(--rose-400)",
"rose-500": "var(--rose-500)",
"rose-600": "var(--rose-600)",
"rose-700": "var(--rose-700)",
"rose-800": "var(--rose-800)",
"rose-900": "var(--rose-900)",
"rose-1000": "var(--rose-1000)",
"rose-1100": "var(--rose-1100)",
"rose-1200": "var(--rose-1200)",
"rose-1300": "var(--rose-1300)",
"rose-1400": "var(--rose-1400)",
"rose-1500": "var(--rose-1500)",
"rose-1600": "var(--rose-1600)",
"pink-50": "var(--pink-50)",
"pink-100": "var(--pink-100)",
"pink-200": "var(--pink-200)",
"pink-300": "var(--pink-300)",
"pink-400": "var(--pink-400)",
"pink-500": "var(--pink-500)",
"pink-600": "var(--pink-600)",
"pink-700": "var(--pink-700)",
"pink-800": "var(--pink-800)",
"pink-900": "var(--pink-900)",
"pink-1000": "var(--pink-1000)",
"pink-1100": "var(--pink-1100)",
"pink-1200": "var(--pink-1200)",
"pink-1300": "var(--pink-1300)",
"pink-1400": "var(--pink-1400)",
"pink-1500": "var(--pink-1500)",
"pink-1600": "var(--pink-1600)",
"fuchsia-50": "var(--fuchsia-50)",
"fuchsia-100": "var(--fuchsia-100)",
"fuchsia-200": "var(--fuchsia-200)",
"fuchsia-300": "var(--fuchsia-300)",
"fuchsia-400": "var(--fuchsia-400)",
"fuchsia-500": "var(--fuchsia-500)",
"fuchsia-600": "var(--fuchsia-600)",
"fuchsia-700": "var(--fuchsia-700)",
"fuchsia-800": "var(--fuchsia-800)",
"fuchsia-900": "var(--fuchsia-900)",
"fuchsia-1000": "var(--fuchsia-1000)",
"fuchsia-1100": "var(--fuchsia-1100)",
"fuchsia-1200": "var(--fuchsia-1200)",
"fuchsia-1300": "var(--fuchsia-1300)",
"fuchsia-1400": "var(--fuchsia-1400)",
"fuchsia-1500": "var(--fuchsia-1500)",
"fuchsia-1600": "var(--fuchsia-1600)",
"purple-50": "var(--purple-50)",
"purple-100": "var(--purple-100)",
"purple-200": "var(--purple-200)",
"purple-300": "var(--purple-300)",
"purple-400": "var(--purple-400)",
"purple-500": "var(--purple-500)",
"purple-600": "var(--purple-600)",
"purple-700": "var(--purple-700)",
"purple-800": "var(--purple-800)",
"purple-900": "var(--purple-900)",
"purple-1000": "var(--purple-1000)",
"purple-1100": "var(--purple-1100)",
"purple-1200": "var(--purple-1200)",
"purple-1300": "var(--purple-1300)",
"purple-1400": "var(--purple-1400)",
"purple-1500": "var(--purple-1500)",
"purple-1600": "var(--purple-1600)",
"violet-50": "var(--violet-50)",
"violet-100": "var(--violet-100)",
"violet-200": "var(--violet-200)",
"violet-300": "var(--violet-300)",
"violet-400": "var(--violet-400)",
"violet-500": "var(--violet-500)",
"violet-600": "var(--violet-600)",
"violet-700": "var(--violet-700)",
"violet-800": "var(--violet-800)",
"violet-900": "var(--violet-900)",
"violet-1000": "var(--violet-1000)",
"violet-1100": "var(--violet-1100)",
"violet-1200": "var(--violet-1200)",
"violet-1300": "var(--violet-1300)",
"violet-1400": "var(--violet-1400)",
"violet-1500": "var(--violet-1500)",
"violet-1600": "var(--violet-1600)",
"indigo-50": "var(--indigo-50)",
"indigo-100": "var(--indigo-100)",
"indigo-200": "var(--indigo-200)",
"indigo-300": "var(--indigo-300)",
"indigo-400": "var(--indigo-400)",
"indigo-500": "var(--indigo-500)",
"indigo-600": "var(--indigo-600)",
"indigo-700": "var(--indigo-700)",
"indigo-800": "var(--indigo-800)",
"indigo-900": "var(--indigo-900)",
"indigo-1000": "var(--indigo-1000)",
"indigo-1100": "var(--indigo-1100)",
"indigo-1200": "var(--indigo-1200)",
"indigo-1300": "var(--indigo-1300)",
"indigo-1400": "var(--indigo-1400)",
"indigo-1500": "var(--indigo-1500)",
"indigo-1600": "var(--indigo-1600)",
"blue-50": "var(--blue-50)",
"blue-100": "var(--blue-100)",
"blue-200": "var(--blue-200)",
"blue-300": "var(--blue-300)",
"blue-400": "var(--blue-400)",
"blue-500": "var(--blue-500)",
"blue-600": "var(--blue-600)",
"blue-700": "var(--blue-700)",
"blue-800": "var(--blue-800)",
"blue-900": "var(--blue-900)",
"blue-1000": "var(--blue-1000)",
"blue-1100": "var(--blue-1100)",
"blue-1200": "var(--blue-1200)",
"blue-1300": "var(--blue-1300)",
"blue-1400": "var(--blue-1400)",
"blue-1500": "var(--blue-1500)",
"blue-1600": "var(--blue-1600)",
"sky-50": "var(--sky-50)",
"sky-100": "var(--sky-100)",
"sky-200": "var(--sky-200)",
"sky-300": "var(--sky-300)",
"sky-400": "var(--sky-400)",
"sky-500": "var(--sky-500)",
"sky-600": "var(--sky-600)",
"sky-700": "var(--sky-700)",
"sky-800": "var(--sky-800)",
"sky-900": "var(--sky-900)",
"sky-1000": "var(--sky-1000)",
"sky-1100": "var(--sky-1100)",
"sky-1200": "var(--sky-1200)",
"sky-1300": "var(--sky-1300)",
"sky-1400": "var(--sky-1400)",
"sky-1500": "var(--sky-1500)",
"sky-1600": "var(--sky-1600)",
"cyan-50": "var(--cyan-50)",
"cyan-100": "var(--cyan-100)",
"cyan-200": "var(--cyan-200)",
"cyan-300": "var(--cyan-300)",
"cyan-400": "var(--cyan-400)",
"cyan-500": "var(--cyan-500)",
"cyan-600": "var(--cyan-600)",
"cyan-700": "var(--cyan-700)",
"cyan-800": "var(--cyan-800)",
"cyan-900": "var(--cyan-900)",
"cyan-1000": "var(--cyan-1000)",
"cyan-1100": "var(--cyan-1100)",
"cyan-1200": "var(--cyan-1200)",
"cyan-1300": "var(--cyan-1300)",
"cyan-1400": "var(--cyan-1400)",
"cyan-1500": "var(--cyan-1500)",
"cyan-1600": "var(--cyan-1600)",
"teal-50": "var(--teal-50)",
"teal-100": "var(--teal-100)",
"teal-200": "var(--teal-200)",
"teal-300": "var(--teal-300)",
"teal-400": "var(--teal-400)",
"teal-500": "var(--teal-500)",
"teal-600": "var(--teal-600)",
"teal-700": "var(--teal-700)",
"teal-800": "var(--teal-800)",
"teal-900": "var(--teal-900)",
"teal-1000": "var(--teal-1000)",
"teal-1100": "var(--teal-1100)",
"teal-1200": "var(--teal-1200)",
"teal-1300": "var(--teal-1300)",
"teal-1400": "var(--teal-1400)",
"teal-1500": "var(--teal-1500)",
"teal-1600": "var(--teal-1600)",
"emerald-50": "var(--emerald-50)",
"emerald-100": "var(--emerald-100)",
"emerald-200": "var(--emerald-200)",
"emerald-300": "var(--emerald-300)",
"emerald-400": "var(--emerald-400)",
"emerald-500": "var(--emerald-500)",
"emerald-600": "var(--emerald-600)",
"emerald-700": "var(--emerald-700)",
"emerald-800": "var(--emerald-800)",
"emerald-900": "var(--emerald-900)",
"emerald-1000": "var(--emerald-1000)",
"emerald-1100": "var(--emerald-1100)",
"emerald-1200": "var(--emerald-1200)",
"emerald-1300": "var(--emerald-1300)",
"emerald-1400": "var(--emerald-1400)",
"emerald-1500": "var(--emerald-1500)",
"emerald-1600": "var(--emerald-1600)",
"green-50": "var(--green-50)",
"green-100": "var(--green-100)",
"green-200": "var(--green-200)",
"green-300": "var(--green-300)",
"green-400": "var(--green-400)",
"green-500": "var(--green-500)",
"green-600": "var(--green-600)",
"green-700": "var(--green-700)",
"green-800": "var(--green-800)",
"green-900": "var(--green-900)",
"green-1000": "var(--green-1000)",
"green-1100": "var(--green-1100)",
"green-1200": "var(--green-1200)",
"green-1300": "var(--green-1300)",
"green-1400": "var(--green-1400)",
"green-1500": "var(--green-1500)",
"green-1600": "var(--green-1600)",
"lime-50": "var(--lime-50)",
"lime-100": "var(--lime-100)",
"lime-200": "var(--lime-200)",
"lime-300": "var(--lime-300)",
"lime-400": "var(--lime-400)",
"lime-500": "var(--lime-500)",
"lime-600": "var(--lime-600)",
"lime-700": "var(--lime-700)",
"lime-800": "var(--lime-800)",
"lime-900": "var(--lime-900)",
"lime-1000": "var(--lime-1000)",
"lime-1100": "var(--lime-1100)",
"lime-1200": "var(--lime-1200)",
"lime-1300": "var(--lime-1300)",
"lime-1400": "var(--lime-1400)",
"lime-1500": "var(--lime-1500)",
"lime-1600": "var(--lime-1600)",
"yellow-50": "var(--yellow-50)",
"yellow-100": "var(--yellow-100)",
"yellow-200": "var(--yellow-200)",
"yellow-300": "var(--yellow-300)",
"yellow-400": "var(--yellow-400)",
"yellow-500": "var(--yellow-500)",
"yellow-600": "var(--yellow-600)",
"yellow-700": "var(--yellow-700)",
"yellow-800": "var(--yellow-800)",
"yellow-900": "var(--yellow-900)",
"yellow-1000": "var(--yellow-1000)",
"yellow-1100": "var(--yellow-1100)",
"yellow-1200": "var(--yellow-1200)",
"yellow-1300": "var(--yellow-1300)",
"yellow-1400": "var(--yellow-1400)",
"yellow-1500": "var(--yellow-1500)",
"yellow-1600": "var(--yellow-1600)",
"amber-50": "var(--amber-50)",
"amber-100": "var(--amber-100)",
"amber-200": "var(--amber-200)",
"amber-300": "var(--amber-300)",
"amber-400": "var(--amber-400)",
"amber-500": "var(--amber-500)",
"amber-600": "var(--amber-600)",
"amber-700": "var(--amber-700)",
"amber-800": "var(--amber-800)",
"amber-900": "var(--amber-900)",
"amber-1000": "var(--amber-1000)",
"amber-1100": "var(--amber-1100)",
"amber-1200": "var(--amber-1200)",
"amber-1300": "var(--amber-1300)",
"amber-1400": "var(--amber-1400)",
"amber-1500": "var(--amber-1500)",
"amber-1600": "var(--amber-1600)",
"orange-50": "var(--orange-50)",
"orange-100": "var(--orange-100)",
"orange-200": "var(--orange-200)",
"orange-300": "var(--orange-300)",
"orange-400": "var(--orange-400)",
"orange-500": "var(--orange-500)",
"orange-600": "var(--orange-600)",
"orange-700": "var(--orange-700)",
"orange-800": "var(--orange-800)",
"orange-900": "var(--orange-900)",
"orange-1000": "var(--orange-1000)",
"orange-1100": "var(--orange-1100)",
"orange-1200": "var(--orange-1200)",
"orange-1300": "var(--orange-1300)",
"orange-1400": "var(--orange-1400)",
"orange-1500": "var(--orange-1500)",
"orange-1600": "var(--orange-1600)",
"red-50": "var(--red-50)",
"red-100": "var(--red-100)",
"red-200": "var(--red-200)",
"red-300": "var(--red-300)",
"red-400": "var(--red-400)",
"red-500": "var(--red-500)",
"red-600": "var(--red-600)",
"red-700": "var(--red-700)",
"red-800": "var(--red-800)",
"red-900": "var(--red-900)",
"red-1000": "var(--red-1000)",
"red-1100": "var(--red-1100)",
"red-1200": "var(--red-1200)",
"red-1300": "var(--red-1300)",
"red-1400": "var(--red-1400)",
"red-1500": "var(--red-1500)",
"red-1600": "var(--red-1600)",
"stone-50": "var(--stone-50)",
"stone-100": "var(--stone-100)",
"stone-200": "var(--stone-200)",
"stone-300": "var(--stone-300)",
"stone-400": "var(--stone-400)",
"stone-500": "var(--stone-500)",
"stone-600": "var(--stone-600)",
"stone-700": "var(--stone-700)",
"stone-800": "var(--stone-800)",
"stone-900": "var(--stone-900)",
"stone-1000": "var(--stone-1000)",
"stone-1100": "var(--stone-1100)",
"stone-1200": "var(--stone-1200)",
"stone-1300": "var(--stone-1300)",
"stone-1400": "var(--stone-1400)",
"stone-1500": "var(--stone-1500)",
"stone-1600": "var(--stone-1600)",
"neutral-50": "var(--neutral-50)",
"neutral-100": "var(--neutral-100)",
"neutral-200": "var(--neutral-200)",
"neutral-300": "var(--neutral-300)",
"neutral-400": "var(--neutral-400)",
"neutral-500": "var(--neutral-500)",
"neutral-600": "var(--neutral-600)",
"neutral-700": "var(--neutral-700)",
"neutral-800": "var(--neutral-800)",
"neutral-900": "var(--neutral-900)",
"neutral-1000": "var(--neutral-1000)",
"neutral-1100": "var(--neutral-1100)",
"neutral-1200": "var(--neutral-1200)",
"neutral-1300": "var(--neutral-1300)",
"neutral-1400": "var(--neutral-1400)",
"neutral-1500": "var(--neutral-1500)",
"neutral-1600": "var(--neutral-1600)",
"zinc-50": "var(--zinc-50)",
"zinc-100": "var(--zinc-100)",
"zinc-200": "var(--zinc-200)",
"zinc-300": "var(--zinc-300)",
"zinc-400": "var(--zinc-400)",
"zinc-500": "var(--zinc-500)",
"zinc-600": "var(--zinc-600)",
"zinc-700": "var(--zinc-700)",
"zinc-800": "var(--zinc-800)",
"zinc-900": "var(--zinc-900)",
"zinc-1000": "var(--zinc-1000)",
"zinc-1100": "var(--zinc-1100)",
"zinc-1200": "var(--zinc-1200)",
"zinc-1300": "var(--zinc-1300)",
"zinc-1400": "var(--zinc-1400)",
"zinc-1500": "var(--zinc-1500)",
"zinc-1600": "var(--zinc-1600)",
"gray-50": "var(--gray-50)",
"gray-100": "var(--gray-100)",
"gray-200": "var(--gray-200)",
"gray-300": "var(--gray-300)",
"gray-400": "var(--gray-400)",
"gray-500": "var(--gray-500)",
"gray-600": "var(--gray-600)",
"gray-700": "var(--gray-700)",
"gray-800": "var(--gray-800)",
"gray-900": "var(--gray-900)",
"gray-1000": "var(--gray-1000)",
"gray-1100": "var(--gray-1100)",
"gray-1200": "var(--gray-1200)",
"gray-1300": "var(--gray-1300)",
"gray-1400": "var(--gray-1400)",
"gray-1500": "var(--gray-1500)",
"gray-1600": "var(--gray-1600)",
"slate-50": "var(--slate-50)",
"slate-100": "var(--slate-100)",
"slate-200": "var(--slate-200)",
"slate-300": "var(--slate-300)",
"slate-400": "var(--slate-400)",
"slate-500": "var(--slate-500)",
"slate-600": "var(--slate-600)