v0.2 Phase 3: additive semantic tokens + KI-05 resolution
Additive token grammar (no renames, no replacements):
- --color-caution (dark #e8be4a, light #a08a1f) becomes the canonical
name for tuned-amber notice surfaces in the new wrapper grammar
- --color-warning is kept as a CSS var() alias of --color-caution so
every existing text-warning / bg-warning call site stays valid
- --color-info (dark #7a9ec0, light #3d6a8a) is the soft blue-grey
signal for the new LumotiaNotice info variant
- --color-accent-environment (dark #8fae9a, light #4a7058) is an
optional sage/moss support token for empty-state illustrations
and environment-neutral status dots. NOT a brand swap — amber/
copper --color-accent stays primary
Mirrored in src/design-system/colors_and_type.css (the buildless
preview pages bypass Tailwind so the duplication is intentional).
KI-05 resolved in the same commit, per the plan:
- src/lib/types/app.ts: drop `theme` from SettingsState
- src/lib/stores/page.svelte.ts: drop `theme: "Dark"` from defaults
- src/routes/+layout.svelte: drop the migration $effect, add a
one-shot migrateLegacyTheme() on mount that copies any historical
lumotia_settings.theme into preferences.theme and strips the
legacy field. Idempotent — subsequent loads short-circuit
- src/routes/{float,viewer,preview}/+layout@.svelte: drop the same
$effect; secondary windows inherit theme via PREFERENCES_CHANGED_EVENT
- src/lib/pages/SettingsPage.svelte: both SegmentedButton bindings
(quick-settings row at :1272, Appearance group at :2606) now use
Svelte 5 function bindings ({ get, set }) backed by prefs.theme
and updatePreferences. No SegmentedButton API change
Phase 3 per-page gate green: npm run check (0/0/4129 files),
npm test (13/13), npm run test:e2e (16/16). No regressions in
the Phase 1 smoke baseline.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
20
src/app.css
20
src/app.css
@@ -100,7 +100,18 @@
|
||||
(#1b1a17) verified mentally for each. */
|
||||
--color-success: #5fc28a;
|
||||
--color-danger: #e85f5f;
|
||||
--color-warning: #e8be4a;
|
||||
/* v0.2 coherence-pass aliases. `caution` is the canonical name in the
|
||||
new wrapper grammar; `warning` is kept as a CSS var() alias so
|
||||
existing `text-warning` / `bg-warning` call sites resolve to the
|
||||
same value without a touch. */
|
||||
--color-caution: #e8be4a;
|
||||
--color-warning: var(--color-caution);
|
||||
--color-info: #7a9ec0;
|
||||
|
||||
/* v0.2: optional support token for sage/moss surfaces — empty-state
|
||||
illustrations, environmental neutral status dots. NOT a brand
|
||||
swap; --color-accent (amber/copper) stays primary. */
|
||||
--color-accent-environment: #8fae9a;
|
||||
|
||||
/* Overlays — used by modal scrims. Derived from --color-bg #0f0e0c at
|
||||
0.7 alpha so the dim sits on the brand neutral, not pure black. */
|
||||
@@ -190,7 +201,12 @@
|
||||
AA on cream backgrounds. */
|
||||
--color-success: #1f7344;
|
||||
--color-danger: #b32626;
|
||||
--color-warning: #a08a1f;
|
||||
/* v0.2 coherence-pass: --color-warning inherits @theme's
|
||||
`var(--color-caution)`, so light theme only needs to redefine the
|
||||
source token. */
|
||||
--color-caution: #a08a1f;
|
||||
--color-info: #3d6a8a;
|
||||
--color-accent-environment: #4a7058;
|
||||
|
||||
--color-sidebar: #f5f2ed;
|
||||
--color-nav-active: #eae6e0;
|
||||
|
||||
Reference in New Issue
Block a user