zabi-components 8.0.0 → 8.1.0

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

@@ -0,0 +1,1116 @@
+// 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": "#f6f7ef",
+    "--zabi-citron-100": "#edefdf",
+    "--zabi-citron-200": "#dcdfbf",
+    "--zabi-citron-300": "#c5ca95",
+    "--zabi-citron-400": "#aab063",
+    "--zabi-citron-500": "#8c9027",
+    "--zabi-citron-600": "#707400",
+    "--zabi-citron-700": "#5a5d00",
+    "--zabi-citron-800": "#454700",
+    "--zabi-citron-900": "#313200",
+    "--zabi-citron-950": "#202100",
+    "--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": "#f0f8f5",
+    "--zabi-pine-100": "#e2f1eb",
+    "--zabi-pine-200": "#c5e4d7",
+    "--zabi-pine-300": "#9fd1bd",
+    "--zabi-pine-400": "#70ba9e",
+    "--zabi-pine-500": "#399c7a",
+    "--zabi-pine-600": "#00805e",
+    "--zabi-pine-700": "#00674a",
+    "--zabi-pine-800": "#004f37",
+    "--zabi-pine-900": "#003826",
+    "--zabi-pine-950": "#002518",
+    "--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": "#fbf6ed",
+    "--zabi-warning-100": "#f7ecda",
+    "--zabi-warning-200": "#f1d9b6",
+    "--zabi-warning-300": "#e8bf87",
+    "--zabi-warning-400": "#db9e4c",
+    "--zabi-warning-500": "#c17b00",
+    "--zabi-warning-600": "#9e6000",
+    "--zabi-warning-700": "#824c00",
+    "--zabi-warning-800": "#663800",
+    "--zabi-warning-900": "#4b2600",
+    "--zabi-warning-950": "#341800",
+    "--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-150)",
+    "--color-surface-raised": "#ffffff",
+    "--color-surface-elevated": "var(--color-base-100)",
+    "--color-surface-overlay": "#ffffff",
+    "--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-50)",
+    "--color-background-tertiary": "var(--color-base-150)",
+    "--color-page": "var(--color-base-150)",
+    "--color-page-secondary": "var(--color-base-200)",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-hover": "var(--color-base-100)",
+    "--color-card-active": "var(--color-base-150)",
+    "--color-card-elevated": "var(--color-surface-overlay)",
+    "--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-progress-fill": "var(--color-action-primary)",
+    "--color-progress-track": "var(--color-input)",
+    "--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": "var(--color-base-200)",
+    "--color-input-focus": "var(--color-surface-raised)",
+    "--color-input-disabled": "var(--color-surface-base)",
+    "--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-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-200)",
+    "--color-success-border": "var(--color-pine-300)",
+    "--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-200)",
+    "--color-warning-border": "var(--color-warning-300)",
+    "--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-200)",
+    "--color-error-border": "var(--color-error-300)",
+    "--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-200)",
+    "--color-energetic-border": "var(--color-citron-300)",
+    "--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-200)",
+    "--color-accent-border": "var(--color-accent-300)",
+    "--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-250)",
+    "--color-neutral-border": "var(--color-base-300)",
+    "--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-200)",
+    "--color-info-border": "var(--color-iris-300)",
+    "--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-200)",
+    "--color-action-primary-subtle-hover": "var(--color-brand-300)",
+    "--color-action-primary-subtle-active": "color-mix(in srgb, var(--color-brand-400) 50%, var(--color-brand-300))",
+    "--zabi-on-brand": "#ffffff",
+    "--zabi-on-brand-dark": "var(--zabi-brand-950)",
+    "--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-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)",
+    "--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": "color-mix(in srgb, var(--zabi-base-50) 6.4%, var(--zabi-base-900))",
+    "--color-surface-elevated": "color-mix(in srgb, var(--zabi-base-50) 13.1%, var(--zabi-base-900))",
+    "--color-surface-overlay": "color-mix(in srgb, var(--zabi-base-50) 19.7%, var(--zabi-base-900))",
+    "--color-surface-overlay-hover": "var(--color-base-400)",
+    "--color-surface-inset": "var(--color-base-150)",
+    "--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-base-100)",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-hover": "var(--color-surface-elevated)",
+    "--color-card-active": "var(--color-surface-overlay)",
+    "--color-card-elevated": "var(--color-surface-elevated)",
+    "--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-base-400)",
+    "--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": "var(--color-surface-inset)",
+    "--color-progress-fill": "var(--color-action-primary)",
+    "--color-progress-track": "var(--color-input)",
+    "--color-input-border": "var(--color-base-500)",
+    "--color-input-border-hover": "var(--color-input-border)",
+    "--color-input-hover": "var(--color-base-200)",
+    "--color-input-active": "var(--color-base-250)",
+    "--color-input-focus": "var(--color-base-150)",
+    "--color-input-disabled": "var(--color-base-100)",
+    "--color-input-placeholder": "var(--color-base-600)",
+    "--color-control-border": "var(--color-base-600)",
+    "--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": "var(--color-pine-100)",
+    "--color-success-border": "var(--color-pine-200)",
+    "--color-warning-subtle": "var(--color-warning-100)",
+    "--color-warning-border": "var(--color-warning-200)",
+    "--color-error-subtle": "var(--color-error-100)",
+    "--color-error-border": "var(--color-error-200)",
+    "--color-energetic-subtle": "var(--color-citron-100)",
+    "--color-energetic-border": "var(--color-citron-200)",
+    "--color-accent-subtle": "var(--color-accent-100)",
+    "--color-accent-border": "var(--color-accent-200)",
+    "--color-on-accent": "var(--zabi-on-accent-dark)",
+    "--color-info-subtle": "var(--color-iris-100)",
+    "--color-info-border": "var(--color-iris-200)",
+    "--color-neutral": "var(--color-base-600)",
+    "--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-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-disabled": "var(--color-base-200)",
+    "--color-action-disabled-border": "var(--color-base-250)",
+    "--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-text": "var(--color-error-50)"
+  },
+  "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": "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": "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": "progress fill on track",
+      "bg": "--color-progress-track",
+      "fg": "--color-progress-fill",
+      "min": 3
+    }
+  ],
+  "darkSelectors": {
+    "always": ".dark,\n[data-theme=\"dark\"]",
+    "auto": "[data-theme=\"auto\"]",
+    "media": "(prefers-color-scheme: dark)"
+  }
+};