+40
-14
@@ -17,22 +17,43 @@
|
||||
|
||||
:root {
|
||||
/* Surface & structure */
|
||||
--sp-bg: var(--sp-theme-bg, var(--color-bg, hsl(220, 15%, 12%)));
|
||||
--sp-bg: var(--sp-theme-bg, var(--color-bg, hsl(220, 15%, 12%)));
|
||||
--sp-surface: var(--sp-theme-surface, var(--color-bg-option, #141618));
|
||||
--sp-surface-raised: var(--sp-theme-surface-raised, #1c1f22);
|
||||
--sp-surface-elevated: var(--sp-theme-surface-elevated, var(--sp-surface-raised, #1c1f22));
|
||||
--sp-surface-elevated: var(--sp-theme-surface-elevated, var(--sp-surface-raised, #1c1f22));
|
||||
--sp-surface-subtle: var(--sp-theme-surface-subtle, rgba(255, 255, 255, 0.05));
|
||||
--sp-surface-hover: var(--sp-theme-surface-hover, rgba(255, 255, 255, 0.08));
|
||||
--sp-border: var(--sp-theme-border, var(--color-border, #282c30));
|
||||
--sp-border-subtle: var(--sp-theme-border-subtle, rgba(255, 255, 255, 0.07));
|
||||
|
||||
/* Typography */
|
||||
--sp-text-primary: var(--sp-theme-text-primary, var(--color-text-primary, #dde2e8));
|
||||
--sp-text-secondary: var(--sp-theme-text-secondary,var(--color-text-secondary, #7a8390));
|
||||
--sp-text-muted: var(--sp-theme-text-muted, #555d66);
|
||||
--sp-font-size-sm: 11px;
|
||||
|
||||
/* Accent & interaction */
|
||||
--sp-accent: var(--sp-theme-accent, var(--color-warm-2, #4a9e6b));
|
||||
--sp-accent-hover: var(--sp-theme-accent-hover, #3d8f5e);
|
||||
--sp-accent-active: var(--sp-theme-accent-active, #2d7a4f);
|
||||
--sp-accent-text: #fff;
|
||||
--sp-surface-interactive: var(--sp-theme-interactive, #242830);
|
||||
--sp-control-bg: var(--sp-theme-control, #1a1d20);
|
||||
|
||||
/* Semantic colours */
|
||||
--sp-color-red: hsl(0, 65%, 55%);
|
||||
--sp-color-red-dark: hsl(0, 65%, 42%);
|
||||
--sp-color-red-rgb: 204, 77, 77;
|
||||
--sp-color-red-subtle: hsla(0, 65%, 55%, 0.12);
|
||||
--sp-color-green: hsl(140, 55%, 50%);
|
||||
--sp-color-green-subtle: hsla(140, 55%, 50%, 0.12);
|
||||
--sp-color-yellow: hsl(48, 88%, 55%);
|
||||
--sp-color-yellow-subtle: hsla(48, 88%, 55%, 0.12);
|
||||
|
||||
/* Shape & motion */
|
||||
--sp-radius-sm: 3px;
|
||||
--sp-radius-md: 4px;
|
||||
|
||||
/* Focus ring — module-wide keyboard navigation anchor */
|
||||
--sp-focus: var(--sp-theme-focus, var(--color-focus-outline, #63c287));
|
||||
--sp-focus-ring: 0 0 0 2px var(--sp-focus);
|
||||
@@ -47,17 +68,22 @@
|
||||
/* Theme overrides — dark theme defaults */
|
||||
.scrying-pool,
|
||||
:root[data-color-scheme="dark"] {
|
||||
--sp-theme-bg: hsl(220, 15%, 12%);
|
||||
--sp-theme-surface: #141618;
|
||||
--sp-theme-surface-raised: #1c1f22;
|
||||
--sp-theme-bg: hsl(220, 15%, 12%);
|
||||
--sp-theme-surface: #141618;
|
||||
--sp-theme-surface-raised: #1c1f22;
|
||||
--sp-theme-surface-elevated: #1c1f22;
|
||||
--sp-theme-border: #282c30;
|
||||
--sp-theme-text-primary: #dde2e8;
|
||||
--sp-theme-text-secondary: #7a8390;
|
||||
--sp-theme-text-muted: #555d66;
|
||||
--sp-theme-accent: #4a9e6b;
|
||||
--sp-theme-interactive: #242830;
|
||||
--sp-theme-control: #1a1d20;
|
||||
--sp-theme-focus: #63c287;
|
||||
--sp-theme-urgency: #c8982a;
|
||||
--sp-theme-surface-subtle: rgba(255, 255, 255, 0.05);
|
||||
--sp-theme-surface-hover: rgba(255, 255, 255, 0.08);
|
||||
--sp-theme-border: #282c30;
|
||||
--sp-theme-border-subtle: rgba(255, 255, 255, 0.07);
|
||||
--sp-theme-text-primary: #dde2e8;
|
||||
--sp-theme-text-secondary: #7a8390;
|
||||
--sp-theme-text-muted: #555d66;
|
||||
--sp-theme-accent: #4a9e6b;
|
||||
--sp-theme-accent-hover: #3d8f5e;
|
||||
--sp-theme-accent-active: #2d7a4f;
|
||||
--sp-theme-interactive: #242830;
|
||||
--sp-theme-control: #1a1d20;
|
||||
--sp-theme-focus: #63c287;
|
||||
--sp-theme-urgency: #c8982a;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user