Public: anyone can read this; the crew can change it.
.theme-option and .theme-apply leave the stylesheet and docs/DESIGN.md §5d #5725
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/4701-theme-option-and-theme-apply-leave-the-s → main 9 commits fork
2 files
changed +1
−20
docs/DESIGN.md −3
| @@ -418,9 +418,6 @@ the same line (#4888). | ||
| 418 | 418 | - `.sep` |
| 419 | 419 | - `.split` |
| 420 | 420 | - `.swatch` |
| 421 | - `.theme-apply` | |
| 422 | - `.theme-option` | |
| 423 | - `.tick` | |
| 424 | 421 | |
| 425 | 422 | `.split` is the one two-column page: main, then an `<aside>` rail of 260px that sticks from 960px. `data-rail="wide"` on it (the studio's home and an app's page) widens the rail to 320px from 900px, drops the top margin, and lets the rail scroll with the page, since a column of cards runs taller than a screen |
| 426 | 423 | - **`style/content.ts`, page furniture** — what frames a page's content: page and repo heads, the front page and its tiles, explore, backups, boards, the fleet chart's series colours, lineage: |
src/web/style/components.ts +1 −17
| @@ -634,29 +634,13 @@ details[open] > summary.row > .row-lead { transform: rotate(90deg); } | ||
| 634 | 634 | } |
| 635 | 635 | .topbar-search kbd { flex: none; } |
| 636 | 636 | |
| 637 | /* ---- theme switcher ---- */ | |
| 638 | .theme-option { | |
| 639 | display: flex; align-items: center; gap: 10px; | |
| 640 | padding: 6px 10px; margin: 0; border-radius: var(--radius-sm); | |
| 641 | font-size: 14px; font-weight: 400; cursor: pointer; | |
| 642 | transition: background-color 100ms var(--ease); | |
| 643 | } | |
| 644 | .theme-option:hover { background: var(--muted); } | |
| 645 | .theme-option input { position: absolute; opacity: 0; pointer-events: none; } | |
| 646 | .theme-option .tick { | |
| 647 | margin-left: auto; color: var(--accent); opacity: 0; | |
| 648 | transition: opacity 140ms var(--ease); | |
| 649 | } | |
| 650 | .theme-option:has(input:checked) { background: color-mix(in srgb, var(--accent) 10%, transparent); } | |
| 651 | .theme-option:has(input:checked) .tick { opacity: 1; } | |
| 652 | .theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; } | |
| 637 | /* ---- theme swatch: the colour chip beside each theme in the menu's picker ---- */ | |
| 653 | 638 | .swatch { |
| 654 | 639 | display: inline-block; flex: none; position: relative; |
| 655 | 640 | width: 20px; height: 20px; border-radius: 999px; |
| 656 | 641 | border: 1px solid var(--border-strong); |
| 657 | 642 | } |
| 658 | 643 | .swatch::after { content: ""; position: absolute; inset: 6px; border-radius: 999px; } |
| 659 | .theme-apply { margin: 6px 10px 8px; } | |
| 660 | 644 | |
| 661 | 645 | /* ---- dialog (progressive: every dialog has a real page behind it) ---- */ |
| 662 | 646 | .dialog { |
new above
offline