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/36] 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/36] 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/36] 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/36] 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/36] 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/36] 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/36] 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 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 08/36] 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 09/36] 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 10/36] 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 11/36] 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 12/36] 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 13/36] 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 14/36] 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 15/36] 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 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 16/36] 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 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 17/36] 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 18/36] 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 19/36] 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 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 20/36] 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 21/36] 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 22/36] 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 23/36] 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 24/36] 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 25/36] 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 26/36] 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 27/36] 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 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 28/36] 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 29/36] 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 30/36] 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 31/36] 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 32/36] 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 33/36] 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 34/36] 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 35/36] 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 36/36] 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;