/** * Aleris design tokens as a Tailwind v4 theme. * * GENERATED FILE — do not edit. Regenerate with: * node data-products/tokens/generate-tailwind-theme.js * * This file declares no value of its own. Every entry maps a Tailwind utility name onto a token * in aleris-tokens.css, which stays the single source of truth. It is optional convenience * infrastructure (principles/design-tokens.md §13), not governance: dropping it changes what is * convenient to type and nothing about what the design system says. * * USAGE — import the tokens first, then Tailwind, then this file: * * @import "./aleris-tokens.css"; * @import "tailwindcss"; * @import "./aleris-tailwind.css"; * * This file comes AFTER Tailwind. Its first line switches Tailwind's colour * palette off, and Tailwind registers its palette when it is imported, so a switch-off placed * before it is undone. In the old order the tokens still win, but bg-blue-500 compiles. * * You then get utilities like bg-aleris-petrol-500, text-aleris-text-secondary, p-aleris-md, * rounded-aleris-m, shadow-aleris-e1 and leading-aleris-body. * Each compiles to the token reference directly — bg-aleris-petrol-500 emits * `background-color: var(--color-petrol-500)` — so the value lives in one place and this file * adds nothing to :root. * * WHY EVERY NAME CARRIES THE aleris- PREFIX. An identity map is unsafe: measured against * Tailwind 4.2.2 on 2026-08-28, a theme variable whose name matches Tailwind's own namespace is * emitted into `@layer theme` as `--color-petrol-500: var(--color-petrol-500)`, a self-reference * that is invalid at computed-value time and survives today only because aleris-tokens.css is * normally imported unlayered. The prefix removes the collision, and with it the dependency on * that cascade accident. * * WHY THE BLOCK SITS IN `@layer theme`. Tailwind 4.2 writes its theme variables, its default * palette included, where it meets the first `@theme` block. Unlayered, this block put Tailwind's * `--color-orange-*` and `--color-gray-*` after the tokens and above them, so a primary button * painted Tailwind's orange instead of `--color-orange-600` (found 2026-09-29). Inside the layer, * the unlayered tokens outrank them whatever the import order. * * WHY TAILWIND'S COLOURS ARE SWITCHED OFF. `--color-*: initial` removes Tailwind's default palette, * so `bg-blue-500` or `text-orange-600` does not compile in a project that imports this file. * The Aleris palette is the only colour there is (constitutional/colour-is-the-aleris-palette.md), * and a default palette left in place is a working off-brand colour one class name away. Only * the colour namespace is cleared; Tailwind's spacing, type and breakpoints stay (Torfinn, * 2026-09-30). * * NOT BRIDGED, and why — a bridge covering part of the token file should say which part: * * --type-* * composition tokens (size + weight + leading together). Tailwind has no namespace for a composition; use the three bridged parts. * * --button-*, --input-*, --table-*, --card-*, --badge-*, --tab-*, --skeleton-*, --image-* * component tokens. Tailwind namespaces are per-property, so these have nowhere correct to land — and a component token belongs in a component, not in a utility class. * * --duration-* * measured 2026-08-28 against Tailwind 4.2.2: there is no duration theme namespace, so `duration-aleris-fast` does not compile. Use `duration-[var(--duration-fast)]` or set it in CSS. * * --z-* * Tailwind has no z-index theme namespace. * * --icon-*, --stroke-* * lengths whose only honest namespace would be --spacing-*, which would make them look like padding steps. Reference the token directly. * * --grid-* * grid geometry, not a scale. --grid-max-width-* is arguably --container-*; left out until a consumer asks. * * --state-* * mixed shapes — two colours, a width and a translate. Not one namespace. * * --breakpoint-* * a breakpoint value is emitted inside `@media (width >= …)`, and a media query may not contain `var()`. Bridging it produced `@media (width >= var(--breakpoint-md))` — invalid CSS that a browser drops silently and that lightningcss refuses to build. Removed 2026-08-31 after it broke the site build; measured against Tailwind 4.3.3. Nothing is lost: Tailwind's own sm/md/lg/xl are 40/48/64/80rem, which at a 16px root are 640/768/1024/1280px — the Aleris values exactly. Use the stock `md:` and it already means --breakpoint-md. * * --color-goal-* * --goal-* is a 1:1 alias of this family and is the layer BASELINE.md says to use. Bridging both would put two tokens on one utility name. * * 148 of 381 tokens bridged. */ @layer theme { @theme inline { --color-*: initial; --color-aleris-petrol-100: var(--color-petrol-100); --color-aleris-petrol-200: var(--color-petrol-200); --color-aleris-petrol-300: var(--color-petrol-300); --color-aleris-petrol-400: var(--color-petrol-400); --color-aleris-petrol-450: var(--color-petrol-450); --color-aleris-petrol-500: var(--color-petrol-500); --color-aleris-petrol-700: var(--color-petrol-700); --color-aleris-sand-50: var(--color-sand-50); --color-aleris-sand-100: var(--color-sand-100); --color-aleris-sand-300: var(--color-sand-300); --color-aleris-sand-500: var(--color-sand-500); --color-aleris-orange-100: var(--color-orange-100); --color-aleris-orange-200: var(--color-orange-200); --color-aleris-orange-300: var(--color-orange-300); --color-aleris-orange-400: var(--color-orange-400); --color-aleris-orange-500: var(--color-orange-500); --color-aleris-orange-600: var(--color-orange-600); --color-aleris-orange-700: var(--color-orange-700); --color-aleris-legacy-teal: var(--color-legacy-teal); --color-aleris-gray-100: var(--color-gray-100); --color-aleris-gray-300: var(--color-gray-300); --color-aleris-gray-500: var(--color-gray-500); --color-aleris-white: var(--color-white); --color-aleris-error-500: var(--color-error-500); --color-aleris-warning-500: var(--color-warning-500); --color-aleris-info-500: var(--color-info-500); --color-aleris-confirm-500: var(--color-confirm-500); --color-aleris-chart-01-teal: var(--color-chart-01-teal); --color-aleris-chart-02-mint: var(--color-chart-02-mint); --color-aleris-chart-03-blue: var(--color-chart-03-blue); --color-aleris-chart-04-blue-light: var(--color-chart-04-blue-light); --color-aleris-chart-05-purple: var(--color-chart-05-purple); --color-aleris-chart-06-purple-light: var(--color-chart-06-purple-light); --color-aleris-chart-07-terracotta: var(--color-chart-07-terracotta); --color-aleris-chart-08-terracotta-light: var(--color-chart-08-terracotta-light); --color-aleris-chart-09-marine: var(--color-chart-09-marine); --color-aleris-chart-10-olive: var(--color-chart-10-olive); --color-aleris-chart-11-warm-grey: var(--color-chart-11-warm-grey); --color-aleris-chart-12-dark-sand: var(--color-chart-12-dark-sand); --spacing-aleris-0: var(--spacing-0); --spacing-aleris-3xs: var(--spacing-3xs); --spacing-aleris-2xs: var(--spacing-2xs); --spacing-aleris-xs: var(--spacing-xs); --spacing-aleris-sm: var(--spacing-sm); --spacing-aleris-md: var(--spacing-md); --spacing-aleris-lg: var(--spacing-lg); --spacing-aleris-xl: var(--spacing-xl); --spacing-aleris-2xl: var(--spacing-2xl); --spacing-aleris-3xl: var(--spacing-3xl); --radius-aleris-0: var(--radius-0); --radius-aleris-s: var(--radius-s); --radius-aleris-l: var(--radius-l); --radius-aleris-m: var(--radius-m); --radius-aleris-full: var(--radius-full); --font-aleris-primary: var(--font-family-primary); --font-aleris-fallback: var(--font-family-fallback); --font-aleris-icons: var(--font-family-icons); --text-aleris-xs: var(--font-size-xs); --text-aleris-sm: var(--font-size-sm); --text-aleris-base: var(--font-size-base); --text-aleris-md: var(--font-size-md); --text-aleris-lg: var(--font-size-lg); --text-aleris-xl: var(--font-size-xl); --text-aleris-2xl: var(--font-size-2xl); --font-weight-aleris-light: var(--font-weight-light); --font-weight-aleris-regular: var(--font-weight-regular); --font-weight-aleris-bold: var(--font-weight-bold); --font-weight-aleris-black: var(--font-weight-black); --leading-aleris-tight: var(--line-height-tight); --leading-aleris-heading: var(--line-height-heading); --leading-aleris-subheading: var(--line-height-subheading); --leading-aleris-body: var(--line-height-body); --tracking-aleris-normal: var(--letter-spacing-normal); --tracking-aleris-tight: var(--letter-spacing-tight); --tracking-aleris-tighter: var(--letter-spacing-tighter); --tracking-aleris-tightest: var(--letter-spacing-tightest); --shadow-aleris-e0: var(--shadow-e0); --shadow-aleris-e1: var(--shadow-e1); --shadow-aleris-e2: var(--shadow-e2); --shadow-aleris-e3: var(--shadow-e3); --color-aleris-brand-primary: var(--brand-primary); --color-aleris-brand-accent: var(--brand-accent); --color-aleris-brand-light: var(--brand-light); --color-aleris-text-primary: var(--text-primary); --color-aleris-text-secondary: var(--text-secondary); --color-aleris-text-inverse: var(--text-inverse); --color-aleris-text-link: var(--text-link); --color-aleris-text-disabled: var(--text-disabled); --color-aleris-text-error: var(--text-error); --color-aleris-surface-page: var(--surface-page); --color-aleris-surface-page-instrumental: var(--surface-page-instrumental); --color-aleris-surface-card: var(--surface-card); --color-aleris-surface-elevated: var(--surface-elevated); --color-aleris-surface-overlay: var(--surface-overlay); --color-aleris-surface-subtle-neutral: var(--surface-subtle-neutral); --color-aleris-surface-subtle-warm: var(--surface-subtle-warm); --color-aleris-surface-subtle-cold: var(--surface-subtle-cold); --color-aleris-surface-strong-neutral: var(--surface-strong-neutral); --color-aleris-surface-strong-warm: var(--surface-strong-warm); --color-aleris-surface-strong-cold: var(--surface-strong-cold); --color-aleris-surface-section-white: var(--surface-section-white); --color-aleris-surface-section-cold: var(--surface-section-cold); --color-aleris-surface-section-warm: var(--surface-section-warm); --color-aleris-surface-section-strong: var(--surface-section-strong); --color-aleris-surface-gradient-cold: var(--surface-gradient-cold); --color-aleris-surface-gradient-warm: var(--surface-gradient-warm); --color-aleris-border-default: var(--border-default); --color-aleris-border-strong: var(--border-strong); --color-aleris-border-focus: var(--border-focus); --color-aleris-border-error: var(--border-error); --color-aleris-status-error: var(--status-error); --color-aleris-status-warning: var(--status-warning); --color-aleris-status-confirm: var(--status-confirm); --color-aleris-status-info: var(--status-info); --color-aleris-status-background: var(--status-background); --color-aleris-goal-achieved: var(--goal-achieved); --color-aleris-goal-borderline: var(--goal-borderline); --color-aleris-goal-missed: var(--goal-missed); --color-aleris-goal-no-data: var(--goal-no-data); --color-aleris-chart-1: var(--chart-1); --color-aleris-chart-2: var(--chart-2); --color-aleris-chart-3: var(--chart-3); --color-aleris-chart-4: var(--chart-4); --color-aleris-chart-5: var(--chart-5); --color-aleris-chart-6: var(--chart-6); --color-aleris-chart-7: var(--chart-7); --color-aleris-chart-8: var(--chart-8); --color-aleris-chart-9: var(--chart-9); --color-aleris-chart-10: var(--chart-10); --color-aleris-chart-11: var(--chart-11); --color-aleris-chart-12: var(--chart-12); --color-aleris-chart-pair-1-a: var(--chart-pair-1-a); --color-aleris-chart-pair-1-b: var(--chart-pair-1-b); --color-aleris-chart-pair-2-a: var(--chart-pair-2-a); --color-aleris-chart-pair-2-b: var(--chart-pair-2-b); --color-aleris-chart-pair-3-a: var(--chart-pair-3-a); --color-aleris-chart-pair-3-b: var(--chart-pair-3-b); --spacing-aleris-page-padding: var(--spacing-page-padding); --spacing-aleris-card-padding: var(--spacing-card-padding); --spacing-aleris-section-gap: var(--spacing-section-gap); --spacing-aleris-element-gap: var(--spacing-element-gap); --spacing-aleris-label-gap: var(--spacing-label-gap); --shadow-aleris-elevation-flat: var(--elevation-flat); --shadow-aleris-elevation-card: var(--elevation-card); --shadow-aleris-elevation-dropdown: var(--elevation-dropdown); --shadow-aleris-elevation-modal: var(--elevation-modal); --ease-aleris-out: var(--ease-out); --ease-aleris-in-out: var(--ease-in-out); } }