@infonomic/uikit 5.22.0 → 5.24.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);
+  .dark,
+  [data-theme="dark"],
+  [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);
+  .dark,
+  [data-theme="dark"],
+  [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.js

@@ -1,6 +1,7 @@
 import "./card_module.css";
 const card_module = {
     card: "card-mqJaiW",
+    dark: "dark-NdJxB9",
     "card-hover": "card-hover-hvT4d6",
     cardHover: "card-hover-hvT4d6",
     "card-header": "card-header-XnoBkP",

package/dist/components/card/card_module.css

@@ -16,7 +16,11 @@
     display: flex;
   }
 
-  :is(.card-mqJaiW:is(.dark *), .card:is(.dark *)) {
+  :is([data-theme="dark"] ::backdrop .card-mqJaiW, [data-theme="dark"] ::backdrop .card) {
+    background: var(--canvas-800);
+  }
+
+  :is(:is(.dark-NdJxB9, [data-theme="dark"]) .card-mqJaiW, :is(.dark-NdJxB9, [data-theme="dark"]) .card) {
     background: var(--canvas-800);
   }
 
@@ -28,7 +32,11 @@
     background: oklch(from var(--theme-50) 1 .03 h);
   }
 
-  :is(.card-hover-hvT4d6:hover:is(.dark *), .card-hover:hover:is(.dark *)) {
+  :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);
+  }
+
+  :is(:is(.dark-NdJxB9, [data-theme="dark"]) .card-hover-hvT4d6:hover, :is(.dark-NdJxB9, [data-theme="dark"]) .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);
+  .dark,
+  [data-theme="dark"],
+  [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.js

@@ -1,6 +1,7 @@
 import "./toast_module.css";
 const toast_module = {
     root: "root-dWN7jD",
+    dark: "dark-HRIC6o",
     slideInFromBottom: "slideInFromBottom-O94u9U",
     hide: "hide-vlOoW0",
     "top-right": "top-right-OsKbVb",

package/dist/components/notifications/toast_module.css

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

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

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

package/dist/components/overlay/overlay.module.js

@@ -1,6 +1,7 @@
 import "./overlay_module.css";
 const overlay_module = {
     overlay: "overlay-hax8h5",
+    dark: "dark-uhJ1zL",
     "animate-fade-in": "animate-fade-in-oC0Zd7",
     animateFadeIn: "animate-fade-in-oC0Zd7",
     "fade-in": "fade-in-ODU8WG",

package/dist/components/overlay/overlay_module.css

@@ -8,7 +8,11 @@
   left: 0;
 }
 
-.overlay-hax8h5:is(.dark *) {
+[data-theme="dark"] ::backdrop .overlay-hax8h5 {
+  background-color: #00000080;
+}
+
+:is(.dark-uhJ1zL, [data-theme="dark"]) .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);
+  .dark,
+  [data-theme="dark"],
+  [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.js

@@ -1,6 +1,7 @@
 import "./shimmer_module.css";
 const shimmer_module = {
     shimmer: "shimmer-hQj5gn",
+    dark: "dark-JA57ru",
     shimmerContainer: "shimmerContainer-YqBAXa",
     rectangular: "rectangular-qx6oTl",
     text: "text-syTLNh",

package/dist/components/shimmer/shimmer_module.css

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

package/dist/icons/icons.module.js

@@ -41,6 +41,7 @@ const icons_module = {
     "fill-warning": "fill-warning-MhDHOi",
     fillWarning: "fill-warning-MhDHOi",
     "fill-danger": "fill-danger-ON0cOW",
-    fillDanger: "fill-danger-ON0cOW"
+    fillDanger: "fill-danger-ON0cOW",
+    dark: "dark-H6f40i"
 };
 export { icons_module as default };