tailwind.config.ts

export default {
	content: ["./src/**/*.{ts,tsx}"],
	corePlugins: {
		preflight: false,
	},
	theme: {
		colors: {
			base: {
				"00": "var(--color-base-00)",
				"05": "var(--color-base-05)",
				"10": "var(--color-base-10)",
				"20": "var(--color-base-20)",
				"25": "var(--color-base-25)",
				"30": "var(--color-base-30)",
				"35": "var(--color-base-35)",
				"40": "var(--color-base-40)",
				"50": "var(--color-base-50)",
				"60": "var(--color-base-60)",
				"70": "var(--color-base-70)",
				"100": "var(--color-base-100)",
			},
			red: "var(--color-red)",
			"red-rgb": "rgba(var(--color-red-rgb),<alpha-value>)",
			orange: "var(--color-orange)",
			"orange-rgb": "rgba(var(--color-orange-rgb),<alpha-value>)",
			yellow: "var(--color-yellow)",
			"yellow-rgb": "rgba(var(--color-yellow-rgb),<alpha-value>)",
			green: "var(--color-green)",
			"green-rgb": "rgba(var(--color-green-rgb),<alpha-value>)",
			cyan: "var(--color-cyan)",
			"cyan-rgb": "rgba(var(--color-cyan-rgb),<alpha-value>)",
			blue: "var(--color-blue)",
			"blue-rgb": "rgba(var(--color-blue-rgb),<alpha-value>)",
			purple: "var(--color-purple)",
			"purple-rgb": "rgba(var(--color-purple-rgb),<alpha-value>)",
			pink: "var(--color-pink)",
			"pink-rgb": "rgba(var(--color-pink-rgb),<alpha-value>)",
			gray: "var(--color-gray)",
			"mono-rgb": {
				"0": "rgba(var(--mono-rgb-0),<alpha-value>)",
				"100": "rgba(var(--mono-rgb-100),<alpha-value>)",
			},
			background: {
				primary: "var(--background-primary)",
				"primary-alt": "var(--background-primary-alt)",
				secondary: "var(--background-secondary)",
				"secondary-alt": "var(--background-secondary-alt)",
				modifier: {
					hover: "var(--background-modifier-hover)",
					"active-hover": "var(--background-modifier-active-hover)",
					border: "var(--background-modifier-border)",
					"border-hover": "var(--background-modifier-border-hover)",
					"border-focus": "var(--background-modifier-border-focus)",
					error: "var(--background-modifier-error)",
					"error-rgb":
						"rgba(var(--background-modifier-error-rgb),<alpha-value>)",
					"error-hover": "var(--background-modifier-error-hover)",
					success: "var(--background-modifier-success)",
					"success-rgb":
						"rgba(var(--background-modifier-success-rgb),<alpha-value>)",
					message: "var(--background-modifier-message)",
					"form-field": "var(--background-form-field)",
				},
			},
			interactive: {
				normal: "var(--interactive-normal)",
				hover: "var(--interactive-hover)",
				accent: "var(--interactive-accent)",
				"accent-hsl":
					"hsl(var(--interactive-accent-hsl),<alpha-value>)",
				"accent-hover": "var(--interactive-accent-hover)",
			},
			text: {
				normal: "var(--text-normal)",
				muted: "var(--text-muted)",
				faint: "var(--text-faint)",
				"on-accent": "var(--text-on-accent)",
				"on-accent-inverted": "var(--text-on-accent-inverted)",
				success: "var(--text-success)",
				warning: "var(--text-warning)",
				error: "var(--text-error)",
				accent: "var(--text-accent)",
				"accent-hover": "var(--text-accent-hover)",
				selection: "var(--text-selection)",
				"highlight-bg": "var(--text-highlight-bg)",
				bold: "var(--bold-color)",
				italic: "var(--italic-color)",
			},
			caret: "var(--caret-color)",
			icon: {
				DEFAULT: "var(--icon-color)",
				hover: "var(--icon-color-hover)",
				active: "var(--icon-color-active)",
				focused: "var(--icon-color-focused)",
			},
		},
		borderWidth: {
			DEFAULT: "var(--border-width)",
		},
		borderRadius: {
			"clickable-icon": "var(--clickable-icon-radius)",
			s: "var(--radius-s)",
			m: "var(--radius-m)",
			l: "var(--radius-l)",
			xl: "var(--radius-xl)",
		},
		zIndex: {
			cover: "var(--layer-cover)",
			sidedock: "var(--layer-sidedock)",
			"status-bar": "var(--layer-status-bar)",
			popover: "var(--layer-popover)",
			slides: "var(--layer-slides)",
			modal: "var(--layer-modal)",
			notice: "var(--layer-notice)",
			menu: "var(--layer-menu)",
			tooltip: "var(--layer-tooltip)",
			"dragged-item": "var(--layer-dragged-item)",
		},
		fontSize: {
			text: "var(--font-text-size)",
			smallest: "var(--font-smallest)",
			smaller: "var(--font-smaller)",
			small: "var(--font-small)",
			"ui-smaller": "var(--font-ui-smaller)",
			"ui-small": "var(--font-ui-small)",
			"ui-medium": "var(--font-ui-medium)",
			"ui-larger": "var(--font-ui-larger)",
		},
		strokeWidth: {
			icon: "var(--icon-stroke)",
			"icon-xs": "var(--icon-xs-stroke-width)",
			"icon-s": "var(--icon-s-stroke-width)",
			"icon-m": "var(--icon-m-stroke-width)",
			"icon-l": "var(--icon-l-stroke-width)",
			"icon-xl": "var(--icon-xl-stroke-width)",
		},
		fontWeight: {
			thin: "var(--font-thin)",
			extralight: "var(--font-extralight)",
			light: "var(--font-light)",
			normal: "var(--font-normal)",
			medium: "var(--font-medium)",
			semibold: "var(--font-semibold)",
			bold: "var(--font-bold)",
			extrabold: "var(--font-extrabold)",
			black: "var(--font-black)",
		},
		lineHeight: {
			normal: "var(--line-height-normal)",
			tight: "var(--line-height-tight)",
		},
		extend: {
			cursor: {
				DEFAULT: "var(--cursor)",
				link: "var(--cursor-link)",
			},
			size: {
				icon: "var(--icon-size)",
				"icon-xs": "var(--icon-xs)",
				"icon-s": "var(--icon-s)",
				"icon-m": "var(--icon-m)",
				"icon-l": "var(--icon-l)",
				"icon-xl": "var(--icon-xl)",
				checkbox: "var(--checkbox-size)",
			},

			opacity: {
				icon: "var(--icon-opacity)",
				"icon-hover": "var(--icon-opacity-hover)",
				"icon-active": "var(--icon-opacity-active)",
			},
		},
	},
	plugins: [],
};