From f357f3324f967c952bb1b37af2e32d4076f5067d Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 14 May 2025 14:12:57 -0400
Subject: [PATCH] refactor: default border color (#18292)

---
 web/src/app.css                                           | 4 ++++
 web/src/lib/components/layouts/user-page-layout.svelte    | 4 +---
 .../navigation-bar/navigation-bar.svelte                  | 2 +-
 .../shared-components/settings/setting-accordion.svelte   | 8 ++++----
 web/tailwind.config.js                                    | 2 +-
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 329d9ce82d..211d34bb6c 100644
--- a/web/src/app.css
+++ b/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;
   }
 }
 
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index 8ecddaab78..d5e3811ca5 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/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>
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index b0b3c1f31e..3b6caf8668 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/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'}"
   >
diff --git a/web/src/lib/components/shared-components/settings/setting-accordion.svelte b/web/src/lib/components/shared-components/settings/setting-accordion.svelte
index 5ae41c0551..f48d14ea30 100755
--- a/web/src/lib/components/shared-components/settings/setting-accordion.svelte
+++ 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
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index bd6a834427..2e13e5997d 100644
--- a/web/tailwind.config.js
+++ b/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'],