diff --git a/src/wp-admin/admin-header.php b/src/wp-admin/admin-header.php index 0c075d68272a0..e1e9ba0f6562b 100644 --- a/src/wp-admin/admin-header.php +++ b/src/wp-admin/admin-header.php @@ -193,7 +193,7 @@ $admin_body_class .= ' branch-' . str_replace( array( '.', ',' ), '-', (float) get_bloginfo( 'version' ) ); $admin_body_class .= ' version-' . str_replace( '.', '-', preg_replace( '/^([.0-9]+).*/', '$1', get_bloginfo( 'version' ) ) ); -$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' ); +$admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'modern' ); $admin_body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_user_locale() ) ) ); if ( wp_is_mobile() ) { diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 553037e3d30d1..5d9bcb3f7bb89 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -3,6 +3,7 @@ @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; @use 'variables'; @use 'mixins'; +@use 'tokens'; /** * This function name uses British English to maintain backward compatibility, as developers @@ -37,13 +38,27 @@ span.wp-media-buttons-icon:before { color: currentColor; } -.wp-core-ui .button-link { - color: variables.$link; +/* Link button - appears as text link, no border or background */ +/* Matches Gutenberg's .is-link button variant */ +.wp-core-ui .button-link, +.wp-core-ui .button.button-link { + color: var(--wp-admin-theme-color); &:hover, - &:active, + &:active { + color: var(--wp-admin-theme-color-darker-20); + } + &:focus { - color: variables.$link-focus; + color: var(--wp-admin-theme-color); + border-radius: tokens.$radius-s; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + outline: 1px solid transparent; + } + + &:disabled, + &[aria-disabled="true"] { + color: tokens.$gray-600; } } @@ -51,7 +66,7 @@ span.wp-media-buttons-icon:before { .media-modal .trash-attachment, .media-modal .untrash-attachment, .wp-core-ui .button-link-delete { - color: #a00; + color: tokens.$alert-red; } .media-modal .delete-attachment:hover, @@ -62,18 +77,36 @@ span.wp-media-buttons-icon:before { .media-modal .untrash-attachment:focus, .wp-core-ui .button-link-delete:hover, .wp-core-ui .button-link-delete:focus { - color: #dc3232; + color: color.adjust(tokens.$alert-red, $lightness: 10%); } /* Forms */ +// Checkbox checked state - uses theme color +input[type="checkbox"]:checked { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} + input[type=checkbox]:checked::before { 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"); 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") / ''; } -input[type=radio]:checked::before { - background: variables.$form-checked; +// Checkbox checkmark - white for visibility on theme color background +input[type="checkbox"]:checked::before { + 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") / ''; +} + +// Radio checked state - uses theme color +input[type="radio"]:checked { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} + +// Radio dot - white for visibility on theme color background +input[type="radio"]:checked::before { + background: tokens.$white; } .wp-core-ui input[type="reset"]:hover, @@ -81,6 +114,7 @@ input[type=radio]:checked::before { color: variables.$link-focus; } +// Text input focus - outset focus ring matching button focus style input[type="text"]:focus, input[type="password"]:focus, input[type="color"]:focus, @@ -92,96 +126,70 @@ input[type="month"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, -input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, -input[type="checkbox"]:focus, -input[type="radio"]:focus, select:focus, textarea:focus { - border-color: variables.$highlight-color; - box-shadow: 0 0 0 1px variables.$highlight-color; + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); } +// Checkbox/Radio focus - Gutenberg-style outset focus ring +input[type="checkbox"]:focus, +input[type="radio"]:focus { + border-color: tokens.$gray-900; + box-shadow: 0 0 0 2px tokens.$white, 0 0 0 4px var(--wp-admin-theme-color); + outline: 2px solid transparent; +} -/* Core UI */ +// Select focus (wp-core-ui styled selects) +.wp-core-ui select:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); +} -.wp-core-ui { +// Autocomplete focus state +.wp-tags-autocomplete .ui-state-focus, +.wp-tags-autocomplete [aria-selected="true"] { + background-color: var(--wp-admin-theme-color); +} - .button { - border-color: #7e8993; - color: #32373c; - } +// Password field focus +#pass1:focus, +#pass1-text:focus { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); +} - .button.hover, - .button:hover, - .button.focus, - .button:focus { - border-color: color.adjust(#7e8993, $lightness: -5%); - color: color.adjust(#32373c, $lightness: -5%); - } +// Password toggle button focus +.mailserver-pass-wrap .button.wp-hide-pw:focus { + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); +} - .button.focus, - .button:focus { - border-color: #7e8993; - color: color.adjust(#32373c, $lightness: -5%); - box-shadow: 0 0 0 1px #32373c; - } - .button:active { - border-color: #7e8993; - color: color.adjust(#32373c, $lightness: -5%); - box-shadow: none; - } +/* Core UI */ - .button.active, - .button.active:focus, - .button.active:hover { - border-color: variables.$button-color; - color: color.adjust(#32373c, $lightness: -5%); - box-shadow: inset 0 2px 5px -3px variables.$button-color; - } +.wp-core-ui { - .button.active:focus { - box-shadow: 0 0 0 1px #32373c; + /* Default button - theme color border and text (matches secondary) */ + .button { + @include mixins.button-secondary(); } - @if ( variables.$low-contrast-theme != "true" ) { - .button, - .button-secondary { - color: variables.$highlight-color; - border-color: variables.$highlight-color; - } - - .button.hover, - .button:hover, - .button-secondary:hover{ - border-color: color.adjust(variables.$highlight-color, $lightness: -10%); - color: color.adjust(variables.$highlight-color, $lightness: -10%); - } - - .button.focus, - .button:focus, - .button-secondary:focus { - border-color: color.adjust(variables.$highlight-color, $lightness: 10%); - color: color.adjust(variables.$highlight-color, $lightness: -20%); - box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%); - } - - .button-primary { - &:hover { - color: #fff; - } - } + /* Secondary button - same as default */ + .button-secondary { + @include mixins.button-secondary(); } + /* Primary button - theme color background */ .button-primary { - @include mixins.button( variables.$button-color ); + @include mixins.button(); } .button-group > .button.active { - border-color: variables.$button-color; + border-color: var(--wp-admin-theme-color); + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); } .wp-ui-primary { @@ -215,28 +223,34 @@ textarea:focus { /* List tables */ -@if variables.$low-contrast-theme == "true" { - .wrap .page-title-action:hover { - color: variables.$menu-text; - background-color: variables.$menu-background; - } -} @else { - .wrap .page-title-action, - .wrap .page-title-action:active { - border: 1px solid variables.$highlight-color; - color: variables.$highlight-color; - } - .wrap .page-title-action:hover { - color: color.adjust(variables.$highlight-color, $lightness: -10%); - border-color: color.adjust(variables.$highlight-color, $lightness: -10%); - } +// .page-title-action uses secondary button styling +.wrap .page-title-action { + background: transparent; + border: 1px solid var(--wp-admin-theme-color); + border-radius: tokens.$radius-s; + color: var(--wp-admin-theme-color); +} - .wrap .page-title-action:focus { - border-color: color.adjust(variables.$highlight-color, $lightness: 10%); - color: color.adjust(variables.$highlight-color, $lightness: -20%); - box-shadow: 0 0 0 1px color.adjust(variables.$highlight-color, $lightness: 10%); - } +.wrap .page-title-action:hover { + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + border-color: var(--wp-admin-theme-color-darker-20); + color: var(--wp-admin-theme-color-darker-20); +} + +.wrap .page-title-action:focus { + background: transparent; + border-color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + outline: 1px solid transparent; +} + +.wrap .page-title-action:active { + background: rgba(var(--wp-admin-theme-color--rgb), 0.08); + border-color: var(--wp-admin-theme-color-darker-20); + color: var(--wp-admin-theme-color-darker-20); + box-shadow: none; } .view-switch a.current:before { diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss index d33cf3bb2d854..9575f1f2d623b 100644 --- a/src/wp-admin/css/colors/_mixins.scss +++ b/src/wp-admin/css/colors/_mixins.scss @@ -1,39 +1,132 @@ @use 'sass:color'; +@use 'tokens'; /* - * Button mixin- creates a button effect with correct - * highlights/shadows, based on a base color. + * Button mixin - creates a primary button effect. + * Uses CSS custom properties for theme color support across color schemes. */ -@mixin button( $button-color, $button-text-color: #fff ) { - background: $button-color; - border-color: $button-color; +@mixin button( $button-text-color: #fff ) { + background: var(--wp-admin-theme-color); + border-color: transparent; + border-radius: tokens.$radius-s; color: $button-text-color; - &:hover, - &:focus { - background: color.adjust($button-color, $lightness: 3%); - border-color: color.adjust($button-color, $lightness: -3%); + &:hover { + background: var(--wp-admin-theme-color-darker-10); + border-color: transparent; color: $button-text-color; } &:focus { + background: var(--wp-admin-theme-color); + border-color: transparent; + color: $button-text-color; + /* Gutenberg-style focus ring: outer theme color + inset white for contrast */ box-shadow: - 0 0 0 1px #fff, - 0 0 0 3px $button-color; + 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), + inset 0 0 0 1px tokens.$white; + /* Visible in Windows High Contrast mode */ + outline: 1px solid transparent; } &:active { - background: color.adjust($button-color, $lightness: -5%); - border-color: color.adjust($button-color, $lightness: -5%); + background: var(--wp-admin-theme-color-darker-20); + border-color: transparent; color: $button-text-color; } + &:disabled, + &.disabled { + background: tokens.$gray-100; + border-color: transparent; + color: tokens.$gray-600; + cursor: not-allowed; + } + &.active, &.active:focus, &.active:hover { - background: $button-color; + background: var(--wp-admin-theme-color-darker-10); color: $button-text-color; - border-color: color.adjust($button-color, $lightness: -15%); - box-shadow: inset 0 2px 5px -3px color.adjust($button-color, $lightness: -50%); + border-color: transparent; + box-shadow: none; + } +} + +/* + * Secondary button mixin - outlined style with theme color. + * Matches Gutenberg's .is-secondary button variant. + */ +@mixin button-secondary() { + background: transparent; + border: 1px solid var(--wp-admin-theme-color); + border-radius: tokens.$radius-s; + color: var(--wp-admin-theme-color); + + &:hover { + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + border-color: var(--wp-admin-theme-color-darker-20); + color: var(--wp-admin-theme-color-darker-20); + } + + &:focus { + background: transparent; + border-color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + outline: 1px solid transparent; + } + + &:active { + background: rgba(var(--wp-admin-theme-color--rgb), 0.08); + border-color: var(--wp-admin-theme-color-darker-20); + color: var(--wp-admin-theme-color-darker-20); + box-shadow: none; + } + + &:disabled, + &.disabled { + background: transparent; + border-color: tokens.$gray-300; + color: tokens.$gray-600; + cursor: not-allowed; + } +} + +/* + * Tertiary button mixin - transparent background, gray text. + */ +@mixin button-tertiary() { + background: transparent; + border: 1px solid tokens.$gray-600; + border-radius: tokens.$radius-s; + color: tokens.$gray-900; + + &:hover { + background: rgba(0, 0, 0, 0.05); + border-color: tokens.$gray-700; + color: tokens.$gray-900; + } + + &:focus { + background: transparent; + border-color: var(--wp-admin-theme-color); + color: tokens.$gray-900; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + outline: 1px solid transparent; + } + + &:active { + background: rgba(0, 0, 0, 0.1); + border-color: tokens.$gray-700; + color: tokens.$gray-900; + } + + &:disabled, + &.disabled { + background: transparent; + border-color: tokens.$gray-400; + color: tokens.$gray-600; + cursor: not-allowed; } } diff --git a/src/wp-admin/css/colors/_tokens.scss b/src/wp-admin/css/colors/_tokens.scss new file mode 100644 index 0000000000000..785f1f47f5076 --- /dev/null +++ b/src/wp-admin/css/colors/_tokens.scss @@ -0,0 +1,212 @@ +// ========================================================================== +// WordPress Design System Tokens +// ========================================================================== +// +// These tokens are derived from the WordPress Design System in Figma: +// https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-System +// +// IMPORTANT: Do NOT expose these as CSS custom properties. +// Use these Sass variables to compile to static CSS values. +// The only CSS custom properties available are those in wp-base-styles: +// - --wp-admin-theme-color +// - --wp-admin-theme-color--rgb +// - --wp-admin-theme-color-darker-10 +// - --wp-admin-theme-color-darker-20 +// - --wp-admin-border-width-focus +// +// ========================================================================== + + +// -------------------------------------------------------------------------- +// Grid Units (Spacing) +// -------------------------------------------------------------------------- +// Based on 4px base unit. Use for padding, margin, and gap values. + +$grid-unit-05: 4px; // Scales/grid unit 05 +$grid-unit-10: 8px; // Scales/grid unit 10 +$grid-unit-15: 12px; // Scales/grid unit 15 +$grid-unit-20: 16px; // Scales/grid unit 20 +$grid-unit-30: 24px; // Scales/grid unit 30 +$grid-unit-40: 32px; // Scales/grid unit 40 +$grid-unit-50: 40px; // Scales/grid unit 50 +$grid-unit-60: 48px; // Scales/grid unit 60 +$grid-unit-70: 56px; // Scales/grid unit 70 + + +// -------------------------------------------------------------------------- +// Border Radius +// -------------------------------------------------------------------------- + +$radius-xs: 1px; // radius-xs +$radius-s: 2px; // radius-s - Buttons, inputs +$radius-m: 4px; // radius-m - Focus rings +$radius-l: 8px; // radius-l - Cards, dashboard widgets +$radius-30: 12px; // Radius 30 +$radius-full: 9999px; // radius-full - Pills, avatars, circles + + +// -------------------------------------------------------------------------- +// Gray Scale +// -------------------------------------------------------------------------- +// Neutral colors for backgrounds, borders, and text. + +$gray-100: #f0f0f0; // Scales/Grays/gray-100 - Page background, disabled inputs +$gray-200: #e0e0e0; // Scales/Grays/gray-200 +$gray-300: #dddddd; // Scales/Grays/gray-300 +$gray-400: #cccccc; // Scales/Grays/gray-400 - Disabled borders +$gray-600: #949494; // Scales/Grays/gray-600 - Input borders, disabled text +$gray-700: #757575; // Scales/Grays/gray-700 +$gray-800: #2f2f2f; // Scales/Grays/gray-800 +$gray-900: #1e1e1e; // Scales/Grays/gray-900 - Primary text + +$white: #ffffff; // Scales/Black & White/white + + +// -------------------------------------------------------------------------- +// Theme Colors (Static reference values) +// -------------------------------------------------------------------------- +// For actual theme color usage, use var(--wp-admin-theme-color) instead. +// These are provided for reference and for contexts where CSS vars aren't available. + +$theme-reference: #3858e9; // Scales/Theme/theme (modern scheme) +$theme-darker-10-reference: #2145e6; // Scales/Theme/theme-darker-10 +$theme-darker-20-reference: #183ad6; // Scales/Theme/theme-darker-20 +$theme-alpha-04: rgba(56, 88, 233, 0.04); // Scales/Theme/theme-alpha-04 (4% opacity) +$theme-alpha-08: rgba(56, 88, 233, 0.08); // Scales/Theme/theme-alpha-08 (8% opacity) + +$brand-9: #4465db; // Scales/brand-9 - Focus ring color (static, not theme-dependent) + + +// -------------------------------------------------------------------------- +// Semantic Colors +// -------------------------------------------------------------------------- +// Use these for notices, alerts, and status indicators. +// These are intentionally NOT theme-dependent for consistency. + +$alert-yellow: #f0b849; // Scales/Yellow/alert-yellow - Warnings +$alert-green: #4ab866; // Scales/Green/alert-green - Success +$alert-red: #cc1818; // Scales/Red/alert-red - Errors +$alert-blue: #3858e9; // Info notices (matches modern theme) + +// Background tints for notices +$alert-yellow-bg: #fef8ee; // Warning notice background +$alert-green-bg: #eff9f1; // Success notice background +$alert-red-bg: #fcf0f0; // Error notice background + +$synced-color: #7a00df; // Scales/Purple/--wp-block-synced-color + + +// -------------------------------------------------------------------------- +// Text Colors +// -------------------------------------------------------------------------- + +$text-primary: $gray-900; // Primary text color +$text-secondary: $gray-700; // Secondary text +$text-tertiary: #5d5d5d; // Alias/text/text-tertiary - Placeholder, hints +$text-disabled: $gray-600; // Disabled text + + +// -------------------------------------------------------------------------- +// Component Tokens +// -------------------------------------------------------------------------- + +// Inputs +$input-bg: $white; // Alias/bg/bg-input +$input-border-color: $gray-600; // Default input border +$input-border-color-disabled: $gray-400; +$input-bg-disabled: $gray-100; +$input-border-width-default: 1px; // Input/Default +$input-border-width-focus: 1.5px; // Input/Focus +$field-spacing-horizontal: 8px; // Alias/field-spacing-horizontal + +// Checkboxes and Radios +$checkbox-size: 16px; // Alias/checkbox +$radio-size: 16px; // Alias/radio + +// Toggles +$toggle-width: 32px; // Alias/toggle-width +$toggle-height: 16px; // Alias/toggle-height + +// Buttons +// Note: Gutenberg is transitioning to 40px as the default button size. +// The "compact" size (32px) is available for space-constrained contexts. +$button-height-default: 40px; // Default button height (next-default-40px) +$button-height-compact: 32px; // Compact button height +$button-height-small: 24px; // Small button height + +// Cards and Surfaces +$card-bg: $white; +$card-border-color: rgba(0, 0, 0, 0.1); +$card-border-width: 1px; +$card-border-radius: $radius-l; // 8px for dashboard widgets +$card-border-radius-metabox: 0; // 0 for post editor metaboxes +$card-divider-color: rgba(0, 0, 0, 0.1); + +// Card Padding Sizes +$card-padding-xs: $grid-unit-10; // 8px - xSmall cards +$card-padding-sm: $grid-unit-20; // 16px - Small cards (metaboxes, dashboard widgets) +$card-padding-md-h: $grid-unit-30; // 24px - Medium cards horizontal +$card-padding-md-v: $grid-unit-20; // 16px - Medium cards vertical +$card-padding-lg-h: $grid-unit-40; // 32px - Large cards horizontal +$card-padding-lg-v: $grid-unit-30; // 24px - Large cards vertical + +// Page Layout +$page-padding-large: 48px; // Alias/page-large +$page-padding-small: 24px; // Alias/page-small + + +// -------------------------------------------------------------------------- +// Typography Scale +// -------------------------------------------------------------------------- + +// Font Sizes +$font-size-xs: 11px; // xs - Small labels, button small +$font-size-s: 12px; // s - Body small +$font-size-m: 13px; // m - Base body text, buttons +$font-size-l: 15px; // l - Body large, heading large +$font-size-xl: 20px; // xl - Heading XL + +// Line Heights +$line-height-xs: 16px; // xs +$line-height-s: 20px; // s - Most UI elements +$line-height-m: 24px; // m - Body large + +// Font Weights +$font-weight-regular: 400; // Regular - Body text +$font-weight-medium: 500; // Medium - Headings, buttons + + +// -------------------------------------------------------------------------- +// Elevation (Box Shadows) +// -------------------------------------------------------------------------- + +$elevation-xs: + 0 4px 4px rgba(0, 0, 0, 0.01), + 0 3px 3px rgba(0, 0, 0, 0.02), + 0 1px 2px rgba(0, 0, 0, 0.02), + 0 1px 1px rgba(0, 0, 0, 0.03); + +$elevation-s: + 0 8px 8px rgba(0, 0, 0, 0.02), + 0 1px 2px rgba(0, 0, 0, 0.05); + +$elevation-m: + 0 16px 16px rgba(0, 0, 0, 0.02), + 0 4px 5px rgba(0, 0, 0, 0.03), + 0 2px 3px rgba(0, 0, 0, 0.05); + +$elevation-l: + 0 50px 43px rgba(0, 0, 0, 0.02), + 0 30px 36px rgba(0, 0, 0, 0.04), + 0 15px 27px rgba(0, 0, 0, 0.07), + 0 5px 15px rgba(0, 0, 0, 0.08); + + +// -------------------------------------------------------------------------- +// Layout +// -------------------------------------------------------------------------- + +$modal-width-small: 384px; // Layout/Modal small +$modal-width-medium: 512px; // Layout/Modal medium +$modal-width-large: 840px; // Layout/Modal large + diff --git a/src/wp-admin/css/colors/_variables.scss b/src/wp-admin/css/colors/_variables.scss index 8a073f830e4b6..d37c2b1392f00 100644 --- a/src/wp-admin/css/colors/_variables.scss +++ b/src/wp-admin/css/colors/_variables.scss @@ -1,5 +1,8 @@ @use "sass:color"; +// Import design system tokens +@use "tokens" as *; + // assign default value to all undefined variables $scheme-name: "default" !default; @@ -15,7 +18,7 @@ $notification-color: #d54e21 !default; // global -$body-background: #f1f1f1 !default; +$body-background: $gray-100 !default; $link: #0073aa !default; $link-focus: color.adjust($link, $lightness: 10%) !default; diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 70c110d351d0e..9a154b02edb6c 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -632,14 +632,14 @@ code { top: -3px; margin-left: 4px; border: 1px solid #2271b1; - border-radius: 3px; - background: #f6f7f7; + border-radius: 2px; + background: transparent; font-size: 13px; - font-weight: 400; - line-height: 2.15384615; + font-weight: 500; + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height */ color: #2271b1; /* use the standard color used for buttons */ - padding: 0 10px; - min-height: 30px; + padding: 0 12px; -webkit-appearance: none; } @@ -650,7 +650,6 @@ code { .wrap .add-new-h2:hover, /* deprecated */ .wrap .page-title-action:hover { - background: #f0f0f1; border-color: #0a4b78; color: #0a4b78; } @@ -787,7 +786,7 @@ img.emoji { } .stuffbox .hndle { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid rgb(0, 0, 0, 0.1); } .quicktags { @@ -806,14 +805,14 @@ img.emoji { #bulk-titles .ntdelbutton:before, .notice-dismiss:before { background: none; - color: #787c82; + color: #1e1e1e; content: "\f153"; content: "\f153" / ''; display: block; - font: normal 16px/20px dashicons; - height: 20px; + font: normal 20px/24px dashicons; + height: 24px; text-align: center; - width: 20px; + width: 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -931,10 +930,12 @@ a#remove-post-thumbnail:hover, clear: both; border-top: 1px solid #dcdcde; background: #f6f7f7; + display: flex; + align-items: center; + justify-content: space-between; } #delete-action { - float: left; line-height: 2.30769231; /* 30px */ } @@ -951,7 +952,7 @@ a#remove-post-thumbnail:hover, #publishing-action { text-align: right; - float: right; + margin-left: auto; line-height: 1.9; } @@ -1109,8 +1110,28 @@ th.action-links { margin: 0; } -/* Use flexbox only on the plugins install page. The `filter-links` and search form children will become flex items. */ -.plugin-install-php .wp-filter { +.wp-filter .search-form input[type="search"] { + min-height: 32px; + line-height: 2.14285714; /* 30px for 32px height with 14px font */ + padding: 0 8px; +} + +.wp-filter .search-form select, +.wp-filter .filter-items select { + min-height: 32px; + line-height: 2.14285714; /* 30px for 32px height with 14px font */ + padding: 0 24px 0 8px; +} + +.wp-filter .button { + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height with 13px font */ + padding: 0 12px; +} + +/* Use flexbox only on the plugins install page and upload page. The `filter-links` and search form children will become flex items. */ +.plugin-install-php .wp-filter, +.upload-php .wp-filter { display: flex; flex-wrap: wrap; justify-content: space-between; @@ -1421,11 +1442,11 @@ th.action-links { div.updated, div.error { background: #fff; - border: 1px solid #c3c4c7; - border-left-width: 4px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + border: none; + border-left: 4px solid #c3c4c7; + box-shadow: none; margin: 5px 15px 2px; - padding: 1px 12px; + padding: 8px 12px; } div[class="update-message"] { /* back-compat for pre-4.6 */ @@ -1438,15 +1459,31 @@ div.updated p, div.error p, .form-table td .notice p { margin: 0.5em 0; - padding: 2px; + padding: 0; + font-size: 13px; + line-height: 1.54; + color: #1e1e1e; } -.error a { +.notice a, +.error a, +.updated a { + color: var(--wp-admin-theme-color-darker-10); text-decoration: underline; } -.updated a { - padding-bottom: 2px; +.notice a:hover, +.error a:hover, +.updated a:hover { + color: var(--wp-admin-theme-color-darker-20); +} + +.notice a:focus, +.error a:focus, +.updated a:focus { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + outline: 2px solid transparent; + border-radius: 2px; } .notice-alt { @@ -1464,66 +1501,82 @@ div.error p, } .wp-core-ui .notice.is-dismissible { - padding-right: 38px; + padding-right: 48px; position: relative; } .notice-dismiss { position: absolute; - top: 0; - right: 1px; + top: 12px; + right: 12px; border: none; margin: 0; - padding: 9px; + padding: 0; background: none; - color: #787c82; + color: #1e1e1e; cursor: pointer; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; } .notice-dismiss:hover:before, -.notice-dismiss:active:before, -.notice-dismiss:focus:before { - color: #d63638; +.notice-dismiss:active:before { + color: #1e1e1e; + opacity: 0.7; } .notice-dismiss:focus { - box-shadow: 0 0 0 2px #2271b1; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } +.notice-dismiss:focus:before { + color: #1e1e1e; +} + .notice-success, div.updated { - border-left-color: #00a32a; + border-left-color: #4ab866; + background-color: #eff9f1; } -.notice-success.notice-alt { - background-color: #edfaef; +.notice-success.notice-alt, +div.updated.notice-alt { + background-color: #eff9f1; } .notice-warning { - border-left-color: #dba617; + border-left-color: #f0b849; + background-color: #fef8ee; } .notice-warning.notice-alt { - background-color: #fcf9e8; + background-color: #fef8ee; } .notice-error, div.error { - border-left-color: #d63638; + border-left-color: #cc1818; + background-color: #fcf0f0; } -.notice-error.notice-alt { - background-color: #fcf0f1; +.notice-error.notice-alt, +div.error.notice-alt { + background-color: #fcf0f0; } .notice-info { - border-left-color: #72aee6; + border-left-color: #3858e9; + background-color: transparent; } .notice-info.notice-alt { - background-color: #f0f6fc; + background-color: transparent; } #plugin-information-footer .update-now:not(.button-disabled):before { @@ -1716,7 +1769,9 @@ p.auto-update-status { .button.installing:before, .button.activated-message:before, .button.activating-message:before { - margin: 3px 5px 0 -2px; + margin: 0 5px 0 -2px; + line-height: 1.9; /* 38px (20px * 1.9) - matches button */ + vertical-align: top; } #plugin-information-footer .button { @@ -1734,11 +1789,13 @@ p.auto-update-status { #plugin-information-footer .button.updated-message:before, #plugin-information-footer .button.activated-message:before, #plugin-information-footer .button.activating-message:before { - margin: 9px 5px 0 -2px; + margin: 0 5px 0 -2px; + line-height: 1.9; /* 38px (20px * 1.9) - matches button */ + vertical-align: top; } #plugin-information-footer .button.update-now.updating-message:before { - margin: -3px 5px 0 -2px; + margin: 0 5px 0 -2px; } .button-primary.updating-message:before, @@ -1816,12 +1873,13 @@ p.auto-update-status { border: 1px solid #c3c4c7; border-top: none; height: auto; + min-height: 32px; /* Compact size for header buttons */ margin-bottom: 0; - padding: 3px 6px 3px 16px; + padding: 0 6px 0 16px; background: #fff; border-radius: 0 0 4px 4px; color: #646970; - line-height: 1.7; + line-height: 2.30769231; /* 30px - matches compact button */ box-shadow: 0 0 0 transparent; transition: box-shadow 0.1s linear; } @@ -1847,12 +1905,10 @@ p.auto-update-status { right: 0; content: "\f140"; content: "\f140" / ''; - font: normal 20px/1 dashicons; + font: normal 20px/1.5 dashicons; /* line-height 1.5 = 30px to match compact button */ display: inline-block; padding: 0 5px 0 0; - bottom: 2px; - position: relative; - vertical-align: bottom; + vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; @@ -2156,7 +2212,7 @@ html.wp-toolbar { display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid rgb(0, 0, 0, 0.1); } .postbox-header .hndle { @@ -2169,6 +2225,7 @@ html.wp-toolbar { .postbox-header .handle-actions { flex-shrink: 0; + padding-inline-end: 6px; } /* Post box order and toggle buttons. */ @@ -2205,8 +2262,10 @@ html.wp-toolbar { } .sortable-placeholder { - border: 1px dashed #c3c4c7; + border: 2px solid var(--wp-admin-theme-color); + border-radius: 8px; margin-bottom: 20px; + background: rgb(var(--wp-admin-theme-color--rgb), 0.04); } .postbox, @@ -2214,10 +2273,13 @@ html.wp-toolbar { margin-bottom: 20px; padding: 0; line-height: 1; + background: #ffffff; + border: 1px solid rgb(0, 0, 0, 0.1); + border-radius: 0; } -.postbox.closed { - border-bottom: 0; +.postbox.closed .postbox-header { + border-bottom: none; } /* user-select is not a part of the CSS standard - may change behavior in the future */ @@ -2228,7 +2290,7 @@ html.wp-toolbar { } .postbox .inside { - padding: 0 12px 12px; + padding: 16px; line-height: 1.4; font-size: 13px; } @@ -2241,7 +2303,7 @@ html.wp-toolbar { } .postbox .inside { - margin: 11px 0; + margin: 0; position: relative; } @@ -2422,7 +2484,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ .metabox-holder h2.hndle { font-size: 14px; - padding: 8px 12px; + padding: 16px; margin: 0; line-height: 1.4; } diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 60a6d0a3e7009..c5267cd6d5d1f 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -70,7 +70,7 @@ body { #customize-save-button-wrapper { float: right; - margin-top: 9px; + margin-top: 3px; /* Vertically center 40px button in 45px header */ } body:not(.ready) #customize-save-button-wrapper .save { @@ -185,7 +185,7 @@ body.trashing #publish-settings { } #customize-header-actions .spinner { - margin-top: 13px; + margin-top: 13px; /* Vertically center 20px spinner in 45px header */ margin-right: 4px; } @@ -272,7 +272,8 @@ body.trashing #publish-settings { .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { margin: 0; position: absolute; - bottom: 9px; + top: 50%; + transform: translateY(-50%); right: 0; } @@ -283,10 +284,10 @@ body.trashing #publish-settings { .customize-copy-preview-link:before, .customize-copy-preview-link:after { content: ""; - height: 28px; + height: 32px; position: absolute; background: #fff; - top: -1px; + top: 0; } .customize-copy-preview-link:before { @@ -1136,6 +1137,12 @@ p.customize-section-description { position: static; } +#available-menu-items .new-content-item-wrapper > label, +.customize-control-dropdown-pages .new-content-item-wrapper > label { + margin-bottom: 4px; + display: block; +} + #available-menu-items .accordion-section-content .new-content-item, .customize-control-dropdown-pages .new-content-item { display: flex; @@ -1158,14 +1165,25 @@ p.customize-section-description { #available-menu-items .new-content-item .create-item-input, .customize-control-dropdown-pages .new-content-item .create-item-input { flex-grow: 10; + width: 100%; +} + +#available-menu-items .new-content-item .create-item-input { + min-height: 32px; + line-height: 2.15384615; /* 28px for 32px min-height with 13px font */ } #available-menu-items .new-content-item .add-content, .customize-control-dropdown-pages .new-content-item .add-content { - margin: 2px 0 2px 6px; + margin: 0 0 0 6px; flex-grow: 1; } +#available-menu-items .new-content-item .add-content { + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px min-height with 13px font */ +} + .customize-control-dropdown-pages .new-content-item .create-item-input.invalid { border: 1px solid #d63638; } @@ -1448,17 +1466,16 @@ p.customize-section-description { .customize-control .attachment-media-view .upload-button { width: 100%; - padding: 9px 0; + text-align: center; } .customize-control .attachment-media-view .upload-button.control-focus { width: auto; - padding: 0 10px; } .customize-control.customize-control-header .actions .upload-button.button.new { width: 100%; - padding: 9px 0; + text-align: center; } .customize-control .attachment-media-view .thumbnail, @@ -1596,7 +1613,7 @@ p.customize-section-description { } .customize-control-header button.random .dice { - margin-top: 4px; + margin-top: 0; } .customize-control-header .placeholder:hover .dice, @@ -1796,7 +1813,7 @@ p.customize-section-description { position: absolute; right: 10px; top: 50%; - margin-top: -14px; + margin-top: -20px; /* Half of 40px button height for vertical centering */ font-weight: 400; } @@ -2199,12 +2216,13 @@ p.customize-section-description { } .themes-filter-bar .wp-filter-search { - line-height: 1.8; - padding: 6px 10px 6px 30px; + line-height: 2.14285714; /* 30px for 32px compact input */ + padding: 0 10px 0 30px; max-width: 100%; width: 40%; min-width: 300px; height: 32px; + min-height: 32px; /* Override global 40px min-height for compact bar */ margin: 1px 0; top: 0; left: 0; @@ -2676,6 +2694,11 @@ body.adding-widget .add-new-widget:before, border-right: 1px solid #dcdcde; } +#available-widgets .accordion-section-title, +#available-menu-items .accordion-section-title { + z-index: 2; +} + #available-widgets .customize-section-title, #available-menu-items .customize-section-title { border: 0; @@ -2725,7 +2748,7 @@ body.adding-widget .add-new-widget:before, #available-widgets-filter input, #available-menu-items-search input { width: 100%; - min-height: 32px; + min-height: 40px; margin: 1px 0; padding: 0 30px; } @@ -2739,7 +2762,7 @@ body.adding-widget .add-new-widget:before, #available-widgets-filter .search-icon { display: block; position: absolute; - bottom: 15px; /* 13 container padding +1 input margin +1 input border */ + bottom: 19px; /* 13 container padding +1 input margin +1 input border +4 centering in 40px input */ left: 16px; width: 30px; height: 30px; @@ -2751,7 +2774,7 @@ body.adding-widget .add-new-widget:before, #available-widgets-filter .clear-results, #available-menu-items-search .accordion-section-title .clear-results { position: absolute; - top: 36px; /* 13 container padding +1 input margin +1 input border */ + top: 40px; /* 13 container padding +1 input margin +1 input border +4 centering in 40px input */ right: 16px; width: 30px; height: 30px; @@ -2920,10 +2943,6 @@ body.adding-widget .add-new-widget:before, bottom: 16px; } - .preview-link-wrapper .customize-copy-preview-link.preview-control-element.button { - bottom: 10px; - } - .media-widget-control .media-widget-buttons .button.edit-media, .media-widget-control .media-widget-buttons .button.change-media, .media-widget-control .media-widget-buttons .button.select-media { @@ -3019,7 +3038,7 @@ body.adding-widget .add-new-widget:before, } .customize-control .attachment-media-view .upload-button { - padding: 5px 0; + text-align: center; } #customize-control-changeset_status .customize-inside-control-row { @@ -3089,7 +3108,7 @@ body.adding-widget .add-new-widget:before, } #available-menu-items-search .clear-results { - top: 36px; + top: 40px; right: 16px; } diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index 3bf0193f02eea..0e4c2a87b4294 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -688,7 +688,7 @@ #available-menu-items-search .spinner { position: absolute; - bottom: 20px; /* 13 container padding +1 input margin +6 ( ( 32 input height - 20 spinner height ) / 2 ) */ + bottom: 24px; /* 13 container padding +1 input margin +10 ( ( 40 input height - 20 spinner height ) / 2 ) */ right: 21px; margin: 0 !important; } @@ -697,7 +697,7 @@ #available-menu-items #available-menu-items-search .accordion-section-content { position: absolute; left: 0; - top: 75px; /* below title div / search input */ + top: 83px; /* below title div / search input (75 + 8 for 40px input) */ bottom: 0; /* 100% height that still triggers lazy load */ max-height: none; width: 100%; @@ -860,6 +860,10 @@ li.assigned-to-menu-location .add-new-menu-item { } .customize-control-nav_menu .customize-control-nav_menu-buttons { + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 8px; margin-top: 12px; } @@ -882,12 +886,12 @@ li.assigned-to-menu-location .add-new-menu-item { @media screen and (max-width: 782px) { #available-menu-items #available-menu-items-search .accordion-section-content { - top: 63px; + top: 71px; /* 63 + 8 for 40px input */ } } @media screen and (max-width: 640px) { #available-menu-items #available-menu-items-search .accordion-section-content { - top: 146px; + top: 154px; /* 146 + 8 for 40px input */ } } diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 64aa30dbedeac..1c5d42ea6b1ff 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -40,7 +40,15 @@ #dashboard-widgets-wrap { overflow: hidden; - margin: 0 -8px; + margin: 0 -4px; +} + +#dashboard-widgets .postbox { + border-radius: 8px; +} + +#dashboard-widgets .postbox-header .hndle { + padding: 12px 16px; } #dashboard-widgets .postbox .inside { @@ -50,20 +58,32 @@ #dashboard-widgets .meta-box-sortables { display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ /* Required min-height to make the jQuery UI Sortable drop zone work. */ - min-height: 100px; - margin: 0 8px 20px; + min-height: 0; + margin-right: 8px; + padding: 4px; +} + +#dashboard-widgets .meta-box-sortables:not(:empty) { + margin-bottom: 16px; } #dashboard-widgets .postbox-container .empty-container { - outline: 3px dashed #c3c4c7; + outline: 2px dashed rgb(0, 0, 0, 0.15); + outline-offset: -2px; + border-radius: 8px; height: 250px; } -/* Only highlight drop zones when dragging and only in the 2 columns layout. */ +/* Only highlight drop zones when dragging. */ .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { - outline: 3px dashed #646970; - /* Prevent margin on the child from collapsing with margin on the parent. */ - display: flow-root; + border-radius: 8px; + background: rgb(var(--wp-admin-theme-color--rgb), 0.04); + min-height: 100px; +} + +.is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container { + outline: 2px dashed rgb(0, 0, 0, 0.15); + background: rgb(0, 0, 0, 0.01); } #dashboard-widgets .postbox-container .empty-container:after { @@ -121,6 +141,8 @@ overflow: auto; margin: 16px 0; background-color: #151515; + border: 1px solid rgb(0, 0, 0, 0.1); + border-radius: 8px; font-size: 14px; line-height: 1.3; clear: both; @@ -259,11 +281,11 @@ clear: both; display: grid; z-index: 1; - padding: 48px; + padding: 24px; grid-template-columns: repeat(3, 1fr); gap: 32px; align-self: flex-end; - background: #fff; + background: #ffffff; } [class*="welcome-panel-icon"] { @@ -704,7 +726,7 @@ body #dashboard-widgets .postbox form .submit { } #dashboard_right_now .main { - padding: 0 12px 11px; + padding: 16px 16px 11px; } #dashboard_right_now .main p { @@ -807,7 +829,7 @@ body #dashboard-widgets .postbox form .submit { min-height: 90px; max-height: 1300px; margin: 0 0 8px; - padding: 6px 7px; + padding: 8px 12px; resize: none; } @@ -892,7 +914,7 @@ body #dashboard-widgets .postbox form .submit { #dashboard_activity .inside { margin: 0; - padding-bottom: 0; + padding: 0 12px; } #dashboard_activity .no-activity { @@ -1240,10 +1262,6 @@ a.rsswidget { margin: 12px 0; } -#dashboard_php_nag .button .dashicons-external { - line-height: 25px; -} - .bigger-bolder-text { font-weight: 600; font-size: 14px; @@ -1298,10 +1316,11 @@ a.rsswidget { #dashboard-widgets #postbox-container-3 .empty-container, #dashboard-widgets #postbox-container-4 .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; + display: none; } #dashboard-widgets #postbox-container-3 .empty-container:after, @@ -1314,7 +1333,7 @@ a.rsswidget { } #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; @@ -1352,10 +1371,11 @@ a.rsswidget { } #dashboard-widgets #postbox-container-4 .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; + display: none; } #dashboard-widgets #postbox-container-4 .empty-container:after { diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 7e4110a8c569e..4fef3a49c35f0 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -5,6 +5,7 @@ #poststuff #post-body { padding: 0; + margin: 0 -4px; } #poststuff .postbox-container { @@ -167,11 +168,14 @@ body.post-type-wp_navigation .inline-edit-status { /* Post Screen */ +.metabox-holder .postbox-container .meta-box-sortables { + padding: 4px; +} + /* Only highlight drop zones when dragging and only in the 2 columns layout. */ .is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables { - outline: 3px dashed #646970; - /* Prevent margin on the child from collapsing with margin on the parent. */ - display: flow-root; + border-radius: 8px; + background: rgb(var(--wp-admin-theme-color--rgb), 0.04); /* * This min-height is meant to limit jumpiness while dragging. It's equivalent * to the minimum height of the sortable-placeholder which is given by the height @@ -325,8 +329,9 @@ form#tags-filter { } #post-body .tagsdiv #newtag { - margin-right: 5px; - width: 16em; + margin-right: 0; + flex: 1; + min-width: 0; } #side-sortables input#post_password { @@ -334,7 +339,8 @@ form#tags-filter { } #side-sortables .tagsdiv #newtag { - width: 68%; + flex: 1; + min-width: 0; } #post-status-info { @@ -1423,6 +1429,9 @@ p.description code, #poststuff .tagsdiv .ajaxtag { margin-top: 1em; + display: flex; + gap: 8px; + align-items: center; } #poststuff .tagsdiv .howto { @@ -1434,7 +1443,8 @@ p.description code, } .tagsdiv .newtag { - width: 180px; + flex: 1; + min-width: 0; } .tagsdiv .the-tags { @@ -1770,7 +1780,8 @@ table.links-table { } .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables { - outline: none; + border: none; + background: transparent; min-height: 0; margin-bottom: 0; } @@ -1927,9 +1938,10 @@ table.links-table { /* Tags Metabox */ .tagsdiv .newtag { - width: 100%; + flex: 1; + min-width: 0; height: auto; - margin-bottom: 15px; + margin-bottom: 0; } .tagchecklist { diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 719be1aad9ba1..106eab1db335f 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -16,7 +16,7 @@ input { textarea { overflow: auto; - padding: 2px 6px; + padding: 8px 12px; /* inherits font size 14px */ line-height: 1.42857143; /* 20px */ resize: vertical; @@ -28,7 +28,7 @@ select { } textarea.code { - padding: 4px 6px 1px; + padding: 8px 12px; } input[type="text"], @@ -48,10 +48,10 @@ input[type="week"], select, textarea { box-shadow: 0 0 0 transparent; - border-radius: 4px; - border: 1px solid #8c8f94; + border-radius: 2px; + border: 1px solid #949494; background-color: #fff; - color: #2c3338; + color: #1e1e1e; } input[type="text"], @@ -67,11 +67,17 @@ input[type="tel"], input[type="time"], input[type="url"], input[type="week"] { - padding: 0 8px; + padding: 0 12px; + /* inherits font size 14px */ + line-height: 2.71428571; /* 38px for 40px min-height */ + min-height: 40px; +} + +select { + padding: 0 24px 0 12px; /* inherits font size 14px */ - line-height: 2; /* 28px */ - /* Only necessary for IE11 */ - min-height: 30px; + line-height: 2.71428571; /* 38px for 40px min-height */ + min-height: 40px; } ::-webkit-datetime-edit { @@ -93,12 +99,19 @@ input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, -input[type="checkbox"]:focus, -input[type="radio"]:focus, select:focus, textarea:focus { - border-color: #2271b1; - box-shadow: 0 0 0 1px #2271b1; + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; +} + +/* Checkbox and radio use outset focus style */ +input[type="checkbox"]:focus, +input[type="radio"]:focus { + border-color: #1e1e1e; + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -111,10 +124,10 @@ input[type="url"] { input[type="checkbox"], input[type="radio"] { - border: 1px solid #8c8f94; - border-radius: 4px; + border: 1px solid #1e1e1e; + border-radius: 2px; background: #fff; - color: #50575e; + color: #1e1e1e; clear: none; cursor: pointer; display: inline-block; @@ -128,12 +141,12 @@ input[type="radio"] { width: 1rem; min-width: 1rem; -webkit-appearance: none; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: none; transition: .05s border-color ease-in-out; } input[type="radio"]:checked + label:before { - color: #8c8f94; + color: #949494; } .wp-core-ui input[type="reset"]:hover, @@ -174,20 +187,30 @@ input[type="radio"]:checked::before { input[type="checkbox"]:checked::before { /* Use the "Yes" SVG Dashicon */ - 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%233582c4%27%2F%3E%3C%2Fsvg%3E"); - 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%233582c4%27%2F%3E%3C%2Fsvg%3E") / ''; + 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"); + 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") / ''; margin: -0.1875rem 0 0 -0.25rem; height: 1.3125rem; width: 1.3125rem; } +input[type="checkbox"]:checked { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} + +input[type="radio"]:checked { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} + input[type="radio"]:checked::before { content: ""; border-radius: 50%; width: 0.5rem; /* 8px */ height: 0.5rem; /* 8px */ margin: 0.1875rem; /* 3px */ - background-color: #3582c4; + background-color: #fff; /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */ line-height: 1.14285714; } @@ -222,15 +245,15 @@ input.readonly, input[readonly], textarea.readonly, textarea[readonly] { - background-color: #f0f0f1; + background-color: #f0f0f0; } ::-webkit-input-placeholder { - color: #646970; + color: #757575; } ::-moz-placeholder { - color: #646970; + color: #757575; } .form-invalid .form-required, @@ -276,10 +299,10 @@ select:disabled, select.disabled, textarea:disabled, textarea.disabled { - background: rgba(255, 255, 255, 0.5); - border-color: rgba(220, 220, 222, 0.75); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); - color: rgba(44, 51, 56, 0.5); + background: #f0f0f0; + border-color: #cccccc; + box-shadow: none; + color: #949494; } input[type="file"]:disabled, @@ -314,34 +337,35 @@ input[type="radio"].disabled:checked:before { /* Select styles are based on the default button in buttons.css */ .wp-core-ui select { font-size: 14px; - line-height: 2; /* 28px */ - color: #2c3338; - border-color: #8c8f94; + line-height: 2.71428571; /* 38px for 40px min-height */ + color: #1e1e1e; + border-color: #949494; box-shadow: none; - border-radius: 3px; - padding: 0 24px 0 8px; - min-height: 30px; + border-radius: 2px; + padding: 0 24px 0 12px; + min-height: 40px; max-width: 25rem; -webkit-appearance: none; /* The SVG is arrow-down-alt2 from Dashicons. */ - background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%; + background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%; background-size: 16px 16px; cursor: pointer; vertical-align: middle; } .wp-core-ui select:hover { - color: #2271b1; + color: #1e1e1e; + border-color: #1e1e1e; } .wp-core-ui select:focus { - border-color: #2271b1; - color: #0a4b78; - box-shadow: 0 0 0 1px #2271b1; + border-color: var(--wp-admin-theme-color); + color: #1e1e1e; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); } .wp-core-ui select:active { - border-color: #8c8f94; + border-color: #949494; box-shadow: none; } @@ -376,7 +400,7 @@ input[type="radio"].disabled:checked:before { } .wp-core-ui select:hover::-ms-value { - color: #2271b1; + color: #1e1e1e; } .wp-core-ui select:focus::-ms-value { @@ -471,7 +495,7 @@ textarea.large-text { input.small-text { width: 50px; - padding: 0 6px; + padding: 0 8px; } label input.small-text { @@ -480,7 +504,7 @@ label input.small-text { input[type="number"].small-text { width: 65px; - padding-right: 0; + padding-right: 4px; } input.tiny-text { @@ -496,6 +520,9 @@ input[type="number"].tiny-text { #doaction2, #post-query-submit { margin: 0 8px 0 0; + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height with 13px font */ + padding: 0 12px; } /* @since 5.7.0 secondary bulk action controls require JS. */ @@ -512,20 +539,28 @@ input[type="number"].tiny-text { float: left; margin-right: 6px; max-width: 12.5rem; + min-height: 32px; + line-height: 2.14285714; /* 30px for 32px height with 14px font */ + padding: 0 24px 0 8px; +} + +.tablenav .actions .button { + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height with 13px font */ + padding: 0 12px; } #timezone_string option { margin-left: 1em; } -.wp-hide-pw > .dashicons, -.wp-cancel-pw > .dashicons { - position: relative; - top: 3px; +.wp-core-ui .button.wp-hide-pw > .dashicons, +.wp-core-ui .button.wp-cancel-pw > .dashicons { width: 1.25rem; height: 1.25rem; - top: 0.25rem; font-size: 20px; + line-height: 1; + vertical-align: middle; } .wp-cancel-pw .dashicons-no { @@ -560,11 +595,6 @@ fieldset label, height: min-content; } -.wp-pwd button.pwd-toggle .dashicons { - position: relative; - top: 0.25rem; -} - .wp-pwd { margin-top: 1em; position: relative; @@ -603,9 +633,9 @@ fieldset label, .mailserver-pass-wrap .button.wp-hide-pw:focus { background: transparent; - border-color: #3582c4; - border-radius: 4px; - box-shadow: 0 0 0 1px #3582c4; + border-color: var(--wp-admin-theme-color); + border-radius: 2px; + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -621,9 +651,10 @@ fieldset label, } #pass-strength-result { - background-color: #f0f0f1; - border: 1px solid #dcdcde; - color: #1d2327; + background-color: #f0f0f0; + border: 1px solid #cccccc; + border-radius: 2px; + color: #1e1e1e; margin: -1px 1px 5px; padding: 3px 5px; text-align: center; @@ -682,7 +713,7 @@ fieldset label, #pass1:focus, #pass1-text:focus { - box-shadow: 0 0 0 2px #2271b1; + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; } @@ -699,7 +730,7 @@ fieldset label, .wp-pwd [type="password"] { margin-bottom: 0; /* Same height as the buttons */ - min-height: 30px; + min-height: 40px; } /* Hide the Edge "reveal password" native button */ @@ -734,7 +765,7 @@ fieldset label, .profile-php .wp-pwd .caps-warning { padding: 3px 5px; top: -4px; - border-radius: 4px; + border-radius: 2px; } .wp-pwd .caps-icon { @@ -761,16 +792,32 @@ p.search-box { margin: 11px 0; } +p.search-box input[type="search"], +p.search-box input[type="text"] { + min-height: 32px; + line-height: 2.14285714; /* 30px for 32px height with 14px font */ + padding: 0 8px; +} + +p.search-box .button { + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height with 13px font */ + padding: 0 12px; +} + .network-admin.themes-php p.search-box { clear: left; } -.tablenav .search-plugins input[name="s"], -.tagsdiv .newtag { +.tablenav .search-plugins input[name="s"] { float: left; margin: 0 4px 0 0; } +.tagsdiv .newtag { + margin: 0; +} + .js.plugins-php .search-box .wp-filter-search { margin: 0; width: 280px; @@ -819,7 +866,7 @@ ul#add-to-blog-users { /* Colors for the tags autocomplete. */ .wp-tags-autocomplete .ui-state-focus, .wp-tags-autocomplete [aria-selected="true"] { - background-color: #2271b1; + background-color: var(--wp-admin-theme-color); color: #fff; /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; @@ -1047,12 +1094,12 @@ table.form-table td .updated p { .card { position: relative; margin-top: 20px; - padding: 0.7em 2em 1em; + padding: 16px 24px; min-width: 255px; max-width: 520px; - border: 1px solid #c3c4c7; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - background: #fff; + border: 1px solid rgb(0, 0, 0, 0.1); + border-radius: 8px; + background: #ffffff; box-sizing: border-box; } @@ -1175,6 +1222,8 @@ table.form-table td .updated p { .options-general-php input.small-text { width: 56px; margin: -2px 0; + min-height: 24px; + line-height: 1.71428571; /* 24px for 14px font size */ } .options-general-php .spinner { @@ -1366,7 +1415,7 @@ table.form-table td .updated p { } .request-filesystem-credentials-dialog .ftp-password em { - color: #8c8f94; + color: #757575; } .request-filesystem-credentials-dialog label { @@ -1531,9 +1580,9 @@ table.form-table td .updated p { input[type="url"], input[type="week"] { -webkit-appearance: none; - padding: 3px 10px; - /* Only necessary for IE11 */ + padding: 0 12px; min-height: 40px; + line-height: 2.5; /* 40px for 16px font */ } ::-webkit-datetime-edit { @@ -1585,8 +1634,8 @@ table.form-table td .updated p { .wp-admin .form-table select { min-height: 40px; font-size: 16px; - line-height: 1.625; /* 26px */ - padding: 5px 24px 5px 8px; + line-height: 2.5; /* 40px for 16px font */ + padding: 0 24px 0 12px; } .wp-admin .button-cancel { diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 80e652003a33c..26f50fc2e2cda 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -668,6 +668,9 @@ th.sorted a span { margin: 0 2px 0 0; font-size: 13px; text-align: center; + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height with 13px font */ + padding: 0 8px; } .tablenav .total-pages { @@ -680,9 +683,8 @@ th.sorted a span { .tablenav { clear: both; - height: 30px; + height: 32px; margin: 6px 0 4px; - padding-top: 5px; vertical-align: middle; } @@ -704,12 +706,12 @@ th.sorted a span { .tablenav .tablenav-pages .tablenav-pages-navspan { display: inline-block; vertical-align: baseline; - min-width: 30px; - min-height: 30px; + min-width: 32px; + min-height: 32px; margin: 0; padding: 0 4px; font-size: 16px; - line-height: 1.625; /* 26px */ + line-height: 1.875; /* 30px for 32px height */ text-align: center; } @@ -1421,11 +1423,11 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { content: "\f463"; content: "\f463" / ''; display: inline-block; - font: normal 20px/1 dashicons; - margin: -3px 5px 0 -2px; + font: normal 20px/1.9 dashicons; /* line-height 1.9 = 38px to match button */ + margin: 0 5px 0 -2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - vertical-align: middle; + vertical-align: top; } .plugin-card .updating-message:before { @@ -1487,9 +1489,11 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { margin: 0 8px 16px; width: 48.5%; width: calc( 50% - 8px ); - background-color: #fff; - border: 1px solid #dcdcde; + background-color: #ffffff; + border: 1px solid rgb(0, 0, 0, 0.1); + border-radius: 8px; box-sizing: border-box; + overflow: hidden; } .plugin-card:nth-child(odd) { @@ -1553,7 +1557,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { .plugin-card-top { position: relative; - padding: 20px 20px 10px; + padding: 16px; min-height: 135px; } @@ -1668,9 +1672,9 @@ div.action-links, .plugin-card-bottom { clear: both; - padding: 12px 20px; + padding: 16px; background-color: #f6f7f7; - border-top: 1px solid #dcdcde; + border-top: 1px solid rgb(0, 0, 0, 0.1); overflow: hidden; } diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css index bd14b6db22a8e..b5f424fee7434 100644 --- a/src/wp-admin/css/login.css +++ b/src/wp-admin/css/login.css @@ -127,7 +127,6 @@ p { .login .button.wp-hide-pw .dashicons { width: 1.25rem; height: 1.25rem; - top: 0.25rem; } .login .wp-pwd { diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 786a35262a212..07850c31e9663 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -557,6 +557,21 @@ border color while dragging a file over the uploader drop area */ .media-frame.mode-grid .media-toolbar select { margin: 0 10px 0 0; + min-height: 32px; + line-height: 2.14285714; /* 30px for 32px height with 14px font */ + padding: 0 24px 0 8px; +} + +.media-frame.mode-grid .media-toolbar input[type="search"] { + min-height: 32px; + line-height: 2.14285714; /* 30px for 32px height with 14px font */ + padding: 0 8px; +} + +.media-frame.mode-grid .media-toolbar .button { + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height with 13px font */ + padding: 0 12px; } .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button { @@ -762,6 +777,12 @@ border color while dragging a file over the uploader drop area */ text-align: center; } +.edit-attachment-frame .button { + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height with 13px font */ + padding: 0 12px; +} + .edit-attachment-frame .wp-media-wrapper { margin-bottom: 12px; } diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css index 0c02cde9a4997..ccb20ca46e9e2 100644 --- a/src/wp-admin/css/nav-menus.css +++ b/src/wp-admin/css/nav-menus.css @@ -428,7 +428,6 @@ input.bulk-select-switcher:focus + .bulk-select-button-label { /* Button Secondary Actions */ .list-controls { float: left; - margin-top: 5px; } .add-to-menu { @@ -867,12 +866,17 @@ body.menu-max-depth-11 { min-width: 1280px !important; } } #nav-menus-frame, -.button-controls, #menu-item-url-wrap, #menu-item-name-wrap { display: block; } +.button-controls { + display: flex; + align-items: center; + justify-content: space-between; +} + /* =Media Queries -------------------------------------------------------------- */ diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 3b8eb28ea57b0..bd00fa89661ed 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -64,9 +64,11 @@ body.js .theme-browser.search-loading { margin: 0 4% 4% 0; position: relative; width: 30.6%; - border: 1px solid #dcdcde; - box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + background: #ffffff; + border: 1px solid rgb(0, 0, 0, 0.1); + border-radius: 8px; box-sizing: border-box; + overflow: hidden; } .theme-browser .theme:nth-child(3n) { @@ -83,13 +85,12 @@ body.js .theme-browser.search-loading { font-weight: 600; height: 18px; margin: 0; - padding: 15px; - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); + padding: 16px; + border-top: 1px solid rgb(0, 0, 0, 0.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - background: #fff; - background: rgba(255, 255, 255, 0.65); + background: #ffffff; } /* Activate and Customize buttons, shown on hover and focus */ @@ -112,9 +113,26 @@ body.js .theme-browser.search-loading { margin-right: 3px; } +/* Use compact size for space-constrained theme cards */ .theme-browser .theme .theme-actions .button { float: none; margin-left: 3px; + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px min-height */ + padding: 0 12px; +} + +/* Secondary buttons need white background for visibility on semi-transparent overlay */ +.theme-browser .theme .theme-actions .button:not(.button-primary) { + background: #fff; +} + +.theme-browser .theme .theme-actions .button:not(.button-primary):hover { + background: #f0f0f0; +} + +.theme-browser .theme .theme-actions .button:not(.button-primary):focus { + background: #fff; } /** @@ -211,7 +229,7 @@ body.js .theme-browser.search-loading { .theme-browser .theme.active .theme-name { background: #1d2327; color: #fff; - padding-right: 110px; + padding-right: 115px; font-weight: 300; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); } @@ -240,7 +258,7 @@ body.js .theme-browser.search-loading { top: 50%; transform: translateY(-50%); right: 0; - padding: 9px 15px; + padding: 9px 12px; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); } @@ -248,6 +266,19 @@ body.js .theme-browser.search-loading { margin-right: 0; } +/* Active theme secondary buttons need white background for visibility on dark overlay */ +.theme-browser .theme.active .theme-actions .button:not(.button-primary) { + background: #fff; +} + +.theme-browser .theme.active .theme-actions .button:not(.button-primary):hover { + background: #f0f0f0; +} + +.theme-browser .theme.active .theme-actions .button:not(.button-primary):focus { + background: #fff; +} + .theme-browser .theme .theme-author { background: #1d2327; color: #f0f0f1; @@ -271,8 +302,9 @@ body.js .theme-browser.search-loading { * Add new theme */ .theme-browser .theme.add-new-theme { + background: transparent; border: none; - box-shadow: none; + overflow: visible; } .theme-browser .theme.add-new-theme a { @@ -348,8 +380,8 @@ body.js .theme-browser.search-loading { .theme-browser .theme.add-new-theme .theme-name { background: none; + border: none; text-align: center; - box-shadow: none; font-weight: 400; position: relative; top: 0; @@ -1101,7 +1133,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap { padding: 30px 128px 30px 30px; } -.upload-plugin .wp-upload-form input[type=submit], +.upload-plugin .wp-upload-form input[type=submit], .upload-theme .wp-upload-form input[type=submit] { position: absolute; right: 30px; @@ -1356,10 +1388,6 @@ div#custom-background-image img { transform: rotate( 45deg ); } -.background-position-control .button-group .dashicons { - margin-top: 9px; -} - .background-position-control .button-group + .button-group { margin-top: -1px; } @@ -1475,7 +1503,7 @@ body.full-overlay-active { } .wp-full-overlay-sidebar .wp-full-overlay-header a.back { - margin-top: 9px; + margin-top: 3px; /* Vertically center 40px button in 45px header */ } .wp-full-overlay-sidebar .wp-full-overlay-footer { @@ -1923,7 +1951,7 @@ body.full-overlay-active { .theme-install-overlay .wp-full-overlay-header .button { float: right; - margin: 8px 10px 0 0; + margin: 3px 10px 0 0; /* Vertically center 40px button in 45px header */ } .theme-install-overlay .wp-full-overlay-sidebar { @@ -2028,7 +2056,7 @@ body.full-overlay-active { width: 100%; } - .upload-plugin .wp-upload-form input[type=file], + .upload-plugin .wp-upload-form input[type=file], .upload-theme .wp-upload-form input[type=file] { padding: 30px 30px 80px; width: 100%; diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php index 1f1a9d38b1a9e..2065e55ffb3ce 100644 --- a/src/wp-admin/customize.php +++ b/src/wp-admin/customize.php @@ -148,7 +148,7 @@ } $body_class .= ' locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_user_locale() ) ) ); $admin_color = get_user_option( 'admin_color' ); -$body_class .= ' admin-color-' . sanitize_html_class( is_string( $admin_color ) ? $admin_color : '', 'fresh' ); +$body_class .= ' admin-color-' . sanitize_html_class( is_string( $admin_color ) ? $admin_color : '', 'modern' ); if ( wp_use_widgets_block_editor() ) { $body_class .= ' wp-embed-responsive'; diff --git a/src/wp-admin/includes/misc.php b/src/wp-admin/includes/misc.php index d3a93a17b48e2..70d66be2ad5f0 100644 --- a/src/wp-admin/includes/misc.php +++ b/src/wp-admin/includes/misc.php @@ -1004,14 +1004,14 @@ function admin_color_scheme_picker( $user_id ) { ksort( $_wp_admin_css_colors ); - if ( isset( $_wp_admin_css_colors['fresh'] ) ) { - // Set Default ('fresh') and Light should go first. + if ( isset( $_wp_admin_css_colors['modern'] ) ) { + // Set Modern (new default), Classic ('fresh'), and Light first. $_wp_admin_css_colors = array_filter( array_merge( array( + 'modern' => '', 'fresh' => '', 'light' => '', - 'modern' => '', ), $_wp_admin_css_colors ) @@ -1021,7 +1021,7 @@ function admin_color_scheme_picker( $user_id ) { $current_color = get_user_option( 'admin_color', $user_id ); if ( empty( $current_color ) || ! isset( $_wp_admin_css_colors[ $current_color ] ) ) { - $current_color = 'fresh'; + $current_color = 'modern'; } ?>
diff --git a/src/wp-admin/includes/upgrade.php b/src/wp-admin/includes/upgrade.php index 04b7016b83bc9..712bd51dc88f9 100644 --- a/src/wp-admin/includes/upgrade.php +++ b/src/wp-admin/includes/upgrade.php @@ -886,6 +886,10 @@ function upgrade_all() { upgrade_682(); } + if ( $wp_current_db_version < 60718 ) { + upgrade_700(); + } + maybe_disable_link_manager(); maybe_disable_automattic_widgets(); @@ -2481,6 +2485,31 @@ function ( $url ) { } } +/** + * Executes changes made in WordPress 7.0. + * + * @ignore + * @since 7.0.0 + * + * @global int $wp_current_db_version The old (current) database version. + * @global wpdb $wpdb WordPress database abstraction object. + */ +function upgrade_700() { + global $wp_current_db_version, $wpdb; + + // Migrate users with 'fresh' admin color to 'modern'. + if ( $wp_current_db_version < 60718 ) { + $wpdb->update( + $wpdb->usermeta, + array( 'meta_value' => 'modern' ), + array( + 'meta_key' => 'admin_color', + 'meta_value' => 'fresh', + ) + ); + } +} + /** * Executes network-level upgrade routines. * diff --git a/src/wp-admin/includes/user.php b/src/wp-admin/includes/user.php index 6181a8457f1b8..1181dcb9fd4e6 100644 --- a/src/wp-admin/includes/user.php +++ b/src/wp-admin/includes/user.php @@ -134,7 +134,7 @@ function edit_user( $user_id = 0 ) { if ( $update ) { $user->rich_editing = isset( $_POST['rich_editing'] ) && 'false' === $_POST['rich_editing'] ? 'false' : 'true'; $user->syntax_highlighting = isset( $_POST['syntax_highlighting'] ) && 'false' === $_POST['syntax_highlighting'] ? 'false' : 'true'; - $user->admin_color = isset( $_POST['admin_color'] ) ? sanitize_text_field( $_POST['admin_color'] ) : 'fresh'; + $user->admin_color = isset( $_POST['admin_color'] ) ? sanitize_text_field( $_POST['admin_color'] ) : 'modern'; $user->show_admin_bar_front = isset( $_POST['admin_bar_front'] ) ? 'true' : 'false'; } diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css index 5146be4274254..2dde624ce9c88 100644 --- a/src/wp-includes/css/buttons.css +++ b/src/wp-includes/css/buttons.css @@ -46,15 +46,16 @@ TABLE OF CONTENTS: display: inline-block; text-decoration: none; font-size: 13px; - line-height: 2.15384615; /* 28px */ - min-height: 30px; + font-weight: 500; + line-height: 2.92307692; /* 38px - allows 40px min-height with 1px border */ + min-height: 40px; margin: 0; - padding: 0 10px; + padding: 0 16px; cursor: pointer; border-width: 1px; border-style: solid; -webkit-appearance: none; - border-radius: 3px; + border-radius: 2px; white-space: nowrap; box-sizing: border-box; } @@ -69,26 +70,36 @@ TABLE OF CONTENTS: padding: 0; } -.wp-core-ui .button.button-large, -.wp-core-ui .button-group.button-large .button { +/* Compact size - 32px, for space-constrained contexts */ +.wp-core-ui .button.button-compact, +.wp-core-ui .button-group.button-compact .button { + line-height: 2.30769231; /* 30px - allows 32px min-height with 1px border */ min-height: 32px; - line-height: 2.30769231; /* 30px */ padding: 0 12px; } +/* Small size - 24px */ .wp-core-ui .button.button-small, .wp-core-ui .button-group.button-small .button { - min-height: 26px; - line-height: 2.18181818; /* 24px */ + line-height: 2; /* 22px - allows 24px min-height with 1px border */ + min-height: 24px; padding: 0 8px; font-size: 11px; } +/* Large size - explicit 40px (same as default, for semantic clarity) */ +.wp-core-ui .button.button-large, +.wp-core-ui .button-group.button-large .button { + line-height: 2.92307692; /* 38px - allows 40px min-height with 1px border */ + min-height: 40px; + padding: 0 16px; +} + .wp-core-ui .button.button-hero, .wp-core-ui .button-group.button-hero .button { font-size: 14px; - min-height: 46px; - line-height: 3.14285714; + line-height: 3.28571429; /* 46px - allows 48px min-height with 1px border */ + min-height: 48px; padding: 0 36px; } @@ -96,6 +107,27 @@ TABLE OF CONTENTS: display: none; } +/* Button Icons - Dashicons centering for all button sizes */ +/* Dashicons are 20px font-size, so line-height = target-height / 20 */ +.wp-core-ui .button .dashicons, +.wp-core-ui .button-primary .dashicons, +.wp-core-ui .button-secondary .dashicons { + line-height: 1.9; /* 38px (20px * 1.9) - matches default button */ + vertical-align: top; +} + +.wp-core-ui .button.button-compact .dashicons { + line-height: 1.5; /* 30px (20px * 1.5) - matches compact button */ +} + +.wp-core-ui .button.button-small .dashicons { + line-height: 1.1; /* 22px (20px * 1.1) - matches small button */ +} + +.wp-core-ui .button.button-hero .dashicons { + line-height: 2.3; /* 46px (20px * 2.3) - matches hero button */ +} + /* Style Reset buttons as simple text links */ .wp-core-ui input[type="reset"], @@ -115,9 +147,9 @@ TABLE OF CONTENTS: .wp-core-ui .button, .wp-core-ui .button-secondary { - color: #2271b1; - border-color: #2271b1; - background: #f6f7f7; + color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); + background: transparent; vertical-align: top; } @@ -127,21 +159,21 @@ TABLE OF CONTENTS: .wp-core-ui .button.hover, .wp-core-ui .button:hover, -.wp-core-ui .button-secondary:hover{ - background: #f0f0f1; - border-color: #0a4b78; - color: #0a4b78; +.wp-core-ui .button-secondary:hover { + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + border-color: var(--wp-admin-theme-color-darker-20); + color: var(--wp-admin-theme-color-darker-20); } .wp-core-ui .button.focus, .wp-core-ui .button:focus, .wp-core-ui .button-secondary:focus { - background: #f6f7f7; - border-color: #3582c4; - color: #0a4b78; - box-shadow: 0 0 0 1px #3582c4; + background: transparent; + border-color: var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); /* Only visible in Windows High Contrast mode */ - outline: 2px solid transparent; + outline: 1px solid transparent; /* Reset inherited offset from Gutenberg */ outline-offset: 0; } @@ -149,25 +181,24 @@ TABLE OF CONTENTS: /* :active state */ .wp-core-ui .button:active, .wp-core-ui .button-secondary:active { - background: #f6f7f7; - border-color: #8c8f94; + background: rgba(var(--wp-admin-theme-color--rgb), 0.08); + border-color: var(--wp-admin-theme-color-darker-20); + color: var(--wp-admin-theme-color-darker-20); box-shadow: none; } /* pressed state e.g. a selected setting */ .wp-core-ui .button.active, .wp-core-ui .button.active:hover { - background-color: #dcdcde; - color: #135e96; - border-color: #0a4b78; - box-shadow: inset 0 2px 5px -3px #0a4b78; + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04); + color: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); + box-shadow: none; } .wp-core-ui .button.active:focus { - border-color: #3582c4; - box-shadow: - inset 0 2px 5px -3px #0a4b78, - 0 0 0 1px #3582c4; + border-color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); } .wp-core-ui .button[disabled], @@ -177,9 +208,9 @@ TABLE OF CONTENTS: .wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled, .wp-core-ui .button-disabled { - color: #a7aaad !important; - border-color: #dcdcde !important; - background: #f6f7f7 !important; + color: #949494 !important; + border-color: #dddddd !important; + background: transparent !important; box-shadow: none !important; cursor: default; transform: none !important; @@ -201,7 +232,7 @@ TABLE OF CONTENTS: cursor: pointer; text-align: left; /* Mimics the default link style in common.css */ - color: #2271b1; + color: var(--wp-admin-theme-color); text-decoration: underline; transition-property: border, background, color; transition-duration: .05s; @@ -210,14 +241,15 @@ TABLE OF CONTENTS: .wp-core-ui .button-link:hover, .wp-core-ui .button-link:active { - color: #135e96; + color: var(--wp-admin-theme-color-darker-20); } .wp-core-ui .button-link:focus { - color: #043959; - box-shadow: 0 0 0 2px #2271b1; + color: var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color); + border-radius: 2px; /* Only visible in Windows High Contrast mode */ - outline: 2px solid transparent; + outline: 1px solid transparent; } .wp-core-ui .button-link-delete { @@ -241,35 +273,37 @@ TABLE OF CONTENTS: ---------------------------------------------------------------------------- */ .wp-core-ui .button-primary { - background: #2271b1; - border-color: #2271b1; + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); color: #fff; text-decoration: none; text-shadow: none; } .wp-core-ui .button-primary.hover, -.wp-core-ui .button-primary:hover, -.wp-core-ui .button-primary.focus, -.wp-core-ui .button-primary:focus { - background: #135e96; - border-color: #135e96; +.wp-core-ui .button-primary:hover { + background: var(--wp-admin-theme-color-darker-10); + border-color: var(--wp-admin-theme-color-darker-10); color: #fff; } .wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus { + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); + color: #fff; box-shadow: - 0 0 0 1px #fff, - 0 0 0 3px #2271b1; + 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), + inset 0 0 0 1px #fff; + outline: 1px solid transparent; } .wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary:active { - background: #135e96; - border-color: #135e96; + background: var(--wp-admin-theme-color-darker-20); + border-color: var(--wp-admin-theme-color-darker-20); box-shadow: none; color: #fff; } @@ -278,9 +312,9 @@ TABLE OF CONTENTS: .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary-disabled, .wp-core-ui .button-primary.disabled { - color: #a7aaad !important; - background: #f6f7f7 !important; - border-color: #dcdcde !important; + color: #949494 !important; + background: #f0f0f0 !important; + border-color: #f0f0f0 !important; box-shadow: none !important; text-shadow: none !important; cursor: default; @@ -309,11 +343,11 @@ TABLE OF CONTENTS: } .wp-core-ui .button-group > .button:first-child { - border-radius: 3px 0 0 3px; + border-radius: 2px 0 0 2px; } .wp-core-ui .button-group > .button:last-child { - border-radius: 0 3px 3px 0; + border-radius: 0 2px 2px 0; } .wp-core-ui .button-group > .button-primary + .button { @@ -353,22 +387,29 @@ TABLE OF CONTENTS: input#save-post, a.preview { padding: 0 14px; - line-height: 2.71428571; /* 38px */ + line-height: 2.71428571; /* 38px - allows 40px min-height with 1px border */ font-size: 14px; vertical-align: middle; min-height: 40px; margin-bottom: 4px; } + /* Responsive Button Icons - Dashicons centering */ + .wp-core-ui .button .dashicons, + .wp-core-ui .button-primary .dashicons, + .wp-core-ui .button-secondary .dashicons { + line-height: 1.9; /* 38px (20px * 1.9) - matches responsive button */ + } + /* Copy attachment URL button in the legacy edit media page. */ .wp-core-ui .copy-to-clipboard-container .copy-attachment-url { margin-bottom: 0; } #media-upload.wp-core-ui .button { - padding: 0 10px 1px; + padding: 0 10px; + line-height: 1.69230769; /* 22px */ min-height: 24px; - line-height: 22px; font-size: 13px; } @@ -386,8 +427,8 @@ TABLE OF CONTENTS: .wp-core-ui.wp-customizer .button { font-size: 13px; - line-height: 2.15384615; /* 28px */ - min-height: 30px; + line-height: 2.30769231; /* 30px */ + min-height: 32px; margin: 0; vertical-align: inherit; } @@ -404,9 +445,9 @@ TABLE OF CONTENTS: /* Reset responsive styles on Log in button on iframed login form */ .interim-login .button.button-large { - min-height: 30px; - line-height: 2; - padding: 0 12px 2px; + min-height: 32px; + line-height: 2.30769231; /* 30px */ + padding: 0 12px; } } diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index ede9ed91cb457..2aa68f12beeaa 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -1160,7 +1160,7 @@ i.mce-i-wp_code:before { font-size: 13px; line-height: 1.46153846; height: 20px; - margin: 5px 0 0 5px; + margin: 15px 0 0 5px; padding: 3px 8px 4px; border: 1px solid #dcdcde; } diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 45c6370d178db..8a5d8a753ae48 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -66,12 +66,12 @@ .media-frame input, .media-frame textarea { - padding: 6px 8px; + padding: 8px 12px; } .media-frame select, .wp-admin .media-frame select { - min-height: 30px; + min-height: 40px; vertical-align: middle; } @@ -92,13 +92,13 @@ .media-frame textarea, .media-frame select { box-shadow: 0 0 0 transparent; - border-radius: 4px; - border: 1px solid #8c8f94; + border-radius: 2px; + border: 1px solid #949494; background-color: #fff; - color: #2c3338; + color: #1e1e1e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 13px; - line-height: 1.38461538; + font-size: 14px; + line-height: 1.42857143; } .media-frame input[type="text"], @@ -114,9 +114,10 @@ .media-frame input[type="time"], .media-frame input[type="url"], .media-frame input[type="week"] { - padding: 0 8px; - /* inherits font size 13px */ - line-height: 2.15384615; /* 28px */ + padding: 0 12px; + /* inherits font size 14px */ + line-height: 2.71428571; /* 38px for 40px min-height */ + min-height: 40px; } /* Search field in the Media Library toolbar */ @@ -133,8 +134,9 @@ .media-frame input[type="url"]:focus, .media-frame textarea:focus, .media-frame select:focus { - border-color: #3582c4; - box-shadow: 0 0 0 1px #3582c4; + border-color: var(--wp-admin-theme-color); + /* Expand border by 0.5px for total 1.5px effect */ + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); outline: 2px solid transparent; } @@ -142,7 +144,9 @@ .media-frame textarea:disabled, .media-frame input[readonly], .media-frame textarea[readonly] { - background-color: #f0f0f1; + background-color: #f0f0f0; + border-color: #cccccc; + color: #949494; } .media-frame input[type="search"] { @@ -267,6 +271,29 @@ -webkit-font-smoothing: subpixel-antialiased; } +.media-modal-content .button, +.media-modal-content .button.button-large { + min-height: 32px; + line-height: 2.30769231; /* 30px for 32px height with 13px font */ + padding: 0 12px; +} + +.media-toolbar input[type="text"], +.media-toolbar input[type="search"], +.media-toolbar select { + min-height: 32px; + line-height: 2.14285714; /* 30px for 32px height with 14px font */ +} + +.media-toolbar input[type="text"], +.media-toolbar input[type="search"] { + padding: 0 8px; +} + +.media-toolbar select { + padding: 0 24px 0 8px; +} + .media-modal-content .media-frame select.attachment-filters { margin-top: 32px; margin-right: 2%; @@ -297,10 +324,17 @@ .media-frame-toolbar .media-toolbar { top: auto; - bottom: -47px; + bottom: -60px; height: auto; overflow: visible; border-top: 1px solid #dcdcde; + background: #fff; +} + +.media-frame-toolbar .media-toolbar-primary > .media-button, +.media-frame-toolbar .media-toolbar-primary > .media-button-group { + margin-top: 14px; + margin-bottom: 14px; } .media-toolbar-primary { @@ -897,6 +931,9 @@ * Attachment Browser Filters */ .media-frame select.attachment-filters { + min-height: 32px; + line-height: 2.14285714; /* 30px for 32px height with 14px font */ + padding: 0 24px 0 8px; margin-top: 11px; margin-right: 2%; max-width: 42%; @@ -2782,7 +2819,7 @@ } .media-frame-toolbar .media-toolbar { - bottom: -54px; + bottom: -60px; } .mode-grid .attachments-browser .media-toolbar-primary { diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php index 7afab9f8c059d..99ef460fcb11b 100644 --- a/src/wp-includes/general-template.php +++ b/src/wp-includes/general-template.php @@ -4892,8 +4892,20 @@ function register_admin_color_schemes() { $suffix .= SCRIPT_DEBUG ? '' : '.min'; wp_admin_css_color( - 'fresh', + 'modern', _x( 'Default', 'admin color scheme' ), + admin_url( "css/colors/modern/colors$suffix.css" ), + array( '#1e1e1e', '#3858e9', '#7b90ff' ), + array( + 'base' => '#f3f1f1', + 'focus' => '#fff', + 'current' => '#fff', + ) + ); + + wp_admin_css_color( + 'fresh', + _x( 'Classic', 'admin color scheme' ), false, array( '#1d2327', '#2c3338', '#2271b1', '#72aee6' ), array( @@ -4915,18 +4927,6 @@ function register_admin_color_schemes() { ) ); - wp_admin_css_color( - 'modern', - _x( 'Modern', 'admin color scheme' ), - admin_url( "css/colors/modern/colors$suffix.css" ), - array( '#1e1e1e', '#3858e9', '#7b90ff' ), - array( - 'base' => '#f3f1f1', - 'focus' => '#fff', - 'current' => '#fff', - ) - ); - wp_admin_css_color( 'blue', _x( 'Blue', 'admin color scheme' ), diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 4e9de5a0a7ed9..4384c7c10ed2a 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -2105,7 +2105,7 @@ function wp_style_loader_src( $src, $handle ) { $color = get_user_option( 'admin_color' ); if ( empty( $color ) || ! isset( $_wp_admin_css_colors[ $color ] ) ) { - $color = 'fresh'; + $color = 'modern'; } $color = $_wp_admin_css_colors[ $color ] ?? null; diff --git a/src/wp-includes/user.php b/src/wp-includes/user.php index 7885efe531b49..545329d8d776d 100644 --- a/src/wp-includes/user.php +++ b/src/wp-includes/user.php @@ -2184,7 +2184,7 @@ function validate_username( $username ) { * @type string $comment_shortcuts Whether to enable comment moderation keyboard * shortcuts for the user. Accepts 'true' or 'false' * as a string literal, not boolean. Default 'false'. - * @type string $admin_color Admin color scheme for the user. Default 'fresh'. + * @type string $admin_color Admin color scheme for the user. Default 'modern'. * @type bool $use_ssl Whether the user should always access the admin over * https. Default false. * @type string $user_registered Date the user registered in UTC. Format is 'Y-m-d H:i:s'. @@ -2457,7 +2457,7 @@ function wp_insert_user( $userdata ) { $meta['comment_shortcuts'] = empty( $userdata['comment_shortcuts'] ) || 'false' === $userdata['comment_shortcuts'] ? 'false' : 'true'; - $admin_color = empty( $userdata['admin_color'] ) ? 'fresh' : $userdata['admin_color']; + $admin_color = empty( $userdata['admin_color'] ) ? 'modern' : $userdata['admin_color']; $meta['admin_color'] = preg_replace( '|[^a-z0-9 _.\-@]|i', '', $admin_color ); $meta['use_ssl'] = empty( $userdata['use_ssl'] ) ? '0' : '1'; @@ -2546,7 +2546,7 @@ function wp_insert_user( $userdata ) { * @type string $rich_editing Whether to enable the rich-editor for the user. Default 'true'. * @type string $syntax_highlighting Whether to enable the rich code editor for the user. Default 'true'. * @type string $comment_shortcuts Whether to enable keyboard shortcuts for the user. Default 'false'. - * @type string $admin_color The color scheme for a user's admin screen. Default 'fresh'. + * @type string $admin_color The color scheme for a user's admin screen. Default 'modern'. * @type int|bool $use_ssl Whether to force SSL on the user's admin area. 0|false if SSL * is not forced. * @type string $show_admin_bar_front Whether to show the admin bar on the front end for the user. diff --git a/src/wp-includes/version.php b/src/wp-includes/version.php index f1d2d950ab737..74a772b2163f3 100644 --- a/src/wp-includes/version.php +++ b/src/wp-includes/version.php @@ -23,7 +23,7 @@ * * @global int $wp_db_version */ -$wp_db_version = 60717; +$wp_db_version = 60718; /** * Holds the TinyMCE version.