Skip to content

Commit 5acfe09

Browse files
CGastrellclaudejameskoster
authored
Admin UI: Update Page background color to surface-neutral (#76869)
* Admin UI: Update Page background color to surface-neutral Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Remove stale design token note from TODO comment Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Theme: refine neutral surface color tokens and prebuilt outputs Adjust sRGB components and hex values for surface and fgSurface ramps; sync color-ramps constants, default ramps, CSS, and JS fallbacks. Made-with: Cursor * Admin UI: use neutral surface token for page header background Switch header from --wpds-color-bg-surface-neutral-strong to --wpds-color-bg-surface-neutral for a softer match to page chrome. Made-with: Cursor * remove comment, open issue #76907 * Use neutral strong for header background * update snapshoot for e2e tests --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: James Koster <jay.koster@automattic.com>
1 parent 0c5beeb commit 5acfe09

7 files changed

Lines changed: 240 additions & 244 deletions

File tree

‎packages/admin-ui/src/page/style.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
.admin-ui-page {
22
display: flex;
33
height: 100%;
4-
// @TODO: Revisit page background color. Consider using
5-
// --wpds-color-bg-surface-neutral once existing pages (e.g. Styles)
6-
// are updated to handle the contrast change.
7-
// See https://github.com/WordPress/gutenberg/pull/76548
8-
background-color: var(--wpds-color-bg-surface-neutral-strong);
4+
background-color: var(--wpds-color-bg-surface-neutral);
95
color: var(--wpds-color-fg-content-neutral);
106
position: relative;
117
z-index: 1;

‎packages/theme/src/color-ramps/lib/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const CONTRAST_COMBINATIONS: {
7979

8080
// Used when generating the DTCG tokens and the static color ramps.
8181
export const DEFAULT_SEED_COLORS = {
82-
bg: '#f8f8f8',
82+
bg: '#fcfcfc',
8383
primary: '#3858e9',
8484
info: '#0090ff',
8585
success: '#4ab866',

‎packages/theme/src/color-ramps/lib/default-ramps.ts‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,28 @@ export const DEFAULT_RAMPS: Record<
1010
> = {
1111
bg: {
1212
ramp: {
13-
surface2: '#f8f8f8',
13+
surface2: '#fcfcfc',
1414
bgFill1: '#555',
1515
fgFill: '#f0f0f0',
1616
bgFill2: '#484848',
17-
surface6: '#d2d2d2',
18-
surface5: '#e2e2e2',
19-
surface4: '#eaeaea',
17+
surface6: '#d6d6d6',
18+
surface5: '#e6e6e6',
19+
surface4: '#ededed',
2020
surface3: '#fff',
2121
fgSurface4: '#1e1e1e',
22-
fgSurface3: '#6d6d6d',
23-
fgSurface2: '#8a8a8a',
24-
fgSurface1: '#aaa',
25-
stroke3: '#8a8a8a',
26-
stroke4: '#6c6c6c',
27-
stroke2: '#d8d8d8',
28-
stroke1: '#e0e0e0',
22+
fgSurface3: '#707070',
23+
fgSurface2: '#8d8d8d',
24+
fgSurface1: '#aeaeae',
25+
stroke3: '#8d8d8d',
26+
stroke4: '#6e6e6e',
27+
stroke2: '#dbdbdb',
28+
stroke1: '#e4e4e4',
2929
bgFillDark: '#1e1e1e',
3030
fgFillDark: '#f0f0f0',
3131
bgFillInverted2: '#1e1e1e',
3232
bgFillInverted1: '#2d2d2d',
3333
fgFillInverted: '#f0f0f0',
34-
surface1: '#f0f0f0',
34+
surface1: '#f4f4f4',
3535
},
3636
direction: 'darker',
3737
},
@@ -40,15 +40,15 @@ export const DEFAULT_RAMPS: Record<
4040
bgFill1: '#3858e9',
4141
fgFill: '#eff0f2',
4242
bgFill2: '#2e49d9',
43-
surface2: '#f6f8fd',
44-
surface6: '#c7d2ed',
45-
surface5: '#dbe2f4',
43+
surface2: '#f6f8fe',
44+
surface6: '#c7d2ee',
45+
surface5: '#dce3f4',
4646
surface4: '#e6eaf4',
4747
surface3: '#fff',
4848
fgSurface4: '#0b0070',
4949
fgSurface3: '#3858e9',
50-
fgSurface2: '#5b82ff',
51-
fgSurface1: '#85a9ff',
50+
fgSurface2: '#5a82ff',
51+
fgSurface1: '#86a9ff',
5252
stroke3: '#3858e9',
5353
stroke4: '#2337c8',
5454
stroke2: '#9caacc',
@@ -58,7 +58,7 @@ export const DEFAULT_RAMPS: Record<
5858
bgFillInverted2: '#1a1e27',
5959
bgFillInverted1: '#13009f',
6060
fgFillInverted: '#eff0f2',
61-
surface1: '#ecf0f9',
61+
surface1: '#ecf0fa',
6262
},
6363
direction: 'darker',
6464
},
@@ -67,15 +67,15 @@ export const DEFAULT_RAMPS: Record<
6767
bgFill1: '#0090ff',
6868
fgFill: '#1a1f24',
6969
bgFill2: '#007fed',
70-
surface2: '#f2f9ff',
70+
surface2: '#f3f9ff',
7171
surface6: '#bcd5f2',
72-
surface5: '#d3e4f7',
72+
surface5: '#d4e4f7',
7373
surface4: '#deebfa',
7474
surface3: '#fff',
7575
fgSurface4: '#001b4f',
7676
fgSurface3: '#006bd7',
7777
fgSurface2: '#008bfa',
78-
fgSurface1: '#58b0ff',
78+
fgSurface1: '#59b0ff',
7979
stroke3: '#006bd7',
8080
stroke4: '#004fa9',
8181
stroke2: '#95b5d9',
@@ -85,7 +85,7 @@ export const DEFAULT_RAMPS: Record<
8585
bgFillInverted2: '#1a1f24',
8686
bgFillInverted1: '#002a69',
8787
fgFillInverted: '#eef0f3',
88-
surface1: '#e4f1ff',
88+
surface1: '#e5f1ff',
8989
},
9090
direction: 'darker',
9191
},
@@ -94,25 +94,25 @@ export const DEFAULT_RAMPS: Record<
9494
bgFill1: '#4ab866',
9595
fgFill: '#1b1f1c',
9696
bgFill2: '#37a756',
97-
surface2: '#eaffed',
97+
surface2: '#ebffed',
9898
surface6: '#88e89b',
99-
surface5: '#aff3bb',
100-
surface4: '#c5f7cc',
99+
surface5: '#b0f3bb',
100+
surface4: '#c6f7cd',
101101
surface3: '#fff',
102102
fgSurface4: '#002900',
103-
fgSurface3: '#007f30',
104-
fgSurface2: '#2b9e4e',
105-
fgSurface1: '#53c16e',
106-
stroke3: '#007f30',
107-
stroke4: '#006013',
108-
stroke2: '#84c08e',
103+
fgSurface3: '#008030',
104+
fgSurface2: '#2b9f4e',
105+
fgSurface1: '#54c16e',
106+
stroke3: '#008030',
107+
stroke4: '#006113',
108+
stroke2: '#84c08f',
109109
stroke1: '#8ac894',
110110
bgFillDark: '#1b1f1c',
111111
fgFillDark: '#eaf3eb',
112112
bgFillInverted2: '#1b1f1c',
113113
bgFillInverted1: '#003701',
114114
fgFillInverted: '#eaf3eb',
115-
surface1: '#cbfdd2',
115+
surface1: '#ccfdd3',
116116
},
117117
direction: 'darker',
118118
},
@@ -121,25 +121,25 @@ export const DEFAULT_RAMPS: Record<
121121
bgFill1: '#f0d149',
122122
fgFill: '#1f1e1b',
123123
bgFill2: '#dcbe2f',
124-
surface2: '#fff9c9',
125-
surface6: '#e8d172',
126-
surface5: '#f7e18a',
127-
surface4: '#fee994',
124+
surface2: '#fff9ca',
125+
surface6: '#e9d170',
126+
surface5: '#f7e28a',
127+
surface4: '#fee995',
128128
surface3: '#fff',
129129
fgSurface4: '#281d00',
130130
fgSurface3: '#826a00',
131-
fgSurface2: '#a48600',
131+
fgSurface2: '#a48700',
132132
fgSurface1: '#c6a800',
133133
stroke3: '#826a00',
134-
stroke4: '#624f00',
134+
stroke4: '#634f00',
135135
stroke2: '#bdb17e',
136136
stroke1: '#c5b883',
137137
bgFillDark: '#1f1e1b',
138138
fgFillDark: '#fdf1bf',
139139
bgFillInverted2: '#1f1e1b',
140140
bgFillInverted1: '#392c00',
141141
fgFillInverted: '#fdf1bf',
142-
surface1: '#ffef9b',
142+
surface1: '#fff09c',
143143
},
144144
direction: 'darker',
145145
},
@@ -148,25 +148,25 @@ export const DEFAULT_RAMPS: Record<
148148
bgFill1: '#f0b849',
149149
fgFill: '#1f1e1b',
150150
bgFill2: '#dda633',
151-
surface2: '#fff7e0',
152-
surface6: '#f4cc84',
153-
surface5: '#faddac',
154-
surface4: '#fde6bd',
151+
surface2: '#fff7e1',
152+
surface6: '#f4cc85',
153+
surface5: '#fadead',
154+
surface4: '#fde6be',
155155
surface3: '#fff',
156156
fgSurface4: '#2e1900',
157157
fgSurface3: '#926300',
158-
fgSurface2: '#b47f00',
159-
fgSurface1: '#d7a02a',
158+
fgSurface2: '#b57f00',
159+
fgSurface1: '#d7a02b',
160160
stroke3: '#926300',
161161
stroke4: '#6f4900',
162162
stroke2: '#c7ad7e',
163-
stroke1: '#d0b381',
163+
stroke1: '#d0b481',
164164
bgFillDark: '#1f1e1b',
165165
fgFillDark: '#f7efe2',
166166
bgFillInverted2: '#1f1e1b',
167167
bgFillInverted1: '#422800',
168168
fgFillInverted: '#f7efe2',
169-
surface1: '#ffecc4',
169+
surface1: '#ffedc5',
170170
},
171171
direction: 'darker',
172172
},
@@ -175,9 +175,9 @@ export const DEFAULT_RAMPS: Record<
175175
bgFill1: '#cc1818',
176176
fgFill: '#f2efef',
177177
bgFill2: '#b90000',
178-
surface2: '#fff6f4',
179-
surface6: '#f3c8c2',
180-
surface5: '#f8dcd7',
178+
surface2: '#fff6f5',
179+
surface6: '#f3c9c2',
180+
surface5: '#f7dbd7',
181181
surface4: '#f6e6e3',
182182
surface3: '#fff',
183183
fgSurface4: '#470000',

‎packages/theme/src/color-ramps/test/__snapshots__/index.test.ts.snap‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
1313
},
1414
},
1515
"seedComputed": "#d1d1d1",
16-
"seedOriginal": "#f8f8f8",
16+
"seedOriginal": "#fcfcfc",
1717
"seedUnchanged": false,
1818
},
1919
"output": {
@@ -58,7 +58,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
5858
},
5959
},
6060
"seedComputed": "#d1d1d1",
61-
"seedOriginal": "#f8f8f8",
61+
"seedOriginal": "#fcfcfc",
6262
"seedUnchanged": false,
6363
},
6464
"output": {
@@ -103,7 +103,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
103103
},
104104
},
105105
"seedComputed": "#d1d1d1",
106-
"seedOriginal": "#f8f8f8",
106+
"seedOriginal": "#fcfcfc",
107107
"seedUnchanged": false,
108108
},
109109
"output": {
@@ -148,7 +148,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
148148
},
149149
},
150150
"seedComputed": "#d1d1d1",
151-
"seedOriginal": "#f8f8f8",
151+
"seedOriginal": "#fcfcfc",
152152
"seedUnchanged": false,
153153
},
154154
"output": {
@@ -193,7 +193,7 @@ exports[`buildRamps accent ramp snapshots 1`] = `
193193
},
194194
},
195195
"seedComputed": "#d2d2d2",
196-
"seedOriginal": "#f8f8f8",
196+
"seedOriginal": "#fcfcfc",
197197
"seedUnchanged": false,
198198
},
199199
"output": {
@@ -237,15 +237,15 @@ exports[`buildRamps accent ramp snapshots 1`] = `
237237
"value": 0.7,
238238
},
239239
},
240-
"seedComputed": "#f8f8f8",
241-
"seedOriginal": "#f8f8f8",
240+
"seedComputed": "#fcfcfc",
241+
"seedOriginal": "#fcfcfc",
242242
"seedUnchanged": true,
243243
},
244244
"output": {
245245
"direction": "darker",
246246
"ramp": {
247-
"bgFill1": "#f8f8f8",
248-
"bgFill2": "#e2e2e2",
247+
"bgFill1": "#fcfcfc",
248+
"bgFill2": "#e6e6e6",
249249
"bgFillDark": "#050505",
250250
"bgFillInverted1": "#1e1e1e",
251251
"bgFillInverted2": "#050505",
@@ -279,15 +279,15 @@ exports[`buildRamps accent ramp snapshots 1`] = `
279279
"value": 0.8,
280280
},
281281
},
282-
"seedComputed": "#f8f8f8",
283-
"seedOriginal": "#f8f8f8",
282+
"seedComputed": "#fcfcfc",
283+
"seedOriginal": "#fcfcfc",
284284
"seedUnchanged": true,
285285
},
286286
"output": {
287287
"direction": "darker",
288288
"ramp": {
289-
"bgFill1": "#f8f8f8",
290-
"bgFill2": "#e2e2e2",
289+
"bgFill1": "#fcfcfc",
290+
"bgFill2": "#e6e6e6",
291291
"bgFillDark": "#1e1e1e",
292292
"bgFillInverted1": "#2d2d2d",
293293
"bgFillInverted2": "#1e1e1e",
@@ -321,15 +321,15 @@ exports[`buildRamps accent ramp snapshots 1`] = `
321321
"value": 0.9,
322322
},
323323
},
324-
"seedComputed": "#f8f8f8",
325-
"seedOriginal": "#f8f8f8",
324+
"seedComputed": "#fcfcfc",
325+
"seedOriginal": "#fcfcfc",
326326
"seedUnchanged": true,
327327
},
328328
"output": {
329329
"direction": "darker",
330330
"ramp": {
331-
"bgFill1": "#f8f8f8",
332-
"bgFill2": "#e2e2e2",
331+
"bgFill1": "#fcfcfc",
332+
"bgFill2": "#e6e6e6",
333333
"bgFillDark": "#1e1e1e",
334334
"bgFillInverted1": "#2d2d2d",
335335
"bgFillInverted2": "#1e1e1e",
@@ -363,15 +363,15 @@ exports[`buildRamps accent ramp snapshots 1`] = `
363363
"value": 1,
364364
},
365365
},
366-
"seedComputed": "#f8f8f8",
367-
"seedOriginal": "#f8f8f8",
366+
"seedComputed": "#fcfcfc",
367+
"seedOriginal": "#fcfcfc",
368368
"seedUnchanged": true,
369369
},
370370
"output": {
371371
"direction": "darker",
372372
"ramp": {
373-
"bgFill1": "#f8f8f8",
374-
"bgFill2": "#e2e2e2",
373+
"bgFill1": "#fcfcfc",
374+
"bgFill2": "#e6e6e6",
375375
"bgFillDark": "#1e1e1e",
376376
"bgFillInverted1": "#2d2d2d",
377377
"bgFillInverted2": "#1e1e1e",

0 commit comments

Comments
 (0)