Added initial token/theme styles and theme service.

2025-12-02 22:39:09 -05:00
parent 6790a9bfff
commit 30162b6a27
5 changed files with 153 additions and 0 deletions
--- a/JSMR.UI.Blazor/wwwroot/css/tokens.css
+++ b/JSMR.UI.Blazor/wwwroot/css/tokens.css
@@ -0,0 +1,33 @@
+:root {
+    /* Surfaces & elevation */
+    --sys-surface: #0f1115; /* app/page background */
+    --sys-surface-1: #1b1f28; /* card top */
+    --sys-surface-2: #161a22; /* card bottom */
+    --sys-elevation-1: 0 1px 4px rgba(0,0,0,.5);
+    /* Text */
+    --sys-on-surface: #c9d3dd; /* body text */
+    --sys-on-surface-strong: #e4edf6; /* headings/highlights */
+    /* Brand roles */
+    --sys-color-primary: #3a5a7d;
+    --sys-color-secondary: #3aa3b8;
+    --sys-color-success: #27ae60;
+    --sys-color-warning: #f1c40f;
+    --sys-color-danger: #e74c3c;
+    /* Borders / outlines */
+    --sys-outline: #3a5a7d;
+    /* Inputs */
+    --sys-input-bg: #121824;
+    --sys-input-text: var(--sys-on-surface);
+    --sys-input-placeholder: #9fb0bf;
+    --sys-input-border: #3a5a7d;
+    --sys-input-focus-ring: color-mix(in oklab, var(--sys-color-primary), white 25%);
+    /* Tags / chips */
+    --sys-chip-bg: #415664;
+    --sys-chip-text: #d2dede;
+    --sys-chip-bg-hover: #596f7e;
+    --sys-chip-radius: .8rem;
+    --sys-chip-padding: .5rem 1rem;
+    --sys-chip-gap: .5rem;
+    /* Overlays / imagery */
+    --sys-image-overlay: rgba(0,0,0,.9);
+}