← All changes | assets/css/ai-assistant.css +120 -30 1.1.2 → 1.1.10 View file →

		@@ -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
		@@ -132,13 +143,17 @@
132	143	display: flex;
133	144	align-items: center;
134	145	gap: 8px;
135	146	padding: 10px 14px;
136		- /* Gradient fades from a very faint accent tint to white — visible
137		- on fresh/blue schemes, subtle on light schemes. */
	147	+ /* A faint accent tint fading to the surface, at --os-ai-accent's
	148	+ strength: flat when that is 0. */
138	149	background: linear-gradient(
139	150	to bottom,
140		- color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 8%, var( --os-ui-surface, #fff ) ),
	151	+ color-mix(
	152	+ in srgb,
	153	+ var( --wp-admin-theme-color, #2271b1 ) calc( var( --os-ai-accent, 100% ) * 0.08 ),
	154	+ var( --os-ui-surface, #fff )
	155	+ ),
141	156	var( --os-ui-surface, #fff )
142	157	);
143	158	border-bottom: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.06 ) );
144	159	}
		@@ -145,22 +160,35 @@
145	160
146	161	.os-ai__header-icon {
147	162	display: flex;
148	163	align-items: center;
149		- color: var( --wp-admin-theme-color, #2271b1 );
150		- /* Glow so the sparkle feels alive on dark or saturated themes */
	164	+ color: color-mix(
	165	+ in srgb,
	166	+ var( --wp-admin-theme-color, #2271b1 ) var( --os-ai-accent, 100% ),
	167	+ var( --os-ui-fg, #1d2327 )
	168	+ );
	169	+ /* The glow fades out with the accent, so a neutral mark has none. */
151	170	filter: drop-shadow(
152		- 0 0 5px color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 55%, transparent )
	171	+ 0 0 5px
	172	+ color-mix(
	173	+ in srgb,
	174	+ var( --wp-admin-theme-color, #2271b1 ) calc( var( --os-ai-accent, 100% ) * 0.55 ),
	175	+ transparent
	176	+ )
153	177	);
154	178	}
155	179
	180	+/* Sentence case at body size, like a window title, rather than a
	181	+ tracked uppercase eyebrow. */
156	182	.os-ai__header-label {
157	183	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 );
	184	+ font-size: 13px;
	185	+ font-weight: 500;
	186	+ color: color-mix(
	187	+ in srgb,
	188	+ var( --wp-admin-theme-color, #2271b1 ) var( --os-ai-accent, 100% ),
	189	+ var( --os-ui-fg, #1d2327 )
	190	+ );
163	191	}
164	192
165	193	/* Mode switch (Commands ↔ AI) — a small segmented pill in the header.
166	194	Shown only when AI is available; replaces the `/` shortcut. */
		@@ -227,21 +255,29 @@
227	255	.os-ai__input-wrap:has( .os-ai__input:focus ) {
228	256	border-bottom-color: var( --os-ui-border, rgba( 0, 0, 0, 0.06 ) );
229	257	}
230	258
231		-/* Input-row sparkle — visible always, tints toward the accent on focus
232		- so the panel reads as "AI assistant" rather than "search box". */
	259	+/* Input-row icon: dim at rest, full strength on focus. At rest it is
	260	+ the accent at 55% alpha, mixed by --os-ai-accent towards the faint
	261	+ text colour; focused, the accent mixed towards the text colour. */
233	262	.os-ai__input-icon {
234	263	flex-shrink: 0;
235	264	display: flex;
236	265	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;
	266	+ color: color-mix(
	267	+ in srgb,
	268	+ color-mix( in srgb, var( --wp-admin-theme-color, #2271b1 ) 55%, transparent ) var( --os-ai-accent, 100% ),
	269	+ var( --os-ui-fg-faint, #c3c4c7 )
	270	+ );
	271	+ transition: color 0.18s ease, transform 0.18s ease;
240	272	}
241	273
242	274	.os-ai__input-wrap:has( .os-ai__input:focus ) .os-ai__input-icon {
243		- opacity: 1;
	275	+ color: color-mix(
	276	+ in srgb,
	277	+ var( --wp-admin-theme-color, #2271b1 ) var( --os-ai-accent, 100% ),
	278	+ var( --os-ui-fg, #1d2327 )
	279	+ );
244	280	transform: scale( 1.08 );
245	281	}
246	282
247	283	/*
		@@ -307,10 +343,25 @@
307	343	width: 30px;
308	344	height: 30px;
309	345	border: none;
310	346	border-radius: 8px;
311		- background: var( --wp-admin-theme-color, #2271b1 );
312		- color: var( --os-ui-fg-on-accent, #fff );
	347	+ /* An accent key at --os-ai-accent's strength. At 0 it is an icon tile
	348	+ like the command rows' (the neutral fill, the glyph in the accent);
	349	+ at 100% the filled accent button with its ink. */
	350	+ background-color: color-mix(
	351	+ in srgb,
	352	+ var( --wp-admin-theme-color, #2271b1 ) var( --os-ai-accent, 100% ),
	353	+ transparent
	354	+ );
	355	+ background-image: linear-gradient(
	356	+ var( --os-ai-tile-fill, transparent ),
	357	+ var( --os-ai-tile-fill, transparent )
	358	+ );
	359	+ color: color-mix(
	360	+ in srgb,
	361	+ var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) ) var( --os-ai-accent, 100% ),
	362	+ var( --wp-admin-theme-color, #2271b1 )
	363	+ );
313	364	cursor: pointer;
314	365	padding: 0;
315	366	opacity: 0;
316	367	transform: scale( 0.7 );
		@@ -652,9 +703,9 @@
652	703	padding: 6px 14px;
653	704	border: none;
654	705	border-radius: 8px;
655	706	background: var( --wp-admin-theme-color, #2271b1 );
656		- color: var( --os-ui-fg-on-accent, #fff );
	707	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
657	708	font: inherit;
658	709	font-size: 12px;
659	710	font-weight: 500;
660	711	cursor: pointer;
		@@ -804,12 +855,38 @@
804	855	.os-ai__cmd-item:not(:has(.os-ai__cmd-desc)) {
805	856	align-items: center;
806	857	}
807	858
	859	+/* The lit row: an accent wash and edge at --os-ai-accent's strength,
	860	+ over the row fill the palette names. Shared with the args-mode rows
	861	+ below through the same two custom properties. */
	862	+.os-ai {
	863	+ --_row-wash: color-mix(
	864	+ in srgb,
	865	+ var( --wp-admin-theme-color, #2271b1 ) calc( var( --os-ai-accent, 100% ) * 0.08 ),
	866	+ var( --os-ui-surface, #fff )
	867	+ );
	868	+ --_row-edge: color-mix(
	869	+ in srgb,
	870	+ color-mix(
	871	+ in srgb,
	872	+ var( --wp-admin-theme-color, #2271b1 ) 25%,
	873	+ var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) )
	874	+ )
	875	+ var( --os-ai-accent, 100% ),
	876	+ transparent
	877	+ );
	878	+ --_row-fill: linear-gradient(
	879	+ var( --os-ai-row-fill, transparent ),
	880	+ var( --os-ai-row-fill, transparent )
	881	+ );
	882	+}
	883	+
808	884	.os-ai__cmd-item:hover,
809	885	.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 ) ) );
	886	+ background-color: var( --_row-wash );
	887	+ background-image: var( --_row-fill );
	888	+ border-color: var( --_row-edge );
812	889	}
813	890
814	891	/*
815	892	* When keyboard navigation is driving selection, suppress the :hover
		@@ -823,10 +900,11 @@
823	900	background: transparent;
824	901	border-color: transparent;
825	902	}
826	903	.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 ) ) );
	904	+ background-color: var( --_row-wash );
	905	+ background-image: var( --_row-fill );
	906	+ border-color: var( --_row-edge );
829	907	}
830	908
831	909	.os-ai__cmd-item:focus-visible {
832	910	outline: 2px solid var( --wp-admin-theme-color, #2271b1 );
		@@ -840,10 +918,20 @@
840	918	justify-content: center;
841	919	width: 36px;
842	920	height: 36px;
843	921	font-size: 20px;
	922	+ /* The glyph is the accent in every palette; only its tile follows
	923	+ --os-ai-accent. */
844	924	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 ) );
	925	+ background-color: color-mix(
	926	+ in srgb,
	927	+ var( --wp-admin-theme-color, #2271b1 ) calc( var( --os-ai-accent, 100% ) * 0.1 ),
	928	+ var( --os-ui-surface, #fff )
	929	+ );
	930	+ background-image: linear-gradient(
	931	+ var( --os-ai-tile-fill, transparent ),
	932	+ var( --os-ai-tile-fill, transparent )
	933	+ );
846	934	border-radius: 7px;
847	935	}
848	936
849	937	/*
		@@ -915,10 +1003,11 @@
915	1003	display: flex;
916	1004	align-items: flex-start;
917	1005	gap: 10px;
918	1006	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 ) ) );
	1007	+ background-color: var( --_row-wash );
	1008	+ background-image: var( --_row-fill );
	1009	+ border: 1px solid var( --_row-edge );
921	1010	border-radius: 8px;
922	1011	}
923	1012
924	1013	.os-ai__cmd-enter-hint {
		@@ -966,10 +1055,11 @@
966	1055	}
967	1056
968	1057	.os-ai__cmd-suggest-item:hover,
969	1058	.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 ) ) );
	1059	+ background-color: var( --_row-wash );
	1060	+ background-image: var( --_row-fill );
	1061	+ border-color: var( --_row-edge );
972	1062	}
973	1063
974	1064	.os-ai__cmd-suggest-label {
975	1065	font-size: 13px;