Introduce a design system tokens file (`_tokens.scss`) based on the WordPress Design System, providing standardized values for colors, spacing, typography, border-radius, and elevation.
Update buttons to use CSS custom properties for theme color support across all admin color schemes. Restyle primary buttons with filled theme-color backgrounds, secondary buttons with outlined borders, and add a tertiary button mixin. Adopt Gutenberg-style focus rings with outset box-shadows and transparent outlines for Windows High Contrast mode compatibility.
Increase default input and select height from 30px to 40px, apply 2px border-radius, and update border and placeholder colors to match the design system. Restyle checkboxes and radios with filled theme-color checked states and white indicator marks, using outset double-ring focus styles consistent with Gutenberg.
Apply compact 32px sizing to list table controls, page-title-action buttons, and toolbar elements. Convert tag input layouts and the major-publishing-actions bar to flexbox.
Props fabiankaegy, joedolson, audrasjb, joen, phpbits, magaliechetrit, karmatosed.
Fixes#64547.
Built from https://develop.svn.wordpress.org/trunk@61645
git-svn-id: http://core.svn.wordpress.org/trunk@60956 1a063a9b-81f0-0310-95a4-ce76da25c4cd
In modern browsers the CSS `content` property provides alt text support for assistive technology in the form `display / alt text`. This introduces support for legacy browsers that do not support the new syntax.
CSS content properties take advantage of the CSS cascade and browsers ignoring values they don't understand by adding duplicate `content` properties in the form:
{{{#!css
content: display;
content: display / alt text;
}}}
Modern browsers will use the second property, legacy browsers will use the first.
Follow-up to [60885] for #63603.
Props acmoifr, joedolson, jorbin, mydesign78, ov3rfly, peterwilsoncc, presskopp, sabernhardt, siliconforks, swissspidy, threadi, wildworks, wolf45.
Fixes#64350.
Built from https://develop.svn.wordpress.org/trunk@61480
git-svn-id: http://core.svn.wordpress.org/trunk@60792 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Remove instances of `speak: never` and `@media aural`, which are deprecated and/or non-standard CSS. These never had any broad browser support, but generated content alternatives do. See #40428.
Props krokodok, audrasjb, joedolson.
Fixes#63603.
Built from https://develop.svn.wordpress.org/trunk@60885
git-svn-id: http://core.svn.wordpress.org/trunk@60221 1a063a9b-81f0-0310-95a4-ce76da25c4cd
For all CSS generated icons across core, either add `aria-hidden="true"` to the HTML wrapper or set the generated content alternative to an empty string in the CSS using the alternative text specification for CSS generated content.
Props afercia, joedolson, cheffheid, jhabdas.
Fixes#40428.
Built from https://develop.svn.wordpress.org/trunk@60806
git-svn-id: http://core.svn.wordpress.org/trunk@60142 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Remove code that forced focus to skip from the title field to the editor. Add link to skip to editor to give the user control over their path. Set `aria-pressed` on editor selector buttons to communicate which editor is enabled. Make focus state visible on unselected editor button. Remove `wp_keep_scroll_position` flag used for IE compatibility. Add `role="presentation"` to table used as status info bar.
This addresses a long-standing accessibility problem in the classic editor which created a confusing keyboard navigation path by skipping all content between the title field and the content editor.
Props afercia, rcreators, benjamin_zekavica, sharonaustin, joedolson.
Fixes#29838.
Built from https://develop.svn.wordpress.org/trunk@59188
git-svn-id: http://core.svn.wordpress.org/trunk@58583 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Add visible labels to inputs that are using placeholder attributes as a substitute for visible labeling.
Labels added or made visible on the customizer theme search, customizer widget search, customizer menu item search, customizer new page UI, the search plugins screens, the media search screens, and the classic editor link inserter.
Props afercia, joedolson, rcreators, sabernhardt.
See #40331.
Built from https://develop.svn.wordpress.org/trunk@58146
git-svn-id: http://core.svn.wordpress.org/trunk@57611 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Apply new focus styles from WordPress 5.3 more broadly. An updated focus style for form inputs, buttons, and link styled as buttons was added in WordPress 5.3; this commit makes other focus styles consistent with those changes so they meet accessibility standards for color contrast.
Props johnbillion, kebbet, joedolson, afercia.
Fixes#51870.
Built from https://develop.svn.wordpress.org/trunk@57553
git-svn-id: http://core.svn.wordpress.org/trunk@57054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The `{min|max}-device-pixel-ratio` syntax as a a non-standard CSS media feature that was used as an alternative to the now standard `resolution`. Prior to Safari 16.0, `-webkit-{min|max}-device-pixel-ratio` was needed to correctly support it.
This change is a result of the `caniuse-lite` update that was applied recently in [56065]. Though there were no changes to target browsers as a result of this update, it seems an upstream change identified these as unnecessary.
See #57856, #58869.
Props desrosj, joemcgill, isabel_brison.
Built from https://develop.svn.wordpress.org/trunk@56279
git-svn-id: http://core.svn.wordpress.org/trunk@55791 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Update CSS in the classic visual editor link popup to remove sizing in pixels that caused significant text overlaps when the base font size is scaled or set to a larger custom value in the browser or operating system.
Props jonny-s, sabernhardt, joedolson.
Fixes#53174.
Built from https://develop.svn.wordpress.org/trunk@54216
git-svn-id: http://core.svn.wordpress.org/trunk@53775 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Remove units when the value is zero. Combine redundant values in shorthand declarations.
This was generated with `stylelint --fix` and a custom config (see #53866).
Props ankitmaru, audrasjb, pbiron, ayeshrajans, hareesh-pillai, netweb, mukesh27.
Fixes#53866.
Built from https://develop.svn.wordpress.org/trunk@51727
git-svn-id: http://core.svn.wordpress.org/trunk@51333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This officially removes support for Internet Explorer 11 in the CSS files run through the build process in Core.
Individual tickets should be opened for removing each manually maintained area of the code base targeting IE11.
The resulting changes to CSS files are included in this commit.
Fixes#53077.
Built from https://develop.svn.wordpress.org/trunk@50784
git-svn-id: http://core.svn.wordpress.org/trunk@50393 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This is part of a larger project in cleaning up core's admin CSS. This collapses all colors used in the CSS to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white. The colors are perceptually uniform from light to dark, half of each range has a 4.5 or higher contrast against white, the other half has a 4.5 or higher contrast against black.
Standardizing on this set of colors will help contributors make consistent, accessible design decisions. The full color palette can be seen here: https://codepen.io/ryelle/full/WNGVEjw
Props notlaura, danfarrow, kburgoine, drw158, audrasjb, Joen, hedgefield, ibdz, melchoyce.
See #49999.
Built from https://develop.svn.wordpress.org/trunk@50025
git-svn-id: http://core.svn.wordpress.org/trunk@49726 1a063a9b-81f0-0310-95a4-ce76da25c4cd
For a number of years, WordPress has been using a `#00a0d2` blue shade for the links `:hover` state. This blue shade doesn't have a sufficient color contrast with the various (too many) background colors used in the admin interface.
The new `#006799` blue shade is part of the official WordPress color palette and does have a sufficient color contrast with most of the admin backgrounds.
Props ryokuhi, audrasjb, joedolson, mapk.
See #47682.
Built from https://develop.svn.wordpress.org/trunk@48368
git-svn-id: http://core.svn.wordpress.org/trunk@48137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.
Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes#48420.
Built from https://develop.svn.wordpress.org/trunk@46866
git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- properties should be followed by a colon and a space
- media queries shouldn't use spaces within parenthesis
- indentation should use tabs instead of spaces or mixed spaces / tabs
- the content property should use double quotes
- no double spaces
Props nadim0988, afercia.
Fixes#45185.
Built from https://develop.svn.wordpress.org/trunk@44637
git-svn-id: http://core.svn.wordpress.org/trunk@44468 1a063a9b-81f0-0310-95a4-ce76da25c4cd
In many a strange and curious file of forgotten lore—
While I pondered, blaming Nacin, my notifications suddenly awakened,
As of someone quietly DMing;—DMing me, I can’t ignore.
“’Tis some contributor,” I muttered, “DMing me an idea or four—
Only this and nothing more.”
Ah, distinctly I remember, at WordCamp US, last December;
A mad proposal nearly laid me—down out cold—upon the floor.
Curious, I listened closely;—to a plan I agreed with, mostly—
A way to make our JavaScript—JavaScript which was a chore—
Maintainable, extendable, for the future, is what I saw.
Guten-ready for evermore.
Open here I switch to Slack, when, with many a patch and hack,
In there stepped Omar, a JavaScript developer hardcore;
Pronouncing all the changes fit; ready now to be commit;
“There’s nothing else for us to do,” DMing me, “It’s done!” he swore—
“No longer random guessing at which file need next be explored—
Let’s move on, we’re all aboard.”
Moved all together, grouped and managed, in folders all is packaged,
The code had all been cleaned and tidied, important parts moved to the fore,
“Though this change be useful here,” I said, “it is too large, I fear,
We couldn’t manage such a patch, we’ve done nothing like this before—
Tell me where doth go this change, change to make our codebase soar!”
Quoth Omar, “In WordPress Core.”
Props omarreis for shepherding this significant change.
Props adamsilverstein, aduth, atimmer, dingo_bastard, frank-klein, gziolo, herregroen, jaswrks, jeremyfelt, jipmoors, jorbin, netweb, ocean90, pento, tjnowell, and youknowriad for testing, feedback, discussion, encouragement, commiserations, etc.
I make no apologies for this commit message.
Fixes#43055.
Built from https://develop.svn.wordpress.org/trunk@43309
git-svn-id: http://core.svn.wordpress.org/trunk@43138 1a063a9b-81f0-0310-95a4-ce76da25c4cd
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/
This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10.
So, in the (paraphrased) words of Taylor Swift:
I remember when we dropped support the first time
Saying, "This is it, I've had enough, " 'cause like
We hadn't seen many users in a month
When you said you needed flexbox. (What?)
Then you postMessage again and say
"IE8, I miss you and I swear I'm gonna change, trust me."
Remember how that lasted for a day?
I say, "I hate the box model, " we break up, you call me, "I love css-grids."
Ooh, we called it off again last night
But ooh, this time I'm telling you, I'm telling you
We are never ever ever supporting IE 8,9,10,
We are never ever ever supporting IE 8,9,10,
You go talk to EDGE, talk to my FIREFOX, talk to CHROME
But we are never ever ever ever getting back together
Like, ever...
Fixes#37651.
Props stunnedbeast, netweb, jorbin.
Built from https://develop.svn.wordpress.org/trunk@41062
git-svn-id: http://core.svn.wordpress.org/trunk@40912 1a063a9b-81f0-0310-95a4-ce76da25c4cd
