| @@ -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 |
| @@ -441,8 +455,20 @@ | ||
| 441 | 455 | --os-ui-field-bg: #33303a; |
| 442 | 456 | --os-ui-field-border: #4d4a52; |
| 443 | 457 | --os-ui-field-fg: #fffbff; |
| 444 | 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 | + | |
| 445 | 471 | /* Text — Starlight down through the Shade ramp. */ |
| 446 | 472 | --os-ui-fg: #fffbff; |
| 447 | 473 | --os-ui-fg-muted: #b3afb5; |
| 448 | 474 | --os-ui-fg-faint: #66636b; |
| @@ -506,8 +532,18 @@ | ||
| 506 | 532 | --os-ui-selection-fg: #fffbff; |
| 507 | 533 | |
| 508 | 534 | /* Accent — the identity moment. */ |
| 509 | 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; | |
| 510 | 546 | --os-ui-accent-strong: #ec9bff; |
| 511 | 547 | --os-ui-accent-soft: color-mix(in srgb, var(--os-ui-accent-dim) 14%, transparent); |
| 512 | 548 | /* |
| 513 | 549 | * Pulse, one step back — and the single knob for how loud the |
| @@ -748,22 +784,21 @@ | ||
| 748 | 784 | * satisfy WCAG 1.4.11. |
| 749 | 785 | */ |
| 750 | 786 | --os-ui-holo-track-edge: #66636b; |
| 751 | 787 | /* |
| 752 | - * Focus. One ring for the whole kit — Pulse, offset, over a soft | |
| 753 | - * 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 | |
| 754 | 790 | * of a legacy theme alike. |
| 755 | 791 | * |
| 756 | - * Note which layer dims and which does not. The RING is full Pulse | |
| 757 | - * and stays there: it is the only thing on screen saying where the | |
| 758 | - * keyboard is, and a focus indicator is the last place to trade | |
| 759 | - * legibility for calm. Only the bloom behind it comes down, from | |
| 760 | - * 45% to 30%, and onto the dim — which is the layer that was | |
| 761 | - * 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. | |
| 762 | 798 | */ |
| 763 | 799 | --os-ui-focus-ring: 0 0 0 2px rgba(12, 11, 15, 0.9), |
| 764 | - 0 0 0 4px var(--os-ui-accent, #f252fc), | |
| 765 | - 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); | |
| 766 | 801 | /* |
| 767 | 802 | * …and one for FIELDS, which is a different problem. A text input |
| 768 | 803 | * already has a border to thicken and it sits in a column of other |
| 769 | 804 | * inputs, so the ring above — designed to survive landing on a |
| @@ -779,27 +814,27 @@ | ||
| 779 | 814 | * The selected row of a VERTICAL `<os-tabs>`: the sidebar in |
| 780 | 815 | * OpenStation Preferences, and any native window that lays its |
| 781 | 816 | * pages down the side rather than across the top. |
| 782 | 817 | * |
| 783 | - * Three layers, and the split is the whole point. Colour repeated | |
| 784 | - * down nine rows is wallpaper, so the accent is spent as a | |
| 785 | - * two-pixel EDGE and the row itself gets only a wash that falls | |
| 786 | - * away: it appears where it is cheap to look at and expensive to | |
| 787 | - * 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. | |
| 788 | 824 | * |
| 789 | - * `-edge` is the accent the user picked, flat. It used to be | |
| 790 | - * Miomesh, and a mesh does hold up at 2px where a radial one | |
| 791 | - * would crop to an arbitrary lilac — but the edge is the loudest | |
| 792 | - * thing on the page that says "this row", and a row that says it | |
| 793 | - * in Pulse while the controls beside it say it in the chosen | |
| 794 | - * accent reads as two systems. | |
| 795 | - * | |
| 796 | - * `-wash` and `-bloom` are AMBIENT accent, so both resolve through | |
| 797 | - * `--os-ui-accent-dim` like every other glow in the kit. Turning | |
| 798 | - * the station down is still one edit. The Starlight stop in the | |
| 799 | - * middle of the wash is what keeps the row from reading as a pink | |
| 800 | - * smear: it lifts the surface under the label rather than tinting | |
| 801 | - * 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. | |
| 802 | 837 | */ |
| 803 | 838 | --os-ui-tab-edge: linear-gradient( |
| 804 | 839 | var(--os-ui-accent, #f252fc), |
| 805 | 840 | var(--os-ui-accent, #f252fc) |
| @@ -805,10 +840,15 @@ | ||
| 805 | 840 | var(--os-ui-accent, #f252fc) |
| 806 | 841 | ); |
| 807 | 842 | --os-ui-tab-wash: linear-gradient( |
| 808 | 843 | 90deg, |
| 809 | - color-mix(in srgb, var(--os-ui-accent-dim) 16%, transparent) 0%, | |
| 810 | - 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%, | |
| 811 | 851 | transparent 100% |
| 812 | 852 | ); |
| 813 | 853 | --os-ui-tab-bloom: linear-gradient( |
| 814 | 854 | 90deg, |
| @@ -814,10 +854,64 @@ | ||
| 814 | 854 | 90deg, |
| 815 | 855 | color-mix(in srgb, var(--os-ui-accent-dim) 26%, transparent), |
| 816 | 856 | transparent |
| 817 | 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; | |
| 818 | 864 | |
| 819 | 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 | + /* | |
| 820 | 914 | * ---- Motion -------------------------------------------------- |
| 821 | 915 | * |
| 822 | 916 | * Four durations and three curves, and every animated thing in the |
| 823 | 917 | * kit picks from them. Not for tidiness: a panel where the switch |
| @@ -967,10 +1061,10 @@ | ||
| 967 | 1061 | * only from the component's own `::slotted( a )`. See the comment |
| 968 | 1062 | * there: a slotted link is a document-tree element, so wp-admin's |
| 969 | 1063 | * bare `a` rule outranks anything the shadow root says about it. |
| 970 | 1064 | */ |
| 971 | - --os-ui-notice-link: #ec9bff; | |
| 972 | - --os-ui-notice-link-hover: #fffbff; | |
| 1065 | + --os-ui-notice-link: #fffbff; | |
| 1066 | + --os-ui-notice-link-hover: #ccc8ce; | |
| 973 | 1067 | --os-ui-badge-danger-bg: rgba(255, 90, 90, 0.16); |
| 974 | 1068 | --os-ui-badge-success-bg: rgba(147, 240, 198, 0.16); |
| 975 | 1069 | --os-ui-badge-warning-bg: rgba(248, 242, 182, 0.16); |
| 976 | 1070 | --os-ui-badge-info-bg: rgba(194, 241, 241, 0.16); |
| @@ -1072,16 +1166,31 @@ | ||
| 1072 | 1166 | * them under "what stays fixed" — and moving this one to Nebula put |
| 1073 | 1167 | * white cluster labels on a pale lilac chip at 1.9:1. It keeps its |
| 1074 | 1168 | * own colour, and the label keeps carrying on it. |
| 1075 | 1169 | * |
| 1076 | - * The graph's toolbar is chrome, though, and it does follow. The | |
| 1077 | - * count pill on an ACTIVE filter chip is a 70%-white fill, and it | |
| 1078 | - * was carrying `--os-ui-accent-strong` numerals — Nebula on white, | |
| 1079 | - * ~1.7:1. It is one more bright fill naming its own dark text, the | |
| 1080 | - * same escape hatch `--os-ui-ribbon-fg` and `--os-ui-step-chip-fg` | |
| 1081 | - * 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. | |
| 1082 | 1184 | */ |
| 1083 | - --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; | |
| 1084 | 1193 | |
| 1085 | 1194 | /* |
| 1086 | 1195 | * ---- The widget card's public token contract ---------------- |
| 1087 | 1196 | * |
| @@ -1320,14 +1429,22 @@ | ||
| 1320 | 1429 | --os-dock-indicator-bg: color-mix( in srgb, var( --os-ui-accent, #f252fc ) 72%, transparent ); |
| 1321 | 1430 | --os-dock-bg: rgba(12, 11, 15, 0.72); |
| 1322 | 1431 | --os-dock-icon-color: rgba(255, 251, 255, 0.72); |
| 1323 | 1432 | --os-dock-icon-color-hover: #fffbff; |
| 1324 | - --os-dock-item-bg-hover: rgba(242, 82, 252, 0.18); | |
| 1433 | + --os-dock-item-bg-hover: rgba(255, 251, 255, 0.08); | |
| 1325 | 1434 | /* |
| 1435 | + * The tile whose window is in front sits on a lit plate: the same | |
| 1436 | + * Starlight wash the hover uses, one step brighter, so "this is the | |
| 1437 | + * app you are in" reads as depth rather than as a coloured mark. | |
| 1438 | + * The running dot under every open app stays; a lit plate says | |
| 1439 | + * which one is in front, the dots say which ones are open. | |
| 1440 | + */ | |
| 1441 | + --os-dock-item-bg-focused: rgba(255, 251, 255, 0.1); | |
| 1442 | + /* | |
| 1326 | 1443 | * The status indicator and the focus ring, and both say "this |
| 1327 | 1444 | * one" about a tile the user chose — so they read the accent |
| 1328 | - * rather than a fixed Pulse. Pulse is still what an untouched | |
| 1329 | - * install shows, because that is what the picker starts on. | |
| 1445 | + * rather than a fixed colour. Starlight is what an untouched | |
| 1446 | + * install shows, because that is the accent the picker starts on. | |
| 1330 | 1447 | */ |
| 1331 | 1448 | --os-dock-item-outline: var(--os-ui-accent, #f252fc); |
| 1332 | 1449 | /* |
| 1333 | 1450 | * Hairline between the dock and the desktop. Reaches the side |
| @@ -1366,8 +1483,30 @@ | ||
| 1366 | 1483 | --os-dock-floating-highlight: rgba(255, 251, 255, 0.1); |
| 1367 | 1484 | --os-dock-floating-shadow: rgba(0, 0, 0, 0.55); |
| 1368 | 1485 | |
| 1369 | 1486 | /* |
| 1487 | + * The phone layer (`mobile.css`). Its surfaces are the dock's | |
| 1488 | + * family — translucent glass over the wallpaper, light glyphs — | |
| 1489 | + * and read the dock tokens above for fill, text and lines. What | |
| 1490 | + * the dock has no word for is declared here: the glass a tile, a | |
| 1491 | + * round control and a switcher card are cut from, its pressed | |
| 1492 | + * state, the shadow under a tile, the scrim behind the switcher, | |
| 1493 | + * and the label shadow that keeps text legible over any wallpaper. | |
| 1494 | + * A desktop theme that reskins the dock reskins the phone with it; | |
| 1495 | + * one that wants the phone alone has these. | |
| 1496 | + */ | |
| 1497 | + --os-mobile-glass: rgba(255, 251, 255, 0.1); | |
| 1498 | + --os-mobile-glass-strong: rgba(255, 251, 255, 0.16); | |
| 1499 | + --os-mobile-glass-border: rgba(255, 251, 255, 0.14); | |
| 1500 | + --os-mobile-tile-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); | |
| 1501 | + --os-mobile-card-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); | |
| 1502 | + --os-mobile-sheet-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); | |
| 1503 | + --os-mobile-window-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); | |
| 1504 | + --os-mobile-scrim: rgba(0, 0, 0, 0.55); | |
| 1505 | + --os-mobile-top-scrim: rgba(0, 0, 0, 0.45); | |
| 1506 | + --os-mobile-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); | |
| 1507 | + | |
| 1508 | + /* | |
| 1370 | 1509 | * ---- The OpenStation layout --------------------------------- |
| 1371 | 1510 | * |
| 1372 | 1511 | * The constellation: the flyout that fans a menu's submenu out of |
| 1373 | 1512 | * its tile on hover, on every rail in every layout. The rail's |
| @@ -1487,8 +1626,21 @@ | ||
| 1487 | 1626 | rgba(255, 90, 90, 0.16) |
| 1488 | 1627 | ); |
| 1489 | 1628 | --os-ai-panel-bg: rgba(26, 23, 33, 0.97); |
| 1490 | 1629 | /* |
| 1630 | + * The Site assistant, the same split as selection everywhere else: | |
| 1631 | + * its header tint and mark, search icon, lit row and icon tiles still | |
| 1632 | + * mix from the accent, and so does its send button; --os-ai-accent | |
| 1633 | + * says how much. This palette | |
| 1634 | + * answers 0%, so the chrome is neutral and a lit row is the flat 8% | |
| 1635 | + * Starlight of the Preferences sidebar; Legacy answers 100%. The | |
| 1636 | + * command icons keep the accent here too: they read it directly, so | |
| 1637 | + * the colour stays in the pictures and out of the chrome. | |
| 1638 | + */ | |
| 1639 | + --os-ai-accent: 0%; | |
| 1640 | + --os-ai-row-fill: rgba(255, 251, 255, 0.08); | |
| 1641 | + --os-ai-tile-fill: rgba(255, 251, 255, 0.06); | |
| 1642 | + /* | |
| 1491 | 1643 | * ---- Window tab strip --------------------------------------- |
| 1492 | 1644 | * |
| 1493 | 1645 | * A window with sub-pages reads as three surfaces stacked in |
| 1494 | 1646 | * depth, and the values below are that ramp: Astro on the focused |
| @@ -1567,46 +1719,54 @@ | ||
| 1567 | 1719 | #f4eff9 0%, |
| 1568 | 1720 | #ffffff 58% |
| 1569 | 1721 | ); |
| 1570 | 1722 | /* |
| 1571 | - * The crown. Holomesh, masked away before the joint for the same | |
| 1572 | - * reason. It is on exactly ONE tab at a time — that is what keeps | |
| 1573 | - * the mesh an identity moment instead of wallpaper, and it is the | |
| 1574 | - * rule the rest of the kit follows. Set it to `none` to get the | |
| 1575 | - * plain frosted plate back. | |
| 1723 | + * The crown. Holomesh over the top of the plate, masked away before | |
| 1724 | + * the joint, on exactly ONE tab at a time. Off in this palette: the | |
| 1725 | + * plain frosted plate is the tab, and the one identity moment on a | |
| 1726 | + * window is left to the wallpaper behind it. A theme that wants the | |
| 1727 | + * mesh back declares `var(--os-mesh-holo)` here, at around 0.3. | |
| 1576 | 1728 | */ |
| 1577 | - --os-tabs-active-crown: var(--os-mesh-holo); | |
| 1729 | + --os-tabs-active-crown: none; | |
| 1578 | 1730 | --os-tabs-active-crown-opacity: 0.3; |
| 1579 | 1731 | /* |
| 1580 | 1732 | * The rail: one continuous line around the silhouette of |
| 1581 | - * page-plus-tab. | |
| 1733 | + * page-plus-tab, painted as a background-image through a mask, | |
| 1734 | + * which is why it is a gradient and not a colour. It is the accent | |
| 1735 | + * the user picked, flat, and it stays derived so the pick reaches | |
| 1736 | + * it on every theme. | |
| 1582 | 1737 | * |
| 1583 | - * This is the one place the accent is spent on the tab strip, and | |
| 1584 | - * spending it here is what lets the tab itself stay uncoloured — | |
| 1585 | - * so it is the accent the user picked, flat, and not Pulsemesh. | |
| 1586 | - * A mesh here would be the accent everywhere else on the tab | |
| 1587 | - * strip disagreeing with the one line that carries it. Written as | |
| 1588 | - * a gradient rather than a colour because the rail is painted as | |
| 1589 | - * a background-image through a mask. | |
| 1590 | - * | |
| 1591 | - * Set it to `none` for the plain frosted plate with no line. | |
| 1738 | + * On this palette it is drawn at 0 opacity. The plate already | |
| 1739 | + * reads as "this tab" by being the one white shape on an Obsidian | |
| 1740 | + * strip that joins the page below it; a coloured line around that | |
| 1741 | + * silhouette was saying the same thing a second time, on every | |
| 1742 | + * window on the desk. The opacity is the literal a theme answers | |
| 1743 | + * (Legacy: 1), and the width stays at 2px because the strip's | |
| 1744 | + * geometry is built on it: the plate sits on the rail whether or | |
| 1745 | + * not the rail is visible, so turning it back on costs no seam. | |
| 1592 | 1746 | */ |
| 1593 | 1747 | --os-tabs-rail: linear-gradient( |
| 1594 | 1748 | var(--os-ui-accent, #f252fc), |
| 1595 | 1749 | var(--os-ui-accent, #f252fc) |
| 1596 | 1750 | ); |
| 1751 | + --os-tabs-rail-opacity: 0; | |
| 1597 | 1752 | --os-tabs-rail-width: 2px; |
| 1598 | 1753 | --os-media-tile-bg: rgba(255, 251, 255, 0.05); |
| 1599 | 1754 | --os-media-visual-bg: rgba(255, 251, 255, 0.04); |
| 1600 | 1755 | --os-skeleton-low: rgba(255, 251, 255, 0.05); |
| 1601 | 1756 | --os-skeleton-high: rgba(255, 251, 255, 0.13); |
| 1602 | - --os-drop-preview-bg: rgba(242, 82, 252, 0.1); | |
| 1603 | - --os-drop-preview-border: rgba(242, 82, 252, 0.55); | |
| 1757 | + --os-drop-preview-bg: rgba(255, 251, 255, 0.08); | |
| 1758 | + --os-drop-preview-border: rgba(255, 251, 255, 0.45); | |
| 1604 | 1759 | |
| 1605 | 1760 | /* |
| 1606 | 1761 | * File tiles — anywhere a `.os-file-tile` (or sibling |
| 1607 | 1762 | * canvas tile) renders. The defaults match the desk: Starlight |
| 1608 | - * labels over a dark sky, with a Pulse selection wash. | |
| 1763 | + * labels over a dark sky, and a selected tile is a lifted | |
| 1764 | + * Starlight plate, the same language as the selected row in the | |
| 1765 | + * Preferences sidebar, one step brighter than the hover wash so | |
| 1766 | + * the two states stay apart. The accent ring around it is a | |
| 1767 | + * derived colour with a literal width; this palette sets the | |
| 1768 | + * width to 0 (Legacy keeps 1px) so selection is depth, not colour. | |
| 1609 | 1769 | * |
| 1610 | 1770 | * Surfaces that are light in their own right override these in |
| 1611 | 1771 | * their own scope, e.g.: |
| 1612 | 1772 | * |
| @@ -1620,9 +1780,10 @@ | ||
| 1620 | 1780 | */ |
| 1621 | 1781 | --os-tile-fg: var(--os-fg, #fffbff); |
| 1622 | 1782 | --os-tile-fg-muted: rgba(255, 251, 255, 0.7); |
| 1623 | 1783 | --os-tile-hover-bg: rgba(255, 251, 255, 0.12); |
| 1624 | - --os-tile-selected-bg: rgba(242, 82, 252, 0.24); | |
| 1784 | + --os-tile-selected-bg: rgba(255, 251, 255, 0.16); | |
| 1785 | + --os-tile-selected-ring-width: 0px; | |
| 1625 | 1786 | --os-tile-focus-ring: var(--wp-admin-theme-color, #f252fc); |
| 1626 | 1787 | --os-tile-shortcut-bg: rgba(12, 11, 15, 0.7); |
| 1627 | 1788 | --os-tile-shortcut-fg: #fffbff; |
| 1628 | 1789 | --os-tile-shortcut-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); |
| @@ -1769,4 +1930,42 @@ | ||
| 1769 | 1930 | * user who wants their admin scheme's hue picks it in the same panel. |
| 1770 | 1931 | * The `data-os-scheme` attribute is still stamped on the |
| 1771 | 1932 | * shell root for plugins and themes that key off it. |
| 1772 | 1933 | */ |
| 1934 | + | |
| 1935 | +/* The chat is a MIO surface even when its owning window wears a light theme. | |
| 1936 | + * Component colours remain reachable through the public MIO token family. */ | |
| 1937 | +body.os-active .os-mio-chat, | |
| 1938 | +body.os-active .os-mio-chat-launcher { | |
| 1939 | + --os-ui-fg: var(--os-mio-chat-fg, #1d2327); | |
| 1940 | + --os-ui-fg-muted: var(--os-mio-chat-muted, #646970); | |
| 1941 | + --os-window-bg: var(--os-mio-chat-bg, #fff); | |
| 1942 | + --os-ui-border: var(--os-mio-chat-border, #c3c4c7); | |
| 1943 | +} | |
| 1944 | + | |
| 1945 | +/* Ghost labels sit on the chat; the hero button owns a lighter mesh. */ | |
| 1946 | +body.os-active .os-mio-chat os-button[variant="ghost"], | |
| 1947 | +body.os-active .os-mio-chat-launcher { | |
| 1948 | + --os-ui-button-fg: var(--os-mio-chat-fg, #1d2327); | |
| 1949 | + --os-ui-button-bg-hover: var(--os-mio-chat-hover-bg, #f0f0f1); | |
| 1950 | +} | |
| 1951 | + | |
| 1952 | +body.os-active .os-mio-chat os-button[variant="primary"], | |
| 1953 | +body.os-active .os-mio-chat os-button[variant="holo"] { | |
| 1954 | + --os-ui-button-fg: var(--os-ui-holo-ink, #1d2327); | |
| 1955 | +} | |
| 1956 | + | |
| 1957 | +/* The component owns the launcher's single border and rounded surface. */ | |
| 1958 | +body.os-active .os-mio-chat-launcher { | |
| 1959 | + --os-ui-button-bg: var(--os-mio-launcher-bg, #ffffffa0); | |
| 1960 | + --os-ui-button-border: 1px solid var(--os-mio-chat-border, #c3c4c7); | |
| 1961 | + --os-ui-button-border-radius: var(--os-mio-chat-radius, 22px); | |
| 1962 | +} | |
| 1963 | + | |
| 1964 | +body.os-active .os-mio-callout { | |
| 1965 | + --os-ui-button-border: 0; | |
| 1966 | + --os-ui-button-border-radius: 50%; | |
| 1967 | + --os-ui-button-padding: 0; | |
| 1968 | + --os-ui-button-bg: transparent; | |
| 1969 | + --os-ui-button-fg: var(--os-mio-callout-fg, #382b38); | |
| 1970 | + --os-ui-button-bg-hover: color-mix(in srgb, var(--os-mio-callout-fg, #382b38) 10%, transparent); | |
| 1971 | +} | |
