zabi-components 8.1.0 → 9.0.0

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

@@ -45,17 +45,17 @@ export default {
     "--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",
+    "--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)",
@@ -89,17 +89,17 @@ export default {
     "--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",
+    "--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)",
@@ -133,17 +133,17 @@ export default {
     "--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-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": "#4b2600",
-    "--zabi-warning-950": "#341800",
+    "--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)",
@@ -198,22 +198,31 @@ export default {
     "--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-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-50)",
+    "--color-background-secondary": "var(--color-base-100)",
     "--color-background-tertiary": "var(--color-base-150)",
-    "--color-page": "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-100)",
-    "--color-card-active": "var(--color-base-150)",
+    "--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)",
@@ -221,8 +230,15 @@ export default {
     "--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)",
@@ -230,9 +246,13 @@ export default {
     "--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-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-surface-base)",
+    "--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)",
@@ -260,6 +280,9 @@ export default {
     "--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)",
@@ -280,31 +303,31 @@ export default {
     "--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-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-200)",
-    "--color-warning-border": "var(--color-warning-300)",
+    "--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-200)",
-    "--color-error-border": "var(--color-error-300)",
+    "--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-200)",
-    "--color-energetic-border": "var(--color-citron-300)",
+    "--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-200)",
-    "--color-accent-border": "var(--color-accent-300)",
+    "--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)",
@@ -313,24 +336,25 @@ export default {
     "--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-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-200)",
-    "--color-info-border": "var(--color-iris-300)",
+    "--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-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))",
+    "--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-brand-950)",
+    "--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)",
@@ -339,6 +363,20 @@ export default {
     "--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)",
@@ -349,6 +387,25 @@ export default {
     "--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)"
   },
@@ -452,76 +509,130 @@ export default {
     "--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-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-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)",
+    "--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-base-400)",
+    "--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": "var(--color-surface-inset)",
+    "--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-input)",
+    "--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-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-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": "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-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": "var(--color-iris-100)",
-    "--color-info-border": "var(--color-iris-200)",
+    "--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(--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)"
+    "--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": [
     {
@@ -668,6 +779,18 @@ export default {
       "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",
@@ -957,6 +1080,30 @@ export default {
       "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",
@@ -1101,11 +1248,1392 @@ export default {
       "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": {