Kazuma
92 lines
3.1 KiB
SCSS
92 lines
3.1 KiB
SCSS
// ── Design Tokens ────────────────────────────────────────────────────────
|
|
// SCSS maps generate CSS custom properties. Organised by category so new
|
|
// tokens are easy to locate and add. All runtime theming uses var(--name).
|
|
|
|
// Background layers — darkest to lightest
|
|
$bg: (
|
|
base: #0f1117, // body, nav background
|
|
surface: #0d1117, // section cards, sidebar
|
|
elevated: #111827, // section headers, table headers
|
|
card: #1e293b, // input bg, tags, summary cards, ctx cards
|
|
card-hover: #131c2b, // table row hover
|
|
row-alt: #1a2233, // portfolio table row border
|
|
);
|
|
|
|
// Borders
|
|
$borders: (
|
|
border: #1e293b, // primary — cards, sections, inputs
|
|
border-subtle: #161f2e, // table row separators
|
|
border-input: #2d3f55, // form input borders
|
|
);
|
|
|
|
// Text — brightest to most muted
|
|
$text: (
|
|
text-primary: #f1f5f9, // headings, tickers, card values
|
|
text-secondary: #e2e8f0, // body text, input values
|
|
text-muted: #94a3b8, // secondary text, reasons
|
|
text-dim: #64748b, // labels, table headers, muted values
|
|
text-dimmer: #475569, // very muted — timestamps, hints
|
|
text-faint: #334155, // count badge text, column headers
|
|
);
|
|
|
|
// Blue accent ('blue' is a CSS color name — must be quoted)
|
|
$blues: (
|
|
'blue': #3b82f6, // focus ring, progress bar, bar-fill
|
|
'blue-dark': #2563eb, // primary button bg
|
|
'blue-darker': #1d4ed8, // primary button hover
|
|
'blue-muted': #60a5fa, // active tab text, edit icon hover
|
|
'blue-surface': #1e3a5f, // active tab bg, mode tab bg
|
|
'blue-deep': #0f2240, // analyze button hover bg
|
|
'blue-badge': #0d1e30, // sidebar header background
|
|
);
|
|
|
|
// Signal / semantic colors (green/yellow/red/orange are CSS color names — must be quoted)
|
|
$signals: (
|
|
'green': #4ade80,
|
|
'green-bg': #14532d33,
|
|
'yellow': #facc15,
|
|
'yellow-bg': #71350033,
|
|
'red': #f87171,
|
|
'red-bg': #450a0a33,
|
|
'red-deep': #450a0a55, // error banner bg
|
|
'red-border': #7f1d1d, // error banner border
|
|
'orange': #fb923c,
|
|
);
|
|
|
|
// ── Emit all maps as CSS custom properties ───────────────────────────────
|
|
:root {
|
|
@each $name, $val in $bg { --bg-#{$name}: #{$val}; }
|
|
@each $name, $val in $borders { --#{$name}: #{$val}; }
|
|
@each $name, $val in $text { --#{$name}: #{$val}; }
|
|
@each $name, $val in $blues { --#{$name}: #{$val}; }
|
|
@each $name, $val in $signals { --#{$name}: #{$val}; }
|
|
|
|
// Typography
|
|
--fs-2xs: 9px;
|
|
--fs-xs: 10px;
|
|
--fs-sm: 11px;
|
|
--fs-md: 13px;
|
|
--fs-lg: 15px;
|
|
--fs-xl: 18px;
|
|
--fs-2xl: 20px;
|
|
|
|
// Border radius
|
|
--radius-xs: 4px;
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 10px;
|
|
--radius-pill: 20px;
|
|
|
|
// Spacing
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 12px;
|
|
--space-lg: 14px;
|
|
--space-xl: 18px;
|
|
--space-2xl: 24px;
|
|
--space-3xl: 32px;
|
|
|
|
// Transitions
|
|
--transition: 0.15s;
|
|
}
|