tokens/baseline-tokens.json
{
"meta": {
"name": "Baseline Design Tokens",
"version": "0.1.0",
"generated_from": "aleris-tokens.css",
"generated_at": "2026-03-21",
"generator": "generate-tokens-json.js",
"governance": "CSS is source of truth. Regenerate if JSON and CSS disagree."
},
"layers": {
"primitives": {
"color-brand": {
"--color-petrol-100": {
"value": "#d9e1e2",
"usage": "Tinted backgrounds, selected row",
"constraint": "Never as text color"
},
"--color-petrol-300": {
"value": "#7fa9ae",
"usage": "Secondary accents, hover tints",
"constraint": "Not for body text — too light"
},
"--color-petrol-500": {
"value": "#004851",
"usage": "Primary text, headings, structural elements",
"constraint": "Default text color. Only specify when deviating"
},
"--color-sand-50": {
"value": "#faf8f6",
"usage": "Page background for instrumental surfaces",
"constraint": "Tools, admin, dashboards only. Communicative uses sand-100"
},
"--color-sand-100": {
"value": "#f2ece4",
"usage": "Page background for communicative surfaces",
"constraint": "Patient-facing, marketing, booking. Never use white as page bg"
},
"--color-sand-300": {
"value": "#e7ceb5"
},
"--color-sand-500": {
"value": "#d9b48f"
},
"--color-orange-100": {
"value": "#fde8df"
},
"--color-orange-300": {
"value": "#ffbe9f",
"usage": "Button hover state for primary buttons",
"constraint": "Only as hover/active variant of orange-500"
},
"--color-orange-500": {
"value": "#f58c61",
"usage": "Primary CTAs, accent, active indicators",
"constraint": "One primary CTA per screen maximum. Never for decoration"
}
},
"color-neutral": {
"--color-gray-100": {
"value": "#d7d2cb"
},
"--color-gray-300": {
"value": "#9e9281"
},
"--color-gray-500": {
"value": "#585044"
},
"--color-white": {
"value": "#ffffff",
"usage": "Card/surface backgrounds, inverse text bg",
"constraint": "Never as page background. Pages are sand-100 or sand-50"
}
},
"color-feedback": {
"--color-error-500": {
"value": "#c14444",
"usage": "Validation errors, destructive actions",
"constraint": "State communication only. Never decoration"
},
"--color-warning-500": {
"value": "#d9b48f",
"usage": "Warning states, caution indicators",
"constraint": "State communication only. Same hex as sand-500 — context differentiates"
}
},
"color-confirm": {
"--color-confirm-500": {
"value": "#27ae60",
"usage": "Interactive confirm actions (Klarmarkera, Godkänn, Signera)",
"constraint": "Distinct from goal-achieved green. Confirm = interactive, goal-achieved = indicator"
}
},
"color-goal-status": {
"--color-goal-achieved": {
"value": "#2e8540",
"usage": "KPI target met indicator",
"constraint": "Dashboard only. Always pair with icon/shape. Never for interactive confirm"
},
"--color-goal-borderline": {
"value": "#ffb81c",
"usage": "KPI near-target indicator",
"constraint": "Dashboard only. Always pair with icon/shape"
},
"--color-goal-missed": {
"value": "#d4351c",
"usage": "KPI target missed indicator",
"constraint": "Dashboard only. Always pair with icon/shape"
},
"--color-goal-no-data": {
"value": "#007bc7",
"usage": "KPI no-data indicator",
"constraint": "Dashboard only. Always pair with icon/shape"
}
},
"color-chart": {
"--color-chart-01-teal": {
"value": "#0f9081"
},
"--color-chart-02-mint": {
"value": "#94cbc4"
},
"--color-chart-03-blue": {
"value": "#577ba3"
},
"--color-chart-04-blue-light": {
"value": "#98c9ef"
},
"--color-chart-05-purple": {
"value": "#a078c2"
},
"--color-chart-06-purple-light": {
"value": "#d8b8ef"
},
"--color-chart-07-terracotta": {
"value": "#d77a61"
},
"--color-chart-08-terracotta-light": {
"value": "#f0c3b2"
},
"--color-chart-09-marine": {
"value": "#6b9495"
},
"--color-chart-10-olive": {
"value": "#bed0c0"
},
"--color-chart-11-warm-grey": {
"value": "#e4ded5"
},
"--color-chart-12-dark-sand": {
"value": "#d9b48f"
}
},
"spacing": {
"--spacing-0": {
"value": "0px",
"usage": "Zero gap, collapsed state",
"constraint": "Use explicitly — don't omit spacing, set it to 0"
},
"--spacing-3xs": {
"value": "4px",
"usage": "Minimum gap, icon padding, label-to-field",
"constraint": "Smallest usable gap. Never go below this"
},
"--spacing-2xs": {
"value": "8px",
"usage": "Tight element spacing, inline gaps",
"constraint": "Related inline elements"
},
"--spacing-xs": {
"value": "12px",
"usage": "Related element spacing, input padding-y",
"constraint": "Default vertical rhythm within components"
},
"--spacing-sm": {
"value": "16px",
"usage": "Default component padding, grid margin mobile",
"constraint": "Most common padding value"
},
"--spacing-md": {
"value": "24px",
"usage": "Section spacing within components, card padding",
"constraint": "Primary structural spacing"
},
"--spacing-lg": {
"value": "36px",
"usage": "Between components, above h2",
"constraint": "Component-level separation"
},
"--spacing-xl": {
"value": "48px",
"usage": "Between sections",
"constraint": "Section-level separation"
},
"--spacing-2xl": {
"value": "72px",
"usage": "Major section breaks",
"constraint": "Communicative surfaces mainly"
},
"--spacing-3xl": {
"value": "96px",
"usage": "Page-level spacing",
"constraint": "Communicative surfaces only. Never on instrumental"
}
},
"radius": {
"--radius-0": {
"value": "0px",
"usage": "Sharp corners, full-bleed edges",
"constraint": "Explicit removal of rounding"
},
"--radius-s": {
"value": "4px",
"usage": "Containers: cards, panels, modals, tables",
"constraint": "Container tier only. Not for buttons or inputs"
},
"--radius-m": {
"value": "8px",
"usage": "Interactive: buttons, inputs, dropdowns",
"constraint": "Interactive element tier. Not for containers"
},
"--radius-l": {
"value": "12px",
"usage": "Reserved — not currently assigned",
"constraint": "Do not use without governance approval"
},
"--radius-full": {
"value": "100px",
"usage": "Compact indicators: badges, tags, avatars",
"constraint": "Indicator tier only. No full-pill buttons exist in Aleris"
}
},
"stroke": {
"--stroke-0": {
"value": "0px"
},
"--stroke-xs": {
"value": "1px"
},
"--stroke-m": {
"value": "2px"
},
"--stroke-xl": {
"value": "4px"
}
},
"typography": {
"--font-family-primary": {
"value": "'Museo Sans', Arial, sans-serif"
},
"--font-family-fallback": {
"value": "Arial, sans-serif"
},
"--font-family-icons": {
"value": "'Font Awesome 6 Pro'"
},
"--font-size-xs": {
"value": "0.78rem"
},
"--font-size-sm": {
"value": "0.89rem"
},
"--font-size-base": {
"value": "1rem"
},
"--font-size-md": {
"value": "1.22rem"
},
"--font-size-lg": {
"value": "1.5rem"
},
"--font-size-xl": {
"value": "2.22rem"
},
"--font-size-2xl": {
"value": "3.33rem"
},
"--font-weight-light": {
"value": "300",
"usage": "Large display text on communicative surfaces",
"constraint": "Exceptional use only. Size must be xl (40px) or above"
},
"--font-weight-regular": {
"value": "500",
"usage": "Body text, labels, buttons, UI chrome",
"constraint": "The workhorse. Never use 400 — Museo Sans has no 400 weight"
},
"--font-weight-bold": {
"value": "700",
"usage": "Headings, emphasis, CTAs",
"constraint": "The other workhorse. 500 and 700 are the system"
},
"--font-weight-black": {
"value": "900",
"usage": "Almost never",
"constraint": "Exceptional use only. Try 700 at larger size first"
},
"--line-height-tight": {
"value": "1.1"
},
"--line-height-heading": {
"value": "1.2"
},
"--line-height-subheading": {
"value": "1.33"
},
"--line-height-body": {
"value": "1.5"
},
"--letter-spacing-normal": {
"value": "0"
},
"--letter-spacing-tight": {
"value": "-0.01em"
},
"--letter-spacing-tighter": {
"value": "-0.015em"
},
"--letter-spacing-tightest": {
"value": "-0.02em"
}
},
"elevation": {
"--shadow-e0": {
"value": "0px 0px 0px rgba(0, 72, 81, 0)"
},
"--shadow-e1": {
"value": "0px 2px 8px rgba(0, 72, 81, 0.08)"
},
"--shadow-e2": {
"value": "0px 4px 16px rgba(0, 72, 81, 0.12)"
},
"--shadow-e3": {
"value": "0px 6px 24px rgba(0, 72, 81, 0.16)"
}
},
"grid": {
"--grid-columns": {
"value": "12"
},
"--grid-gutter": {
"value": "var(--spacing-md)",
"references": "--spacing-md"
},
"--grid-margin-mobile": {
"value": "var(--spacing-sm)",
"references": "--spacing-sm"
},
"--grid-margin-desktop": {
"value": "var(--spacing-md)",
"references": "--spacing-md"
},
"--grid-max-width-communicative": {
"value": "1200px"
},
"--grid-max-width-instrumental": {
"value": "1440px"
},
"--breakpoint-sm": {
"value": "640px"
},
"--breakpoint-md": {
"value": "768px"
},
"--breakpoint-lg": {
"value": "1024px"
},
"--breakpoint-xl": {
"value": "1280px"
}
},
"icons": {
"--icon-xs": {
"value": "12px"
},
"--icon-sm": {
"value": "16px"
},
"--icon-md": {
"value": "18px"
},
"--icon-lg": {
"value": "24px"
},
"--icon-xl": {
"value": "48px"
}
}
},
"semantic": {
"brand": {
"--brand-primary": {
"value": "var(--color-petrol-500)",
"references": "--color-petrol-500"
},
"--brand-accent": {
"value": "var(--color-orange-500)",
"references": "--color-orange-500"
},
"--brand-light": {
"value": "var(--color-white)",
"references": "--color-white"
}
},
"text": {
"--text-primary": {
"value": "var(--color-petrol-500)",
"references": "--color-petrol-500"
},
"--text-secondary": {
"value": "var(--color-gray-500)",
"references": "--color-gray-500"
},
"--text-tertiary": {
"value": "var(--color-gray-300)",
"references": "--color-gray-300"
},
"--text-inverse": {
"value": "var(--color-white)",
"references": "--color-white"
},
"--text-accent": {
"value": "var(--color-orange-500)",
"references": "--color-orange-500"
},
"--text-link": {
"value": "var(--color-petrol-500)",
"references": "--color-petrol-500"
},
"--text-disabled": {
"value": "var(--color-gray-300)",
"references": "--color-gray-300"
},
"--text-error": {
"value": "var(--color-error-500)",
"references": "--color-error-500"
}
},
"surface": {
"--surface-page": {
"value": "var(--color-sand-100)",
"references": "--color-sand-100",
"usage": "Communicative page background",
"constraint": "Patient-facing, marketing, booking. Cards mandatory on this surface"
},
"--surface-page-instrumental": {
"value": "var(--color-sand-50)",
"references": "--color-sand-50",
"usage": "Instrumental page background",
"constraint": "Tools, admin, dashboards. Cards optional on this surface"
},
"--surface-card": {
"value": "var(--color-white)",
"references": "--color-white",
"usage": "Card and panel backgrounds",
"constraint": "Always white. Never sand on cards"
},
"--surface-elevated": {
"value": "var(--color-white)",
"references": "--color-white",
"usage": "Dropdowns, popovers, tooltips",
"constraint": "White with elevation shadow"
},
"--surface-overlay": {
"value": "var(--color-white)",
"references": "--color-white",
"usage": "Modal and dialog backgrounds",
"constraint": "White with highest elevation"
},
"--surface-subtle-neutral": {
"value": "var(--color-sand-100)",
"references": "--color-sand-100"
},
"--surface-subtle-warm": {
"value": "var(--color-orange-100)",
"references": "--color-orange-100"
},
"--surface-subtle-cold": {
"value": "var(--color-petrol-100)",
"references": "--color-petrol-100"
},
"--surface-strong-neutral": {
"value": "var(--color-sand-500)",
"references": "--color-sand-500"
},
"--surface-strong-warm": {
"value": "var(--color-orange-500)",
"references": "--color-orange-500"
},
"--surface-strong-cold": {
"value": "var(--color-petrol-500)",
"references": "--color-petrol-500"
}
},
"border": {
"--border-default": {
"value": "var(--color-gray-100)",
"references": "--color-gray-100"
},
"--border-strong": {
"value": "var(--color-gray-300)",
"references": "--color-gray-300"
},
"--border-focus": {
"value": "var(--color-petrol-500)",
"references": "--color-petrol-500"
},
"--border-error": {
"value": "var(--color-error-500)",
"references": "--color-error-500"
}
},
"state": {
"--state-hover": {
"value": "var(--color-orange-500)",
"references": "--color-orange-500"
},
"--state-active": {
"value": "var(--color-sand-500)",
"references": "--color-sand-500"
},
"--state-focus-ring": {
"value": "var(--color-petrol-500)",
"references": "--color-petrol-500"
},
"--state-disabled-bg": {
"value": "var(--color-gray-100)",
"references": "--color-gray-100"
},
"--state-disabled-text": {
"value": "var(--color-gray-300)",
"references": "--color-gray-300"
}
},
"status": {
"--status-error": {
"value": "var(--color-error-500)",
"references": "--color-error-500"
},
"--status-warning": {
"value": "var(--color-warning-500)",
"references": "--color-warning-500"
},
"--status-confirm": {
"value": "var(--color-confirm-500)",
"references": "--color-confirm-500"
},
"--status-background": {
"value": "var(--color-white)",
"references": "--color-white"
}
},
"goal-status": {
"--goal-achieved": {
"value": "var(--color-goal-achieved)",
"references": "--color-goal-achieved"
},
"--goal-borderline": {
"value": "var(--color-goal-borderline)",
"references": "--color-goal-borderline"
},
"--goal-missed": {
"value": "var(--color-goal-missed)",
"references": "--color-goal-missed"
},
"--goal-no-data": {
"value": "var(--color-goal-no-data)",
"references": "--color-goal-no-data"
}
},
"chart": {
"--chart-1": {
"value": "var(--color-chart-01-teal)",
"references": "--color-chart-01-teal"
},
"--chart-2": {
"value": "var(--color-chart-02-mint)",
"references": "--color-chart-02-mint"
},
"--chart-3": {
"value": "var(--color-chart-03-blue)",
"references": "--color-chart-03-blue"
},
"--chart-4": {
"value": "var(--color-chart-04-blue-light)",
"references": "--color-chart-04-blue-light"
},
"--chart-5": {
"value": "var(--color-chart-05-purple)",
"references": "--color-chart-05-purple"
},
"--chart-6": {
"value": "var(--color-chart-06-purple-light)",
"references": "--color-chart-06-purple-light"
},
"--chart-7": {
"value": "var(--color-chart-07-terracotta)",
"references": "--color-chart-07-terracotta"
},
"--chart-8": {
"value": "var(--color-chart-08-terracotta-light)",
"references": "--color-chart-08-terracotta-light"
},
"--chart-9": {
"value": "var(--color-chart-09-marine)",
"references": "--color-chart-09-marine"
},
"--chart-10": {
"value": "var(--color-chart-10-olive)",
"references": "--color-chart-10-olive"
},
"--chart-11": {
"value": "var(--color-chart-11-warm-grey)",
"references": "--color-chart-11-warm-grey"
},
"--chart-12": {
"value": "var(--color-chart-12-dark-sand)",
"references": "--color-chart-12-dark-sand"
},
"--chart-pair-1-a": {
"value": "var(--color-chart-01-teal)",
"references": "--color-chart-01-teal"
},
"--chart-pair-1-b": {
"value": "var(--color-chart-07-terracotta)",
"references": "--color-chart-07-terracotta"
},
"--chart-pair-2-a": {
"value": "var(--color-chart-03-blue)",
"references": "--color-chart-03-blue"
},
"--chart-pair-2-b": {
"value": "var(--color-chart-08-terracotta-light)",
"references": "--color-chart-08-terracotta-light"
},
"--chart-pair-3-a": {
"value": "var(--color-chart-05-purple)",
"references": "--color-chart-05-purple"
},
"--chart-pair-3-b": {
"value": "var(--color-chart-10-olive)",
"references": "--color-chart-10-olive"
}
},
"elevation": {
"--elevation-flat": {
"value": "var(--shadow-e0)",
"references": "--shadow-e0"
},
"--elevation-card": {
"value": "var(--shadow-e1)",
"references": "--shadow-e1"
},
"--elevation-dropdown": {
"value": "var(--shadow-e2)",
"references": "--shadow-e2"
},
"--elevation-modal": {
"value": "var(--shadow-e3)",
"references": "--shadow-e3"
}
}
},
"component": {
"typography-compositions": {
"--type-h1-size": {
"value": "var(--font-size-2xl)",
"references": "--font-size-2xl"
},
"--type-h1-weight": {
"value": "var(--font-weight-bold)",
"references": "--font-weight-bold"
},
"--type-h1-line-height": {
"value": "var(--line-height-tight)",
"references": "--line-height-tight"
},
"--type-h1-letter-spacing": {
"value": "var(--letter-spacing-tightest)",
"references": "--letter-spacing-tightest"
},
"--type-h1-color": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--type-h2-size": {
"value": "var(--font-size-xl)",
"references": "--font-size-xl"
},
"--type-h2-weight": {
"value": "var(--font-weight-bold)",
"references": "--font-weight-bold"
},
"--type-h2-line-height": {
"value": "var(--line-height-heading)",
"references": "--line-height-heading"
},
"--type-h2-letter-spacing": {
"value": "var(--letter-spacing-tighter)",
"references": "--letter-spacing-tighter"
},
"--type-h2-color": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--type-h3-size": {
"value": "var(--font-size-lg)",
"references": "--font-size-lg"
},
"--type-h3-weight": {
"value": "var(--font-weight-bold)",
"references": "--font-weight-bold"
},
"--type-h3-line-height": {
"value": "var(--line-height-subheading)",
"references": "--line-height-subheading"
},
"--type-h3-letter-spacing": {
"value": "var(--letter-spacing-tight)",
"references": "--letter-spacing-tight"
},
"--type-h3-color": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--type-h4-size": {
"value": "var(--font-size-md)",
"references": "--font-size-md"
},
"--type-h4-weight": {
"value": "var(--font-weight-bold)",
"references": "--font-weight-bold"
},
"--type-h4-line-height": {
"value": "var(--line-height-subheading)",
"references": "--line-height-subheading"
},
"--type-h4-letter-spacing": {
"value": "var(--letter-spacing-normal)",
"references": "--letter-spacing-normal"
},
"--type-h4-color": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--type-lead-size": {
"value": "var(--font-size-lg)",
"references": "--font-size-lg"
},
"--type-lead-weight": {
"value": "var(--font-weight-regular)",
"references": "--font-weight-regular"
},
"--type-lead-line-height": {
"value": "var(--line-height-subheading)",
"references": "--line-height-subheading"
},
"--type-lead-letter-spacing": {
"value": "var(--letter-spacing-normal)",
"references": "--letter-spacing-normal"
},
"--type-lead-color": {
"value": "var(--text-secondary)",
"references": "--text-secondary"
},
"--type-body-size": {
"value": "var(--font-size-base)",
"references": "--font-size-base"
},
"--type-body-weight": {
"value": "var(--font-weight-regular)",
"references": "--font-weight-regular"
},
"--type-body-line-height": {
"value": "var(--line-height-body)",
"references": "--line-height-body"
},
"--type-body-color": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--type-body-bold-weight": {
"value": "var(--font-weight-bold)",
"references": "--font-weight-bold"
},
"--type-label-size": {
"value": "var(--font-size-sm)",
"references": "--font-size-sm"
},
"--type-label-weight": {
"value": "var(--font-weight-regular)",
"references": "--font-weight-regular"
},
"--type-label-line-height": {
"value": "var(--line-height-body)",
"references": "--line-height-body"
},
"--type-label-color": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--type-small-size": {
"value": "var(--font-size-xs)",
"references": "--font-size-xs"
},
"--type-small-weight": {
"value": "var(--font-weight-regular)",
"references": "--font-weight-regular"
},
"--type-small-line-height": {
"value": "var(--line-height-body)",
"references": "--line-height-body"
},
"--type-small-color": {
"value": "var(--text-secondary)",
"references": "--text-secondary"
}
},
"spacing-semantic": {
"--spacing-page-padding": {
"value": "var(--spacing-sm)",
"references": "--spacing-sm"
},
"--spacing-card-padding": {
"value": "var(--spacing-md)",
"references": "--spacing-md"
},
"--spacing-section-gap": {
"value": "var(--spacing-md)",
"references": "--spacing-md"
},
"--spacing-element-gap": {
"value": "var(--spacing-xs)",
"references": "--spacing-xs"
},
"--spacing-label-gap": {
"value": "var(--spacing-3xs)",
"references": "--spacing-3xs"
}
},
"button": {
"--button-primary-bg": {
"value": "var(--brand-accent)",
"references": "--brand-accent"
},
"--button-primary-text": {
"value": "var(--color-white)",
"references": "--color-white"
},
"--button-primary-hover-bg": {
"value": "var(--color-orange-300)",
"references": "--color-orange-300"
},
"--button-primary-radius": {
"value": "var(--radius-m)",
"references": "--radius-m"
},
"--button-primary-padding-x": {
"value": "var(--spacing-md)",
"references": "--spacing-md"
},
"--button-primary-padding-y": {
"value": "var(--spacing-xs)",
"references": "--spacing-xs"
},
"--button-primary-font-size": {
"value": "var(--font-size-base)",
"references": "--font-size-base"
},
"--button-primary-font-weight": {
"value": "var(--font-weight-regular)",
"references": "--font-weight-regular"
},
"--button-primary-shadow": {
"value": "var(--shadow-e1)",
"references": "--shadow-e1"
},
"--button-secondary-bg": {
"value": "var(--brand-primary)",
"references": "--brand-primary"
},
"--button-secondary-text": {
"value": "var(--color-white)",
"references": "--color-white"
},
"--button-secondary-hover-bg": {
"value": "var(--color-petrol-300)",
"references": "--color-petrol-300"
},
"--button-secondary-radius": {
"value": "var(--radius-m)",
"references": "--radius-m"
},
"--button-outline-bg": {
"value": "transparent"
},
"--button-outline-text": {
"value": "var(--brand-primary)",
"references": "--brand-primary"
},
"--button-outline-border": {
"value": "var(--brand-primary)",
"references": "--brand-primary"
},
"--button-outline-radius": {
"value": "var(--radius-m)",
"references": "--radius-m"
},
"--button-ghost-bg": {
"value": "transparent"
},
"--button-ghost-text": {
"value": "var(--brand-primary)",
"references": "--brand-primary"
},
"--button-confirm-bg": {
"value": "var(--color-confirm-500)",
"references": "--color-confirm-500"
},
"--button-confirm-text": {
"value": "var(--color-white)",
"references": "--color-white"
},
"--button-confirm-hover-bg": {
"value": "#219a52"
},
"--button-confirm-radius": {
"value": "var(--radius-m)",
"references": "--radius-m"
},
"--button-small-font-size": {
"value": "var(--font-size-xs)",
"references": "--font-size-xs"
},
"--button-small-padding-x": {
"value": "var(--spacing-sm)",
"references": "--spacing-sm"
},
"--button-small-padding-y": {
"value": "var(--spacing-3xs)",
"references": "--spacing-3xs"
}
},
"tab-navigation": {
"--tab-nav-bg": {
"value": "transparent"
},
"--tab-nav-border-bottom": {
"value": "var(--border-default)",
"references": "--border-default"
},
"--tab-nav-padding-x": {
"value": "var(--spacing-sm)",
"references": "--spacing-sm"
},
"--tab-nav-padding-y": {
"value": "var(--spacing-xs)",
"references": "--spacing-xs"
},
"--tab-nav-gap": {
"value": "var(--spacing-md)",
"references": "--spacing-md"
},
"--tab-nav-font-size": {
"value": "var(--font-size-sm)",
"references": "--font-size-sm"
},
"--tab-nav-font-weight": {
"value": "var(--font-weight-regular)",
"references": "--font-weight-regular"
},
"--tab-nav-color": {
"value": "var(--text-secondary)",
"references": "--text-secondary"
},
"--tab-nav-color-active": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--tab-nav-color-hover": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--tab-nav-indicator-color": {
"value": "var(--color-petrol-500)",
"references": "--color-petrol-500"
},
"--tab-nav-indicator-width": {
"value": "2px"
},
"--tab-nav-sticky-z": {
"value": "var(--z-sticky)",
"references": "--z-sticky"
}
},
"card": {
"--card-bg": {
"value": "var(--surface-card)",
"references": "--surface-card"
},
"--card-radius": {
"value": "var(--radius-s)",
"references": "--radius-s"
},
"--card-padding": {
"value": "var(--spacing-card-padding)",
"references": "--spacing-card-padding"
},
"--card-border": {
"value": "var(--border-default)",
"references": "--border-default"
},
"--card-shadow": {
"value": "var(--elevation-card)",
"references": "--elevation-card"
}
},
"input": {
"--input-bg": {
"value": "var(--color-white)",
"references": "--color-white"
},
"--input-border": {
"value": "var(--border-default)",
"references": "--border-default"
},
"--input-border-focus": {
"value": "var(--border-focus)",
"references": "--border-focus"
},
"--input-border-error": {
"value": "var(--border-error)",
"references": "--border-error"
},
"--input-radius": {
"value": "var(--radius-m)",
"references": "--radius-m"
},
"--input-padding-x": {
"value": "var(--spacing-sm)",
"references": "--spacing-sm"
},
"--input-padding-y": {
"value": "var(--spacing-xs)",
"references": "--spacing-xs"
},
"--input-font-size": {
"value": "var(--font-size-base)",
"references": "--font-size-base"
},
"--input-text": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--input-placeholder": {
"value": "var(--text-tertiary)",
"references": "--text-tertiary"
},
"--input-label-size": {
"value": "var(--font-size-sm)",
"references": "--font-size-sm"
},
"--input-label-weight": {
"value": "var(--font-weight-bold)",
"references": "--font-weight-bold"
},
"--input-label-color": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--input-label-gap": {
"value": "var(--spacing-3xs)",
"references": "--spacing-3xs"
},
"--input-helper-size": {
"value": "var(--font-size-xs)",
"references": "--font-size-xs"
},
"--input-helper-color": {
"value": "var(--text-secondary)",
"references": "--text-secondary"
},
"--input-error-color": {
"value": "var(--color-error-500)",
"references": "--color-error-500"
},
"--input-error-size": {
"value": "var(--font-size-xs)",
"references": "--font-size-xs"
},
"--input-error-border": {
"value": "var(--border-error)",
"references": "--border-error"
},
"--input-optional-color": {
"value": "var(--text-secondary)",
"references": "--text-secondary"
},
"--input-focus-ring": {
"value": "var(--state-focus-ring)",
"references": "--state-focus-ring"
},
"--input-focus-ring-offset": {
"value": "2px"
},
"--input-disabled-bg": {
"value": "var(--color-gray-100)",
"references": "--color-gray-100"
},
"--input-disabled-text": {
"value": "var(--text-disabled)",
"references": "--text-disabled"
},
"--input-disabled-border": {
"value": "var(--color-gray-100)",
"references": "--color-gray-100"
},
"--input-readonly-bg": {
"value": "var(--surface-page)",
"references": "--surface-page"
},
"--input-readonly-text": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--input-readonly-border": {
"value": "transparent"
}
},
"badge": {
"--badge-radius": {
"value": "var(--radius-full)",
"references": "--radius-full"
},
"--badge-font-size": {
"value": "var(--font-size-xs)",
"references": "--font-size-xs"
},
"--badge-padding-x": {
"value": "var(--spacing-2xs)",
"references": "--spacing-2xs"
},
"--badge-padding-y": {
"value": "var(--spacing-3xs)",
"references": "--spacing-3xs"
}
},
"table": {
"--table-row-height-compact": {
"value": "36px"
},
"--table-row-height-default": {
"value": "48px"
},
"--table-row-height-comfortable": {
"value": "64px"
},
"--table-cell-padding-x": {
"value": "var(--spacing-sm)",
"references": "--spacing-sm"
},
"--table-cell-padding-y": {
"value": "var(--spacing-2xs)",
"references": "--spacing-2xs"
},
"--table-header-bg": {
"value": "var(--surface-subtle-cold)",
"references": "--surface-subtle-cold"
},
"--table-header-text": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--table-header-weight": {
"value": "var(--font-weight-bold)",
"references": "--font-weight-bold"
},
"--table-header-size": {
"value": "var(--font-size-xs)",
"references": "--font-size-xs"
},
"--table-header-transform": {
"value": "uppercase"
},
"--table-header-letter-spacing": {
"value": "0.05em"
},
"--table-body-size": {
"value": "var(--font-size-sm)",
"references": "--font-size-sm"
},
"--table-body-color": {
"value": "var(--text-primary)",
"references": "--text-primary"
},
"--table-row-hover-bg": {
"value": "var(--surface-subtle-warm)",
"references": "--surface-subtle-warm"
},
"--table-row-selected-bg": {
"value": "var(--color-petrol-100)",
"references": "--color-petrol-100"
},
"--table-row-border": {
"value": "var(--border-default)",
"references": "--border-default"
},
"--table-row-stripe-bg": {
"value": "var(--color-sand-100)",
"references": "--color-sand-100"
},
"--table-density-preference-key": {
"value": "'aleris-table-density'"
}
},
"motion": {
"--duration-instant": {
"value": "100ms"
},
"--duration-fast": {
"value": "200ms"
},
"--duration-moderate": {
"value": "350ms"
},
"--duration-slow": {
"value": "500ms"
},
"--ease-out": {
"value": "cubic-bezier(0.0, 0.0, 0.2, 1)"
},
"--ease-in-out": {
"value": "cubic-bezier(0.4, 0.0, 0.2, 1)"
}
},
"skeleton": {
"--skeleton-bg": {
"value": "var(--color-gray-100)",
"references": "--color-gray-100"
},
"--skeleton-shimmer": {
"value": "linear-gradient(90deg, var(--color-gray-100) 0%, var(--color-sand-100) 50%, var(--color-gray-100) 100%)"
},
"--skeleton-duration": {
"value": "var(--duration-moderate)",
"references": "--duration-moderate"
},
"--skeleton-easing": {
"value": "var(--ease-in-out)",
"references": "--ease-in-out"
},
"--skeleton-radius-rect": {
"value": "var(--radius-s)",
"references": "--radius-s"
},
"--skeleton-radius-circle": {
"value": "var(--radius-full)",
"references": "--radius-full"
}
},
"z-index": {
"--z-base": {
"value": "0"
},
"--z-dropdown": {
"value": "10"
},
"--z-sticky": {
"value": "20"
},
"--z-sidebar": {
"value": "30"
},
"--z-search": {
"value": "40"
},
"--z-topbar": {
"value": "50"
},
"--z-modal": {
"value": "100"
},
"--z-toast": {
"value": "110"
}
},
"images": {
"--image-ratio-hero": {
"value": "16 / 9"
},
"--image-ratio-content": {
"value": "3 / 2"
},
"--image-ratio-square": {
"value": "1 / 1"
},
"--image-ratio-document": {
"value": "4 / 3"
},
"--image-radius-default": {
"value": "var(--radius-m)",
"references": "--radius-m"
},
"--image-radius-avatar": {
"value": "var(--radius-full)",
"references": "--radius-full"
},
"--image-radius-none": {
"value": "0"
}
}
}
},
"stats": {
"total": 318,
"annotated": 39,
"unannotated": 279,
"by_layer": {
"primitives": 93,
"semantic": 61,
"component": 164
},
"by_category": {
"color-brand": 10,
"color-neutral": 4,
"color-feedback": 2,
"color-confirm": 1,
"color-goal-status": 4,
"color-chart": 12,
"spacing": 10,
"radius": 5,
"stroke": 4,
"typography": 22,
"elevation": 8,
"grid": 10,
"icons": 5,
"brand": 3,
"text": 8,
"surface": 11,
"border": 4,
"state": 5,
"status": 4,
"goal-status": 4,
"chart": 18,
"typography-compositions": 38,
"spacing-semantic": 5,
"button": 26,
"tab-navigation": 13,
"card": 5,
"input": 28,
"badge": 4,
"table": 18,
"motion": 6,
"skeleton": 6,
"z-index": 8,
"images": 7
}
}
}