From 89c66a13071974cfd311be79ca2abb5228b5e976 Mon Sep 17 00:00:00 2001
From: Robert Anderson <randerson@duckduckgo.com>
Date: Thu, 11 Sep 2025 15:53:49 +1000
Subject: [PATCH] Update customizer color values and colorScheme assignments

---
 .../integration-tests/customizer.page.js           |  6 +++---
 .../integration-tests/customizer.spec.js           |  2 +-
 .../pages/new-tab/app/customizer/values.js         | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js
index ee3328fa48..7a175ba936 100644
--- a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js
+++ b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js
@@ -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' },
diff --git a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js
index 8fbb490088..13ed9cd6ac 100644
--- a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js
+++ b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js
@@ -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);
diff --git a/special-pages/pages/new-tab/app/customizer/values.js b/special-pages/pages/new-tab/app/customizer/values.js
index 3ef5ae0d81..dcc5c8c93d 100644
--- a/special-pages/pages/new-tab/app/customizer/values.js
+++ b/special-pages/pages/new-tab/app/customizer/values.js
@@ -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' },
     },
@@ -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' },
     },