Skip to content

Theme: Generate perceptually balanced color ramps #82294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ciampo wants to merge 44 commits into
base: trunk
Choose a base branch
from
Open

Theme: Generate perceptually balanced color ramps #82294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
f237877
Theme: Use a perceptual five-step foreground scale
ciampo Sep 1, 2026
4393d76
Theme: Add foreground scale changelog entry
ciampo Sep 1, 2026
ffb5a8b
Theme: Add color ramp benchmark
ciampo Sep 1, 2026
7afeee5
Theme: Keep active fills darker and accessible
ciampo Sep 1, 2026
221bb35
Theme: Add perceptual ramp comparison
ciampo Sep 1, 2026
ad46cfc
Theme: Add pinned-seed ramp comparison
ciampo Sep 2, 2026
e629221
Theme: Compare representative token states
ciampo Sep 2, 2026
60979bf
Theme: Add role-hybrid comparison row
ciampo Sep 2, 2026
8d63eda
Theme: Add constrained perceptual ramp comparison
ciampo Sep 2, 2026
d638e9f
Theme: Promote perceptual color ramp algorithm
ciampo Sep 2, 2026
8d569e2
Theme: Align normal foreground semantic tokens
ciampo Sep 2, 2026
b214dd5
Theme: Improve color ramp calculation performance
ciampo Sep 2, 2026
221cc29
Theme: Skip unused ramp calculation work
ciampo Sep 3, 2026
26fb288
Theme: Preserve surface spacing near black and white
ciampo Sep 3, 2026
ad1625d
Theme: Document perceptual ramp solver contracts
ciampo Sep 3, 2026
22912e6
Theme: Defer unused status foreground solves
ciampo Sep 3, 2026
8af7319
Theme: Remove experiment-only benchmark artifacts
ciampo Sep 3, 2026
77f3a8d
Theme: Document the color ramp pipeline
ciampo Sep 3, 2026
019dc00
Theme: Register color spaces only when needed
ciampo Sep 3, 2026
cce8f26
Theme: Extract contrast caching
ciampo Sep 4, 2026
c83c307
Theme: Preserve existing color ramp comments
ciampo Sep 7, 2026
be0e96e
Theme: Align ramp tests with current tokens
ciampo Sep 7, 2026
d23dcbc
Theme: Move runtime ramp pruning to follow-up
ciampo Sep 7, 2026
226ea14
Theme: Restore WordPress admin theme seeds
ciampo Sep 7, 2026
62c0e72
Theme: Reconcile color ramps with trunk
ciampo Sep 10, 2026
32450cf
Theme: Move changelog entries to Unreleased
ciampo Sep 10, 2026
c06b2e9
Theme: Restore active foreground token mappings
ciampo Sep 11, 2026
0ec345b
Theme: Prototype stronger headings and interaction cues
ciampo Oct 6, 2026
b6df5e7
Tabs: Inset interaction backgrounds within focus rings
ciampo Oct 6, 2026
6f47044
Notice: Match dismiss controls to notice tones
ciampo Oct 6, 2026
f251db0
Link: Match underline colors to foreground states
ciampo Oct 7, 2026
7a92719
Notice: Remove dismiss button borders
ciampo Oct 7, 2026
e2d85fa
Tabs: Paint padded interaction states without widening lists
ciampo Oct 7, 2026
6d9d101
Storybook: Expand foreground interaction demos
ciampo Oct 7, 2026
3f6085c
Theme: Swap strong neutral background state mappings
ciampo Oct 7, 2026
941affc
Theme: Align ramp code with current lint rules
ciampo Oct 7, 2026
a980a85
Design System: Move PR changelog entries to Unreleased
ciampo Oct 7, 2026
245246f
Theme: Update the default foreground fallback example
ciampo Oct 7, 2026
d24c231
Components: Generate current JavaScript token fallbacks
ciampo Oct 8, 2026
848bb6e
Components: Align pressed buttons and legacy tab colors
ciampo Oct 8, 2026
6cc162d
Components: Use semantic colors in Modal and inspector panels
ciampo Oct 8, 2026
3deea2a
Editor: Align header and sidebar colors with semantic tokens
ciampo Oct 8, 2026
fbbd9bb
Block Editor: Tokenize inserter and inspector colors
ciampo Oct 8, 2026
7af12f5
Design System: Fix tab focus and composed control colors
ciampo Oct 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 36 additions & 35 deletions packages/base-styles/internal/_wpds-token-fallbacks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $fallbacks: (
"var(--wp-admin-theme-color, #3858e9)",
"--wpds-color-background-interactive-brand-strong-active":
"color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black)",
"--wpds-color-background-interactive-brand-strong-disabled": "#e6e6e6",
"--wpds-color-background-interactive-brand-strong-disabled": "#e3e3e3",
"--wpds-color-background-interactive-brand-weak": "#0000",
"--wpds-color-background-interactive-brand-weak-active":
"color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white)",
Expand All @@ -29,79 +29,80 @@ $fallbacks: (
"--wpds-color-background-interactive-error-disabled": "#0000",
"--wpds-color-background-interactive-error-strong": "#cc1818",
"--wpds-color-background-interactive-error-strong-active": "#b90000",
"--wpds-color-background-interactive-error-strong-disabled": "#e6e6e6",
"--wpds-color-background-interactive-error-strong-disabled": "#e3e3e3",
"--wpds-color-background-interactive-error-weak": "#0000",
"--wpds-color-background-interactive-error-weak-active": "#fae5e1",
"--wpds-color-background-interactive-error-weak-active": "#fce7e3",
"--wpds-color-background-interactive-error-weak-disabled": "#0000",
"--wpds-color-background-interactive-neutral": "#fff",
"--wpds-color-background-interactive-neutral-active": "#fff",
"--wpds-color-background-interactive-neutral-disabled": "#fff",
"--wpds-color-background-interactive-neutral-strong": "#2d2d2d",
"--wpds-color-background-interactive-neutral-strong-active": "#1e1e1e",
"--wpds-color-background-interactive-neutral-strong-disabled": "#e6e6e6",
"--wpds-color-background-interactive-neutral-strong": "#1e1e1e",
"--wpds-color-background-interactive-neutral-strong-active": "#2d2d2d",
"--wpds-color-background-interactive-neutral-strong-disabled": "#e3e3e3",
"--wpds-color-background-interactive-neutral-weak": "#0000",
"--wpds-color-background-interactive-neutral-weak-active": "#ededed",
"--wpds-color-background-interactive-neutral-weak-active": "#efefef",
"--wpds-color-background-interactive-neutral-weak-disabled": "#0000",
"--wpds-color-background-surface-brand":
"color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white)",
"--wpds-color-background-surface-caution": "#fee995",
"color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 8%, white)",
"--wpds-color-background-surface-caution": "#ffea96",
"--wpds-color-background-surface-caution-weak": "#fff9ca",
"--wpds-color-background-surface-error": "#fae5e1",
"--wpds-color-background-surface-error": "#fce7e3",
"--wpds-color-background-surface-error-weak": "#fff6f5",
"--wpds-color-background-surface-info": "#deebfa",
"--wpds-color-background-surface-info": "#e0edfc",
"--wpds-color-background-surface-info-weak": "#f3f9ff",
"--wpds-color-background-surface-neutral": "#fcfcfc",
"--wpds-color-background-surface-neutral-strong": "#fff",
"--wpds-color-background-surface-neutral-weak": "#f4f4f4",
"--wpds-color-background-surface-success": "#c2f8ca",
"--wpds-color-background-surface-neutral-weak": "#f7f7f7",
"--wpds-color-background-surface-success": "#c5fbcd",
"--wpds-color-background-surface-success-weak": "#ebffed",
"--wpds-color-background-surface-warning": "#fde6be",
"--wpds-color-background-surface-warning": "#ffe8c0",
"--wpds-color-background-surface-warning-weak": "#fff7e1",
"--wpds-color-background-thumb-brand":
"var(--wp-admin-theme-color, #3858e9)",
"--wpds-color-background-thumb-brand-active":
"var(--wp-admin-theme-color, #3858e9)",
"--wpds-color-background-thumb-brand-disabled": "#dbdbdb",
"--wpds-color-background-thumb-neutral": "#1e1e1e",
"--wpds-color-background-thumb-neutral": "#464646",
"--wpds-color-background-thumb-neutral-weak": "#8d8d8d",
"--wpds-color-background-thumb-neutral-weak-active": "#6e6e6e",
"--wpds-color-background-thumb-neutral-weak-disabled": "#dbdbdb",
"--wpds-color-background-track-neutral": "#dbdbdb",
"--wpds-color-background-track-neutral-weak": "#f0f0f0",
"--wpds-color-foreground-content-caution": "#281d00",
"--wpds-color-foreground-content-caution-weak": "#836a00",
"--wpds-color-foreground-content-error": "#470000",
"--wpds-color-foreground-content-error-weak": "#cc1818",
"--wpds-color-foreground-content-info": "#001b4f",
"--wpds-color-foreground-content-info-weak": "#006bd7",
"--wpds-color-foreground-content-neutral": "#1e1e1e",
"--wpds-color-foreground-content-neutral-weak": "#707070",
"--wpds-color-foreground-content-success": "#002900",
"--wpds-color-foreground-content-success-weak": "#008030",
"--wpds-color-foreground-content-warning": "#2e1900",
"--wpds-color-foreground-content-warning-weak": "#936300",
"--wpds-color-foreground-content-caution": "#514513",
"--wpds-color-foreground-content-caution-weak": "#7c6c21",
"--wpds-color-foreground-content-error": "#850c0c",
"--wpds-color-foreground-content-error-weak": "#d81a1a",
"--wpds-color-foreground-content-info": "#004580",
"--wpds-color-foreground-content-info-weak": "#006fc7",
"--wpds-color-foreground-content-neutral": "#464646",
"--wpds-color-foreground-content-neutral-strong": "#141414",
"--wpds-color-foreground-content-neutral-weak": "#717171",
"--wpds-color-foreground-content-success": "#1b4f29",
"--wpds-color-foreground-content-success-weak": "#307e44",
"--wpds-color-foreground-content-warning": "#594215",
"--wpds-color-foreground-content-warning-weak": "#886726",
"--wpds-color-foreground-interactive-brand":
"var(--wp-admin-theme-color, #3858e9)",
"color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 80%, black)",
"--wpds-color-foreground-interactive-brand-active":
"color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black)",
"color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 35%, black)",
"--wpds-color-foreground-interactive-brand-disabled": "#8d8d8d",
"--wpds-color-foreground-interactive-brand-strong": "#fff",
"--wpds-color-foreground-interactive-brand-strong-active": "#fff",
"--wpds-color-foreground-interactive-brand-strong-disabled": "#8d8d8d",
"--wpds-color-foreground-interactive-error": "#cc1818",
"--wpds-color-foreground-interactive-error-active": "#470000",
"--wpds-color-foreground-interactive-error": "#850c0c",
"--wpds-color-foreground-interactive-error-active": "#260101",
"--wpds-color-foreground-interactive-error-disabled": "#8d8d8d",
"--wpds-color-foreground-interactive-error-strong": "#f2efef",
"--wpds-color-foreground-interactive-error-strong-active": "#f2efef",
"--wpds-color-foreground-interactive-error-strong-disabled": "#8d8d8d",
"--wpds-color-foreground-interactive-neutral": "#1e1e1e",
"--wpds-color-foreground-interactive-neutral-active": "#1e1e1e",
"--wpds-color-foreground-interactive-neutral": "#464646",
"--wpds-color-foreground-interactive-neutral-active": "#141414",
"--wpds-color-foreground-interactive-neutral-disabled": "#8d8d8d",
"--wpds-color-foreground-interactive-neutral-strong": "#f0f0f0",
"--wpds-color-foreground-interactive-neutral-strong-active": "#f0f0f0",
"--wpds-color-foreground-interactive-neutral-strong-disabled": "#8d8d8d",
"--wpds-color-foreground-interactive-neutral-weak": "#707070",
"--wpds-color-foreground-interactive-neutral-weak-active": "#1e1e1e",
"--wpds-color-foreground-interactive-neutral-weak": "#717171",
"--wpds-color-foreground-interactive-neutral-weak-active": "#141414",
"--wpds-color-foreground-interactive-neutral-weak-disabled": "#8d8d8d",
"--wpds-color-stroke-focus": "var(--wp-admin-theme-color, #3858e9)",
"--wpds-color-stroke-interactive-brand":
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
### Bug Fixes

- NavigableToolbar: Ignore menu focus guards so menus from `@wordpress/ui` open on the first click ([#84547](https://github.com/WordPress/gutenberg/pull/84547)).
- Use semantic colors for inserter tiles, inserter surfaces, and block inspector content. ([#82294](https://github.com/WordPress/gutenberg/pull/82294))
- Inserter: Only show the block-section separator when both sections contain blocks, avoiding a double border above the tip ([#84197](https://github.com/WordPress/gutenberg/pull/84197)).

## 18.1.0 (2026-10-07)
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/block-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@use "@wordpress/base-styles/colors" as *;

.block-editor-block-card {
color: $gray-900;
color: var(--wpds-color-foreground-content-neutral);
padding: $grid-unit-20;

&.is-parent {
Expand Down Expand Up @@ -30,6 +30,7 @@
overflow-wrap: anywhere;

&.block-editor-block-card__title {
color: var(--wpds-color-foreground-content-neutral-strong);
font-size: $default-font-size;
line-height: $default-line-height;
margin: 0;
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/block-inspector/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
h2,
h3 {
font-size: $default-font-size;
color: $gray-900;
color: var(--wpds-color-foreground-content-neutral-strong);
margin-bottom: 1.5em;
}

Expand All @@ -35,7 +35,7 @@

.components-panel__body {
border: none;
border-top: $border-width solid $gray-200;
border-top: $border-width solid var(--wpds-color-stroke-surface-neutral);

// Ensures this PanelBody is treated like the ToolsPanel, removing double borders.
margin-top: -$border-width;
Expand All @@ -46,7 +46,7 @@
.block-editor-block-inspector__no-block-tools {
display: block;
font-size: $default-font-size;
background: $white;
background: var(--wpds-color-background-surface-neutral-strong);
padding: ($grid-unit-20 * 2) $grid-unit-20;
text-align: center;
}
Expand All @@ -68,7 +68,7 @@
}

.block-editor-block-inspector__no-block-tools {
border-top: $border-width solid $gray-300;
border-top: $border-width solid var(--wpds-color-stroke-surface-neutral);
}

.block-editor-block-inspector-edit-contents {
Expand Down
15 changes: 8 additions & 7 deletions packages/block-editor/src/components/inserter-list-item/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
}

&::after {
opacity: 0.04;
background: var(--wp-block-synced-color);
}
}
Expand All @@ -38,7 +39,7 @@
flex-direction: column;
width: 100%;
font-size: $default-font-size;
color: $gray-900;
color: var(--wpds-color-foreground-interactive-neutral);
padding: $grid-unit-10;
align-items: stretch;
justify-content: center;
Expand All @@ -50,6 +51,7 @@
transition: all 0.05s ease-in-out;
}
position: relative;
isolation: isolate;
height: auto;

&:disabled,
Expand All @@ -61,24 +63,23 @@
&:not(:disabled, [aria-disabled="true"]) {
&:hover {
.block-editor-block-types-list__item-title {
color: var(--wp-admin-theme-color) !important;
filter: brightness(0.95);
color: var(--wpds-color-foreground-interactive-brand-active) !important;
}

svg {
color: var(--wp-admin-theme-color) !important;
color: var(--wpds-color-foreground-interactive-brand-active) !important;
}

&::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: $radius-small;
opacity: 0.04;
background: var(--wp-admin-theme-color);
background: var(--wpds-color-background-interactive-brand-weak-active);
// This fixes drag-and-drop in Firefox.
pointer-events: none;
}
Expand All @@ -88,7 +89,7 @@

.block-editor-block-types-list__item-icon {
padding: 12px 20px;
color: $gray-900;
color: inherit;
@media not ( prefers-reduced-motion ) {
transition: all 0.05s ease-in-out;
}
Expand Down
Loading
Loading