← All changes | css/common/_wp-admin.scss +43 -29 3.10.0-beta.1 → trunk View file →

		@@ -1,7 +1,19 @@
1	1	@use 'checkbox';
2	2	@use 'theme';
3	3
	4	+// Match the active subnavigation tile so it blends into the admin canvas.
	5	+body.wp-admin {
	6	+ background: var(--cs-color-surface-muted);
	7	+}
	8	+
	9	+// Remove the WordPress core 10px top margin on the import and manage snippets containers
	10	+// so the subnav band sits flush against the toolbar.
	11	+#import-container.wrap,
	12	+#manage-snippets-container.wrap {
	13	+ margin-block-start: 0;
	14	+}
	15	+
4	16	/**
5	17	* Native form control styling.
6	18	*
7	19	* WordPress core ships different control metrics between versions (30/32px classic,
		@@ -37,20 +49,20 @@
37	49	input[type='password']:not([class*='components-']),
38	50	input[type='tel']:not([class*='components-']) {
39	51	// `min-block-size` (not a fixed `block-size`) so controls floor at the token height but
40	52	// can still flex-stretch where the layout calls for it (e.g. the 54px cloud search bar).
41		- min-block-size: theme.$control-height;
	53	+ min-block-size: var(--cs-control-height);
42	54	padding-block: 0;
43	55	padding-inline: 8px;
44		- border: 1px solid theme.$control-border;
45		- border-radius: theme.$control-radius;
	56	+ border: 1px solid var(--cs-color-border);
	57	+ border-radius: var(--cs-control-radius);
46	58	line-height: 2;
47		- color: theme.$control-text;
	59	+ color: var(--cs-color-text);
48	60	font-size: 14px;
49	61
50	62	&:focus {
51		- border-color: theme.$accent;
52		- box-shadow: 0 0 0 1px theme.$accent;
	63	+ border-color: var(--cs-color-accent);
	64	+ box-shadow: 0 0 0 1px var(--cs-color-accent);
53	65	outline: 2px solid transparent;
54	66	}
55	67	}
56	68
		@@ -57,23 +69,25 @@
57	69	// Selects: same metrics, but preserve room for the WP dropdown chevron on the inline-end
58	70	// side. WP 7.0 keeps the chevron as a background image; clamping both paddings to 8px (as
59	71	// for text inputs) would let the arrow overlap the text, so the inline-end padding is wider.
60	72	select:not([class*='components-']) {
61		- min-block-size: theme.$control-height;
	73	+ min-inline-size: 170px;
	74	+ field-sizing: content;
	75	+ min-block-size: var(--cs-control-height);
62	76	padding-block: 0;
63	77	padding-inline: 8px 24px;
64		- border: 1px solid theme.$control-border;
65		- border-radius: theme.$control-radius;
	78	+ border: 1px solid var(--cs-color-border);
	79	+ border-radius: var(--cs-control-radius);
66	80
67	81	// WP 7.0 leaves a tall (≈38px) line-height on selects, pushing the value off-centre.
68	82	// Pin it so the text stays vertically centred within the token height.
69	83	line-height: 2;
70		- color: theme.$control-text;
	84	+ color: var(--cs-color-text);
71	85	font-size: 14px;
72	86
73	87	&:focus {
74		- border-color: theme.$accent;
75		- box-shadow: 0 0 0 1px theme.$accent;
	88	+ border-color: var(--cs-color-accent);
	89	+ box-shadow: 0 0 0 1px var(--cs-color-accent);
76	90	outline: 2px solid transparent;
77	91	}
78	92	}
79	93
		@@ -83,23 +97,23 @@
83	97	// in anchor-based buttons, which lack a button element's automatic centring.
84	98	.button:not(.button-primary, .button-link),
85	99	.button-secondary,
86	100	.page-title-action {
87		- min-block-size: theme.$control-height;
	101	+ min-block-size: var(--cs-control-height);
88	102	padding-block: 0;
89	103	padding-inline: 12px;
90		- border-radius: theme.$control-radius;
	104	+ border-radius: var(--cs-control-radius);
91	105	line-height: 2.5715;
92	106	font-size: 14px;
93	107	font-weight: 400;
94		- background: #f6f7f7;
95		- border-color: theme.$accent;
96		- color: theme.$accent;
	108	+ background: var(--cs-color-surface-subtle);
	109	+ border-color: var(--cs-color-accent);
	110	+ color: var(--cs-color-accent);
97	111
98	112	&:hover:not(:disabled) {
99		- background: #f0f0f1;
100		- border-color: theme.$accent-hover;
101		- color: theme.$accent-hover;
	113	+ background: var(--cs-color-surface-muted);
	114	+ border-color: var(--cs-color-accent-hover);
	115	+ color: var(--cs-color-accent-hover);
102	116	}
103	117
104	118	&:focus:not(:disabled) {
105	119	border-color: #3582c4;
		@@ -112,29 +126,29 @@
112	126	// fill. Restore the classic solid brand-accent fill with white text. The `:not`
113	127	// matches the secondary rule's specificity so a `.button-small.button-primary`
114	128	// keeps the token height instead of collapsing to the 26px small size.
115	129	.button-primary:not(.button-link) {
116		- min-block-size: theme.$control-height;
	130	+ min-block-size: var(--cs-control-height);
117	131	padding-block: 0;
118	132	padding-inline: 12px;
119		- border-radius: theme.$control-radius;
	133	+ border-radius: var(--cs-control-radius);
120	134	line-height: 2.5715;
121	135	font-size: 14px;
122	136	font-weight: 700;
123		- background: theme.$accent;
124		- border-color: theme.$accent;
	137	+ background: var(--cs-color-accent);
	138	+ border-color: var(--cs-color-accent);
125	139	color: #fff;
126	140
127	141	&:hover:not(:disabled) {
128		- background: theme.$accent-hover;
129		- border-color: theme.$accent-hover;
	142	+ background: var(--cs-color-accent-hover);
	143	+ border-color: var(--cs-color-accent-hover);
130	144	color: #fff;
131	145	}
132	146
133	147	&:focus:not(:disabled) {
134		- background: theme.$accent-hover;
135		- border-color: theme.$accent-hover;
136		- box-shadow: 0 0 0 1px #fff, 0 0 0 3px theme.$accent;
	148	+ background: var(--cs-color-accent-hover);
	149	+ border-color: var(--cs-color-accent-hover);
	150	+ box-shadow: 0 0 0 1px var(--cs-color-surface), 0 0 0 3px var(--cs-color-accent);
137	151	outline: 2px solid transparent;
138	152	}
139	153	}
140	154