Feature: Admin Reskin 7.0 #10910
Draft
Feature: Admin Reskin 7.0 #10910
+1,092
−441
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Introduces _tokens.scss with Sass variables derived from the WordPress Design System in Figma. These tokens provide consistent values for: - Spacing (4px grid units) - Border radius - Gray scale - Semantic colors (alerts/notices) - Typography scale - Elevation (box shadows) - Component sizing (buttons, inputs, checkboxes) The tokens are imported into _variables.scss and can be used across all admin stylesheets compiled via Sass. Note: These are Sass-only variables. No new CSS custom properties are exposed to maintain backward compatibility. The only CSS custom properties available remain those from wp-base-styles. Part of the WordPress 7.0 admin visual reskin initiative. See: https://core.trac.wordpress.org/ticket/64308
Update all button styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Sizing (aligned with Gutenberg's next-default-40px):** - Default buttons: 40px height (was 30px) - Compact buttons: 32px (new class for space-constrained contexts) - Small buttons: 24px (was 26px) - Hero buttons: 48px (was 46px) - Use min-height + line-height for accessibility with browser zoom **Visual updates:** - Border radius: 2px (was 3px) - Font weight: 500 (was 400/normal) - Transparent background for secondary/tertiary buttons **Focus states (Gutenberg-style outer ring):** - Primary: outer theme color ring + inner white ring for contrast - Secondary/Tertiary/Link: single outer theme color ring - Use var(--wp-admin-theme-color) for focus ring color **Hover/Active states:** - Secondary buttons: subtle rgba() background tint on hover/active - Use theme-color-darker-20 for hover text/border colors - Link buttons: theme-color-darker-20 on hover **Components updated:** - .button, .button-primary, .button-secondary - .button-link, .button-link-delete - .page-title-action (now uses secondary button pattern) See: https://core.trac.wordpress.org/ticket/64308
Update theme card buttons to work with the new design system sizing. **Button sizing:** - Use compact size (32px) for theme card buttons since they're in a space-constrained context - Set explicit min-height, line-height, and padding to match compact spec **Button visibility:** - Add white background to secondary buttons for visibility against the semi-transparent theme card overlay - Use :not(.button-primary) selector to preserve primary button styling - Adjust hover state to use #f0f0f0 background **Layout adjustments:** - Increase theme name vertical padding from 15px to 16px to accommodate taller buttons - Adjust active theme padding-right from 110px to 115px for button width - Reduce theme-actions horizontal padding from 15px to 12px See: https://core.trac.wordpress.org/ticket/64308
Update all form control styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Text Inputs:** - Default height: 40px (was 30px) - Border radius: 2px (was 4px) - Border color: #949494 (was #8c8f94) - Text color: #1e1e1e (was #2c3338) - Padding: 0 12px (was 0 8px) - Focus: Gutenberg-style 0.5px outer ring with theme color **Select Dropdowns:** - Height: 40px (was 30px) - Border radius: 2px (was 3px) - Border color: #949494 (was #8c8f94) - Arrow icon: updated to #1e1e1e - Focus: Gutenberg-style 0.5px outer ring **Textarea:** - Padding: 8px 12px (was 2px 6px) **Checkbox/Radio:** - Border: 1px #1e1e1e (was #8c8f94) - Border radius: 2px (checkbox), unchanged (radio) - Focus: outset ring (2px white + 4px theme color) - Checked: theme color background + border, white checkmark/dot **Disabled/Readonly States:** - Disabled: #f0f0f0 background, #cccccc border, #949494 text - Readonly: #f0f0f0 background **Password Fields:** - Height: 40px (was 30px) - Toggle button focus: 2px border-radius - Strength meter: 2px border-radius, updated colors **Other Updates:** - Placeholder: #757575 (was #646970) - Autocomplete focus: uses theme color - All focus states use var(--wp-admin-theme-color) See: https://core.trac.wordpress.org/ticket/64308
Introduces _tokens.scss with Sass variables derived from the WordPress Design System in Figma. These tokens provide consistent values for: - Spacing (4px grid units) - Border radius - Gray scale - Semantic colors (alerts/notices) - Typography scale - Elevation (box shadows) - Component sizing (buttons, inputs, checkboxes) The tokens are imported into _variables.scss and can be used across all admin stylesheets compiled via Sass. Note: These are Sass-only variables. No new CSS custom properties are exposed to maintain backward compatibility. The only CSS custom properties available remain those from wp-base-styles. Part of the WordPress 7.0 admin visual reskin initiative. See: https://core.trac.wordpress.org/ticket/64308
Update all button styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Sizing (aligned with Gutenberg's next-default-40px):** - Default buttons: 40px height (was 30px) - Compact buttons: 32px (new class for space-constrained contexts) - Small buttons: 24px (was 26px) - Hero buttons: 48px (was 46px) - Use min-height + line-height for accessibility with browser zoom **Visual updates:** - Border radius: 2px (was 3px) - Font weight: 500 (was 400/normal) - Transparent background for secondary/tertiary buttons **Focus states (Gutenberg-style outer ring):** - Primary: outer theme color ring + inner white ring for contrast - Secondary/Tertiary/Link: single outer theme color ring - Use var(--wp-admin-theme-color) for focus ring color **Hover/Active states:** - Secondary buttons: subtle rgba() background tint on hover/active - Use theme-color-darker-20 for hover text/border colors - Link buttons: theme-color-darker-20 on hover **Components updated:** - .button, .button-primary, .button-secondary - .button-link, .button-link-delete - .page-title-action (now uses secondary button pattern) See: https://core.trac.wordpress.org/ticket/64308
Update theme card buttons to work with the new design system sizing. **Button sizing:** - Use compact size (32px) for theme card buttons since they're in a space-constrained context - Set explicit min-height, line-height, and padding to match compact spec **Button visibility:** - Add white background to secondary buttons for visibility against the semi-transparent theme card overlay - Use :not(.button-primary) selector to preserve primary button styling - Adjust hover state to use #f0f0f0 background **Layout adjustments:** - Increase theme name vertical padding from 15px to 16px to accommodate taller buttons - Adjust active theme padding-right from 110px to 115px for button width - Reduce theme-actions horizontal padding from 15px to 12px See: https://core.trac.wordpress.org/ticket/64308
Updates the default admin color scheme from 'fresh' to 'modern' for WordPress 7.0. - Bumps database version to trigger upgrade routine. - Adds upgrade_700() to migrate existing users with 'fresh' to 'modern'. - Updates default in wp_insert_user() for new users. - Updates fallback in admin_color_scheme_picker(). props: karmatosed
Introduces _tokens.scss with Sass variables derived from the WordPress Design System in Figma. These tokens provide consistent values for: - Spacing (4px grid units) - Border radius - Gray scale - Semantic colors (alerts/notices) - Typography scale - Elevation (box shadows) - Component sizing (buttons, inputs, checkboxes) The tokens are imported into _variables.scss and can be used across all admin stylesheets compiled via Sass. Note: These are Sass-only variables. No new CSS custom properties are exposed to maintain backward compatibility. The only CSS custom properties available remain those from wp-base-styles. Part of the WordPress 7.0 admin visual reskin initiative. See: https://core.trac.wordpress.org/ticket/64308
Update all button styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Sizing (aligned with Gutenberg's next-default-40px):** - Default buttons: 40px height (was 30px) - Compact buttons: 32px (new class for space-constrained contexts) - Small buttons: 24px (was 26px) - Hero buttons: 48px (was 46px) - Use min-height + line-height for accessibility with browser zoom **Visual updates:** - Border radius: 2px (was 3px) - Font weight: 500 (was 400/normal) - Transparent background for secondary/tertiary buttons **Focus states (Gutenberg-style outer ring):** - Primary: outer theme color ring + inner white ring for contrast - Secondary/Tertiary/Link: single outer theme color ring - Use var(--wp-admin-theme-color) for focus ring color **Hover/Active states:** - Secondary buttons: subtle rgba() background tint on hover/active - Use theme-color-darker-20 for hover text/border colors - Link buttons: theme-color-darker-20 on hover **Components updated:** - .button, .button-primary, .button-secondary - .button-link, .button-link-delete - .page-title-action (now uses secondary button pattern) See: https://core.trac.wordpress.org/ticket/64308
Update theme card buttons to work with the new design system sizing. **Button sizing:** - Use compact size (32px) for theme card buttons since they're in a space-constrained context - Set explicit min-height, line-height, and padding to match compact spec **Button visibility:** - Add white background to secondary buttons for visibility against the semi-transparent theme card overlay - Use :not(.button-primary) selector to preserve primary button styling - Adjust hover state to use #f0f0f0 background **Layout adjustments:** - Increase theme name vertical padding from 15px to 16px to accommodate taller buttons - Adjust active theme padding-right from 110px to 115px for button width - Reduce theme-actions horizontal padding from 15px to 12px See: https://core.trac.wordpress.org/ticket/64308
…ss-develop into admin-reskin/buttons
# Conflicts: # src/wp-admin/css/colors/_admin.scss # src/wp-admin/css/forms.css
Adds line-height rules to buttons.css to vertically center dashicons inside all button variants (default, compact, small, hero). This provides a consistent solution instead of scattered individual fixes. Removes redundant dashicon centering fixes from dashboard.css and themes.css that are now handled by the global rules.
Corrects the line-height values for dashicons inside buttons. The previous calculation incorrectly used the button's font-size (13px) as the base, but dashicons have their own font-size of 20px. Correct values: line-height = target-height / 20px - Default (38px): 1.9 - Compact (30px): 1.5 - Small (22px): 1.1 - Hero (46px): 2.3
Updates the icon positioning for button states (updating-message, installed, installing, etc.) to use line-height instead of margin-top hacks. This ensures icons are vertically centered in 40px buttons.
Updates tablenav container and pagination buttons to match 40px button height: - tablenav height: 30px → 40px - Pagination buttons: min-width/height 30px → 40px, line-height adjusted Fixes plugin card update icon centering using line-height instead of margin-top hack.
Sets explicit compact button sizing (32px) for the Screen Options and Help toggle buttons in the admin header. These buttons should remain smaller than the default 40px buttons used elsewhere.
Update all notice styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Base Notice Styles:** - Border: 4px left border only (removed generic border) - Box shadow: removed for cleaner appearance - Padding: 8px 12px (was 1px 12px) - Typography: 13px/20px, color #1e1e1e (gray-900) **Notice Type Colors:** - Info: #3858e9 border, transparent background - Success: #4ab866 border, #eff9f1 background - Warning: #f0b849 border, #fef8ee background - Error: #cc1818 border, #fcf0f0 background **Dismiss Button:** - Size: 24px × 24px (was 20px × 20px) - Position: top 8px, right 12px (improved alignment) - Color: #1e1e1e (was #787c82) - Icon size: 20px/24px (was 16px/20px) - Focus: Gutenberg-style ring using var(--wp-admin-theme-color) - Hover: opacity 0.7 **Links in Notices:** - Color: var(--wp-admin-theme-color) - Hover: var(--wp-admin-theme-color-darker-10) - Focus: proper focus ring with var(--wp-admin-border-width-focus) **Spacing:** - Dismissible notices: 48px right padding (was 38px) - Provides 24px gap between content and dismiss button See: https://core.trac.wordpress.org/ticket/64308
Update all card and postbox styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Base Card Styles:** - Background: #ffffff (white) - Border: 1px solid rgba(0,0,0,0.1) for subtle appearance - Border radius: 8px for dashboard widgets, plugin cards, theme cards, welcome panel - Border radius: 0 for post editor metaboxes (maintains existing behavior) - Padding: 16px for small cards, 16px 24px for medium cards **Dashboard Widgets:** - Border radius: 8px with rounded corners - Header padding: 12px vertical, 16px horizontal for compact appearance - Content padding: 16px (was 0 12px 12px) - "At a Glance" widget: 16px top padding for proper alignment - "Activity" widget: maintains 12px horizontal padding for layout compatibility - Welcome panel: 8px border radius, 24px padding (was 48px) **Drag and Drop Interactions:** - Gutenberg-style blue highlights using var(--wp-admin-theme-color) - Active drop zones: subtle blue background rgba(var(--wp-admin-theme-color--rgb), 0.04) - Sortable placeholder: 2px solid blue border with 8px border radius - Meta-box-sortables: 4px padding to reserve space for drag feedback - Container margins: adjusted to maintain original layout spacing - No dimensional changes during drag operations **Plugin Cards:** - Border radius: 8px with overflow hidden - Border: rgba(0,0,0,0.1) - Padding: 16px for top and bottom sections - Card bottom: updated border color for consistency **Theme Cards:** - Border radius: 8px with overflow hidden - Background: solid white (removed semi-transparent overlay) - Theme name: 16px padding, border-top instead of inset box-shadow - "Add New Theme" card: maintains transparent background and borderless style **Generic Card Component:** - Border radius: 8px - Padding: 16px 24px (was 0.7em 2em 1em) - Border: rgba(0,0,0,0.1) - Removed box-shadow for cleaner appearance **Post Editor Metaboxes:** - Maintains square corners (border-radius: 0) - Drag interactions: blue background tint, no border - 4px padding on sortables with compensating margins - Collapsed state: header border hidden See #64308. # Conflicts: # src/wp-admin/css/themes.css
Wrap the 'fresh' to 'modern' admin color migration in a database version check to prevent re-running on subsequent version bumps during the release cycle. Also refactors to use `$wpdb->update()` for cleaner code. Props peterwilsoncc.
Moves the Modern color scheme (the new default) to the first position in the Administration Color Scheme picker on the profile page. Classic and Light follow immediately after, making it easy for users to find and return to familiar schemes after trying other options. Props peterwilsoncc.
Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
# Conflicts: # src/wp-admin/css/themes.css
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is purely for testing it should not get merged like this.
It combines all 4 PR's into one