From 79b5a9b73745c1679c695f5c618236d7c0477b5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 14:12:15 +0100
Subject: [PATCH 01/52] Admin UI: Add design system tokens for admin reskin

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
---
 src/wp-admin/css/colors/_tokens.scss    | 212 ++++++++++++++++++++++++
 src/wp-admin/css/colors/_variables.scss |   5 +-
 2 files changed, 216 insertions(+), 1 deletion(-)
 create mode 100644 src/wp-admin/css/colors/_tokens.scss

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;

From 1fbb28715e5b9d9b52b801fb7ce19252b6775546 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 15:11:10 +0100
Subject: [PATCH 02/52] Admin UI: Reskin buttons to align with WordPress Design
 System

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
---
 src/wp-admin/css/colors/_admin.scss  | 144 ++++++++++-----------------
 src/wp-admin/css/colors/_mixins.scss | 123 ++++++++++++++++++++---
 src/wp-admin/css/common.css          |  10 +-
 src/wp-includes/css/buttons.css      | 143 ++++++++++++++------------
 4 files changed, 246 insertions(+), 174 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 1b69b0102da59..512f9c994e15c 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) 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,7 +77,7 @@ 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 */
@@ -108,79 +123,24 @@ textarea:focus {
 
 .wp-core-ui {
 
+	/* Default button - theme color border and text (matches secondary) */
 	.button {
-		border-color: #7e8993;
-		color: #32373c;
-	}
-
-	.button.hover,
-	.button:hover,
-	.button.focus,
-	.button:focus {
-		border-color: color.adjust(#7e8993, $lightness: -5%);
-		color: color.adjust(#32373c, $lightness: -5%);
-	}
-
-	.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;
-	}
-
-	.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;
+		@include mixins.button-secondary();
 	}
 
-	.button.active:focus {
-		box-shadow: 0 0 0 1px #32373c;
-	}
-
-	@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 );
 	}
 
 	.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 {
@@ -214,28 +174,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) 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..d783bf268613e 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;
+	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) 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) 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) 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/common.css b/src/wp-admin/css/common.css
index 3ea8a878bcf68..ded9dee9506f3 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -630,11 +630,12 @@ 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: 40px;
+	line-height: 2.92307692; /* 38px for 40px height */
 	color: #2271b1; /* use the standard color used for buttons */
 	padding: 0 10px;
 	min-height: 30px;
@@ -648,7 +649,6 @@ code {
 
 .wrap .add-new-h2:hover, /* deprecated */
 .wrap .page-title-action:hover {
-	background: #f0f0f1;
 	border-color: #0a4b78;
 	color: #0a4b78;
 }
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 5146be4274254..3eda51ae5d788 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;
 }
 
@@ -115,9 +126,9 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button,
 .wp-core-ui .button-secondary {
-	color: #2271b1;
-	border-color: #2271b1;
-	background: #f6f7f7;
+	color: #3858e9;
+	border-color: #3858e9;
+	background: transparent;
 	vertical-align: top;
 }
 
@@ -127,21 +138,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(56, 88, 233, 0.04);
+	border-color: #183ad6;
+	color: #183ad6;
 }
 
 .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: #3858e9;
+	color: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
 	/* 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 +160,24 @@ TABLE OF CONTENTS:
 /* :active state */
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
-	background: #f6f7f7;
-	border-color: #8c8f94;
+	background: rgba(56, 88, 233, 0.08);
+	border-color: #183ad6;
+	color: #183ad6;
 	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(56, 88, 233, 0.04);
+	color: #3858e9;
+	border-color: #3858e9;
+	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: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
 }
 
 .wp-core-ui .button[disabled],
@@ -177,9 +187,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 +211,7 @@ TABLE OF CONTENTS:
 	cursor: pointer;
 	text-align: left;
 	/* Mimics the default link style in common.css */
-	color: #2271b1;
+	color: #3858e9;
 	text-decoration: underline;
 	transition-property: border, background, color;
 	transition-duration: .05s;
@@ -210,14 +220,15 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button-link:hover,
 .wp-core-ui .button-link:active {
-	color: #135e96;
+	color: #183ad6;
 }
 
 .wp-core-ui .button-link:focus {
-	color: #043959;
-	box-shadow: 0 0 0 2px #2271b1;
+	color: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
+	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 +252,37 @@ TABLE OF CONTENTS:
 ---------------------------------------------------------------------------- */
 
 .wp-core-ui .button-primary {
-	background: #2271b1;
-	border-color: #2271b1;
+	background: #3858e9;
+	border-color: #3858e9;
 	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: #2145e6;
+	border-color: #2145e6;
 	color: #fff;
 }
 
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
+	background: #3858e9;
+	border-color: #3858e9;
+	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) #3858e9,
+		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: #183ad6;
+	border-color: #183ad6;
 	box-shadow: none;
 	color: #fff;
 }
@@ -278,9 +291,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 +322,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,7 +366,7 @@ 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;
@@ -366,9 +379,9 @@ TABLE OF CONTENTS:
 	}
 
 	#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 +399,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 +417,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;
 	}
 
 }

From f3e2bdb2defa91c8e0cebc0e8abaf3b9dcaf991e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 16:18:45 +0100
Subject: [PATCH 03/52] Admin UI: Fix theme card button sizing and visibility

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
---
 src/wp-admin/css/themes.css | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 326531528ee62..36e662d375a18 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -83,7 +83,7 @@ body.js .theme-browser.search-loading {
 	font-weight: 600;
 	height: 18px;
 	margin: 0;
-	padding: 15px;
+	padding: 16px 15px;
 	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 	white-space: nowrap;
@@ -112,9 +112,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 +228,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 +257,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 +265,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;

From b4106d3b6e1af71841055b0b770d61f6a2f55bbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 15:32:39 +0100
Subject: [PATCH 04/52] Admin UI: Reskin form controls to align with WordPress
 Design System

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
---
 src/wp-admin/css/colors/_admin.scss |  62 ++++++++++--
 src/wp-admin/css/dashboard.css      |   2 +-
 src/wp-admin/css/forms.css          | 142 ++++++++++++++++------------
 3 files changed, 138 insertions(+), 68 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 512f9c994e15c..96d50e84bd2fa 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -82,12 +82,26 @@ span.wp-media-buttons-icon:before {
 
 /* Forms */
 
-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") / '';
+// Checkbox checked state - uses theme color
+input[type="checkbox"]:checked {
+	background: var(--wp-admin-theme-color);
+	border-color: var(--wp-admin-theme-color);
+}
+
+// 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);
 }
 
-input[type=radio]:checked::before {
-	background: variables.$form-checked;
+// Radio dot - white for visibility on theme color background
+input[type="radio"]:checked::before {
+	background: tokens.$white;
 }
 
 .wp-core-ui input[type="reset"]:hover,
@@ -95,6 +109,7 @@ input[type=radio]:checked::before {
 	color: variables.$link-focus;
 }
 
+// Text input focus - Gutenberg-style 1.5px border effect
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="color"]:focus,
@@ -106,16 +121,45 @@ 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 0.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;
+}
+
+// Select focus (wp-core-ui styled selects)
+.wp-core-ui select:focus {
+	border-color: var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+}
+
+// Autocomplete focus state
+.wp-tags-autocomplete .ui-state-focus,
+.wp-tags-autocomplete [aria-selected="true"] {
+	background-color: var(--wp-admin-theme-color);
+}
+
+// Password field focus
+#pass1:focus,
+#pass1-text:focus {
+	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+}
+
+// Password toggle button focus
+.mailserver-pass-wrap .button.wp-hide-pw:focus {
+	border-color: var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
 }
 
 
diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index 9901d1c2a2c13..251d79ae03801 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -786,7 +786,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;
 }
 
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 3fec3b72c37d1..37f2135a7ef84 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; /* 28px */
-	/* Only necessary for IE11 */
-	min-height: 30px;
+	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.71428571; /* 38px for 40px min-height */
+	min-height: 40px;
 }
 
 ::-webkit-datetime-edit {
@@ -93,12 +99,20 @@ 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: #3858e9;
+	/* Expand border by 0.5px for total 1.5px effect */
+	box-shadow: 0 0 0 0.5px #3858e9;
+	/* 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 #3858e9;
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }
@@ -111,10 +125,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 +142,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,
@@ -173,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") / '';
+	/* Use the "Yes" SVG Dashicon - color will be overridden by color scheme */
+	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: #3858e9;
+	border-color: #3858e9;
+}
+
+input[type="radio"]:checked {
+	background: #3858e9;
+	border-color: #3858e9;
+}
+
 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;
 }
@@ -217,15 +241,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,
@@ -269,10 +293,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,
@@ -307,34 +331,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: #3858e9;
+	color: #1e1e1e;
+	box-shadow: 0 0 0 0.5px #3858e9;
 }
 
 .wp-core-ui select:active {
-	border-color: #8c8f94;
+	border-color: #949494;
 	box-shadow: none;
 }
 
@@ -369,7 +394,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 {
@@ -464,7 +489,7 @@ textarea.large-text {
 
 input.small-text {
 	width: 50px;
-	padding: 0 6px;
+	padding: 0 8px;
 }
 
 label input.small-text {
@@ -473,7 +498,7 @@ label input.small-text {
 
 input[type="number"].small-text {
 	width: 65px;
-	padding-right: 0;
+	padding-right: 4px;
 }
 
 input.tiny-text {
@@ -596,9 +621,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: #3858e9;
+	border-radius: 2px;
+	box-shadow: 0 0 0 0.5px #3858e9;
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }
@@ -614,9 +639,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;
@@ -675,7 +701,7 @@ fieldset label,
 
 #pass1:focus,
 #pass1-text:focus {
-	box-shadow: 0 0 0 2px #2271b1;
+	box-shadow: 0 0 0 0.5px #3858e9;
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }
@@ -692,7 +718,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 */
@@ -727,7 +753,7 @@ fieldset label,
 .profile-php .wp-pwd .caps-warning {
 	padding: 3px 5px;
 	top: -4px;
-	border-radius: 4px;
+	border-radius: 2px;
 }
 
 .wp-pwd .caps-icon {
@@ -812,7 +838,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: #3858e9;
 	color: #fff;
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
@@ -1358,7 +1384,7 @@ table.form-table td .updated p {
 }
 
 .request-filesystem-credentials-dialog .ftp-password em {
-	color: #8c8f94;
+	color: #757575;
 }
 
 .request-filesystem-credentials-dialog label {
@@ -1523,9 +1549,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 {
@@ -1577,8 +1603,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 {

From 62f0c5ef75d08a95a878a03ac6fb179ddcb1b477 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 14:12:15 +0100
Subject: [PATCH 05/52] Admin UI: Add design system tokens for admin reskin

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
---
 src/wp-admin/css/colors/_tokens.scss    | 212 ++++++++++++++++++++++++
 src/wp-admin/css/colors/_variables.scss |   5 +-
 2 files changed, 216 insertions(+), 1 deletion(-)
 create mode 100644 src/wp-admin/css/colors/_tokens.scss

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;

From 24579b778fb527b87dbbb03994ec73d52384fde3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 15:11:10 +0100
Subject: [PATCH 06/52] Admin UI: Reskin buttons to align with WordPress Design
 System

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
---
 src/wp-admin/css/colors/_admin.scss  | 144 ++++++++++-----------------
 src/wp-admin/css/colors/_mixins.scss | 123 ++++++++++++++++++++---
 src/wp-admin/css/common.css          |  10 +-
 src/wp-includes/css/buttons.css      | 143 ++++++++++++++------------
 4 files changed, 246 insertions(+), 174 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 553037e3d30d1..97904e7e9e352 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) 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,7 +77,7 @@ 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 */
@@ -109,79 +124,24 @@ textarea:focus {
 
 .wp-core-ui {
 
+	/* Default button - theme color border and text (matches secondary) */
 	.button {
-		border-color: #7e8993;
-		color: #32373c;
-	}
-
-	.button.hover,
-	.button:hover,
-	.button.focus,
-	.button:focus {
-		border-color: color.adjust(#7e8993, $lightness: -5%);
-		color: color.adjust(#32373c, $lightness: -5%);
-	}
-
-	.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;
-	}
-
-	.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;
+		@include mixins.button-secondary();
 	}
 
-	.button.active:focus {
-		box-shadow: 0 0 0 1px #32373c;
-	}
-
-	@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 );
 	}
 
 	.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 +175,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) 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..d783bf268613e 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;
+	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) 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) 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) 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/common.css b/src/wp-admin/css/common.css
index e062a471d7150..393787f8e6c2a 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -631,11 +631,12 @@ 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: 40px;
+	line-height: 2.92307692; /* 38px for 40px height */
 	color: #2271b1; /* use the standard color used for buttons */
 	padding: 0 10px;
 	min-height: 30px;
@@ -649,7 +650,6 @@ code {
 
 .wrap .add-new-h2:hover, /* deprecated */
 .wrap .page-title-action:hover {
-	background: #f0f0f1;
 	border-color: #0a4b78;
 	color: #0a4b78;
 }
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 5146be4274254..3eda51ae5d788 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;
 }
 
@@ -115,9 +126,9 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button,
 .wp-core-ui .button-secondary {
-	color: #2271b1;
-	border-color: #2271b1;
-	background: #f6f7f7;
+	color: #3858e9;
+	border-color: #3858e9;
+	background: transparent;
 	vertical-align: top;
 }
 
@@ -127,21 +138,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(56, 88, 233, 0.04);
+	border-color: #183ad6;
+	color: #183ad6;
 }
 
 .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: #3858e9;
+	color: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
 	/* 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 +160,24 @@ TABLE OF CONTENTS:
 /* :active state */
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
-	background: #f6f7f7;
-	border-color: #8c8f94;
+	background: rgba(56, 88, 233, 0.08);
+	border-color: #183ad6;
+	color: #183ad6;
 	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(56, 88, 233, 0.04);
+	color: #3858e9;
+	border-color: #3858e9;
+	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: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
 }
 
 .wp-core-ui .button[disabled],
@@ -177,9 +187,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 +211,7 @@ TABLE OF CONTENTS:
 	cursor: pointer;
 	text-align: left;
 	/* Mimics the default link style in common.css */
-	color: #2271b1;
+	color: #3858e9;
 	text-decoration: underline;
 	transition-property: border, background, color;
 	transition-duration: .05s;
@@ -210,14 +220,15 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button-link:hover,
 .wp-core-ui .button-link:active {
-	color: #135e96;
+	color: #183ad6;
 }
 
 .wp-core-ui .button-link:focus {
-	color: #043959;
-	box-shadow: 0 0 0 2px #2271b1;
+	color: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
+	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 +252,37 @@ TABLE OF CONTENTS:
 ---------------------------------------------------------------------------- */
 
 .wp-core-ui .button-primary {
-	background: #2271b1;
-	border-color: #2271b1;
+	background: #3858e9;
+	border-color: #3858e9;
 	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: #2145e6;
+	border-color: #2145e6;
 	color: #fff;
 }
 
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
+	background: #3858e9;
+	border-color: #3858e9;
+	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) #3858e9,
+		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: #183ad6;
+	border-color: #183ad6;
 	box-shadow: none;
 	color: #fff;
 }
@@ -278,9 +291,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 +322,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,7 +366,7 @@ 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;
@@ -366,9 +379,9 @@ TABLE OF CONTENTS:
 	}
 
 	#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 +399,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 +417,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;
 	}
 
 }

From 646d99837a77009bdc06ae8ba18494e3ce5a7c9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 16:18:45 +0100
Subject: [PATCH 07/52] Admin UI: Fix theme card button sizing and visibility

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
---
 src/wp-admin/css/themes.css | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index ea62a09cf1ed1..113cec87f50e7 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -83,7 +83,7 @@ body.js .theme-browser.search-loading {
 	font-weight: 600;
 	height: 18px;
 	margin: 0;
-	padding: 15px;
+	padding: 16px 15px;
 	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 	white-space: nowrap;
@@ -112,9 +112,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 +228,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 +257,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 +265,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;

From 2b85a1b68bd1651929a7c9486ecd4c7b8e295213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Jan 2026 11:04:47 +0100
Subject: [PATCH 08/52] Admin: Change default admin color scheme to 'modern'.

Updates the default admin color scheme from 'fresh' to 'modern' for WordPress 7.0.

- Bumps database version to trigger upgrade routine.
- Adds upgrade_700() to migrate existing users with 'fresh' to 'modern'.
- Updates default in wp_insert_user() for new users.
- Updates fallback in admin_color_scheme_picker().

props: karmatosed
---
 src/wp-admin/includes/misc.php    |  2 +-
 src/wp-admin/includes/upgrade.php | 26 ++++++++++++++++++++++++++
 src/wp-includes/user.php          |  6 +++---
 src/wp-includes/version.php       |  2 +-
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/includes/misc.php b/src/wp-admin/includes/misc.php
index 6c00a0ffb1951..6f6b1e2511fda 100644
--- a/src/wp-admin/includes/misc.php
+++ b/src/wp-admin/includes/misc.php
@@ -1018,7 +1018,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';
 	}
 	?>
 	<fieldset id="color-picker" class="scheme-list">
diff --git a/src/wp-admin/includes/upgrade.php b/src/wp-admin/includes/upgrade.php
index 04b7016b83bc9..52698a647281a 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,28 @@ function ( $url ) {
 	}
 }
 
+/**
+ * Executes changes made in WordPress 7.0.
+ *
+ * @ignore
+ * @since 7.0.0
+ *
+ * @global wpdb $wpdb WordPress database abstraction object.
+ */
+function upgrade_700() {
+	global $wpdb;
+
+	// Migrate users with 'fresh' admin color to 'modern'.
+	$wpdb->query(
+		$wpdb->prepare(
+			"UPDATE $wpdb->usermeta SET meta_value = %s WHERE meta_key = %s AND meta_value = %s",
+			'modern',
+			'admin_color',
+			'fresh'
+		)
+	);
+}
+
 /**
  * Executes network-level upgrade routines.
  *
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.

From 23472a1a8f835f791eaa1b6c2ac9ca6f9ec0ccae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 14:12:15 +0100
Subject: [PATCH 09/52] Admin UI: Add design system tokens for admin reskin

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
---
 src/wp-admin/css/colors/_tokens.scss    | 212 ++++++++++++++++++++++++
 src/wp-admin/css/colors/_variables.scss |   5 +-
 2 files changed, 216 insertions(+), 1 deletion(-)
 create mode 100644 src/wp-admin/css/colors/_tokens.scss

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;

From a91510a7857cbb345a1006ec8b035fd4865626f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 15:11:10 +0100
Subject: [PATCH 10/52] Admin UI: Reskin buttons to align with WordPress Design
 System

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
---
 src/wp-admin/css/colors/_admin.scss  | 144 ++++++++++-----------------
 src/wp-admin/css/colors/_mixins.scss | 123 ++++++++++++++++++++---
 src/wp-admin/css/common.css          |  10 +-
 src/wp-includes/css/buttons.css      | 143 ++++++++++++++------------
 4 files changed, 246 insertions(+), 174 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 553037e3d30d1..97904e7e9e352 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) 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,7 +77,7 @@ 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 */
@@ -109,79 +124,24 @@ textarea:focus {
 
 .wp-core-ui {
 
+	/* Default button - theme color border and text (matches secondary) */
 	.button {
-		border-color: #7e8993;
-		color: #32373c;
-	}
-
-	.button.hover,
-	.button:hover,
-	.button.focus,
-	.button:focus {
-		border-color: color.adjust(#7e8993, $lightness: -5%);
-		color: color.adjust(#32373c, $lightness: -5%);
-	}
-
-	.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;
-	}
-
-	.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;
+		@include mixins.button-secondary();
 	}
 
-	.button.active:focus {
-		box-shadow: 0 0 0 1px #32373c;
-	}
-
-	@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 );
 	}
 
 	.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 +175,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) 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..d783bf268613e 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;
+	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) 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) 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) 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/common.css b/src/wp-admin/css/common.css
index e062a471d7150..393787f8e6c2a 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -631,11 +631,12 @@ 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: 40px;
+	line-height: 2.92307692; /* 38px for 40px height */
 	color: #2271b1; /* use the standard color used for buttons */
 	padding: 0 10px;
 	min-height: 30px;
@@ -649,7 +650,6 @@ code {
 
 .wrap .add-new-h2:hover, /* deprecated */
 .wrap .page-title-action:hover {
-	background: #f0f0f1;
 	border-color: #0a4b78;
 	color: #0a4b78;
 }
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 5146be4274254..3eda51ae5d788 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;
 }
 
@@ -115,9 +126,9 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button,
 .wp-core-ui .button-secondary {
-	color: #2271b1;
-	border-color: #2271b1;
-	background: #f6f7f7;
+	color: #3858e9;
+	border-color: #3858e9;
+	background: transparent;
 	vertical-align: top;
 }
 
@@ -127,21 +138,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(56, 88, 233, 0.04);
+	border-color: #183ad6;
+	color: #183ad6;
 }
 
 .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: #3858e9;
+	color: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
 	/* 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 +160,24 @@ TABLE OF CONTENTS:
 /* :active state */
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
-	background: #f6f7f7;
-	border-color: #8c8f94;
+	background: rgba(56, 88, 233, 0.08);
+	border-color: #183ad6;
+	color: #183ad6;
 	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(56, 88, 233, 0.04);
+	color: #3858e9;
+	border-color: #3858e9;
+	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: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
 }
 
 .wp-core-ui .button[disabled],
@@ -177,9 +187,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 +211,7 @@ TABLE OF CONTENTS:
 	cursor: pointer;
 	text-align: left;
 	/* Mimics the default link style in common.css */
-	color: #2271b1;
+	color: #3858e9;
 	text-decoration: underline;
 	transition-property: border, background, color;
 	transition-duration: .05s;
@@ -210,14 +220,15 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button-link:hover,
 .wp-core-ui .button-link:active {
-	color: #135e96;
+	color: #183ad6;
 }
 
 .wp-core-ui .button-link:focus {
-	color: #043959;
-	box-shadow: 0 0 0 2px #2271b1;
+	color: #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
+	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 +252,37 @@ TABLE OF CONTENTS:
 ---------------------------------------------------------------------------- */
 
 .wp-core-ui .button-primary {
-	background: #2271b1;
-	border-color: #2271b1;
+	background: #3858e9;
+	border-color: #3858e9;
 	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: #2145e6;
+	border-color: #2145e6;
 	color: #fff;
 }
 
 .wp-core-ui .button-primary.focus,
 .wp-core-ui .button-primary:focus {
+	background: #3858e9;
+	border-color: #3858e9;
+	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) #3858e9,
+		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: #183ad6;
+	border-color: #183ad6;
 	box-shadow: none;
 	color: #fff;
 }
@@ -278,9 +291,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 +322,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,7 +366,7 @@ 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;
@@ -366,9 +379,9 @@ TABLE OF CONTENTS:
 	}
 
 	#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 +399,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 +417,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;
 	}
 
 }

From f66c7b69e2338bcc57d6374a2876de292663fc64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 16:18:45 +0100
Subject: [PATCH 11/52] Admin UI: Fix theme card button sizing and visibility

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
---
 src/wp-admin/css/themes.css | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index ea62a09cf1ed1..113cec87f50e7 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -83,7 +83,7 @@ body.js .theme-browser.search-loading {
 	font-weight: 600;
 	height: 18px;
 	margin: 0;
-	padding: 15px;
+	padding: 16px 15px;
 	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 	white-space: nowrap;
@@ -112,9 +112,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 +228,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 +257,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 +265,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;

From 0cb45934e647acfb3f988f41bbc64d25b3f675d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Jan 2026 11:48:17 +0100
Subject: [PATCH 12/52] Admin UI: Add global dashicons centering for buttons

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.
---
 src/wp-admin/css/dashboard.css  |  4 ----
 src/wp-admin/css/themes.css     |  4 ----
 src/wp-includes/css/buttons.css | 27 +++++++++++++++++++++++++++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index ddd2307e33534..eb333384d011b 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -1240,10 +1240,6 @@ a.rsswidget {
 	margin: 12px 0;
 }
 
-#dashboard_php_nag .button .dashicons-external {
-	line-height: 25px;
-}
-
 .bigger-bolder-text {
 	font-weight: 600;
 	font-size: 14px;
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 113cec87f50e7..b27859dc9e5f2 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1378,10 +1378,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;
 }
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 3eda51ae5d788..f7060323c05eb 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -107,6 +107,26 @@ TABLE OF CONTENTS:
 	display: none;
 }
 
+/* Button Icons - Dashicons centering for all button sizes */
+.wp-core-ui .button .dashicons,
+.wp-core-ui .button-primary .dashicons,
+.wp-core-ui .button-secondary .dashicons {
+	line-height: 2.92307692; /* 38px - matches default button */
+	vertical-align: top;
+}
+
+.wp-core-ui .button.button-compact .dashicons {
+	line-height: 2.30769231; /* 30px - matches compact button */
+}
+
+.wp-core-ui .button.button-small .dashicons {
+	line-height: 2; /* 22px - matches small button */
+}
+
+.wp-core-ui .button.button-hero .dashicons {
+	line-height: 3.28571429; /* 46px - matches hero button */
+}
+
 /* Style Reset buttons as simple text links */
 
 .wp-core-ui input[type="reset"],
@@ -373,6 +393,13 @@ TABLE OF CONTENTS:
 		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: 2.71428571; /* 38px - 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;

From b3cd5e0734ddc9f10b1689c37b154281b9931897 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Jan 2026 12:15:56 +0100
Subject: [PATCH 13/52] Admin UI: Fix dashicon line-height calculation in
 buttons

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
---
 src/wp-includes/css/buttons.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index f7060323c05eb..0ceeb14900fcf 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -108,23 +108,24 @@ TABLE OF CONTENTS:
 }
 
 /* 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: 2.92307692; /* 38px - matches default button */
+	line-height: 1.9; /* 38px (20px * 1.9) - matches default button */
 	vertical-align: top;
 }
 
 .wp-core-ui .button.button-compact .dashicons {
-	line-height: 2.30769231; /* 30px - matches compact button */
+	line-height: 1.5; /* 30px (20px * 1.5) - matches compact button */
 }
 
 .wp-core-ui .button.button-small .dashicons {
-	line-height: 2; /* 22px - matches small button */
+	line-height: 1.1; /* 22px (20px * 1.1) - matches small button */
 }
 
 .wp-core-ui .button.button-hero .dashicons {
-	line-height: 3.28571429; /* 46px - matches hero button */
+	line-height: 2.3; /* 46px (20px * 2.3) - matches hero button */
 }
 
 /* Style Reset buttons as simple text links */
@@ -397,7 +398,7 @@ TABLE OF CONTENTS:
 	.wp-core-ui .button .dashicons,
 	.wp-core-ui .button-primary .dashicons,
 	.wp-core-ui .button-secondary .dashicons {
-		line-height: 2.71428571; /* 38px - matches responsive button */
+		line-height: 1.9; /* 38px (20px * 1.9) - matches responsive button */
 	}
 
 	/* Copy attachment URL button in the legacy edit media page. */

From fa76e97cc6bfc8c9907ecdfa0f489fe7eab38a9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Jan 2026 12:16:03 +0100
Subject: [PATCH 14/52] Admin UI: Fix button state icon centering

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.
---
 src/wp-admin/css/common.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 393787f8e6c2a..ab7466bdf255c 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1715,7 +1715,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 {
@@ -1733,11 +1735,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,

From dc30cee44fceae8dcb1b2c235fd33fe5ec9227b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Jan 2026 12:16:10 +0100
Subject: [PATCH 15/52] Admin UI: Fix tablenav and plugin card for 40px buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/wp-admin/css/list-tables.css | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 80e652003a33c..43bca353ee1dc 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -680,9 +680,8 @@ th.sorted a span {
 
 .tablenav {
 	clear: both;
-	height: 30px;
+	height: 40px;
 	margin: 6px 0 4px;
-	padding-top: 5px;
 	vertical-align: middle;
 }
 
@@ -704,12 +703,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: 40px;
+	min-height: 40px;
 	margin: 0;
 	padding: 0 4px;
 	font-size: 16px;
-	line-height: 1.625; /* 26px */
+	line-height: 2.375; /* 38px - matches default button */
 	text-align: center;
 }
 
@@ -1421,11 +1420,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 {

From feb17ab5ac2465d05b578c3a74c3aa3b2501a46d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Jan 2026 12:19:11 +0100
Subject: [PATCH 16/52] Admin UI: Use compact size for Screen Options and Help
 buttons

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.
---
 src/wp-admin/css/common.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index ab7466bdf255c..8edb946b9300f 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1819,12 +1819,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;
 	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;
 }
@@ -1850,12 +1851,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;

From e814c54ab75c986b4bfab239c837cf14263d6ef3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 16:27:10 +0100
Subject: [PATCH 17/52] Admin UI: Reskin notices to align with WordPress Design
 System
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update all notice styles to match Gutenberg's component patterns and
the WordPress Design System specifications.

**Base Notice Styles:**
- Border: 4px left border only (removed generic border)
- Box shadow: removed for cleaner appearance
- Padding: 8px 12px (was 1px 12px)
- Typography: 13px/20px, color #1e1e1e (gray-900)

**Notice Type Colors:**
- Info: #3858e9 border, transparent background
- Success: #4ab866 border, #eff9f1 background
- Warning: #f0b849 border, #fef8ee background
- Error: #cc1818 border, #fcf0f0 background

**Dismiss Button:**
- Size: 24px × 24px (was 20px × 20px)
- Position: top 8px, right 12px (improved alignment)
- Color: #1e1e1e (was #787c82)
- Icon size: 20px/24px (was 16px/20px)
- Focus: Gutenberg-style ring using var(--wp-admin-theme-color)
- Hover: opacity 0.7

**Links in Notices:**
- Color: var(--wp-admin-theme-color)
- Hover: var(--wp-admin-theme-color-darker-10)
- Focus: proper focus ring with var(--wp-admin-border-width-focus)

**Spacing:**
- Dismissible notices: 48px right padding (was 38px)
- Provides 24px gap between content and dismiss button

See: https://core.trac.wordpress.org/ticket/64308
---
 src/wp-admin/css/common.css | 94 +++++++++++++++++++++++++------------
 1 file changed, 63 insertions(+), 31 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index e062a471d7150..cbf5eaad823ea 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -805,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;
 }
@@ -1420,11 +1420,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 */
@@ -1437,15 +1437,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: 20px;
+	color: #1e1e1e;
 }
 
-.error a {
+.notice a,
+.error a,
+.updated a {
+	color: var(--wp-admin-theme-color);
 	text-decoration: underline;
 }
 
-.updated a {
-	padding-bottom: 2px;
+.notice a:hover,
+.error a:hover,
+.updated a:hover {
+	color: var(--wp-admin-theme-color-darker-10);
+}
+
+.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 {
@@ -1463,66 +1479,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: 8px;
+	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 {

From 375478210378d261304776913faa1624e7fcd3b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Jan 2026 17:10:02 +0100
Subject: [PATCH 18/52] fix positioning of password hide / show icon

---
 src/wp-admin/css/forms.css | 14 ++++----------
 src/wp-admin/css/login.css |  1 -
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 72aa968fcc307..7ad0092fc4d2e 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -543,14 +543,13 @@ input[type="number"].tiny-text {
 	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 {
@@ -585,11 +584,6 @@ fieldset label,
 	height: min-content;
 }
 
-.wp-pwd button.pwd-toggle .dashicons {
-	position: relative;
-	top: 0.25rem;
-}
-
 .wp-pwd {
 	margin-top: 1em;
 	position: relative;
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 {

From 5c1f47a8cd999003db053df2060a49b312566881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 23 Jan 2026 22:03:39 +0100
Subject: [PATCH 19/52] Admin: Rename 'Default' admin color scheme to
 'Classic'.

---
 src/wp-admin/admin-header.php        | 2 +-
 src/wp-admin/customize.php           | 2 +-
 src/wp-admin/includes/user.php       | 2 +-
 src/wp-includes/general-template.php | 2 +-
 src/wp-includes/script-loader.php    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

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/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/user.php b/src/wp-admin/includes/user.php
index fed01c36b26eb..0406b1ed268e1 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/general-template.php b/src/wp-includes/general-template.php
index f5dacf28f7327..550b7b2f5c281 100644
--- a/src/wp-includes/general-template.php
+++ b/src/wp-includes/general-template.php
@@ -4885,7 +4885,7 @@ function register_admin_color_schemes() {
 
 	wp_admin_css_color(
 		'fresh',
-		_x( 'Default', 'admin color scheme' ),
+		_x( 'Classic', 'admin color scheme' ),
 		false,
 		array( '#1d2327', '#2c3338', '#2271b1', '#72aee6' ),
 		array(
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index 9507bb61ebe87..38bea91357818 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -2097,7 +2097,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;

From 3e2610186ec565e9d070de41d6de39bc2b7fe913 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Sat, 31 Jan 2026 22:47:35 +0100
Subject: [PATCH 20/52] fix: reduce height of custom date format input to match
 radio controls

---
 src/wp-admin/css/forms.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 7ad0092fc4d2e..80c4f798d0511 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -1195,6 +1195,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 {

From 8a4affd826716dc780e1c5996247a1b2cdf6f20c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Sat, 31 Jan 2026 22:56:31 +0100
Subject: [PATCH 21/52] fix: add flexbox layout to media library filter toolbar

---
 src/wp-admin/css/common.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 8edb946b9300f..c98339ad51886 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1108,8 +1108,9 @@ 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 {
+/* 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;

From 1b59ed975c5f394ff7c69e76fa70420a7af2324c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Sat, 31 Jan 2026 23:01:02 +0100
Subject: [PATCH 22/52] fix spacing of classic editor tabs

---
 src/wp-includes/css/editor.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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;
 }

From e0468b5c2c841549d9e3184b98b2b7ecaf5aa0f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Fri, 12 Dec 2025 17:27:31 +0100
Subject: [PATCH 23/52] Admin UI: Reskin cards to align with WordPress Design
 System

Update all card and postbox styles to match Gutenberg's component patterns
and the WordPress Design System specifications.

**Base Card Styles:**
- Background: #ffffff (white)
- Border: 1px solid rgba(0,0,0,0.1) for subtle appearance
- Border radius: 8px for dashboard widgets, plugin cards, theme cards, welcome panel
- Border radius: 0 for post editor metaboxes (maintains existing behavior)
- Padding: 16px for small cards, 16px 24px for medium cards

**Dashboard Widgets:**
- Border radius: 8px with rounded corners
- Header padding: 12px vertical, 16px horizontal for compact appearance
- Content padding: 16px (was 0 12px 12px)
- "At a Glance" widget: 16px top padding for proper alignment
- "Activity" widget: maintains 12px horizontal padding for layout compatibility
- Welcome panel: 8px border radius, 24px padding (was 48px)

**Drag and Drop Interactions:**
- Gutenberg-style blue highlights using var(--wp-admin-theme-color)
- Active drop zones: subtle blue background rgba(var(--wp-admin-theme-color--rgb), 0.04)
- Sortable placeholder: 2px solid blue border with 8px border radius
- Meta-box-sortables: 4px padding to reserve space for drag feedback
- Container margins: adjusted to maintain original layout spacing
- No dimensional changes during drag operations

**Plugin Cards:**
- Border radius: 8px with overflow hidden
- Border: rgba(0,0,0,0.1)
- Padding: 16px for top and bottom sections
- Card bottom: updated border color for consistency

**Theme Cards:**
- Border radius: 8px with overflow hidden
- Background: solid white (removed semi-transparent overlay)
- Theme name: 16px padding, border-top instead of inset box-shadow
- "Add New Theme" card: maintains transparent background and borderless style

**Generic Card Component:**
- Border radius: 8px
- Padding: 16px 24px (was 0.7em 2em 1em)
- Border: rgba(0,0,0,0.1)
- Removed box-shadow for cleaner appearance

**Post Editor Metaboxes:**
- Maintains square corners (border-radius: 0)
- Drag interactions: blue background tint, no border
- 4px padding on sortables with compensating margins
- Collapsed state: header border hidden

See #64308.

# Conflicts:
#	src/wp-admin/css/themes.css
---
 src/wp-admin/css/common.css      | 21 ++++++++-----
 src/wp-admin/css/dashboard.css   | 51 ++++++++++++++++++++++----------
 src/wp-admin/css/edit.css        | 13 +++++---
 src/wp-admin/css/forms.css       |  8 ++---
 src/wp-admin/css/list-tables.css | 12 ++++----
 src/wp-admin/css/themes.css      | 18 ++++++-----
 6 files changed, 79 insertions(+), 44 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index e062a471d7150..f91270c22ec71 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -786,7 +786,7 @@ img.emoji {
 }
 
 .stuffbox .hndle {
-	border-bottom: 1px solid #c3c4c7;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .quicktags {
@@ -2155,7 +2155,7 @@ html.wp-toolbar {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	border-bottom: 1px solid #c3c4c7;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .postbox-header .hndle {
@@ -2204,8 +2204,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: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
 
 .postbox,
@@ -2213,10 +2215,13 @@ html.wp-toolbar {
 	margin-bottom: 20px;
 	padding: 0;
 	line-height: 1;
+	background: #ffffff;
+	border: 1px solid rgba(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 */
@@ -2227,7 +2232,7 @@ html.wp-toolbar {
 }
 
 .postbox .inside {
-	padding: 0 12px 12px;
+	padding: 16px;
 	line-height: 1.4;
 	font-size: 13px;
 }
@@ -2240,7 +2245,7 @@ html.wp-toolbar {
 }
 
 .postbox .inside {
-	margin: 11px 0;
+	margin: 0;
 	position: relative;
 }
 
@@ -2421,7 +2426,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/dashboard.css b/src/wp-admin/css/dashboard.css
index 64aa30dbedeac..56732b9641a14 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,31 @@
 #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: 0 8px 0 0;
+	padding: 4px;
+}
+
+#dashboard-widgets .meta-box-sortables:not(:empty) {
+	margin-bottom: 16px;
 }
 
 #dashboard-widgets .postbox-container .empty-container {
-	outline: 3px dashed #c3c4c7;
+	border: 2px dashed rgba(0, 0, 0, 0.15);
+	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: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	min-height: 100px;
+}
+
+.is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container {
+	border: 2px dashed rgba(0, 0, 0, 0.15);
+	background: rgba(0, 0, 0, 0.01);
 }
 
 #dashboard-widgets .postbox-container .empty-container:after {
@@ -121,6 +140,8 @@
 	overflow: auto;
 	margin: 16px 0;
 	background-color: #151515;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	border-radius: 8px;
 	font-size: 14px;
 	line-height: 1.3;
 	clear: both;
@@ -259,11 +280,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 +725,7 @@ body #dashboard-widgets .postbox form .submit {
 }
 
 #dashboard_right_now .main {
-	padding: 0 12px 11px;
+	padding: 16px 16px 11px;
 }
 
 #dashboard_right_now .main p {
@@ -892,7 +913,7 @@ body #dashboard-widgets .postbox form .submit {
 
 #dashboard_activity .inside {
 	margin: 0;
-	padding-bottom: 0;
+	padding: 0 12px;
 }
 
 #dashboard_activity .no-activity {
@@ -1298,7 +1319,7 @@ 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;
@@ -1314,7 +1335,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,7 +1373,7 @@ a.rsswidget {
 	}
 
 	#dashboard-widgets #postbox-container-4 .empty-container {
-		outline: none;
+		border: none;
 		height: 0;
 		min-height: 0;
 		margin-bottom: 0;
diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 7e4110a8c569e..b442e348e5e38 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: rgba(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
@@ -1770,7 +1774,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;
 	}
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 719be1aad9ba1..e3727f810933e 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -1047,12 +1047,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 rgba(0, 0, 0, 0.1);
+	border-radius: 8px;
+	background: #ffffff;
 	box-sizing: border-box;
 }
 
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 80e652003a33c..9bb79349b6ade 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -1487,9 +1487,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 rgba(0, 0, 0, 0.1);
+	border-radius: 8px;
 	box-sizing: border-box;
+	overflow: hidden;
 }
 
 .plugin-card:nth-child(odd) {
@@ -1553,7 +1555,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 +1670,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 rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 }
 
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index ea62a09cf1ed1..0ee20cc4d6c8f 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 rgba(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 rgba(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 */
@@ -271,8 +272,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 +350,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;

From 7ccdb5c17c6e20e3f6c9891cbb65abcd9a4c25a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 4 Feb 2026 12:29:26 +0100
Subject: [PATCH 24/52] Admin: Guard color scheme migration with version check.

Wrap the 'fresh' to 'modern' admin color migration in a database version check to prevent re-running on subsequent version bumps during the release cycle.

Also refactors to use `$wpdb->update()` for cleaner code.

Props peterwilsoncc.
---
 src/wp-admin/includes/upgrade.php | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/wp-admin/includes/upgrade.php b/src/wp-admin/includes/upgrade.php
index 52698a647281a..712bd51dc88f9 100644
--- a/src/wp-admin/includes/upgrade.php
+++ b/src/wp-admin/includes/upgrade.php
@@ -2491,20 +2491,23 @@ function ( $url ) {
  * @ignore
  * @since 7.0.0
  *
- * @global wpdb $wpdb WordPress database abstraction object.
+ * @global int  $wp_current_db_version The old (current) database version.
+ * @global wpdb $wpdb                  WordPress database abstraction object.
  */
 function upgrade_700() {
-	global $wpdb;
+	global $wp_current_db_version, $wpdb;
 
 	// Migrate users with 'fresh' admin color to 'modern'.
-	$wpdb->query(
-		$wpdb->prepare(
-			"UPDATE $wpdb->usermeta SET meta_value = %s WHERE meta_key = %s AND meta_value = %s",
-			'modern',
-			'admin_color',
-			'fresh'
-		)
-	);
+	if ( $wp_current_db_version < 60718 ) {
+		$wpdb->update(
+			$wpdb->usermeta,
+			array( 'meta_value' => 'modern' ),
+			array(
+				'meta_key'   => 'admin_color',
+				'meta_value' => 'fresh',
+			)
+		);
+	}
 }
 
 /**

From 172ab0cb749587b92c020355d3605bc81e5568f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 4 Feb 2026 12:32:51 +0100
Subject: [PATCH 25/52] Admin: Reorder color schemes to place Modern first.

Moves the Modern color scheme (the new default) to the first position
in the Administration Color Scheme picker on the profile page. Classic
and Light follow immediately after, making it easy for users to find
and return to familiar schemes after trying other options.

Props peterwilsoncc.
---
 src/wp-admin/includes/misc.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/includes/misc.php b/src/wp-admin/includes/misc.php
index 6f6b1e2511fda..7cbb1942f5bda 100644
--- a/src/wp-admin/includes/misc.php
+++ b/src/wp-admin/includes/misc.php
@@ -1001,14 +1001,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
 			)

From 4e86000d4c1f22df1222728e5c74b11830d4493a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Thu, 5 Feb 2026 14:41:55 +0100
Subject: [PATCH 26/52] fix move modern color scheme definition to top so that
 the code matches the display order

---
 src/wp-includes/general-template.php | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php
index 550b7b2f5c281..687400e9fca59 100644
--- a/src/wp-includes/general-template.php
+++ b/src/wp-includes/general-template.php
@@ -4883,6 +4883,18 @@ function register_admin_color_schemes() {
 	$suffix  = is_rtl() ? '-rtl' : '';
 	$suffix .= SCRIPT_DEBUG ? '' : '.min';
 
+	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(
 		'fresh',
 		_x( 'Classic', 'admin color scheme' ),
@@ -4907,18 +4919,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' ),

From 6d9584d78202e4aab1f77214b623d4e384b2f7c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 08:49:07 +0100
Subject: [PATCH 27/52] fix rename modern to default in the UI

---
 src/wp-includes/general-template.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php
index 687400e9fca59..06ca13aa02763 100644
--- a/src/wp-includes/general-template.php
+++ b/src/wp-includes/general-template.php
@@ -4885,7 +4885,7 @@ function register_admin_color_schemes() {
 
 	wp_admin_css_color(
 		'modern',
-		_x( 'Modern', 'admin color scheme' ),
+		_x( 'Default', 'admin color scheme' ),
 		admin_url( "css/colors/modern/colors$suffix.css" ),
 		array( '#1e1e1e', '#3858e9', '#7b90ff' ),
 		array(

From a9bb51cbab1c2616a9c547bbd5a834f13eb3d66c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 08:53:32 +0100
Subject: [PATCH 28/52] fix use 12px top ofset for dismiss button

---
 src/wp-admin/css/common.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 4ce4cf0b499d1..6c0a83a51a970 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1486,7 +1486,7 @@ div.error p,
 
 .notice-dismiss {
 	position: absolute;
-	top: 8px;
+	top: 12px;
 	right: 12px;
 	border: none;
 	margin: 0;

From bff51c5026f9e6369f6b7b5521fa600a0d19d688 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 08:56:03 +0100
Subject: [PATCH 29/52] fix use relative line height

---
 src/wp-admin/css/common.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 6c0a83a51a970..810324485b558 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1440,7 +1440,7 @@ div.error p,
 	margin: 0.5em 0;
 	padding: 0;
 	font-size: 13px;
-	line-height: 20px;
+	line-height: 1.54;
 	color: #1e1e1e;
 }
 

From 139105dee0b19799f9cc0faaa5a3801f68d30cd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 09:08:36 +0100
Subject: [PATCH 30/52] fix use darker color for link to ensure better contrast

---
 src/wp-admin/css/common.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 810324485b558..20d4841cd4a07 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1447,14 +1447,14 @@ div.error p,
 .notice a,
 .error a,
 .updated a {
-	color: var(--wp-admin-theme-color);
+	color: var(--wp-admin-theme-color-darker-10);
 	text-decoration: underline;
 }
 
 .notice a:hover,
 .error a:hover,
 .updated a:hover {
-	color: var(--wp-admin-theme-color-darker-10);
+	color: var(--wp-admin-theme-color-darker-20);
 }
 
 .notice a:focus,

From 9e56da2d70a11d3d6962c8841d12b0826236eb75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 09:24:16 +0100
Subject: [PATCH 31/52] fix allignment of handle-actions inside postbox-header

---
 src/wp-admin/css/common.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 4d3677e344583..78b4910142100 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -2169,6 +2169,7 @@ html.wp-toolbar {
 
 .postbox-header .handle-actions {
 	flex-shrink: 0;
+	padding-inline-end: 6px;
 }
 
 /* Post box order and toggle buttons. */

From 6bfe0c0d20c348a6d91221373020a08c55cc79bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 09:26:44 +0100
Subject: [PATCH 32/52] fix use outline instead of border for dragging
 dashboard widgets

---
 src/wp-admin/css/dashboard.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index 56732b9641a14..6e1fa2593d04d 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -68,7 +68,8 @@
 }
 
 #dashboard-widgets .postbox-container .empty-container {
-	border: 2px dashed rgba(0, 0, 0, 0.15);
+	outline: 2px dashed rgba(0, 0, 0, 0.15);
+	outline-offset: -2px;
 	border-radius: 8px;
 	height: 250px;
 }
@@ -81,7 +82,7 @@
 }
 
 .is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container {
-	border: 2px dashed rgba(0, 0, 0, 0.15);
+	outline: 2px dashed rgba(0, 0, 0, 0.15);
 	background: rgba(0, 0, 0, 0.01);
 }
 

From b7b65c6eca811330a4e82df0bb16d4a90cb8eff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 09:33:38 +0100
Subject: [PATCH 33/52] fix use alpha param of rgb instead of rgba

---
 src/wp-admin/css/common.css      |  8 ++++----
 src/wp-admin/css/dashboard.css   | 10 +++++-----
 src/wp-admin/css/edit.css        |  2 +-
 src/wp-admin/css/forms.css       |  2 +-
 src/wp-admin/css/list-tables.css |  4 ++--
 src/wp-admin/css/themes.css      |  4 ++--
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 78b4910142100..079f794703af9 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -787,7 +787,7 @@ img.emoji {
 }
 
 .stuffbox .hndle {
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	border-bottom: 1px solid rgb(0, 0, 0, 0.1);
 }
 
 .quicktags {
@@ -2156,7 +2156,7 @@ html.wp-toolbar {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	border-bottom: 1px solid rgb(0, 0, 0, 0.1);
 }
 
 .postbox-header .hndle {
@@ -2209,7 +2209,7 @@ html.wp-toolbar {
 	border: 2px solid var(--wp-admin-theme-color);
 	border-radius: 8px;
 	margin-bottom: 20px;
-	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
 }
 
 .postbox,
@@ -2218,7 +2218,7 @@ html.wp-toolbar {
 	padding: 0;
 	line-height: 1;
 	background: #ffffff;
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid rgb(0, 0, 0, 0.1);
 	border-radius: 0;
 }
 
diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index 6e1fa2593d04d..efe51a5fa7f26 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -68,7 +68,7 @@
 }
 
 #dashboard-widgets .postbox-container .empty-container {
-	outline: 2px dashed rgba(0, 0, 0, 0.15);
+	outline: 2px dashed rgb(0, 0, 0, 0.15);
 	outline-offset: -2px;
 	border-radius: 8px;
 	height: 250px;
@@ -77,13 +77,13 @@
 /* Only highlight drop zones when dragging. */
 .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables {
 	border-radius: 8px;
-	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	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 rgba(0, 0, 0, 0.15);
-	background: rgba(0, 0, 0, 0.01);
+	outline: 2px dashed rgb(0, 0, 0, 0.15);
+	background: rgb(0, 0, 0, 0.01);
 }
 
 #dashboard-widgets .postbox-container .empty-container:after {
@@ -141,7 +141,7 @@
 	overflow: auto;
 	margin: 16px 0;
 	background-color: #151515;
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid rgb(0, 0, 0, 0.1);
 	border-radius: 8px;
 	font-size: 14px;
 	line-height: 1.3;
diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index b442e348e5e38..8a16b88de2a5e 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -175,7 +175,7 @@ body.post-type-wp_navigation .inline-edit-status {
 /* Only highlight drop zones when dragging and only in the 2 columns layout. */
 .is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables {
 	border-radius: 8px;
-	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	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
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index e3727f810933e..1436cbbbaf165 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -1050,7 +1050,7 @@ table.form-table td .updated p {
 	padding: 16px 24px;
 	min-width: 255px;
 	max-width: 520px;
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid rgb(0, 0, 0, 0.1);
 	border-radius: 8px;
 	background: #ffffff;
 	box-sizing: border-box;
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 9bb79349b6ade..843b7272cd9e8 100644
--- a/src/wp-admin/css/list-tables.css
+++ b/src/wp-admin/css/list-tables.css
@@ -1488,7 +1488,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
 	width: 48.5%;
 	width: calc( 50% - 8px );
 	background-color: #ffffff;
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid rgb(0, 0, 0, 0.1);
 	border-radius: 8px;
 	box-sizing: border-box;
 	overflow: hidden;
@@ -1672,7 +1672,7 @@ div.action-links,
 	clear: both;
 	padding: 16px;
 	background-color: #f6f7f7;
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-top: 1px solid rgb(0, 0, 0, 0.1);
 	overflow: hidden;
 }
 
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 477e71a53c2cd..f318547a157c3 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -65,7 +65,7 @@ body.js .theme-browser.search-loading {
 	position: relative;
 	width: 30.6%;
 	background: #ffffff;
-	border: 1px solid rgba(0, 0, 0, 0.1);
+	border: 1px solid rgb(0, 0, 0, 0.1);
 	border-radius: 8px;
 	box-sizing: border-box;
 	overflow: hidden;
@@ -86,7 +86,7 @@ body.js .theme-browser.search-loading {
 	height: 18px;
 	margin: 0;
 	padding: 16px;
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	border-top: 1px solid rgb(0, 0, 0, 0.1);
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;

From 59e32be341b12cdfb50204036bd5618919d3180b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20K=C3=A4gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 09:33:57 +0100
Subject: [PATCH 34/52] Apply suggestion from @mukeshpanchal27

Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
---
 src/wp-admin/css/dashboard.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index efe51a5fa7f26..b0a1497064841 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -59,7 +59,7 @@
 	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: 0;
-	margin: 0 8px 0 0;
+	margin-right: 8px;
 	padding: 4px;
 }
 

From 3ff0334c6a672f0557267c68cf66d49568aa30c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 09:50:15 +0100
Subject: [PATCH 35/52] fix use compact site for screen options

---
 src/wp-admin/css/common.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 01f2b41c52fbc..500be7fcf73de 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1823,7 +1823,7 @@ p.auto-update-status {
 	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;

From 1c0b1f7e3244a805a3301b7686ff74092c6ce186 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 09:56:58 +0100
Subject: [PATCH 36/52] fix use compact size more

---
 src/wp-admin/css/common.css         | 25 +++++++++++++++++++++----
 src/wp-admin/css/forms.css          | 19 +++++++++++++++++++
 src/wp-admin/css/list-tables.css    | 11 +++++++----
 src/wp-admin/css/media.css          | 21 +++++++++++++++++++++
 src/wp-includes/css/media-views.css | 22 ++++++++++++++++++++++
 5 files changed, 90 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 500be7fcf73de..7e37640d422eb 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -636,11 +636,10 @@ code {
 	background: transparent;
 	font-size: 13px;
 	font-weight: 500;
-	min-height: 40px;
-	line-height: 2.92307692; /* 38px for 40px height */
+	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;
 
 }
@@ -1109,6 +1108,24 @@ th.action-links {
 	margin: 0;
 }
 
+.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 {
+	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 {
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 80c4f798d0511..9cdb3ae9cfe49 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -521,6 +521,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. */
@@ -537,6 +540,9 @@ 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;
 }
 
 #timezone_string option {
@@ -781,6 +787,19 @@ 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;
 }
diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css
index 43bca353ee1dc..2321c80e19205 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,7 +683,7 @@ th.sorted a span {
 
 .tablenav {
 	clear: both;
-	height: 40px;
+	height: 32px;
 	margin: 6px 0 4px;
 	vertical-align: middle;
 }
@@ -703,12 +706,12 @@ th.sorted a span {
 .tablenav .tablenav-pages .tablenav-pages-navspan {
 	display: inline-block;
 	vertical-align: baseline;
-	min-width: 40px;
-	min-height: 40px;
+	min-width: 32px;
+	min-height: 32px;
 	margin: 0;
 	padding: 0 4px;
 	font-size: 16px;
-	line-height: 2.375; /* 38px - matches default button */
+	line-height: 1.875; /* 30px for 32px height */
 	text-align: center;
 }
 
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-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 45c6370d178db..a0e78e367adcd 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -267,6 +267,28 @@
 	-webkit-font-smoothing: subpixel-antialiased;
 }
 
+.media-modal-content .button {
+	min-height: 32px;
+	line-height: 2.30769231; /* 30px for 32px height with 13px font */
+	padding: 0 12px;
+}
+
+.media-modal-content input[type="text"],
+.media-modal-content input[type="search"],
+.media-modal-content select {
+	min-height: 32px;
+	line-height: 2.14285714; /* 30px for 32px height with 14px font */
+}
+
+.media-modal-content input[type="text"],
+.media-modal-content input[type="search"] {
+	padding: 0 8px;
+}
+
+.media-modal-content select {
+	padding: 0 24px 0 8px;
+}
+
 .media-modal-content .media-frame select.attachment-filters {
 	margin-top: 32px;
 	margin-right: 2%;

From efcfe48d2d5f5c13381f844b9e861ab0aef145af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 09:59:29 +0100
Subject: [PATCH 37/52] fix position of actions in classic editor

---
 src/wp-admin/css/common.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 7e37640d422eb..83ef5945aadd2 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -930,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 */
 }
 
@@ -950,7 +952,7 @@ a#remove-post-thumbnail:hover,
 
 #publishing-action {
 	text-align: right;
-	float: right;
+	margin-left: auto;
 	line-height: 1.9;
 }
 

From e6888a90797ee462539f23843ddd235b1a683f4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 10:13:15 +0100
Subject: [PATCH 38/52] fix media modal styles

---
 src/wp-includes/css/media-views.css | 59 ++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index a0e78e367adcd..52a71c4a291f4 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: #3858e9;
+	/* Expand border by 0.5px for total 1.5px effect */
+	box-shadow: 0 0 0 0.5px #3858e9;
 	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,25 +271,26 @@
 	-webkit-font-smoothing: subpixel-antialiased;
 }
 
-.media-modal-content .button {
+.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-modal-content input[type="text"],
-.media-modal-content input[type="search"],
-.media-modal-content select {
+.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-modal-content input[type="text"],
-.media-modal-content input[type="search"] {
+.media-toolbar input[type="text"],
+.media-toolbar input[type="search"] {
 	padding: 0 8px;
 }
 
-.media-modal-content select {
+.media-toolbar select {
 	padding: 0 24px 0 8px;
 }
 
@@ -319,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 {
@@ -919,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%;
@@ -2804,7 +2819,7 @@
 	}
 
 	.media-frame-toolbar .media-toolbar {
-		bottom: -54px;
+		bottom: -60px;
 	}
 
 	.mode-grid .attachments-browser .media-toolbar-primary {

From 4f9315f77a6cb6cc2fd6674404fe4e450aeab7f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 10:25:08 +0100
Subject: [PATCH 39/52] clean up customizer sizes

---
 src/wp-admin/css/customize-controls.css  | 14 +++++++-------
 src/wp-admin/css/customize-nav-menus.css |  8 ++++----
 src/wp-admin/css/themes.css              |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 60a6d0a3e7009..0e43cb7b1c978 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;
 }
 
@@ -1796,7 +1796,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;
 }
 
@@ -2725,7 +2725,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 +2739,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 +2751,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;
@@ -3089,7 +3089,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..63e9131a0a5a9 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%;
@@ -882,12 +882,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/themes.css b/src/wp-admin/css/themes.css
index 2d7642f282a76..efb0a8a2655ec 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1501,7 +1501,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 {
@@ -1949,7 +1949,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 {

From 98cc3b6fdfa93b73187312088056518e20fecd96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 10:39:13 +0100
Subject: [PATCH 40/52] fix focus state

---
 src/wp-admin/css/colors/_admin.scss | 10 +++++-----
 src/wp-admin/css/forms.css          |  5 ++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 3de77c1ffee0a..ad08ddfa5bf7c 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -114,7 +114,7 @@ input[type="radio"]:checked::before {
 	color: variables.$link-focus;
 }
 
-// Text input focus - Gutenberg-style 1.5px border effect
+// Text input focus - outset focus ring matching button focus style
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="color"]:focus,
@@ -132,7 +132,7 @@ input[type="week"]:focus,
 select:focus,
 textarea:focus {
 	border-color: var(--wp-admin-theme-color);
-	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 // Checkbox/Radio focus - Gutenberg-style outset focus ring
@@ -146,7 +146,7 @@ input[type="radio"]:focus {
 // Select focus (wp-core-ui styled selects)
 .wp-core-ui select:focus {
 	border-color: var(--wp-admin-theme-color);
-	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 // Autocomplete focus state
@@ -158,13 +158,13 @@ input[type="radio"]:focus {
 // Password field focus
 #pass1:focus,
 #pass1-text:focus {
-	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 // Password toggle button focus
 .mailserver-pass-wrap .button.wp-hide-pw:focus {
 	border-color: var(--wp-admin-theme-color);
-	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 9cdb3ae9cfe49..601707e478d73 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -102,8 +102,7 @@ input[type="week"]:focus,
 select:focus,
 textarea:focus {
 	border-color: #3858e9;
-	/* Expand border by 0.5px for total 1.5px effect */
-	box-shadow: 0 0 0 0.5px #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #3858e9;
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }
@@ -362,7 +361,7 @@ input[type="radio"].disabled:checked:before {
 .wp-core-ui select:focus {
 	border-color: #3858e9;
 	color: #1e1e1e;
-	box-shadow: 0 0 0 0.5px #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #3858e9;
 }
 
 .wp-core-ui select:active {

From 693bec2a6334c0bd3689d98abf21a411efcc5bbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 11:11:27 +0100
Subject: [PATCH 41/52] more customizer fixes

---
 src/wp-admin/css/customize-controls.css  | 26 ++++++++++++++++--------
 src/wp-admin/css/customize-nav-menus.css |  4 ++++
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 0e43cb7b1c978..28ca39e56691a 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -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 {
@@ -1160,12 +1161,22 @@ p.customize-section-description {
 	flex-grow: 10;
 }
 
+#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;
 	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;
 }
@@ -2199,12 +2210,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;
@@ -2920,10 +2932,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 {
diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index 63e9131a0a5a9..0e4c2a87b4294 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -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;
 }
 

From 33dde304d5fa2bf975e1570b62e0f1d3a5353570 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 11:28:17 +0100
Subject: [PATCH 42/52] fix align buttons in menu editor

---
 src/wp-admin/css/nav-menus.css | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

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
 -------------------------------------------------------------- */
 

From 334bc13ddd2ba8d8ccd7c6ec1d833ab85b32447d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 12:38:06 +0100
Subject: [PATCH 43/52] fix invisible column

---
 src/wp-admin/css/dashboard.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index b0a1497064841..92f36a78dde86 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -1324,6 +1324,7 @@ a.rsswidget {
 		height: 0;
 		min-height: 0;
 		margin-bottom: 0;
+		display: none;
 	}
 
 	#dashboard-widgets #postbox-container-3 .empty-container:after,
@@ -1378,6 +1379,7 @@ a.rsswidget {
 		height: 0;
 		min-height: 0;
 		margin-bottom: 0;
+		display: none;
 	}
 
 	#dashboard-widgets #postbox-container-4 .empty-container:after {

From f9f88f3f9367c0f5f4d4c52a20616bcc9e4744a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 19:46:38 +0100
Subject: [PATCH 44/52] fix properly use admin theme color

---
 src/wp-admin/css/forms.css          | 32 +++++++++-------
 src/wp-includes/css/buttons.css     | 58 ++++++++++++++---------------
 src/wp-includes/css/media-views.css |  4 +-
 3 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 601707e478d73..3779fa41854ae 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -101,8 +101,8 @@ input[type="url"]:focus,
 input[type="week"]:focus,
 select:focus,
 textarea:focus {
-	border-color: #3858e9;
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #3858e9;
+	border-color: var(--wp-admin-theme-color);
+	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;
 }
@@ -111,7 +111,7 @@ textarea:focus {
 input[type="checkbox"]:focus,
 input[type="radio"]:focus {
 	border-color: #1e1e1e;
-	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3858e9;
+	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;
 }
@@ -195,13 +195,13 @@ input[type="checkbox"]:checked::before {
 }
 
 input[type="checkbox"]:checked {
-	background: #3858e9;
-	border-color: #3858e9;
+	background: var(--wp-admin-theme-color);
+	border-color: var(--wp-admin-theme-color);
 }
 
 input[type="radio"]:checked {
-	background: #3858e9;
-	border-color: #3858e9;
+	background: var(--wp-admin-theme-color);
+	border-color: var(--wp-admin-theme-color);
 }
 
 input[type="radio"]:checked::before {
@@ -359,9 +359,9 @@ input[type="radio"].disabled:checked:before {
 }
 
 .wp-core-ui select:focus {
-	border-color: #3858e9;
+	border-color: var(--wp-admin-theme-color);
 	color: #1e1e1e;
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #3858e9;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
 
 .wp-core-ui select:active {
@@ -544,6 +544,12 @@ input[type="number"].tiny-text {
 	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;
 }
@@ -627,9 +633,9 @@ fieldset label,
 
 .mailserver-pass-wrap .button.wp-hide-pw:focus {
 	background: transparent;
-	border-color: #3858e9;
+	border-color: var(--wp-admin-theme-color);
 	border-radius: 2px;
-	box-shadow: 0 0 0 0.5px #3858e9;
+	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }
@@ -707,7 +713,7 @@ fieldset label,
 
 #pass1:focus,
 #pass1-text:focus {
-	box-shadow: 0 0 0 0.5px #3858e9;
+	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 }
@@ -857,7 +863,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: #3858e9;
+	background-color: var(--wp-admin-theme-color);
 	color: #fff;
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
diff --git a/src/wp-includes/css/buttons.css b/src/wp-includes/css/buttons.css
index 0ceeb14900fcf..2dde624ce9c88 100644
--- a/src/wp-includes/css/buttons.css
+++ b/src/wp-includes/css/buttons.css
@@ -147,8 +147,8 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button,
 .wp-core-ui .button-secondary {
-	color: #3858e9;
-	border-color: #3858e9;
+	color: var(--wp-admin-theme-color);
+	border-color: var(--wp-admin-theme-color);
 	background: transparent;
 	vertical-align: top;
 }
@@ -160,18 +160,18 @@ TABLE OF CONTENTS:
 .wp-core-ui .button.hover,
 .wp-core-ui .button:hover,
 .wp-core-ui .button-secondary:hover {
-	background: rgba(56, 88, 233, 0.04);
-	border-color: #183ad6;
-	color: #183ad6;
+	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: transparent;
-	border-color: #3858e9;
-	color: #3858e9;
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
+	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: 1px solid transparent;
 	/* Reset inherited offset from Gutenberg */
@@ -181,24 +181,24 @@ TABLE OF CONTENTS:
 /* :active state */
 .wp-core-ui .button:active,
 .wp-core-ui .button-secondary:active {
-	background: rgba(56, 88, 233, 0.08);
-	border-color: #183ad6;
-	color: #183ad6;
+	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: rgba(56, 88, 233, 0.04);
-	color: #3858e9;
-	border-color: #3858e9;
+	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: #3858e9;
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
+	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],
@@ -232,7 +232,7 @@ TABLE OF CONTENTS:
 	cursor: pointer;
 	text-align: left;
 	/* Mimics the default link style in common.css */
-	color: #3858e9;
+	color: var(--wp-admin-theme-color);
 	text-decoration: underline;
 	transition-property: border, background, color;
 	transition-duration: .05s;
@@ -241,12 +241,12 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button-link:hover,
 .wp-core-ui .button-link:active {
-	color: #183ad6;
+	color: var(--wp-admin-theme-color-darker-20);
 }
 
 .wp-core-ui .button-link:focus {
-	color: #3858e9;
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9;
+	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: 1px solid transparent;
@@ -273,8 +273,8 @@ TABLE OF CONTENTS:
 ---------------------------------------------------------------------------- */
 
 .wp-core-ui .button-primary {
-	background: #3858e9;
-	border-color: #3858e9;
+	background: var(--wp-admin-theme-color);
+	border-color: var(--wp-admin-theme-color);
 	color: #fff;
 	text-decoration: none;
 	text-shadow: none;
@@ -282,18 +282,18 @@ TABLE OF CONTENTS:
 
 .wp-core-ui .button-primary.hover,
 .wp-core-ui .button-primary:hover {
-	background: #2145e6;
-	border-color: #2145e6;
+	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: #3858e9;
-	border-color: #3858e9;
+	background: var(--wp-admin-theme-color);
+	border-color: var(--wp-admin-theme-color);
 	color: #fff;
 	box-shadow:
-		0 0 0 var(--wp-admin-border-width-focus, 1.5px) #3858e9,
+		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;
 }
@@ -302,8 +302,8 @@ TABLE OF CONTENTS:
 .wp-core-ui .button-primary.active:hover,
 .wp-core-ui .button-primary.active:focus,
 .wp-core-ui .button-primary:active {
-	background: #183ad6;
-	border-color: #183ad6;
+	background: var(--wp-admin-theme-color-darker-20);
+	border-color: var(--wp-admin-theme-color-darker-20);
 	box-shadow: none;
 	color: #fff;
 }
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 52a71c4a291f4..8a5d8a753ae48 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -134,9 +134,9 @@
 .media-frame input[type="url"]:focus,
 .media-frame textarea:focus,
 .media-frame select:focus {
-	border-color: #3858e9;
+	border-color: var(--wp-admin-theme-color);
 	/* Expand border by 0.5px for total 1.5px effect */
-	box-shadow: 0 0 0 0.5px #3858e9;
+	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
 	outline: 2px solid transparent;
 }
 

From a5f83e62627d5bd78b7cdc60e615e4f3821ba610 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 20:02:05 +0100
Subject: [PATCH 45/52] fix add fallback value for focal point

---
 src/wp-admin/css/colors/_admin.scss  | 12 ++++++------
 src/wp-admin/css/colors/_mixins.scss |  6 +++---
 src/wp-admin/css/forms.css           |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index ad08ddfa5bf7c..1c3156f6fde38 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -52,7 +52,7 @@ span.wp-media-buttons-icon:before {
 	&:focus {
 		color: var(--wp-admin-theme-color);
 		border-radius: tokens.$radius-s;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) 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;
 	}
 
@@ -132,7 +132,7 @@ input[type="week"]:focus,
 select:focus,
 textarea:focus {
 	border-color: var(--wp-admin-theme-color);
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) 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
@@ -146,7 +146,7 @@ input[type="radio"]:focus {
 // 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) var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 }
 
 // Autocomplete focus state
@@ -158,13 +158,13 @@ input[type="radio"]:focus {
 // Password field focus
 #pass1:focus,
 #pass1-text:focus {
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 }
 
 // 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) var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 }
 
 
@@ -242,7 +242,7 @@ input[type="radio"]: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) 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;
 }
 
diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss
index d783bf268613e..2a1beeb929697 100644
--- a/src/wp-admin/css/colors/_mixins.scss
+++ b/src/wp-admin/css/colors/_mixins.scss
@@ -23,7 +23,7 @@
 		color: $button-text-color;
 		/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
 		box-shadow:
-			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-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;
@@ -73,7 +73,7 @@
 		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) 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;
 	}
 
@@ -112,7 +112,7 @@
 		background: transparent;
 		border-color: var(--wp-admin-theme-color);
 		color: tokens.$gray-900;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) 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;
 	}
 
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 3779fa41854ae..0ccb23eff0acf 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -102,7 +102,7 @@ input[type="week"]:focus,
 select:focus,
 textarea:focus {
 	border-color: var(--wp-admin-theme-color);
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) 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;
 }
@@ -361,7 +361,7 @@ input[type="radio"].disabled:checked:before {
 .wp-core-ui select:focus {
 	border-color: var(--wp-admin-theme-color);
 	color: #1e1e1e;
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) 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 select:active {

From 70a1b81fe510ffc2e4e502cd0d44603b4b43c462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 20:02:24 +0100
Subject: [PATCH 46/52] fix size of button in cuszomizer

---
 src/wp-admin/css/customize-controls.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 28ca39e56691a..f03403024f39a 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1459,17 +1459,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,
@@ -3027,7 +3026,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 {

From 2e2bef505ca63822fee6bcd954ed54601008310a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 20:09:57 +0100
Subject: [PATCH 47/52] fix icon alignment inside header background cuszomize
 button

---
 src/wp-admin/css/customize-controls.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index f03403024f39a..2f16a43b7126b 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1606,7 +1606,7 @@ p.customize-section-description {
 }
 
 .customize-control-header button.random .dice {
-	margin-top: 4px;
+	margin-top: 0;
 }
 
 .customize-control-header .placeholder:hover .dice,

From 91a5a947a844513c0f476ba7164245eadb02daf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 20:13:35 +0100
Subject: [PATCH 48/52] fix size of button in customizer menu editor

---
 src/wp-admin/css/customize-controls.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 2f16a43b7126b..56b3f522ad1bb 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1168,7 +1168,7 @@ p.customize-section-description {
 
 #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;
 }
 

From e1768ab9734758c206ae9d9b1181e04b26c3af9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 20:25:31 +0100
Subject: [PATCH 49/52] fix overlap in customizer nav menu editor

---
 src/wp-admin/css/customize-controls.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 56b3f522ad1bb..c5267cd6d5d1f 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1137,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;
@@ -1159,6 +1165,7 @@ 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 {
@@ -2687,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;

From 05e5e63a2c01b8ff4f4a4066897b48ba461c1270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Wed, 11 Feb 2026 20:27:54 +0100
Subject: [PATCH 50/52] fix remove unused variable from mixin

---
 src/wp-admin/css/colors/_admin.scss  | 2 +-
 src/wp-admin/css/colors/_mixins.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 1c3156f6fde38..5d9bcb3f7bb89 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -184,7 +184,7 @@ input[type="radio"]:focus {
 
 	/* Primary button - theme color background */
 	.button-primary {
-		@include mixins.button( variables.$button-color );
+		@include mixins.button();
 	}
 
 	.button-group > .button.active {
diff --git a/src/wp-admin/css/colors/_mixins.scss b/src/wp-admin/css/colors/_mixins.scss
index 2a1beeb929697..9575f1f2d623b 100644
--- a/src/wp-admin/css/colors/_mixins.scss
+++ b/src/wp-admin/css/colors/_mixins.scss
@@ -5,7 +5,7 @@
  * 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 ) {
+@mixin button( $button-text-color: #fff ) {
 	background: var(--wp-admin-theme-color);
 	border-color: transparent;
 	border-radius: tokens.$radius-s;

From 5bd37eca1d093bff4e3c935b2d99c8acb60e0d18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Thu, 12 Feb 2026 15:51:23 +0100
Subject: [PATCH 51/52] fix height of select controls inside list view of media
 filter bar

---
 src/wp-admin/css/common.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 83ef5945aadd2..3365da3006bb2 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1116,7 +1116,8 @@ th.action-links {
 	padding: 0 8px;
 }
 
-.wp-filter .search-form select {
+.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;

From a46afb1013420807c59d7945e94c88bf31be3224 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Thu, 12 Feb 2026 16:32:32 +0100
Subject: [PATCH 52/52] fix update width of tags in classic editor

---
 src/wp-admin/css/edit.css  | 19 +++++++++++++------
 src/wp-admin/css/forms.css |  7 +++++--
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 7e4110a8c569e..960eaf19fdc11 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -325,8 +325,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 +335,8 @@ form#tags-filter {
 }
 
 #side-sortables .tagsdiv #newtag {
-	width: 68%;
+	flex: 1;
+	min-width: 0;
 }
 
 #post-status-info {
@@ -1423,6 +1425,9 @@ p.description code,
 
 #poststuff .tagsdiv .ajaxtag {
 	margin-top: 1em;
+	display: flex;
+	gap: 8px;
+	align-items: center;
 }
 
 #poststuff .tagsdiv .howto {
@@ -1434,7 +1439,8 @@ p.description code,
 }
 
 .tagsdiv .newtag {
-	width: 180px;
+	flex: 1;
+	min-width: 0;
 }
 
 .tagsdiv .the-tags {
@@ -1927,9 +1933,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 0ccb23eff0acf..957ba510940b3 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -809,12 +809,15 @@ p.search-box .button {
 	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;