Elgato_dark/podman-desktop
1
0
Fork 0
mirror of https://github.com/podman-desktop/podman-desktop synced 2026-04-21 17:47:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

chore: improvements to light mode (#8251)

Browse source
This commit is contained in:
Tim deBoer 2024-07-26 18:12:42 -04:00 committed by GitHub
parent 20a46739fd
commit 596e1c9d0c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
packages/main/src/plugin/color-registry.ts
View file

@ -295,7 +295,7 @@ export class ColorRegistry {
});
this.registerColor(`${glNav}icon-inset-bg`, {
dark: colorPalette.charcoal[800],
light: colorPalette.dustypurple[200],
light: colorPalette.gray[300],
});
this.registerColor(`${glNav}icon-selected`, {
dark: colorPalette.white,
@ -303,7 +303,7 @@ export class ColorRegistry {
});
this.registerColor(`${glNav}icon-selected-bg`, {
dark: colorPalette.charcoal[500],
light: colorPalette.purple[300],
light: colorPalette.gray[300],
});
this.registerColor(`${glNav}icon-selected-highlight`, {
dark: colorPalette.purple[500],
@ -334,7 +334,7 @@ export class ColorRegistry {
this.registerColor(`${sNav}bg`, {
dark: colorPalette.charcoal[700],
light: colorPalette.dustypurple[100],
light: colorPalette.gray[100],
});
this.registerColor(`${sNav}header-text`, {
@ -359,12 +359,12 @@ export class ColorRegistry {
this.registerColor(`${sNav}text-selected`, {
dark: colorPalette.white,
light: colorPalette.purple[800],
light: colorPalette.black,
});
this.registerColor(`${sNav}selected-bg`, {
dark: colorPalette.charcoal[500],
light: colorPalette.purple[300],
light: colorPalette.gray[300],
});
this.registerColor(`${sNav}selected-highlight`, {
@ -399,7 +399,7 @@ export class ColorRegistry {
const invCt = 'invert-content-';
this.registerColor(`${invCt}bg`, {
dark: colorPalette.charcoal[800],
light: colorPalette.gray[50],
light: colorPalette.gray[25],
});
this.registerColor(`${invCt}header-text`, {
@ -414,7 +414,7 @@ export class ColorRegistry {
this.registerColor(`${invCt}card-bg`, {
dark: colorPalette.charcoal[600],
light: colorPalette.gray[300],
light: colorPalette.gray[100],
});
this.registerColor(`${invCt}card-header-text`, {
@ -482,12 +482,12 @@ export class ColorRegistry {
this.registerColor(`${ct}card-bg`, {
dark: colorPalette.charcoal[800],
light: colorPalette.gray[50],
light: colorPalette.gray[25],
});
this.registerColor(`${ct}card-hover-bg`, {
dark: colorPalette.charcoal[500],
light: colorPalette.purple[200],
light: colorPalette.gray[300],
});
this.registerColor(`${ct}card-selected-bg`, {
@ -522,7 +522,7 @@ export class ColorRegistry {
this.registerColor(`${ct}bg`, {
dark: colorPalette.charcoal[700],
light: colorPalette.gray[300],
light: colorPalette.gray[100],
});
this.registerColor(`${ct}card-icon`, {
@ -537,12 +537,12 @@ export class ColorRegistry {
this.registerColor(`${ct}card-carousel-card-bg`, {
dark: colorPalette.charcoal[600],
light: colorPalette.gray[300],
light: colorPalette.gray[200],
});
this.registerColor(`${ct}card-carousel-card-hover-bg`, {
dark: colorPalette.charcoal[500],
light: colorPalette.gray[200],
light: colorPalette.gray[100],
});
this.registerColor(`${ct}card-carousel-card-header-text`, {
@ -557,12 +557,12 @@ export class ColorRegistry {
this.registerColor(`${ct}card-carousel-nav`, {
dark: colorPalette.gray[800],
light: colorPalette.gray[400],
light: colorPalette.gray[300],
});
this.registerColor(`${ct}card-carousel-hover-nav`, {
dark: colorPalette.gray[600],
light: colorPalette.gray[600],
light: colorPalette.gray[500],
});
this.registerColor(`${ct}card-carousel-disabled-nav`, {

3
packages/renderer/src/PreferencesNavigation.svelte
View file

@ -45,7 +45,8 @@ onMount(async () => {
aria-label="PreferencesNavigation">
<div class="flex items-center">
<div class="pt-4 px-3 mb-10">
<p class="text-2xl font-bold text-[color:var(--pd-secondary-nav-header-text)] border-l-[4px] border-transparent">
<p
class="text-2xl font-semibold text-[color:var(--pd-secondary-nav-header-text)] border-l-[4px] border-transparent">
Settings
</p>
</div>

2
packages/renderer/src/lib/preferences/PreferencesRendering.svelte
View file

@ -77,7 +77,7 @@ function updateSearchValue(event: any) {
{@const records = matchingRecords.get(configSection)}
{#if records}
<div>
<div class="text-lg font-semibold first-letter:uppercase">{records.at(0)?.title}</div>
<div class="text-lg font-medium first-letter:uppercase">{records.at(0)?.title}</div>
{#each records as configItem}
<div class="bg-[var(--pd-invert-content-card-bg)] rounded-md mt-2 ml-2">
<PreferencesRenderingItem record={configItem} />

7
packages/ui/src/lib/settingsNavItem/SettingsNavItem.svelte
View file

@ -36,18 +36,17 @@ function click(): void {
<a class="no-underline" href={href} aria-label={title} on:click={click}>
<div
class="flex w-full pr-1 py-2 justify-between items-center cursor-pointer border-l-[4px]"
class:text-white={selected}
class:pl-3={!child}
class:pl-6={child}
class:leading-none={child}
class:text-lg={!child}
class:font-semibold={!child}
class:font-medium={!child}
class:bg-[var(--pd-secondary-nav-selected-bg)]={selected}
class:border-[var(--pd-secondary-nav-bg)]={!selected}
class:border-[var(--pd-secondary-nav-selected-highlight)]={selected}
class:text-[color:var(--pd-secondary-nav-text-selected)]={selected}
class:text-[color:var(--pd-secondary-nav-text)]={!selected}
class:hover:[color:var(--pd-secondary-nav-text-hover)]={!selected}
class:hover:text-[color:var(--pd-secondary-nav-text-hover)]={!selected}
class:hover:bg-[var(--pd-secondary-nav-text-hover-bg)]={!selected}
class:hover:border-[var(--pd-secondary-nav-text-hover-bg)]={!selected}>
<span class="group-hover:block flex flex-row items-center" class:capitalize={!child}>
@ -57,7 +56,7 @@ function click(): void {
{title}
</span>
{#if section}
<div class="px-2 relative w-4 h-4 [color:var(--pd-secondary-nav-expander)]">
<div class="px-2 relative w-4 h-4 text-[color:var(--pd-secondary-nav-expander)]">
{#if expanded}
<i
class="fas fa-angle-down text-lg absolute left-0 top-0"

1
tailwind-color-palette.json
View file

@ -50,6 +50,7 @@
"900": "#710689"
},
"gray": {
"25": "#fefefe",
"50": "#f9fafb",
"100": "#f6f6f6",
"200": "#efefef",