mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-04-21 17:47:22 +00:00
revert: restore pre-Tailwind 4 color palette and button colors (#16247)
Reverts PR #16186 and PR #16104, which introduced visual issues. This restores the stable color appearance from before the Tailwind 4 migration. Fixes #16246 Signed-off-by: Vaclav Vancura <commit@vancura.dev>
This commit is contained in:
Václav Vančura
GitHub
parent
a5b0663a07
commit
7fa8fb4c9e
3 changed files with 106 additions and 145 deletions
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
|
|
|
|||
|
|
@ -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)",
|
||||
|
|
|
|||
Loading…
Reference in a new issue