@infonomic/uikit 5.23.0 → 5.25.0

package/dist/components/accordion/accordion.module.css

@@ -56,4 +56,4 @@
       height: 0;
     }
   }
-}
+}

package/dist/components/card/card.module.css

@@ -1,11 +1,12 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .card,
   :global(.card) {
     display: flex;
@@ -22,9 +23,14 @@
     box-shadow: var(--shadow-sm);
   }
 
-  .card:is(:global(.dark) *),
-  :global(.card):is(:global(.dark) *) {
-    background: var(--canvas-800);
+  :global(.dark),
+  :global([data-theme="dark"]),
+  :global([data-theme="dark"]) ::backdrop {
+
+    .card,
+    :global(.card) {
+      background: var(--canvas-800);
+    }
   }
 
   .card-hover,
@@ -37,9 +43,14 @@
     background: oklch(from var(--theme-50) 1 0.03 h);
   }
 
-  .card-hover:hover:is(:global(.dark) *),
-  :global(.card-hover):hover:is(:global(.dark) *) {
-    background: oklch(from var(--canvas-800) 0.2 c h);
+  :global(.dark),
+  :global([data-theme="dark"]),
+  :global([data-theme="dark"]) ::backdrop {
+
+    .card-hover:hover,
+    :global(.card-hover):hover {
+      background: oklch(from var(--canvas-800) 0.2 c h);
+    }
   }
 
   .card-header,
@@ -79,4 +90,4 @@
     padding: 1rem;
     padding-top: 0;
   }
-}
+}

package/dist/components/card/card_module.css

@@ -16,7 +16,15 @@
     display: flex;
   }
 
-  :is(.card-mqJaiW:is(.dark *), .card:is(.dark *)) {
+  :is(.dark .card-mqJaiW, .dark .card) {
+    background: var(--canvas-800);
+  }
+
+  :is([data-theme="dark"] .card-mqJaiW, [data-theme="dark"] .card) {
+    background: var(--canvas-800);
+  }
+
+  :is([data-theme="dark"] ::backdrop .card-mqJaiW, [data-theme="dark"] ::backdrop .card) {
     background: var(--canvas-800);
   }
 
@@ -28,7 +36,15 @@
     background: oklch(from var(--theme-50) 1 .03 h);
   }
 
-  :is(.card-hover-hvT4d6:hover:is(.dark *), .card-hover:hover:is(.dark *)) {
+  :is(.dark .card-hover-hvT4d6:hover, .dark .card-hover:hover) {
+    background: oklch(from var(--canvas-800) .2 c h);
+  }
+
+  :is([data-theme="dark"] .card-hover-hvT4d6:hover, [data-theme="dark"] .card-hover:hover) {
+    background: oklch(from var(--canvas-800) .2 c h);
+  }
+
+  :is([data-theme="dark"] ::backdrop .card-hover-hvT4d6:hover, [data-theme="dark"] ::backdrop .card-hover:hover) {
     background: oklch(from var(--canvas-800) .2 c h);
   }
 

package/dist/components/notifications/toast.module.css

@@ -1,9 +1,9 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
   /* Positions are relative to the toast viewport which is set 
@@ -24,8 +24,12 @@
     box-shadow: var(--shadow-sm);
   }
 
-  .root:is(:global(.dark) *) {
-    background: var(--canvas-800);
+  :global(.dark),
+  :global([data-theme="dark"]),
+  :global([data-theme="dark"]) ::backdrop {
+    .root {
+      background: var(--canvas-800);
+    }
   }
 
   .root[data-state="open"] {
@@ -132,6 +136,7 @@
   }
 
   @media (min-width: 48rem) {
+
     .root.top-right[data-state="open"],
     .root.bottom-right[data-state="open"] {
       animation: slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -236,4 +241,4 @@
       opacity: 0;
     }
   }
-}
+}

package/dist/components/notifications/toast_module.css

@@ -16,7 +16,15 @@
     position: absolute;
   }
 
-  .root-dWN7jD:is(.dark *) {
+  .dark .root-dWN7jD {
+    background: var(--canvas-800);
+  }
+
+  [data-theme="dark"] .root-dWN7jD {
+    background: var(--canvas-800);
+  }
+
+  [data-theme="dark"] ::backdrop .root-dWN7jD {
     background: var(--canvas-800);
   }
 

package/dist/components/overlay/overlay.module.css

@@ -8,8 +8,12 @@
   z-index: 20;
 }
 
-.overlay:is(:global(.dark) *) {
-  background-color: rgba(0, 0, 0, 0.5);
+:global(.dark),
+:global([data-theme="dark"]),
+:global([data-theme="dark"]) ::backdrop {
+  .overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 }
 
 .animate-fade-in {
@@ -38,4 +42,4 @@
   to {
     opacity: 0;
   }
-}
+}

package/dist/components/overlay/overlay_module.css

@@ -8,7 +8,15 @@
   left: 0;
 }
 
-.overlay-hax8h5:is(.dark *) {
+.dark .overlay-hax8h5 {
+  background-color: #00000080;
+}
+
+[data-theme="dark"] .overlay-hax8h5 {
+  background-color: #00000080;
+}
+
+[data-theme="dark"] ::backdrop .overlay-hax8h5 {
   background-color: #00000080;
 }
 

package/dist/components/shimmer/shimmer.module.css

@@ -1,9 +1,9 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {
@@ -16,9 +16,13 @@
     animation: shimmer 1.5s infinite;
   }
 
-  .shimmer:is(:global(.dark) *) {
-    background-color: #141414;
-    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
+  :global(.dark),
+  :global([data-theme="dark"]),
+  :global([data-theme="dark"]) ::backdrop {
+    .shimmer {
+      background-color: #141414;
+      background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
+    }
   }
 
   .shimmerContainer {
@@ -49,4 +53,4 @@
       background-position: 200% 0;
     }
   }
-}
+}

package/dist/components/shimmer/shimmer_module.css

@@ -10,7 +10,17 @@
     overflow: hidden;
   }
 
-  .shimmer-hQj5gn:is(.dark *) {
+  .dark .shimmer-hQj5gn {
+    background-color: #141414;
+    background-image: linear-gradient(90deg, #0000, #ffffff03, #0000);
+  }
+
+  [data-theme="dark"] .shimmer-hQj5gn {
+    background-color: #141414;
+    background-image: linear-gradient(90deg, #0000, #ffffff03, #0000);
+  }
+
+  [data-theme="dark"] ::backdrop .shimmer-hQj5gn {
     background-color: #141414;
     background-image: linear-gradient(90deg, #0000, #ffffff03, #0000);
   }

package/dist/icons/icons.module.css

@@ -28,66 +28,34 @@
     stroke: var(--gray-800);
   }
 
-  .stroke-gray:is(:global(.dark) *) {
-    stroke: var(--gray-300);
-  }
-
   .stroke-contrast {
     stroke: var(--gray-950);
   }
 
-  .stroke-contrast:is(:global(.dark) *) {
-    stroke: var(--gray-100);
-  }
-
   .stroke-primary {
     stroke: var(--primary-500);
   }
 
-  .stroke-primary:is(:global(.dark) *) {
-    stroke: var(--primary-400);
-  }
-
   .stroke-secondary {
     stroke: var(--secondary-500);
   }
 
-  .stroke-secondary:is(:global(.dark) *) {
-    stroke: var(--secondary-400);
-  }
-
   .stroke-success {
     stroke: var(--green-500);
   }
 
-  .stroke-success:is(:global(.dark) *) {
-    stroke: var(--green-400);
-  }
-
   .stroke-info {
     stroke: var(--blue-500);
   }
 
-  .stroke-info:is(:global(.dark) *) {
-    stroke: var(--blue-400);
-  }
-
   .stroke-warning {
     stroke: var(--yellow-500);
   }
 
-  .stroke-warning:is(:global(.dark) *) {
-    stroke: var(--yellow-400);
-  }
-
   .stroke-danger {
     stroke: var(--red-500);
   }
 
-  .stroke-danger:is(:global(.dark) *) {
-    stroke: var(--red-400);
-  }
-
   .fill-none {
     fill: none;
   }
@@ -100,63 +68,99 @@
     fill: black;
   }
 
-  .fill-contrast:is(:global(.dark) *) {
-    fill: white;
-  }
-
   .fill-gray {
     stroke: var(--gray-700);
   }
 
-  .fill-gray:is(:global(.dark) *) {
-    stroke: var(--gray-300);
-  }
-
   .fill-primary {
     fill: var(--primary-500);
   }
 
-  .fill-primary:is(:global(.dark) *) {
-    fill: var(--primary-400);
-  }
-
   .fill-secondary {
     fill: var(--secondary-500);
   }
 
-  .fill-secondary:is(:global(.dark) *) {
-    fill: var(--secondary-400);
-  }
-
   .fill-success {
     fill: var(--green-500);
   }
 
-  .fill-success:is(:global(.dark) *) {
-    fill: var(--green-400);
-  }
-
   .fill-info {
     fill: var(--blue-500);
   }
 
-  .fill-info:is(:global(.dark) *) {
-    fill: var(--blue-400);
-  }
-
   .fill-warning {
     fill: var(--yellow-500);
   }
 
-  .fill-warning:is(:global(.dark) *) {
-    fill: var(--yellow-400);
-  }
-
   .fill-danger {
     fill: var(--red-500);
   }
 
-  .fill-danger:is(:global(.dark) *) {
-    fill: var(--red-400);
+  :global(.dark),
+  :global([data-theme="dark"]),
+  :global([data-theme="dark"]) ::backdrop {
+    .stroke-gray {
+      stroke: var(--gray-300);
+    }
+
+    .stroke-contrast {
+      stroke: var(--gray-100);
+    }
+
+    .stroke-primary {
+      stroke: var(--primary-400);
+    }
+
+    .stroke-secondary {
+      stroke: var(--secondary-400);
+    }
+
+    .stroke-success {
+      stroke: var(--green-400);
+    }
+
+    .stroke-info {
+      stroke: var(--blue-400);
+    }
+
+    .stroke-warning {
+      stroke: var(--yellow-400);
+    }
+
+    .stroke-danger {
+      stroke: var(--red-400);
+    }
+
+    .fill-contrast {
+      fill: white;
+    }
+
+    .fill-gray {
+      stroke: var(--gray-300);
+    }
+
+    .fill-primary {
+      fill: var(--primary-400);
+    }
+
+    .fill-secondary {
+      fill: var(--secondary-400);
+    }
+
+    .fill-success {
+      fill: var(--green-400);
+    }
+
+    .fill-info {
+      fill: var(--blue-400);
+    }
+
+    .fill-warning {
+      fill: var(--yellow-400);
+    }
+
+    .fill-danger {
+      fill: var(--red-400);
+    }
   }
-}
+}