Skip to content

Commit 3c91698

Browse files
mcsfmcsf
authored
Merge branch 'trunk' into add/icons-apis
2 parents 9445359 + 45e2aee commit 3c91698

File tree

110 files changed

+1727
-9954
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+1727
-9954
lines changed

‎src/js/_enqueues/wp/widgets/custom-html.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,7 @@ wp.customHtmlWidgets = ( function( $ ) {
333333
* This ensures that the textarea is visible and the editor can be initialized.
334334
*/
335335
renderWhenAnimationDone = function() {
336-
if ( ! ( wp.customize ? widgetContainer.parent().hasClass( 'expanded' ) : widgetContainer.hasClass( 'open' ) ) ) { // Core merge: The wp.customize condition can be eliminated with this change being in core: https://github.com/xwp/wordpress-develop/pull/247/commits/5322387d
336+
if ( ! ( wp.customize ? widgetContainer.parent().hasClass( 'expanded' ) : widgetContainer.hasClass( 'open' ) ) ) { // Core merge: The wp.customize condition can be eliminated with this change being in core: https://core.trac.wordpress.org/changeset/41260
337337
setTimeout( renderWhenAnimationDone, animatedCheckDelay );
338338
} else {
339339
widgetControl.initializeEditor();

‎src/js/media/views/media-frame.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ MediaFrame = Frame.extend(/** @lends wp.media.view.MediaFrame.prototype */{
101101
tabPanelEl = this.$el.find( '.media-frame-tab-panel' ),
102102
ariaLabelledby;
103103

104-
tabPanelEl.removeAttr( 'role aria-labelledby tabindex' );
104+
tabPanelEl.removeAttr( 'role aria-labelledby' );
105105

106106
if ( this.state().get( 'menu' ) && this.menuView && this.menuView.isVisible ) {
107107
ariaLabelledby = 'menu-item-' + stateId;
@@ -111,7 +111,6 @@ MediaFrame = Frame.extend(/** @lends wp.media.view.MediaFrame.prototype */{
111111
.attr( {
112112
role: 'tabpanel',
113113
'aria-labelledby': ariaLabelledby,
114-
tabIndex: '0'
115114
} );
116115
}
117116
},
@@ -127,7 +126,7 @@ MediaFrame = Frame.extend(/** @lends wp.media.view.MediaFrame.prototype */{
127126
var tabPanelEl = this.$el.find( '.media-frame-content' ),
128127
ariaLabelledby;
129128

130-
tabPanelEl.removeAttr( 'role aria-labelledby tabindex' );
129+
tabPanelEl.removeAttr( 'role aria-labelledby' );
131130

132131
// Set the tab panel attributes only if the tabs are visible.
133132
if ( this.state().get( 'router' ) && this.routerView && this.routerView.isVisible && this.content._mode ) {
@@ -137,7 +136,6 @@ MediaFrame = Frame.extend(/** @lends wp.media.view.MediaFrame.prototype */{
137136
.attr( {
138137
role: 'tabpanel',
139138
'aria-labelledby': ariaLabelledby,
140-
tabIndex: '0'
141139
} );
142140
}
143141
},

‎src/wp-admin/admin-header.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@
193193

194194
$admin_body_class .= ' branch-' . str_replace( array( '.', ',' ), '-', (float) get_bloginfo( 'version' ) );
195195
$admin_body_class .= ' version-' . str_replace( '.', '-', preg_replace( '/^([.0-9]+).*/', '$1', get_bloginfo( 'version' ) ) );
196-
$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' );
196+
$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'modern' );
197197
$admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_user_locale() ) ) );
198198

199199
if ( wp_is_mobile() ) {

‎src/wp-admin/css/colors/_admin.scss‎

Lines changed: 109 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@forward 'variables' show $scheme-name, $base-color, $body-background, $button-color, $custom-welcome-panel, $dashboard-accent-1, $dashboard-accent-2, $dashboard-icon-background, $form-checked, $highlight-color, $icon-color, $link, $link-focus, $low-contrast-theme, $menu-bubble-text, $menu-collapse-focus-icon, $menu-collapse-text, $menu-highlight-background, $menu-highlight-icon, $menu-highlight-text, $menu-submenu-text, $menu-submenu-focus-text, $menu-submenu-background, $notification-color, $text-color;
44
@use 'variables';
55
@use 'mixins';
6+
@use 'tokens';
67

78
/**
89
* This function name uses British English to maintain backward compatibility, as developers
@@ -37,21 +38,35 @@ span.wp-media-buttons-icon:before {
3738
color: currentColor;
3839
}
3940

40-
.wp-core-ui .button-link {
41-
color: variables.$link;
41+
/* Link button - appears as text link, no border or background */
42+
/* Matches Gutenberg's .is-link button variant */
43+
.wp-core-ui .button-link,
44+
.wp-core-ui .button.button-link {
45+
color: var(--wp-admin-theme-color);
4246

4347
&:hover,
44-
&:active,
48+
&:active {
49+
color: var(--wp-admin-theme-color-darker-20);
50+
}
51+
4552
&:focus {
46-
color: variables.$link-focus;
53+
color: var(--wp-admin-theme-color);
54+
border-radius: tokens.$radius-s;
55+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
56+
outline: 1px solid transparent;
57+
}
58+
59+
&:disabled,
60+
&[aria-disabled="true"] {
61+
color: tokens.$gray-600;
4762
}
4863
}
4964

5065
.media-modal .delete-attachment,
5166
.media-modal .trash-attachment,
5267
.media-modal .untrash-attachment,
5368
.wp-core-ui .button-link-delete {
54-
color: #a00;
69+
color: tokens.$alert-red;
5570
}
5671

5772
.media-modal .delete-attachment:hover,
@@ -62,25 +77,44 @@ span.wp-media-buttons-icon:before {
6277
.media-modal .untrash-attachment:focus,
6378
.wp-core-ui .button-link-delete:hover,
6479
.wp-core-ui .button-link-delete:focus {
65-
color: #dc3232;
80+
color: color.adjust(tokens.$alert-red, $lightness: 10%);
6681
}
6782

6883
/* Forms */
6984

85+
// Checkbox checked state - uses theme color
86+
input[type="checkbox"]:checked {
87+
background: var(--wp-admin-theme-color);
88+
border-color: var(--wp-admin-theme-color);
89+
}
90+
7091
input[type=checkbox]:checked::before {
7192
content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E");
7293
content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour(variables.$form-checked)}%27%2F%3E%3C%2Fsvg%3E") / '';
7394
}
7495

75-
input[type=radio]:checked::before {
76-
background: variables.$form-checked;
96+
// Checkbox checkmark - white for visibility on theme color background
97+
input[type="checkbox"]:checked::before {
98+
content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") / '';
99+
}
100+
101+
// Radio checked state - uses theme color
102+
input[type="radio"]:checked {
103+
background: var(--wp-admin-theme-color);
104+
border-color: var(--wp-admin-theme-color);
105+
}
106+
107+
// Radio dot - white for visibility on theme color background
108+
input[type="radio"]:checked::before {
109+
background: tokens.$white;
77110
}
78111

79112
.wp-core-ui input[type="reset"]:hover,
80113
.wp-core-ui input[type="reset"]:active {
81114
color: variables.$link-focus;
82115
}
83116

117+
// Text input focus - outset focus ring matching button focus style
84118
input[type="text"]:focus,
85119
input[type="password"]:focus,
86120
input[type="color"]:focus,
@@ -92,96 +126,70 @@ input[type="month"]:focus,
92126
input[type="number"]:focus,
93127
input[type="search"]:focus,
94128
input[type="tel"]:focus,
95-
input[type="text"]:focus,
96129
input[type="time"]:focus,
97130
input[type="url"]:focus,
98131
input[type="week"]:focus,
99-
input[type="checkbox"]:focus,
100-
input[type="radio"]:focus,
101132
select:focus,
102133
textarea:focus {
103-
border-color: variables.$highlight-color;
104-
box-shadow: 0 0 0 1px variables.$highlight-color;
134+
border-color: var(--wp-admin-theme-color);
135+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
105136
}
106137

138+
// Checkbox/Radio focus - Gutenberg-style outset focus ring
139+
input[type="checkbox"]:focus,
140+
input[type="radio"]:focus {
141+
border-color: tokens.$gray-900;
142+
box-shadow: 0 0 0 2px tokens.$white, 0 0 0 4px var(--wp-admin-theme-color);
143+
outline: 2px solid transparent;
144+
}
107145

108-
/* Core UI */
146+
// Select focus (wp-core-ui styled selects)
147+
.wp-core-ui select:focus {
148+
border-color: var(--wp-admin-theme-color);
149+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
150+
}
109151

110-
.wp-core-ui {
152+
// Autocomplete focus state
153+
.wp-tags-autocomplete .ui-state-focus,
154+
.wp-tags-autocomplete [aria-selected="true"] {
155+
background-color: var(--wp-admin-theme-color);
156+
}
111157

112-
.button {
113-
border-color: #7e8993;
114-
color: #32373c;
115-
}
158+
// Password field focus
159+
#pass1:focus,
160+
#pass1-text:focus {
161+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
162+
}
116163

117-
.button.hover,
118-
.button:hover,
119-
.button.focus,
120-
.button:focus {
121-
border-color: color.adjust(#7e8993, $lightness: -5%);
122-
color: color.adjust(#32373c, $lightness: -5%);
123-
}
164+
// Password toggle button focus
165+
.mailserver-pass-wrap .button.wp-hide-pw:focus {
166+
border-color: var(--wp-admin-theme-color);
167+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
168+
}
124169

125-
.button.focus,
126-
.button:focus {
127-
border-color: #7e8993;
128-
color: color.adjust(#32373c, $lightness: -5%);
129-
box-shadow: 0 0 0 1px #32373c;
130-
}
131170

132-
.button:active {
133-
border-color: #7e8993;
134-
color: color.adjust(#32373c, $lightness: -5%);
135-
box-shadow: none;
136-
}
171+
/* Core UI */
137172

138-
.button.active,
139-
.button.active:focus,
140-
.button.active:hover {
141-
border-color: variables.$button-color;
142-
color: color.adjust(#32373c, $lightness: -5%);
143-
box-shadow: inset 0 2px 5px -3px variables.$button-color;
144-
}
173+
.wp-core-ui {
145174

146-
.button.active:focus {
147-
box-shadow: 0 0 0 1px #32373c;
175+
/* Default button - theme color border and text (matches secondary) */
176+
.button {
177+
@include mixins.button-secondary();
148178
}
149179

150-
@if ( variables.$low-contrast-theme != "true" ) {
151-
.button,
152-
.button-secondary {
153-
color: variables.$highlight-color;
154-
border-color: variables.$highlight-color;
155-
}
156-
157-
.button.hover,
158-
.button:hover,
159-
.button-secondary:hover{
160-
border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
161-
color: color.adjust(variables.$highlight-color, $lightness: -10%);
162-
}
163-
164-
.button.focus,
165-
.button:focus,
166-
.button-secondary:focus {
167-
border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
168-
color: color.adjust(variables.$highlight-color, $lightness: -20%);
169-
box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
170-
}
171-
172-
.button-primary {
173-
&:hover {
174-
color: #fff;
175-
}
176-
}
180+
/* Secondary button - same as default */
181+
.button-secondary {
182+
@include mixins.button-secondary();
177183
}
178184

185+
/* Primary button - theme color background */
179186
.button-primary {
180-
@include mixins.button( variables.$button-color );
187+
@include mixins.button();
181188
}
182189

183190
.button-group > .button.active {
184-
border-color: variables.$button-color;
191+
border-color: var(--wp-admin-theme-color);
192+
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
185193
}
186194

187195
.wp-ui-primary {
@@ -215,28 +223,34 @@ textarea:focus {
215223

216224

217225
/* List tables */
218-
@if variables.$low-contrast-theme == "true" {
219-
.wrap .page-title-action:hover {
220-
color: variables.$menu-text;
221-
background-color: variables.$menu-background;
222-
}
223-
} @else {
224-
.wrap .page-title-action,
225-
.wrap .page-title-action:active {
226-
border: 1px solid variables.$highlight-color;
227-
color: variables.$highlight-color;
228-
}
229226

230-
.wrap .page-title-action:hover {
231-
color: color.adjust(variables.$highlight-color, $lightness: -10%);
232-
border-color: color.adjust(variables.$highlight-color, $lightness: -10%);
233-
}
227+
// .page-title-action uses secondary button styling
228+
.wrap .page-title-action {
229+
background: transparent;
230+
border: 1px solid var(--wp-admin-theme-color);
231+
border-radius: tokens.$radius-s;
232+
color: var(--wp-admin-theme-color);
233+
}
234234

235-
.wrap .page-title-action:focus {
236-
border-color: color.adjust(variables.$highlight-color, $lightness: 10%);
237-
color: color.adjust(variables.$highlight-color, $lightness: -20%);
238-
box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%);
239-
}
235+
.wrap .page-title-action:hover {
236+
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
237+
border-color: var(--wp-admin-theme-color-darker-20);
238+
color: var(--wp-admin-theme-color-darker-20);
239+
}
240+
241+
.wrap .page-title-action:focus {
242+
background: transparent;
243+
border-color: var(--wp-admin-theme-color);
244+
color: var(--wp-admin-theme-color);
245+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
246+
outline: 1px solid transparent;
247+
}
248+
249+
.wrap .page-title-action:active {
250+
background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
251+
border-color: var(--wp-admin-theme-color-darker-20);
252+
color: var(--wp-admin-theme-color-darker-20);
253+
box-shadow: none;
240254
}
241255

242256
.view-switch a.current:before {

0 commit comments

Comments
 (0)