@infonomic/uikit 5.25.0 → 5.27.0

package/src/components/forms/calendar.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 {
   .day-picker {
@@ -167,19 +167,19 @@
   }
 
   /* '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground', */
-  .day > button {
+  .day>button {
     color: var(--foreground);
   }
 
   /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
-  .today > button {
+  .today>button {
     /* background-color: var(--gray-50); */
     border: solid 1px var(--stroke-primary);
     color: var(--foreground);
   }
 
-  .day > button:hover,
-  .day-selected > button {
+  .day>button:hover,
+  .day-selected>button {
     background-color: var(--fill-primary-strong);
     color: white;
   }
@@ -206,12 +206,12 @@
     color: var(--foreground);
   }
 
-  .button-range > button {
+  .button-range>button {
     background-color: var(--fill-primary-strong);
     color: white;
   }
 
-  .button-range > button:hover {
+  .button-range>button:hover {
     background-color: var(--fill-primary-strong);
     color: var(--foreground);
   }
@@ -232,8 +232,8 @@
     color: var(--foreground);
   }
 
-  .range-middle > button,
-  .range-middle > button:hover {
+  .range-middle>button,
+  .range-middle>button:hover {
     background-color: transparent;
     color: var(--foreground);
   }
@@ -249,7 +249,8 @@
   * color scheme - either by header or cookie, and set
   * a root html class accordingly
   */
-  :global(.dark) {
+  :global(.dark),
+  :global([data-theme="dark"]) {
     .select-content {
       background-color: var(--canvas-800);
       color: var(--foreground);
@@ -270,4 +271,4 @@
       opacity: 0.7;
     }
   }
-}
+}

package/src/components/forms/text-area.tsx

@@ -44,7 +44,7 @@ export const TextArea = function TextArea({
   ...rest
 }: TextAreaProps): React.JSX.Element {
   return (
-    <fieldset className={cx('text-area-wrapper', inputStyles['input-wrapper'])}>
+    <div className={cx('text-area-wrapper', inputStyles['input-wrapper'])}>
       {label != null && <Label id={id} htmlFor={id} required={required} label={label} />}
       <textarea
         ref={ref}
@@ -78,6 +78,6 @@ export const TextArea = function TextArea({
       ) : (
         helpText?.length > 0 && <HelpText text={helpText} />
       )}
-    </fieldset>
+    </div>
   )
 }

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

@@ -25,8 +25,7 @@ infonomic-components;
   }
 
   :global(.dark),
-  :global([data-theme="dark"]),
-  :global([data-theme="dark"]) ::backdrop {
+  :global([data-theme="dark"]) {
     .root {
       background: var(--canvas-800);
     }

package/src/components/overlay/overlay.module.css

@@ -1,45 +1,46 @@
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(245, 245, 245, 0.35);
-  z-index: 20;
-}
-
-:global(.dark),
-:global([data-theme="dark"]),
-:global([data-theme="dark"]) ::backdrop {
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
   .overlay {
-    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(245, 245, 245, 0.35);
+    z-index: 20;
   }
-}
 
-.animate-fade-in {
-  animation: fade-in 0.3s ease-in-out;
-}
-
-.animate-fade-out {
-  animation: fade-out 0.3s ease-in-out;
-}
+  :global(.dark) .overlay,
+  :global([data-theme="dark"]) .overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 
-@keyframes fade-in {
-  from {
-    opacity: 0;
+  .animate-fade-in {
+    animation: fade-in 0.3s ease-in-out;
   }
 
-  to {
-    opacity: 1;
+  .animate-fade-out {
+    animation: fade-out 0.3s ease-in-out;
   }
-}
 
-@keyframes fade-out {
-  from {
-    opacity: 1;
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
   }
 
-  to {
-    opacity: 0;
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
   }
 }

package/src/components/pager/pagination.module.css

@@ -138,7 +138,8 @@ infonomic-components;
   * color scheme - either by header or cookie, and set
   * a root html class accordingly
   */
-  :global(.dark) {
+  :global(.dark),
+  :global([data-theme="dark"]) {
 
     .ellipses,
     .number-button,

package/src/components/shimmer/shimmer.module.css

@@ -17,8 +17,7 @@ infonomic-components;
   }
 
   :global(.dark),
-  :global([data-theme="dark"]),
-  :global([data-theme="dark"]) ::backdrop {
+  :global([data-theme="dark"]) {
     .shimmer {
       background-color: #141414;
       background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);

package/src/components/table/table.module.css

@@ -1,12 +1,13 @@
 @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 {
+
   /* 'table--container break-normal overflow-hidden relative shadow-md rounded-md my-[16px] dark:border dark:border-canvas-700', */
   .table-container {
     display: block;
@@ -52,7 +53,8 @@
   .table-heading-cell {
     white-space: nowrap;
     padding: var(--spacing-8) var(--spacing-8);
-    font-size: 0.975rem; /* 15.6px */
+    font-size: 0.975rem;
+    /* 15.6px */
     /* text-transform: uppercase; */
     background-color: var(--canvas-50);
   }
@@ -79,7 +81,8 @@
   * color scheme - either by header or cookie, and set
   * a root html class accordingly
   */
-  :global(.dark) {
+  :global(.dark),
+  :global([data-theme="dark"]) {
     .table-header {
       background-color: var(--canvas-700);
     }
@@ -101,4 +104,4 @@
       background-color: var(--canvas-800);
     }
   }
-}
+}

package/src/icons/icons.module.css

@@ -97,8 +97,7 @@
   }
 
   :global(.dark),
-  :global([data-theme="dark"]),
-  :global([data-theme="dark"]) ::backdrop {
+  :global([data-theme="dark"]) {
     .stroke-gray {
       stroke: var(--gray-300);
     }

package/src/widgets/datepicker/datepicker.module.css

@@ -46,8 +46,7 @@
   }
 
   .dark,
-  [data-theme="dark"],
-  [data-theme="dark"]::backdrop {
+  [data-theme="dark"] {
     .content {
       background: var(--canvas-800);
     }