| @@ -3,10 +3,20 @@ | ||
| 3 | 3 | * |
| 4 | 4 | * A system-level command palette that floats above the entire shell, |
| 5 | 5 | * including the WP admin bar. Visually modeled on macOS Spotlight and |
| 6 | 6 | * Linear's command menu — frosted-glass backdrop, spring-physics panel |
| 7 | - * entrance, large search input, accent-tinted header. | |
| 7 | + * entrance, large search input. | |
| 8 | 8 | * |
| 9 | + * ## How much accent the chrome shows | |
| 10 | + * | |
| 11 | + * Every accent-derived surface below (the header tint and its mark, the | |
| 12 | + * search icon, a selected or hovered row, the icon tiles) mixes the | |
| 13 | + * accent by --os-ai-accent towards a neutral. Unset that is 100%, the | |
| 14 | + * accent-tinted panel this has always been; the OpenStation palette | |
| 15 | + * answers 0% and lifts rows and tiles with --os-ai-row-fill and | |
| 16 | + * --os-ai-tile-fill instead. The command icons themselves are not part | |
| 17 | + * of it: they read the accent directly, in every palette. | |
| 18 | + * | |
| 9 | 19 | * z-index 10000 puts this above --os-z-adminbar (9991) so the |
| 10 | 20 | * overlay truly covers the full viewport. |
| 11 | 21 | * |
| 12 | 22 | * ## Desktop-theme awareness |
| @@ -100,8 +110,9 @@ | ||
| 100 | 110 | background-repeat: var( --os-ui-dialog-bg-image-repeat, repeat ); |
| 101 | 111 | background-size: var( --os-ui-dialog-bg-image-size, auto ); |
| 102 | 112 | background-position: var( --os-ui-dialog-bg-image-position, center ); |
| 103 | 113 | color: var( --os-ui-fg, #1d2327 ); |
| 114 | + font-family: var( --os-ui-font, inherit ); | |
| 104 | 115 | border-radius: 16px; |
| 105 | 116 | overflow: hidden; |
| 106 | 117 | |
| 107 | 118 | /* Tight under-shadow + wide atmospheric shadow. The hairline ring |
| @@ -123,49 +134,12 @@ | ||
| 123 | 134 | .os-ai.is-open .os-ai__panel { |
| 124 | 135 | transform: scale( 1 ) translateY( 0 ); |
| 125 | 136 | } |
| 126 | 137 | |
| 127 | -/* --------------------------------------------------------------------------- | |
| 128 | - * Header — accent-tinted identity strip | |
| 129 | - * ------------------------------------------------------------------------- */ | |
| 130 | - | |
| 131 | -.os-ai__header { | |
| 132 | - display: flex; | |
| 133 | - align-items: center; | |
| 134 | - gap: 8px; | |
| 135 | - padding: 10px 14px; | |
| 136 | - /* Gradient fades from a very faint accent tint to white — visible | |
| 137 | - on fresh/blue schemes, subtle on light schemes. */ | |
| 138 | - background: linear-gradient( | |
| 139 | - to bottom, | |
| 140 | - color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 8%, var( --os-ui-surface, #fff ) ), | |
| 141 | - var( --os-ui-surface, #fff ) | |
| 142 | - ); | |
| 143 | - border-bottom: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.06 ) ); | |
| 144 | -} | |
| 145 | - | |
| 146 | -.os-ai__header-icon { | |
| 147 | - display: flex; | |
| 148 | - align-items: center; | |
| 149 | - color: var( --wp-admin-theme-color, #2271b1 ); | |
| 150 | - /* Glow so the sparkle feels alive on dark or saturated themes */ | |
| 151 | - filter: drop-shadow( | |
| 152 | - 0 0 5px color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 55%, transparent ) | |
| 153 | - ); | |
| 154 | -} | |
| 155 | - | |
| 156 | -.os-ai__header-label { | |
| 157 | - flex: 1; | |
| 158 | - font-size: 11px; | |
| 159 | - font-weight: 700; | |
| 160 | - letter-spacing: 0.09em; | |
| 161 | - text-transform: uppercase; | |
| 162 | - color: var( --wp-admin-theme-color, #2271b1 ); | |
| 163 | -} | |
| 164 | - | |
| 165 | -/* Mode switch (Commands ↔ AI) — a small segmented pill in the header. | |
| 166 | - Shown only when AI is available; replaces the `/` shortcut. */ | |
| 138 | +/* Mode switch (Commands ↔ AI) — a small segmented pill at the end of | |
| 139 | + the input row. Always shown; replaces the `/` shortcut. */ | |
| 167 | 140 | .os-ai__modes { |
| 141 | + flex-shrink: 0; | |
| 168 | 142 | display: inline-flex; |
| 169 | 143 | gap: 2px; |
| 170 | 144 | padding: 2px; |
| 171 | 145 | border-radius: 999px; |
| @@ -171,12 +145,8 @@ | ||
| 171 | 145 | border-radius: 999px; |
| 172 | 146 | background: var( --os-ui-hover, rgba( 0, 0, 0, 0.05 ) ); |
| 173 | 147 | } |
| 174 | 148 | |
| 175 | -.os-ai__modes[hidden] { | |
| 176 | - display: none; | |
| 177 | -} | |
| 178 | - | |
| 179 | 149 | .os-ai__mode { |
| 180 | 150 | appearance: none; |
| 181 | 151 | border: 0; |
| 182 | 152 | cursor: pointer; |
| @@ -193,9 +163,9 @@ | ||
| 193 | 163 | color: var( --os-ui-fg, #1d2327 ); |
| 194 | 164 | } |
| 195 | 165 | |
| 196 | 166 | .os-ai__mode.is-active { |
| 197 | - /* Elevated first: the pill sits ON the header, which is already | |
| 167 | + /* Elevated first: the pill sits ON the panel, which is already | |
| 198 | 168 | `--os-ui-surface`, so a theme that distinguishes the two keeps the |
| 199 | 169 | active segment readable. Falls through to plain surface, which is |
| 200 | 170 | the default look. */ |
| 201 | 171 | background: var( --os-ui-surface-elevated, var( --os-ui-surface, #fff ) ); |
| @@ -207,10 +177,8 @@ | ||
| 207 | 177 | outline: 2px solid var( --wp-admin-theme-color, #2271b1 ); |
| 208 | 178 | outline-offset: 1px; |
| 209 | 179 | } |
| 210 | 180 | |
| 211 | -/* .os-ai__close styles moved to the bottom results section */ | |
| 212 | - | |
| 213 | 181 | /* --------------------------------------------------------------------------- |
| 214 | 182 | * Input row — the main interaction surface |
| 215 | 183 | * ------------------------------------------------------------------------- */ |
| 216 | 184 | |
| @@ -227,21 +195,29 @@ | ||
| 227 | 195 | .os-ai__input-wrap:has( .os-ai__input:focus ) { |
| 228 | 196 | border-bottom-color: var( --os-ui-border, rgba( 0, 0, 0, 0.06 ) ); |
| 229 | 197 | } |
| 230 | 198 | |
| 231 | -/* Input-row sparkle — visible always, tints toward the accent on focus | |
| 232 | - so the panel reads as "AI assistant" rather than "search box". */ | |
| 199 | +/* Input-row icon: dim at rest, full strength on focus. At rest it is | |
| 200 | + the accent at 55% alpha, mixed by --os-ai-accent towards the faint | |
| 201 | + text colour; focused, the accent mixed towards the text colour. */ | |
| 233 | 202 | .os-ai__input-icon { |
| 234 | 203 | flex-shrink: 0; |
| 235 | 204 | display: flex; |
| 236 | 205 | align-items: center; |
| 237 | - color: var( --wp-admin-theme-color, #2271b1 ); | |
| 238 | - opacity: 0.55; | |
| 239 | - transition: opacity 0.18s ease, transform 0.18s ease; | |
| 206 | + color: color-mix( | |
| 207 | + in srgb, | |
| 208 | + color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 55%, transparent ) var( --os-ai-accent, 100% ), | |
| 209 | + var( --os-ui-fg-faint, #c3c4c7 ) | |
| 210 | + ); | |
| 211 | + transition: color 0.18s ease, transform 0.18s ease; | |
| 240 | 212 | } |
| 241 | 213 | |
| 242 | 214 | .os-ai__input-wrap:has( .os-ai__input:focus ) .os-ai__input-icon { |
| 243 | - opacity: 1; | |
| 215 | + color: color-mix( | |
| 216 | + in srgb, | |
| 217 | + var( --wp-admin-theme-color, #2271b1 ) var( --os-ai-accent, 100% ), | |
| 218 | + var( --os-ui-fg, #1d2327 ) | |
| 219 | + ); | |
| 244 | 220 | transform: scale( 1.08 ); |
| 245 | 221 | } |
| 246 | 222 | |
| 247 | 223 | /* |
| @@ -307,10 +283,25 @@ | ||
| 307 | 283 | width: 30px; |
| 308 | 284 | height: 30px; |
| 309 | 285 | border: none; |
| 310 | 286 | border-radius: 8px; |
| 311 | - background: var( --wp-admin-theme-color, #2271b1 ); | |
| 312 | - color: var( --os-ui-fg-on-accent, #fff ); | |
| 287 | + /* An accent key at --os-ai-accent's strength. At 0 it is an icon tile | |
| 288 | + like the command rows' (the neutral fill, the glyph in the accent); | |
| 289 | + at 100% the filled accent button with its ink. */ | |
| 290 | + background-color: color-mix( | |
| 291 | + in srgb, | |
| 292 | + var( --wp-admin-theme-color, #2271b1 ) var( --os-ai-accent, 100% ), | |
| 293 | + transparent | |
| 294 | + ); | |
| 295 | + background-image: linear-gradient( | |
| 296 | + var( --os-ai-tile-fill, transparent ), | |
| 297 | + var( --os-ai-tile-fill, transparent ) | |
| 298 | + ); | |
| 299 | + color: color-mix( | |
| 300 | + in srgb, | |
| 301 | + var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) ) var( --os-ai-accent, 100% ), | |
| 302 | + var( --wp-admin-theme-color, #2271b1 ) | |
| 303 | + ); | |
| 313 | 304 | cursor: pointer; |
| 314 | 305 | padding: 0; |
| 315 | 306 | opacity: 0; |
| 316 | 307 | transform: scale( 0.7 ); |
| @@ -368,40 +359,8 @@ | ||
| 368 | 359 | /* (The admin-bar button styles are added inline in PHP to keep them |
| 369 | 360 | on the admin-bar handle so they load even before os.js.) */ |
| 370 | 361 | |
| 371 | 362 | /* --------------------------------------------------------------------------- |
| 372 | - * Close button — × icon, top-right of header | |
| 373 | - * ------------------------------------------------------------------------- */ | |
| 374 | - | |
| 375 | -.os-ai__close { | |
| 376 | - display: inline-flex; | |
| 377 | - align-items: center; | |
| 378 | - justify-content: center; | |
| 379 | - width: 28px; | |
| 380 | - height: 28px; | |
| 381 | - appearance: none; | |
| 382 | - background: var( --os-ui-hover, rgba( 0, 0, 0, 0.05 ) ); | |
| 383 | - border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.1 ) ); | |
| 384 | - border-radius: 6px; | |
| 385 | - cursor: pointer; | |
| 386 | - color: var( --os-ui-fg-muted, #646970 ); | |
| 387 | - padding: 0; | |
| 388 | - flex-shrink: 0; | |
| 389 | - transition: background 0.1s, color 0.1s, border-color 0.1s; | |
| 390 | -} | |
| 391 | - | |
| 392 | -.os-ai__close:hover { | |
| 393 | - background: var( --os-ui-hover, rgba( 0, 0, 0, 0.09 ) ); | |
| 394 | - border-color: var( --os-ui-border-strong, rgba( 0, 0, 0, 0.2 ) ); | |
| 395 | - color: var( --os-ui-fg, #1d2327 ); | |
| 396 | -} | |
| 397 | - | |
| 398 | -.os-ai__close:focus-visible { | |
| 399 | - outline: 2px solid var( --wp-admin-theme-color, #2271b1 ); | |
| 400 | - outline-offset: 2px; | |
| 401 | -} | |
| 402 | - | |
| 403 | -/* --------------------------------------------------------------------------- | |
| 404 | 363 | * Results / conversation area — three render modes: |
| 405 | 364 | * • Suggestions (empty state, example prompts) |
| 406 | 365 | * • Thinking (spinner + "Thinking…") |
| 407 | 366 | * • Response (assistant bubble + entity card | admin links | nothing) |
| @@ -489,10 +448,12 @@ | ||
| 489 | 448 | text-decoration: underline; |
| 490 | 449 | text-underline-offset: 2px; |
| 491 | 450 | } |
| 492 | 451 | |
| 452 | +/* Keeps the underline and nudges the colour toward the foreground, so | |
| 453 | + hovering reads as a response rather than the link going away. */ | |
| 493 | 454 | .os-ai__settings-link:hover { |
| 494 | - text-decoration: none; | |
| 455 | + color: color-mix( in srgb, currentColor 65%, var( --os-ui-fg, #1d2327 ) ); | |
| 495 | 456 | } |
| 496 | 457 | |
| 497 | 458 | /* The shell forces `cursor: default !important` on every clickable |
| 498 | 459 | * surface (see the cursor policy at the top of desktop.css). This |
| @@ -652,9 +613,9 @@ | ||
| 652 | 613 | padding: 6px 14px; |
| 653 | 614 | border: none; |
| 654 | 615 | border-radius: 8px; |
| 655 | 616 | background: var( --wp-admin-theme-color, #2271b1 ); |
| 656 | - color: var( --os-ui-fg-on-accent, #fff ); | |
| 617 | + color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) ); | |
| 657 | 618 | font: inherit; |
| 658 | 619 | font-size: 12px; |
| 659 | 620 | font-weight: 500; |
| 660 | 621 | cursor: pointer; |
| @@ -804,12 +765,38 @@ | ||
| 804 | 765 | .os-ai__cmd-item:not(:has(.os-ai__cmd-desc)) { |
| 805 | 766 | align-items: center; |
| 806 | 767 | } |
| 807 | 768 | |
| 769 | +/* The lit row: an accent wash and edge at --os-ai-accent's strength, | |
| 770 | + over the row fill the palette names. Shared with the args-mode rows | |
| 771 | + below through the same two custom properties. */ | |
| 772 | +.os-ai { | |
| 773 | + --_row-wash: color-mix( | |
| 774 | + in srgb, | |
| 775 | + var( --wp-admin-theme-color, #2271b1 ) calc( var( --os-ai-accent, 100% ) * 0.08 ), | |
| 776 | + var( --os-ui-surface, #fff ) | |
| 777 | + ); | |
| 778 | + --_row-edge: color-mix( | |
| 779 | + in srgb, | |
| 780 | + color-mix( | |
| 781 | + in srgb, | |
| 782 | + var( --wp-admin-theme-color, #2271b1 ) 25%, | |
| 783 | + var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ) | |
| 784 | + ) | |
| 785 | + var( --os-ai-accent, 100% ), | |
| 786 | + transparent | |
| 787 | + ); | |
| 788 | + --_row-fill: linear-gradient( | |
| 789 | + var( --os-ai-row-fill, transparent ), | |
| 790 | + var( --os-ai-row-fill, transparent ) | |
| 791 | + ); | |
| 792 | +} | |
| 793 | + | |
| 808 | 794 | .os-ai__cmd-item:hover, |
| 809 | 795 | .os-ai__cmd-item.is-selected { |
| 810 | - background: color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 8%, var( --os-ui-surface, #fff ) ); | |
| 811 | - border-color: color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 25%, var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ) ); | |
| 796 | + background-color: var( --_row-wash ); | |
| 797 | + background-image: var( --_row-fill ); | |
| 798 | + border-color: var( --_row-edge ); | |
| 812 | 799 | } |
| 813 | 800 | |
| 814 | 801 | /* |
| 815 | 802 | * When keyboard navigation is driving selection, suppress the :hover |
| @@ -823,10 +810,11 @@ | ||
| 823 | 810 | background: transparent; |
| 824 | 811 | border-color: transparent; |
| 825 | 812 | } |
| 826 | 813 | .os-ai__cmd-list--kb-nav .os-ai__cmd-item.is-selected:hover { |
| 827 | - background: color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 8%, var( --os-ui-surface, #fff ) ); | |
| 828 | - border-color: color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 25%, var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ) ); | |
| 814 | + background-color: var( --_row-wash ); | |
| 815 | + background-image: var( --_row-fill ); | |
| 816 | + border-color: var( --_row-edge ); | |
| 829 | 817 | } |
| 830 | 818 | |
| 831 | 819 | .os-ai__cmd-item:focus-visible { |
| 832 | 820 | outline: 2px solid var( --wp-admin-theme-color, #2271b1 ); |
| @@ -840,10 +828,20 @@ | ||
| 840 | 828 | justify-content: center; |
| 841 | 829 | width: 36px; |
| 842 | 830 | height: 36px; |
| 843 | 831 | font-size: 20px; |
| 832 | + /* The glyph is the accent in every palette; only its tile follows | |
| 833 | + --os-ai-accent. */ | |
| 844 | 834 | color: var( --wp-admin-theme-color, #2271b1 ); |
| 845 | - background: color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 10%, var( --os-ui-surface, #fff ) ); | |
| 835 | + background-color: color-mix( | |
| 836 | + in srgb, | |
| 837 | + var( --wp-admin-theme-color, #2271b1 ) calc( var( --os-ai-accent, 100% ) * 0.1 ), | |
| 838 | + var( --os-ui-surface, #fff ) | |
| 839 | + ); | |
| 840 | + background-image: linear-gradient( | |
| 841 | + var( --os-ai-tile-fill, transparent ), | |
| 842 | + var( --os-ai-tile-fill, transparent ) | |
| 843 | + ); | |
| 846 | 844 | border-radius: 7px; |
| 847 | 845 | } |
| 848 | 846 | |
| 849 | 847 | /* |
| @@ -915,10 +913,11 @@ | ||
| 915 | 913 | display: flex; |
| 916 | 914 | align-items: flex-start; |
| 917 | 915 | gap: 10px; |
| 918 | 916 | padding: 10px 12px; |
| 919 | - background: color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 10%, var( --os-ui-surface, #fff ) ); | |
| 920 | - border: 1px solid color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 30%, var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ) ); | |
| 917 | + background-color: var( --_row-wash ); | |
| 918 | + background-image: var( --_row-fill ); | |
| 919 | + border: 1px solid var( --_row-edge ); | |
| 921 | 920 | border-radius: 8px; |
| 922 | 921 | } |
| 923 | 922 | |
| 924 | 923 | .os-ai__cmd-enter-hint { |
| @@ -966,10 +965,11 @@ | ||
| 966 | 965 | } |
| 967 | 966 | |
| 968 | 967 | .os-ai__cmd-suggest-item:hover, |
| 969 | 968 | .os-ai__cmd-suggest-item.is-selected { |
| 970 | - background: color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 8%, var( --os-ui-surface, #fff ) ); | |
| 971 | - border-color: color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 25%, var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ) ); | |
| 969 | + background-color: var( --_row-wash ); | |
| 970 | + background-image: var( --_row-fill ); | |
| 971 | + border-color: var( --_row-edge ); | |
| 972 | 972 | } |
| 973 | 973 | |
| 974 | 974 | .os-ai__cmd-suggest-label { |
| 975 | 975 | font-size: 13px; |
