zabi-components 8.0.0 → 9.0.0

package/dist/create-theme/theme-data.js

@@ -0,0 +1,2644 @@
+// Generated by scripts/build-create-theme.js from src/app.css and
+// scripts/contrast-pairs.js. Do not edit.
+export default {
+  "light": {
+    "--zabi-base-50": "#fafafa",
+    "--zabi-base-75": "#f7f7f7",
+    "--zabi-base-100": "#f4f4f5",
+    "--zabi-base-150": "#ececee",
+    "--zabi-base-200": "#e4e4e7",
+    "--zabi-base-250": "#dcdcdf",
+    "--zabi-base-300": "#d4d4d8",
+    "--zabi-base-350": "#babac1",
+    "--zabi-base-400": "#a1a1aa",
+    "--zabi-base-450": "#898992",
+    "--zabi-base-500": "#71717a",
+    "--zabi-base-550": "#61616a",
+    "--zabi-base-600": "#52525b",
+    "--zabi-base-650": "#484850",
+    "--zabi-base-700": "#3f3f46",
+    "--zabi-base-750": "#333338",
+    "--zabi-base-800": "#27272a",
+    "--zabi-base-850": "#1f1f22",
+    "--zabi-base-900": "#18181b",
+    "--zabi-base-925": "#101013",
+    "--zabi-base-950": "#09090b",
+    "--zabi-brand-50": "#f4f6ff",
+    "--zabi-brand-100": "#e9eeff",
+    "--zabi-brand-200": "#d3dcff",
+    "--zabi-brand-300": "#b5c6ff",
+    "--zabi-brand-400": "#92a9ff",
+    "--zabi-brand-500": "#6d87f1",
+    "--zabi-brand-600": "#4f68da",
+    "--zabi-brand-700": "#3c52ba",
+    "--zabi-brand-800": "#2b3e95",
+    "--zabi-brand-900": "#1c2c6d",
+    "--zabi-brand-950": "#111d49",
+    "--color-brand-50": "var(--zabi-brand-50)",
+    "--color-brand-100": "var(--zabi-brand-100)",
+    "--color-brand-200": "var(--zabi-brand-200)",
+    "--color-brand-300": "var(--zabi-brand-300)",
+    "--color-brand-400": "var(--zabi-brand-400)",
+    "--color-brand-500": "var(--zabi-brand-500)",
+    "--color-brand-600": "var(--zabi-brand-600)",
+    "--color-brand-700": "var(--zabi-brand-700)",
+    "--color-brand-800": "var(--zabi-brand-800)",
+    "--color-brand-900": "var(--zabi-brand-900)",
+    "--color-brand-950": "var(--zabi-brand-950)",
+    "--zabi-citron-50": "#f4f8ee",
+    "--zabi-citron-100": "#e9f0de",
+    "--zabi-citron-200": "#d4e2bd",
+    "--zabi-citron-300": "#b9ce92",
+    "--zabi-citron-400": "#99b55e",
+    "--zabi-citron-500": "#769619",
+    "--zabi-citron-600": "#5d7900",
+    "--zabi-citron-700": "#4a6100",
+    "--zabi-citron-800": "#384a00",
+    "--zabi-citron-900": "#273500",
+    "--zabi-citron-950": "#192300",
+    "--color-citron-50": "var(--zabi-citron-50)",
+    "--color-citron-100": "var(--zabi-citron-100)",
+    "--color-citron-200": "var(--zabi-citron-200)",
+    "--color-citron-300": "var(--zabi-citron-300)",
+    "--color-citron-400": "var(--zabi-citron-400)",
+    "--color-citron-500": "var(--zabi-citron-500)",
+    "--color-citron-600": "var(--zabi-citron-600)",
+    "--color-citron-700": "var(--zabi-citron-700)",
+    "--color-citron-800": "var(--zabi-citron-800)",
+    "--color-citron-900": "var(--zabi-citron-900)",
+    "--color-citron-950": "var(--zabi-citron-950)",
+    "--zabi-accent-50": "var(--zabi-citron-50)",
+    "--zabi-accent-100": "var(--zabi-citron-100)",
+    "--zabi-accent-200": "var(--zabi-citron-200)",
+    "--zabi-accent-300": "var(--zabi-citron-300)",
+    "--zabi-accent-400": "var(--zabi-citron-400)",
+    "--zabi-accent-500": "var(--zabi-citron-500)",
+    "--zabi-accent-600": "var(--zabi-citron-600)",
+    "--zabi-accent-700": "var(--zabi-citron-700)",
+    "--zabi-accent-800": "var(--zabi-citron-800)",
+    "--zabi-accent-900": "var(--zabi-citron-900)",
+    "--zabi-accent-950": "var(--zabi-citron-950)",
+    "--color-accent-50": "var(--zabi-accent-50)",
+    "--color-accent-100": "var(--zabi-accent-100)",
+    "--color-accent-200": "var(--zabi-accent-200)",
+    "--color-accent-300": "var(--zabi-accent-300)",
+    "--color-accent-400": "var(--zabi-accent-400)",
+    "--color-accent-500": "var(--zabi-accent-500)",
+    "--color-accent-600": "var(--zabi-accent-600)",
+    "--color-accent-700": "var(--zabi-accent-700)",
+    "--color-accent-800": "var(--zabi-accent-800)",
+    "--color-accent-900": "var(--zabi-accent-900)",
+    "--color-accent-950": "var(--zabi-accent-950)",
+    "--zabi-pine-50": "#f0f9f3",
+    "--zabi-pine-100": "#e1f2e8",
+    "--zabi-pine-200": "#c3e5d0",
+    "--zabi-pine-300": "#9cd3b2",
+    "--zabi-pine-400": "#6cbb8e",
+    "--zabi-pine-500": "#319e67",
+    "--zabi-pine-600": "#00804b",
+    "--zabi-pine-700": "#00683b",
+    "--zabi-pine-800": "#00502b",
+    "--zabi-pine-900": "#00391c",
+    "--zabi-pine-950": "#002610",
+    "--color-pine-50": "var(--zabi-pine-50)",
+    "--color-pine-100": "var(--zabi-pine-100)",
+    "--color-pine-200": "var(--zabi-pine-200)",
+    "--color-pine-300": "var(--zabi-pine-300)",
+    "--color-pine-400": "var(--zabi-pine-400)",
+    "--color-pine-500": "var(--zabi-pine-500)",
+    "--color-pine-600": "var(--zabi-pine-600)",
+    "--color-pine-700": "var(--zabi-pine-700)",
+    "--color-pine-800": "var(--zabi-pine-800)",
+    "--color-pine-900": "var(--zabi-pine-900)",
+    "--color-pine-950": "var(--zabi-pine-950)",
+    "--zabi-iris-50": "#f6f6fd",
+    "--zabi-iris-100": "#ecedfb",
+    "--zabi-iris-200": "#dadbf6",
+    "--zabi-iris-300": "#c1c4ef",
+    "--zabi-iris-400": "#a5a7e2",
+    "--zabi-iris-500": "#8486cd",
+    "--zabi-iris-600": "#6969b4",
+    "--zabi-iris-700": "#535397",
+    "--zabi-iris-800": "#3f3f78",
+    "--zabi-iris-900": "#2c2c58",
+    "--zabi-iris-950": "#1d1d3a",
+    "--color-iris-50": "var(--zabi-iris-50)",
+    "--color-iris-100": "var(--zabi-iris-100)",
+    "--color-iris-200": "var(--zabi-iris-200)",
+    "--color-iris-300": "var(--zabi-iris-300)",
+    "--color-iris-400": "var(--zabi-iris-400)",
+    "--color-iris-500": "var(--zabi-iris-500)",
+    "--color-iris-600": "var(--zabi-iris-600)",
+    "--color-iris-700": "var(--zabi-iris-700)",
+    "--color-iris-800": "var(--zabi-iris-800)",
+    "--color-iris-900": "var(--zabi-iris-900)",
+    "--color-iris-950": "var(--zabi-iris-950)",
+    "--zabi-warning-50": "#fdf5ec",
+    "--zabi-warning-100": "#fbebda",
+    "--zabi-warning-200": "#f6d7b4",
+    "--zabi-warning-300": "#efbc84",
+    "--zabi-warning-400": "#e49a44",
+    "--zabi-warning-500": "#c67800",
+    "--zabi-warning-600": "#a05f00",
+    "--zabi-warning-700": "#834b00",
+    "--zabi-warning-800": "#663800",
+    "--zabi-warning-900": "#4b2700",
+    "--zabi-warning-950": "#331800",
+    "--color-warning-50": "var(--zabi-warning-50)",
+    "--color-warning-100": "var(--zabi-warning-100)",
+    "--color-warning-200": "var(--zabi-warning-200)",
+    "--color-warning-300": "var(--zabi-warning-300)",
+    "--color-warning-400": "var(--zabi-warning-400)",
+    "--color-warning-500": "var(--zabi-warning-500)",
+    "--color-warning-600": "var(--zabi-warning-600)",
+    "--color-warning-700": "var(--zabi-warning-700)",
+    "--color-warning-800": "var(--zabi-warning-800)",
+    "--color-warning-900": "var(--zabi-warning-900)",
+    "--color-warning-950": "var(--zabi-warning-950)",
+    "--zabi-error-50": "#fff4f3",
+    "--zabi-error-100": "#ffe9e6",
+    "--zabi-error-200": "#ffd2cd",
+    "--zabi-error-300": "#ffb2ab",
+    "--zabi-error-400": "#ff877d",
+    "--zabi-error-500": "#ed564e",
+    "--zabi-error-600": "#d22828",
+    "--zabi-error-700": "#b20912",
+    "--zabi-error-800": "#8c0006",
+    "--zabi-error-900": "#660002",
+    "--zabi-error-950": "#460202",
+    "--color-error-50": "var(--zabi-error-50)",
+    "--color-error-100": "var(--zabi-error-100)",
+    "--color-error-200": "var(--zabi-error-200)",
+    "--color-error-300": "var(--zabi-error-300)",
+    "--color-error-400": "var(--zabi-error-400)",
+    "--color-error-500": "var(--zabi-error-500)",
+    "--color-error-600": "var(--zabi-error-600)",
+    "--color-error-700": "var(--zabi-error-700)",
+    "--color-error-800": "var(--zabi-error-800)",
+    "--color-error-900": "var(--zabi-error-900)",
+    "--color-error-950": "var(--zabi-error-950)",
+    "--color-base-50": "var(--zabi-base-50)",
+    "--color-base-75": "var(--zabi-base-75)",
+    "--color-base-100": "var(--zabi-base-100)",
+    "--color-base-150": "var(--zabi-base-150)",
+    "--color-base-200": "var(--zabi-base-200)",
+    "--color-base-250": "var(--zabi-base-250)",
+    "--color-base-300": "var(--zabi-base-300)",
+    "--color-base-350": "var(--zabi-base-350)",
+    "--color-base-400": "var(--zabi-base-400)",
+    "--color-base-450": "var(--zabi-base-450)",
+    "--color-base-500": "var(--zabi-base-500)",
+    "--color-base-550": "var(--zabi-base-550)",
+    "--color-base-600": "var(--zabi-base-600)",
+    "--color-base-650": "var(--zabi-base-650)",
+    "--color-base-700": "var(--zabi-base-700)",
+    "--color-base-750": "var(--zabi-base-750)",
+    "--color-base-800": "var(--zabi-base-800)",
+    "--color-base-850": "var(--zabi-base-850)",
+    "--color-base-900": "var(--zabi-base-900)",
+    "--color-base-925": "var(--zabi-base-925)",
+    "--color-base-950": "var(--zabi-base-950)",
+    "--color-surface-base": "var(--color-base-50)",
+    "--color-surface-raised": "#ffffff",
+    "--color-surface-elevated": "var(--color-base-100)",
+    "--color-surface-overlay": "#ffffff",
+    "--color-surface-chrome": "var(--color-surface-base)",
+    "--color-bar": "var(--color-surface-chrome)",
+    "--color-bar-border": "color-mix(in srgb, var(--color-headline) 10%, transparent)",
+    "--color-bar-brand": "var(--color-action-primary)",
+    "--color-tabbar-active": "var(--color-nav-menu-active)",
+    "--color-surface-inset": "var(--color-base-100)",
+    "--color-surface-overlay-hover": "var(--color-base-150)",
+    "--color-border-overlay": "rgba(9, 9, 11, 0.1)",
+    "--color-background": "var(--color-surface-base)",
+    "--color-background-secondary": "var(--color-base-100)",
+    "--color-background-tertiary": "var(--color-base-150)",
+    "--color-page": "var(--color-surface-base)",
+    "--color-page-secondary": "var(--color-base-200)",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-hover": "var(--color-base-150)",
+    "--color-card-active": "var(--color-base-200)",
+    "--color-card-elevated": "var(--color-surface-overlay)",
+    "--color-card-tint": "var(--color-brand-100)",
+    "--color-card-flat": "var(--color-card)",
+    "--color-card-flat-hover": "var(--color-card-hover)",
+    "--color-card-flat-active": "var(--color-card-active)",
+    "--color-surface-1": "var(--color-surface-raised)",
+    "--color-surface-2": "var(--color-surface-elevated)",
+    "--color-surface-3": "var(--color-base-75)",
+    "--color-surface-4": "var(--color-base-100)",
+    "--color-control-track": "var(--color-base-400)",
+    "--color-control-track-hover": "var(--color-base-450)",
+    "--color-control-track-active": "var(--color-base-500)",
+    "--color-toggle-track": "var(--color-base-200)",
+    "--color-toggle-track-hover": "var(--color-base-250)",
+    "--color-toggle-track-active": "var(--color-base-300)",
+    "--color-toggle-track-border": "var(--color-input-border)",
+    "--color-toggle-knob": "var(--color-base-500)",
+    "--color-toggle-knob-checked": "var(--color-action-primary-text)",
+    "--color-progress-fill": "var(--color-action-primary)",
+    "--color-progress-track": "var(--color-input)",
+    "--color-progress-track-border": "var(--color-input-border)",
+    "--color-surface-hover": "rgba(9, 9, 11, 0.09)",
+    "--color-surface-active": "rgba(9, 9, 11, 0.15)",
+    "--color-overlay": "rgba(0, 0, 0, 0.5)",
+    "--color-input": "var(--color-surface-raised)",
+    "--color-input-border": "var(--color-base-500)",
+    "--color-input-border-hover": "var(--color-base-550)",
+    "--color-input-hover": "var(--color-base-100)",
+    "--color-input-active": "color-mix(in srgb, var(--zabi-base-900) 12%, var(--color-input))",
+    "--color-input-focus": "var(--color-surface-raised)",
+    "--color-input-disabled": "var(--color-base-150)",
+    "--color-input-solid": "var(--color-input)",
+    "--color-input-solid-hover": "var(--color-input-hover)",
+    "--color-input-solid-focus": "var(--color-input-focus)",
+    "--color-input-solid-active": "var(--color-input-active)",
+    "--color-headline": "var(--color-base-900)",
+    "--color-body": "var(--color-base-800)",
+    "--color-description": "var(--color-base-600)",
+    "--color-caption": "var(--color-base-550)",
+    "--color-input-placeholder": "var(--color-base-550)",
+    "--color-label": "var(--color-base-700)",
+    "--color-link": "var(--color-brand-700)",
+    "--color-link-hover": "var(--color-brand-800)",
+    "--color-nav-menu-item": "var(--color-body)",
+    "--color-nav-menu-item-hover": "var(--color-headline)",
+    "--color-nav-menu-item-active": "var(--color-link)",
+    "--color-nav-menu-hover": "var(--color-surface-hover)",
+    "--color-nav-menu-active": "var(--color-action-primary-subtle)",
+    "--color-nav-menu-active-hover": "var(--color-action-primary-subtle-hover)",
+    "--color-nav-menu-focus": "var(--color-focus)",
+    "--color-success-text": "var(--color-pine-700)",
+    "--color-warning-text": "var(--color-warning-700)",
+    "--color-neutral-text": "var(--color-base-700)",
+    "--color-energetic-text": "var(--color-citron-700)",
+    "--color-error-text": "var(--color-error-700)",
+    "--color-inverse": "var(--color-base-100)",
+    "--color-disabled": "var(--color-base-400)",
+    "--color-border": "var(--color-base-300)",
+    "--color-border-weak": "var(--color-base-300)",
+    "--color-border-medium": "var(--color-base-400)",
+    "--color-border-strong": "var(--color-base-500)",
+    "--color-control-border": "var(--color-base-500)",
+    "--color-segment-thumb": "var(--color-surface-raised)",
+    "--color-segment-thumb-text": "var(--color-headline)",
+    "--color-segment-thumb-border": "var(--color-control-border)",
+    "--color-focus": "var(--color-brand-600)",
+    "--color-focus-weak": "var(--color-brand-700)",
+    "--color-focus-medium": "var(--color-brand-800)",
+    "--color-focus-strong": "var(--color-brand-900)",
+    "--color-focus-ring": "var(--color-focus)",
+    "--color-focus-ring-offset": "var(--color-card)",
+    "--color-focus-ring-muted": "var(--color-base-500)",
+    "--color-focus-ring-danger": "var(--color-error)",
+    "--color-primary": "var(--color-brand-600)",
+    "--color-primary-weak": "var(--color-brand-700)",
+    "--color-primary-medium": "var(--color-brand-800)",
+    "--color-primary-strong": "var(--color-brand-900)",
+    "--color-secondary": "var(--color-base-600)",
+    "--color-secondary-weak": "var(--color-base-700)",
+    "--color-secondary-medium": "var(--color-base-800)",
+    "--color-secondary-strong": "var(--color-base-900)",
+    "--color-success": "var(--color-pine-600)",
+    "--color-success-weak": "var(--color-pine-700)",
+    "--color-success-medium": "var(--color-pine-800)",
+    "--color-success-strong": "var(--color-pine-900)",
+    "--color-success-subtle": "var(--color-pine-100)",
+    "--color-success-border": "var(--color-pine-200)",
+    "--color-warning": "var(--color-warning-600)",
+    "--color-warning-weak": "var(--color-warning-700)",
+    "--color-warning-medium": "var(--color-warning-800)",
+    "--color-warning-strong": "var(--color-warning-900)",
+    "--color-warning-subtle": "var(--color-warning-100)",
+    "--color-warning-border": "var(--color-warning-200)",
+    "--color-error": "var(--color-error-600)",
+    "--color-error-weak": "var(--color-error-700)",
+    "--color-error-medium": "var(--color-error-800)",
+    "--color-error-strong": "var(--color-error-900)",
+    "--color-error-subtle": "var(--color-error-100)",
+    "--color-error-border": "var(--color-error-200)",
+    "--color-energetic": "var(--color-citron-600)",
+    "--color-energetic-weak": "var(--color-citron-700)",
+    "--color-energetic-medium": "var(--color-citron-800)",
+    "--color-energetic-strong": "var(--color-citron-900)",
+    "--color-energetic-subtle": "var(--color-citron-100)",
+    "--color-energetic-border": "var(--color-citron-200)",
+    "--color-accent": "var(--color-accent-600)",
+    "--color-accent-hover": "var(--color-accent-700)",
+    "--color-accent-active": "var(--color-accent-800)",
+    "--color-accent-subtle": "var(--color-accent-100)",
+    "--color-accent-border": "var(--color-accent-200)",
+    "--color-accent-text": "var(--color-accent-700)",
+    "--zabi-on-accent": "#ffffff",
+    "--zabi-on-accent-dark": "var(--zabi-accent-950)",
+    "--color-on-accent": "var(--zabi-on-accent)",
+    "--color-neutral": "var(--color-base-550)",
+    "--color-neutral-weak": "var(--color-base-600)",
+    "--color-neutral-medium": "var(--color-base-700)",
+    "--color-neutral-strong": "var(--color-base-900)",
+    "--color-neutral-subtle": "var(--color-base-200)",
+    "--color-neutral-border": "var(--color-base-250)",
+    "--color-info": "var(--color-iris-600)",
+    "--color-info-weak": "var(--color-iris-700)",
+    "--color-info-medium": "var(--color-iris-800)",
+    "--color-info-strong": "var(--color-iris-900)",
+    "--color-info-active": "var(--color-iris-400)",
+    "--color-info-subtle": "var(--color-iris-100)",
+    "--color-info-border": "var(--color-iris-200)",
+    "--color-info-text": "var(--color-iris-700)",
+    "--color-action-primary": "var(--color-brand-600)",
+    "--color-action-primary-hover": "var(--color-brand-700)",
+    "--color-action-primary-active": "var(--color-brand-800)",
+    "--color-action-primary-subtle": "var(--color-brand-100)",
+    "--color-action-primary-subtle-hover": "var(--color-brand-200)",
+    "--color-action-primary-border": "var(--color-brand-200)",
+    "--color-action-primary-subtle-active": "color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200))",
+    "--zabi-on-brand": "#ffffff",
+    "--zabi-on-brand-dark": "var(--zabi-on-brand)",
+    "--color-on-brand": "var(--zabi-on-brand)",
+    "--color-action-primary-text": "var(--color-on-brand)",
+    "--color-action-secondary": "rgba(9, 9, 11, 0.1)",
+    "--color-action-secondary-hover": "rgba(9, 9, 11, 0.15)",
+    "--color-action-secondary-active": "rgba(9, 9, 11, 0.2)",
+    "--color-action-secondary-subtle": "var(--color-base-100)",
+    "--color-action-secondary-subtle-hover": "var(--color-base-200)",
+    "--color-action-secondary-text": "var(--color-headline)",
+    "--color-action-tonal": "var(--color-action-primary-subtle)",
+    "--color-action-tonal-hover": "var(--color-action-primary-subtle-hover)",
+    "--color-action-tonal-active": "color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200))",
+    "--color-action-tonal-text": "var(--color-brand-800)",
+    "--color-chip": "var(--color-base-200)",
+    "--color-chip-hover": "var(--color-base-300)",
+    "--color-chip-active": "var(--color-base-350)",
+    "--color-chip-text": "var(--color-headline)",
+    "--color-chip-selected": "var(--color-action-tonal)",
+    "--color-chip-selected-hover": "var(--color-action-tonal-hover)",
+    "--color-chip-selected-active": "var(--color-action-tonal-active)",
+    "--color-chip-selected-text": "var(--color-action-tonal-text)",
+    "--color-action-outline-border": "var(--color-input-border)",
+    "--color-action-outline-border-hover": "var(--color-input-border-hover)",
+    "--color-action-disabled": "var(--color-base-250)",
+    "--color-action-disabled-text": "var(--color-base-500)",
+    "--color-action-disabled-border": "var(--color-base-300)",
+    "--color-action-danger": "var(--color-error-600)",
+    "--color-action-danger-hover": "var(--color-error-700)",
+    "--color-action-danger-active": "var(--color-error-800)",
+    "--color-action-danger-subtle": "var(--color-error-100)",
+    "--color-action-danger-subtle-hover": "var(--color-error-200)",
+    "--color-action-danger-subtle-active": "color-mix(in srgb, var(--color-error-300) 50%, var(--color-error-200))",
+    "--color-action-danger-text": "var(--color-error-50)",
+    "--material-alpha-thin": "58%",
+    "--material-alpha-regular": "84%",
+    "--material-alpha-thick": "88%",
+    "--color-material-thin": "color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-thin), transparent)",
+    "--color-material-regular": "color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-regular), transparent)",
+    "--color-material-thick": "color-mix(in srgb, var(--color-surface-overlay) var(--material-alpha-thick), transparent)",
+    "--material-backdrop-brightness": "1",
+    "--color-material-highlight": "color-mix(in srgb, var(--zabi-base-50) 60%, transparent)",
+    "--color-material-rim": "color-mix(in srgb, var(--zabi-base-900) 9%, transparent)",
+    "--color-canvas-wash-brand": "color-mix(in srgb, var(--color-brand-300) var(--gradient-canvas-strength), transparent)",
+    "--color-canvas-wash-accent": "color-mix(in srgb, var(--color-accent-300) var(--gradient-canvas-strength), transparent)",
+    "--gradient-control-top-strength": "0%",
+    "--gradient-control-bottom-strength": "14%",
+    "--gradient-control-accent-top-strength": "var(--gradient-control-top-strength)",
+    "--gradient-control-accent-bottom-strength": "var(--gradient-control-bottom-strength)",
+    "--color-control-gradient-start": "color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-top-strength), transparent)",
+    "--color-control-gradient-end": "color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-bottom-strength), transparent)",
+    "--color-control-gradient-accent-start": "color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-accent-top-strength), transparent)",
+    "--color-control-gradient-accent-end": "color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-accent-bottom-strength), transparent)",
+    "--color-tooltip-bg": "var(--color-base-800)",
+    "--color-tooltip-fg": "var(--color-base-50)"
+  },
+  "darkOnly": {
+    "--color-brand-50": "var(--zabi-brand-950)",
+    "--color-brand-100": "var(--zabi-brand-900)",
+    "--color-brand-200": "var(--zabi-brand-800)",
+    "--color-brand-300": "var(--zabi-brand-700)",
+    "--color-brand-400": "var(--zabi-brand-600)",
+    "--color-brand-500": "var(--zabi-brand-500)",
+    "--color-brand-600": "var(--zabi-brand-400)",
+    "--color-brand-700": "var(--zabi-brand-300)",
+    "--color-brand-800": "var(--zabi-brand-200)",
+    "--color-brand-900": "var(--zabi-brand-100)",
+    "--color-brand-950": "var(--zabi-brand-50)",
+    "--color-citron-50": "var(--zabi-citron-950)",
+    "--color-citron-100": "var(--zabi-citron-900)",
+    "--color-citron-200": "var(--zabi-citron-800)",
+    "--color-citron-300": "var(--zabi-citron-700)",
+    "--color-citron-400": "var(--zabi-citron-600)",
+    "--color-citron-500": "var(--zabi-citron-500)",
+    "--color-citron-600": "var(--zabi-citron-400)",
+    "--color-citron-700": "var(--zabi-citron-300)",
+    "--color-citron-800": "var(--zabi-citron-200)",
+    "--color-citron-900": "var(--zabi-citron-100)",
+    "--color-citron-950": "var(--zabi-citron-50)",
+    "--color-accent-50": "var(--zabi-accent-950)",
+    "--color-accent-100": "var(--zabi-accent-900)",
+    "--color-accent-200": "var(--zabi-accent-800)",
+    "--color-accent-300": "var(--zabi-accent-700)",
+    "--color-accent-400": "var(--zabi-accent-600)",
+    "--color-accent-500": "var(--zabi-accent-500)",
+    "--color-accent-600": "var(--zabi-accent-400)",
+    "--color-accent-700": "var(--zabi-accent-300)",
+    "--color-accent-800": "var(--zabi-accent-200)",
+    "--color-accent-900": "var(--zabi-accent-100)",
+    "--color-accent-950": "var(--zabi-accent-50)",
+    "--color-pine-50": "var(--zabi-pine-950)",
+    "--color-pine-100": "var(--zabi-pine-900)",
+    "--color-pine-200": "var(--zabi-pine-800)",
+    "--color-pine-300": "var(--zabi-pine-700)",
+    "--color-pine-400": "var(--zabi-pine-600)",
+    "--color-pine-500": "var(--zabi-pine-500)",
+    "--color-pine-600": "var(--zabi-pine-400)",
+    "--color-pine-700": "var(--zabi-pine-300)",
+    "--color-pine-800": "var(--zabi-pine-200)",
+    "--color-pine-900": "var(--zabi-pine-100)",
+    "--color-pine-950": "var(--zabi-pine-50)",
+    "--color-iris-50": "var(--zabi-iris-950)",
+    "--color-iris-100": "var(--zabi-iris-900)",
+    "--color-iris-200": "var(--zabi-iris-800)",
+    "--color-iris-300": "var(--zabi-iris-700)",
+    "--color-iris-400": "var(--zabi-iris-600)",
+    "--color-iris-500": "var(--zabi-iris-500)",
+    "--color-iris-600": "var(--zabi-iris-400)",
+    "--color-iris-700": "var(--zabi-iris-300)",
+    "--color-iris-800": "var(--zabi-iris-200)",
+    "--color-iris-900": "var(--zabi-iris-100)",
+    "--color-iris-950": "var(--zabi-iris-50)",
+    "--color-warning-50": "var(--zabi-warning-950)",
+    "--color-warning-100": "var(--zabi-warning-900)",
+    "--color-warning-200": "var(--zabi-warning-800)",
+    "--color-warning-300": "var(--zabi-warning-700)",
+    "--color-warning-400": "var(--zabi-warning-600)",
+    "--color-warning-500": "var(--zabi-warning-500)",
+    "--color-warning-600": "var(--zabi-warning-400)",
+    "--color-warning-700": "var(--zabi-warning-300)",
+    "--color-warning-800": "var(--zabi-warning-200)",
+    "--color-warning-900": "var(--zabi-warning-100)",
+    "--color-warning-950": "var(--zabi-warning-50)",
+    "--color-error-50": "var(--zabi-error-950)",
+    "--color-error-100": "var(--zabi-error-900)",
+    "--color-error-200": "var(--zabi-error-800)",
+    "--color-error-300": "var(--zabi-error-700)",
+    "--color-error-400": "var(--zabi-error-600)",
+    "--color-error-500": "var(--zabi-error-500)",
+    "--color-error-600": "var(--zabi-error-400)",
+    "--color-error-700": "var(--zabi-error-300)",
+    "--color-error-800": "var(--zabi-error-200)",
+    "--color-error-900": "var(--zabi-error-100)",
+    "--color-error-950": "var(--zabi-error-50)",
+    "--color-base-50": "var(--zabi-base-950)",
+    "--color-base-75": "var(--zabi-base-925)",
+    "--color-base-100": "var(--zabi-base-900)",
+    "--color-base-150": "var(--zabi-base-850)",
+    "--color-base-200": "var(--zabi-base-800)",
+    "--color-base-250": "var(--zabi-base-750)",
+    "--color-base-300": "var(--zabi-base-700)",
+    "--color-base-350": "var(--zabi-base-650)",
+    "--color-base-400": "var(--zabi-base-600)",
+    "--color-base-450": "var(--zabi-base-550)",
+    "--color-base-500": "var(--zabi-base-500)",
+    "--color-base-550": "var(--zabi-base-450)",
+    "--color-base-600": "var(--zabi-base-400)",
+    "--color-base-650": "var(--zabi-base-350)",
+    "--color-base-700": "var(--zabi-base-300)",
+    "--color-base-750": "var(--zabi-base-250)",
+    "--color-base-800": "var(--zabi-base-200)",
+    "--color-base-850": "var(--zabi-base-150)",
+    "--color-base-900": "var(--zabi-base-100)",
+    "--color-base-925": "var(--zabi-base-75)",
+    "--color-base-950": "var(--zabi-base-50)",
+    "--color-surface-base": "var(--zabi-base-900)",
+    "--color-surface-raised": "var(--zabi-base-850)",
+    "--color-surface-elevated": "var(--zabi-base-800)",
+    "--color-surface-overlay": "var(--zabi-base-800)",
+    "--color-surface-overlay-hover": "var(--zabi-base-750)",
+    "--color-surface-inset": "var(--zabi-base-900)",
+    "--color-surface-chrome": "var(--color-surface-base)",
+    "--color-bar": "var(--color-surface-chrome)",
+    "--color-bar-border": "color-mix(in srgb, var(--color-headline) 10%, transparent)",
+    "--color-bar-brand": "var(--color-action-primary)",
+    "--color-tabbar-active": "var(--color-nav-menu-active)",
+    "--color-neutral-subtle": "var(--color-base-300)",
+    "--color-neutral-border": "var(--color-base-200)",
+    "--color-border-overlay": "var(--color-base-450)",
+    "--color-background": "var(--color-surface-base)",
+    "--color-background-tertiary": "var(--color-base-100)",
+    "--color-page": "var(--color-surface-base)",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-hover": "var(--color-surface-elevated)",
+    "--color-card-active": "var(--color-surface-overlay-hover)",
+    "--color-card-elevated": "var(--color-surface-elevated)",
+    "--color-card-tint": "color-mix(in srgb, var(--zabi-brand-500) 8%, var(--color-surface-raised))",
+    "--color-card-flat": "color-mix(in srgb, var(--zabi-base-50) 7%, transparent)",
+    "--color-card-flat-hover": "color-mix(in srgb, var(--zabi-base-50) 11%, transparent)",
+    "--color-card-flat-active": "color-mix(in srgb, var(--zabi-base-50) 15%, transparent)",
+    "--color-surface-1": "var(--color-surface-raised)",
+    "--color-surface-2": "var(--color-surface-elevated)",
+    "--color-surface-3": "var(--color-surface-overlay)",
+    "--color-surface-4": "var(--color-surface-overlay-hover)",
+    "--color-description": "var(--color-base-700)",
+    "--color-caption": "var(--color-base-650)",
+    "--color-surface-hover": "rgba(250, 250, 250, 0.08)",
+    "--color-surface-active": "rgba(250, 250, 250, 0.14)",
+    "--color-overlay": "rgba(0, 0, 0, 0.7)",
+    "--color-input": "color-mix(in srgb, var(--zabi-base-50) 7%, transparent)",
+    "--color-input-solid": "var(--color-surface-inset)",
+    "--color-input-solid-hover": "var(--color-base-200)",
+    "--color-input-solid-focus": "var(--color-base-150)",
+    "--color-input-solid-active": "color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset))",
+    "--color-progress-fill": "var(--color-action-primary)",
+    "--color-progress-track": "var(--color-base-75)",
+    "--color-progress-track-border": "var(--color-input-border)",
+    "--color-input-border": "var(--color-base-500)",
+    "--color-input-border-hover": "var(--color-input-border)",
+    "--color-border": "var(--color-base-250)",
+    "--color-border-weak": "var(--color-base-250)",
+    "--color-toggle-track": "var(--color-base-300)",
+    "--color-toggle-track-hover": "var(--color-base-350)",
+    "--color-toggle-track-active": "var(--color-base-400)",
+    "--color-toggle-track-border": "var(--color-input-border)",
+    "--color-toggle-knob": "var(--color-base-700)",
+    "--color-toggle-knob-checked": "var(--color-action-primary-text)",
+    "--color-input-hover": "color-mix(in srgb, var(--zabi-base-50) 10%, transparent)",
+    "--color-input-active": "color-mix(in srgb, var(--zabi-base-50) 15%, transparent)",
+    "--color-input-focus": "color-mix(in srgb, var(--zabi-base-50) 7%, transparent)",
+    "--color-input-disabled": "var(--color-base-75)",
+    "--color-input-placeholder": "color-mix(in srgb, var(--zabi-base-350) 40%, var(--zabi-base-400))",
+    "--color-control-border": "var(--color-base-600)",
+    "--color-segment-thumb": "var(--color-base-400)",
+    "--color-segment-thumb-text": "var(--color-headline)",
+    "--color-segment-thumb-border": "var(--color-control-border)",
+    "--color-focus": "var(--color-brand-600)",
+    "--color-focus-weak": "var(--color-brand-700)",
+    "--color-focus-medium": "var(--color-brand-800)",
+    "--color-focus-strong": "var(--color-brand-900)",
+    "--color-focus-ring-muted": "var(--color-base-600)",
+    "--color-success-subtle": "color-mix(in srgb, var(--zabi-pine-500) 16%, var(--color-surface-raised))",
+    "--color-success-border": "color-mix(in srgb, var(--zabi-pine-500) 36%, var(--color-surface-raised))",
+    "--color-warning-subtle": "color-mix(in srgb, var(--zabi-warning-500) 16%, var(--color-surface-raised))",
+    "--color-warning-border": "color-mix(in srgb, var(--zabi-warning-500) 36%, var(--color-surface-raised))",
+    "--color-error-subtle": "color-mix(in srgb, var(--zabi-error-500) 16%, var(--color-surface-raised))",
+    "--color-error-border": "color-mix(in srgb, var(--zabi-error-500) 36%, var(--color-surface-raised))",
+    "--color-energetic-subtle": "color-mix(in srgb, var(--zabi-citron-500) 16%, var(--color-surface-raised))",
+    "--color-energetic-border": "color-mix(in srgb, var(--zabi-citron-500) 36%, var(--color-surface-raised))",
+    "--color-accent-subtle": "color-mix(in srgb, var(--zabi-accent-500) 16%, var(--color-surface-raised))",
+    "--color-accent-border": "color-mix(in srgb, var(--zabi-accent-500) 36%, var(--color-surface-raised))",
+    "--color-on-accent": "var(--zabi-on-accent-dark)",
+    "--color-info-subtle": "color-mix(in srgb, var(--zabi-iris-500) 16%, var(--color-surface-raised))",
+    "--color-info-border": "color-mix(in srgb, var(--zabi-iris-500) 36%, var(--color-surface-raised))",
+    "--color-neutral": "var(--color-base-600)",
+    "--color-action-primary": "var(--zabi-brand-600)",
+    "--color-action-primary-hover": "var(--zabi-brand-700)",
+    "--color-action-primary-active": "var(--zabi-brand-800)",
+    "--color-on-brand": "var(--zabi-on-brand-dark)",
+    "--color-action-primary-text": "var(--color-on-brand)",
+    "--color-action-primary-subtle": "var(--color-brand-100)",
+    "--color-action-primary-subtle-hover": "var(--color-brand-200)",
+    "--color-action-primary-border": "var(--color-brand-200)",
+    "--color-action-primary-subtle-active": "color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200))",
+    "--color-action-secondary": "rgba(250, 250, 250, 0.09)",
+    "--color-action-secondary-hover": "rgba(250, 250, 250, 0.15)",
+    "--color-action-secondary-active": "rgba(250, 250, 250, 0.21)",
+    "--color-action-tonal": "var(--color-action-primary-subtle)",
+    "--color-action-tonal-hover": "var(--color-action-primary-subtle-hover)",
+    "--color-action-tonal-active": "color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200))",
+    "--color-action-tonal-text": "var(--color-brand-800)",
+    "--color-chip": "var(--zabi-base-750)",
+    "--color-chip-hover": "var(--zabi-base-700)",
+    "--color-chip-active": "var(--zabi-base-650)",
+    "--color-chip-text": "var(--color-headline)",
+    "--color-chip-selected": "var(--color-action-tonal)",
+    "--color-chip-selected-hover": "var(--color-action-tonal-hover)",
+    "--color-chip-selected-active": "var(--color-action-tonal-active)",
+    "--color-chip-selected-text": "var(--color-action-tonal-text)",
+    "--color-action-outline-border": "var(--color-input-border)",
+    "--color-action-outline-border-hover": "var(--color-input-border-hover)",
+    "--color-action-disabled": "var(--color-base-200)",
+    "--color-action-disabled-border": "var(--color-base-250)",
+    "--color-action-danger": "var(--zabi-error-600)",
+    "--color-action-danger-hover": "var(--zabi-error-700)",
+    "--color-action-danger-active": "var(--zabi-error-800)",
+    "--color-action-danger-subtle": "var(--color-error-subtle)",
+    "--color-action-danger-subtle-hover": "color-mix(in srgb, var(--zabi-error-500) 20%, var(--color-surface-raised))",
+    "--color-action-danger-subtle-active": "color-mix(in srgb, var(--zabi-error-500) 32%, var(--color-surface-raised))",
+    "--color-action-danger-text": "var(--zabi-error-50)",
+    "--material-backdrop-brightness": "0.6",
+    "--material-alpha-thin": "60%",
+    "--material-alpha-regular": "68%",
+    "--material-alpha-thick": "72%",
+    "--color-material-highlight": "color-mix(in srgb, var(--zabi-base-50) 14%, transparent)",
+    "--color-material-rim": "color-mix(in srgb, var(--zabi-base-50) 14%, transparent)",
+    "--gradient-control-top-strength": "0%",
+    "--gradient-control-bottom-strength": "14%",
+    "--gradient-control-accent-top-strength": "22%",
+    "--gradient-control-accent-bottom-strength": "6%"
+  },
+  "pairs": [
+    {
+      "name": "badge solid · success",
+      "bg": "--color-success",
+      "fg": "--color-card",
+      "min": 4.5
+    },
+    {
+      "name": "badge subtle · success",
+      "bg": "--color-success-subtle",
+      "fg": "--color-success-text",
+      "min": 4.5
+    },
+    {
+      "name": "alert body · success",
+      "bg": "--color-success-subtle",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "message text · success",
+      "bg": "--color-surface-base",
+      "fg": "--color-success-text",
+      "min": 4.5
+    },
+    {
+      "name": "badge solid · warning",
+      "bg": "--color-warning",
+      "fg": "--color-card",
+      "min": 4.5
+    },
+    {
+      "name": "badge subtle · warning",
+      "bg": "--color-warning-subtle",
+      "fg": "--color-warning-text",
+      "min": 4.5
+    },
+    {
+      "name": "alert body · warning",
+      "bg": "--color-warning-subtle",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "message text · warning",
+      "bg": "--color-surface-base",
+      "fg": "--color-warning-text",
+      "min": 4.5
+    },
+    {
+      "name": "badge solid · error",
+      "bg": "--color-error",
+      "fg": "--color-card",
+      "min": 4.5
+    },
+    {
+      "name": "badge subtle · error",
+      "bg": "--color-error-subtle",
+      "fg": "--color-error-text",
+      "min": 4.5
+    },
+    {
+      "name": "alert body · error",
+      "bg": "--color-error-subtle",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "message text · error",
+      "bg": "--color-surface-base",
+      "fg": "--color-error-text",
+      "min": 4.5
+    },
+    {
+      "name": "badge solid · info",
+      "bg": "--color-info",
+      "fg": "--color-card",
+      "min": 4.5
+    },
+    {
+      "name": "badge subtle · info",
+      "bg": "--color-info-subtle",
+      "fg": "--color-info-text",
+      "min": 4.5
+    },
+    {
+      "name": "alert body · info",
+      "bg": "--color-info-subtle",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "message text · info",
+      "bg": "--color-surface-base",
+      "fg": "--color-info-text",
+      "min": 4.5
+    },
+    {
+      "name": "badge solid · energetic",
+      "bg": "--color-energetic",
+      "fg": "--color-card",
+      "min": 4.5
+    },
+    {
+      "name": "badge subtle · energetic",
+      "bg": "--color-energetic-subtle",
+      "fg": "--color-energetic-text",
+      "min": 4.5
+    },
+    {
+      "name": "alert body · energetic",
+      "bg": "--color-energetic-subtle",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "message text · energetic",
+      "bg": "--color-surface-base",
+      "fg": "--color-energetic-text",
+      "min": 4.5
+    },
+    {
+      "name": "badge solid · neutral",
+      "bg": "--color-neutral",
+      "fg": "--color-card",
+      "min": 4.5
+    },
+    {
+      "name": "badge subtle · neutral",
+      "bg": "--color-neutral-subtle",
+      "fg": "--color-neutral-text",
+      "min": 4.5
+    },
+    {
+      "name": "alert body · neutral",
+      "bg": "--color-neutral-subtle",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "message text · neutral",
+      "bg": "--color-surface-base",
+      "fg": "--color-neutral-text",
+      "min": 4.5
+    },
+    {
+      "name": "badge subtle · brand",
+      "bg": "--color-action-primary-subtle",
+      "fg": "--color-link",
+      "min": 4.5
+    },
+    {
+      "name": "badge solid · brand",
+      "bg": "--color-action-primary",
+      "fg": "--color-action-primary-text",
+      "min": 4.5
+    },
+    {
+      "name": "accent fill",
+      "bg": "--color-accent",
+      "fg": "--color-on-accent",
+      "min": 4.5
+    },
+    {
+      "name": "accent fill :hover",
+      "bg": "--color-accent-hover",
+      "fg": "--color-on-accent",
+      "min": 4.5
+    },
+    {
+      "name": "accent fill :active",
+      "bg": "--color-accent-active",
+      "fg": "--color-on-accent",
+      "min": 4.5
+    },
+    {
+      "name": "accent subtle",
+      "bg": "--color-accent-subtle",
+      "fg": "--color-accent-text",
+      "min": 4.5
+    },
+    {
+      "name": "accent subtle body",
+      "bg": "--color-accent-subtle",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "accent text on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-accent-text",
+      "min": 4.5
+    },
+    {
+      "name": "accent text on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-accent-text",
+      "min": 4.5
+    },
+    {
+      "name": "accent star outline on inset",
+      "bg": "--color-surface-inset",
+      "fg": "--color-accent-text",
+      "min": 3
+    },
+    {
+      "name": "focus ring or its offset gap on an accent button",
+      "bg": "--color-accent",
+      "fg": "--color-focus-ring-offset",
+      "orFg": "--color-focus-ring",
+      "min": 3
+    },
+    {
+      "name": "on-brand label on primary",
+      "bg": "--color-action-primary",
+      "fg": "--color-on-brand",
+      "min": 4.5
+    },
+    {
+      "name": "on-brand label on primary :hover",
+      "bg": "--color-action-primary-hover",
+      "fg": "--color-on-brand",
+      "min": 4.5
+    },
+    {
+      "name": "on-brand label on primary :active",
+      "bg": "--color-action-primary-active",
+      "fg": "--color-on-brand",
+      "min": 4.5
+    },
+    {
+      "name": "button primary",
+      "bg": "--color-action-primary",
+      "fg": "--color-action-primary-text",
+      "min": 4.5
+    },
+    {
+      "name": "button primary :hover",
+      "bg": "--color-action-primary-hover",
+      "fg": "--color-action-primary-text",
+      "min": 4.5
+    },
+    {
+      "name": "button primary :active",
+      "bg": "--color-action-primary-active",
+      "fg": "--color-action-primary-text",
+      "min": 4.5
+    },
+    {
+      "name": "button danger",
+      "bg": "--color-action-danger",
+      "fg": "--color-action-danger-text",
+      "min": 4.5
+    },
+    {
+      "name": "button danger :hover",
+      "bg": "--color-action-danger-hover",
+      "fg": "--color-action-danger-text",
+      "min": 4.5
+    },
+    {
+      "name": "button danger :active",
+      "bg": "--color-action-danger-active",
+      "fg": "--color-action-danger-text",
+      "min": 4.5
+    },
+    {
+      "name": "body text on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "body text on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "description on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-description",
+      "min": 4.5
+    },
+    {
+      "name": "description on overlay",
+      "bg": "--color-surface-overlay",
+      "fg": "--color-description",
+      "min": 4.5
+    },
+    {
+      "name": "caption on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-caption",
+      "min": 4.5
+    },
+    {
+      "name": "label on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-label",
+      "min": 4.5
+    },
+    {
+      "name": "link on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-link",
+      "min": 4.5
+    },
+    {
+      "name": "link on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-link",
+      "min": 4.5
+    },
+    {
+      "name": "input value",
+      "bg": "--color-input",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "input value on a pressed field",
+      "bg": "--color-input-active",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "pressed field against the resting field",
+      "bg": "--color-input",
+      "fg": "--color-input-active",
+      "min": 1.25
+    },
+    {
+      "name": "held toggled-on fill against its resting fill",
+      "bg": "--color-action-primary-subtle",
+      "fg": "--color-action-primary-subtle-active",
+      "min": 1.25
+    },
+    {
+      "name": "icon on a held toggled-on fill",
+      "bg": "--color-action-primary-subtle-active",
+      "fg": "--color-link",
+      "min": 3
+    },
+    {
+      "name": "held toggled-on danger fill against its resting fill",
+      "bg": "--color-action-danger-subtle",
+      "fg": "--color-action-danger-subtle-active",
+      "min": 1.25
+    },
+    {
+      "name": "icon on a held toggled-on danger fill",
+      "bg": "--color-action-danger-subtle-active",
+      "fg": "--color-error",
+      "min": 3
+    },
+    {
+      "name": "label on a selected pill tab",
+      "bg": "--color-action-primary-subtle",
+      "fg": "--color-link",
+      "min": 4.5
+    },
+    {
+      "name": "label on a held selected pill tab",
+      "bg": "--color-action-primary-subtle-active",
+      "fg": "--color-link-hover",
+      "min": 4.5
+    },
+    {
+      "name": "input placeholder",
+      "bg": "--color-input",
+      "fg": "--color-input-placeholder",
+      "min": 4.5
+    },
+    {
+      "name": "input placeholder on a hovered field",
+      "bg": "--color-input-hover",
+      "fg": "--color-input-placeholder",
+      "min": 4.5
+    },
+    {
+      "name": "input placeholder on a focused field",
+      "bg": "--color-input-focus",
+      "fg": "--color-input-placeholder",
+      "min": 4.5
+    },
+    {
+      "name": "input placeholder on a pressed field",
+      "bg": "--color-input-active",
+      "fg": "--color-input-placeholder",
+      "min": 4.5
+    },
+    {
+      "name": "input value against its placeholder",
+      "bg": "--color-input-placeholder",
+      "fg": "--color-body",
+      "min": 1.75
+    },
+    {
+      "name": "tooltip",
+      "bg": "--color-tooltip-bg",
+      "fg": "--color-tooltip-fg",
+      "min": 4.5
+    },
+    {
+      "name": "disabled control",
+      "bg": "--color-action-disabled",
+      "fg": "--color-action-disabled-text",
+      "min": 3
+    },
+    {
+      "name": "focus ring on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-focus-ring",
+      "min": 3
+    },
+    {
+      "name": "focus ring on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-focus-ring",
+      "min": 3
+    },
+    {
+      "name": "nav focus ring on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-nav-menu-focus",
+      "min": 3
+    },
+    {
+      "name": "nav focus ring on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-nav-menu-focus",
+      "min": 3
+    },
+    {
+      "name": "focus offset gap on primary button",
+      "bg": "--color-action-primary",
+      "fg": "--color-focus-ring-offset",
+      "min": 3
+    },
+    {
+      "name": "focus ring against its offset gap",
+      "bg": "--color-focus-ring-offset",
+      "fg": "--color-focus-ring",
+      "min": 3
+    },
+    {
+      "name": "primary fill against the page",
+      "bg": "--color-surface-base",
+      "fg": "--color-action-primary",
+      "min": 3
+    },
+    {
+      "name": "primary fill against a card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-action-primary",
+      "min": 3
+    },
+    {
+      "name": "danger fill against the page",
+      "bg": "--color-surface-base",
+      "fg": "--color-action-danger",
+      "min": 3
+    },
+    {
+      "name": "danger fill against a card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-action-danger",
+      "min": 3
+    },
+    {
+      "name": "focus ring on inset",
+      "bg": "--color-surface-inset",
+      "fg": "--color-focus-ring",
+      "min": 3
+    },
+    {
+      "name": "focus ring on elevated",
+      "bg": "--color-surface-elevated",
+      "fg": "--color-focus-ring",
+      "min": 3
+    },
+    {
+      "name": "focus ring on overlay",
+      "bg": "--color-surface-overlay",
+      "fg": "--color-focus-ring",
+      "min": 3
+    },
+    {
+      "name": "nav focus ring on inset",
+      "bg": "--color-surface-inset",
+      "fg": "--color-nav-menu-focus",
+      "min": 3
+    },
+    {
+      "name": "nav focus ring on elevated",
+      "bg": "--color-surface-elevated",
+      "fg": "--color-nav-menu-focus",
+      "min": 3
+    },
+    {
+      "name": "nav focus ring on overlay",
+      "bg": "--color-surface-overlay",
+      "fg": "--color-nav-menu-focus",
+      "min": 3
+    },
+    {
+      "name": "danger focus ring on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-focus-ring-danger",
+      "min": 3
+    },
+    {
+      "name": "danger focus ring on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-focus-ring-danger",
+      "min": 3
+    },
+    {
+      "name": "danger focus ring on inset",
+      "bg": "--color-surface-inset",
+      "fg": "--color-focus-ring-danger",
+      "min": 3
+    },
+    {
+      "name": "danger focus ring on elevated",
+      "bg": "--color-surface-elevated",
+      "fg": "--color-focus-ring-danger",
+      "min": 3
+    },
+    {
+      "name": "danger focus ring on overlay",
+      "bg": "--color-surface-overlay",
+      "fg": "--color-focus-ring-danger",
+      "min": 3
+    },
+    {
+      "name": "muted focus ring on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-focus-ring-muted",
+      "min": 3
+    },
+    {
+      "name": "muted focus ring on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-focus-ring-muted",
+      "min": 3
+    },
+    {
+      "name": "muted focus ring on inset",
+      "bg": "--color-surface-inset",
+      "fg": "--color-focus-ring-muted",
+      "min": 3
+    },
+    {
+      "name": "muted focus ring on elevated",
+      "bg": "--color-surface-elevated",
+      "fg": "--color-focus-ring-muted",
+      "min": 3
+    },
+    {
+      "name": "muted focus ring on overlay",
+      "bg": "--color-surface-overlay",
+      "fg": "--color-focus-ring-muted",
+      "min": 3
+    },
+    {
+      "name": "control boundary on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-control-border",
+      "min": 3
+    },
+    {
+      "name": "control boundary on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-control-border",
+      "min": 3
+    },
+    {
+      "name": "control boundary on inset",
+      "bg": "--color-surface-inset",
+      "fg": "--color-control-border",
+      "min": 3
+    },
+    {
+      "name": "control boundary on elevated",
+      "bg": "--color-surface-elevated",
+      "fg": "--color-control-border",
+      "min": 3
+    },
+    {
+      "name": "control boundary on overlay",
+      "bg": "--color-surface-overlay",
+      "fg": "--color-control-border",
+      "min": 3
+    },
+    {
+      "name": "field edge on the field fill",
+      "bg": "--color-input",
+      "fg": "--color-input-border",
+      "min": 3
+    },
+    {
+      "name": "field edge on page",
+      "bg": "--color-background",
+      "fg": "--color-input-border",
+      "min": 3
+    },
+    {
+      "name": "field edge on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-input-border",
+      "min": 3
+    },
+    {
+      "name": "field edge on elevated",
+      "bg": "--color-surface-elevated",
+      "fg": "--color-input-border",
+      "min": 3
+    },
+    {
+      "name": "field edge on overlay",
+      "bg": "--color-surface-overlay",
+      "fg": "--color-input-border",
+      "min": 3
+    },
+    {
+      "name": "segment thumb edge on the track over the page",
+      "bg": "--color-action-secondary",
+      "fg": "--color-segment-thumb-border",
+      "min": 3,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "segment thumb edge on the track over a card",
+      "bg": "--color-action-secondary",
+      "fg": "--color-segment-thumb-border",
+      "min": 3,
+      "behind": "--color-surface-raised"
+    },
+    {
+      "name": "segment thumb text on the thumb",
+      "bg": "--color-segment-thumb",
+      "fg": "--color-segment-thumb-text",
+      "min": 4.5
+    },
+    {
+      "name": "tonal label",
+      "bg": "--color-action-tonal",
+      "fg": "--color-action-tonal-text",
+      "min": 4.5
+    },
+    {
+      "name": "tonal label :hover",
+      "bg": "--color-action-tonal-hover",
+      "fg": "--color-action-tonal-text",
+      "min": 4.5
+    },
+    {
+      "name": "tonal label :active",
+      "bg": "--color-action-tonal-active",
+      "fg": "--color-action-tonal-text",
+      "min": 4.5
+    },
+    {
+      "name": "held tonal fill against its resting fill",
+      "bg": "--color-action-tonal",
+      "fg": "--color-action-tonal-active",
+      "min": 1.25
+    },
+    {
+      "name": "outline button edge on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-action-outline-border",
+      "min": 3
+    },
+    {
+      "name": "outline button edge on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-action-outline-border",
+      "min": 3
+    },
+    {
+      "name": "outline button edge :hover on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-action-outline-border-hover",
+      "min": 3
+    },
+    {
+      "name": "outline button edge :hover on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-action-outline-border-hover",
+      "min": 3
+    },
+    {
+      "name": "toggle track edge on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-toggle-track-border",
+      "min": 3
+    },
+    {
+      "name": "toggle track edge on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-toggle-track-border",
+      "min": 3
+    },
+    {
+      "name": "toggle knob on the off track",
+      "bg": "--color-toggle-track",
+      "fg": "--color-toggle-knob",
+      "min": 3
+    },
+    {
+      "name": "toggle knob on the off track :hover",
+      "bg": "--color-toggle-track-hover",
+      "fg": "--color-toggle-knob",
+      "min": 3
+    },
+    {
+      "name": "toggle knob on the off track :active",
+      "bg": "--color-toggle-track-active",
+      "fg": "--color-toggle-knob",
+      "min": 3
+    },
+    {
+      "name": "toggle knob on the on track",
+      "bg": "--color-action-primary",
+      "fg": "--color-toggle-knob-checked",
+      "min": 3
+    },
+    {
+      "name": "toggle knob on the on track :hover",
+      "bg": "--color-action-primary-hover",
+      "fg": "--color-toggle-knob-checked",
+      "min": 3
+    },
+    {
+      "name": "toggle knob on the on track :active",
+      "bg": "--color-action-primary-active",
+      "fg": "--color-toggle-knob-checked",
+      "min": 3
+    },
+    {
+      "name": "progress fill on track",
+      "bg": "--color-progress-track",
+      "fg": "--color-progress-fill",
+      "min": 3
+    },
+    {
+      "name": "chip fill against the page",
+      "bg": "--color-surface-base",
+      "fg": "--color-chip",
+      "min": 1.2
+    },
+    {
+      "name": "chip fill against a card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-chip",
+      "min": 1.2
+    },
+    {
+      "name": "chip label",
+      "bg": "--color-chip",
+      "fg": "--color-chip-text",
+      "min": 4.5
+    },
+    {
+      "name": "chip label :hover",
+      "bg": "--color-chip-hover",
+      "fg": "--color-chip-text",
+      "min": 4.5
+    },
+    {
+      "name": "chip label :active",
+      "bg": "--color-chip-active",
+      "fg": "--color-chip-text",
+      "min": 4.5
+    },
+    {
+      "name": "selected chip label",
+      "bg": "--color-chip-selected",
+      "fg": "--color-chip-selected-text",
+      "min": 4.5
+    },
+    {
+      "name": "selected chip label :hover",
+      "bg": "--color-chip-selected-hover",
+      "fg": "--color-chip-selected-text",
+      "min": 4.5
+    },
+    {
+      "name": "selected chip label :active",
+      "bg": "--color-chip-selected-active",
+      "fg": "--color-chip-selected-text",
+      "min": 4.5
+    },
+    {
+      "name": "progress track edge on page",
+      "bg": "--color-surface-base",
+      "fg": "--color-progress-track-border",
+      "min": 3
+    },
+    {
+      "name": "progress track edge on card",
+      "bg": "--color-surface-raised",
+      "fg": "--color-progress-track-border",
+      "min": 3
+    },
+    {
+      "name": "active tab label on the tab pill",
+      "bg": "--color-tabbar-active",
+      "fg": "--color-nav-menu-item-active",
+      "min": 4.5
+    },
+    {
+      "name": "on-brand text on an on-brand bar",
+      "bg": "--color-bar-brand",
+      "fg": "--color-on-brand",
+      "min": 4.5
+    },
+    {
+      "name": "headline on a bar at rest",
+      "bg": "--color-bar",
+      "fg": "--color-headline",
+      "min": 4.5
+    },
+    {
+      "name": "tint card · headline",
+      "bg": "--color-card-tint",
+      "fg": "--color-headline",
+      "min": 4.5
+    },
+    {
+      "name": "tint card · body",
+      "bg": "--color-card-tint",
+      "fg": "--color-body",
+      "min": 4.5
+    },
+    {
+      "name": "tint card · label",
+      "bg": "--color-card-tint",
+      "fg": "--color-label",
+      "min": 4.5
+    },
+    {
+      "name": "tint card · description",
+      "bg": "--color-card-tint",
+      "fg": "--color-description",
+      "min": 4.5
+    },
+    {
+      "name": "tint card · caption",
+      "bg": "--color-card-tint",
+      "fg": "--color-caption",
+      "min": 4.5
+    },
+    {
+      "name": "tint card · link",
+      "bg": "--color-card-tint",
+      "fg": "--color-link",
+      "min": 4.5
+    },
+    {
+      "name": "tint card · focus ring",
+      "bg": "--color-card-tint",
+      "fg": "--color-focus-ring",
+      "min": 3
+    },
+    {
+      "name": "tint card · field edge",
+      "bg": "--color-card-tint",
+      "fg": "--color-input-border",
+      "min": 3
+    },
+    {
+      "name": "tint card · outline button edge",
+      "bg": "--color-card-tint",
+      "fg": "--color-action-outline-border",
+      "min": 3
+    },
+    {
+      "name": "flat card · headline (three layers over the card)",
+      "bg": "--color-card-flat",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "layers": 3
+    },
+    {
+      "name": "flat card · body (three layers over the card)",
+      "bg": "--color-card-flat",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "layers": 3
+    },
+    {
+      "name": "flat card · label (three layers over the card)",
+      "bg": "--color-card-flat",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "layers": 3
+    },
+    {
+      "name": "flat card · description (three layers over the card)",
+      "bg": "--color-card-flat",
+      "fg": "--color-description",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "layers": 3
+    },
+    {
+      "name": "flat card · caption (three layers over the card)",
+      "bg": "--color-card-flat",
+      "fg": "--color-caption",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "layers": 3
+    },
+    {
+      "name": "flat card · link (three layers over the card)",
+      "bg": "--color-card-flat",
+      "fg": "--color-link",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "layers": 3
+    },
+    {
+      "name": "flat card · focus ring (three layers over the card)",
+      "bg": "--color-card-flat",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": "--color-surface-raised",
+      "layers": 3
+    },
+    {
+      "name": "flat card · headline (two layers over the overlay)",
+      "bg": "--color-card-flat",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "layers": 2
+    },
+    {
+      "name": "flat card · body (two layers over the overlay)",
+      "bg": "--color-card-flat",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "layers": 2
+    },
+    {
+      "name": "flat card · label (two layers over the overlay)",
+      "bg": "--color-card-flat",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "layers": 2
+    },
+    {
+      "name": "flat card · description (two layers over the overlay)",
+      "bg": "--color-card-flat",
+      "fg": "--color-description",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "layers": 2
+    },
+    {
+      "name": "flat card · caption (two layers over the overlay)",
+      "bg": "--color-card-flat",
+      "fg": "--color-caption",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "layers": 2
+    },
+    {
+      "name": "flat card · link (two layers over the overlay)",
+      "bg": "--color-card-flat",
+      "fg": "--color-link",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "layers": 2
+    },
+    {
+      "name": "flat card · focus ring (two layers over the overlay)",
+      "bg": "--color-card-flat",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": "--color-surface-overlay",
+      "layers": 2
+    },
+    {
+      "name": "flat card · headline (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "flat card · body (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "flat card · label (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "flat card · description (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-description",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "flat card · caption (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-caption",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "flat card · link (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-link",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "flat card · focus ring (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "flat card · field edge (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-input-border",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "flat card · outline button edge (one layer over the page)",
+      "bg": "--color-card-flat",
+      "fg": "--color-action-outline-border",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "layers": 1
+    },
+    {
+      "name": "field well against its surface (over the page)",
+      "bg": "--color-input",
+      "fg": "--color-surface-base",
+      "min": 1.15,
+      "behind": "--color-surface-base",
+      "only": "dark"
+    },
+    {
+      "name": "input value (over the page)",
+      "bg": "--color-input",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "only": "dark"
+    },
+    {
+      "name": "input value on a pressed field (over the page)",
+      "bg": "--color-input-active",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder (over the page)",
+      "bg": "--color-input",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a hovered field (over the page)",
+      "bg": "--color-input-hover",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a focused field (over the page)",
+      "bg": "--color-input-focus",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a pressed field (over the page)",
+      "bg": "--color-input-active",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "only": "dark"
+    },
+    {
+      "name": "pressed field against the resting field (over the page)",
+      "bg": "--color-input",
+      "fg": "--color-input-active",
+      "min": 1.25,
+      "behind": "--color-surface-base",
+      "only": "dark",
+      "fgPaint": true
+    },
+    {
+      "name": "hovered field against the resting field (over the page)",
+      "bg": "--color-input",
+      "fg": "--color-input-hover",
+      "min": 1.08,
+      "behind": "--color-surface-base",
+      "only": "dark",
+      "fgPaint": true
+    },
+    {
+      "name": "field edge on the field fill (over the page)",
+      "bg": "--color-input",
+      "fg": "--color-input-border",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "only": "dark"
+    },
+    {
+      "name": "field well against its surface (over a card)",
+      "bg": "--color-input",
+      "fg": "--color-surface-raised",
+      "min": 1.15,
+      "behind": "--color-surface-raised",
+      "only": "dark"
+    },
+    {
+      "name": "input value (over a card)",
+      "bg": "--color-input",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "only": "dark"
+    },
+    {
+      "name": "input value on a pressed field (over a card)",
+      "bg": "--color-input-active",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder (over a card)",
+      "bg": "--color-input",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a hovered field (over a card)",
+      "bg": "--color-input-hover",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a focused field (over a card)",
+      "bg": "--color-input-focus",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a pressed field (over a card)",
+      "bg": "--color-input-active",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-raised",
+      "only": "dark"
+    },
+    {
+      "name": "pressed field against the resting field (over a card)",
+      "bg": "--color-input",
+      "fg": "--color-input-active",
+      "min": 1.25,
+      "behind": "--color-surface-raised",
+      "only": "dark",
+      "fgPaint": true
+    },
+    {
+      "name": "hovered field against the resting field (over a card)",
+      "bg": "--color-input",
+      "fg": "--color-input-hover",
+      "min": 1.08,
+      "behind": "--color-surface-raised",
+      "only": "dark",
+      "fgPaint": true
+    },
+    {
+      "name": "field edge on the field fill (over a card)",
+      "bg": "--color-input",
+      "fg": "--color-input-border",
+      "min": 2.7,
+      "behind": "--color-surface-raised",
+      "only": "dark"
+    },
+    {
+      "name": "field well against its surface (over the overlay)",
+      "bg": "--color-input",
+      "fg": "--color-surface-overlay",
+      "min": 1.15,
+      "behind": "--color-surface-overlay",
+      "only": "dark"
+    },
+    {
+      "name": "input value (over the overlay)",
+      "bg": "--color-input",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "only": "dark"
+    },
+    {
+      "name": "input value on a pressed field (over the overlay)",
+      "bg": "--color-input-active",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder (over the overlay)",
+      "bg": "--color-input",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a hovered field (over the overlay)",
+      "bg": "--color-input-hover",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a focused field (over the overlay)",
+      "bg": "--color-input-focus",
+      "fg": "--color-input-placeholder",
+      "min": 4.5,
+      "behind": "--color-surface-overlay",
+      "only": "dark"
+    },
+    {
+      "name": "input placeholder on a pressed field (over the overlay)",
+      "bg": "--color-input-active",
+      "fg": "--color-input-placeholder",
+      "min": 4,
+      "behind": "--color-surface-overlay",
+      "only": "dark"
+    },
+    {
+      "name": "pressed field against the resting field (over the overlay)",
+      "bg": "--color-input",
+      "fg": "--color-input-active",
+      "min": 1.25,
+      "behind": "--color-surface-overlay",
+      "only": "dark",
+      "fgPaint": true
+    },
+    {
+      "name": "hovered field against the resting field (over the overlay)",
+      "bg": "--color-input",
+      "fg": "--color-input-hover",
+      "min": 1.08,
+      "behind": "--color-surface-overlay",
+      "only": "dark",
+      "fgPaint": true
+    },
+    {
+      "name": "field edge on the field fill (over the overlay)",
+      "bg": "--color-input",
+      "fg": "--color-input-border",
+      "min": 2.4,
+      "behind": "--color-surface-overlay",
+      "only": "dark"
+    },
+    {
+      "name": "material thin · headline over the worst backdrop",
+      "bg": "--color-material-thin",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thin · headline over the page",
+      "bg": "--color-material-thin",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material regular · headline over the worst backdrop",
+      "bg": "--color-material-regular",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material regular · body over the worst backdrop",
+      "bg": "--color-material-regular",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material regular · label over the worst backdrop",
+      "bg": "--color-material-regular",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material regular · focus ring over the worst backdrop",
+      "bg": "--color-material-regular",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material regular · headline over the page",
+      "bg": "--color-material-regular",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material regular · body over the page",
+      "bg": "--color-material-regular",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material regular · label over the page",
+      "bg": "--color-material-regular",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material regular · focus ring over the page",
+      "bg": "--color-material-regular",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · headline over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · body over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · label over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · description over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-description",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · caption over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-caption",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · focus ring over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · headline over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · body over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · label over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · description over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-description",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · caption over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-caption",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · focus ring over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · success text over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-success-text",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · error text over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-error-text",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · warning text over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-warning-text",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · link over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-link",
+      "min": 4.5,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · success icon over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-success",
+      "min": 3,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · error icon over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-error",
+      "min": 3,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · warning icon over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-warning",
+      "min": 3,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · info icon over the worst backdrop",
+      "bg": "--color-material-thick",
+      "fg": "--color-info",
+      "min": 3,
+      "behind": {
+        "light": "--zabi-base-950",
+        "dark": "--zabi-base-50"
+      },
+      "material": true
+    },
+    {
+      "name": "material thick · success text over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-success-text",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · error text over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-error-text",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · warning text over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-warning-text",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · link over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-link",
+      "min": 4.5,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · success icon over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-success",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · error icon over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-error",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · warning icon over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-warning",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "material thick · info icon over the page",
+      "bg": "--color-material-thick",
+      "fg": "--color-info",
+      "min": 3,
+      "behind": "--color-surface-base",
+      "material": true
+    },
+    {
+      "name": "canvas wash brand · headline",
+      "bg": "--color-canvas-wash-brand",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash brand · body",
+      "bg": "--color-canvas-wash-brand",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash brand · label",
+      "bg": "--color-canvas-wash-brand",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash brand · description",
+      "bg": "--color-canvas-wash-brand",
+      "fg": "--color-description",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash brand · caption",
+      "bg": "--color-canvas-wash-brand",
+      "fg": "--color-caption",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash brand · link",
+      "bg": "--color-canvas-wash-brand",
+      "fg": "--color-link",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash brand · focus ring",
+      "bg": "--color-canvas-wash-brand",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash brand · field edge",
+      "bg": "--color-canvas-wash-brand",
+      "fg": "--color-input-border",
+      "min": 3,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash accent · headline",
+      "bg": "--color-canvas-wash-accent",
+      "fg": "--color-headline",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash accent · body",
+      "bg": "--color-canvas-wash-accent",
+      "fg": "--color-body",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash accent · label",
+      "bg": "--color-canvas-wash-accent",
+      "fg": "--color-label",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash accent · description",
+      "bg": "--color-canvas-wash-accent",
+      "fg": "--color-description",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash accent · caption",
+      "bg": "--color-canvas-wash-accent",
+      "fg": "--color-caption",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash accent · link",
+      "bg": "--color-canvas-wash-accent",
+      "fg": "--color-link",
+      "min": 4.5,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash accent · focus ring",
+      "bg": "--color-canvas-wash-accent",
+      "fg": "--color-focus-ring",
+      "min": 3,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "canvas wash accent · field edge",
+      "bg": "--color-canvas-wash-accent",
+      "fg": "--color-input-border",
+      "min": 3,
+      "behind": "--color-surface-base"
+    },
+    {
+      "name": "primary gradient top · rest",
+      "bg": "--color-control-gradient-start",
+      "fg": "--color-action-primary-text",
+      "min": 4.5,
+      "behind": "--color-action-primary",
+      "gradient": "primary"
+    },
+    {
+      "name": "primary gradient bottom · rest",
+      "bg": "--color-control-gradient-end",
+      "fg": "--color-action-primary-text",
+      "min": 4.5,
+      "behind": "--color-action-primary",
+      "gradient": "primary"
+    },
+    {
+      "name": "primary gradient top · hover",
+      "bg": "--color-control-gradient-start",
+      "fg": "--color-action-primary-text",
+      "min": 4.5,
+      "behind": "--color-action-primary-hover",
+      "gradient": "primary"
+    },
+    {
+      "name": "primary gradient bottom · hover",
+      "bg": "--color-control-gradient-end",
+      "fg": "--color-action-primary-text",
+      "min": 4.5,
+      "behind": "--color-action-primary-hover",
+      "gradient": "primary"
+    },
+    {
+      "name": "primary gradient top · active",
+      "bg": "--color-control-gradient-start",
+      "fg": "--color-action-primary-text",
+      "min": 4.5,
+      "behind": "--color-action-primary-active",
+      "gradient": "primary"
+    },
+    {
+      "name": "primary gradient bottom · active",
+      "bg": "--color-control-gradient-end",
+      "fg": "--color-action-primary-text",
+      "min": 4.5,
+      "behind": "--color-action-primary-active",
+      "gradient": "primary"
+    },
+    {
+      "name": "danger gradient top · rest",
+      "bg": "--color-control-gradient-start",
+      "fg": "--color-action-danger-text",
+      "min": 4.5,
+      "behind": "--color-action-danger",
+      "gradient": "danger"
+    },
+    {
+      "name": "danger gradient bottom · rest",
+      "bg": "--color-control-gradient-end",
+      "fg": "--color-action-danger-text",
+      "min": 4.5,
+      "behind": "--color-action-danger",
+      "gradient": "danger"
+    },
+    {
+      "name": "danger gradient top · hover",
+      "bg": "--color-control-gradient-start",
+      "fg": "--color-action-danger-text",
+      "min": 4.5,
+      "behind": "--color-action-danger-hover",
+      "gradient": "danger"
+    },
+    {
+      "name": "danger gradient bottom · hover",
+      "bg": "--color-control-gradient-end",
+      "fg": "--color-action-danger-text",
+      "min": 4.5,
+      "behind": "--color-action-danger-hover",
+      "gradient": "danger"
+    },
+    {
+      "name": "danger gradient top · active",
+      "bg": "--color-control-gradient-start",
+      "fg": "--color-action-danger-text",
+      "min": 4.5,
+      "behind": "--color-action-danger-active",
+      "gradient": "danger"
+    },
+    {
+      "name": "danger gradient bottom · active",
+      "bg": "--color-control-gradient-end",
+      "fg": "--color-action-danger-text",
+      "min": 4.5,
+      "behind": "--color-action-danger-active",
+      "gradient": "danger"
+    },
+    {
+      "name": "accent gradient top · rest",
+      "bg": "--color-control-gradient-accent-start",
+      "fg": "--color-on-accent",
+      "min": 4.5,
+      "behind": "--color-accent",
+      "gradient": "accent"
+    },
+    {
+      "name": "accent gradient bottom · rest",
+      "bg": "--color-control-gradient-accent-end",
+      "fg": "--color-on-accent",
+      "min": 4.5,
+      "behind": "--color-accent",
+      "gradient": "accent"
+    },
+    {
+      "name": "accent gradient top · hover",
+      "bg": "--color-control-gradient-accent-start",
+      "fg": "--color-on-accent",
+      "min": 4.5,
+      "behind": "--color-accent-hover",
+      "gradient": "accent"
+    },
+    {
+      "name": "accent gradient bottom · hover",
+      "bg": "--color-control-gradient-accent-end",
+      "fg": "--color-on-accent",
+      "min": 4.5,
+      "behind": "--color-accent-hover",
+      "gradient": "accent"
+    },
+    {
+      "name": "accent gradient top · active",
+      "bg": "--color-control-gradient-accent-start",
+      "fg": "--color-on-accent",
+      "min": 4.5,
+      "behind": "--color-accent-active",
+      "gradient": "accent"
+    },
+    {
+      "name": "accent gradient bottom · active",
+      "bg": "--color-control-gradient-accent-end",
+      "fg": "--color-on-accent",
+      "min": 4.5,
+      "behind": "--color-accent-active",
+      "gradient": "accent"
+    }
+  ],
+  "controlGradients": [
+    {
+      "name": "primary",
+      "start": "--color-control-gradient-start",
+      "end": "--color-control-gradient-end",
+      "on": "--color-action-primary-text",
+      "fills": [
+        [
+          "rest",
+          "--color-action-primary"
+        ],
+        [
+          "hover",
+          "--color-action-primary-hover"
+        ],
+        [
+          "active",
+          "--color-action-primary-active"
+        ]
+      ],
+      "strengths": [
+        "--gradient-control-top-strength",
+        "--gradient-control-bottom-strength"
+      ]
+    },
+    {
+      "name": "danger",
+      "start": "--color-control-gradient-start",
+      "end": "--color-control-gradient-end",
+      "on": "--color-action-danger-text",
+      "fills": [
+        [
+          "rest",
+          "--color-action-danger"
+        ],
+        [
+          "hover",
+          "--color-action-danger-hover"
+        ],
+        [
+          "active",
+          "--color-action-danger-active"
+        ]
+      ],
+      "strengths": [
+        "--gradient-control-top-strength",
+        "--gradient-control-bottom-strength"
+      ]
+    },
+    {
+      "name": "accent",
+      "start": "--color-control-gradient-accent-start",
+      "end": "--color-control-gradient-accent-end",
+      "on": "--color-on-accent",
+      "fills": [
+        [
+          "rest",
+          "--color-accent"
+        ],
+        [
+          "hover",
+          "--color-accent-hover"
+        ],
+        [
+          "active",
+          "--color-accent-active"
+        ]
+      ],
+      "strengths": [
+        "--gradient-control-accent-top-strength",
+        "--gradient-control-accent-bottom-strength"
+      ]
+    }
+  ],
+  "darkSelectors": {
+    "always": ".dark,\n[data-theme=\"dark\"]",
+    "auto": "[data-theme=\"auto\"]",
+    "media": "(prefers-color-scheme: dark)"
+  }
+};