Commit 71cf78ac48 for wordpress.org
commit 71cf78ac48b4934f19e4df1d86c664b810b35684
Author: afercia <afercia@git.wordpress.org>
Date: Sat Sep 5 12:03:49 2026 +0000
Administration: Fix the CSS Coding Standards in _tokens.scss.
Lints the `src/wp-admin/css/colors/_tokens.scss` file.
Part of the ongoing effort to lint all the admin CSS files.
Developed in https://github.com/WordPress/wordpress-develop/pull/13174
See #65898.
Built from https://develop.svn.wordpress.org/trunk@63499
git-svn-id: http://core.svn.wordpress.org/trunk@62675 1a063a9b-81f0-0310-95a4-ce76da25c4cd
diff --git a/wp-admin/css/colors/_tokens.scss b/wp-admin/css/colors/_tokens.scss
index c918ee0e5f..eacd836710 100644
--- a/wp-admin/css/colors/_tokens.scss
+++ b/wp-admin/css/colors/_tokens.scss
@@ -16,11 +16,11 @@
//
// ==========================================================================
-
-// --------------------------------------------------------------------------
-// Grid Units (Spacing)
-// --------------------------------------------------------------------------
-// Based on 4px base unit. Use for padding, margin, and gap values.
+/**
+ * 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
@@ -32,10 +32,9 @@ $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
-// --------------------------------------------------------------------------
+/**
+ * Border Radius
+ */
$radius-xs: 1px; // radius-xs
$radius-s: 2px; // radius-s - Buttons, inputs
@@ -44,29 +43,29 @@ $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 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-300: #ddd; // Scales/Grays/gray-300
+$gray-400: #ccc; // 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
+$white: #fff; // 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 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
@@ -76,12 +75,12 @@ $theme-alpha-08: rgba(56, 88, 233, 0.08); // Scales/Theme/theme-alpha-08 (8% opa
$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.
+/**
+ * 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
@@ -95,20 +94,18 @@ $alert-red-bg: #fcf0f0; // Error notice background
$synced-color: #7a00df; // Scales/Purple/--wp-block-synced-color
-
-// --------------------------------------------------------------------------
-// Text Colors
-// --------------------------------------------------------------------------
+/**
+ * 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-tertiary: #5d5d5d; // Alias/text/text-tertiary - Placeholder, hints
$text-disabled: $gray-600; // Disabled text
-
-// --------------------------------------------------------------------------
-// Component Tokens
-// --------------------------------------------------------------------------
+/**
+ * Component Tokens
+ */
// Inputs
$input-bg: $white; // Alias/bg/bg-input
@@ -154,10 +151,9 @@ $card-padding-lg-v: $grid-unit-30; // 24px - Large cards vertical
$page-padding-large: 48px; // Alias/page-large
$page-padding-small: 24px; // Alias/page-small
-
-// --------------------------------------------------------------------------
-// Typography Scale
-// --------------------------------------------------------------------------
+/**
+ * Typography Scale
+ */
// Font Sizes
$font-size-xs: 11px; // xs - Small labels, button small
@@ -171,37 +167,35 @@ $line-height-xs: 16px; // xs
$line-height-s: 20px; // s - Most UI elements
$line-height-m: 24px; // m - Body large
-// --------------------------------------------------------------------------
-// Elevation (Box Shadows)
-// --------------------------------------------------------------------------
+/**
+ * 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);
+ 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);
+ 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);
+ 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);
+ 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
-// --------------------------------------------------------------------------
+/**
+ * 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/wp-admin/css/colors/blue/colors-rtl.css b/wp-admin/css/colors/blue/colors-rtl.css
index 19ee93d36b..9a09fe2028 100644
--- a/wp-admin/css/colors/blue/colors-rtl.css
+++ b/wp-admin/css/colors/blue/colors-rtl.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/blue/colors.css b/wp-admin/css/colors/blue/colors.css
index 5e7f6c4267..cb0079384e 100644
--- a/wp-admin/css/colors/blue/colors.css
+++ b/wp-admin/css/colors/blue/colors.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/coffee/colors-rtl.css b/wp-admin/css/colors/coffee/colors-rtl.css
index 139e91e184..49e9f1d189 100644
--- a/wp-admin/css/colors/coffee/colors-rtl.css
+++ b/wp-admin/css/colors/coffee/colors-rtl.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/coffee/colors.css b/wp-admin/css/colors/coffee/colors.css
index 4ae2b4f839..601c991eac 100644
--- a/wp-admin/css/colors/coffee/colors.css
+++ b/wp-admin/css/colors/coffee/colors.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/ectoplasm/colors-rtl.css b/wp-admin/css/colors/ectoplasm/colors-rtl.css
index e5ad00c341..da43fb4a9b 100644
--- a/wp-admin/css/colors/ectoplasm/colors-rtl.css
+++ b/wp-admin/css/colors/ectoplasm/colors-rtl.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/ectoplasm/colors.css b/wp-admin/css/colors/ectoplasm/colors.css
index ca7af7d622..d043013537 100644
--- a/wp-admin/css/colors/ectoplasm/colors.css
+++ b/wp-admin/css/colors/ectoplasm/colors.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/light/colors-rtl.css b/wp-admin/css/colors/light/colors-rtl.css
index 077cc2c6f5..d0be475379 100644
--- a/wp-admin/css/colors/light/colors-rtl.css
+++ b/wp-admin/css/colors/light/colors-rtl.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/light/colors.css b/wp-admin/css/colors/light/colors.css
index 65d9307ab2..8e0ecbd78e 100644
--- a/wp-admin/css/colors/light/colors.css
+++ b/wp-admin/css/colors/light/colors.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/midnight/colors-rtl.css b/wp-admin/css/colors/midnight/colors-rtl.css
index d4eacc2d45..8ed8b4a5fc 100644
--- a/wp-admin/css/colors/midnight/colors-rtl.css
+++ b/wp-admin/css/colors/midnight/colors-rtl.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/midnight/colors.css b/wp-admin/css/colors/midnight/colors.css
index 314c8aa232..345237d3f5 100644
--- a/wp-admin/css/colors/midnight/colors.css
+++ b/wp-admin/css/colors/midnight/colors.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/modern/colors-rtl.css b/wp-admin/css/colors/modern/colors-rtl.css
index 6fe4904089..7d29587b1f 100644
--- a/wp-admin/css/colors/modern/colors-rtl.css
+++ b/wp-admin/css/colors/modern/colors-rtl.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/modern/colors.css b/wp-admin/css/colors/modern/colors.css
index 4920c55e94..b86f60df71 100644
--- a/wp-admin/css/colors/modern/colors.css
+++ b/wp-admin/css/colors/modern/colors.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/ocean/colors-rtl.css b/wp-admin/css/colors/ocean/colors-rtl.css
index 0bc9e32765..b21dd2718c 100644
--- a/wp-admin/css/colors/ocean/colors-rtl.css
+++ b/wp-admin/css/colors/ocean/colors-rtl.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/ocean/colors.css b/wp-admin/css/colors/ocean/colors.css
index 33a7e20213..812d41014a 100644
--- a/wp-admin/css/colors/ocean/colors.css
+++ b/wp-admin/css/colors/ocean/colors.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/sunrise/colors-rtl.css b/wp-admin/css/colors/sunrise/colors-rtl.css
index 4305102c02..e185c38ddb 100644
--- a/wp-admin/css/colors/sunrise/colors-rtl.css
+++ b/wp-admin/css/colors/sunrise/colors-rtl.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-admin/css/colors/sunrise/colors.css b/wp-admin/css/colors/sunrise/colors.css
index cc2ca87f02..b5d4c1126a 100644
--- a/wp-admin/css/colors/sunrise/colors.css
+++ b/wp-admin/css/colors/sunrise/colors.css
@@ -1,4 +1,44 @@
/*! This file is auto-generated */
+/**
+ * Grid Units (Spacing)
+ *
+ * Based on 4px base unit. Use for padding, margin, and gap values.
+ */
+/**
+ * Border Radius
+ */
+/**
+ * Gray Scale
+ *
+ * Neutral colors for backgrounds, borders, and text.
+ */
+/**
+ * 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.
+ */
+/**
+ * Semantic Colors
+ *
+ * Use these for notices, alerts, and status indicators.
+ * These are intentionally NOT theme-dependent for consistency.
+ */
+/**
+ * Text Colors
+ */
+/**
+ * Component Tokens
+ */
+/**
+ * Typography Scale
+ */
+/**
+ * Elevation (Box Shadows)
+ */
+/**
+ * Layout
+ */
/*
* Button mixin - creates a primary button effect.
* Uses CSS custom properties for theme color support across color schemes.
@@ -115,7 +155,7 @@ textarea:focus {
input[type=checkbox]:focus,
input[type=radio]:focus {
border-color: #1e1e1e;
- box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--wp-admin-theme-color);
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
outline: 2px solid transparent;
}
@@ -170,7 +210,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button:where(:not(.button-link)):disabled, .wp-core-ui .button:where(:not(.button-link)).disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -203,7 +243,7 @@ input[type=radio]:focus {
}
.wp-core-ui .button-secondary:disabled, .wp-core-ui .button-secondary.disabled {
background: transparent;
- border-color: #dddddd;
+ border-color: #ddd;
color: #949494;
cursor: not-allowed;
}
@@ -226,7 +266,7 @@ input[type=radio]:focus {
border-color: transparent;
color: #fff;
/* Gutenberg-style focus ring: outer theme color + inset white for contrast */
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #ffffff;
+ box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
/* Visible in Windows High Contrast mode */
outline: 1px solid transparent;
}
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 923616dac9..c93ce2d33b 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
-$wp_version = '7.2-alpha-63498';
+$wp_version = '7.2-alpha-63499';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.