diff --git a/packages/main/src/plugin/color-registry.spec.ts b/packages/main/src/plugin/color-registry.spec.ts index 8ee7cf52d36..5443fdb62f0 100644 --- a/packages/main/src/plugin/color-registry.spec.ts +++ b/packages/main/src/plugin/color-registry.spec.ts @@ -196,9 +196,9 @@ test('init', async () => { }); test('initColors', async () => { - // spy on registerColor but let it actually register colors + // mock the registerColor const spyOnRegisterColor = vi.spyOn(colorRegistry, 'registerColor'); - // Don't mock it - let it call through to the real implementation + spyOnRegisterColor.mockReturnValue(undefined); colorRegistry.initColors(); @@ -226,7 +226,7 @@ describe('initTitlebar', () => { // check the first call expect(spyOnRegisterColor.mock.calls[0]?.[0]).toStrictEqual('titlebar-bg'); - expect(spyOnRegisterColor.mock.calls[0]?.[1].light).toBe(tailwindColorPalette.gray[50]); + expect(spyOnRegisterColor.mock.calls[0]?.[1].light).toBe('#f9fafb'); expect(spyOnRegisterColor.mock.calls[0]?.[1].dark).toBe('#202020'); }); @@ -247,7 +247,7 @@ describe('initTitlebar', () => { // check the first call expect(spyOnRegisterColor.mock.calls[0]?.[0]).toStrictEqual('titlebar-bg'); - expect(spyOnRegisterColor.mock.calls[0]?.[1].light).toBe(tailwindColorPalette.gray[50]); + expect(spyOnRegisterColor.mock.calls[0]?.[1].light).toBe('#f9fafb'); expect(spyOnRegisterColor.mock.calls[0]?.[1].dark).toBe('#0f0f11'); }); }); @@ -450,7 +450,7 @@ describe('registerExtensionThemes', () => { // now check for a color not defined in 'light-theme1' const titlebarTextColorLight = colorsLight.find(c => c.id === 'titlebar-text'); expect(titlebarTextColorLight).toBeDefined(); - expect(titlebarTextColorLight?.value).toBe(tailwindColorPalette.purple[900]); + expect(titlebarTextColorLight?.value).toBe('#37255d'); }); test('check dispose on Windows', async () => { diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts index 89bf2d61fde..49815523619 100644 --- a/packages/main/src/plugin/color-registry.ts +++ b/packages/main/src/plugin/color-registry.ts @@ -38,10 +38,8 @@ const { fuchsia, gray, green, - slate, neutral, purple, - violet, red, sky, stone, @@ -1006,132 +1004,101 @@ export class ColorRegistry { const button = 'button-'; this.registerColor(`${button}primary-bg`, { - dark: violet[600], - light: violet[700], + dark: purple[600], + light: purple[600], }); - this.registerColor(`${button}primary-hover-bg`, { - dark: violet[500], - light: violet[600], + dark: purple[500], + light: purple[500], }); - this.registerColor(`${button}secondary`, { - dark: transparent, - light: violet[200], + dark: gray[200], + light: purple[600], }); - this.registerColor(`${button}secondary-hover`, { - dark: slate[700], - light: violet[100], + dark: purple[500], + light: purple[500], }); - this.registerColor(`${button}text`, { dark: white, light: white, }); - this.registerColor(`${button}disabled`, { - dark: stone[700], - light: stone[300], + dark: charcoal[300], + light: gray[600], }); - this.registerColor(`${button}disabled-text`, { dark: charcoal[50], light: gray[900], }); - - this.registerColorDefinition( - this.color(`${button}danger-border`) - .withLight(colorPaletteHelper(red[700])) - .withDark(colorPaletteHelper(red[200]).withAlpha(0.4)) - .build(), - ); - - this.registerColor(`${button}danger-bg`, { - dark: red[600], - light: red[200], - }); - - this.registerColor(`${button}danger-text`, { - dark: white, + this.registerColor(`${button}danger-border`, { + dark: red[500], + light: red[700], + }); + this.registerColor(`${button}danger-bg`, { + dark: transparent, + light: transparent, + }); + this.registerColor(`${button}danger-text`, { + dark: red[500], light: red[700], }); - - // deprecated since 2026-02-06. See https://github.com/podman-desktop/podman-desktop/pull/14876 - // Use `button-danger-text` instead this.registerColor(`${button}danger-hover-text`, { dark: white, - light: red[700], + light: white, }); - this.registerColor(`${button}danger-hover-bg`, { - dark: red[500], - light: red[100], - }); - - this.registerColor(`${button}danger-disabled-border`, { dark: red[600], - light: red[200], + light: red[600], + }); + this.registerColor(`${button}danger-disabled-border`, { + dark: charcoal[50], + light: gray[900], }); - - // deprecated since 2026-02-06. See https://github.com/podman-desktop/podman-desktop/pull/14876 - // Unused color (danger buttons always use `button-danger-text`) this.registerColor(`${button}danger-disabled-text`, { - dark: white, - light: red[700], + dark: charcoal[50], + light: gray[900], }); - this.registerColor(`${button}danger-disabled-bg`, { dark: transparent, light: transparent, }); - this.registerColor(`${button}tab-border`, { dark: transparent, light: transparent, }); - this.registerColor(`${button}tab-border-selected`, { dark: purple[500], light: purple[600], }); - this.registerColor(`${button}tab-hover-border`, { - dark: slate[700], - light: violet[100], + dark: charcoal[100], + light: gray[600], }); - this.registerColor(`${button}tab-text`, { dark: gray[400], light: charcoal[200], }); - this.registerColor(`${button}tab-text-selected`, { dark: white, light: black, }); - this.registerColorDefinition( this.color(`${button}close-hover-bg`) .withLight(colorPaletteHelper(black).withAlpha(0.13)) .withDark(colorPaletteHelper(white).withAlpha(0.13)) .build(), ); - this.registerColor(`${button}link-text`, { dark: purple[400], light: purple[700], }); - this.registerColorDefinition( this.color(`${button}link-hover-bg`) .withLight(colorPaletteHelper(black).withAlpha(0.13)) .withDark(colorPaletteHelper(white).withAlpha(0.13)) .build(), ); - - // deprecated since 2026-02-06. See https://github.com/podman-desktop/podman-desktop/pull/14876 - // Unused color this.registerColor(`${button}help-link-text`, { dark: gray[100], light: charcoal[900], diff --git a/tailwind-color-palette.json b/tailwind-color-palette.json index 6070dfdb2f6..66732b4803e 100644 --- a/tailwind-color-palette.json +++ b/tailwind-color-palette.json @@ -1,16 +1,16 @@ { "amber": { - "50": "oklch(98.7% 0.022 95.277)", - "100": "oklch(96.2% 0.059 95.617)", - "200": "oklch(92.4% 0.12 95.746)", - "300": "oklch(87.9% 0.169 91.605)", - "400": "oklch(82.8% 0.189 84.429)", - "500": "oklch(76.9% 0.188 70.08)", - "600": "oklch(66.6% 0.179 58.318)", - "700": "oklch(55.5% 0.163 48.998)", - "800": "oklch(47.3% 0.137 46.201)", - "900": "oklch(41.4% 0.112 45.904)", - "950": "oklch(27.9% 0.077 45.635)" + "50": "#fffbeb", + "100": "#fef3c7", + "200": "#fde68a", + "300": "#fcd34d", + "400": "#fbbf24", + "500": "#f59e0b", + "600": "#d97706", + "700": "#b45309", + "800": "#92400e", + "900": "#78350f", + "950": "#451a03" }, "black": "#000", "charcoal": { @@ -38,83 +38,77 @@ "900": "#4a406f" }, "fuchsia": { - "50": "oklch(97.7% 0.017 320.058)", - "100": "oklch(95.2% 0.037 318.852)", - "200": "oklch(90.3% 0.076 319.62)", - "300": "oklch(83.3% 0.145 321.434)", - "400": "oklch(74% 0.238 322.16)", - "500": "oklch(66.7% 0.295 322.15)", - "600": "oklch(59.1% 0.293 322.896)", - "700": "oklch(51.8% 0.253 323.949)", - "800": "oklch(45.2% 0.211 324.591)", - "900": "oklch(40.1% 0.17 325.612)", - "950": "oklch(29.3% 0.136 325.661)" + "50": "#fdf2ff", + "100": "#f9e3ff", + "200": "#f4c6ff", + "300": "#f099ff", + "400": "#e85dff", + "500": "#d721ff", + "600": "#c200ff", + "700": "#a200cf", + "800": "#8600a9", + "900": "#710689" }, "gray": { "25": "#fefefe", - "50": "oklch(98.5% 0.002 247.839)", - "100": "oklch(96.7% 0.003 264.542)", - "200": "oklch(92.8% 0.006 264.531)", - "300": "oklch(87.2% 0.01 258.338)", - "400": "oklch(70.7% 0.022 261.325)", - "500": "oklch(55.1% 0.027 264.364)", - "600": "oklch(44.6% 0.03 256.802)", - "700": "oklch(37.3% 0.034 259.733)", - "800": "oklch(27.8% 0.033 256.848)", - "900": "oklch(21% 0.034 264.665)", - "950": "oklch(13% 0.028 261.692)" + "50": "#f9fafb", + "100": "#f6f6f6", + "200": "#efefef", + "300": "#e4e4e4", + "400": "#d1d1d1", + "500": "#c8c8c8", + "600": "#b4b4b4", + "700": "#aaabac", + "800": "#9a9a9a", + "900": "#818181" }, "green": { - "50": "oklch(98.2% 0.018 155.826)", - "100": "oklch(96.2% 0.044 156.743)", - "200": "oklch(92.5% 0.084 155.995)", - "300": "oklch(87.1% 0.15 154.449)", - "400": "oklch(79.2% 0.209 151.711)", - "500": "oklch(72.3% 0.219 149.579)", - "600": "oklch(62.7% 0.194 149.214)", - "700": "oklch(52.7% 0.154 150.069)", - "800": "oklch(44.8% 0.119 151.328)", - "900": "oklch(39.3% 0.095 152.535)", - "950": "oklch(26.6% 0.065 152.934)" + "50": "#f0f9f0", + "100": "#ddefdc", + "200": "#bbdfbb", + "300": "#8ec792", + "400": "#64ad6c", + "500": "#3c8d47", + "600": "#2b7037", + "700": "#225a2d", + "800": "#1d4825", + "900": "#193b20" }, "purple": { - "50": "oklch(97.7% 0.014 308.299)", - "100": "oklch(94.6% 0.033 307.174)", - "200": "oklch(90.2% 0.063 306.703)", - "300": "oklch(82.7% 0.119 306.383)", - "400": "oklch(71.4% 0.203 305.504)", - "500": "oklch(62.7% 0.265 303.9)", - "600": "oklch(55.8% 0.288 302.321)", - "700": "oklch(49.6% 0.265 301.924)", - "800": "oklch(43.8% 0.218 303.724)", - "900": "oklch(38.1% 0.176 304.987)", - "950": "oklch(29.1% 0.149 302.717)" + "50": "#f7f3ff", + "100": "#efe9fe", + "200": "#e2d6fe", + "300": "#bfa7f6", + "400": "#ad8bfa", + "500": "#8b5cf6", + "600": "#6d48bf", + "700": "#6234b1", + "800": "#4d2d87", + "900": "#37255d" }, "red": { - "50": "oklch(97.1% 0.013 17.38)", - "100": "oklch(93.6% 0.032 17.717)", - "200": "oklch(88.5% 0.062 18.334)", - "300": "oklch(80.8% 0.114 19.571)", - "400": "oklch(70.4% 0.191 22.216)", - "500": "oklch(63.7% 0.237 25.331)", - "600": "oklch(57.7% 0.245 27.325)", - "700": "oklch(50.5% 0.213 27.518)", - "800": "oklch(44.4% 0.177 26.899)", - "900": "oklch(39.6% 0.141 25.723)", - "950": "oklch(25.8% 0.092 26.042)" + "50": "#fff4f1", + "100": "#ffe7e1", + "200": "#ffd1c7", + "300": "#ffb3a1", + "400": "#ff866a", + "500": "#f86847", + "600": "#e5421d", + "700": "#c13414", + "800": "#9f2f15", + "900": "#842c18" }, "sky": { - "50": "oklch(97.7% 0.013 236.62)", - "100": "oklch(95.1% 0.026 236.824)", - "200": "oklch(90.1% 0.058 230.902)", - "300": "oklch(82.8% 0.111 230.318)", - "400": "oklch(74.6% 0.16 232.661)", - "500": "oklch(68.5% 0.169 237.323)", - "600": "oklch(58.8% 0.158 241.966)", - "700": "oklch(50% 0.134 242.749)", - "800": "oklch(44.3% 0.11 240.79)", - "900": "oklch(39.1% 0.09 240.876)", - "950": "oklch(29.3% 0.066 243.157)" + "50": "#f2f8fd", + "100": "#e5eff9", + "200": "#c4def3", + "300": "#90c3e9", + "400": "#51a2da", + "500": "#2f88c8", + "600": "#206ca9", + "700": "#1b5789", + "800": "#1a4a72", + "900": "#1b3f5f" }, "slate": { "50": "oklch(98.4% 0.003 247.858)",