| @@ -82,8 +82,38 @@ | ||
| 82 | 82 | font-display: swap; |
| 83 | 83 | } |
| 84 | 84 | |
| 85 | 85 | /* |
| 86 | + * ---- Registered, so "undeclared" never means transparent --------- | |
| 87 | + * | |
| 88 | + * The scope note below keeps this palette out of iframe documents on | |
| 89 | + * purpose: an admin page inside a window renders with the values its | |
| 90 | + * own stylesheets were written with. That promise has one hole CSS | |
| 91 | + * digs by itself — a stylesheet that consumes | |
| 92 | + * `var(--wp-admin-theme-color)` with no fallback, in a document where | |
| 93 | + * nothing declares it, does not fall back to an earlier declaration | |
| 94 | + * in the cascade. An unresolved `var()` is invalid at computed-value | |
| 95 | + * time, so the property computes to `initial` — and an unregistered | |
| 96 | + * custom property's initial value is the guaranteed-invalid value, | |
| 97 | + * which for a `background` means transparent. Core's own scheme files | |
| 98 | + * declare the property, but a third-party admin scheme that consumes | |
| 99 | + * it without declaring it renders `.button-primary` white-on-white | |
| 100 | + * inside every chromeless window (#702). | |
| 101 | + * | |
| 102 | + * Registering the property gives "undeclared" a real answer: | |
| 103 | + * WordPress's default admin colour, the same value Core's fallbacks | |
| 104 | + * reach for. Declarations are untouched — a scheme, the palette | |
| 105 | + * below, or the accent picker's inline style all keep winning exactly | |
| 106 | + * as before. Registration only decides what the absence of all of | |
| 107 | + * them computes to. | |
| 108 | + */ | |
| 109 | +@property --wp-admin-theme-color { | |
| 110 | + syntax: "<color>"; | |
| 111 | + inherits: true; | |
| 112 | + initial-value: #3858e9; | |
| 113 | +} | |
| 114 | + | |
| 115 | +/* | |
| 86 | 116 | * ---- Scope: the shell document, and nothing else ----------------- |
| 87 | 117 | * |
| 88 | 118 | * `body.os-active` rather than `:root`, and that is |
| 89 | 119 | * load-bearing rather than tidy. |
| @@ -110,8 +140,22 @@ | ||
| 110 | 140 | * Do not remove that dependency; see the note in |
| 111 | 141 | * `openstation_enqueue_desktop_theme_style()`. |
| 112 | 142 | */ |
| 113 | 143 | body.os-active { |
| 144 | + /* MIO's conversation follows desktop themes through these public tokens. */ | |
| 145 | + --os-mio-chat-bg: var(--os-ui-modal-bg, #15151e); | |
| 146 | + --os-mio-chat-fg: var(--os-ui-modal-text, #f4f4fb); | |
| 147 | + --os-mio-chat-muted: var(--os-ui-modal-text-muted, #b4b4c6); | |
| 148 | + --os-mio-chat-hover-bg: color-mix(in srgb, var(--os-mio-chat-bg, #fff) 90%, var(--os-mio-chat-fg, #1d2327)); | |
| 149 | + --os-mio-chat-border: color-mix(in srgb, var(--os-ui-accent, #a855f7) 40%, transparent); | |
| 150 | + --os-mio-chat-user-bg: color-mix(in srgb, var(--os-ui-accent, #3f6dff) 15%, transparent); | |
| 151 | + --os-mio-chat-glow: color-mix(in srgb, var(--os-ui-accent-dim, #ff4fd8) 10%, transparent); | |
| 152 | + --os-mio-launcher-bg: color-mix(in srgb, var(--os-mio-chat-bg, #fff) 62%, transparent); | |
| 153 | + --os-mio-callout-bg: var(--os-mio-chat-bg, #15151e); | |
| 154 | + --os-mio-callout-fg: var(--os-mio-chat-fg, #f4f4fb); | |
| 155 | + --os-mio-callout-border: color-mix(in srgb, var(--os-ui-accent-dim, #a855f7) 32%, transparent); | |
| 156 | + --os-mio-chat-radius: max(18px, var(--os-window-radius, 22px)); | |
| 157 | + | |
| 114 | 158 | /* |
| 115 | 159 | * ---- Desk -------------------------------------------------- |
| 116 | 160 | * |
| 117 | 161 | * `Space`, the brand's quiet deep-space backdrop: a linear |
| @@ -411,8 +455,20 @@ | ||
| 411 | 455 | --os-ui-field-bg: #33303a; |
| 412 | 456 | --os-ui-field-border: #4d4a52; |
| 413 | 457 | --os-ui-field-fg: #fffbff; |
| 414 | 458 | |
| 459 | + /* | |
| 460 | + * Field sizing. The kit's own `<os-text-field>` and `<os-textarea>` | |
| 461 | + * (and every kit control that hosts a typing input) read these for | |
| 462 | + * the control's type size and corner. The phone layer raises the | |
| 463 | + * size to 16px — below that, iOS zooms the whole page into a | |
| 464 | + * focused control and never zooms back — and rounds its search; | |
| 465 | + * a theme may do the same anywhere. | |
| 466 | + */ | |
| 467 | + --os-ui-field-font-size: 13px; | |
| 468 | + --os-ui-field-font-size-compact: 12px; | |
| 469 | + --os-ui-field-radius: 6px; | |
| 470 | + | |
| 415 | 471 | /* Text — Starlight down through the Shade ramp. */ |
| 416 | 472 | --os-ui-fg: #fffbff; |
| 417 | 473 | --os-ui-fg-muted: #b3afb5; |
| 418 | 474 | --os-ui-fg-faint: #66636b; |
| @@ -476,8 +532,18 @@ | ||
| 476 | 532 | --os-ui-selection-fg: #fffbff; |
| 477 | 533 | |
| 478 | 534 | /* Accent — the identity moment. */ |
| 479 | 535 | --os-ui-accent: #f252fc; |
| 536 | + /* | |
| 537 | + * Ink on the accent FILL: the tick in a checked box, the dot in a | |
| 538 | + * radio, the label of a primary button. Distinct from | |
| 539 | + * `--os-ui-fg-on-accent`, which the shell reads as "light text on | |
| 540 | + * a dark surface" in seventy-odd places that are not the accent. | |
| 541 | + * Starlight here for Pulse; the accent picker rewrites it inline | |
| 542 | + * to Void whenever the chosen accent is light (Starlight, Sirius, | |
| 543 | + * Nebula, Lagoon), so the pair always agree. | |
| 544 | + */ | |
| 545 | + --os-ui-accent-ink: #fffbff; | |
| 480 | 546 | --os-ui-accent-strong: #ec9bff; |
| 481 | 547 | --os-ui-accent-soft: color-mix(in srgb, var(--os-ui-accent-dim) 14%, transparent); |
| 482 | 548 | /* |
| 483 | 549 | * Pulse, one step back — and the single knob for how loud the |
| @@ -718,22 +784,21 @@ | ||
| 718 | 784 | * satisfy WCAG 1.4.11. |
| 719 | 785 | */ |
| 720 | 786 | --os-ui-holo-track-edge: #66636b; |
| 721 | 787 | /* |
| 722 | - * Focus. One ring for the whole kit — Pulse, offset, over a soft | |
| 723 | - * halo, so it reads on Obsidian, on a mesh, and on the near-white | |
| 788 | + * Focus. One ring for the whole kit — the accent, offset by a Void | |
| 789 | + * gap, so it reads on Obsidian, on a mesh, and on the near-white | |
| 724 | 790 | * of a legacy theme alike. |
| 725 | 791 | * |
| 726 | - * Note which layer dims and which does not. The RING is full Pulse | |
| 727 | - * and stays there: it is the only thing on screen saying where the | |
| 728 | - * keyboard is, and a focus indicator is the last place to trade | |
| 729 | - * legibility for calm. Only the bloom behind it comes down, from | |
| 730 | - * 45% to 30%, and onto the dim — which is the layer that was | |
| 731 | - * making a focused control look like it was on fire. | |
| 792 | + * The RING is full accent and stays there: it is the only thing on | |
| 793 | + * screen saying where the keyboard is, and a focus indicator is the | |
| 794 | + * last place to trade legibility for calm. The bloom that used to | |
| 795 | + * sit behind it is gone: it was the layer that made a focused | |
| 796 | + * control look like it was on fire, and the Void gap already does | |
| 797 | + * the work of separating the ring from whatever it lands on. | |
| 732 | 798 | */ |
| 733 | 799 | --os-ui-focus-ring: 0 0 0 2px rgba(12, 11, 15, 0.9), |
| 734 | - 0 0 0 4px var(--os-ui-accent, #f252fc), | |
| 735 | - 0 0 12px 2px color-mix(in srgb, var(--os-ui-accent-dim) 30%, transparent); | |
| 800 | + 0 0 0 4px var(--os-ui-accent, #f252fc); | |
| 736 | 801 | /* |
| 737 | 802 | * …and one for FIELDS, which is a different problem. A text input |
| 738 | 803 | * already has a border to thicken and it sits in a column of other |
| 739 | 804 | * inputs, so the ring above — designed to survive landing on a |
| @@ -749,27 +814,27 @@ | ||
| 749 | 814 | * The selected row of a VERTICAL `<os-tabs>`: the sidebar in |
| 750 | 815 | * OpenStation Preferences, and any native window that lays its |
| 751 | 816 | * pages down the side rather than across the top. |
| 752 | 817 | * |
| 753 | - * Three layers, and the split is the whole point. Colour repeated | |
| 754 | - * down nine rows is wallpaper, so the accent is spent as a | |
| 755 | - * two-pixel EDGE and the row itself gets only a wash that falls | |
| 756 | - * away: it appears where it is cheap to look at and expensive to | |
| 757 | - * ignore. | |
| 818 | + * The one selection on the station that keeps the accent. The row | |
| 819 | + * runs full-bleed and says "this one" with a 2px accent line at its | |
| 820 | + * leading edge, the bloom that line throws back across the row, and | |
| 821 | + * a wash fading out towards the label. Everywhere else a selection | |
| 822 | + * is a surface (a grey key, an outline, a flat fill); the sidebar is | |
| 823 | + * where you are, and the brand marks it. | |
| 758 | 824 | * |
| 759 | - * `-edge` is the accent the user picked, flat. It used to be | |
| 760 | - * Miomesh, and a mesh does hold up at 2px where a radial one | |
| 761 | - * would crop to an arbitrary lilac — but the edge is the loudest | |
| 762 | - * thing on the page that says "this row", and a row that says it | |
| 763 | - * in Pulse while the controls beside it say it in the chosen | |
| 764 | - * accent reads as two systems. | |
| 765 | - * | |
| 766 | - * `-wash` and `-bloom` are AMBIENT accent, so both resolve through | |
| 767 | - * `--os-ui-accent-dim` like every other glow in the kit. Turning | |
| 768 | - * the station down is still one edit. The Starlight stop in the | |
| 769 | - * middle of the wash is what keeps the row from reading as a pink | |
| 770 | - * smear: it lifts the surface under the label rather than tinting | |
| 771 | - * it, and it is gone by the time the row ends. | |
| 825 | + * The three coloured layers are DERIVED from the accent: `-edge` is | |
| 826 | + * the accent flat, `-wash` and `-bloom` resolve through | |
| 827 | + * `--os-ui-accent-dim` like every other ambient use, so a picked | |
| 828 | + * accent reaches the row on this palette and on Legacy alike (see | |
| 829 | + * `desktopThemesLegacy.php`: a theme cannot answer a derived token, | |
| 830 | + * so a derivation is shared). How much of each shows, and the row's | |
| 831 | + * shape, are literals a theme answers on its own: edge width, wash | |
| 832 | + * and bloom opacity, and a fill, radius and inset that together | |
| 833 | + * would turn the row into a lifted pill. The wash's opacity scales | |
| 834 | + * every stop of the gradient, because a background image has no | |
| 835 | + * opacity of its own and both of the row's pseudo-elements are | |
| 836 | + * already spent on the edge and the bloom. | |
| 772 | 837 | */ |
| 773 | 838 | --os-ui-tab-edge: linear-gradient( |
| 774 | 839 | var(--os-ui-accent, #f252fc), |
| 775 | 840 | var(--os-ui-accent, #f252fc) |
| @@ -775,10 +840,15 @@ | ||
| 775 | 840 | var(--os-ui-accent, #f252fc) |
| 776 | 841 | ); |
| 777 | 842 | --os-ui-tab-wash: linear-gradient( |
| 778 | 843 | 90deg, |
| 779 | - color-mix(in srgb, var(--os-ui-accent-dim) 16%, transparent) 0%, | |
| 780 | - rgba(255, 251, 255, 0.04) 42%, | |
| 844 | + color-mix( | |
| 845 | + in srgb, | |
| 846 | + var(--os-ui-accent-dim) calc(16% * var(--os-ui-tab-wash-opacity, 1)), | |
| 847 | + transparent | |
| 848 | + ) | |
| 849 | + 0%, | |
| 850 | + rgba(255, 251, 255, calc(0.04 * var(--os-ui-tab-wash-opacity, 1))) 42%, | |
| 781 | 851 | transparent 100% |
| 782 | 852 | ); |
| 783 | 853 | --os-ui-tab-bloom: linear-gradient( |
| 784 | 854 | 90deg, |
| @@ -784,10 +854,64 @@ | ||
| 784 | 854 | 90deg, |
| 785 | 855 | color-mix(in srgb, var(--os-ui-accent-dim) 26%, transparent), |
| 786 | 856 | transparent |
| 787 | 857 | ); |
| 858 | + --os-ui-tab-edge-width: 2px; | |
| 859 | + --os-ui-tab-wash-opacity: 1; | |
| 860 | + --os-ui-tab-bloom-opacity: 1; | |
| 861 | + --os-ui-tab-fill: transparent; | |
| 862 | + --os-ui-tab-radius: 0px; | |
| 863 | + --os-ui-tab-inset: 0px; | |
| 788 | 864 | |
| 789 | 865 | /* |
| 866 | + * `<os-segmented>`, same split again. The thumb and its label still | |
| 867 | + * mix from the accent, so Legacy and any theme that answers 100% | |
| 868 | + * keep a coloured pill that follows the picker. This palette answers | |
| 869 | + * 0%: a Void track with the chosen option as a mid-grey key and a | |
| 870 | + * Starlight label, whatever accent is picked. | |
| 871 | + * | |
| 872 | + * The key's grey is set by contrast, not by taste. The first pass | |
| 873 | + * used the sidebar row's grey, and it sat at 1.37:1 against the | |
| 874 | + * track and 1.15:1 against the card around it, so the key read as a | |
| 875 | + * hole in the track rather than a thing pressed into it. This grey | |
| 876 | + * clears 3:1 against Void, what a selected state needs against its | |
| 877 | + * neighbours, and still carries its Starlight label at 5.7:1. A | |
| 878 | + * small shadow under it and a hairline around the track do the | |
| 879 | + * rest: without the hairline, a Void track on the page behind the | |
| 880 | + * dock options measured 1.05:1 and all but disappeared. | |
| 881 | + * | |
| 882 | + * Under the pointer an unselected option takes a faint Starlight | |
| 883 | + * lift instead of the holographic film. | |
| 884 | + */ | |
| 885 | + --os-ui-segmented-bg: #0c0b0f; | |
| 886 | + --os-ui-segmented-edge: inset 0 0 0 1px rgba(255, 251, 255, 0.1); | |
| 887 | + --os-ui-segmented-selected-accent: 0%; | |
| 888 | + --os-ui-segmented-selected-base: #67636e; | |
| 889 | + --os-ui-segmented-selected-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); | |
| 890 | + --os-ui-segmented-hover-bg: rgba(255, 251, 255, 0.06); | |
| 891 | + --os-ui-segmented-hover-sheen: none; | |
| 892 | + | |
| 893 | + /* | |
| 894 | + * The chosen tile in a swatch grid (wallpapers, the theme and | |
| 895 | + * layout cards in Preferences, and any grid a plugin builds from | |
| 896 | + * `<os-swatch>`), same split. The ring is the accent and stays | |
| 897 | + * derived; this palette sets its width to 0 and lifts the tile | |
| 898 | + * instead: a solid Starlight stroke outlines it, a shadow sets it | |
| 899 | + * above the grid, and a Starlight disc with a tick cut out of it | |
| 900 | + * sits in the corner. The stroke is Starlight rather than the | |
| 901 | + * accent, like the badge, so the chosen tile stands out the same | |
| 902 | + * way whichever accent is picked; a translucent hairline was too | |
| 903 | + * faint on the dark theme cards. Legacy answers 2px, no lift, no | |
| 904 | + * badge. The accent chips in the colour row keep their ring | |
| 905 | + * whatever these say: a colour is the whole content there, and a | |
| 906 | + * lift on a 28px square is invisible. | |
| 907 | + */ | |
| 908 | + --os-ui-swatch-ring-width: 0px; | |
| 909 | + --os-ui-swatch-lift: 0 0 0 1px #fffbff, | |
| 910 | + 0 12px 24px -12px rgba(0, 0, 0, 0.8); | |
| 911 | + --os-ui-swatch-badge-bg: #fffbff; | |
| 912 | + | |
| 913 | + /* | |
| 790 | 914 | * ---- Motion -------------------------------------------------- |
| 791 | 915 | * |
| 792 | 916 | * Four durations and three curves, and every animated thing in the |
| 793 | 917 | * kit picks from them. Not for tidiness: a panel where the switch |
| @@ -937,10 +1061,10 @@ | ||
| 937 | 1061 | * only from the component's own `::slotted( a )`. See the comment |
| 938 | 1062 | * there: a slotted link is a document-tree element, so wp-admin's |
| 939 | 1063 | * bare `a` rule outranks anything the shadow root says about it. |
| 940 | 1064 | */ |
| 941 | - --os-ui-notice-link: #ec9bff; | |
| 942 | - --os-ui-notice-link-hover: #fffbff; | |
| 1065 | + --os-ui-notice-link: #fffbff; | |
| 1066 | + --os-ui-notice-link-hover: #ccc8ce; | |
| 943 | 1067 | --os-ui-badge-danger-bg: rgba(255, 90, 90, 0.16); |
| 944 | 1068 | --os-ui-badge-success-bg: rgba(147, 240, 198, 0.16); |
| 945 | 1069 | --os-ui-badge-warning-bg: rgba(248, 242, 182, 0.16); |
| 946 | 1070 | --os-ui-badge-info-bg: rgba(194, 241, 241, 0.16); |
| @@ -1035,9 +1159,8 @@ | ||
| 1035 | 1159 | /* Search-match highlight inside a label. A WASH, not a fill: the |
| 1036 | 1160 | text keeps its own colour, so the wash has to stay light enough |
| 1037 | 1161 | for Starlight to carry over it. */ |
| 1038 | 1162 | --os-ui-search-highlight-bg: rgba(248, 242, 182, 0.3); |
| 1039 | - --os-ui-color-accent: #f252fc; | |
| 1040 | 1163 | /* |
| 1041 | 1164 | * The content graph's cluster hue is NOT retinted. Graph node |
| 1042 | 1165 | * colours are composed artwork that encodes meaning — the docs list |
| 1043 | 1166 | * them under "what stays fixed" — and moving this one to Nebula put |
| @@ -1043,18 +1166,82 @@ | ||
| 1043 | 1166 | * them under "what stays fixed" — and moving this one to Nebula put |
| 1044 | 1167 | * white cluster labels on a pale lilac chip at 1.9:1. It keeps its |
| 1045 | 1168 | * own colour, and the label keeps carrying on it. |
| 1046 | 1169 | * |
| 1047 | - * The graph's toolbar is chrome, though, and it does follow. The | |
| 1048 | - * count pill on an ACTIVE filter chip is a 70%-white fill, and it | |
| 1049 | - * was carrying `--os-ui-accent-strong` numerals — Nebula on white, | |
| 1050 | - * ~1.7:1. It is one more bright fill naming its own dark text, the | |
| 1051 | - * same escape hatch `--os-ui-ribbon-fg` and `--os-ui-step-chip-fg` | |
| 1052 | - * take, and for the same reason. | |
| 1170 | + * The graph's toolbar is chrome, though, and it follows the same | |
| 1171 | + * split as selection everywhere else: the accent stays derived, a | |
| 1172 | + * literal says how much of it shows. An ON filter chip mixes its | |
| 1173 | + * edge, wash and text from the accent by `-accent`, towards the | |
| 1174 | + * neutrals below; this palette answers 0%, so an on chip reads like | |
| 1175 | + * the selected theme card in Preferences, a Starlight outline around | |
| 1176 | + * the dark surface. Legacy answers 100%. An OFF chip sits on the | |
| 1177 | + * toolbar with the strong border as its edge, because the plain | |
| 1178 | + * border is the toolbar's own colour and a chip drawn with it has no | |
| 1179 | + * outline at all. | |
| 1180 | + * | |
| 1181 | + * The count pill is the strong border's grey on both, with Starlight | |
| 1182 | + * numerals: muted numerals on that grey land at 4.0:1, under what | |
| 1183 | + * 12px text needs. | |
| 1053 | 1184 | */ |
| 1054 | - --os-ui-cg-chip-count-fg-active: #0c0b0f; | |
| 1185 | + --os-ui-cg-chip-accent: 0%; | |
| 1186 | + --os-ui-cg-chip-border: #4d4a52; | |
| 1187 | + --os-ui-cg-chip-border-active: #fffbff; | |
| 1188 | + --os-ui-cg-chip-fill-active: #1a1721; | |
| 1189 | + --os-ui-cg-chip-count-bg: #4d4a52; | |
| 1190 | + --os-ui-cg-chip-count-fg: #fffbff; | |
| 1191 | + --os-ui-cg-chip-count-bg-active: #4d4a52; | |
| 1192 | + --os-ui-cg-chip-count-fg-active: #fffbff; | |
| 1055 | 1193 | |
| 1056 | 1194 | /* |
| 1195 | + * ---- The widget card's public token contract ---------------- | |
| 1196 | + * | |
| 1197 | + * Five names a third-party widget stylesheet is told to read. | |
| 1198 | + * The list lives in `src/plugins/starter-widget/styles.css`, | |
| 1199 | + * which is the file plugin authors copy — so it is a contract, | |
| 1200 | + * not a convenience, and four of the five were documented | |
| 1201 | + * without ever being declared. Every consumer fell through to | |
| 1202 | + * the light-mode grey in its own `var()` fallback, on a card | |
| 1203 | + * whose glass is dark: Post Stats' metadata measured 3.81:1 | |
| 1204 | + * where `.os-widgets__title` on the same surface measures 18.4. | |
| 1205 | + * | |
| 1206 | + * They are mostly literals rather than aliases of the text ramp, | |
| 1207 | + * and that is the point. `.os-widgets__card` paints a fixed dark | |
| 1208 | + * glass — `--os-ui-color-surface` below IS that colour, and the | |
| 1209 | + * card reads it — under every desktop theme, so a name that | |
| 1210 | + * flips with the theme is the wrong chain here: Legacy's | |
| 1211 | + * `--os-ui-fg-muted` is `#50575e`, which lands at 2.54:1 on the | |
| 1212 | + * glass and makes the bug WORSE for anyone wearing it. The two | |
| 1213 | + * text names below do chain, but through the two names Legacy | |
| 1214 | + * keeps light — the ones describing the same on-dark chrome | |
| 1215 | + * this card is. | |
| 1216 | + * | |
| 1217 | + * A theme that wants to move a widget card declares these names | |
| 1218 | + * itself, the way Legacy already declares the accent. | |
| 1219 | + */ | |
| 1220 | + --os-ui-color-surface: rgba(20, 20, 22, 0.55); | |
| 1221 | + /* What the card's own `color` already resolves to — so a widget | |
| 1222 | + asking for "primary text" gets the text it inherited. */ | |
| 1223 | + --os-ui-color-text: var(--os-ui-fg-on-accent, #fffbff); | |
| 1224 | + /* The shell's muted-on-dark. 9.2:1 on the glass, and Legacy | |
| 1225 | + keeps it at `rgba( 255, 255, 255, 0.7 )`. */ | |
| 1226 | + --os-ui-color-text-subtle: var(--os-fg-muted, rgba(255, 251, 255, 0.7)); | |
| 1227 | + /* A hairline INSIDE the card, so a touch stronger than the | |
| 1228 | + card's own 0.08 edge, which is drawn against the wallpaper. | |
| 1229 | + Literal because no general on-dark hairline exists: the ones | |
| 1230 | + Legacy keeps light are `--os-dock-border` and | |
| 1231 | + `--os-cn-border`, and borrowing either is the right value at | |
| 1232 | + the wrong scope. It reads quieter than what it replaces — | |
| 1233 | + the widgets' own fallback was `#e5e7eb`, a light-theme | |
| 1234 | + divider that on dark glass drew the loudest line in the | |
| 1235 | + station. 0.12 is what the window and dock edges use. */ | |
| 1236 | + --os-ui-color-border: rgba(255, 251, 255, 0.12); | |
| 1237 | + /* The one name that has to reach the accent picker. It was a | |
| 1238 | + hard `#f252fc`, so a widget told to "use the accent for | |
| 1239 | + buttons and links" stayed brand pink after the user chose | |
| 1240 | + teal, while every control around it moved. */ | |
| 1241 | + --os-ui-color-accent: var(--os-ui-accent, #f252fc); | |
| 1242 | + | |
| 1243 | + /* | |
| 1057 | 1244 | * ---- Typography -------------------------------------------- |
| 1058 | 1245 | * |
| 1059 | 1246 | * Geist for everything human — headlines, UI copy, body text — and |
| 1060 | 1247 | * Geist Mono for the instrument voice: labels, metadata, statuses, |
| @@ -1184,8 +1371,53 @@ | ||
| 1184 | 1371 | --os-dock-recycle-badge-bg: rgba(26, 23, 33, 0.85); |
| 1185 | 1372 | --os-dock-recycle-badge-fg: rgba(255, 251, 255, 0.92); |
| 1186 | 1373 | |
| 1187 | 1374 | /* |
| 1375 | + * ---- Chrome that sits on the wallpaper --------------------- | |
| 1376 | + * | |
| 1377 | + * The desktop icons and the Add widget pill paint straight onto | |
| 1378 | + * the wallpaper, with no window behind them. Bare Starlight only | |
| 1379 | + * works there while the wallpaper is dark, and not every one is: | |
| 1380 | + * on Holomesh they measured 1.5:1 to 2.2:1. | |
| 1381 | + * | |
| 1382 | + * **A plate and an ink are two different answers, and which one a | |
| 1383 | + * surface gets depends on whether it is an object.** | |
| 1384 | + * | |
| 1385 | + * The Add widget pill is, so it takes a PLATE and reads on every | |
| 1386 | + * wallpaper without anyone measuring anything. It derives it from | |
| 1387 | + * the glass it sits beside rather than mixing its own: the widget | |
| 1388 | + * card whose stack it trails. | |
| 1389 | + * | |
| 1390 | + * Icons, captions and file tiles are not objects — plating each one | |
| 1391 | + * turns a desk into a sheet of stickers — so they change INK, which | |
| 1392 | + * needs someone to know how bright the desk is. `--os-desk-fg` is | |
| 1393 | + * that answer, decided by `src/wallpapers/tone.ts` and carried by | |
| 1394 | + * the `body.os-wallpaper-light` rule below. Retint the desk by | |
| 1395 | + * naming the two literals it chooses between, never the chooser. | |
| 1396 | + * | |
| 1397 | + * `--os-icon-label-bg` is the belt to that pair of braces, for the | |
| 1398 | + * wallpaper nobody can measure: it costs nothing on a dark desk | |
| 1399 | + * (Void on Void), switches off where the tone is light, and holds | |
| 1400 | + * Starlight up where the tone is simply unknown. | |
| 1401 | + * | |
| 1402 | + * The shadows sharpen rather than rescue: a halo moves the glyph | |
| 1403 | + * edges, not the contrast ratio. | |
| 1404 | + */ | |
| 1405 | + --os-icon-label-bg: rgba(12, 11, 15, 0.55); | |
| 1406 | + --os-icon-label-shadow: 0 1px 2px rgba(12, 11, 15, 0.9); | |
| 1407 | + --os-icon-glyph-shadow: drop-shadow(0 1px 3px rgba(12, 11, 15, 0.75)); | |
| 1408 | + --os-icon-hover-bg: rgba(255, 251, 255, 0.12); | |
| 1409 | + --os-widgets-add-bg: var(--os-ui-color-surface, rgba(20, 20, 22, 0.55)); | |
| 1410 | + --os-widgets-add-bg-hover: color-mix( | |
| 1411 | + in srgb, | |
| 1412 | + var(--os-ui-color-surface, rgba(20, 20, 22, 0.55)) 90%, | |
| 1413 | + #fffbff | |
| 1414 | + ); | |
| 1415 | + --os-widgets-add-border: rgba(255, 251, 255, 0.38); | |
| 1416 | + --os-desk-fg: var(--os-fg, #fffbff); | |
| 1417 | + --os-desk-ink-light: #1a1721; | |
| 1418 | + | |
| 1419 | + /* | |
| 1188 | 1420 | * ---- Tooltips --------------------------------------------- |
| 1189 | 1421 | * |
| 1190 | 1422 | * Two tokens own every tooltip CHIP in the shell — the dock tile |
| 1191 | 1423 | * tooltip and the content-graph satellite tooltip. |
| @@ -1228,17 +1460,36 @@ | ||
| 1228 | 1460 | * rule and so must read the same two tokens). |
| 1229 | 1461 | */ |
| 1230 | 1462 | --os-dock-width: 56px; |
| 1231 | 1463 | --os-dock-icon-size: 20px; |
| 1464 | + /* | |
| 1465 | + * The indicator line a dynamic dock collapses into while parked | |
| 1466 | + * (Preferences → Appearance → Desktop layout → Dock behavior): | |
| 1467 | + * the iOS home indicator, painted in the accent at partial alpha | |
| 1468 | + * so it reads as a mark on the wallpaper rather than a control. | |
| 1469 | + * `-length` runs along the rail's edge, `-thickness` across it; a | |
| 1470 | + * theme retunes any of the three. | |
| 1471 | + */ | |
| 1472 | + --os-dock-indicator-length: 180px; | |
| 1473 | + --os-dock-indicator-thickness: 5px; | |
| 1474 | + --os-dock-indicator-bg: color-mix( in srgb, var( --os-ui-accent, #f252fc ) 72%, transparent ); | |
| 1232 | 1475 | --os-dock-bg: rgba(12, 11, 15, 0.72); |
| 1233 | 1476 | --os-dock-icon-color: rgba(255, 251, 255, 0.72); |
| 1234 | 1477 | --os-dock-icon-color-hover: #fffbff; |
| 1235 | - --os-dock-item-bg-hover: rgba(242, 82, 252, 0.18); | |
| 1478 | + --os-dock-item-bg-hover: rgba(255, 251, 255, 0.08); | |
| 1236 | 1479 | /* |
| 1480 | + * The tile whose window is in front sits on a lit plate: the same | |
| 1481 | + * Starlight wash the hover uses, one step brighter, so "this is the | |
| 1482 | + * app you are in" reads as depth rather than as a coloured mark. | |
| 1483 | + * The running dot under every open app stays; a lit plate says | |
| 1484 | + * which one is in front, the dots say which ones are open. | |
| 1485 | + */ | |
| 1486 | + --os-dock-item-bg-focused: rgba(255, 251, 255, 0.1); | |
| 1487 | + /* | |
| 1237 | 1488 | * The status indicator and the focus ring, and both say "this |
| 1238 | 1489 | * one" about a tile the user chose — so they read the accent |
| 1239 | - * rather than a fixed Pulse. Pulse is still what an untouched | |
| 1240 | - * install shows, because that is what the picker starts on. | |
| 1490 | + * rather than a fixed colour. Starlight is what an untouched | |
| 1491 | + * install shows, because that is the accent the picker starts on. | |
| 1241 | 1492 | */ |
| 1242 | 1493 | --os-dock-item-outline: var(--os-ui-accent, #f252fc); |
| 1243 | 1494 | /* |
| 1244 | 1495 | * Hairline between the dock and the desktop. Reaches the side |
| @@ -1277,8 +1528,30 @@ | ||
| 1277 | 1528 | --os-dock-floating-highlight: rgba(255, 251, 255, 0.1); |
| 1278 | 1529 | --os-dock-floating-shadow: rgba(0, 0, 0, 0.55); |
| 1279 | 1530 | |
| 1280 | 1531 | /* |
| 1532 | + * The phone layer (`mobile.css`). Its surfaces are the dock's | |
| 1533 | + * family — translucent glass over the wallpaper, light glyphs — | |
| 1534 | + * and read the dock tokens above for fill, text and lines. What | |
| 1535 | + * the dock has no word for is declared here: the glass a tile, a | |
| 1536 | + * round control and a switcher card are cut from, its pressed | |
| 1537 | + * state, the shadow under a tile, the scrim behind the switcher, | |
| 1538 | + * and the label shadow that keeps text legible over any wallpaper. | |
| 1539 | + * A desktop theme that reskins the dock reskins the phone with it; | |
| 1540 | + * one that wants the phone alone has these. | |
| 1541 | + */ | |
| 1542 | + --os-mobile-glass: rgba(255, 251, 255, 0.1); | |
| 1543 | + --os-mobile-glass-strong: rgba(255, 251, 255, 0.16); | |
| 1544 | + --os-mobile-glass-border: rgba(255, 251, 255, 0.14); | |
| 1545 | + --os-mobile-tile-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); | |
| 1546 | + --os-mobile-card-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); | |
| 1547 | + --os-mobile-sheet-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); | |
| 1548 | + --os-mobile-window-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); | |
| 1549 | + --os-mobile-scrim: rgba(0, 0, 0, 0.55); | |
| 1550 | + --os-mobile-top-scrim: rgba(0, 0, 0, 0.45); | |
| 1551 | + --os-mobile-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); | |
| 1552 | + | |
| 1553 | + /* | |
| 1281 | 1554 | * ---- The OpenStation layout --------------------------------- |
| 1282 | 1555 | * |
| 1283 | 1556 | * The constellation: the flyout that fans a menu's submenu out of |
| 1284 | 1557 | * its tile on hover, on every rail in every layout. The rail's |
| @@ -1398,8 +1671,21 @@ | ||
| 1398 | 1671 | rgba(255, 90, 90, 0.16) |
| 1399 | 1672 | ); |
| 1400 | 1673 | --os-ai-panel-bg: rgba(26, 23, 33, 0.97); |
| 1401 | 1674 | /* |
| 1675 | + * The Site assistant, the same split as selection everywhere else: | |
| 1676 | + * its header tint and mark, search icon, lit row and icon tiles still | |
| 1677 | + * mix from the accent, and so does its send button; --os-ai-accent | |
| 1678 | + * says how much. This palette | |
| 1679 | + * answers 0%, so the chrome is neutral and a lit row is the flat 8% | |
| 1680 | + * Starlight of the Preferences sidebar; Legacy answers 100%. The | |
| 1681 | + * command icons keep the accent here too: they read it directly, so | |
| 1682 | + * the colour stays in the pictures and out of the chrome. | |
| 1683 | + */ | |
| 1684 | + --os-ai-accent: 0%; | |
| 1685 | + --os-ai-row-fill: rgba(255, 251, 255, 0.08); | |
| 1686 | + --os-ai-tile-fill: rgba(255, 251, 255, 0.06); | |
| 1687 | + /* | |
| 1402 | 1688 | * ---- Window tab strip --------------------------------------- |
| 1403 | 1689 | * |
| 1404 | 1690 | * A window with sub-pages reads as three surfaces stacked in |
| 1405 | 1691 | * depth, and the values below are that ramp: Astro on the focused |
| @@ -1478,46 +1764,54 @@ | ||
| 1478 | 1764 | #f4eff9 0%, |
| 1479 | 1765 | #ffffff 58% |
| 1480 | 1766 | ); |
| 1481 | 1767 | /* |
| 1482 | - * The crown. Holomesh, masked away before the joint for the same | |
| 1483 | - * reason. It is on exactly ONE tab at a time — that is what keeps | |
| 1484 | - * the mesh an identity moment instead of wallpaper, and it is the | |
| 1485 | - * rule the rest of the kit follows. Set it to `none` to get the | |
| 1486 | - * plain frosted plate back. | |
| 1768 | + * The crown. Holomesh over the top of the plate, masked away before | |
| 1769 | + * the joint, on exactly ONE tab at a time. Off in this palette: the | |
| 1770 | + * plain frosted plate is the tab, and the one identity moment on a | |
| 1771 | + * window is left to the wallpaper behind it. A theme that wants the | |
| 1772 | + * mesh back declares `var(--os-mesh-holo)` here, at around 0.3. | |
| 1487 | 1773 | */ |
| 1488 | - --os-tabs-active-crown: var(--os-mesh-holo); | |
| 1774 | + --os-tabs-active-crown: none; | |
| 1489 | 1775 | --os-tabs-active-crown-opacity: 0.3; |
| 1490 | 1776 | /* |
| 1491 | 1777 | * The rail: one continuous line around the silhouette of |
| 1492 | - * page-plus-tab. | |
| 1778 | + * page-plus-tab, painted as a background-image through a mask, | |
| 1779 | + * which is why it is a gradient and not a colour. It is the accent | |
| 1780 | + * the user picked, flat, and it stays derived so the pick reaches | |
| 1781 | + * it on every theme. | |
| 1493 | 1782 | * |
| 1494 | - * This is the one place the accent is spent on the tab strip, and | |
| 1495 | - * spending it here is what lets the tab itself stay uncoloured — | |
| 1496 | - * so it is the accent the user picked, flat, and not Pulsemesh. | |
| 1497 | - * A mesh here would be the accent everywhere else on the tab | |
| 1498 | - * strip disagreeing with the one line that carries it. Written as | |
| 1499 | - * a gradient rather than a colour because the rail is painted as | |
| 1500 | - * a background-image through a mask. | |
| 1501 | - * | |
| 1502 | - * Set it to `none` for the plain frosted plate with no line. | |
| 1783 | + * On this palette it is drawn at 0 opacity. The plate already | |
| 1784 | + * reads as "this tab" by being the one white shape on an Obsidian | |
| 1785 | + * strip that joins the page below it; a coloured line around that | |
| 1786 | + * silhouette was saying the same thing a second time, on every | |
| 1787 | + * window on the desk. The opacity is the literal a theme answers | |
| 1788 | + * (Legacy: 1), and the width stays at 2px because the strip's | |
| 1789 | + * geometry is built on it: the plate sits on the rail whether or | |
| 1790 | + * not the rail is visible, so turning it back on costs no seam. | |
| 1503 | 1791 | */ |
| 1504 | 1792 | --os-tabs-rail: linear-gradient( |
| 1505 | 1793 | var(--os-ui-accent, #f252fc), |
| 1506 | 1794 | var(--os-ui-accent, #f252fc) |
| 1507 | 1795 | ); |
| 1796 | + --os-tabs-rail-opacity: 0; | |
| 1508 | 1797 | --os-tabs-rail-width: 2px; |
| 1509 | 1798 | --os-media-tile-bg: rgba(255, 251, 255, 0.05); |
| 1510 | 1799 | --os-media-visual-bg: rgba(255, 251, 255, 0.04); |
| 1511 | 1800 | --os-skeleton-low: rgba(255, 251, 255, 0.05); |
| 1512 | 1801 | --os-skeleton-high: rgba(255, 251, 255, 0.13); |
| 1513 | - --os-drop-preview-bg: rgba(242, 82, 252, 0.1); | |
| 1514 | - --os-drop-preview-border: rgba(242, 82, 252, 0.55); | |
| 1802 | + --os-drop-preview-bg: rgba(255, 251, 255, 0.08); | |
| 1803 | + --os-drop-preview-border: rgba(255, 251, 255, 0.45); | |
| 1515 | 1804 | |
| 1516 | 1805 | /* |
| 1517 | 1806 | * File tiles — anywhere a `.os-file-tile` (or sibling |
| 1518 | 1807 | * canvas tile) renders. The defaults match the desk: Starlight |
| 1519 | - * labels over a dark sky, with a Pulse selection wash. | |
| 1808 | + * labels over a dark sky, and a selected tile is a lifted | |
| 1809 | + * Starlight plate, the same language as the selected row in the | |
| 1810 | + * Preferences sidebar, one step brighter than the hover wash so | |
| 1811 | + * the two states stay apart. The accent ring around it is a | |
| 1812 | + * derived colour with a literal width; this palette sets the | |
| 1813 | + * width to 0 (Legacy keeps 1px) so selection is depth, not colour. | |
| 1520 | 1814 | * |
| 1521 | 1815 | * Surfaces that are light in their own right override these in |
| 1522 | 1816 | * their own scope, e.g.: |
| 1523 | 1817 | * |
| @@ -1528,12 +1822,15 @@ | ||
| 1528 | 1822 | * |
| 1529 | 1823 | * Plugin authors can override any of these in their own theme |
| 1530 | 1824 | * to retint tiles globally without touching the rules below. |
| 1531 | 1825 | */ |
| 1532 | - --os-tile-fg: var(--os-fg, #fffbff); | |
| 1826 | + /* Through the desk's ink: a file tile sits on the wallpaper as a | |
| 1827 | + desktop icon does. Folder windows override it in their own scope. */ | |
| 1828 | + --os-tile-fg: var(--os-desk-fg, var(--os-fg, #fffbff)); | |
| 1533 | 1829 | --os-tile-fg-muted: rgba(255, 251, 255, 0.7); |
| 1534 | 1830 | --os-tile-hover-bg: rgba(255, 251, 255, 0.12); |
| 1535 | - --os-tile-selected-bg: rgba(242, 82, 252, 0.24); | |
| 1831 | + --os-tile-selected-bg: rgba(255, 251, 255, 0.16); | |
| 1832 | + --os-tile-selected-ring-width: 0px; | |
| 1536 | 1833 | --os-tile-focus-ring: var(--wp-admin-theme-color, #f252fc); |
| 1537 | 1834 | --os-tile-shortcut-bg: rgba(12, 11, 15, 0.7); |
| 1538 | 1835 | --os-tile-shortcut-fg: #fffbff; |
| 1539 | 1836 | --os-tile-shortcut-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); |
| @@ -1595,17 +1892,8 @@ | ||
| 1595 | 1892 | * the thing that gets perched on. Still under the dock (200). |
| 1596 | 1893 | */ |
| 1597 | 1894 | --os-z-desktop-name: 195; |
| 1598 | 1895 | /* |
| 1599 | - * The notch — on the desk, under the windows (100 + stack index), | |
| 1600 | - * above the window-link wires (50) so a tie never draws across the | |
| 1601 | - * pill. It hangs over the strip a window's title bar occupies, and | |
| 1602 | - * a pill floating above someone's window is the shell talking over | |
| 1603 | - * the thing they are working in. | |
| 1604 | - */ | |
| 1605 | - --os-z-notch: 60; | |
| 1606 | - | |
| 1607 | - /* | |
| 1608 | 1896 | * Window-link ties (relation splines between windows). The accent |
| 1609 | 1897 | * follows the admin color scheme. Solid colors only — the resting |
| 1610 | 1898 | * dimming is done with stroke-opacity/fill-opacity in |
| 1611 | 1899 | * window-links.css, NOT color-mix(): an unresolvable color-mix() |
| @@ -1630,8 +1918,37 @@ | ||
| 1630 | 1918 | --os-window-link-glow: rgba(242, 82, 252, 0.45); |
| 1631 | 1919 | } |
| 1632 | 1920 | |
| 1633 | 1921 | /* |
| 1922 | + * ---- A light desk ------------------------------------------------- | |
| 1923 | + * | |
| 1924 | + * Stamped by `src/wallpapers/tone.ts` while the active wallpaper is | |
| 1925 | + * light: either it declared `tone: 'light'` (both meshes do) or, for | |
| 1926 | + * the two wallpapers the user supplies themselves, the shell measured | |
| 1927 | + * it brighter than the crossover where Void ink overtakes Starlight. | |
| 1928 | + * | |
| 1929 | + * Only things that paint DIRECTLY on the wallpaper flip, so the halos | |
| 1930 | + * invert with the ink and the caption lozenge switches off. Chrome that | |
| 1931 | + * carries its own plate does not. | |
| 1932 | + * | |
| 1933 | + * The selector carries `.os-active` to sit a class above a theme's | |
| 1934 | + * `body.os-desktop-theme-<slug>`. A theme retints the desk by naming | |
| 1935 | + * `--os-fg` / `--os-desk-ink-light`; answering the chooser instead | |
| 1936 | + * would pin one ink to every wallpaper. | |
| 1937 | + */ | |
| 1938 | +body.os-active.os-wallpaper-light { | |
| 1939 | + --os-desk-fg: var(--os-desk-ink-light, #1a1721); | |
| 1940 | + --os-icon-label-bg: transparent; | |
| 1941 | + --os-icon-label-shadow: 0 1px 2px rgba(255, 251, 255, 0.55); | |
| 1942 | + --os-icon-glyph-shadow: drop-shadow(0 1px 2px rgba(255, 251, 255, 0.5)); | |
| 1943 | + --os-icon-hover-bg: rgba(12, 11, 15, 0.12); | |
| 1944 | + --os-tile-hover-bg: rgba(12, 11, 15, 0.1); | |
| 1945 | + --os-tile-selected-bg: rgba(12, 11, 15, 0.14); | |
| 1946 | + --os-tile-fg-muted: rgba(26, 23, 33, 0.72); | |
| 1947 | + --os-tile-label-shadow: 0 1px 2px rgba(255, 251, 255, 0.55); | |
| 1948 | +} | |
| 1949 | + | |
| 1950 | +/* | |
| 1634 | 1951 | * ---- Iframe windows keep a light body ----------------------------- |
| 1635 | 1952 | * |
| 1636 | 1953 | * A window hosting a real `wp-admin` page is not a station surface — it |
| 1637 | 1954 | * is a frame around someone else's document, and that document is |
| @@ -1680,4 +1997,42 @@ | ||
| 1680 | 1997 | * user who wants their admin scheme's hue picks it in the same panel. |
| 1681 | 1998 | * The `data-os-scheme` attribute is still stamped on the |
| 1682 | 1999 | * shell root for plugins and themes that key off it. |
| 1683 | 2000 | */ |
| 2001 | + | |
| 2002 | +/* The chat is a MIO surface even when its owning window wears a light theme. | |
| 2003 | + * Component colours remain reachable through the public MIO token family. */ | |
| 2004 | +body.os-active .os-mio-chat, | |
| 2005 | +body.os-active .os-mio-chat-launcher { | |
| 2006 | + --os-ui-fg: var(--os-mio-chat-fg, #1d2327); | |
| 2007 | + --os-ui-fg-muted: var(--os-mio-chat-muted, #646970); | |
| 2008 | + --os-window-bg: var(--os-mio-chat-bg, #fff); | |
| 2009 | + --os-ui-border: var(--os-mio-chat-border, #c3c4c7); | |
| 2010 | +} | |
| 2011 | + | |
| 2012 | +/* Ghost labels sit on the chat; the hero button owns a lighter mesh. */ | |
| 2013 | +body.os-active .os-mio-chat os-button[variant="ghost"], | |
| 2014 | +body.os-active .os-mio-chat-launcher { | |
| 2015 | + --os-ui-button-fg: var(--os-mio-chat-fg, #1d2327); | |
| 2016 | + --os-ui-button-bg-hover: var(--os-mio-chat-hover-bg, #f0f0f1); | |
| 2017 | +} | |
| 2018 | + | |
| 2019 | +body.os-active .os-mio-chat os-button[variant="primary"], | |
| 2020 | +body.os-active .os-mio-chat os-button[variant="holo"] { | |
| 2021 | + --os-ui-button-fg: var(--os-ui-holo-ink, #1d2327); | |
| 2022 | +} | |
| 2023 | + | |
| 2024 | +/* The component owns the launcher's single border and rounded surface. */ | |
| 2025 | +body.os-active .os-mio-chat-launcher { | |
| 2026 | + --os-ui-button-bg: var(--os-mio-launcher-bg, #ffffffa0); | |
| 2027 | + --os-ui-button-border: 1px solid var(--os-mio-chat-border, #c3c4c7); | |
| 2028 | + --os-ui-button-border-radius: var(--os-mio-chat-radius, 22px); | |
| 2029 | +} | |
| 2030 | + | |
| 2031 | +body.os-active .os-mio-callout { | |
| 2032 | + --os-ui-button-border: 0; | |
| 2033 | + --os-ui-button-border-radius: 50%; | |
| 2034 | + --os-ui-button-padding: 0; | |
| 2035 | + --os-ui-button-bg: transparent; | |
| 2036 | + --os-ui-button-fg: var(--os-mio-callout-fg, #382b38); | |
| 2037 | + --os-ui-button-bg-hover: color-mix(in srgb, var(--os-mio-callout-fg, #382b38) 10%, transparent); | |
| 2038 | +} | |
