refactor: default border color (#18292)

web/src/app.css

@@ -32,6 +32,8 @@
     --immich-ui-warning: 216 143 64;
     --immich-ui-info: 8 111 230;
     --immich-ui-gray: 246 246 246;
+
+    --immich-ui-default-border: 209 213 219;
   }
 
   .dark {
@@ -44,6 +46,8 @@
     --immich-ui-warning: 254 197 132;
     --immich-ui-info: 121 183 254;
     --immich-ui-gray: 33 33 33;
+
+    --immich-ui-default-border: 55 65 81;
   }
 }
 

web/src/lib/components/layouts/user-page-layout.svelte

@@ -65,9 +65,7 @@
     </div>
 
     {#if title || buttons}
-      <div
-        class="absolute flex h-16 w-full place-items-center justify-between border-b p-2 dark:border-immich-dark-gray dark:text-immich-dark-fg"
-      >
+      <div class="absolute flex h-16 w-full place-items-center justify-between border-b p-2 text-dark">
         <div class="flex gap-2 items-center">
           {#if title}
             <div class="font-medium outline-none" tabindex="-1" id={headerId}>{title}</div>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -57,7 +57,7 @@
 >
   <SkipLink text={$t('skip_to_content')} />
   <div
-    class="grid h-full grid-cols-[theme(spacing.32)_auto] items-center py-2 dark:border-b-immich-dark-gray sidebar:grid-cols-[theme(spacing.64)_auto] {noBorder
+    class="grid h-full grid-cols-[theme(spacing.32)_auto] items-center py-2 sidebar:grid-cols-[theme(spacing.64)_auto] {noBorder
       ? ''
       : 'border-b'}"
   >

web/src/lib/components/shared-components/settings/setting-accordion.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { onDestroy, onMount, type Snippet } from 'svelte';
   import { slide } from 'svelte/transition';
   import { getAccordionState } from './setting-accordion-state.svelte';
-  import { onDestroy, onMount, type Snippet } from 'svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
 
   const accordionState = getAccordionState();
 
@@ -65,8 +65,8 @@
 
 <div
   class="border rounded-2xl my-4 px-6 py-4 transition-all {isOpen
-    ? 'border-immich-primary/40 dark:border-immich-dark-primary/50 shadow-md'
-    : 'dark:border-gray-800'}"
+    ? 'border-primary/40 dark:border-primary/50 shadow-md'
+    : ''}"
   bind:this={accordionElement}
 >
   <button

web/tailwind.config.js

@@ -40,7 +40,7 @@ export default {
       },
       borderColor: ({ theme }) => ({
         ...theme('colors'),
-        DEFAULT: 'rgb(var(--immich-ui-gray) / <alpha-value>)',
+        DEFAULT: 'rgb(var(--immich-ui-default-border) / <alpha-value>)',
       }),
       fontFamily: {
         'immich-mono': ['Overpass Mono', 'monospace'],