zabi-components 7.0.2 → 8.0.0

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

@@ -26,17 +26,17 @@
 --zabi-base-925: #101013
 --zabi-base-950: #09090b
 /* Mirror @theme --zabi-brand-* ramp (same physical hex; required for standalone dark import) */
---zabi-brand-50: #f7faff
---zabi-brand-100: #edf2fb
---zabi-brand-200: #dfe7fb
---zabi-brand-300: #ccdbfd
---zabi-brand-400: #abc4ff
---zabi-brand-500: #8fa8ff
---zabi-brand-600: #6e84fa
---zabi-brand-700: #5366e2
---zabi-brand-800: #3f4fc0
---zabi-brand-900: #2f3c99
---zabi-brand-950: #1f2866
+--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)
@@ -50,17 +50,17 @@
 --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: #f9faeb
---zabi-citron-100: #f1f5cf
---zabi-citron-200: #e4ecaa
---zabi-citron-300: #d5e184
---zabi-citron-400: #c7d460
---zabi-citron-500: #bbbe64
---zabi-citron-600: #a3a852
---zabi-citron-700: #848a43
---zabi-citron-800: #666c35
---zabi-citron-900: #4d5229
---zabi-citron-950: #323518
+--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)
@@ -74,17 +74,17 @@
 --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: #e9f6f2
---zabi-pine-100: #d2ece4
---zabi-pine-200: #a7d9c9
---zabi-pine-300: #78c4ad
---zabi-pine-400: #49ad91
---zabi-pine-500: #0c5d43
---zabi-pine-600: #0a513a
---zabi-pine-700: #084532
---zabi-pine-800: #063a2a
---zabi-pine-900: #04231a
---zabi-pine-950: #02160f
+--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)
@@ -98,17 +98,17 @@
 --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: #f4f4fa
---zabi-iris-100: #e9e9f7
---zabi-iris-200: #d6d6f0
---zabi-iris-300: #bdbde6
---zabi-iris-400: #a3a3d8
---zabi-iris-500: #6969b3
---zabi-iris-600: #58589e
---zabi-iris-700: #474788
---zabi-iris-800: #38386f
---zabi-iris-900: #2a2a56
---zabi-iris-950: #1b1b37
+--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)
@@ -122,17 +122,17 @@
 --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: #fffbeb
---zabi-warning-100: #fef3c7
---zabi-warning-200: #fde68a
---zabi-warning-300: #fcd34d
---zabi-warning-400: #fbbf24
---zabi-warning-500: #f59e0b
---zabi-warning-600: #d97706
---zabi-warning-700: #b45309
---zabi-warning-800: #92400e
---zabi-warning-900: #78350f
---zabi-warning-950: #451a03
+--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)
@@ -146,17 +146,17 @@
 --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: #fef2f2
---zabi-error-100: #fee2e2
---zabi-error-200: #fecaca
---zabi-error-300: #fca5a5
---zabi-error-400: #f87171
---zabi-error-500: #ef4444
---zabi-error-600: #dc2626
---zabi-error-700: #b91c1c
---zabi-error-800: #991b1b
---zabi-error-900: #7f1d1d
---zabi-error-950: #450a0a
+--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)
@@ -193,24 +193,58 @@
 --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 */
@@ -220,23 +254,36 @@
 /* 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 - No dark mode overrides needed, base colors are already inverted */
+/* 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 --zabi-brand-* physical ramp above (semantic --color-brand-* follows mirror) */
-/* Text color - Use brand-50 (semantic; maps across light/dark via --zabi-brand-*) 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
+/* 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))