| @@ -532,8 +532,18 @@ | ||
| 532 | 532 | --os-ui-selection-fg: #fffbff; |
| 533 | 533 | |
| 534 | 534 | /* Accent — the identity moment. */ |
| 535 | 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; | |
| 536 | 546 | --os-ui-accent-strong: #ec9bff; |
| 537 | 547 | --os-ui-accent-soft: color-mix(in srgb, var(--os-ui-accent-dim) 14%, transparent); |
| 538 | 548 | /* |
| 539 | 549 | * Pulse, one step back — and the single knob for how loud the |
| @@ -774,22 +784,21 @@ | ||
| 774 | 784 | * satisfy WCAG 1.4.11. |
| 775 | 785 | */ |
| 776 | 786 | --os-ui-holo-track-edge: #66636b; |
| 777 | 787 | /* |
| 778 | - * Focus. One ring for the whole kit — Pulse, offset, over a soft | |
| 779 | - * 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 | |
| 780 | 790 | * of a legacy theme alike. |
| 781 | 791 | * |
| 782 | - * Note which layer dims and which does not. The RING is full Pulse | |
| 783 | - * and stays there: it is the only thing on screen saying where the | |
| 784 | - * keyboard is, and a focus indicator is the last place to trade | |
| 785 | - * legibility for calm. Only the bloom behind it comes down, from | |
| 786 | - * 45% to 30%, and onto the dim — which is the layer that was | |
| 787 | - * 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. | |
| 788 | 798 | */ |
| 789 | 799 | --os-ui-focus-ring: 0 0 0 2px rgba(12, 11, 15, 0.9), |
| 790 | - 0 0 0 4px var(--os-ui-accent, #f252fc), | |
| 791 | - 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); | |
| 792 | 801 | /* |
| 793 | 802 | * …and one for FIELDS, which is a different problem. A text input |
| 794 | 803 | * already has a border to thicken and it sits in a column of other |
| 795 | 804 | * inputs, so the ring above — designed to survive landing on a |
| @@ -805,27 +814,27 @@ | ||
| 805 | 814 | * The selected row of a VERTICAL `<os-tabs>`: the sidebar in |
| 806 | 815 | * OpenStation Preferences, and any native window that lays its |
| 807 | 816 | * pages down the side rather than across the top. |
| 808 | 817 | * |
| 809 | - * Three layers, and the split is the whole point. Colour repeated | |
| 810 | - * down nine rows is wallpaper, so the accent is spent as a | |
| 811 | - * two-pixel EDGE and the row itself gets only a wash that falls | |
| 812 | - * away: it appears where it is cheap to look at and expensive to | |
| 813 | - * 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. | |
| 814 | 824 | * |
| 815 | - * `-edge` is the accent the user picked, flat. It used to be | |
| 816 | - * Miomesh, and a mesh does hold up at 2px where a radial one | |
| 817 | - * would crop to an arbitrary lilac — but the edge is the loudest | |
| 818 | - * thing on the page that says "this row", and a row that says it | |
| 819 | - * in Pulse while the controls beside it say it in the chosen | |
| 820 | - * accent reads as two systems. | |
| 821 | - * | |
| 822 | - * `-wash` and `-bloom` are AMBIENT accent, so both resolve through | |
| 823 | - * `--os-ui-accent-dim` like every other glow in the kit. Turning | |
| 824 | - * the station down is still one edit. The Starlight stop in the | |
| 825 | - * middle of the wash is what keeps the row from reading as a pink | |
| 826 | - * smear: it lifts the surface under the label rather than tinting | |
| 827 | - * 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. | |
| 828 | 837 | */ |
| 829 | 838 | --os-ui-tab-edge: linear-gradient( |
| 830 | 839 | var(--os-ui-accent, #f252fc), |
| 831 | 840 | var(--os-ui-accent, #f252fc) |
| @@ -831,10 +840,15 @@ | ||
| 831 | 840 | var(--os-ui-accent, #f252fc) |
| 832 | 841 | ); |
| 833 | 842 | --os-ui-tab-wash: linear-gradient( |
| 834 | 843 | 90deg, |
| 835 | - color-mix(in srgb, var(--os-ui-accent-dim) 16%, transparent) 0%, | |
| 836 | - 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%, | |
| 837 | 851 | transparent 100% |
| 838 | 852 | ); |
| 839 | 853 | --os-ui-tab-bloom: linear-gradient( |
| 840 | 854 | 90deg, |
| @@ -840,10 +854,64 @@ | ||
| 840 | 854 | 90deg, |
| 841 | 855 | color-mix(in srgb, var(--os-ui-accent-dim) 26%, transparent), |
| 842 | 856 | transparent |
| 843 | 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; | |
| 844 | 864 | |
| 845 | 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 | + /* | |
| 846 | 914 | * ---- Motion -------------------------------------------------- |
| 847 | 915 | * |
| 848 | 916 | * Four durations and three curves, and every animated thing in the |
| 849 | 917 | * kit picks from them. Not for tidiness: a panel where the switch |
| @@ -993,10 +1061,10 @@ | ||
| 993 | 1061 | * only from the component's own `::slotted( a )`. See the comment |
| 994 | 1062 | * there: a slotted link is a document-tree element, so wp-admin's |
| 995 | 1063 | * bare `a` rule outranks anything the shadow root says about it. |
| 996 | 1064 | */ |
| 997 | - --os-ui-notice-link: #ec9bff; | |
| 998 | - --os-ui-notice-link-hover: #fffbff; | |
| 1065 | + --os-ui-notice-link: #fffbff; | |
| 1066 | + --os-ui-notice-link-hover: #ccc8ce; | |
| 999 | 1067 | --os-ui-badge-danger-bg: rgba(255, 90, 90, 0.16); |
| 1000 | 1068 | --os-ui-badge-success-bg: rgba(147, 240, 198, 0.16); |
| 1001 | 1069 | --os-ui-badge-warning-bg: rgba(248, 242, 182, 0.16); |
| 1002 | 1070 | --os-ui-badge-info-bg: rgba(194, 241, 241, 0.16); |
| @@ -1098,16 +1166,31 @@ | ||
| 1098 | 1166 | * them under "what stays fixed" — and moving this one to Nebula put |
| 1099 | 1167 | * white cluster labels on a pale lilac chip at 1.9:1. It keeps its |
| 1100 | 1168 | * own colour, and the label keeps carrying on it. |
| 1101 | 1169 | * |
| 1102 | - * The graph's toolbar is chrome, though, and it does follow. The | |
| 1103 | - * count pill on an ACTIVE filter chip is a 70%-white fill, and it | |
| 1104 | - * was carrying `--os-ui-accent-strong` numerals — Nebula on white, | |
| 1105 | - * ~1.7:1. It is one more bright fill naming its own dark text, the | |
| 1106 | - * same escape hatch `--os-ui-ribbon-fg` and `--os-ui-step-chip-fg` | |
| 1107 | - * 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. | |
| 1108 | 1184 | */ |
| 1109 | - --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; | |
| 1110 | 1193 | |
| 1111 | 1194 | /* |
| 1112 | 1195 | * ---- The widget card's public token contract ---------------- |
| 1113 | 1196 | * |
| @@ -1288,8 +1371,53 @@ | ||
| 1288 | 1371 | --os-dock-recycle-badge-bg: rgba(26, 23, 33, 0.85); |
| 1289 | 1372 | --os-dock-recycle-badge-fg: rgba(255, 251, 255, 0.92); |
| 1290 | 1373 | |
| 1291 | 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 | + /* | |
| 1292 | 1420 | * ---- Tooltips --------------------------------------------- |
| 1293 | 1421 | * |
| 1294 | 1422 | * Two tokens own every tooltip CHIP in the shell — the dock tile |
| 1295 | 1423 | * tooltip and the content-graph satellite tooltip. |
| @@ -1346,14 +1474,22 @@ | ||
| 1346 | 1474 | --os-dock-indicator-bg: color-mix( in srgb, var( --os-ui-accent, #f252fc ) 72%, transparent ); |
| 1347 | 1475 | --os-dock-bg: rgba(12, 11, 15, 0.72); |
| 1348 | 1476 | --os-dock-icon-color: rgba(255, 251, 255, 0.72); |
| 1349 | 1477 | --os-dock-icon-color-hover: #fffbff; |
| 1350 | - --os-dock-item-bg-hover: rgba(242, 82, 252, 0.18); | |
| 1478 | + --os-dock-item-bg-hover: rgba(255, 251, 255, 0.08); | |
| 1351 | 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 | + /* | |
| 1352 | 1488 | * The status indicator and the focus ring, and both say "this |
| 1353 | 1489 | * one" about a tile the user chose — so they read the accent |
| 1354 | - * rather than a fixed Pulse. Pulse is still what an untouched | |
| 1355 | - * 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. | |
| 1356 | 1492 | */ |
| 1357 | 1493 | --os-dock-item-outline: var(--os-ui-accent, #f252fc); |
| 1358 | 1494 | /* |
| 1359 | 1495 | * Hairline between the dock and the desktop. Reaches the side |
| @@ -1535,8 +1671,21 @@ | ||
| 1535 | 1671 | rgba(255, 90, 90, 0.16) |
| 1536 | 1672 | ); |
| 1537 | 1673 | --os-ai-panel-bg: rgba(26, 23, 33, 0.97); |
| 1538 | 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 | + /* | |
| 1539 | 1688 | * ---- Window tab strip --------------------------------------- |
| 1540 | 1689 | * |
| 1541 | 1690 | * A window with sub-pages reads as three surfaces stacked in |
| 1542 | 1691 | * depth, and the values below are that ramp: Astro on the focused |
| @@ -1615,46 +1764,54 @@ | ||
| 1615 | 1764 | #f4eff9 0%, |
| 1616 | 1765 | #ffffff 58% |
| 1617 | 1766 | ); |
| 1618 | 1767 | /* |
| 1619 | - * The crown. Holomesh, masked away before the joint for the same | |
| 1620 | - * reason. It is on exactly ONE tab at a time — that is what keeps | |
| 1621 | - * the mesh an identity moment instead of wallpaper, and it is the | |
| 1622 | - * rule the rest of the kit follows. Set it to `none` to get the | |
| 1623 | - * 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. | |
| 1624 | 1773 | */ |
| 1625 | - --os-tabs-active-crown: var(--os-mesh-holo); | |
| 1774 | + --os-tabs-active-crown: none; | |
| 1626 | 1775 | --os-tabs-active-crown-opacity: 0.3; |
| 1627 | 1776 | /* |
| 1628 | 1777 | * The rail: one continuous line around the silhouette of |
| 1629 | - * 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. | |
| 1630 | 1782 | * |
| 1631 | - * This is the one place the accent is spent on the tab strip, and | |
| 1632 | - * spending it here is what lets the tab itself stay uncoloured — | |
| 1633 | - * so it is the accent the user picked, flat, and not Pulsemesh. | |
| 1634 | - * A mesh here would be the accent everywhere else on the tab | |
| 1635 | - * strip disagreeing with the one line that carries it. Written as | |
| 1636 | - * a gradient rather than a colour because the rail is painted as | |
| 1637 | - * a background-image through a mask. | |
| 1638 | - * | |
| 1639 | - * 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. | |
| 1640 | 1791 | */ |
| 1641 | 1792 | --os-tabs-rail: linear-gradient( |
| 1642 | 1793 | var(--os-ui-accent, #f252fc), |
| 1643 | 1794 | var(--os-ui-accent, #f252fc) |
| 1644 | 1795 | ); |
| 1796 | + --os-tabs-rail-opacity: 0; | |
| 1645 | 1797 | --os-tabs-rail-width: 2px; |
| 1646 | 1798 | --os-media-tile-bg: rgba(255, 251, 255, 0.05); |
| 1647 | 1799 | --os-media-visual-bg: rgba(255, 251, 255, 0.04); |
| 1648 | 1800 | --os-skeleton-low: rgba(255, 251, 255, 0.05); |
| 1649 | 1801 | --os-skeleton-high: rgba(255, 251, 255, 0.13); |
| 1650 | - --os-drop-preview-bg: rgba(242, 82, 252, 0.1); | |
| 1651 | - --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); | |
| 1652 | 1804 | |
| 1653 | 1805 | /* |
| 1654 | 1806 | * File tiles — anywhere a `.os-file-tile` (or sibling |
| 1655 | 1807 | * canvas tile) renders. The defaults match the desk: Starlight |
| 1656 | - * 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. | |
| 1657 | 1814 | * |
| 1658 | 1815 | * Surfaces that are light in their own right override these in |
| 1659 | 1816 | * their own scope, e.g.: |
| 1660 | 1817 | * |
| @@ -1665,12 +1822,15 @@ | ||
| 1665 | 1822 | * |
| 1666 | 1823 | * Plugin authors can override any of these in their own theme |
| 1667 | 1824 | * to retint tiles globally without touching the rules below. |
| 1668 | 1825 | */ |
| 1669 | - --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)); | |
| 1670 | 1829 | --os-tile-fg-muted: rgba(255, 251, 255, 0.7); |
| 1671 | 1830 | --os-tile-hover-bg: rgba(255, 251, 255, 0.12); |
| 1672 | - --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; | |
| 1673 | 1833 | --os-tile-focus-ring: var(--wp-admin-theme-color, #f252fc); |
| 1674 | 1834 | --os-tile-shortcut-bg: rgba(12, 11, 15, 0.7); |
| 1675 | 1835 | --os-tile-shortcut-fg: #fffbff; |
| 1676 | 1836 | --os-tile-shortcut-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); |
| @@ -1732,17 +1892,8 @@ | ||
| 1732 | 1892 | * the thing that gets perched on. Still under the dock (200). |
| 1733 | 1893 | */ |
| 1734 | 1894 | --os-z-desktop-name: 195; |
| 1735 | 1895 | /* |
| 1736 | - * The notch — on the desk, under the windows (100 + stack index), | |
| 1737 | - * above the window-link wires (50) so a tie never draws across the | |
| 1738 | - * pill. It hangs over the strip a window's title bar occupies, and | |
| 1739 | - * a pill floating above someone's window is the shell talking over | |
| 1740 | - * the thing they are working in. | |
| 1741 | - */ | |
| 1742 | - --os-z-notch: 60; | |
| 1743 | - | |
| 1744 | - /* | |
| 1745 | 1896 | * Window-link ties (relation splines between windows). The accent |
| 1746 | 1897 | * follows the admin color scheme. Solid colors only — the resting |
| 1747 | 1898 | * dimming is done with stroke-opacity/fill-opacity in |
| 1748 | 1899 | * window-links.css, NOT color-mix(): an unresolvable color-mix() |
| @@ -1764,8 +1915,37 @@ | ||
| 1764 | 1915 | * included) would go invalid. Schemes/plugins that retint the |
| 1765 | 1916 | * accent should override this too. |
| 1766 | 1917 | */ |
| 1767 | 1918 | --os-window-link-glow: rgba(242, 82, 252, 0.45); |
| 1919 | +} | |
| 1920 | + | |
| 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); | |
| 1768 | 1948 | } |
| 1769 | 1949 | |
| 1770 | 1950 | /* |
| 1771 | 1951 | * ---- Iframe windows keep a light body ----------------------------- |
