/* ========================================================================== PowerShell.today — Design Tokens assets/css/tokens.css Usage: @import 'tokens.css' in your main stylesheet, or link it first in . Alpine.js toggles to override OS preference. Cascade order (lower wins): 1. :root — light mode defaults 2. @media dark — dark mode OS preference 3. [data-theme=*] — explicit Alpine.js override (highest specificity) ========================================================================== */ /* ========================================================================== LIGHT MODE — default :root ISE-inspired: pure white canvas, light gray surface, true black text. ========================================================================== */ :root { /* ── Colors: Backgrounds ────────────────────────────────────────────────── */ --color-bg-page: #FFFFFF; /* page canvas — ISE pure white */ --color-bg-surface: #F3F3F3; /* cards, modals — ISE light gray */ --color-bg-surface-alt: #E8E8E8; /* hover states, subtle fills, table rows */ /* ── Colors: Borders ────────────────────────────────────────────────────── */ --color-border: #D0D7DE; /* default dividers, inputs */ --color-border-strong: #8C959F; /* emphasis, focused inputs */ /* ── Colors: Text ───────────────────────────────────────────────────────── */ --color-text-primary: #000000; /* headings, body copy — ISE true black */ --color-text-muted: #57606A; /* timestamps, meta, captions */ --color-text-hint: #8C959F; /* placeholders, disabled labels */ /* ── Colors: Accent ──────────────────────────────────────────────────────── */ --color-accent: #0078D4; /* primary CTA, active states */ --color-accent-cyan: #0068B8; /* deeper cyan for contrast on white */ --color-accent-hover: #0086EF; /* hover on accent elements */ /* ── Colors: Links ──────────────────────────────────────────────────────── */ --color-link: #0078D4; /* body links on light bg */ --color-link-hover: #0086EF; /* ── Colors: Inline Code ────────────────────────────────────────────────── */ --color-code-bg: #F3F3F3; /* inline pill background */ --color-code-text: #000000; /* ── Syntax tokens — light (ISE) defaults ──────────────────────────────── */ --sh-base: #000000; /* default token text */ --sh-comment: #006400; /* dark green */ --sh-keyword: #00008B; /* dark blue */ --sh-string: #8B0000; /* dark red / maroon */ --sh-param: #000080; /* navy */ --sh-var: #FF4500; /* orange-red */ --sh-number: #800080; /* purple */ --sh-type: #008080; /* teal */ --sh-operator: #757575; /* gray */ --sh-command: #0000FF; /* blue — cmdlets, function calls */ --sh-prompt: #0000FF; /* PS C:\> prompt lines */ } /* ========================================================================== DARK MODE — OS preference override Backgrounds: deep navy from the brand palette. Text: near-white. ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --color-bg-page: #060C1A; /* outermost page — deepest navy */ --color-bg-surface: #0D1117; /* cards, code blocks */ --color-bg-surface-alt: #161B22; /* hover states, table rows, sidebar */ --color-border: #30363D; --color-border-strong: #6E7681; --color-text-primary: #F0F6FC; --color-text-muted: #8B949E; --color-text-hint: #6E7681; /* accent unchanged */ --color-accent: #0078D4; --color-accent-cyan: #00BCFF; --color-accent-hover: #1A8FE3; --color-link: #79C0FF; /* blue-tinted for dark bg contrast */ --color-link-hover: #A5D6FF; --color-code-bg: #0D1117; --color-code-text: #F0F6FC; /* Dark mode (VS Code terminal) syntax tokens */ --sh-base: #F0F6FC; /* default token text */ --sh-comment: #6E7681; /* muted grey */ --sh-keyword: #FF7B72; /* soft red */ --sh-string: #A5D6FF; /* light blue */ --sh-param: #D2A8FF; /* lavender */ --sh-var: #FFA657; /* amber */ --sh-number: #79C0FF; /* blue-tinted */ --sh-type: #56D364; /* green — types/classes */ --sh-operator: #F0F6FC; /* same as base */ --sh-command: #00BCFF; /* cyan — cmdlets, function calls */ --sh-prompt: #0078D4; /* brand blue */ } } /* ========================================================================== ALPINE.JS THEME OVERRIDES Applied by toggling data-theme="dark|light" on . Attribute selectors beat media queries — no !important needed. ========================================================================== */ [data-theme="light"] { --color-bg-page: #FFFFFF; --color-bg-surface: #F3F3F3; --color-bg-surface-alt: #E8E8E8; --color-border: #D0D7DE; --color-border-strong: #8C959F; --color-text-primary: #000000; --color-text-muted: #57606A; --color-text-hint: #8C959F; --color-accent: #0078D4; --color-accent-cyan: #0068B8; --color-accent-hover: #0086EF; --color-link: #0078D4; --color-link-hover: #0086EF; --color-code-bg: #F3F3F3; --color-code-text: #000000; /* ISE syntax tokens */ --sh-base: #000000; --sh-comment: #006400; --sh-keyword: #00008B; --sh-string: #8B0000; --sh-param: #000080; --sh-var: #FF4500; --sh-number: #800080; --sh-type: #008080; --sh-operator: #757575; --sh-command: #0000FF; --sh-prompt: #0000FF; } [data-theme="dark"] { --color-bg-page: #060C1A; --color-bg-surface: #0D1117; --color-bg-surface-alt: #161B22; --color-border: #30363D; --color-border-strong: #6E7681; --color-text-primary: #F0F6FC; --color-text-muted: #8B949E; --color-text-hint: #6E7681; --color-accent: #0078D4; --color-accent-cyan: #00BCFF; --color-accent-hover: #1A8FE3; --color-link: #79C0FF; --color-link-hover: #A5D6FF; --color-code-bg: #0D1117; --color-code-text: #F0F6FC; /* VS Code terminal syntax tokens */ --sh-base: #F0F6FC; --sh-comment: #6E7681; --sh-keyword: #FF7B72; --sh-string: #A5D6FF; --sh-param: #D2A8FF; --sh-var: #FFA657; --sh-number: #79C0FF; --sh-type: #56D364; --sh-operator: #F0F6FC; --sh-command: #00BCFF; --sh-prompt: #0078D4; } /* ========================================================================== SYNTAX HIGHLIGHTING — Chroma token colors Light mode: classic PowerShell ISE palette (dark text on white). Dark mode: VS Code terminal palette (light text on #0D1117). Light defaults are in :root above; dark values in [data-theme="dark"] and @media (prefers-color-scheme: dark) above. Map to Hugo's Chroma CSS classes in your syntax stylesheet. ========================================================================== */ /* ========================================================================== TYPOGRAPHY ========================================================================== */ :root { /* Font stacks — no external loads, system fonts first */ --font-sans: 'Segoe UI', Inter, Arial, sans-serif; --font-mono: 'Cascadia Code', Consolas, 'Courier New', monospace; /* Scale */ --font-size-base: 16px; --font-size-sm: 14px; --font-size-xs: 12px; /* Line heights */ --line-height-body: 1.7; --line-height-heading: 1.2; } /* ========================================================================== SPACING — 4px base scale ========================================================================== */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; } /* ========================================================================== LAYOUT ========================================================================== */ :root { --max-width-content: 720px; /* prose / article body */ --max-width-wide: 1100px; /* full-bleed sections, grid layouts */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; } /* ========================================================================== TRANSITIONS ========================================================================== */ :root { --transition-fast: 150ms ease; /* hover states, focus rings */ --transition-base: 250ms ease; /* theme toggle, panel slides */ }