Admin reskin: Buttons

.github/workflows/reusable-performance-report-v2.yml

@@ -104,7 +104,7 @@ jobs:
         env:
           BASE_SHA: ${{ steps.base-sha.outputs.result }}
           CODEVITALS_PROJECT_TOKEN: ${{ secrets.CODEVITALS_PROJECT_TOKEN }}
-          HOST_NAME: www.codevitals.run
+          HOST_NAME: codevitals.run
         run: |
           if [ -z "$CODEVITALS_PROJECT_TOKEN" ]; then
             echo "Performance results could not be published. 'CODEVITALS_PROJECT_TOKEN' is not set"

.github/workflows/reusable-performance.yml

@@ -347,7 +347,7 @@ jobs:
         env:
           BASE_SHA: ${{ steps.base-sha.outputs.result }}
           CODEVITALS_PROJECT_TOKEN: ${{ secrets.CODEVITALS_PROJECT_TOKEN }}
-          HOST_NAME: "www.codevitals.run"
+          HOST_NAME: "codevitals.run"
         run: |
           if [ -z "$CODEVITALS_PROJECT_TOKEN" ]; then
             echo "Performance results could not be published. 'CODEVITALS_PROJECT_TOKEN' is not set"

.gitignore

@@ -38,9 +38,6 @@ wp-tests-config.php
 /src/wp-includes/blocks/*
 !/src/wp-includes/blocks/index.php
 /src/wp-includes/build
-/src/wp-includes/class-wp-block-parser.php
-/src/wp-includes/class-wp-block-parser-block.php
-/src/wp-includes/class-wp-block-parser-frame.php
 /src/wp-includes/theme.json
 /packagehash.txt
 /.gutenberg-hash

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,21 +38,35 @@ 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;
 	}
 }
 
 .media-modal .delete-attachment,
 .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 {

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