tokens/aleris-tailwind.css
The file as served. Copy it, or fetch it from /baseline/raw/tokens/aleris-tailwind.css — the same bytes without the page around them.
/**
* 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 this file, then Tailwind:
*
* @import "./aleris-tokens.css";
* @import "./aleris-tailwind.css";
* @import "tailwindcss";
*
* 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.
*
* 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.
*
* 144 of 372 tokens bridged.
*/
@theme inline {
--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-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);
}