Admin Reskin: Buttons and Form Fields #10783
Open
+683
−277
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
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.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
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
1 participant
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.
Trac ticket: https://core.trac.wordpress.org/ticket/64547
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.