@hachej/boring-ui-kit 0.1.86 → 0.1.87

package/dist/styles.css

@@ -2121,12 +2121,12 @@
     }
   }
   .dark\:border-input {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       border-color: var(--boring-input);
     }
   }
   .dark\:bg-destructive\/60 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       background-color: var(--boring-destructive);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--boring-destructive) 60%, transparent);
@@ -2134,7 +2134,7 @@
     }
   }
   .dark\:bg-input\/30 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       background-color: var(--boring-input);
       @supports (color: color-mix(in lab, red, red)) {
         background-color: color-mix(in oklab, var(--boring-input) 30%, transparent);
@@ -2142,17 +2142,17 @@
     }
   }
   .dark\:bg-transparent {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       background-color: transparent;
     }
   }
   .dark\:text-muted-foreground {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       color: var(--boring-muted-foreground);
     }
   }
   .dark\:hover\:bg-input\/50 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--boring-input);
@@ -2164,7 +2164,7 @@
     }
   }
   .dark\:hover\:bg-muted\/40 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &:hover {
         @media (hover: hover) {
           background-color: var(--boring-muted);
@@ -2176,7 +2176,7 @@
     }
   }
   .dark\:hover\:text-foreground {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &:hover {
         @media (hover: hover) {
           color: var(--boring-foreground);
@@ -2185,7 +2185,7 @@
     }
   }
   .dark\:focus-visible\:ring-destructive\/40 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &:focus-visible {
         --tw-ring-color: var(--boring-destructive);
         @supports (color: color-mix(in lab, red, red)) {
@@ -2195,7 +2195,7 @@
     }
   }
   .dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &:has(*:is([data-slot][aria-invalid=true])) {
         --tw-ring-color: var(--boring-destructive);
         @supports (color: color-mix(in lab, red, red)) {
@@ -2205,7 +2205,7 @@
     }
   }
   .dark\:aria-invalid\:ring-destructive\/40 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &[aria-invalid="true"] {
         --tw-ring-color: var(--boring-destructive);
         @supports (color: color-mix(in lab, red, red)) {
@@ -2215,14 +2215,14 @@
     }
   }
   .dark\:data-\[state\=active\]\:border-input {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &[data-state="active"] {
         border-color: var(--boring-input);
       }
     }
   }
   .dark\:data-\[state\=active\]\:bg-input\/30 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &[data-state="active"] {
         background-color: var(--boring-input);
         @supports (color: color-mix(in lab, red, red)) {
@@ -2232,14 +2232,14 @@
     }
   }
   .dark\:data-\[state\=active\]\:text-foreground {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &[data-state="active"] {
         color: var(--boring-foreground);
       }
     }
   }
   .dark\:group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:border-transparent {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &:is(:where(.group\/tabs-list)[data-variant="line"] *) {
         &[data-state="active"] {
           border-color: transparent;
@@ -2248,7 +2248,7 @@
     }
   }
   .dark\:group-data-\[variant\=line\]\/tabs-list\:data-\[state\=active\]\:bg-transparent {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &:is(:where(.group\/tabs-list)[data-variant="line"] *) {
         &[data-state="active"] {
           background-color: transparent;
@@ -2257,14 +2257,14 @@
     }
   }
   .dark\:data-\[state\=checked\]\:bg-primary {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &[data-state="checked"] {
         background-color: var(--boring-primary);
       }
     }
   }
   .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20 {
-    &:is(.dark *) {
+    &:is([data-theme="dark"], [data-theme="dark"] *) {
       &[data-variant="destructive"] {
         &:focus {
           background-color: var(--boring-destructive);

package/dist/tokens.css

@@ -82,7 +82,7 @@
   --surface-workbench-left: var(--boring-surface-workbench-left);
 }
 
-.dark {
+[data-theme="dark"] {
   --boring-background: oklch(0.145 0.004 285.823);
   --boring-foreground: oklch(0.985 0 0);
   --boring-card: oklch(0.145 0.004 285.823);
@@ -111,7 +111,7 @@
   --boring-surface-workbench: oklch(0.165 0.004 285.823);
   --boring-surface-workbench-left: oklch(0.195 0.004 285.823);
 
-  /* Re-declare the bridge so dark works when .dark sits on a nested wrapper
+  /* Re-declare the bridge so dark works when data-theme sits on a nested wrapper
    * (custom properties resolve var() at the declaring element). */
   --background: var(--boring-background);
   --foreground: var(--boring-foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.1.86",
+  "version": "0.1.87",
   "type": "module",
   "license": "MIT",
   "description": "Shared shadcn-style UI primitives for Boring packages and app-generated panes.",