💄 FIX: Change dark selectors

TuentyFaiv · Apr 11, 2024 · 8ab8f60 · 8ab8f60
1 parent 113ac93
commit 8ab8f60
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 12 deletions.
diff --git a/packages/form/package.json b/packages/form/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tuentyfaiv/svelte-form",
   "description": "A form library for Svelte. It is built on top of Svelte and Typescript. Inspired by Formik and React Hook Form.",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "scripts": {
     "dev:web": "vite dev",

diff --git a/packages/form/src/lib/ui/components/Field/Field.svelte b/packages/form/src/lib/ui/components/Field/Field.svelte
@@ -330,7 +330,8 @@
     right: calc(var(--faivform-space) / 2);
     z-index: 0;
   }
-  :global(:root:is(.dark, [data-theme="dark"]) .faivform-field-action) {
+  :global(.dark .faivform-field-action),
+  :global([data-theme="dark"] .faivform-field-action) {
     filter: invert(1);
   }
   :global(.faivform-field-action:hover) {

diff --git a/packages/form/src/lib/ui/components/File/File.svelte b/packages/form/src/lib/ui/components/File/File.svelte
@@ -309,7 +309,8 @@
     background-color: rgb(var(--faivform-placeholder-200) / 1);
     border-radius: var(--faivform-radius);
   }
-  :global(:root:is(.dark, [data-theme="dark"]) .faivform-file-cover) {
+  :global(.dark .faivform-file-cover),
+  :global([data-theme="dark"] .faivform-file-cover) {
     background-color: rgb(var(--faivform-placeholder-400) / 1);
   }
   :global(.faivform-file-cover:is([data-text])) {

diff --git a/packages/form/src/lib/ui/components/Option/Option.svelte b/packages/form/src/lib/ui/components/Option/Option.svelte
@@ -205,7 +205,8 @@
     will-change: background-color;
     z-index: 0;
   }
-  :global(:root:is(.dark, [data-theme="dark"]) .faivform-option-item) {
+  :global(.dark .faivform-option-item),
+  :global([data-theme="dark"] .faivform-option-item) {
     border-color: rgb(var(--faivform-placeholder-50) / 1);
   }
   :global(.faivform-option-item:not([data-checked="true"]):is(:hover)) {
@@ -225,7 +226,12 @@
     font-weight: 500;
   }
   :global(
-      :root:is(.dark, [data-theme="dark"])
+      .dark
+        .faivform-option-item:is([data-checked="true"])
+        .faivform-option-label
+    ),
+  :global(
+      [data-theme="dark"]
         .faivform-option-item:is([data-checked="true"])
         .faivform-option-label
     ) {

diff --git a/packages/form/src/lib/ui/components/Select/Select.svelte b/packages/form/src/lib/ui/components/Select/Select.svelte
@@ -546,13 +546,12 @@
     font-family: var(--faivform-placeholder-font);
     border-radius: calc(var(--faivform-radius) / 2);
   }
-  :global(:root:is(.dark, [data-theme="dark"]) .faivform-select-item) {
+  :global(.dark .faivform-select-item),
+  :global([data-theme="dark"] .faivform-select-item) {
     background-color: rgb(var(--faivform-placeholder-400) / 1);
   }
-  :global(
-      :root:is(.dark, [data-theme="dark"])
-        .faivform-select-item:is([data-fixed="true"])
-    ),
+  :global(.dark .faivform-select-item:is([data-fixed="true"])),
+  :global([data-theme="dark"] .faivform-select-item:is([data-fixed="true"])),
   :global(.faivform-select-item:is([data-fixed="true"])) {
     background-color: var(--faivform-secondary-color);
     color: var(--faivform-secondary-text);
@@ -662,7 +661,8 @@
     right: calc(var(--faivform-space) / 2);
     z-index: 0;
   }
-  :global(:root:is(.dark, [data-theme="dark"]) .faivform-select-icon) {
+  :global(.dark .faivform-select-icon),
+  :global([data-theme="dark"] .faivform-select-icon) {
     filter: invert(1);
   }
 
@@ -720,8 +720,9 @@
     outline: 0;
     background-color: var(--faivform-primary-color);
   }
+  :global(.dark .faivform-select-option:is(:hover, :focus, :focus-visible)),
   :global(
-      :root:is(.dark, [data-theme="dark"])
+      [data-theme="dark"]
         .faivform-select-option:is(:hover, :focus, :focus-visible)
     ) {
     color: rgb(var(--faivform-primary-900) / 1);