Split 'primary' color into functional colors (btn-primary, focus) - we

don't really have a brand color anyways, so this makes more sense

Author: jpenilla

web/src/app.css

@@ -19,7 +19,8 @@
 }
 
 @theme {
-    --color-primary: var(--color-blue-500);
+    --color-btn-primary: var(--color-green-700);
+    --color-focus: var(--color-blue-600);
 
     /* Text colors */
     --color-em-high-light: rgba(0, 0, 0, 0.87);
@@ -93,8 +94,8 @@
 }
 
 @utility btn-base {
-    --btn-color: var(--color-primary);
-    --btn-focus: var(--color-primary);
+    --btn-color: var(--color-btn-primary);
+    --btn-focus: var(--color-focus);
     --tw-shadow-color: color-mix(in oklab, var(--btn-color) 50%, transparent);
 
     --btn-hover: color-mix(in oklch, var(--btn-color), black 5%);
@@ -133,11 +134,7 @@
 
 @utility btn-fill-primary {
     @apply btn-fill text-white;
-    --btn-color: var(--color-primary);
-    --btn-focus: var(--color-neutral-800);
-    @variant dark {
-        --btn-focus: var(--color-neutral-100);
-    }
+    --btn-color: var(--color-btn-primary);
 }
 
 @utility btn-fill-neutral {

web/src/lib/components/InfoPopup.svelte

@@ -5,11 +5,14 @@
 </script>
 
 <Popover.Root>
-    <Popover.Trigger title="Information" class="flex size-6 btn-link items-center justify-center self-center p-0.5 data-[state=open]:btn-link-hover">
+    <Popover.Trigger
+        title="Information"
+        class="flex size-6 btn-link items-center justify-center self-center rounded-sm p-0.5 ring-focus focus:outline-none focus-visible:ring-2 data-[state=open]:btn-link-hover"
+    >
         <span aria-hidden="true" class="iconify size-4 octicon--info-16"></span>
     </Popover.Trigger>
     <Popover.Portal>
-        <Popover.Content class="z-50 mx-2 max-w-64 rounded-sm border bg-neutral px-2 py-1 text-sm">
+        <Popover.Content class="z-50 mx-2 max-w-64 rounded-sm border bg-neutral px-2 py-1 text-sm ring-focus focus:outline-none focus-visible:ring-2">
             {@render children?.()}
             <Popover.Arrow class="text-edge" />
         </Popover.Content>

web/src/lib/components/LabeledCheckbox.svelte

@@ -18,7 +18,7 @@
             {labelText}
         </Label.Root>
         <div
-            class="relative size-5 rounded-sm border bg-neutral transition-colors ease-in-out data-[state=checked]:bg-primary"
+            class="relative size-5 rounded-sm border bg-neutral transition-colors ease-in-out data-[state=checked]:bg-blue-500"
             data-state={checked ? "checked" : "unchecked"}
         >
             <span

web/src/lib/components/Spinner.svelte

@@ -11,7 +11,7 @@
     let mergedProps = $derived(
         mergeProps(
             {
-                class: "animate-spin rounded-full border-b-2 border-primary",
+                class: "animate-spin rounded-full border-2 border-em-disabled border-b-em-high",
                 style: {
                     height: `${size * 0.25}rem`,
                     width: `${size * 0.25}rem`,

web/src/lib/components/diff/ImageDiff.svelte

@@ -56,11 +56,8 @@
 </script>
 
 {#snippet modeButton(forMode: Mode, iconClass: string)}
-    <RadioGroup.Item
-        value={forMode}
-        class="flex items-center justify-center rounded-sm btn-ghost px-2 py-1 text-primary data-[state=checked]:btn-ghost-visible"
-    >
-        <span class="iconify {iconClass} me-1 size-4" aria-hidden="true"></span>{forMode}
+    <RadioGroup.Item value={forMode} class="flex items-center justify-center rounded-sm btn-ghost px-2 py-1 data-[state=checked]:btn-ghost-visible">
+        <span class="iconify {iconClass} me-1 size-4 text-em-med" aria-hidden="true"></span>{forMode}
     </RadioGroup.Item>
 {/snippet}
 
@@ -152,7 +149,7 @@
     <div class="sticky bottom-4 mt-4 flex w-full max-w-[280px] items-center rounded-lg bg-neutral p-2.5 shadow-sm">
         <Slider.Root type="single" thumbPositioning="exact" bind:value={fadePercent} class="relative flex w-full touch-none items-center select-none">
             <span class="relative h-0.5 w-full grow cursor-pointer overflow-hidden rounded-full bg-em-disabled">
-                <Slider.Range class="absolute h-full bg-primary" />
+                <Slider.Range class="absolute h-full bg-em-high" />
             </span>
             <Slider.Thumb index={0} class="block size-4 cursor-pointer rounded-full border bg-neutral shadow-sm transition-colors data-active:scale-[0.95]" />
         </Slider.Root>

web/src/lib/components/files/FileTypeSelect.svelte

@@ -70,7 +70,7 @@
                     <Select.Group>
                         <Select.Item
                             value="auto"
-                            class="cursor-default rounded-sm border px-2 py-1 text-sm data-highlighted:bg-neutral-3 data-selected:bg-primary data-selected:text-white"
+                            class="cursor-default rounded-sm border px-2 py-1 text-sm data-highlighted:bg-neutral-3 data-selected:bg-blue-500 data-selected:text-white"
                         >
                             Infer Type
                         </Select.Item>
@@ -80,7 +80,7 @@
                     {#each languages as lang (lang.id)}
                         <Select.Item
                             value={lang.id}
-                            class="group flex cursor-default flex-col px-2 py-1 text-sm data-highlighted:bg-neutral-3 data-selected:bg-primary data-selected:text-white"
+                            class="group flex cursor-default flex-col px-2 py-1 text-sm data-highlighted:bg-neutral-3 data-selected:bg-blue-500 data-selected:text-white"
                         >
                             {lang.name}
                             <span class="text-sm font-light text-em-med group-data-selected:text-white/80">{lang.aliases.join(", ")}</span>

web/src/lib/components/files/MultimodalFileInput.svelte

@@ -79,7 +79,7 @@
 {#snippet radioItem(name: string)}
     <RadioGroup.Item
         value={name.toLowerCase()}
-        class="rounded-sm px-2 text-sm ring-primary hover:bg-neutral/65 focus:outline-none focus-visible:ring-2 data-[state=checked]:bg-neutral data-[state=checked]:shadow-sm"
+        class="rounded-sm px-2 text-sm ring-focus hover:bg-neutral/65 focus:outline-none focus-visible:ring-2 data-[state=checked]:bg-neutral data-[state=checked]:shadow-sm"
     >
         {name}
     </RadioGroup.Item>
@@ -123,7 +123,7 @@
         placeholder="Enter file URL"
         type="url"
         {required}
-        class="w-full rounded-md border bg-neutral px-2 py-1 inset-shadow-xs ring-primary focus:outline-none focus-visible:ring-2"
+        class="w-full rounded-md border bg-neutral px-2 py-1 inset-shadow-xs ring-focus focus:outline-none focus-visible:ring-2"
     />
 {/snippet}
 
@@ -133,7 +133,7 @@
         bind:value={instance.text}
         placeholder="Enter text here"
         {required}
-        class="w-full rounded-md border bg-neutral px-2 py-1 inset-shadow-xs ring-primary focus:outline-none focus-visible:ring-2"
+        class="w-full rounded-md border bg-neutral px-2 py-1 inset-shadow-xs ring-focus focus:outline-none focus-visible:ring-2"
     ></textarea>
 {/snippet}
 
@@ -157,7 +157,7 @@
 
         background-color: rgba(255, 255, 255, 0.7);
 
-        border: dashed var(--color-primary);
+        border: dashed var(--color-focus);
         border-radius: inherit;
     }
 </style>

web/src/lib/components/progress-bar/ProgressBar.svelte

@@ -20,11 +20,11 @@
     {@const percent = state.getPercent()}
     {#if percent !== undefined}
         <div
-            class="h-full w-full rounded-full bg-primary drop-shadow-sm drop-shadow-primary/50 transition-all duration-50 ease-in-out will-change-transform"
+            class="h-full w-full rounded-full bg-em-high drop-shadow-sm transition-all duration-50 ease-in-out will-change-transform"
             style={`transform: translateX(-${100 - percent}%)`}
         ></div>
     {:else}
-        <div id="spinner" class="h-full w-[20%] rounded-full bg-primary drop-shadow-sm drop-shadow-primary/50"></div>
+        <div id="spinner" class="h-full w-[20%] rounded-full bg-em-high drop-shadow-sm"></div>
     {/if}
 </Progress.Root>
 

web/src/lib/components/settings/ShikiThemeSelector.svelte

@@ -19,7 +19,11 @@
 </script>
 
 <Select.Root type="single" scrollAlignment="center" bind:value>
-    <Select.Trigger aria-labelledby={labelId} id={triggerId} class="group flex cursor-pointer items-center justify-between gap-1 px-2 py-1">
+    <Select.Trigger
+        aria-labelledby={labelId}
+        id={triggerId}
+        class="group flex cursor-pointer items-center justify-between gap-1 px-2 py-1 ring-focus focus:outline-none focus-visible:ring-2"
+    >
         <Label.Root id={labelId} for={triggerId} class="cursor-pointer">{capitalizeFirstLetter(mode)} theme</Label.Root>
         <div
             class="flex w-44 items-center gap-1 rounded-sm border btn-ghost bg-neutral px-2 py-0.5 text-sm select-none group-hover:btn-ghost-hover group-active:btn-ghost-active"
@@ -43,7 +47,7 @@
             {#each Object.keys(bundledThemes) as theme (theme)}
                 <Select.Item
                     value={theme}
-                    class="cursor-default rounded-sm px-2 py-1 text-sm data-highlighted:bg-neutral-3 data-selected:bg-primary data-selected:text-white"
+                    class="cursor-default rounded-sm px-2 py-1 text-sm data-highlighted:bg-neutral-3 data-selected:bg-blue-500 data-selected:text-white"
                 >
                     {theme}
                 </Select.Item>

web/src/lib/components/settings/SimpleRadioGroup.svelte

@@ -25,7 +25,7 @@
         >
             {#snippet children({ checked })}
                 {#if checked}
-                    <span class="size-2.5 rounded-full bg-primary" aria-hidden="true"></span>
+                    <span class="size-2.5 rounded-full bg-blue-500" aria-hidden="true"></span>
                 {/if}
             {/snippet}
         </RadioGroup.Item>