Skip to content

Update customizer color values and colorScheme assignments #1959

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

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Update customizer color values and colorScheme assignments #1959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,10 +397,10 @@ export class CustomizerPage {
});
});

// This test is here to prevent changes to the solid colors from impacting the UI
// these need to be exact to prevent migrations from becoming a problem
// This test is here to catch changes to the solid colors.
// The order of these need to be exact to prevent issues when user migrates from the native customizer to the web customizer.
expect(styles).toStrictEqual([
{ style: 'background: rgb(0, 0, 0);', value: 'color01' },
{ style: 'background: rgb(17, 17, 17);', value: 'color01' },
{ style: 'background: rgb(52, 46, 66);', value: 'color02' },
{ style: 'background: rgb(77, 95, 127);', value: 'color03' },
{ style: 'background: rgb(154, 151, 157);', value: 'color04' },
Expand Down
2 changes: 1 addition & 1 deletion special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ test.describe('newtab customizer', () => {
kind: 'color',
value: 'color01',
});
await cp.hasColorBackground('rgb(0, 0, 0)');
await cp.hasColorBackground('rgb(17, 17, 17)');
});
test('loads with the default background and accepts theme update', async ({ page }, workerInfo) => {
const ntp = NewtabPage.create(page, workerInfo);
Expand Down
14 changes: 7 additions & 7 deletions special-pages/pages/new-tab/app/customizer/values.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@
*/
export const values = {
colors: {
color01: { hex: '#000000', colorScheme: 'dark' },
color01: { hex: '#111111', colorScheme: 'dark' },
color02: { hex: '#342e42', colorScheme: 'dark' },
color03: { hex: '#4d5f7f', colorScheme: 'dark' },
color04: { hex: '#9a979d', colorScheme: 'dark' },
color04: { hex: '#9a979d', colorScheme: 'light' },
color05: { hex: '#dbdddf', colorScheme: 'light' },
color06: { hex: '#577de4', colorScheme: 'dark' },
color06: { hex: '#577de4', colorScheme: 'light' },
color07: { hex: '#75b9f0', colorScheme: 'light' },
color08: { hex: '#5552ac', colorScheme: 'dark' },
color09: { hex: '#b79ed4', colorScheme: 'light' },
color10: { hex: '#e4def2', colorScheme: 'light' },
color11: { hex: '#b5e2ce', colorScheme: 'light' },
color12: { hex: '#5bc787', colorScheme: 'light' },
color13: { hex: '#4594a7', colorScheme: 'dark' },
color13: { hex: '#4594a7', colorScheme: 'light' },
color14: { hex: '#e9dccd', colorScheme: 'light' },
color15: { hex: '#f3bb44', colorScheme: 'light' },
color16: { hex: '#e5724f', colorScheme: 'light' },
color17: { hex: '#d55154', colorScheme: 'dark' },
color17: { hex: '#d55154', colorScheme: 'light' },
color18: { hex: '#f7dee5', colorScheme: 'light' },
color19: { hex: '#e28499', colorScheme: 'light' },
},
Expand All @@ -38,8 +38,8 @@ export const values = {
*/
'gradient02.01': { path: 'gradients/gradient02.01.svg', fallback: '#f4ca78', colorScheme: 'light' },
gradient03: { path: 'gradients/gradient03.svg', fallback: '#e6a356', colorScheme: 'light' },
gradient04: { path: 'gradients/gradient04.svg', fallback: '#4448ae', colorScheme: 'dark' },
gradient05: { path: 'gradients/gradient05.svg', fallback: '#a55778', colorScheme: 'dark' },
gradient04: { path: 'gradients/gradient04.svg', fallback: '#4448ae', colorScheme: 'light' },
gradient05: { path: 'gradients/gradient05.svg', fallback: '#a55778', colorScheme: 'light' },
gradient06: { path: 'gradients/gradient06.svg', fallback: '#222566', colorScheme: 'dark' },
gradient07: { path: 'gradients/gradient07.svg', fallback: '#0e0e3d', colorScheme: 'dark' },
},
Expand Down
Loading