zabi-components 7.0.1 → 8.0.0

package/dist/zabi-components-theme-dark.css

@@ -25,54 +25,150 @@
 --zabi-base-900: #18181b
 --zabi-base-925: #101013
 --zabi-base-950: #09090b
-/* Brand Color Scale - Dark mode variants (mirrored from light physical hex; no theme() forward refs) */
---color-brand-50: #1f2866
---color-brand-100: #2f3c99
---color-brand-200: #3f4fc0
---color-brand-300: #5366e2
---color-brand-400: #6e84fa
---color-brand-500: #8fa8ff
---color-brand-600: #abc4ff
---color-brand-700: #ccdbfd
---color-brand-800: #dfe7fb
---color-brand-900: #edf2fb
---color-brand-950: #f7faff
-/* Citron Color Scale - Dark mode variants */
---color-citron-50: #323518
---color-citron-100: #4d5229
---color-citron-200: #666c35
---color-citron-300: #848a43
---color-citron-400: #a3a852
---color-citron-500: #bbbe64
---color-citron-600: #c7d460
---color-citron-700: #d5e184
---color-citron-800: #e4ecaa
---color-citron-900: #f1f5cf
---color-citron-950: #f9faeb
-/* Pine Color Scale - Dark mode variants */
---color-pine-50: #02160f
---color-pine-100: #04231a
---color-pine-200: #063a2a
---color-pine-300: #084532
---color-pine-400: #0a513a
---color-pine-500: #0c5d43
---color-pine-600: #49ad91
---color-pine-700: #78c4ad
---color-pine-800: #a7d9c9
---color-pine-900: #d2ece4
---color-pine-950: #e9f6f2
-/* Iris Color Scale - Dark mode variants */
---color-iris-50: #1b1b37
---color-iris-100: #2a2a56
---color-iris-200: #38386f
---color-iris-300: #474788
---color-iris-400: #58589e
---color-iris-500: #6969b3
---color-iris-600: #a3a3d8
---color-iris-700: #bdbde6
---color-iris-800: #d6d6f0
---color-iris-900: #e9e9f7
---color-iris-950: #f4f4fa
+/* Mirror @theme --zabi-brand-* ramp (same physical hex; required for standalone dark import) */
+--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
+/* Brand Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+--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)
+/* Mirror @theme --zabi-citron-* ramp (same physical hex; required for standalone dark import) */
+--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
+/* Citron Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+--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)
+/* Mirror @theme --zabi-pine-* ramp (same physical hex; required for standalone dark import) */
+--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
+/* Pine Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+--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)
+/* Mirror @theme --zabi-iris-* ramp (same physical hex; required for standalone dark import) */
+--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
+/* Iris Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+--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)
+/* Mirror @theme --zabi-warning-* ramp (same physical hex; required for standalone dark import) */
+--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
+/* Warning Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+--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)
+/* Mirror @theme --zabi-error-* ramp (same physical hex; required for standalone dark import) */
+--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
+/* Error Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+--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)
 /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
 --color-base-50: #09090b
 --color-base-75: #101013
@@ -97,73 +193,97 @@
 --color-base-950: #fafafa
 /* Background Colors - No dark mode overrides needed, base colors are already inverted */
 /* Page Colors - No dark mode overrides needed, base colors are already inverted */
-/* Card Colors */
---color-card: var(--color-base-200)
---color-card-hover: var(--color-base-300)
---color-card-active: var(--color-base-400)
---color-card-elevated: var(--color-base-200)
-/* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
---color-surface-1: var(--color-base-250)
---color-surface-2: var(--color-base-300)
---color-surface-3: var(--color-base-350)
+/* Surface elevation — shadows don't read on dark, so each level steps up +6 OKLCH lightness
+   * from the page background (L 21 → 27 → 33 → 39).
+   *
+   * GENERATED by scripts/generate-surfaces.js from tokens/surface-ladder.js — do not hand-edit.
+   * Each level is #fafafa (the same light as the dark hover tint) washed over the page at
+   * 6.4% / 13.1% / 19.7%, so every level is the one below it with more light on it. Baked to
+   * opaque hex so the static checks can still resolve them and a modal stays opaque.
+   * Enforced by scripts/check-surface-elevation.js (strictly increasing, 5–8 points). */
+--color-surface-base: #18181b
+--color-surface-raised: #262629
+--color-surface-elevated: #363638
+--color-surface-overlay: #454547
+--color-surface-overlay-hover: #52525b
+/* Distinct from base, raised AND elevated — a neutral chip has no hue to
+   * separate it, so it has to separate on lightness wherever it lands. */
+--color-neutral-subtle: var(--color-base-300)
+--color-border-overlay: var(--color-base-450)
+/* Background Colors */
+--color-background: var(--color-surface-base)
+/* Card Colors — aliases of the surface levels */
+--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)
+/* Surfaces — numbered aliases of the surface levels */
+--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)
+/*
+   * Secondary text keeps ≥ 4.5:1 on every surface level, including overlays (L39).
+   * Only base-650 and lighter pass on the overlay, so caption takes base-650 and description
+   * moves one step up to base-700 to stay visibly stronger than caption.
+   */
+--color-description: var(--color-base-700)
+--color-caption: var(--color-base-650)
+/* Interaction fills — light tint on dark, mirroring the light-mode rule.
+   * Alpha keeps these one step away from every surface level, which a fixed
+   * ramp step cannot guarantee (base-100 in dark IS the page background). */
+--color-surface-hover: rgba(250, 250, 250, 0.08)
+--color-surface-active: rgba(250, 250, 250, 0.14)
 /* Overlay Colors */
 --color-overlay: rgba(0, 0, 0, 0.7)
-/* Input Colors */
---color-input: var(--color-base-250)
---color-input-border: var(--color-base-350)
---color-input-hover: var(--color-base-300)
---color-input-focus: var(--color-base-300)
---color-input-disabled: var(--color-base-300)
+/* Input Colors
+   * Dark fields are INSET: one step below the raised surface they sit on,
+   * which is the dark-mode equivalent of a white field on a grey page. */
+--color-input: var(--color-base-150)
+--color-input-border: var(--color-base-300)
+--color-input-hover: var(--color-base-200)
+--color-input-focus: var(--color-base-150)
+--color-input-disabled: var(--color-base-100)
+--color-input-placeholder: var(--color-base-500)
 /* Text Colors - No dark mode overrides needed, base colors are already inverted */
 /* Border Colors - No dark mode overrides needed, base colors are already inverted */
 /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
 /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
 /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
-/* Success Colors */
---color-success: var(--color-pine-400)
---color-success-weak: var(--color-pine-500)
---color-success-medium: var(--color-pine-300)
---color-success-strong: var(--color-pine-200)
-/* Warning Colors */
---color-warning: #f59e0b
---color-warning-weak: #d97706
---color-warning-medium: #fbbf24
---color-warning-strong: #fcd34d
-/* Error Colors */
---color-error: #ef4444
---color-error-weak: #dc2626
---color-error-medium: #f87171
---color-error-strong: #fca5a5
-/* Energetic Colors (Citron) */
---color-energetic: var(--color-citron-400)
---color-energetic-weak: var(--color-citron-500)
---color-energetic-medium: var(--color-citron-300)
---color-energetic-strong: var(--color-citron-200)
-/* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
-/* Info Colors */
---color-info: var(--color-iris-500)
---color-info-weak: var(--color-iris-600)
---color-info-active: var(--color-iris-400)
---color-info-medium: var(--color-iris-400)
---color-info-strong: var(--color-iris-300)
-/* Text alias */
---color-info-text: var(--color-info)
+/* Success Colors — no overrides: @theme uses --color-pine-*; semantic pine resolves to mirrored physical ramp inside .dark */
+/* Warning Colors — no overrides: @theme uses --color-warning-* scale; it mirrors in .dark via --zabi-warning-* */
+/* Error Colors — no overrides: @theme uses --color-error-* scale; it mirrors in .dark via --zabi-error-* */
+/* Energetic Colors — no overrides: @theme uses --color-citron-*; citron mirrors in .dark via --zabi-citron-* */
+/* Neutral Colors — base-550 mirrors to L* 57, which is only 4.35:1 on a
+   * raised surface. One step lighter clears AA on every dark surface level. */
+--color-neutral: var(--color-base-600)
+/* Info Colors — no overrides: @theme uses --color-iris-* (incl. --color-info-active); iris mirrors in .dark via --zabi-iris-* */
 /* ========================================
      ACTION COLORS - Dark Mode Overrides
      ======================================== */
 /* Primary Actions - Background adapts automatically via brand color inversion */
-/* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
-/* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) for proper contrast */
---color-action-primary-text: var(--color-brand-50)
-/* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
-/* Danger Actions */
---color-action-danger: #ef4444
---color-action-danger-hover: #dc2626
---color-action-danger-active: #b91c1c
---color-action-danger-disabled: #b91c1c
---color-action-danger-subtle: #450a0a
---color-action-danger-subtle-hover: #7f1d1d
+/* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --zabi-brand-* physical ramp above (semantic --color-brand-* follows mirror) */
+/* Text color - the physical dark end of the brand ramp, on the physical
+   * light end used as the dark-mode primary fill. 7.21:1. */
+--color-action-primary-text: var(--zabi-brand-950)
+/* Secondary Actions - light alpha tint instead of the light-mode dark tint */
+--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)
+/* Disabled Actions - base-200 in dark is #27272a, still the quietest fill */
+/* Danger Actions — restated as aliases, not re-pointed.
+   * These resolve through the mirrored --color-error-* scale, so dark danger
+   * is the same step of the same ramp as light danger. They are repeated here
+   * only because `zabi-components/theme-dark-only` has to stand alone as a
+   * complete import (validate-theme.js enforces that). The raw hex this
+   * replaced pinned dark danger brighter than light, which is why the
+   * destructive action was the loudest element on a dark page. */
+--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)
 /* Shadow Colors */
 --shadow-opacity: 0.3
 --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))