:root { color-scheme: light; --font-family-base: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; --font-size-base: 1rem; --spacing-unit: 1rem; --radius-unit: 10px; --font-size-xs: calc(var(--font-size-base) * 0.8 * 0.8); --font-size-sm: calc(var(--font-size-base) * 0.8); --font-size-md: var(--font-size-base); --font-size-lg: calc(var(--font-size-base) * 1.5); --font-size-xl: calc(var(--font-size-base) * 1.5 * 1.5); --spacing-xs: calc(var(--spacing-unit) * 0.25); --spacing-sm: calc(var(--spacing-unit) * 0.5); --spacing-md: var(--spacing-unit); --spacing-lg: calc(var(--spacing-unit) * 2); --spacing-xl: calc(var(--spacing-unit) * 4); --radius-sm: calc(var(--radius-unit) * 0.5); --radius-md: var(--radius-unit); /* ----- Theme tokens — light (default) ----- */ --accent-color: #0052cc; --text-color-1: #121212; --text-color-2: #363636; --text-color-3: #787878; --border-color-1: #eee; --border-color-2: #ddd; --border-color-3: #bbb; --background-color-0: #fff; --background-color-1: #f6f6f6; --background-color-2: #a2a2a2; --error-text: #411; --error-text-bright: #d11f1f; --error-border: #a99; --error-background: #fcc; --info-text: #114; --info-border: #99a; --info-background: #ccf; --success-text: #141; --success-border: #9a9; --success-background: #cfc; --warning-text: #521; --warning-border: #a97; --warning-background: #fc9; /* ----- Seven-color palette — light ----- Consumed via [data-color=""] rules below. Components that take a `color` attr render `data-color={atom}` and pick up --ui-text / --ui-border / --ui-background from these rules. */ --palette-red-text: #7a1f1f; --palette-red-border: #e0a0a0; --palette-red-background: #fde8e8; --palette-red-solid: #dc2626; --palette-yellow-text: #6b4a00; --palette-yellow-border: #e0c878; --palette-yellow-background: #fdf3c4; --palette-yellow-solid: #d97706; --palette-blue-text: #0a3d8c; --palette-blue-border: #9bb6e3; --palette-blue-background: #e3edff; --palette-blue-solid: #2563eb; --palette-green-text: #1a5b2c; --palette-green-border: #8fc69d; --palette-green-background: #d8f0de; --palette-green-solid: #16a34a; --palette-purple-text: #4a1f7a; --palette-purple-border: #b89bd6; --palette-purple-background: #efe5fa; --palette-purple-solid: #9333ea; --palette-orange-text: #7a3d0a; --palette-orange-border: #e3b58a; --palette-orange-background: #fde6cf; --palette-orange-solid: #ea580c; } /* ----- Dark palette ----- applied when the OS prefers dark and the user hasn't explicitly forced light, or when data-theme="dark" is set on by the theme toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --accent-color: #4d8bef; --text-color-1: #f2f2f2; --text-color-2: #c8c8c8; --text-color-3: #8a8a8a; --border-color-1: #262626; --border-color-2: #373737; --border-color-3: #555; --background-color-0: #121212; --background-color-1: #1c1c1c; --background-color-2: #666; --error-text: #fbb; --error-text-bright: #ff6b6b; --error-border: #6a2a2a; --error-background: #4a1f1f; --info-text: #bbf; --info-border: #2a2a6a; --info-background: #1f1f4a; --success-text: #bfb; --success-border: #2a6a2a; --success-background: #1f4a1f; --warning-text: #fc9; --warning-border: #6a4520; --warning-background: #4a3121; --palette-red-text: #f5a8a8; --palette-red-border: #6a2a2a; --palette-red-background: #3a1a1a; --palette-red-solid: #f87171; --palette-yellow-text: #f0d878; --palette-yellow-border: #5a4520; --palette-yellow-background: #2e2510; --palette-yellow-solid: #fbbf24; --palette-blue-text: #9ec0f0; --palette-blue-border: #2a4a78; --palette-blue-background: #15243d; --palette-blue-solid: #60a5fa; --palette-green-text: #9adfae; --palette-green-border: #2a5a3a; --palette-green-background: #143b1f; --palette-green-solid: #4ade80; --palette-purple-text: #c8aae8; --palette-purple-border: #4a3070; --palette-purple-background: #261a3a; --palette-purple-solid: #c084fc; --palette-orange-text: #f0bd80; --palette-orange-border: #6a4520; --palette-orange-background: #3a2510; --palette-orange-solid: #fb923c; } } :root[data-theme="dark"] { color-scheme: dark; --accent-color: #4d8bef; --text-color-1: #f2f2f2; --text-color-2: #c8c8c8; --text-color-3: #8a8a8a; --border-color-1: #262626; --border-color-2: #373737; --border-color-3: #555; --background-color-0: #121212; --background-color-1: #1c1c1c; --background-color-2: #666; --error-text: #fbb; --error-text-bright: #ff6b6b; --error-border: #6a2a2a; --error-background: #4a1f1f; --info-text: #bbf; --info-border: #2a2a6a; --info-background: #1f1f4a; --success-text: #bfb; --success-border: #2a6a2a; --success-background: #1f4a1f; --warning-text: #fc9; --warning-border: #6a4520; --warning-background: #4a3121; --palette-red-text: #f5a8a8; --palette-red-border: #6a2a2a; --palette-red-background: #3a1a1a; --palette-red-solid: #f87171; --palette-yellow-text: #f0d878; --palette-yellow-border: #5a4520; --palette-yellow-background: #2e2510; --palette-yellow-solid: #fbbf24; --palette-blue-text: #9ec0f0; --palette-blue-border: #2a4a78; --palette-blue-background: #15243d; --palette-blue-solid: #60a5fa; --palette-green-text: #9adfae; --palette-green-border: #2a5a3a; --palette-green-background: #143b1f; --palette-green-solid: #4ade80; --palette-purple-text: #c8aae8; --palette-purple-border: #4a3070; --palette-purple-background: #261a3a; --palette-purple-solid: #c084fc; --palette-orange-text: #f0bd80; --palette-orange-border: #6a4520; --palette-orange-background: #3a2510; --palette-orange-solid: #fb923c; } /* ----- Surface contract ----- Color-aware components carry `data-color=""` and read --ui-text / --ui-border / --ui-background. The rules below set those tokens for the six explicit hues. `data-color="regular"` is the no-op — each surface's own default declaration provides whatever "regular" should look like there (a regular badge looks different from a regular well). */ [data-color="red"] { --ui-text: var(--palette-red-text); --ui-border: var(--palette-red-border); --ui-background: var(--palette-red-background); --ui-solid: var(--palette-red-solid); } [data-color="yellow"] { --ui-text: var(--palette-yellow-text); --ui-border: var(--palette-yellow-border); --ui-background: var(--palette-yellow-background); --ui-solid: var(--palette-yellow-solid); } [data-color="blue"] { --ui-text: var(--palette-blue-text); --ui-border: var(--palette-blue-border); --ui-background: var(--palette-blue-background); --ui-solid: var(--palette-blue-solid); } [data-color="green"] { --ui-text: var(--palette-green-text); --ui-border: var(--palette-green-border); --ui-background: var(--palette-green-background); --ui-solid: var(--palette-green-solid); } [data-color="purple"] { --ui-text: var(--palette-purple-text); --ui-border: var(--palette-purple-border); --ui-background: var(--palette-purple-background); --ui-solid: var(--palette-purple-solid); } [data-color="orange"] { --ui-text: var(--palette-orange-text); --ui-border: var(--palette-orange-border); --ui-background: var(--palette-orange-background); --ui-solid: var(--palette-orange-solid); } @media (max-width: 600px) { :root { --font-size-base: 0.8rem; --spacing-unit: 0.25rem; } }