| @@ -140,8 +140,22 @@ | ||
| 140 | 140 | * Do not remove that dependency; see the note in |
| 141 | 141 | * `openstation_enqueue_desktop_theme_style()`. |
| 142 | 142 | */ |
| 143 | 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 | + | |
| 144 | 158 | /* |
| 145 | 159 | * ---- Desk -------------------------------------------------- |
| 146 | 160 | * |
| 147 | 161 | * `Space`, the brand's quiet deep-space backdrop: a linear |
| @@ -518,8 +532,18 @@ | ||
| 518 | 532 | --os-ui-selection-fg: #fffbff; |
| 519 | 533 | |
| 520 | 534 | /* Accent — the identity moment. */ |
| 521 | 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; | |
| 522 | 546 | --os-ui-accent-strong: #ec9bff; |
| 523 | 547 | --os-ui-accent-soft: color-mix(in srgb, var(--os-ui-accent-dim) 14%, transparent); |
| 524 | 548 | /* |
| 525 | 549 | * Pulse, one step back — and the single knob for how loud the |
| @@ -760,22 +784,21 @@ | ||
| 760 | 784 | * satisfy WCAG 1.4.11. |
| 761 | 785 | */ |
| 762 | 786 | --os-ui-holo-track-edge: #66636b; |
| 763 | 787 | /* |
| 764 | - * Focus. One ring for the whole kit — Pulse, offset, over a soft | |
| 765 | - * 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 | |
| 766 | 790 | * of a legacy theme alike. |
| 767 | 791 | * |
| 768 | - * Note which layer dims and which does not. The RING is full Pulse | |
| 769 | - * and stays there: it is the only thing on screen saying where the | |
| 770 | - * keyboard is, and a focus indicator is the last place to trade | |
| 771 | - * legibility for calm. Only the bloom behind it comes down, from | |
| 772 | - * 45% to 30%, and onto the dim — which is the layer that was | |
| 773 | - * 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. | |
| 774 | 798 | */ |
| 775 | 799 | --os-ui-focus-ring: 0 0 0 2px rgba(12, 11, 15, 0.9), |
| 776 | - 0 0 0 4px var(--os-ui-accent, #f252fc), | |
| 777 | - 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); | |
| 778 | 801 | /* |
| 779 | 802 | * …and one for FIELDS, which is a different problem. A text input |
| 780 | 803 | * already has a border to thicken and it sits in a column of other |
| 781 | 804 | * inputs, so the ring above — designed to survive landing on a |
| @@ -791,27 +814,27 @@ | ||
| 791 | 814 | * The selected row of a VERTICAL `<os-tabs>`: the sidebar in |
| 792 | 815 | * OpenStation Preferences, and any native window that lays its |
| 793 | 816 | * pages down the side rather than across the top. |
| 794 | 817 | * |
| 795 | - * Three layers, and the split is the whole point. Colour repeated | |
| 796 | - * down nine rows is wallpaper, so the accent is spent as a | |
| 797 | - * two-pixel EDGE and the row itself gets only a wash that falls | |
| 798 | - * away: it appears where it is cheap to look at and expensive to | |
| 799 | - * 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. | |
| 800 | 824 | * |
| 801 | - * `-edge` is the accent the user picked, flat. It used to be | |
| 802 | - * Miomesh, and a mesh does hold up at 2px where a radial one | |
| 803 | - * would crop to an arbitrary lilac — but the edge is the loudest | |
| 804 | - * thing on the page that says "this row", and a row that says it | |
| 805 | - * in Pulse while the controls beside it say it in the chosen | |
| 806 | - * accent reads as two systems. | |
| 807 | - * | |
| 808 | - * `-wash` and `-bloom` are AMBIENT accent, so both resolve through | |
| 809 | - * `--os-ui-accent-dim` like every other glow in the kit. Turning | |
| 810 | - * the station down is still one edit. The Starlight stop in the | |
| 811 | - * middle of the wash is what keeps the row from reading as a pink | |
| 812 | - * smear: it lifts the surface under the label rather than tinting | |
| 813 | - * 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. | |
| 814 | 837 | */ |
| 815 | 838 | --os-ui-tab-edge: linear-gradient( |
| 816 | 839 | var(--os-ui-accent, #f252fc), |
| 817 | 840 | var(--os-ui-accent, #f252fc) |
| @@ -817,10 +840,15 @@ | ||
| 817 | 840 | var(--os-ui-accent, #f252fc) |
| 818 | 841 | ); |
| 819 | 842 | --os-ui-tab-wash: linear-gradient( |
| 820 | 843 | 90deg, |
| 821 | - color-mix(in srgb, var(--os-ui-accent-dim) 16%, transparent) 0%, | |
| 822 | - 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%, | |
| 823 | 851 | transparent 100% |
| 824 | 852 | ); |
| 825 | 853 | --os-ui-tab-bloom: linear-gradient( |
| 826 | 854 | 90deg, |
| @@ -826,10 +854,64 @@ | ||
| 826 | 854 | 90deg, |
| 827 | 855 | color-mix(in srgb, var(--os-ui-accent-dim) 26%, transparent), |
| 828 | 856 | transparent |
| 829 | 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; | |
| 830 | 864 | |
| 831 | 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 | + /* | |
| 832 | 914 | * ---- Motion -------------------------------------------------- |
| 833 | 915 | * |
| 834 | 916 | * Four durations and three curves, and every animated thing in the |
| 835 | 917 | * kit picks from them. Not for tidiness: a panel where the switch |
| @@ -979,10 +1061,10 @@ | ||
| 979 | 1061 | * only from the component's own `::slotted( a )`. See the comment |
| 980 | 1062 | * there: a slotted link is a document-tree element, so wp-admin's |
| 981 | 1063 | * bare `a` rule outranks anything the shadow root says about it. |
| 982 | 1064 | */ |
| 983 | - --os-ui-notice-link: #ec9bff; | |
| 984 | - --os-ui-notice-link-hover: #fffbff; | |
| 1065 | + --os-ui-notice-link: #fffbff; | |
| 1066 | + --os-ui-notice-link-hover: #ccc8ce; | |
| 985 | 1067 | --os-ui-badge-danger-bg: rgba(255, 90, 90, 0.16); |
| 986 | 1068 | --os-ui-badge-success-bg: rgba(147, 240, 198, 0.16); |
| 987 | 1069 | --os-ui-badge-warning-bg: rgba(248, 242, 182, 0.16); |
| 988 | 1070 | --os-ui-badge-info-bg: rgba(194, 241, 241, 0.16); |
| @@ -1084,16 +1166,31 @@ | ||
| 1084 | 1166 | * them under "what stays fixed" — and moving this one to Nebula put |
| 1085 | 1167 | * white cluster labels on a pale lilac chip at 1.9:1. It keeps its |
| 1086 | 1168 | * own colour, and the label keeps carrying on it. |
| 1087 | 1169 | * |
| 1088 | - * The graph's toolbar is chrome, though, and it does follow. The | |
| 1089 | - * count pill on an ACTIVE filter chip is a 70%-white fill, and it | |
| 1090 | - * was carrying `--os-ui-accent-strong` numerals — Nebula on white, | |
| 1091 | - * ~1.7:1. It is one more bright fill naming its own dark text, the | |
| 1092 | - * same escape hatch `--os-ui-ribbon-fg` and `--os-ui-step-chip-fg` | |
| 1093 | - * 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. | |
| 1094 | 1184 | */ |
| 1095 | - --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; | |
| 1096 | 1193 | |
| 1097 | 1194 | /* |
| 1098 | 1195 | * ---- The widget card's public token contract ---------------- |
| 1099 | 1196 | * |
| @@ -1274,8 +1371,53 @@ | ||
| 1274 | 1371 | --os-dock-recycle-badge-bg: rgba(26, 23, 33, 0.85); |
| 1275 | 1372 | --os-dock-recycle-badge-fg: rgba(255, 251, 255, 0.92); |
| 1276 | 1373 | |
| 1277 | 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 | + /* | |
| 1278 | 1420 | * ---- Tooltips --------------------------------------------- |
| 1279 | 1421 | * |
| 1280 | 1422 | * Two tokens own every tooltip CHIP in the shell — the dock tile |
| 1281 | 1423 | * tooltip and the content-graph satellite tooltip. |
| @@ -1332,14 +1474,22 @@ | ||
| 1332 | 1474 | --os-dock-indicator-bg: color-mix( in srgb, var( --os-ui-accent, #f252fc ) 72%, transparent ); |
| 1333 | 1475 | --os-dock-bg: rgba(12, 11, 15, 0.72); |
| 1334 | 1476 | --os-dock-icon-color: rgba(255, 251, 255, 0.72); |
| 1335 | 1477 | --os-dock-icon-color-hover: #fffbff; |
| 1336 | - --os-dock-item-bg-hover: rgba(242, 82, 252, 0.18); | |
| 1478 | + --os-dock-item-bg-hover: rgba(255, 251, 255, 0.08); | |
| 1337 | 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 | + /* | |
| 1338 | 1488 | * The status indicator and the focus ring, and both say "this |
| 1339 | 1489 | * one" about a tile the user chose — so they read the accent |
| 1340 | - * rather than a fixed Pulse. Pulse is still what an untouched | |
| 1341 | - * 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. | |
| 1342 | 1492 | */ |
| 1343 | 1493 | --os-dock-item-outline: var(--os-ui-accent, #f252fc); |
| 1344 | 1494 | /* |
| 1345 | 1495 | * Hairline between the dock and the desktop. Reaches the side |
| @@ -1521,8 +1671,21 @@ | ||
| 1521 | 1671 | rgba(255, 90, 90, 0.16) |
| 1522 | 1672 | ); |
| 1523 | 1673 | --os-ai-panel-bg: rgba(26, 23, 33, 0.97); |
| 1524 | 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 | + /* | |
| 1525 | 1688 | * ---- Window tab strip --------------------------------------- |
| 1526 | 1689 | * |
| 1527 | 1690 | * A window with sub-pages reads as three surfaces stacked in |
| 1528 | 1691 | * depth, and the values below are that ramp: Astro on the focused |
| @@ -1601,46 +1764,54 @@ | ||
| 1601 | 1764 | #f4eff9 0%, |
| 1602 | 1765 | #ffffff 58% |
| 1603 | 1766 | ); |
| 1604 | 1767 | /* |
| 1605 | - * The crown. Holomesh, masked away before the joint for the same | |
| 1606 | - * reason. It is on exactly ONE tab at a time — that is what keeps | |
| 1607 | - * the mesh an identity moment instead of wallpaper, and it is the | |
| 1608 | - * rule the rest of the kit follows. Set it to `none` to get the | |
| 1609 | - * 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. | |
| 1610 | 1773 | */ |
| 1611 | - --os-tabs-active-crown: var(--os-mesh-holo); | |
| 1774 | + --os-tabs-active-crown: none; | |
| 1612 | 1775 | --os-tabs-active-crown-opacity: 0.3; |
| 1613 | 1776 | /* |
| 1614 | 1777 | * The rail: one continuous line around the silhouette of |
| 1615 | - * 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. | |
| 1616 | 1782 | * |
| 1617 | - * This is the one place the accent is spent on the tab strip, and | |
| 1618 | - * spending it here is what lets the tab itself stay uncoloured — | |
| 1619 | - * so it is the accent the user picked, flat, and not Pulsemesh. | |
| 1620 | - * A mesh here would be the accent everywhere else on the tab | |
| 1621 | - * strip disagreeing with the one line that carries it. Written as | |
| 1622 | - * a gradient rather than a colour because the rail is painted as | |
| 1623 | - * a background-image through a mask. | |
| 1624 | - * | |
| 1625 | - * 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. | |
| 1626 | 1791 | */ |
| 1627 | 1792 | --os-tabs-rail: linear-gradient( |
| 1628 | 1793 | var(--os-ui-accent, #f252fc), |
| 1629 | 1794 | var(--os-ui-accent, #f252fc) |
| 1630 | 1795 | ); |
| 1796 | + --os-tabs-rail-opacity: 0; | |
| 1631 | 1797 | --os-tabs-rail-width: 2px; |
| 1632 | 1798 | --os-media-tile-bg: rgba(255, 251, 255, 0.05); |
| 1633 | 1799 | --os-media-visual-bg: rgba(255, 251, 255, 0.04); |
| 1634 | 1800 | --os-skeleton-low: rgba(255, 251, 255, 0.05); |
| 1635 | 1801 | --os-skeleton-high: rgba(255, 251, 255, 0.13); |
| 1636 | - --os-drop-preview-bg: rgba(242, 82, 252, 0.1); | |
| 1637 | - --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); | |
| 1638 | 1804 | |
| 1639 | 1805 | /* |
| 1640 | 1806 | * File tiles — anywhere a `.os-file-tile` (or sibling |
| 1641 | 1807 | * canvas tile) renders. The defaults match the desk: Starlight |
| 1642 | - * 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. | |
| 1643 | 1814 | * |
| 1644 | 1815 | * Surfaces that are light in their own right override these in |
| 1645 | 1816 | * their own scope, e.g.: |
| 1646 | 1817 | * |
| @@ -1651,12 +1822,15 @@ | ||
| 1651 | 1822 | * |
| 1652 | 1823 | * Plugin authors can override any of these in their own theme |
| 1653 | 1824 | * to retint tiles globally without touching the rules below. |
| 1654 | 1825 | */ |
| 1655 | - --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)); | |
| 1656 | 1829 | --os-tile-fg-muted: rgba(255, 251, 255, 0.7); |
| 1657 | 1830 | --os-tile-hover-bg: rgba(255, 251, 255, 0.12); |
| 1658 | - --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; | |
| 1659 | 1833 | --os-tile-focus-ring: var(--wp-admin-theme-color, #f252fc); |
| 1660 | 1834 | --os-tile-shortcut-bg: rgba(12, 11, 15, 0.7); |
| 1661 | 1835 | --os-tile-shortcut-fg: #fffbff; |
| 1662 | 1836 | --os-tile-shortcut-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); |
| @@ -1718,17 +1892,8 @@ | ||
| 1718 | 1892 | * the thing that gets perched on. Still under the dock (200). |
| 1719 | 1893 | */ |
| 1720 | 1894 | --os-z-desktop-name: 195; |
| 1721 | 1895 | /* |
| 1722 | - * The notch — on the desk, under the windows (100 + stack index), | |
| 1723 | - * above the window-link wires (50) so a tie never draws across the | |
| 1724 | - * pill. It hangs over the strip a window's title bar occupies, and | |
| 1725 | - * a pill floating above someone's window is the shell talking over | |
| 1726 | - * the thing they are working in. | |
| 1727 | - */ | |
| 1728 | - --os-z-notch: 60; | |
| 1729 | - | |
| 1730 | - /* | |
| 1731 | 1896 | * Window-link ties (relation splines between windows). The accent |
| 1732 | 1897 | * follows the admin color scheme. Solid colors only — the resting |
| 1733 | 1898 | * dimming is done with stroke-opacity/fill-opacity in |
| 1734 | 1899 | * window-links.css, NOT color-mix(): an unresolvable color-mix() |
| @@ -1753,8 +1918,37 @@ | ||
| 1753 | 1918 | --os-window-link-glow: rgba(242, 82, 252, 0.45); |
| 1754 | 1919 | } |
| 1755 | 1920 | |
| 1756 | 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 | +/* | |
| 1757 | 1951 | * ---- Iframe windows keep a light body ----------------------------- |
| 1758 | 1952 | * |
| 1759 | 1953 | * A window hosting a real `wp-admin` page is not a station surface — it |
| 1760 | 1954 | * is a frame around someone else's document, and that document is |
| @@ -1803,4 +1997,42 @@ | ||
| 1803 | 1997 | * user who wants their admin scheme's hue picks it in the same panel. |
| 1804 | 1998 | * The `data-os-scheme` attribute is still stamped on the |
| 1805 | 1999 | * shell root for plugins and themes that key off it. |
| 1806 | 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 | +} | |
