refactor: light mode for components in dashboard

Signed-off-by: Philippe Martin <[email protected]>

packages/main/src/plugin/color-registry.ts

@@ -451,6 +451,16 @@ export class ColorRegistry {
  light: colorPalette.purple[900],
  });
 
+ this.registerColor(`${ct}card-title`, {
+ dark: colorPalette.gray[400],
+ light: colorPalette.charcoal[900],
+ });
+
+ this.registerColor(`${ct}card-light-title`, {
+ dark: colorPalette.gray[800],
+ light: colorPalette.purple[900],
+ });
+
  this.registerColor(`${ct}card-inset-bg`, {
  dark: colorPalette.charcoal[900],
  light: colorPalette.dustypurple[200],
@@ -470,6 +480,41 @@ export class ColorRegistry {
  dark: colorPalette.charcoal[400],
  light: colorPalette.gray[700],
  });
+
+ this.registerColor(`${ct}card-carousel-card-bg`, {
+ dark: colorPalette.charcoal[600],
+ light: colorPalette.gray[300],
+ });
+
+ this.registerColor(`${ct}card-carousel-card-hover-bg`, {
+ dark: colorPalette.charcoal[500],
+ light: colorPalette.gray[200],
+ });
+
+ this.registerColor(`${ct}card-carousel-card-header-text`, {
+ dark: colorPalette.gray[100],
+ light: colorPalette.charcoal[900],
+ });
+
+ this.registerColor(`${ct}card-carousel-card-text`, {
+ dark: colorPalette.gray[400],
+ light: colorPalette.purple[900],
+ });
+
+ this.registerColor(`${ct}card-carousel-nav`, {
+ dark: colorPalette.gray[800],
+ light: colorPalette.gray[400],
+ });
+
+ this.registerColor(`${ct}card-carousel-hover-nav`, {
+ dark: colorPalette.gray[600],
+ light: colorPalette.gray[600],
+ });
+
+ this.registerColor(`${ct}card-carousel-disabled-nav`, {
+ dark: colorPalette.charcoal[700],
+ light: colorPalette.gray[200],
+ });
  }
 
  // input boxes

packages/renderer/src/lib/carousel/Carousel.svelte

@@ -49,7 +49,7 @@ function rotateRight() {
  id="left"
  on:click="{rotateLeft}"
  aria-label="Rotate left"
- class="h-8 w-8 mr-3 bg-gray-800 hover:bg-gray-600 rounded-full disabled:bg-charcoal-700"
+ class="h-8 w-8 mr-3 bg-[var(--pd-content-card-carousel-nav)] hover:bg-[var(--pd-content-card-carousel-hover-nav)] rounded-full disabled:bg-[var(--pd-content-card-carousel-disabled-nav)]"
  disabled="{visibleCards.length === cards.length}">
  <Fa class="w-8 h-8" icon="{faChevronLeft}" color="black" />
  </button>
@@ -64,7 +64,7 @@ function rotateRight() {
  id="right"
  on:click="{rotateRight}"
  aria-label="Rotate right"
- class="h-8 w-8 ml-3 bg-gray-800 hover:bg-gray-600 rounded-full disabled:bg-charcoal-700"
+ class="h-8 w-8 ml-3 bg-[var(--pd-content-card-carousel-nav)] hover:bg-[var(--pd-content-card-carousel-hover-nav)] rounded-full disabled:bg-[var(--pd-content-card-carousel-disabled-nav)]"
  disabled="{visibleCards.length === cards.length}">
  <Fa class="h-8 w-8" icon="{faChevronRight}" color="black" />
  </button>

packages/renderer/src/lib/dashboard/DashboardPage.svelte

@@ -37,7 +37,7 @@ function getInitializationContext(id: string): InitializationContext {
 </script>
 
 <NavPage searchEnabled="{false}" title="Dashboard">
- <div slot="content" class="flex flex-col min-w-full h-full bg-charcoal-700 shadow-nav py-5">
+ <div slot="content" class="flex flex-col min-w-full h-full bg-[var(--pd-content-bg)] shadow-nav py-5">
  <div class="min-w-full flex-1">
  <NotificationsBox />
  <div class="px-5 space-y-5 h-full">

packages/renderer/src/lib/dashboard/ProviderCard.svelte

@@ -9,17 +9,19 @@ export let provider: ProviderInfo;
 </script>
 
 <div
- class="flex bg-charcoal-800 rounded-md p-5 gap-3 flex-col flex-nowrap"
+ class="flex bg-[var(--pd-content-card-bg)] rounded-md p-5 gap-3 flex-col flex-nowrap"
  role="region"
  aria-label="{provider.name} Provider">
  <div class="flex flex-col lg:flex-row gap-x-4">
  <div class="grid grid-cols-[3rem_1fr] w-1/4 gap-2">
  <IconImage image="{provider?.images?.icon}" class="mx-0 max-h-12" alt="{provider.name}"></IconImage>
- <div class="flex flex-col gap-0 text-gray-400 text-lg whitespace-nowrap" aria-label="context-name">
+ <div
+ class="flex flex-col gap-0 text-[var(--pd-content-card-title)] text-lg whitespace-nowrap"
+ aria-label="context-name">
  <div class="flex flex-row gap-1 items-center">
  {provider.name}
  {#if provider.version}
- <div class="text-gray-800 text-base" aria-label="Provider Version">
+ <div class="text-[var(--pd-content-card-light-title)] text-base" aria-label="Provider Version">
  v{provider.version}
  </div>
  {/if}

packages/renderer/src/lib/learning-center/GuideCard.svelte

@@ -16,15 +16,15 @@ async function openGuide(guide: Guide): Promise<void> {
 </script>
 
 <div
- class="flex flex-col flex-1 bg-charcoal-600 pb-4 rounded-lg hover:bg-zinc-700 min-w-[{width}px] min-h-[{height}px]">
+ class="flex flex-col flex-1 bg-[var(--pd-content-card-carousel-card-bg)] pb-4 rounded-lg hover:bg-[var(--pd-content-card-carousel-card-hover-bg)] min-w-[{width}px] min-h-[{height}px]">
  <div class="pt-4 flex flex-col">
  <div class="px-4">
  <img src="{`data:image/png;base64,${guide.icon}`}" class="h-[48px]" alt="{guide.id}" />
  </div>
- <div class="px-4 pt-4 text-nowrap text-base text-gray-100 font-semibold">
+ <div class="px-4 pt-4 text-nowrap text-base text-[var(--pd-content-card-carousel-card-header-text)] font-semibold">
  {guide.title}
  </div>
- <p class="line-clamp-4 px-4 pt-4 text-sm text-gray-400">{guide.description}</p>
+ <p class="line-clamp-4 px-4 pt-4 text-sm text-[var(--pd-content-card-carousel-card-text)]">{guide.description}</p>
  </div>
  <div class="flex justify-center items-end flex-1 pt-4">
  <Button class="justify-self-center self-end" on:click="{() => openGuide(guide)}" title="Get started"

packages/renderer/src/lib/learning-center/LearningCenter.svelte

@@ -14,7 +14,7 @@ onMount(async () => {
 });
 </script>
 
-<div class="flex flex-1 flex-col bg-charcoal-800 p-5 rounded-lg">
+<div class="flex flex-1 flex-col bg-[var(--pd-content-card-bg)] p-5 rounded-lg">
  <div>
  <button on:click="{() => (expanded = !expanded)}" class="">
  <div class="flex flex-row space-x-2 items-center">
@@ -23,7 +23,7 @@ onMount(async () => {
  {:else}
  <i class="fas fa-chevron-right"></i>
  {/if}
- <p class="text-lg text-gray-100 font-semibold">Learning Center</p>
+ <p class="text-lg text-[var(--pd-content-card-header-text)] font-semibold">Learning Center</p>
  </div>
  </button>
  </div>