eidotter 0.30.0 → 0.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/AIText/components/AIText.d.ts +3 -3
  2. package/dist/components/InlineLink/components/InlineLink.d.ts +1 -1
  3. package/dist/eidotter.css +1 -1
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.es.js +16 -16
  6. package/dist/index.umd.js +1 -1
  7. package/guidelines/design-principles.md +8 -0
  8. package/llms.txt +162 -0
  9. package/package.json +6 -3
  10. package/src/styles/shadcn.css +223 -0
  11. package/src/styles/theme.amber-mono.css +13 -1
  12. package/src/styles/theme.cga-amber.css +6 -0
  13. package/src/styles/theme.cga-mode4-p0.css +6 -0
  14. package/src/styles/theme.cga-mode4-p1.css +6 -0
  15. package/src/styles/theme.cga-mode5.css +6 -0
  16. package/src/styles/tokens.css +27 -0
  17. package/tailwind.preset.cjs +20 -0
package/guidelines/design-principles.md CHANGED
@@ -44,6 +44,14 @@ eidotter's distinctive DOS aesthetic — principles for *this theme*:
44
44
 
45
45
  A Modern/clean theme alongside DOS, so every app can look modern instead of the DOS interface. It keeps **all of Part 1 and Part 2** — but defines its **own visual language**: its own broader palette, likely light/dark, contemporary type and spacing, restrained-but-not-DOS. The discipline is identical (semantic tokens, never hex; a11y as a gate; keyboard-first); only the values and look differ. Products choose a theme; the interaction quality is constant.
46
46
 
47
+ ## Part 4 — Adoption posture (the DS is the default, not a cage)
48
+
49
+ Portfolio apps and sites **default to eidotter** — its principles, components, infrastructure, and guidance are the starting point, not an optional add-on.
50
+
51
+ - **Amber (DOS) is the standard default theme; the light theme is offered alongside it.** Every product ships amber-by-default and exposes a **light-theme toggle in a consistent place** (e.g. a settings option) — the switch behaves the same way across surfaces, not reinvented per app.
52
+ - **Exceptions are allowed when explicitly chosen.** Creative freedom is preserved — a product may deviate from the DS where there's a deliberate reason. But deviation is the conscious exception, not the default: reach for the DS first.
53
+ - **DS changes reach products through a gate.** When a DS update changes how a consumer looks, the update is **previewed (before/after) with its reasoning** (which principle or changelog entry drove it) and **approved before it lands**. The design system explains itself; it does not silently mutate products.
54
+
47
55
  ---
48
56
 
49
57
  _Implementation rules (token pipeline, CI, file structure, BEM-for-phosphor, per-component specs) are eidotter mechanics — see `CLAUDE.md` and `solutions/`. They serve these principles; they are not themselves design principles._
package/llms.txt ADDED
@@ -0,0 +1,162 @@
1
+ # eidotter
2
+
3
+ > DOS-themed React component library with authentic CGA/amber phosphor aesthetics.
4
+
5
+ ## Quick Facts
6
+ - 41 components (Accordion, AIText, Alert, Badge, Brand (Logo, Wordmark, BrandLockup), Breadcrumb, Button, Card, ChatMessage, ChatHistory, ChatInput, ChatContainer, Checkbox, CmdPalette, CommandPrompt, DosFigure, FilterBar, Footer, Header, Icon, InlineExpand, InlineLink, Input, LegalPage, Lightbox, Modal, Nav, Notification, Progress, RetroEffects, Separator, Skeleton, Stat, Switch, Tabs, Tag, Terminal, TextScramble, TimelineContainer, TimelineNode, Tokens)
7
+ - Amber theme is the default (amber-on-black phosphor CRT); a light theme ("amber in daylight") is in progress (DMNC-1058). Components paint via semantic roles so they re-theme — do not hardcode dark-only assumptions.
8
+ - CSS custom properties + Tailwind preset
9
+ - React 18/19, Tailwind 3/4 compatible
10
+ - Published on npm: `npm install eidotter` (current v0.30.x)
11
+ - Consumer imports: `eidotter/styles` (required); `eidotter/themes/<name>.css` (optional theme); `eidotter/utilities` (optional `.dos-*` classes for raw HTML/MDX/prose; 12 classes; v0.19.4+)
12
+
13
+ ## Key Principle
14
+ NEVER hardcode colors. Paint via SEMANTIC ROLES (not raw primitives) so components re-theme:
15
+ - CSS: `var(--color-semantic-*)` (prefer over raw `var(--color-cga-*)`)
16
+ - Tailwind: `text-dos-text-brand` (amber), `bg-dos-bg-primary`, etc. — prefer semantic `dos-*` utilities over raw `cga-*`
17
+
18
+ ## Theme defaults (adoption posture)
19
+ Apps default to the amber theme and offer the light theme via a consistent settings toggle (e.g. in settings). The DS is the default starting point; deviate only by deliberate exception. DS changes reach products through a preview + approval gate (before/after + the principle that drove each change). See `guidelines/design-principles.md` Part 4.
20
+
21
+ ## Files for AI Agents
22
+ - CLAUDE.md: Coding instructions, component patterns, and token reference
23
+ - guidelines/README.md: Overview, quick-start, anti-patterns
24
+ - guidelines/components.md: Per-component usage guides
25
+ - guidelines/patterns.md: Composition + layout patterns
26
+ - Note: docs/ is Storybook build output (wiped on every build) — do not rely on files there
27
+
28
+ ## Token Categories
29
+ - `--color-semantic-*`: USE THESE for components (background, text, border, status)
30
+ - `--color-cga-*`: Raw CGA palette (16 colors + amber extensions)
31
+ - `--typography-*`: Font family, size, weight, line-height
32
+ - `--spacing-*`: 8px grid scale (0-16)
33
+ - `--shadow-*`: DOS drop shadows + phosphor glow effects
34
+
35
+ ## Essential Tokens
36
+
37
+ ### Backgrounds
38
+ - `--color-semantic-background-primary` → `bg-dos-bg-primary` (main background, #020003)
39
+ - `--color-semantic-background-secondary` → `bg-dos-bg-secondary` (surfaces, #010103)
40
+ - `--color-semantic-background-accent` → `bg-dos-bg-accent` (buttons, #ffb000)
41
+
42
+ ### Text
43
+ - `--color-semantic-text-primary` → `text-dos-text-primary` (body text, #b87c1a)
44
+ - `--color-semantic-text-brand` → `text-dos-text-brand` (phosphor amber #ffb000 — the honest amber text role; PREFER over raw `text-cga-amber`)
45
+ - `--color-semantic-text-accent` → `text-dos-text-accent` (highlights, #e5b936)
46
+ - `--color-semantic-text-muted` / `--color-semantic-text-tertiary` → `text-dos-text-muted` / `text-dos-text-tertiary` (supplementary text)
47
+ - Functional (honest, theme-invariant): `text-dos-text-success` (#00AA00), `text-dos-text-error` (#FF5555, readable on dark), `text-dos-text-info` (#00AAAA), `text-dos-text-white` (#FFFFFF, light foreground on functional fills)
48
+ - Functional FILLS: `bg-dos-bg-error` (#AA0000 solid red, e.g. destructive button) with `text-dos-text-white`
49
+
50
+ ### Borders
51
+ - `--color-semantic-border-default` → `border-dos-border-default` (#b87c1a)
52
+ - `--color-semantic-border-focus` → `border-dos-border-focus` (#e5b936)
53
+
54
+ ### Effects
55
+ - `--shadow-glow-md` → `shadow-dos-glowMd` (phosphor glow)
56
+ - `--shadow-drop` → `shadow-dos-drop` (DOS window shadow)
57
+
58
+ ## Component List with Purpose
59
+ - Alert: Dismissible messages (info, success, warning, error)
60
+ - Accordion: Collapsible sections (Section + AccordionFill)
61
+ - Badge: Status indicators, tags
62
+ - Breadcrumb: Navigation path
63
+ - Button: Actions (primary, secondary, ghost, danger)
64
+ - Card: Content containers
65
+ - Checkbox: Boolean inputs
66
+ - CommandPrompt: DOS command line aesthetic
67
+ - Icon: 12 named icons backed by pixelarticons (Info, Warning, Error, Done, Check, Close, Chevron Up/Down, App, Cancel, Fullscreen, Add); tree-shakable per-icon imports via `eidotter/icons`
68
+ - Input: Text fields
69
+ - Modal: Dialog overlays (uses native dialog element)
70
+ - Progress: Loading/completion bars
71
+ - RetroEffects: CRT scanlines, phosphor glow
72
+ - Stat: Key-value metric display with trends
73
+ - Switch: Toggle controls
74
+ - Tabs: Tab navigation (default, pills, underline variants)
75
+ - Terminal: DOS window frame (controls hidden by default — pass minimizable/maximizable/closeable to enable)
76
+ - TimelineContainer: Multi-zoom timeline (year/month/day/hour views). Supports mode="static" for read-only vertical feed (replaces TimelineList). Shared TimelineEntryData type.
77
+ - TimelineNode: Timeline markers (circle/square/diamond, labels no longer truncated)
78
+ - Footer: Site footer with default legal links (Impressum + Datenschutz). Exports defaultLegalLinks constant.
79
+ - FilterBar: Multi-select filter toolbar with keyboard navigation
80
+ - Tag: Interactive labels, filter chips, closeable tags (+ TagGroup wrapper)
81
+ - ChatMessage: Single chat message with role-based DOS styling (user >, assistant C:\>, system italic) and streaming cursor
82
+ - ChatHistory: Scrollable message list with auto-scroll, role="log" accessibility, empty state
83
+ - ChatInput: Multiline DOS-styled textarea with Enter-to-send, Shift+Enter for newlines, auto-grow
84
+ - ChatContainer: Composes ChatHistory + ChatInput — place inside Terminal for full DOS chat window
85
+ - InlineExpand: Inline text disclosure widget
86
+ - Nav: DOS-themed navigation (DesktopNav + MobileNav)
87
+ - Separator: Horizontal/vertical content divider
88
+ - TextScramble: DOS text decode/glitch effect
89
+ - Header: Sticky site header (retro/modern variants), composes branding + Nav
90
+ - Notification: Toast popup with layered amber glow, auto-dismiss, progress variant
91
+ - CmdPalette: ⌘K command palette with scored search and keyboard nav
92
+ - DosFigure: Demoscene painted-screen media placeholder with scanline sweep
93
+ - InlineLink: In-flow anchor with dotted underline + ▸ / ↗ glyph
94
+ - Lightbox: Fullscreen image viewer on Modal primitives — prev/next, counter, keyboard nav, swipe
95
+ - AIText: Inline AI-content marker rendering data-provenance="ai-draft" with shimmer gradient
96
+ - Skeleton: DOS/CGA loading placeholder — shade-character rows with a CRT hum-bar band rolling top→bottom (text/card/figure/timeline variants)
97
+ - LegalPage: Impressum/Datenschutz layout primitive + reusable German DDG/DSGVO clause components
98
+ - Brand: Logo, Wordmark, BrandLockup branding marks
99
+
100
+ ## Component Origins
101
+ Components originate from different projects. Use `getComponentsByOrigin(projectId)` or `getComponentsByConsumer(projectId)` from the registry.
102
+
103
+ | Component | Origin | Used By |
104
+ |-----------|--------|---------|
105
+ | Alert | eidotter | rizomorf, steuerdash |
106
+ | Accordion | eidotter | rizomorf |
107
+ | AccordionFill | eidotter | rizomorf |
108
+ | Badge | eidotter | rizomorf, steuerdash |
109
+ | Breadcrumb | rizomorf | rizomorf |
110
+ | Button | eidotter | spacewar, rizomorf, pomodoke-calendar, steuerdash |
111
+ | Card | eidotter | rizomorf, steuerdash |
112
+ | Checkbox | eidotter | steuerdash |
113
+ | CommandPrompt | eidotter | rizomorf |
114
+ | Icon | eidotter | rizomorf |
115
+ | Input | eidotter | steuerdash |
116
+ | Modal | eidotter | pomodoke-calendar |
117
+ | Progress | eidotter | steuerdash |
118
+ | RetroEffects | spacewar | spacewar, rizomorf |
119
+ | Stat | steuerdash | steuerdash |
120
+ | Switch | eidotter | (none) |
121
+ | Tabs | eidotter | steuerdash |
122
+ | Terminal | eidotter | rizomorf |
123
+ | Tag | eidotter | lifelines, rizomorf |
124
+ | TimelineContainer | lifelines | lifelines |
125
+ | TimelineNode | lifelines | lifelines, rizomorf |
126
+ | ChatMessage | eidotter | (none yet) |
127
+ | ChatHistory | eidotter | (none yet) |
128
+ | ChatInput | eidotter | (none yet) |
129
+ | ChatContainer | eidotter | (none yet) |
130
+
131
+ ## Anti-Patterns (NEVER DO)
132
+ - NEVER hardcode hex colors: `color: #FFB000` — use semantic roles so components re-theme
133
+ - NEVER bake in a dark-only assumption — a light theme is coming; paint via `--color-semantic-*` roles, not raw dark primitives. Switch themes via `data-theme="<name>"` / the theme toggle, not `prefers-color-scheme`.
134
+ - NEVER edit tokens.css directly (edit JSON, rebuild)
135
+ - NEVER use rounded corners > 4px (DOS aesthetic)
136
+ - NEVER use sans-serif fonts (DOS theme)
137
+
138
+ ## Integration Quick Start
139
+ ```css
140
+ /* In your globals.css */
141
+ @import "eidotter/tokens.css";
142
+ @import "eidotter/styles";
143
+
144
+ :root { color-scheme: dark; }
145
+ html { background: var(--color-semantic-background-primary); }
146
+ body {
147
+ color: var(--color-semantic-text-primary);
148
+ font-family: var(--typography-font-family-primary);
149
+ }
150
+ ```
151
+
152
+ ```js
153
+ // In tailwind.config.js
154
+ module.exports = {
155
+ presets: [require('eidotter/tailwind.preset.cjs')],
156
+ }
157
+ ```
158
+
159
+ ## Links
160
+ - npm: https://www.npmjs.com/package/eidotter
161
+ - Storybook: See docs/ folder
162
+ - Source: src/components/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "eidotter",
3
- "version": "0.30.0",
3
+ "version": "0.32.0",
4
4
  "type": "module",
5
5
  "description": "A DOS Themed Design System",
6
6
  "main": "./dist/index.umd.js",
@@ -26,6 +26,7 @@
26
26
  "./tailwind.preset": "./tailwind.preset.cjs",
27
27
  "./fonts.css": "./src/styles/fonts.css",
28
28
  "./tokens.css": "./src/styles/tokens.css",
29
+ "./shadcn.css": "./src/styles/shadcn.css",
29
30
  "./themes/amber-mono.css": "./src/styles/theme.amber-mono.css",
30
31
  "./themes/cga-amber.css": "./src/styles/theme.cga-amber.css",
31
32
  "./themes/cga-mode4-p0.css": "./src/styles/theme.cga-mode4-p0.css",
@@ -59,8 +60,10 @@
59
60
  "src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt",
60
61
  "src/styles/tokens.css",
61
62
  "src/styles/theme.*.css",
63
+ "src/styles/shadcn.css",
62
64
  "src/styles/dos-utilities.css",
63
- "guidelines"
65
+ "guidelines",
66
+ "llms.txt"
64
67
  ],
65
68
  "scripts": {
66
69
  "dev": "vite",
@@ -69,7 +72,7 @@
69
72
  "fetch-icons": "node scripts/icons/fetch-svgs.mjs",
70
73
  "generate-icons": "node scripts/icons/build-tsx.mjs && node scripts/icons/build-barrels.mjs",
71
74
  "prepublishOnly": "npm run build",
72
- "build-tokens": "node style-dictionary.config.mjs",
75
+ "build-tokens": "node style-dictionary.config.mjs && node scripts/generate-shadcn-shim.mjs",
73
76
  "lint": "eslint src/ --report-unused-disable-directives --max-warnings 0",
74
77
  "lint-tokens": "node scripts/lint-token-refs.mjs",
75
78
  "check-contrast": "node scripts/check-contrast.mjs",
package/src/styles/shadcn.css ADDED
@@ -0,0 +1,223 @@
1
+ /* =============================================================================
2
+ * eidotter — shadcn/ui token shim (DMNC-922). GENERATED — do not edit.
3
+ * Run `npm run build-tokens` to regenerate.
4
+ *
5
+ * Maps shadcn/ui CSS var names to eidotter's semantic roles as HSL channels,
6
+ * so a shadcn consumer using `hsl(var(--background))` consumes eidotter's
7
+ * themeable palette. Import this AFTER eidotter/tokens.css + eidotter/styles,
8
+ * then delete your own :root/.dark/etc. colour definitions. Re-themes via
9
+ * [data-theme]. Opt-in — NOT part of eidotter/styles.
10
+ *
11
+ * sidebar-* and chart-* are best-effort amber-family aliases; override per
12
+ * surface for real sidebar/data-viz needs.
13
+ * ========================================================================== */
14
+
15
+ :root {
16
+ --background: 280 100% 1%;
17
+ --foreground: 37 75% 41%;
18
+ --card: 240 50% 1%;
19
+ --card-foreground: 37 75% 41%;
20
+ --popover: 240 50% 1%;
21
+ --popover-foreground: 37 75% 41%;
22
+ --primary: 41 100% 50%;
23
+ --primary-foreground: 280 100% 1%;
24
+ --secondary: 240 50% 1%;
25
+ --secondary-foreground: 37 75% 41%;
26
+ --muted: 240 50% 1%;
27
+ --muted-foreground: 34 100% 30%;
28
+ --accent: 41 100% 50%;
29
+ --accent-foreground: 280 100% 1%;
30
+ --destructive: 0 100% 33%;
31
+ --destructive-foreground: 0 0% 100%;
32
+ --border: 37 75% 41%;
33
+ --input: 37 75% 41%;
34
+ --ring: 45 77% 55%;
35
+ --sidebar: 280 100% 1%;
36
+ --sidebar-foreground: 37 75% 41%;
37
+ --sidebar-primary: 41 100% 50%;
38
+ --sidebar-primary-foreground: 280 100% 1%;
39
+ --sidebar-accent: 240 50% 1%;
40
+ --sidebar-accent-foreground: 37 75% 41%;
41
+ --sidebar-border: 37 75% 41%;
42
+ --sidebar-ring: 45 77% 55%;
43
+ --chart-1: 41 100% 50%;
44
+ --chart-2: 34 100% 30%;
45
+ --chart-3: 45 77% 55%;
46
+ --chart-4: 41 100% 50%;
47
+ --chart-5: 37 75% 41%;
48
+ }
49
+
50
+ [data-theme="amber-mono"], .theme-amber-mono {
51
+ --background: 280 100% 1%;
52
+ --foreground: 41 100% 50%;
53
+ --card: 240 50% 1%;
54
+ --card-foreground: 41 100% 50%;
55
+ --popover: 240 50% 1%;
56
+ --popover-foreground: 41 100% 50%;
57
+ --primary: 41 100% 50%;
58
+ --primary-foreground: 280 100% 1%;
59
+ --secondary: 240 50% 1%;
60
+ --secondary-foreground: 41 100% 50%;
61
+ --muted: 240 50% 1%;
62
+ --muted-foreground: 37 75% 41%;
63
+ --accent: 41 100% 50%;
64
+ --accent-foreground: 280 100% 1%;
65
+ --destructive: 34 100% 30%;
66
+ --destructive-foreground: 0 0% 100%;
67
+ --border: 41 100% 50%;
68
+ --input: 41 100% 50%;
69
+ --ring: 27 96% 81%;
70
+ --sidebar: 280 100% 1%;
71
+ --sidebar-foreground: 41 100% 50%;
72
+ --sidebar-primary: 41 100% 50%;
73
+ --sidebar-primary-foreground: 280 100% 1%;
74
+ --sidebar-accent: 240 50% 1%;
75
+ --sidebar-accent-foreground: 41 100% 50%;
76
+ --sidebar-border: 41 100% 50%;
77
+ --sidebar-ring: 27 96% 81%;
78
+ --chart-1: 41 100% 50%;
79
+ --chart-2: 37 75% 41%;
80
+ --chart-3: 27 96% 81%;
81
+ --chart-4: 41 100% 50%;
82
+ --chart-5: 41 100% 50%;
83
+ }
84
+
85
+ [data-theme="cga-amber"], .theme-cga-amber {
86
+ --background: 36 100% 1%;
87
+ --foreground: 37 5% 66%;
88
+ --card: 48 5% 22%;
89
+ --card-foreground: 37 5% 66%;
90
+ --popover: 48 5% 22%;
91
+ --popover-foreground: 37 5% 66%;
92
+ --primary: 41 100% 50%;
93
+ --primary-foreground: 36 100% 1%;
94
+ --secondary: 48 5% 22%;
95
+ --secondary-foreground: 37 5% 66%;
96
+ --muted: 48 5% 22%;
97
+ --muted-foreground: 30 100% 33%;
98
+ --accent: 240 100% 33%;
99
+ --accent-foreground: 36 100% 1%;
100
+ --destructive: 0 100% 33%;
101
+ --destructive-foreground: 0 0% 100%;
102
+ --border: 37 5% 66%;
103
+ --input: 37 5% 66%;
104
+ --ring: 41 100% 50%;
105
+ --sidebar: 36 100% 1%;
106
+ --sidebar-foreground: 37 5% 66%;
107
+ --sidebar-primary: 41 100% 50%;
108
+ --sidebar-primary-foreground: 36 100% 1%;
109
+ --sidebar-accent: 48 5% 22%;
110
+ --sidebar-accent-foreground: 37 5% 66%;
111
+ --sidebar-border: 37 5% 66%;
112
+ --sidebar-ring: 41 100% 50%;
113
+ --chart-1: 41 100% 50%;
114
+ --chart-2: 30 100% 33%;
115
+ --chart-3: 41 100% 50%;
116
+ --chart-4: 240 100% 33%;
117
+ --chart-5: 37 5% 66%;
118
+ }
119
+
120
+ [data-theme="cga-mode4-p0"], .theme-cga-mode4-p0 {
121
+ --background: 36 100% 1%;
122
+ --foreground: 60 100% 50%;
123
+ --card: 36 100% 1%;
124
+ --card-foreground: 60 100% 50%;
125
+ --popover: 36 100% 1%;
126
+ --popover-foreground: 60 100% 50%;
127
+ --primary: 60 100% 50%;
128
+ --primary-foreground: 36 100% 1%;
129
+ --secondary: 36 100% 1%;
130
+ --secondary-foreground: 60 100% 50%;
131
+ --muted: 36 100% 1%;
132
+ --muted-foreground: 60 100% 50%;
133
+ --accent: 120 100% 50%;
134
+ --accent-foreground: 36 100% 1%;
135
+ --destructive: 0 100% 33%;
136
+ --destructive-foreground: 0 0% 100%;
137
+ --border: 120 100% 50%;
138
+ --input: 120 100% 50%;
139
+ --ring: 60 100% 50%;
140
+ --sidebar: 36 100% 1%;
141
+ --sidebar-foreground: 60 100% 50%;
142
+ --sidebar-primary: 60 100% 50%;
143
+ --sidebar-primary-foreground: 36 100% 1%;
144
+ --sidebar-accent: 36 100% 1%;
145
+ --sidebar-accent-foreground: 60 100% 50%;
146
+ --sidebar-border: 120 100% 50%;
147
+ --sidebar-ring: 60 100% 50%;
148
+ --chart-1: 60 100% 50%;
149
+ --chart-2: 60 100% 50%;
150
+ --chart-3: 60 100% 50%;
151
+ --chart-4: 120 100% 50%;
152
+ --chart-5: 60 100% 50%;
153
+ }
154
+
155
+ [data-theme="cga-mode4-p1"], .theme-cga-mode4-p1 {
156
+ --background: 36 100% 1%;
157
+ --foreground: 38 100% 98%;
158
+ --card: 36 100% 1%;
159
+ --card-foreground: 38 100% 98%;
160
+ --popover: 36 100% 1%;
161
+ --popover-foreground: 38 100% 98%;
162
+ --primary: 180 100% 50%;
163
+ --primary-foreground: 36 100% 1%;
164
+ --secondary: 36 100% 1%;
165
+ --secondary-foreground: 38 100% 98%;
166
+ --muted: 36 100% 1%;
167
+ --muted-foreground: 38 100% 98%;
168
+ --accent: 180 100% 50%;
169
+ --accent-foreground: 36 100% 1%;
170
+ --destructive: 0 100% 33%;
171
+ --destructive-foreground: 0 0% 100%;
172
+ --border: 180 100% 50%;
173
+ --input: 180 100% 50%;
174
+ --ring: 38 100% 98%;
175
+ --sidebar: 36 100% 1%;
176
+ --sidebar-foreground: 38 100% 98%;
177
+ --sidebar-primary: 180 100% 50%;
178
+ --sidebar-primary-foreground: 36 100% 1%;
179
+ --sidebar-accent: 36 100% 1%;
180
+ --sidebar-accent-foreground: 38 100% 98%;
181
+ --sidebar-border: 180 100% 50%;
182
+ --sidebar-ring: 38 100% 98%;
183
+ --chart-1: 180 100% 50%;
184
+ --chart-2: 38 100% 98%;
185
+ --chart-3: 38 100% 98%;
186
+ --chart-4: 180 100% 50%;
187
+ --chart-5: 38 100% 98%;
188
+ }
189
+
190
+ [data-theme="cga-mode5"], .theme-cga-mode5 {
191
+ --background: 36 100% 1%;
192
+ --foreground: 38 100% 98%;
193
+ --card: 36 100% 1%;
194
+ --card-foreground: 38 100% 98%;
195
+ --popover: 36 100% 1%;
196
+ --popover-foreground: 38 100% 98%;
197
+ --primary: 180 100% 50%;
198
+ --primary-foreground: 36 100% 1%;
199
+ --secondary: 36 100% 1%;
200
+ --secondary-foreground: 38 100% 98%;
201
+ --muted: 36 100% 1%;
202
+ --muted-foreground: 38 100% 98%;
203
+ --accent: 180 100% 50%;
204
+ --accent-foreground: 36 100% 1%;
205
+ --destructive: 0 100% 33%;
206
+ --destructive-foreground: 0 0% 100%;
207
+ --border: 180 100% 50%;
208
+ --input: 180 100% 50%;
209
+ --ring: 38 100% 98%;
210
+ --sidebar: 36 100% 1%;
211
+ --sidebar-foreground: 38 100% 98%;
212
+ --sidebar-primary: 180 100% 50%;
213
+ --sidebar-primary-foreground: 36 100% 1%;
214
+ --sidebar-accent: 36 100% 1%;
215
+ --sidebar-accent-foreground: 38 100% 98%;
216
+ --sidebar-border: 180 100% 50%;
217
+ --sidebar-ring: 38 100% 98%;
218
+ --chart-1: 180 100% 50%;
219
+ --chart-2: 38 100% 98%;
220
+ --chart-3: 38 100% 98%;
221
+ --chart-4: 180 100% 50%;
222
+ --chart-5: 38 100% 98%;
223
+ }
package/src/styles/theme.amber-mono.css CHANGED
@@ -32,20 +32,31 @@
32
32
  --color-cga-true-green: #00aa00; /** True CGA green — functional success / in-range. */
33
33
  --color-cga-true-red: #aa0000; /** True CGA red — functional error / out-of-range. */
34
34
  --color-cga-true-cyan: #00aaaa; /** True CGA cyan — functional info / sensor. */
35
+ --color-cga-true-white: #ffffff; /** True CGA white — theme-invariant light foreground for functional fills (white-on-red destructive, white-on-green success). #FFFFFF on cga-true.red #AA0000 is ~5.9:1 (passes WCAG AA). DMNC-922. */
36
+ --color-cga-true-red-bright: #ff5555; /** True CGA bright red — theme-invariant. The readable-as-TEXT-on-dark red (#FF5555 on the #020003 CRT bg passes AA, where the solid #AA0000 is only ~2.3:1). Use for error TEXT/icons on dark; use the solid `red` for fills. DMNC-922. */
35
37
  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
36
38
  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
39
+ --color-semantic-text-ai-gradient-from: #ff1a8c; /** AI-marker gradient start on amber/dark themes (Signalnoise pink). Static two-stop magenta gradient ('AI writer' style — no animation) clipped to the text in provenance.css; brand-locked; no Tailwind utility (DMNC-946). */
40
+ --color-semantic-text-ai-gradient-to: #ff55ff; /** AI-marker gradient end on amber/dark themes (bright magenta). Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
41
+ --color-semantic-text-ai-gradient-from-light: #c0228a; /** AI-marker gradient start under light themes ([data-theme=light]/.light) — deep magenta, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
42
+ --color-semantic-text-ai-gradient-to-light: #7a3cc0; /** AI-marker gradient end under light themes — violet, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
37
43
  --color-semantic-text-primary: var(--color-cga-amber);
38
44
  --color-semantic-text-secondary: var(--color-cga-black);
39
45
  --color-semantic-text-accent: var(--color-cga-yellow);
40
46
  --color-semantic-text-disabled: var(--color-cga-amber-dim);
41
47
  --color-semantic-text-muted: var(--color-cga-light-gray);
48
+ --color-semantic-text-success: var(--color-cga-amber-bright); /** DMNC-1059: amber-mono default — success text is amber (mirrors status.success), not honest green. Honest green resolves only under colour themes. */
49
+ --color-semantic-text-error: var(--color-cga-amber); /** DMNC-1059: amber-mono default — error text is amber (mirrors status.error), not honest red. */
42
50
  --color-semantic-background-primary: var(--color-cga-black);
43
51
  --color-semantic-background-secondary: var(--color-cga-dark-gray);
44
52
  --color-semantic-background-accent: var(--color-cga-amber);
53
+ --color-semantic-background-error: var(--color-cga-amber-dim); /** DMNC-1059: amber-mono is the DEFAULT theme — functional roles must NOT leak the honest :root red/green. Destructive fill uses dark amberDim so the white foreground keeps contrast (honest #AA0000 fill only appears under colour themes, e.g. cga-amber / the Modern theme DMNC-1058). */
45
54
  --color-semantic-border-default: var(--color-cga-amber);
46
55
  --color-semantic-border-focus: var(--color-cga-amber-bright);
47
56
  --color-semantic-border-hover: var(--color-cga-yellow);
48
57
  --color-semantic-border-disabled: var(--color-cga-amber-dim);
58
+ --color-semantic-border-success: var(--color-cga-amber-bright); /** DMNC-1059: amber-mono default — success border is amber, not honest green. */
59
+ --color-semantic-border-error: var(--color-cga-amber); /** DMNC-1059: amber-mono default — error/destructive border is amber, not honest red. */
49
60
  --color-semantic-link-default: var(--color-cga-amber);
50
61
  --color-semantic-link-hover: var(--color-cga-amber-bright);
51
62
  --color-semantic-link-active: var(--color-cga-amber-dim);
@@ -53,9 +64,10 @@
53
64
  --color-semantic-status-success: var(--color-cga-amber-bright);
54
65
  --color-semantic-status-warning: var(--color-cga-yellow);
55
66
  --color-semantic-status-error: var(--color-cga-amber);
56
- --color-semantic-status-info: var(--color-cga-light-gray);
67
+ --color-semantic-status-info: var(--color-cga-light-gray); /** DMNC-1059: info stays amber-family under amber-mono — in this palette `lightGray` resolves to the warm tan-amber #B87C1A (not a true gray; gray only appears under colour themes), which is readable on the dark CRT bg (~5.9:1, passes AA) and distinct from success(amberBright)/warning(yellow)/error(amber). Honest cyan under colour themes. */
57
68
  --color-semantic-alert-info: var(--color-cga-blue);
58
69
  --color-semantic-alert-success: var(--color-cga-green);
59
70
  --color-semantic-alert-warning: var(--color-cga-cyan);
60
71
  --color-semantic-alert-error: var(--color-cga-red);
72
+ --color-semantic-glow-error: var(--color-cga-amber-glow); /** DMNC-1059: destructive hover-glow is amber under the default amber-mono theme (not red). */
61
73
  }
package/src/styles/theme.cga-amber.css CHANGED
@@ -32,8 +32,14 @@
32
32
  --color-cga-true-green: #00aa00; /** True CGA green — functional success / in-range. */
33
33
  --color-cga-true-red: #aa0000; /** True CGA red — functional error / out-of-range. */
34
34
  --color-cga-true-cyan: #00aaaa; /** True CGA cyan — functional info / sensor. */
35
+ --color-cga-true-white: #ffffff; /** True CGA white — theme-invariant light foreground for functional fills (white-on-red destructive, white-on-green success). #FFFFFF on cga-true.red #AA0000 is ~5.9:1 (passes WCAG AA). DMNC-922. */
36
+ --color-cga-true-red-bright: #ff5555; /** True CGA bright red — theme-invariant. The readable-as-TEXT-on-dark red (#FF5555 on the #020003 CRT bg passes AA, where the solid #AA0000 is only ~2.3:1). Use for error TEXT/icons on dark; use the solid `red` for fills. DMNC-922. */
35
37
  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
36
38
  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
39
+ --color-semantic-text-ai-gradient-from: #ff1a8c; /** AI-marker gradient start on amber/dark themes (Signalnoise pink). Static two-stop magenta gradient ('AI writer' style — no animation) clipped to the text in provenance.css; brand-locked; no Tailwind utility (DMNC-946). */
40
+ --color-semantic-text-ai-gradient-to: #ff55ff; /** AI-marker gradient end on amber/dark themes (bright magenta). Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
41
+ --color-semantic-text-ai-gradient-from-light: #c0228a; /** AI-marker gradient start under light themes ([data-theme=light]/.light) — deep magenta, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
42
+ --color-semantic-text-ai-gradient-to-light: #7a3cc0; /** AI-marker gradient end under light themes — violet, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
37
43
  --color-semantic-alert-info: #0a1828;
38
44
  --color-semantic-alert-success: #122010;
39
45
  --color-semantic-alert-warning: #352800;
package/src/styles/theme.cga-mode4-p0.css CHANGED
@@ -32,8 +32,14 @@
32
32
  --color-cga-true-green: #00aa00; /** True CGA green — functional success / in-range. */
33
33
  --color-cga-true-red: #aa0000; /** True CGA red — functional error / out-of-range. */
34
34
  --color-cga-true-cyan: #00aaaa; /** True CGA cyan — functional info / sensor. */
35
+ --color-cga-true-white: #ffffff; /** True CGA white — theme-invariant light foreground for functional fills (white-on-red destructive, white-on-green success). #FFFFFF on cga-true.red #AA0000 is ~5.9:1 (passes WCAG AA). DMNC-922. */
36
+ --color-cga-true-red-bright: #ff5555; /** True CGA bright red — theme-invariant. The readable-as-TEXT-on-dark red (#FF5555 on the #020003 CRT bg passes AA, where the solid #AA0000 is only ~2.3:1). Use for error TEXT/icons on dark; use the solid `red` for fills. DMNC-922. */
35
37
  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
36
38
  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
39
+ --color-semantic-text-ai-gradient-from: #ff1a8c; /** AI-marker gradient start on amber/dark themes (Signalnoise pink). Static two-stop magenta gradient ('AI writer' style — no animation) clipped to the text in provenance.css; brand-locked; no Tailwind utility (DMNC-946). */
40
+ --color-semantic-text-ai-gradient-to: #ff55ff; /** AI-marker gradient end on amber/dark themes (bright magenta). Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
41
+ --color-semantic-text-ai-gradient-from-light: #c0228a; /** AI-marker gradient start under light themes ([data-theme=light]/.light) — deep magenta, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
42
+ --color-semantic-text-ai-gradient-to-light: #7a3cc0; /** AI-marker gradient end under light themes — violet, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
37
43
  --color-semantic-text-primary: #ffff00;
38
44
  --color-semantic-text-secondary: #050300;
39
45
  --color-semantic-text-accent: #00ff00;
package/src/styles/theme.cga-mode4-p1.css CHANGED
@@ -32,8 +32,14 @@
32
32
  --color-cga-true-green: #00aa00; /** True CGA green — functional success / in-range. */
33
33
  --color-cga-true-red: #aa0000; /** True CGA red — functional error / out-of-range. */
34
34
  --color-cga-true-cyan: #00aaaa; /** True CGA cyan — functional info / sensor. */
35
+ --color-cga-true-white: #ffffff; /** True CGA white — theme-invariant light foreground for functional fills (white-on-red destructive, white-on-green success). #FFFFFF on cga-true.red #AA0000 is ~5.9:1 (passes WCAG AA). DMNC-922. */
36
+ --color-cga-true-red-bright: #ff5555; /** True CGA bright red — theme-invariant. The readable-as-TEXT-on-dark red (#FF5555 on the #020003 CRT bg passes AA, where the solid #AA0000 is only ~2.3:1). Use for error TEXT/icons on dark; use the solid `red` for fills. DMNC-922. */
35
37
  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
36
38
  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
39
+ --color-semantic-text-ai-gradient-from: #ff1a8c; /** AI-marker gradient start on amber/dark themes (Signalnoise pink). Static two-stop magenta gradient ('AI writer' style — no animation) clipped to the text in provenance.css; brand-locked; no Tailwind utility (DMNC-946). */
40
+ --color-semantic-text-ai-gradient-to: #ff55ff; /** AI-marker gradient end on amber/dark themes (bright magenta). Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
41
+ --color-semantic-text-ai-gradient-from-light: #c0228a; /** AI-marker gradient start under light themes ([data-theme=light]/.light) — deep magenta, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
42
+ --color-semantic-text-ai-gradient-to-light: #7a3cc0; /** AI-marker gradient end under light themes — violet, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
37
43
  --color-semantic-text-primary: #fffcf7;
38
44
  --color-semantic-text-secondary: #050300;
39
45
  --color-semantic-text-accent: #00ffff;
package/src/styles/theme.cga-mode5.css CHANGED
@@ -32,8 +32,14 @@
32
32
  --color-cga-true-green: #00aa00; /** True CGA green — functional success / in-range. */
33
33
  --color-cga-true-red: #aa0000; /** True CGA red — functional error / out-of-range. */
34
34
  --color-cga-true-cyan: #00aaaa; /** True CGA cyan — functional info / sensor. */
35
+ --color-cga-true-white: #ffffff; /** True CGA white — theme-invariant light foreground for functional fills (white-on-red destructive, white-on-green success). #FFFFFF on cga-true.red #AA0000 is ~5.9:1 (passes WCAG AA). DMNC-922. */
36
+ --color-cga-true-red-bright: #ff5555; /** True CGA bright red — theme-invariant. The readable-as-TEXT-on-dark red (#FF5555 on the #020003 CRT bg passes AA, where the solid #AA0000 is only ~2.3:1). Use for error TEXT/icons on dark; use the solid `red` for fills. DMNC-922. */
35
37
  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
36
38
  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
39
+ --color-semantic-text-ai-gradient-from: #ff1a8c; /** AI-marker gradient start on amber/dark themes (Signalnoise pink). Static two-stop magenta gradient ('AI writer' style — no animation) clipped to the text in provenance.css; brand-locked; no Tailwind utility (DMNC-946). */
40
+ --color-semantic-text-ai-gradient-to: #ff55ff; /** AI-marker gradient end on amber/dark themes (bright magenta). Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
41
+ --color-semantic-text-ai-gradient-from-light: #c0228a; /** AI-marker gradient start under light themes ([data-theme=light]/.light) — deep magenta, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
42
+ --color-semantic-text-ai-gradient-to-light: #7a3cc0; /** AI-marker gradient end under light themes — violet, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
37
43
  --color-semantic-text-primary: #fffcf7;
38
44
  --color-semantic-text-secondary: #050300;
39
45
  --color-semantic-text-accent: #00ffff;
package/src/styles/tokens.css CHANGED
@@ -32,8 +32,14 @@
32
32
  --color-cga-true-green: #00aa00; /** True CGA green — functional success / in-range. */
33
33
  --color-cga-true-red: #aa0000; /** True CGA red — functional error / out-of-range. */
34
34
  --color-cga-true-cyan: #00aaaa; /** True CGA cyan — functional info / sensor. */
35
+ --color-cga-true-white: #ffffff; /** True CGA white — theme-invariant light foreground for functional fills (white-on-red destructive, white-on-green success). #FFFFFF on cga-true.red #AA0000 is ~5.9:1 (passes WCAG AA). DMNC-922. */
36
+ --color-cga-true-red-bright: #ff5555; /** True CGA bright red — theme-invariant. The readable-as-TEXT-on-dark red (#FF5555 on the #020003 CRT bg passes AA, where the solid #AA0000 is only ~2.3:1). Use for error TEXT/icons on dark; use the solid `red` for fills. DMNC-922. */
35
37
  --color-semantic-text-ai-draft: #ff1a8c; /** AI-drafted prose, not yet revised by human — Signalnoise hot pink. Brand-locked hex: same value across all themes so the AI marker is unmissable regardless of palette. Lives in base (T1) so all themes inherit it; the rest of color.semantic.* lives in web.tokens.json (T2). */
36
38
  --color-semantic-text-ai-draft-glow: rgba(255, 26, 140, 0.5); /** Phosphor halo around AI-drafted prose. 50% rgba of the aiDraft hex; brand-locked alongside it. Used in text-shadow only; no Tailwind utility. */
39
+ --color-semantic-text-ai-gradient-from: #ff1a8c; /** AI-marker gradient start on amber/dark themes (Signalnoise pink). Static two-stop magenta gradient ('AI writer' style — no animation) clipped to the text in provenance.css; brand-locked; no Tailwind utility (DMNC-946). */
40
+ --color-semantic-text-ai-gradient-to: #ff55ff; /** AI-marker gradient end on amber/dark themes (bright magenta). Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
41
+ --color-semantic-text-ai-gradient-from-light: #c0228a; /** AI-marker gradient start under light themes ([data-theme=light]/.light) — deep magenta, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
42
+ --color-semantic-text-ai-gradient-to-light: #7a3cc0; /** AI-marker gradient end under light themes — violet, contrast on white. Static, brand-locked. Gradient-only; no Tailwind utility (DMNC-946). */
37
43
  --color-semantic-alert-info: #1f2228; /** Warm dark blue for info alerts */
38
44
  --color-semantic-alert-success: #122010; /** Warm dark green for success alerts */
39
45
  --color-semantic-alert-warning: #352800; /** Dark amber for warning alerts */
@@ -188,13 +194,33 @@
188
194
  --color-semantic-text-accent: var(--color-cga-yellow);
189
195
  --color-semantic-text-disabled: var(--color-cga-dark-gray);
190
196
  --color-semantic-text-muted: var(--color-cga-amber-dim); /** Muted supplementary text — timestamps, counts, footnotes. T10 handoff: dedicated amber-dim hex (in-family with primary), not brown; no opacity coupling. */
197
+ --color-semantic-text-tertiary: var(--color-cga-amber-dim); /** UTI-tier role (DMNC-922). Third-emphasis text; same value as `muted` for now — `muted` is retained as its DOS-semantic alias. New components should prefer the tier name. */
198
+ --color-semantic-text-brand: var(--color-cga-amber); /** UTI-tier role (DMNC-922). The honest phosphor-amber text role — the value ~30 components currently paint with as raw `--color-cga-amber`. The DMNC-1059 sweep migrates them here so amber text re-themes. */
199
+ --color-semantic-text-brand-bright: var(--color-cga-amber-bright); /** DMNC-1059: bright-amber brand emphasis text — hover/active peaks (e.g. Checkbox hover glyph, link-button hover, Button :active label). Brand-locked amber across themes. NOTE: there is intentionally no `text.brandDim` — dim amber TEXT uses `text.tertiary` (also amberDim); only `background`/`border` carry a `brandDim`. */
200
+ --color-semantic-text-on-brand: var(--color-cga-black); /** UTI-tier role (DMNC-922). Text/icon sitting on a brand-amber fill (e.g. primary button label). */
201
+ --color-semantic-text-error: var(--color-cga-true-red-bright); /** UTI-tier functional role (DMNC-922). Bright honest red (#FF5555) — readable as error TEXT on the dark CRT background (the solid `cga-true.red` #AA0000 is only ~2.3:1 as text). For red FILLS use `background.error`/`border.error` (solid #AA0000). */
202
+ --color-semantic-text-warning: var(--color-cga-amber); /** UTI-tier functional role (DMNC-922). Warning = amber in the DOS palette (amber IS the caution hue); intentionally not a separate yellow. */
203
+ --color-semantic-text-success: var(--color-cga-true-green); /** UTI-tier functional role (DMNC-922). Honest CGA green (#00AA00), theme-invariant. */
204
+ --color-semantic-text-info: var(--color-cga-true-cyan); /** UTI-tier functional role (DMNC-922). Honest CGA cyan (#00AAAA), theme-invariant. */
205
+ --color-semantic-text-white: var(--color-cga-true-white); /** UTI-tier role (DMNC-922). Theme-invariant light foreground for functional/dark fills (e.g. white-on-red destructive button text). Not for body text on the dark CRT background. */
191
206
  --color-semantic-background-primary: var(--color-cga-black);
192
207
  --color-semantic-background-secondary: var(--color-cga-dark-gray);
193
208
  --color-semantic-background-accent: var(--color-cga-amber);
209
+ --color-semantic-background-tertiary: var(--color-cga-dark-gray); /** UTI-tier role (DMNC-922). Third surface level; same value as `secondary` for now in the dark DOS theme — diverges in the light theme. */
210
+ --color-semantic-background-brand: var(--color-cga-amber); /** UTI-tier role (DMNC-922). Amber fill surface (e.g. primary button background). Pair with `text.onBrand`. */
211
+ --color-semantic-background-brand-bright: var(--color-cga-amber-bright); /** DMNC-1059: bright-amber brand emphasis surface — hover/active/selected peaks (e.g. primary button :active fill, active TimelineNode marker, InlineLink :active). Brand-locked amber across themes. */
212
+ --color-semantic-background-brand-dim: var(--color-cga-amber-dim); /** DMNC-1059: dim-amber brand surface — low-emphasis fills/headers (e.g. Card header, timeline axis, default TimelineNode marker). Brand-locked amber across themes. */
213
+ --color-semantic-background-error: var(--color-cga-true-red); /** UTI-tier functional role (DMNC-922). Honest red solid fill for destructive controls (e.g. destructive button background). Pair with a light foreground. */
214
+ --color-semantic-background-success: var(--color-cga-true-green); /** UTI-tier functional role (DMNC-922). Honest green solid fill. */
194
215
  --color-semantic-border-default: var(--color-cga-light-gray);
195
216
  --color-semantic-border-focus: var(--color-cga-yellow);
196
217
  --color-semantic-border-hover: var(--color-cga-white);
197
218
  --color-semantic-border-disabled: var(--color-cga-dark-gray);
219
+ --color-semantic-border-brand: var(--color-cga-amber); /** UTI-tier role (DMNC-922). Amber border (active/selected emphasis). */
220
+ --color-semantic-border-brand-bright: var(--color-cga-amber-bright); /** DMNC-1059: bright-amber brand emphasis border — hover/active/selected peaks (e.g. primary button :active, active TimelineNode marker). Brand-locked amber across themes. */
221
+ --color-semantic-border-brand-dim: var(--color-cga-amber-dim); /** DMNC-1059: dim-amber brand border — low-emphasis markers (e.g. default TimelineNode marker). Brand-locked amber across themes. */
222
+ --color-semantic-border-error: var(--color-cga-true-red); /** UTI-tier functional role (DMNC-922). Honest red border for destructive/error controls. */
223
+ --color-semantic-border-success: var(--color-cga-true-green); /** UTI-tier functional role (DMNC-922). Honest green border. */
198
224
  --color-semantic-link-default: var(--color-cga-bright-cyan);
199
225
  --color-semantic-link-hover: var(--color-cga-white);
200
226
  --color-semantic-link-active: var(--color-cga-cyan);
@@ -203,5 +229,6 @@
203
229
  --color-semantic-status-warning: var(--color-cga-yellow);
204
230
  --color-semantic-status-error: var(--color-cga-bright-red);
205
231
  --color-semantic-status-info: var(--color-cga-bright-cyan);
232
+ --color-semantic-glow-error: var(--color-cga-red-glow); /** DMNC-1059: destructive/error hover-glow. Honest red bloom under colour themes; amber under the default amber-mono theme. */
206
233
  --focus-ring-color: var(--color-cga-yellow); /** Focus ring color (accent) */
207
234
  }