refactor: light mode for models page (#1252)

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

packages/frontend/src/lib/Badge.spec.ts

@@ -27,14 +27,14 @@ test('print Badge with custom text and default background', async () => {
 
   const badgeContent = screen.getByText('custom-text');
   expect(badgeContent).toBeInTheDocument();
-  expect(badgeContent).toHaveClass('bg-charcoal-600');
+  expect(badgeContent).toHaveClass('bg-[var(--pd-label-bg)]');
 });
 
 test('print Badge with custom text and custom background', async () => {
-  render(Badge, { icon: faTrash, content: 'custom-text', background: 'bg-charcoal-100' });
+  render(Badge, { icon: faTrash, content: 'custom-text', background: 'bg-[var(--pd-label-text)]' });
 
   const badgeContent = screen.getByText('custom-text');
   expect(badgeContent).toBeInTheDocument();
-  expect(badgeContent).toHaveClass('bg-charcoal-100');
-  expect(badgeContent).not.toHaveClass('bg-charcoal-600');
+  expect(badgeContent).toHaveClass('bg-[var(--pd-label-text)]');
+  expect(badgeContent).not.toHaveClass('bg-[var(--pd-label-bg)]');
 });

packages/frontend/src/lib/Badge.svelte

@@ -4,11 +4,11 @@ import Fa from 'svelte-fa';
 
 export let icon: IconDefinition;
 export let content: string;
-export let background: string = 'bg-charcoal-600';
+export let background: string = 'bg-[var(--pd-label-bg)]';
 </script>
 
 <div
-  class="{background} rounded-md px-2 py-1 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
+  class="{background} rounded-md px-2 py-1 flex flex-row w-min h-min text-xs text-[var(--pd-label-text)] text-nowrap items-center">
   {#if icon}
     <Fa class="mr-2" icon="{icon}" />
   {/if}

packages/frontend/src/lib/icons/ModelWhite.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 export let solid: boolean = false;
+const fg = solid ? 'white' : '#888';
 </script>
 
 <div role="img" class="rounded py-[6px] pl-[7px] pr-[5px]" class:bg-green-400="{solid}">
@@ -8,15 +9,15 @@ export let solid: boolean = false;
       <g clip-path="url(#clip1_47_118)">
         <path
           d="M14.9984 7.94844C14.9703 7.13751 14.2922 6.50001 13.4813 6.50001H13.2891C13.2641 6.50001 13.2406 6.49063 13.2234 6.47188L9.23126 2.48594C9.20001 2.45469 9.19689 2.40626 9.22188 2.37032C9.39688 2.12501 9.50001 1.82501 9.50001 1.50001C9.50001 0.676569 8.82501 6.10354e-06 8.00157 -0.0015564C7.37188 -0.0015564 6.83126 0.385944 6.60939 0.935944C6.59532 0.968756 6.56407 0.992194 6.52657 0.992194H2.97345C2.93751 0.992194 2.9047 0.970319 2.89063 0.935944C2.66876 0.387506 2.12813 6.10354e-06 1.49688 6.10354e-06C0.682822 6.10354e-06 0.0109465 0.664069 8.99853e-06 1.47813C-0.0109285 2.31563 0.664072 3.00001 1.50001 3.00001C2.00001 3.00001 1.94063 2.95001 2.13282 2.86094C2.1672 2.84532 2.20626 2.85157 2.23282 2.87813L3.75938 4.40469C3.79376 4.43907 3.79376 4.49532 3.75938 4.52969L1.79688 6.49219C1.77657 6.51251 1.75001 6.52188 1.72188 6.51719C1.6422 6.50469 1.56095 6.50001 1.47813 6.50157C0.670321 6.51094 0.0109465 7.17188 8.99853e-06 7.97969C-0.0109285 8.81719 0.664072 9.50001 1.50001 9.50001C2.33595 9.50001 1.6547 9.49376 1.7297 9.48282C1.75938 9.47813 1.78907 9.48907 1.81095 9.50938L3.68907 11.4375C3.72345 11.4719 3.72345 11.5266 3.68907 11.5609L2.18595 13.1C2.16095 13.1266 2.12188 13.1344 2.08751 13.1188C1.89688 13.0375 1.68438 12.9938 1.46251 13C0.660946 13.0188 0.0109465 13.6766 8.99853e-06 14.4781C-0.0109285 15.3156 0.664072 16 1.50001 16C2.33595 16 2.67657 15.6063 2.89532 15.05C2.90938 15.0156 2.94063 14.9938 2.97813 14.9938H6.52032C6.55626 14.9938 6.58907 15.0156 6.60314 15.05C6.82189 15.6063 7.36251 16 7.99688 16C8.81407 16 9.48751 15.3391 9.50001 14.5219C9.5047 14.2031 9.40938 13.9078 9.24376 13.6625C9.22032 13.6266 9.22345 13.5797 9.2547 13.55L13.2828 9.52188C13.3031 9.50157 13.3297 9.49219 13.3578 9.49532C13.4047 9.50001 13.4516 9.50157 13.5 9.50157C14.3453 9.50157 15.0281 8.80157 14.9984 7.95001V7.94844ZM1.50001 2.00001C1.22345 2.00001 1.00001 1.77657 1.00001 1.50001C1.00001 1.22344 1.22345 1.00001 1.50001 1.00001C1.77657 1.00001 2.00001 1.22344 2.00001 1.50001C2.00001 1.77657 1.77657 2.00001 1.50001 2.00001ZM1.50001 15C1.22345 15 1.00001 14.7766 1.00001 14.5C1.00001 14.2234 1.22345 14 1.50001 14C1.77657 14 2.00001 14.2234 2.00001 14.5C2.00001 14.7766 1.77657 15 1.50001 15ZM8.00001 1.00001C8.27657 1.00001 8.50001 1.22344 8.50001 1.50001C8.50001 1.77657 8.27657 2.00001 8.00001 2.00001C7.72345 2.00001 7.50001 1.77657 7.50001 1.50001C7.50001 1.22344 7.72345 1.00001 8.00001 1.00001ZM2.91563 2.14532C2.89063 2.12032 2.88282 2.08282 2.89532 2.05001C2.90938 2.01563 2.94063 1.99219 2.97813 1.99219H6.0797C6.15938 1.99219 6.19845 2.08751 6.1422 2.14376L4.59063 3.69532C4.55626 3.72969 4.50001 3.72969 4.46563 3.69532L2.91563 2.14532ZM1.50001 8.50001C1.22345 8.50001 1.00001 8.27657 1.00001 8.00001C1.00001 7.72344 1.22345 7.50001 1.50001 7.50001C1.77657 7.50001 2.00001 7.72344 2.00001 8.00001C2.00001 8.27657 1.77657 8.50001 1.50001 8.50001ZM2.71251 6.98907L4.46563 5.23594C4.50001 5.20157 4.55626 5.20157 4.59063 5.23594L6.61876 7.26407C6.64688 7.29219 6.65313 7.33438 6.63751 7.37032C6.62657 7.39376 6.6172 7.41719 6.60626 7.44063C6.5922 7.47657 6.55782 7.50001 6.51876 7.50001H2.97657C2.94063 7.50001 2.90782 7.47813 2.89376 7.44376C2.84532 7.32188 2.78126 7.20782 2.7047 7.10469C2.67813 7.07032 2.68282 7.02032 2.71407 6.98907H2.71251ZM2.71876 9.00157C2.68751 8.97032 2.68282 8.92188 2.70938 8.88594C2.78438 8.78438 2.84532 8.67344 2.89376 8.55469C2.90782 8.52032 2.93907 8.49844 2.97657 8.49844H6.52188C6.55938 8.49844 6.59376 8.52188 6.60782 8.55626C6.61095 8.56563 6.61563 8.57501 6.61876 8.58438C6.63439 8.62032 6.62657 8.66094 6.59845 8.68751L4.56095 10.6875C4.52657 10.7219 4.47032 10.7219 4.43595 10.6875L2.7172 9.00001L2.71876 9.00157ZM6.0797 13.9922H2.97345C2.93751 13.9922 2.9047 13.9703 2.89063 13.9359C2.88595 13.925 2.88126 13.9141 2.87657 13.9031C2.86251 13.8703 2.86876 13.8313 2.89532 13.8047L4.43907 12.2609C4.47345 12.2266 4.5297 12.2266 4.56407 12.2609L6.1422 13.8391C6.19845 13.8953 6.15782 13.9906 6.0797 13.9906V13.9922ZM7.99845 14.9984C7.72188 14.9984 7.49845 14.775 7.49845 14.4984C7.49845 14.2219 7.72188 13.9984 7.99845 13.9984C8.27501 13.9984 8.49845 14.2219 8.49845 14.4984C8.49845 14.775 8.27501 14.9984 7.99845 14.9984ZM12.3234 9.06251L8.38126 13.0047C8.36095 13.025 8.3297 13.0344 8.30157 13.0297C8.20313 13.0094 8.10314 12.9984 7.99845 12.9984C7.6672 12.9984 7.36095 13.1063 7.11251 13.2875C7.07657 13.3141 7.02657 13.3109 6.99532 13.2781L5.30782 11.5594C5.27345 11.525 5.27345 11.4703 5.30782 11.4344L7.30157 9.39532C7.32813 9.36876 7.37032 9.36094 7.4047 9.37501C7.58595 9.45313 7.78595 9.49688 7.99688 9.49688C8.62813 9.49688 9.1672 9.10782 9.38907 8.55626C9.40314 8.52032 9.43751 8.49688 9.47657 8.49688H11.9969C12.0469 8.49688 12.0922 8.52657 12.1125 8.57344C12.1672 8.70469 12.2406 8.82813 12.3297 8.93751C12.3594 8.97501 12.3563 9.02813 12.3234 9.06251ZM7.49845 7.99844C7.49845 7.72188 7.72188 7.49844 7.99845 7.49844C8.27501 7.49844 8.49845 7.72188 8.49845 7.99844C8.49845 8.27501 8.27501 8.49844 7.99845 8.49844C7.72188 8.49844 7.49845 8.27501 7.49845 7.99844ZM12.4063 7.06094C12.2531 7.17657 12.1688 7.29688 12.1141 7.42188C12.0938 7.46719 12.0484 7.49844 11.9984 7.49844H9.47657C9.43751 7.49844 9.40314 7.47501 9.38907 7.43907C9.1672 6.88751 8.62813 6.49844 7.99688 6.49844C8 6.5 7.61876 6.53438 7.45001 6.60157C7.41563 6.61563 7.37501 6.60782 7.35001 6.58126L5.29688 4.52813C5.26251 4.49376 5.26251 4.43751 5.29688 4.40313L6.98751 2.71251C7.01876 2.68126 7.0672 2.67813 7.10314 2.70313C7.35314 2.88907 7.66251 3.00001 7.99845 3.00001C8.33438 3.00001 8.17188 2.99219 8.2547 2.97813C8.28282 2.97344 8.31095 2.98282 8.33126 3.00157L12.4156 6.92032C12.4578 6.96094 12.4531 7.02813 12.4063 7.06251V7.06094ZM13.4984 8.49844C13.2219 8.49844 12.9984 8.27501 12.9984 7.99844C12.9984 7.72188 13.2219 7.49844 13.4984 7.49844C13.775 7.49844 13.9984 7.72188 13.9984 7.99844C13.9984 8.27501 13.775 8.49844 13.4984 8.49844Z"
-          fill="white"></path>
+          fill="{fg}"></path>
       </g>
     </g>
     <defs>
       <clipPath id="clip0_47_118">
-        <rect width="16" height="16" fill="white"></rect>
+        <rect width="16" height="16" fill="{fg}"></rect>
       </clipPath>
       <clipPath id="clip1_47_118">
-        <rect width="16" height="16" fill="white"></rect>
+        <rect width="16" height="16" fill="{fg}"></rect>
       </clipPath>
     </defs>
   </svg>

packages/frontend/src/lib/table/model/ModelColumnAge.spec.ts

@@ -47,5 +47,5 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText('2 days');
   expect(text).toBeInTheDocument();
   expect(text).toHaveClass('text-sm');
-  expect(text).toHaveClass('text-gray-700');
+  expect(text).toHaveClass('text-[var(--pd-table-body-text)]');
 });

packages/frontend/src/lib/table/model/ModelColumnAge.svelte

@@ -4,7 +4,7 @@ import { humanizeAge } from '/@/utils/dimensions';
 export let object: ModelInfo;
 </script>
 
-<div class="text-sm text-gray-700">
+<div class="text-sm text-[var(--pd-table-body-text)]">
   {#if object.file?.creation}
     {humanizeAge(object.file.creation.getTime() / 1000)}
   {/if}

packages/frontend/src/lib/table/model/ModelColumnLabels.svelte

@@ -6,7 +6,7 @@ import Badge from '../../Badge.svelte';
 export let object: ModelInfo;
 </script>
 
-<div class="text-sm text-gray-700">
+<div class="text-sm">
   <div class="flex gap-x-2">
     <Badge icon="{faMemory}" content="RAM usage: {object.memory ? filesize(object.memory, { base: 2 }) : 'N/A'}" />
     <Badge icon="{faMicrochip}" content="{object.hw}" />

packages/frontend/src/lib/table/model/ModelColumnName.svelte

@@ -13,13 +13,16 @@ function openDetails() {
   title="{object.name}"
   on:click="{() => openDetails()}"
   aria-label="Open Model Details">
-  <div class="text-sm text-gray-300 overflow-hidden text-ellipsis w-full text-left" aria-label="Model Name">
+  <div
+    class="text-sm text-[var(--pd-table-body-text-highlight)] overflow-hidden text-ellipsis w-full text-left"
+    aria-label="Model Name">
     {object.name}
   </div>
   {#if object.registry || object.license}
-    <span class="text-xs text-gray-700" aria-label="Model Info">{object.registry} - {object.license}</span>
+    <span class="text-xs text-[var(--pd-table-body-text)]" aria-label="Model Info"
+      >{object.registry} - {object.license}</span>
   {/if}
   {#if !object.registry && !object.license && !object.url}
-    <span class="text-xs text-gray-700" aria-label="Imported Model Info">Imported by User</span>
+    <span class="text-xs text-[var(--pd-table-body-text)]" aria-label="Imported Model Info">Imported by User</span>
   {/if}
 </button>

packages/frontend/src/lib/table/model/ModelColumnSize.spec.ts

@@ -44,5 +44,5 @@ test('Expect simple column styling', async () => {
   const text = screen.getByText('1 kB');
   expect(text).toBeInTheDocument();
   expect(text.parentElement).toHaveClass('text-xs');
-  expect(text.parentElement).toHaveClass('text-gray-700');
+  expect(text.parentElement).toHaveClass('text-[var(--pd-table-body-text)]');
 });

packages/frontend/src/lib/table/model/ModelColumnSize.svelte

@@ -4,7 +4,7 @@ import { filesize } from 'filesize';
 export let object: ModelInfo;
 </script>
 
-<div class="text-xs text-gray-700 flex-flex-row">
+<div class="text-xs text-[var(--pd-table-body-text)] flex-flex-row">
   {#if object.file?.size}
     <div>{filesize(object.file.size)}</div>
   {/if}

packages/frontend/src/pages/Models.svelte

@@ -132,7 +132,7 @@ async function importModel() {
               {#if filteredModels.length > 0}
                 <Table kind="model" data="{filteredModels}" columns="{columns}" row="{row}"></Table>
               {:else}
-                <div role="status">There are no models yet</div>
+                <div role="status" class="text-[var(--pd-content-text)]">There are no models yet</div>
               {/if}
             </Route>
 
@@ -141,7 +141,7 @@ async function importModel() {
               {#if localModels.length > 0}
                 <Table kind="model" data="{localModels}" columns="{columns}" row="{row}"></Table>
               {:else}
-                <div role="status">There are no models yet</div>
+                <div role="status" class="text-[var(--pd-content-text)]">There are no models yet</div>
               {/if}
             </Route>
 
@@ -150,7 +150,7 @@ async function importModel() {
               {#if importedModels.length > 0}
                 <Table kind="model" data="{importedModels}" columns="{columns}" row="{row}"></Table>
               {:else}
-                <div role="status">There are no models yet</div>
+                <div role="status" class="text-[var(--pd-content-text)]">There are no models yet</div>
               {/if}
             </Route>
 
@@ -159,7 +159,7 @@ async function importModel() {
               {#if remoteModels.length > 0}
                 <Table kind="model" data="{remoteModels}" columns="{columns}" row="{row}"></Table>
               {:else}
-                <div role="status">There are no models yet</div>
+                <div role="status" class="text-[var(--pd-content-text)]">There are no models yet</div>
               {/if}
             </Route>
           {/if}