mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-04-21 09:37:22 +00:00
feat(main): implement pd accent colors as default theme values (#16749)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Václav Vančura
GitHub
parent
69fe23768e
commit
d870cf0b00
3 changed files with 286 additions and 218 deletions
|
|
@ -285,8 +285,22 @@ test('initContent', async () => {
|
|||
|
||||
// check the first call
|
||||
expect(spyOnRegisterColor.mock.calls[0]?.[0]).toStrictEqual('content-breadcrumb');
|
||||
expect(spyOnRegisterColor.mock.calls[0]?.[1].light).toBe(tailwindColorPalette.purple[900]);
|
||||
expect(spyOnRegisterColor.mock.calls[0]?.[1].dark).toBe(tailwindColorPalette.gray[400]);
|
||||
expect(spyOnRegisterColor.mock.calls[0]?.[1].light).toBe(tailwindColorPalette.accent1[500]);
|
||||
expect(spyOnRegisterColor.mock.calls[0]?.[1].dark).toBe(tailwindColorPalette.accent1[400]);
|
||||
});
|
||||
|
||||
test('initDropdown registers dropdown-border', async () => {
|
||||
colorRegistry.initColors();
|
||||
|
||||
const colorsLight = colorRegistry.listColors('light');
|
||||
const dropdownBorderLight = colorsLight.find(c => c.id === 'dropdown-border');
|
||||
expect(dropdownBorderLight).toBeDefined();
|
||||
expect(dropdownBorderLight?.value).toBe(tailwindColorPalette.accent1[500]);
|
||||
|
||||
const colorsDark = colorRegistry.listColors('dark');
|
||||
const dropdownBorderDark = colorsDark.find(c => c.id === 'dropdown-border');
|
||||
expect(dropdownBorderDark).toBeDefined();
|
||||
expect(dropdownBorderDark?.value).toBe('transparent');
|
||||
});
|
||||
|
||||
describe('registerColor', () => {
|
||||
|
|
@ -500,7 +514,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('#37255d');
|
||||
expect(titlebarTextColorLight?.value).toBe(tailwindColorPalette.accent1[500]);
|
||||
});
|
||||
|
||||
test('check dispose on Windows', async () => {
|
||||
|
|
@ -662,12 +676,12 @@ describe('initLabel', () => {
|
|||
|
||||
// check the first call
|
||||
expect(spyOnRegisterColor.mock.calls[2]?.[0]).toStrictEqual('label-primary-bg');
|
||||
expect(spyOnRegisterColor.mock.calls[2]?.[1].light).toBe(tailwindColorPalette.purple[300]);
|
||||
expect(spyOnRegisterColor.mock.calls[2]?.[1].dark).toBe(tailwindColorPalette.purple[700]);
|
||||
expect(spyOnRegisterColor.mock.calls[2]?.[1].light).toBe(tailwindColorPalette.accent1[200]);
|
||||
expect(spyOnRegisterColor.mock.calls[2]?.[1].dark).toBe(tailwindColorPalette.accent1[900]);
|
||||
|
||||
expect(spyOnRegisterColor.mock.calls[3]?.[0]).toStrictEqual('label-primary-text');
|
||||
expect(spyOnRegisterColor.mock.calls[3]?.[1].light).toBe(tailwindColorPalette.purple[700]);
|
||||
expect(spyOnRegisterColor.mock.calls[3]?.[1].dark).toBe(tailwindColorPalette.purple[300]);
|
||||
expect(spyOnRegisterColor.mock.calls[3]?.[1].light).toBe(tailwindColorPalette.accent1[800]);
|
||||
expect(spyOnRegisterColor.mock.calls[3]?.[1].dark).toBe(tailwindColorPalette.accent1[200]);
|
||||
});
|
||||
|
||||
test('secondary color', () => {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import type { ConfigurationRegistry } from './configuration-registry.js';
|
|||
import { Disposable } from './types/disposable.js';
|
||||
|
||||
const {
|
||||
accent1,
|
||||
amber,
|
||||
black,
|
||||
charcoal,
|
||||
|
|
@ -372,8 +373,8 @@ export class ColorRegistry {
|
|||
|
||||
protected initNotificationDot(): void {
|
||||
this.registerColor('notification-dot', {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -390,16 +391,16 @@ export class ColorRegistry {
|
|||
light: gray[300],
|
||||
});
|
||||
this.registerColor(`${glNav}icon`, {
|
||||
dark: gray[400],
|
||||
dark: gray[600],
|
||||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${glNav}icon-hover`, {
|
||||
dark: white,
|
||||
light: purple[800],
|
||||
dark: gray[600],
|
||||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${glNav}icon-hover-bg`, {
|
||||
dark: purple[700],
|
||||
light: purple[300],
|
||||
dark: transparent,
|
||||
light: transparent,
|
||||
});
|
||||
this.registerColor(`${glNav}icon-inset-bg`, {
|
||||
dark: charcoal[800],
|
||||
|
|
@ -407,15 +408,15 @@ export class ColorRegistry {
|
|||
});
|
||||
this.registerColor(`${glNav}icon-selected`, {
|
||||
dark: white,
|
||||
light: purple[800],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${glNav}icon-selected-bg`, {
|
||||
dark: charcoal[500],
|
||||
light: gray[300],
|
||||
light: gray[250],
|
||||
});
|
||||
this.registerColor(`${glNav}icon-selected-highlight`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -427,12 +428,12 @@ export class ColorRegistry {
|
|||
|
||||
this.registerColor('titlebar-text', {
|
||||
dark: white,
|
||||
light: purple[900],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor('titlebar-icon', {
|
||||
dark: white,
|
||||
light: purple[900],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor('titlebar-hover-bg', {
|
||||
|
|
@ -470,13 +471,13 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${sNav}text-hover`, {
|
||||
dark: white,
|
||||
light: purple[800],
|
||||
dark: gray[275],
|
||||
light: charcoal[750],
|
||||
});
|
||||
|
||||
this.registerColor(`${sNav}text-hover-bg`, {
|
||||
dark: purple[700],
|
||||
light: purple[300],
|
||||
dark: transparent,
|
||||
light: transparent,
|
||||
});
|
||||
|
||||
this.registerColor(`${sNav}text-selected`, {
|
||||
|
|
@ -486,12 +487,12 @@ export class ColorRegistry {
|
|||
|
||||
this.registerColor(`${sNav}selected-bg`, {
|
||||
dark: charcoal[500],
|
||||
light: gray[300],
|
||||
light: gray[250],
|
||||
});
|
||||
|
||||
this.registerColor(`${sNav}selected-highlight`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${sNav}expander`, {
|
||||
|
|
@ -550,8 +551,8 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${invCt}button-active`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${invCt}button-inactive`, {
|
||||
|
|
@ -560,21 +561,21 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${invCt}info-icon`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
}
|
||||
|
||||
protected initContent(): void {
|
||||
const ct = 'content-';
|
||||
this.registerColor(`${ct}breadcrumb`, {
|
||||
dark: gray[400],
|
||||
light: purple[900],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}breadcrumb-2`, {
|
||||
dark: purple[400],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}header`, {
|
||||
|
|
@ -583,23 +584,23 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${ct}text`, {
|
||||
dark: gray[400],
|
||||
light: gray[900],
|
||||
dark: gray[700],
|
||||
light: charcoal[250],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}sub-header`, {
|
||||
dark: gray[400],
|
||||
light: purple[900],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}header-icon`, {
|
||||
dark: gray[400],
|
||||
light: purple[700],
|
||||
dark: gray[600],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-header-text`, {
|
||||
dark: gray[100],
|
||||
light: purple[900],
|
||||
dark: gray[350],
|
||||
light: charcoal[850],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-bg`, {
|
||||
|
|
@ -608,18 +609,18 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${ct}card-hover-bg`, {
|
||||
dark: charcoal[500],
|
||||
light: gray[300],
|
||||
dark: charcoal[800],
|
||||
light: gray[25],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-selected-bg`, {
|
||||
dark: charcoal[400],
|
||||
light: purple[100],
|
||||
light: accent1[100],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-text`, {
|
||||
dark: gray[400],
|
||||
light: purple[900],
|
||||
dark: gray[350],
|
||||
light: charcoal[250],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-title`, {
|
||||
|
|
@ -628,18 +629,18 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${ct}card-light-title`, {
|
||||
dark: gray[500],
|
||||
light: purple[900],
|
||||
dark: gray[800],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-inset-bg`, {
|
||||
dark: charcoal[900],
|
||||
light: dustypurple[200],
|
||||
dark: black,
|
||||
light: white,
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-hover-inset-bg`, {
|
||||
dark: charcoal[700],
|
||||
light: dustypurple[300],
|
||||
dark: black,
|
||||
light: white,
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}bg`, {
|
||||
|
|
@ -648,8 +649,8 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${ct}card-icon`, {
|
||||
dark: gray[400],
|
||||
light: purple[900],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}divider`, {
|
||||
|
|
@ -663,8 +664,8 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${ct}card-carousel-card-hover-bg`, {
|
||||
dark: charcoal[500],
|
||||
light: gray[200],
|
||||
dark: charcoal[600],
|
||||
light: gray[100],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-carousel-card-header-text`, {
|
||||
|
|
@ -678,12 +679,12 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${ct}card-carousel-nav`, {
|
||||
dark: gray[500],
|
||||
dark: gray[800],
|
||||
light: gray[300],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}card-carousel-hover-nav`, {
|
||||
dark: gray[400],
|
||||
dark: gray[600],
|
||||
light: gray[500],
|
||||
});
|
||||
|
||||
|
|
@ -698,8 +699,8 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${ct}card-border-selected`, {
|
||||
dark: dustypurple[700],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ct}table-border`, {
|
||||
|
|
@ -733,19 +734,19 @@ export class ColorRegistry {
|
|||
light: charcoal[900],
|
||||
});
|
||||
this.registerColor(`${sNav}error-text`, {
|
||||
dark: red[500],
|
||||
light: red[500],
|
||||
dark: red[550],
|
||||
light: red[550],
|
||||
});
|
||||
this.registerColor(`${sNav}disabled-text`, {
|
||||
dark: charcoal[100],
|
||||
light: gray[700],
|
||||
});
|
||||
this.registerColor(`${sNav}hover-text`, {
|
||||
dark: gray[400],
|
||||
dark: gray[700],
|
||||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${sNav}placeholder-text`, {
|
||||
dark: gray[500],
|
||||
dark: gray[700],
|
||||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${sNav}stroke`, {
|
||||
|
|
@ -753,32 +754,32 @@ export class ColorRegistry {
|
|||
light: gray[700],
|
||||
});
|
||||
this.registerColor(`${sNav}hover-stroke`, {
|
||||
dark: purple[400],
|
||||
light: purple[500],
|
||||
dark: white,
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${sNav}stroke-error`, {
|
||||
dark: red[500],
|
||||
light: red[500],
|
||||
dark: red[550],
|
||||
light: red[550],
|
||||
});
|
||||
this.registerColor(`${sNav}stroke-readonly`, {
|
||||
dark: charcoal[100],
|
||||
light: charcoal[100],
|
||||
});
|
||||
this.registerColor(`${sNav}icon`, {
|
||||
dark: gray[400],
|
||||
dark: gray[700],
|
||||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${sNav}focused-icon`, {
|
||||
dark: gray[500],
|
||||
light: purple[600],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${sNav}disabled-icon`, {
|
||||
dark: charcoal[100],
|
||||
light: gray[700],
|
||||
});
|
||||
this.registerColor(`${sNav}hover-icon`, {
|
||||
dark: gray[400],
|
||||
light: purple[600],
|
||||
dark: gray[700],
|
||||
light: accent1[500],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -787,32 +788,32 @@ export class ColorRegistry {
|
|||
const sNav = 'input-checkbox-';
|
||||
|
||||
this.registerColor(`${sNav}disabled`, {
|
||||
dark: gray[600],
|
||||
light: charcoal[200],
|
||||
dark: charcoal[350],
|
||||
light: gray[350],
|
||||
});
|
||||
this.registerColor(`${sNav}indeterminate`, {
|
||||
dark: purple[500],
|
||||
light: purple[900],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${sNav}focused-indeterminate`, {
|
||||
dark: purple[400],
|
||||
light: purple[700],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${sNav}checked`, {
|
||||
dark: purple[500],
|
||||
light: purple[900],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${sNav}focused-checked`, {
|
||||
dark: purple[400],
|
||||
light: purple[700],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${sNav}unchecked`, {
|
||||
dark: gray[400],
|
||||
light: purple[900],
|
||||
dark: gray[275],
|
||||
light: charcoal[875],
|
||||
});
|
||||
this.registerColor(`${sNav}focused-unchecked`, {
|
||||
dark: purple[400],
|
||||
light: purple[700],
|
||||
dark: gray[275],
|
||||
light: charcoal[875],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -829,12 +830,12 @@ export class ColorRegistry {
|
|||
light: gray[800],
|
||||
});
|
||||
this.registerColor(`${sNav}on-bg`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${sNav}on-focused-bg`, {
|
||||
dark: purple[400],
|
||||
light: purple[500],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${sNav}switch`, {
|
||||
dark: white,
|
||||
|
|
@ -874,7 +875,7 @@ export class ColorRegistry {
|
|||
const tab = 'table-';
|
||||
// color of columns names
|
||||
this.registerColor(`${tab}header-text`, {
|
||||
dark: gray[400],
|
||||
dark: gray[600],
|
||||
light: charcoal[200],
|
||||
});
|
||||
// color of up/down arrows when column is not the ordered one
|
||||
|
|
@ -885,7 +886,7 @@ export class ColorRegistry {
|
|||
|
||||
// color for most text in tables
|
||||
this.registerColor(`${tab}body-text`, {
|
||||
dark: gray[400],
|
||||
dark: gray[700],
|
||||
light: charcoal[100],
|
||||
});
|
||||
// color for the text in the main column of the table (generally Name)
|
||||
|
|
@ -895,8 +896,8 @@ export class ColorRegistry {
|
|||
});
|
||||
// color for the text in second line of main column, in secondary color (generally IDs)
|
||||
this.registerColor(`${tab}body-text-sub-secondary`, {
|
||||
dark: purple[400],
|
||||
light: purple[700],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
// color for highlighted text in second line of main column
|
||||
this.registerColor(`${tab}body-text-sub-highlight`, {
|
||||
|
|
@ -912,7 +913,7 @@ export class ColorRegistry {
|
|||
light: charcoal[500],
|
||||
});
|
||||
this.registerColor(`${details}empty-icon`, {
|
||||
dark: gray[400],
|
||||
dark: gray[600],
|
||||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${details}empty-header`, {
|
||||
|
|
@ -920,7 +921,7 @@ export class ColorRegistry {
|
|||
light: charcoal[500],
|
||||
});
|
||||
this.registerColor(`${details}empty-sub-header`, {
|
||||
dark: gray[400],
|
||||
dark: gray[600],
|
||||
light: charcoal[500],
|
||||
});
|
||||
this.registerColor(`${details}empty-cmdline-bg`, {
|
||||
|
|
@ -940,7 +941,7 @@ export class ColorRegistry {
|
|||
light: gray[300],
|
||||
});
|
||||
this.registerColor(`${details}card-header`, {
|
||||
dark: gray[400],
|
||||
dark: gray[700],
|
||||
light: charcoal[300],
|
||||
});
|
||||
this.registerColor(`${details}card-text`, {
|
||||
|
|
@ -952,7 +953,7 @@ export class ColorRegistry {
|
|||
protected initTab(): void {
|
||||
const tab = 'tab-';
|
||||
this.registerColor(`${tab}text`, {
|
||||
dark: gray[400],
|
||||
dark: gray[600],
|
||||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${tab}text-highlight`, {
|
||||
|
|
@ -960,12 +961,12 @@ export class ColorRegistry {
|
|||
light: charcoal[300],
|
||||
});
|
||||
this.registerColor(`${tab}highlight`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: gray[275],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${tab}hover`, {
|
||||
dark: purple[400],
|
||||
light: purple[500],
|
||||
dark: charcoal[75],
|
||||
light: gray[350],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -983,7 +984,7 @@ export class ColorRegistry {
|
|||
});
|
||||
this.registerColor(`${modal}text-hover`, {
|
||||
dark: gray[300],
|
||||
light: purple[800],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${modal}bg`, {
|
||||
dark: charcoal[800],
|
||||
|
|
@ -998,12 +999,12 @@ export class ColorRegistry {
|
|||
light: gray[100],
|
||||
});
|
||||
this.registerColor(`${modal}header-text`, {
|
||||
dark: gray[400],
|
||||
light: purple[500],
|
||||
dark: gray[150],
|
||||
light: charcoal[250],
|
||||
});
|
||||
this.registerColor(`${modal}header-divider`, {
|
||||
dark: purple[700],
|
||||
light: purple[300],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1012,15 +1013,13 @@ export class ColorRegistry {
|
|||
const link = 'link';
|
||||
|
||||
this.registerColor(`${link}`, {
|
||||
dark: purple[400],
|
||||
light: purple[700],
|
||||
dark: accent1[400],
|
||||
light: accent1[600],
|
||||
});
|
||||
this.registerColor(`${link}-hover-bg`, {
|
||||
dark: transparent,
|
||||
light: transparent,
|
||||
});
|
||||
this.registerColorDefinition(
|
||||
this.color(`${link}-hover-bg`)
|
||||
.withLight(colorPaletteHelper(black).withAlpha(0.13))
|
||||
.withDark(colorPaletteHelper(white).withAlpha(0.13))
|
||||
.build(),
|
||||
);
|
||||
}
|
||||
|
||||
// button
|
||||
|
|
@ -1028,20 +1027,20 @@ export class ColorRegistry {
|
|||
const button = 'button-';
|
||||
|
||||
this.registerColor(`${button}primary-bg`, {
|
||||
dark: purple[600],
|
||||
light: purple[600],
|
||||
dark: accent1[500],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${button}primary-hover-bg`, {
|
||||
dark: purple[500],
|
||||
light: purple[500],
|
||||
dark: accent1[500],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${button}secondary`, {
|
||||
dark: gray[200],
|
||||
light: purple[600],
|
||||
light: accent1[600],
|
||||
});
|
||||
this.registerColor(`${button}secondary-hover`, {
|
||||
dark: purple[500],
|
||||
light: purple[500],
|
||||
dark: accent1[500],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${button}text`, {
|
||||
dark: white,
|
||||
|
|
@ -1056,24 +1055,24 @@ export class ColorRegistry {
|
|||
light: gray[900],
|
||||
});
|
||||
this.registerColor(`${button}danger-border`, {
|
||||
dark: red[500],
|
||||
light: red[700],
|
||||
dark: red[550],
|
||||
light: red[950],
|
||||
});
|
||||
this.registerColor(`${button}danger-bg`, {
|
||||
dark: transparent,
|
||||
light: transparent,
|
||||
});
|
||||
this.registerColor(`${button}danger-text`, {
|
||||
dark: red[500],
|
||||
light: red[700],
|
||||
dark: red[550],
|
||||
light: red[950],
|
||||
});
|
||||
this.registerColor(`${button}danger-hover-text`, {
|
||||
dark: white,
|
||||
light: white,
|
||||
});
|
||||
this.registerColor(`${button}danger-hover-bg`, {
|
||||
dark: red[600],
|
||||
light: red[600],
|
||||
dark: red[750],
|
||||
light: red[750],
|
||||
});
|
||||
this.registerColor(`${button}danger-disabled-border`, {
|
||||
dark: charcoal[50],
|
||||
|
|
@ -1092,37 +1091,33 @@ export class ColorRegistry {
|
|||
light: transparent,
|
||||
});
|
||||
this.registerColor(`${button}tab-border-selected`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: gray[275],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${button}tab-hover-border`, {
|
||||
dark: charcoal[100],
|
||||
light: gray[600],
|
||||
light: gray[350],
|
||||
});
|
||||
this.registerColor(`${button}tab-text`, {
|
||||
dark: gray[400],
|
||||
dark: gray[600],
|
||||
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.registerColor(`${button}close-hover-bg`, {
|
||||
dark: transparent,
|
||||
light: transparent,
|
||||
});
|
||||
this.registerColor(`${button}link-text`, {
|
||||
dark: accent1[300],
|
||||
light: accent1[600],
|
||||
});
|
||||
this.registerColor(`${button}link-hover-bg`, {
|
||||
dark: transparent,
|
||||
light: transparent,
|
||||
});
|
||||
this.registerColorDefinition(
|
||||
this.color(`${button}link-hover-bg`)
|
||||
.withLight(colorPaletteHelper(black).withAlpha(0.13))
|
||||
.withDark(colorPaletteHelper(white).withAlpha(0.13))
|
||||
.build(),
|
||||
);
|
||||
this.registerColor(`${button}help-link-text`, {
|
||||
dark: gray[100],
|
||||
light: charcoal[900],
|
||||
|
|
@ -1141,25 +1136,25 @@ export class ColorRegistry {
|
|||
light: gray[400],
|
||||
});
|
||||
this.registerColor(`${ab}hover-bg`, {
|
||||
dark: charcoal[600],
|
||||
light: gray[50],
|
||||
dark: transparent,
|
||||
light: transparent,
|
||||
});
|
||||
this.registerColor(`${ab}hover-text`, {
|
||||
dark: purple[600],
|
||||
light: purple[500],
|
||||
dark: gray[400],
|
||||
light: charcoal[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ab}primary-text`, {
|
||||
dark: purple[600],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${ab}primary-hover-text`, {
|
||||
dark: purple[500],
|
||||
light: purple[500],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${ab}disabled-text`, {
|
||||
dark: gray[700],
|
||||
dark: gray[900],
|
||||
light: gray[900],
|
||||
});
|
||||
|
||||
|
|
@ -1172,12 +1167,12 @@ export class ColorRegistry {
|
|||
light: gray[50],
|
||||
});
|
||||
this.registerColor(`${ab}details-hover-text`, {
|
||||
dark: purple[600],
|
||||
light: purple[500],
|
||||
dark: gray[400],
|
||||
light: charcoal[900],
|
||||
});
|
||||
|
||||
this.registerColor(`${ab}details-disabled-text`, {
|
||||
dark: gray[700],
|
||||
dark: gray[900],
|
||||
light: gray[900],
|
||||
});
|
||||
this.registerColor(`${ab}details-disabled-bg`, {
|
||||
|
|
@ -1186,8 +1181,8 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${ab}spinner`, {
|
||||
dark: purple[500],
|
||||
light: purple[500],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1243,12 +1238,12 @@ export class ColorRegistry {
|
|||
light: gray[300],
|
||||
});
|
||||
this.registerColor(`${dropdown}ring`, {
|
||||
dark: purple[900],
|
||||
light: gray[500],
|
||||
dark: accent1[800],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${dropdown}hover-ring`, {
|
||||
dark: purple[700],
|
||||
light: purple[300],
|
||||
dark: accent1[700],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${dropdown}divider`, {
|
||||
dark: charcoal[600],
|
||||
|
|
@ -1260,16 +1255,16 @@ export class ColorRegistry {
|
|||
light: charcoal[600],
|
||||
});
|
||||
this.registerColor(`${dropdown}item-hover-bg`, {
|
||||
dark: black,
|
||||
light: gray[300],
|
||||
dark: accent1[900],
|
||||
light: accent1[50],
|
||||
});
|
||||
this.registerColor(`${dropdown}item-hover-text`, {
|
||||
dark: purple[500],
|
||||
light: purple[500],
|
||||
dark: gray[400],
|
||||
light: charcoal[250],
|
||||
});
|
||||
|
||||
this.registerColor(`${dropdown}disabled-item-text`, {
|
||||
dark: gray[700],
|
||||
dark: gray[900],
|
||||
light: charcoal[100],
|
||||
});
|
||||
this.registerColor(`${dropdown}disabled-item-bg`, {
|
||||
|
|
@ -1278,17 +1273,21 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${modal}${dropdown}highlight`, {
|
||||
dark: purple[600],
|
||||
light: purple[300],
|
||||
dark: accent1[900],
|
||||
light: accent1[50],
|
||||
});
|
||||
this.registerColor(`${modal}${dropdown}text`, {
|
||||
dark: white,
|
||||
light: charcoal[900],
|
||||
});
|
||||
this.registerColor(`${input}${select}hover-text`, {
|
||||
dark: gray[400],
|
||||
dark: gray[900],
|
||||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${dropdown}border`, {
|
||||
dark: transparent,
|
||||
light: accent1[500],
|
||||
});
|
||||
}
|
||||
|
||||
// labels
|
||||
|
|
@ -1297,20 +1296,20 @@ export class ColorRegistry {
|
|||
|
||||
this.registerColor(`${label}bg`, {
|
||||
dark: charcoal[500],
|
||||
light: purple[200],
|
||||
light: gray[250],
|
||||
});
|
||||
this.registerColor(`${label}text`, {
|
||||
dark: gray[400],
|
||||
dark: gray[450],
|
||||
light: charcoal[300],
|
||||
});
|
||||
|
||||
this.registerColor(`${label}primary-bg`, {
|
||||
dark: purple[700],
|
||||
light: purple[300],
|
||||
dark: accent1[900],
|
||||
light: accent1[200],
|
||||
});
|
||||
this.registerColor(`${label}primary-text`, {
|
||||
dark: purple[300],
|
||||
light: purple[700],
|
||||
dark: accent1[200],
|
||||
light: accent1[800],
|
||||
});
|
||||
|
||||
this.registerColor(`${label}secondary-bg`, {
|
||||
|
|
@ -1346,13 +1345,13 @@ export class ColorRegistry {
|
|||
|
||||
// Podman & Kubernetes
|
||||
this.registerColor(`${status}running`, {
|
||||
dark: green[500],
|
||||
light: green[600],
|
||||
dark: green[350],
|
||||
light: green[550],
|
||||
});
|
||||
// Kubernetes only
|
||||
this.registerColor(`${status}terminated`, {
|
||||
dark: red[500],
|
||||
light: red[700],
|
||||
dark: red[550],
|
||||
light: red[950],
|
||||
});
|
||||
this.registerColor(`${status}waiting`, {
|
||||
dark: amber[600],
|
||||
|
|
@ -1360,8 +1359,8 @@ export class ColorRegistry {
|
|||
});
|
||||
// Podman only
|
||||
this.registerColor(`${status}starting`, {
|
||||
dark: green[500],
|
||||
light: green[600],
|
||||
dark: green[350],
|
||||
light: green[550],
|
||||
});
|
||||
// Stopped & Exited are the same color / same thing in the eyes of statuses
|
||||
this.registerColor(`${status}stopped`, {
|
||||
|
|
@ -1373,7 +1372,7 @@ export class ColorRegistry {
|
|||
light: charcoal[200],
|
||||
});
|
||||
this.registerColor(`${status}not-running`, {
|
||||
dark: gray[500],
|
||||
dark: gray[700],
|
||||
light: gray[900],
|
||||
});
|
||||
// "Warning"
|
||||
|
|
@ -1387,12 +1386,12 @@ export class ColorRegistry {
|
|||
});
|
||||
// Others
|
||||
this.registerColor(`${status}created`, {
|
||||
dark: green[300],
|
||||
light: green[300],
|
||||
dark: green[250],
|
||||
light: green[250],
|
||||
});
|
||||
this.registerColor(`${status}dead`, {
|
||||
dark: red[500],
|
||||
light: red[700],
|
||||
dark: red[550],
|
||||
light: red[950],
|
||||
});
|
||||
// If we don't know the status, use gray
|
||||
this.registerColor(`${status}unknown`, {
|
||||
|
|
@ -1401,8 +1400,8 @@ export class ColorRegistry {
|
|||
});
|
||||
// Connections / login
|
||||
this.registerColor(`${status}connected`, {
|
||||
dark: green[600],
|
||||
light: green[600],
|
||||
dark: green[450],
|
||||
light: green[550],
|
||||
});
|
||||
this.registerColor(`${status}disconnected`, {
|
||||
dark: gray[500],
|
||||
|
|
@ -1430,13 +1429,13 @@ export class ColorRegistry {
|
|||
protected initStatusBar(): void {
|
||||
const statusbar = 'statusbar-';
|
||||
this.registerColor(`${statusbar}bg`, {
|
||||
dark: purple[900],
|
||||
light: purple[900],
|
||||
dark: black,
|
||||
light: black,
|
||||
});
|
||||
|
||||
this.registerColor(`${statusbar}hover-bg`, {
|
||||
dark: purple[800],
|
||||
light: purple[800],
|
||||
dark: accent1[500],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${statusbar}text`, {
|
||||
|
|
@ -1448,13 +1447,13 @@ export class ColorRegistry {
|
|||
protected initOnboarding(): void {
|
||||
const onboarding = 'onboarding-';
|
||||
this.registerColor(`${onboarding}active-dot-bg`, {
|
||||
dark: purple[700],
|
||||
light: purple[700],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${onboarding}active-dot-border`, {
|
||||
dark: purple[700],
|
||||
light: purple[700],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
this.registerColor(`${onboarding}inactive-dot-bg`, {
|
||||
|
|
@ -1463,7 +1462,7 @@ export class ColorRegistry {
|
|||
});
|
||||
|
||||
this.registerColor(`${onboarding}inactive-dot-border`, {
|
||||
dark: gray[500],
|
||||
dark: gray[700],
|
||||
light: gray[700],
|
||||
});
|
||||
}
|
||||
|
|
@ -1474,20 +1473,20 @@ export class ColorRegistry {
|
|||
|
||||
// general error and warning states
|
||||
this.registerColor(`${state}success`, {
|
||||
dark: green[500],
|
||||
light: green[600],
|
||||
dark: green[350],
|
||||
light: green[550],
|
||||
});
|
||||
this.registerColor(`${state}warning`, {
|
||||
dark: amber[500],
|
||||
light: amber[600],
|
||||
});
|
||||
this.registerColor(`${state}error`, {
|
||||
dark: red[500],
|
||||
light: red[600],
|
||||
dark: red[550],
|
||||
light: red[750],
|
||||
});
|
||||
this.registerColor(`${state}info`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
|
||||
// additional severity levels
|
||||
|
|
@ -1625,12 +1624,12 @@ export class ColorRegistry {
|
|||
light: gray[700],
|
||||
});
|
||||
this.registerColor(`${pb}in-progress-bg`, {
|
||||
dark: purple[600],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${pb}text`, {
|
||||
dark: purple[500],
|
||||
light: purple[600],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1661,8 +1660,8 @@ export class ColorRegistry {
|
|||
light: sky[500],
|
||||
});
|
||||
this.registerColor(`${badge}purple`, {
|
||||
dark: purple[500],
|
||||
light: purple[500],
|
||||
dark: accent1[400],
|
||||
light: accent1[500],
|
||||
});
|
||||
this.registerColor(`${badge}fuchsia`, {
|
||||
dark: fuchsia[600],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,30 @@
|
|||
{
|
||||
"accent1": {
|
||||
"50": "#e0deea",
|
||||
"100": "#d8d5ea",
|
||||
"200": "#c9c3ec",
|
||||
"300": "#b2a4f0",
|
||||
"400": "#907cee",
|
||||
"500": "#8e51ff",
|
||||
"600": "#7e08ff",
|
||||
"700": "#7000ed",
|
||||
"800": "#5d00c5",
|
||||
"900": "#4b0e9f",
|
||||
"950": "#30066a"
|
||||
},
|
||||
"accent2": {
|
||||
"50": "#eee8f7",
|
||||
"100": "#e9ddf7",
|
||||
"200": "#dfc8fb",
|
||||
"300": "#cfa1ff",
|
||||
"400": "#bb6bff",
|
||||
"500": "#ad46ff",
|
||||
"600": "#a100ff",
|
||||
"700": "#9000e8",
|
||||
"800": "#7800c1",
|
||||
"900": "#61009c",
|
||||
"950": "#3f0068"
|
||||
},
|
||||
"amber": {
|
||||
"50": "#fffbeb",
|
||||
"100": "#fef3c7",
|
||||
|
|
@ -14,16 +40,27 @@
|
|||
},
|
||||
"black": "#000",
|
||||
"charcoal": {
|
||||
"25": "#797979",
|
||||
"50": "#767676",
|
||||
"75": "#757373",
|
||||
"100": "#707073",
|
||||
"150": "#686666",
|
||||
"200": "#5c5c5c",
|
||||
"250": "#535051",
|
||||
"275": "#4d4b4d",
|
||||
"300": "#464649",
|
||||
"350": "#48484c",
|
||||
"400": "#4a4b4f",
|
||||
"450": "#404047",
|
||||
"500": "#36363d",
|
||||
"600": "#27272a",
|
||||
"700": "#222222",
|
||||
"750": "#1f1d1d",
|
||||
"800": "#18181b",
|
||||
"900": "#0f0f11"
|
||||
"850": "#131316",
|
||||
"875": "#111114",
|
||||
"900": "#0f0f11",
|
||||
"950": "#0b0b0c"
|
||||
},
|
||||
"dustypurple": {
|
||||
"50": "#f2f2fb",
|
||||
|
|
@ -52,23 +89,37 @@
|
|||
"gray": {
|
||||
"25": "#fefefe",
|
||||
"50": "#f9fafb",
|
||||
"75": "#f7f8f8",
|
||||
"100": "#f6f6f6",
|
||||
"150": "#f2f2f2",
|
||||
"200": "#efefef",
|
||||
"250": "#e9e9e9",
|
||||
"275": "#e7e7e7",
|
||||
"300": "#e4e4e4",
|
||||
"350": "#dadada",
|
||||
"400": "#d1d1d1",
|
||||
"450": "#cccccc",
|
||||
"500": "#c8c8c8",
|
||||
"600": "#b4b4b4",
|
||||
"700": "#aaabac",
|
||||
"750": "#a2a3a2",
|
||||
"800": "#9a9a9a",
|
||||
"900": "#818181"
|
||||
"850": "#8d8d8d",
|
||||
"875": "#878787",
|
||||
"900": "#818181",
|
||||
"950": "#757575"
|
||||
},
|
||||
"green": {
|
||||
"50": "#f0f9f0",
|
||||
"100": "#ddefdc",
|
||||
"200": "#bbdfbb",
|
||||
"250": "#afdc8f",
|
||||
"300": "#8ec792",
|
||||
"350": "#87bb62",
|
||||
"400": "#64ad6c",
|
||||
"450": "#63993d",
|
||||
"500": "#3c8d47",
|
||||
"550": "#3d7317",
|
||||
"600": "#2b7037",
|
||||
"700": "#225a2d",
|
||||
"800": "#1d4825",
|
||||
|
|
@ -91,12 +142,16 @@
|
|||
"100": "#ffe7e1",
|
||||
"200": "#ffd1c7",
|
||||
"300": "#ffb3a1",
|
||||
"350": "#f5a88d",
|
||||
"400": "#ff866a",
|
||||
"500": "#f86847",
|
||||
"550": "#f0561d",
|
||||
"600": "#e5421d",
|
||||
"700": "#c13414",
|
||||
"750": "#b1380b",
|
||||
"800": "#9f2f15",
|
||||
"900": "#842c18"
|
||||
"900": "#842c18",
|
||||
"950": "#731f00"
|
||||
},
|
||||
"sky": {
|
||||
"50": "#f2f8fd",
|
||||
|
|
|
|||
Loading…
Reference in a new issue