Merge pull request #155 from MeroVinggen/fix/theme-variables

fix: use of --sdt-bg-selected css variable
mskocik · Jan 16, 2024 · 0b5ad35 · 0b5ad35
2 parents fcde76b + ff8c7a6
commit 0b5ad35
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/lib/components/Calendar.svelte b/src/lib/components/Calendar.svelte
@@ -525,12 +525,12 @@
   border-bottom-left-radius: 0;
 }
 .is-selected + .is-selected .std-btn {
-  border-left: 1px solid color-mix(in srgb, white 75%, var(--sdt-table-selected-bg, #286090));
+  border-left: 1px solid color-mix(in srgb, white 75%, var(--sdt-table-selected-bg, var(--sdt-bg-selected, #286090)));
   margin-left: -1px;
 }
 .is-selected .std-btn,
 .is-selected.in-range .std-btn {
-  background-color: var(--sdt-table-selected-bg, #286090);
+  background-color: var(--sdt-table-selected-bg, var(--sdt-bg-selected, #286090));
   color: var(--sdt-color-selected, var(--sdt-bg-main, #fff));
   opacity: 0.9;
 }

diff --git a/src/lib/components/Time.svelte b/src/lib/components/Time.svelte
@@ -465,7 +465,7 @@
   height: 6px;
   position: absolute;
   transform: translate(-50%, -50%);
-  background-color: var(--sdt-clock-selected-bg, #286090);
+  background-color: var(--sdt-clock-selected-bg, var(--sdt-bg-selected, #286090));
   border-radius: 50%;
 }
 .sdt-hand-pointer {
@@ -474,7 +474,7 @@
   bottom: 50%;
   left: calc(50% - 1px);
   position: absolute;
-  background-color: var(--sdt-clock-selected-bg, #286090);
+  background-color: var(--sdt-clock-selected-bg, var(--sdt-bg-selected, #286090));
   transform-origin: center bottom 0;
   transition: transform 0.3s ease, height 0.15s ease;
 }
@@ -485,10 +485,11 @@
   width: 4px;
   height: 4px;
   background-color: transparent;
-  border: 14px solid var(--sdt-clock-selected-bg, #286090);
+  border: 14px solid var(--sdt-clock-selected-bg, var(--sdt-bg-selected, #286090));
   border-radius: 50%;
   box-sizing: content-box;
 }
+
 .sdt-tick {
   position: absolute;
   width: 30px;
@@ -524,7 +525,7 @@
     background-color: transparent;
   }
   100% {
-    background-color: var(--sdt-clock-selected-bg, #286090);
+    background-color: var(--sdt-clock-selected-bg, var(--sdt-bg-selected, #286090));
     color: var(--sdt-color-selected, var(--sdt-bg-main, #fff));
   }
 }