@infonomic/uikit 3.7.0 → 3.9.0

package/src/styles/utils/utility-classes.css

@@ -1,4 +1,7 @@
-/* A simple utility class collection. NOT designed as a 
+/**
+ * UTILITY CLASSES
+ * 
+ * A simple utility class collection. NOT designed as a 
  * replacement for Tailwind - but useful for small or simple 
  * projects as well as uikit development.
  */
@@ -16,6 +19,120 @@
     border-width: 0;
   }
 
+  /* ========================================
+     THEME UTILITIES
+  ======================================== */
+
+  .background {
+    background-color: var(--background);
+  }
+
+  .foreground {
+    color: var(--foreground);
+  }
+
+  .text {
+    color: var(--text);
+  }
+  
+  .headings {
+    color: var(--headings);
+  }
+
+  .muted {
+    font-size: 0.925rem;
+    color: var(--muted);
+  }
+
+  /* External link */
+  .external-link::after {
+    content: "";
+    display: inline-block;
+    background-image: url("/external-link-light.svg");
+    background-repeat: no-repeat;
+    background-position: 20% 50%;
+    background-size: 65% auto;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: -5px;
+  }
+
+  .dark .external-link::after,
+   [data-theme="dark"] .external-link::after {
+    background-image: url("/external-link-dark.svg");
+  }
+
+  .primary-strong {
+    background-color: var(--fill-primary-strong);
+    color: var(--text-on-primary);
+  }
+
+  .primary-weak {
+    background-color: var(--fill-primary-weak);
+    color: var(--text-on-primary);
+  }
+
+  .secondary-strong {
+    background-color: var(--fill-secondary-strong);
+    color: var(--text-on-secondary);
+  }
+
+  .secondary-weak {
+    background-color: var(--fill-secondary-weak);
+    color: var(--text-on-secondary);
+  }
+
+  .accent-strong {
+    background-color: var(--fill-accent-strong);
+    color: var(--text-on-accent);
+  }
+
+  .accent-weak {
+    background-color: var(--fill-accent-weak);
+    color: var(--text-on-accent);
+  }
+
+  .info-strong {
+    background-color: var(--fill-info-strong);
+    color: var(--text-on-info);
+  }
+
+  .info-weak {
+    background-color: var(--fill-info-weak);
+    color: var(--text-on-info);
+  }
+
+  .success-strong {
+    background-color: var(--fill-success-strong);
+    color: var(--text-on-success);
+  }
+
+  .success-weak {
+    background-color: var(--fill-success-weak);
+    color: var(--text-on-success);
+  }
+
+  .warning-strong {
+    background-color: var(--fill-warning-strong);
+    color: var(--text-on-warning);
+  }
+
+  .warning-weak {
+    background-color: var(--fill-warning-weak);
+    color: var(--text-on-warning);
+  }
+
+  .danger-strong {
+    background-color: var(--fill-danger-strong);
+    color: var(--text-on-danger);
+  }
+
+  .danger-weak {
+    background-color: var(--fill-danger-weak);
+    color: var(--text-on-danger);
+  }
+
+
   /* ========================================
      TYPOGRAPHY UTILITIES
   ======================================== */
@@ -127,7 +244,7 @@
     letter-spacing: var(--letter-spacing-wide);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .sm\:text-xs {
       font-size: var(--font-size-xs);
     }
@@ -237,7 +354,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:text-xs {
       font-size: var(--font-size-xs);
     }
@@ -355,23 +472,23 @@
   }
 
   .m-1 {
-    margin: var(--spacing-1);
+    margin: var(--spacing-4);
   }
 
   .m-2 {
-    margin: var(--spacing-2);
+    margin: var(--spacing-8);
   }
 
   .m-3 {
-    margin: var(--spacing-3);
+    margin: var(--spacing-12);
   }
 
   .m-4 {
-    margin: var(--spacing-4);
+    margin: var(--spacing-16);
   }
 
   .m-5 {
-    margin: var(--spacing-5);
+    margin: var(--spacing-20);
   }
 
   .m-6 {
@@ -383,15 +500,15 @@
   }
 
   .m-10 {
-    margin: var(--spacing-10);
+    margin: var(--spacing-40);
   }
 
   .m-12 {
-    margin: var(--spacing-12);
+    margin: var(--spacing-48);
   }
 
   .m-16 {
-    margin: var(--spacing-16);
+    margin: var(--spacing-64);
   }
 
   .p-0 {
@@ -399,23 +516,23 @@
   }
 
   .p-1 {
-    padding: var(--spacing-1);
+    padding: var(--spacing-4);
   }
 
   .p-2 {
-    padding: var(--spacing-2);
+    padding: var(--spacing-8);
   }
 
   .p-3 {
-    padding: var(--spacing-3);
+    padding: var(--spacing-12);
   }
 
   .p-4 {
-    padding: var(--spacing-4);
+    padding: var(--spacing-16);
   }
 
   .p-5 {
-    padding: var(--spacing-5);
+    padding: var(--spacing-20);
   }
 
   .p-6 {
@@ -427,52 +544,52 @@
   }
 
   .p-10 {
-    padding: var(--spacing-10);
+    padding: var(--spacing-40);
   }
 
   .p-12 {
-    padding: var(--spacing-12);
+    padding: var(--spacing-48);
   }
 
   .p-16 {
-    padding: var(--spacing-16);
+    padding: var(--spacing-64);
   }
 
   .p-20 {
-    padding: var(--spacing-20);
+    padding: var(--spacing-80);
   }
 
   .p-24 {
-    padding: var(--spacing-24);
+    padding: var(--spacing-96);
   }
 
   .p-32 {
-    padding: var(--spacing-32);
+    padding: var(--spacing-128);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .sm\:m-0 {
       margin: var(--spacing-0);
     }
 
     .sm\:m-1 {
-      margin: var(--spacing-1);
+      margin: var(--spacing-4);
     }
 
     .sm\:m-2 {
-      margin: var(--spacing-2);
+      margin: var(--spacing-8);
     }
 
     .sm\:m-3 {
-      margin: var(--spacing-3);
+      margin: var(--spacing-12);
     }
 
     .sm\:m-4 {
-      margin: var(--spacing-4);
+      margin: var(--spacing-16);
     }
 
     .sm\:m-5 {
-      margin: var(--spacing-5);
+      margin: var(--spacing-20);
     }
 
     .sm\:m-6 {
@@ -484,15 +601,15 @@
     }
 
     .sm\:m-10 {
-      margin: var(--spacing-10);
+      margin: var(--spacing-40);
     }
 
     .sm\:m-12 {
-      margin: var(--spacing-12);
+      margin: var(--spacing-48);
     }
 
     .sm\:m-16 {
-      margin: var(--spacing-16);
+      margin: var(--spacing-64);
     }
 
     .sm\:p-0 {
@@ -500,23 +617,23 @@
     }
 
     .sm\:p-1 {
-      padding: var(--spacing-1);
+      padding: var(--spacing-4);
     }
 
     .sm\:p-2 {
-      padding: var(--spacing-2);
+      padding: var(--spacing-8);
     }
 
     .sm\:p-3 {
-      padding: var(--spacing-3);
+      padding: var(--spacing-12);
     }
 
     .sm\:p-4 {
-      padding: var(--spacing-4);
+      padding: var(--spacing-16);
     }
 
     .sm\:p-5 {
-      padding: var(--spacing-5);
+      padding: var(--spacing-20);
     }
 
     .sm\:p-6 {
@@ -528,53 +645,53 @@
     }
 
     .sm\:p-10 {
-      padding: var(--spacing-10);
+      padding: var(--spacing-40);
     }
 
     .sm\:p-12 {
-      padding: var(--spacing-12);
+      padding: var(--spacing-48);
     }
 
     .sm\:p-16 {
-      padding: var(--spacing-16);
+      padding: var(--spacing-64);
     }
 
     .sm\:p-20 {
-      padding: var(--spacing-20);
+      padding: var(--spacing-80);
     }
 
     .sm\:p-24 {
-      padding: var(--spacing-24);
+      padding: var(--spacing-96);
     }
 
     .sm\:p-32 {
-      padding: var(--spacing-32);
+      padding: var(--spacing-128);
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:m-0 {
       margin: var(--spacing-0);
     }
 
     .md\:m-1 {
-      margin: var(--spacing-1);
+      margin: var(--spacing-4);
     }
 
     .md\:m-2 {
-      margin: var(--spacing-2);
+      margin: var(--spacing-8);
     }
 
     .md\:m-3 {
-      margin: var(--spacing-3);
+      margin: var(--spacing-12);
     }
 
     .md\:m-4 {
-      margin: var(--spacing-4);
+      margin: var(--spacing-16);
     }
 
     .md\:m-5 {
-      margin: var(--spacing-5);
+      margin: var(--spacing-20);
     }
 
     .md\:m-6 {
@@ -586,15 +703,15 @@
     }
 
     .md\:m-10 {
-      margin: var(--spacing-10);
+      margin: var(--spacing-40);
     }
 
     .md\:m-12 {
-      margin: var(--spacing-12);
+      margin: var(--spacing-48);
     }
 
     .md\:m-16 {
-      margin: var(--spacing-16);
+      margin: var(--spacing-64);
     }
 
     .md\:p-0 {
@@ -602,23 +719,23 @@
     }
 
     .md\:p-1 {
-      padding: var(--spacing-1);
+      padding: var(--spacing-4);
     }
 
     .md\:p-2 {
-      padding: var(--spacing-2);
+      padding: var(--spacing-8);
     }
 
     .md\:p-3 {
-      padding: var(--spacing-3);
+      padding: var(--spacing-12);
     }
 
     .md\:p-4 {
-      padding: var(--spacing-4);
+      padding: var(--spacing-16);
     }
 
     .md\:p-5 {
-      padding: var(--spacing-5);
+      padding: var(--spacing-20);
     }
 
     .md\:p-6 {
@@ -630,27 +747,27 @@
     }
 
     .md\:p-10 {
-      padding: var(--spacing-10);
+      padding: var(--spacing-40);
     }
 
     .md\:p-12 {
-      padding: var(--spacing-12);
+      padding: var(--spacing-48);
     }
 
     .md\:p-16 {
-      padding: var(--spacing-16);
+      padding: var(--spacing-64);
     }
 
     .md\:p-20 {
-      padding: var(--spacing-20);
+      padding: var(--spacing-80);
     }
 
     .md\:p-24 {
-      padding: var(--spacing-24);
+      padding: var(--spacing-96);
     }
 
     .md\:p-32 {
-      padding: var(--spacing-32);
+      padding: var(--spacing-128);
     }
   }
 
@@ -685,7 +802,7 @@
     justify-content: var(--flex-center);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .sm\:flex {
       display: flex;
     }
@@ -715,7 +832,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:flex {
       display: flex;
     }
@@ -853,7 +970,7 @@
     gap: var(--gap-32);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .sm\:grid {
       display: grid;
     }
@@ -923,7 +1040,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
 
     .md\:grid {
       display: grid;
@@ -1000,14 +1117,19 @@
   .border {
     border-width: var(--border-width-normal);
     border-style: var(--border-style-solid);
+    border-color: var(--border-color)
   }
 
   .border-thin {
     border-width: var(--border-width-thin);
+    border-style: var(--border-style-solid);
+    border-color: var(--border-color)
   }
 
   .border-thick {
     border-width: var(--border-width-thick);
+    border-style: var(--border-style-solid);
+    border-color: var(--border-color)
   }
 
   .rounded-none {
@@ -1042,18 +1164,23 @@
     border-radius: var(--border-radius-full);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .sm\:border {
       border-width: var(--border-width-normal);
       border-style: var(--border-style-solid);
+      border-color: var(--border-color);
     }
 
     .sm\:border-thin {
       border-width: var(--border-width-thin);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
     }
 
     .sm\:border-thick {
       border-width: var(--border-width-thick);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
     }
 
     .sm\:rounded-none {
@@ -1089,18 +1216,23 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:border {
       border-width: var(--border-width-normal);
       border-style: var(--border-style-solid);
+      border-color: var(--border-color);
     }
 
     .md\:border-thin {
       border-width: var(--border-width-thin);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
     }
 
     .md\:border-thick {
       border-width: var(--border-width-thick);
+      border-style: var(--border-style-solid);
+      border-color: var(--border-color);
     }
 
     .md\:rounded-none {
@@ -1163,7 +1295,7 @@
     box-shadow: var(--shadow-xl);
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:shadow {
       box-shadow: var(--shadow);
     }
@@ -1213,7 +1345,7 @@
     opacity: var(--opacity-100);
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:opacity-0 {
       opacity: var(--opacity-0);
     }

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

@@ -13,10 +13,10 @@
   .content {
     width: 100%;
     border-radius: 4px;
-    padding-top: var(--spacing-4);
-    padding-bottom: var(--spacing-2);
-    padding-left: var(--spacing-2);
-    padding-right: var(--spacing-1);
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-8);
+    padding-left: var(--spacing-8);
+    padding-right: var(--spacing-4);
     background-color: var(--background);
     border: 1px solid var(--border-color);
     box-shadow: var(--shadow-md);
@@ -52,7 +52,7 @@
   .content-components {
     display: flex;
     width: 100%;
-    gap: var(--spacing-2);
+    gap: var(--spacing-8);
   }
 
 
@@ -67,8 +67,8 @@
   .content-status {
     display: flex;
     align-items: center;
-    padding-left: var(--spacing-4);
-    padding-right: var(--spacing-2);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-8);
     font-size: var(--font-size-sm);
     color: var(--foreground);
     width: 100%;
@@ -78,10 +78,10 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin-top: var(--spacing-3);
-    padding-left: var(--spacing-4);
+    margin-top: var(--spacing-12);
+    padding-left: var(--spacing-16);
     padding-right: var(--spacing-6);
-    gap: var(--spacing-2);
+    gap: var(--spacing-8);
     width: 100%;
   }
 
@@ -124,13 +124,13 @@
 
   .time-picker-scroll-area {
     height: 280px;
-    padding-right: var(--spacing-4)
+    padding-right: var(--spacing-16)
   }
 
   .time-picker {
     display: flex;
-    padding-left: var(--spacing-1);
-    padding-right: var(--spacing-1);
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
     flex-direction: column;
     gap: 0.5rem;
   }

package/src/widgets/datepicker/datepicker.tsx

@@ -132,7 +132,7 @@ export function DatePicker({
 
   return (
     <div className={cx(styles.container, containerClassName)}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-2)' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-8)' }}>
         <Input
           id={id}
           label={label}
@@ -278,7 +278,7 @@ export function DatePicker({
                     Today
                   </Button>
                 </div>
-                <div style={{ display: 'flex', gap: 'var(--spacing-3)' }}>
+                <div style={{ display: 'flex', gap: 'var(--spacing-12)' }}>
                   <Button
                     size="sm"
                     intent="noeffect"