import type { Config } from 'tailwindcss'

const config: Config = {
	theme: {
		extend: {
			colors: {
				surface: {
					1: 'var(--surface-1)',
					2: 'var(--surface-2)',
					3: 'var(--surface-3)',
					4: 'var(--surface-4)',
					5: 'var(--surface-5)',
				},

				/// TODO: Clean up these aliases within codebase to use default, primary, tertiary.
				// text-default
				primary: 'var(--color-text-default)',

				// text-primary
				contrast: 'var(--color-text-primary)',

				// text-tertiary
				secondary: 'var(--color-text-tertiary)',

				red: {
					DEFAULT: 'var(--color-red)',
					50: 'var(--color-red-50)',
					100: 'var(--color-red-100)',
					200: 'var(--color-red-200)',
					300: 'var(--color-red-300)',
					400: 'var(--color-red-400)',
					500: 'var(--color-red-500)',
					600: 'var(--color-red-600)',
					700: 'var(--color-red-700)',
					800: 'var(--color-red-800)',
					900: 'var(--color-red-900)',
					950: 'var(--color-red-950)',
				},
				orange: {
					DEFAULT: 'var(--color-orange)',
					50: 'var(--color-orange-50)',
					100: 'var(--color-orange-100)',
					200: 'var(--color-orange-200)',
					300: 'var(--color-orange-300)',
					400: 'var(--color-orange-400)',
					500: 'var(--color-orange-500)',
					600: 'var(--color-orange-600)',
					700: 'var(--color-orange-700)',
					800: 'var(--color-orange-800)',
					900: 'var(--color-orange-900)',
					950: 'var(--color-orange-950)',
				},
				green: {
					DEFAULT: 'var(--color-green)',
					50: 'var(--color-green-50)',
					100: 'var(--color-green-100)',
					200: 'var(--color-green-200)',
					300: 'var(--color-green-300)',
					400: 'var(--color-green-400)',
					500: 'var(--color-green-500)',
					600: 'var(--color-green-600)',
					700: 'var(--color-green-700)',
					800: 'var(--color-green-800)',
					900: 'var(--color-green-900)',
					950: 'var(--color-green-950)',
				},
				blue: {
					DEFAULT: 'var(--color-blue)',
					50: 'var(--color-blue-50)',
					100: 'var(--color-blue-100)',
					200: 'var(--color-blue-200)',
					300: 'var(--color-blue-300)',
					400: 'var(--color-blue-400)',
					500: 'var(--color-blue-500)',
					600: 'var(--color-blue-600)',
					700: 'var(--color-blue-700)',
					800: 'var(--color-blue-800)',
					900: 'var(--color-blue-900)',
					950: 'var(--color-blue-950)',
				},
				purple: {
					DEFAULT: 'var(--color-purple)',
					50: 'var(--color-purple-50)',
					100: 'var(--color-purple-100)',
					200: 'var(--color-purple-200)',
					300: 'var(--color-purple-300)',
					400: 'var(--color-purple-400)',
					500: 'var(--color-purple-500)',
					600: 'var(--color-purple-600)',
					700: 'var(--color-purple-700)',
					800: 'var(--color-purple-800)',
					900: 'var(--color-purple-900)',
					950: 'var(--color-purple-950)',
				},
				gray: {
					DEFAULT: 'var(--color-gray)',
					50: 'var(--color-gray-50)',
					100: 'var(--color-gray-100)',
					200: 'var(--color-gray-200)',
					300: 'var(--color-gray-300)',
					400: 'var(--color-gray-400)',
					500: 'var(--color-gray-500)',
					600: 'var(--color-gray-600)',
					700: 'var(--color-gray-700)',
					800: 'var(--color-gray-800)',
					900: 'var(--color-gray-900)',
					950: 'var(--color-gray-950)',
				},

				/// === LEGACY ===
				icon: 'var(--color-base)',
				// Text
				inactive: 'var(--color-text-inactive)',
				dark: 'var(--color-text-dark)',
				inverted: 'var(--color-text-inverted)',
				heading: 'var(--color-heading)',
				bg: {
					DEFAULT: 'var(--surface-1)', // var(--color-bg)
					red: 'var(--color-red-bg)',
					orange: 'var(--color-orange-bg)',
					green: 'var(--color-green-bg)',
					blue: 'var(--color-blue-bg)',
					purple: 'var(--color-purple-bg)',
					raised: 'var(--surface-3)', // var(--color-raised-bg)
				},
				banners: {
					error: {
						bg: 'var(--banner-error-bg)',
						text: 'var(--banner-error-text)',
						border: 'var(--banner-error-border)',
					},
					warning: {
						bg: 'var(--banner-warning-bg)',
						text: 'var(--banner-warning-text)',
						border: 'var(--banner-warning-border)',
					},
					info: {
						bg: 'var(--banner-info-bg)',
						text: 'var(--banner-info-text)',
						border: 'var(--banner-info-border)',
					},
				},
				highlight: {
					DEFAULT: 'var(--color-brand-highlight)',
					red: 'var(--color-red-highlight)',
					orange: 'var(--color-orange-highlight)',
					green: 'var(--color-green-highlight)',
					blue: 'var(--color-blue-highlight)',
					purple: 'var(--color-purple-highlight)',
				},
				divider: {
					DEFAULT: 'var(--color-divider)',
					dark: 'var(--color-divider-dark)',
				},
				brand: {
					DEFAULT: 'var(--color-brand)',
					red: 'var(--color-red)',
					orange: 'var(--color-orange)',
					green: 'var(--color-green)',
					blue: 'var(--color-blue)',
					purple: 'var(--color-purple)',
					highlight: 'var(--color-brand-highlight)',
					shadow: 'var(--color-brand-shadow)',
					inverted: 'var(--color-accent-contrast)',
				},
				tabUnderlineHovered: 'var(--tab-underline-hovered)',
				button: {
					bg: 'var(--color-button-bg)',
					text: 'var(--color-button-text)',
					bgHover: 'var(--color-button-bg-hover)',
					textHover: 'var(--color-button-text-hover)',
					bgActive: 'var(--color-button-bg-active)',
					textActive: 'var(--color-button-text-active)',
					border: 'var(--color-button-border)',
					bgSelected: 'var(--color-button-bg-selected)',
					textSelected: 'var(--color-button-text-selected)',
				},
				toggleHandle: 'var(--color-toggle-handle)',
				dropdown: {
					bg: 'var(--color-dropdown-bg)',
					text: 'var(--color-dropdown-text)',
				},
				tooltip: {
					bg: 'var(--color-tooltip-bg)',
					text: 'var(--color-tooltip-text)',
				},
				code: {
					bg: 'var(--color-code-bg)',
					text: 'var(--color-code-text)',
				},
				kbdShadow: 'var(--color-kbd-shadow)',
				ad: {
					DEFAULT: 'var(--color-ad)',
					raised: 'var(--color-ad-raised)',
					contrast: 'var(--color-ad-contrast)',
					highlight: 'var(--color-ad-highlight)',
				},
				greyLink: {
					DEFAULT: 'var(--color-grey-link)',
					hover: 'var(--color-grey-link-hover)',
					active: 'var(--color-grey-link-active)',
				},
				link: {
					DEFAULT: 'var(--color-link)',
					hover: 'var(--color-link-hover)',
					active: 'var(--color-link-active)',
				},
				warning: {
					bg: 'var(--color-warning-bg)',
					text: 'var(--color-warning-text)',
					banner: {
						text: 'var(--color-warning-banner-text)',
						bg: 'var(--color-warning-banner-bg)',
						side: 'var(--color-warning-banner-side)',
					},
				},
				infoBanner: {
					text: 'var(--color-info-banner-text)',
					bg: 'var(--color-info-banner-bg)',
					side: 'var(--color-info-banner-side)',
				},
				blockQuote: 'var(--color-block-quote)',
				headerUnderline: 'var(--color-header-underline)',
				hr: 'var(--color-hr)',
				table: {
					border: 'var(--color-table-border)',
					alternateRow: ' var(--color-table-alternate-row)',
				},
			},
			backgroundImage: {
				mazeBg: 'var(--landing-maze-bg)',
				mazeGradientBg: 'var(--landing-maze-gradient-bg)',
				// @ts-ignore
				landing: {
					mazeOuterBg: 'var(--landing-maze-outer-bg)',
					colorHeading: 'var(--landing-color-heading)',
					colorSubheading: 'var(--landing-color-subheading)',
					transitionGradientStart: 'var(--landing-transition-gradient-start)',
					transitionGradientEnd: 'var(--landing-transition-gradient-end)',
					hoverCardGradient: 'var(--landing-hover-card-gradient)',
					borderGradient: 'var(--landing-border-gradient)',
					borderColor: 'var(--landing-border-color)',
					creatorGradient: 'var(--landing-creator-gradient)',
					blobGradient: 'var(--landing-blob-gradient)',
					cardBg: 'var(--landing-card-bg)',
					blueLabel: 'var(--landing-blue-label)',
					blueLabelBg: 'var(--landing-blue-label-bg)',
					greenLabel: 'var(--landing-green-label)',
					greenLabelBg: 'var(--landing-green-label-bg)',
					rawBg: 'var(--landing-raw-bg)',
				},
			},
		},
	},
	plugins: [],
	corePlugins: {
		preflight: false,
	},
}

export default config