@infonomic/uikit 3.7.0 → 3.9.0

package/src/widgets/drawer/drawer.module.css

@@ -43,7 +43,7 @@
     width: 86%;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .drawer-depth-0.drawer-medium .drawer-container {
       width: 600px;
     }
@@ -71,9 +71,9 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding-top: var(--spacing-3);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
+    padding-top: var(--spacing-12);
+    padding-left: var(--spacing-12);
+    padding-right: var(--spacing-12);
     padding-bottom: 0;
     max-width: 100%;
   }
@@ -84,8 +84,8 @@
     justify-content: space-between;
     gap: var(--gap-3);
     padding-top: 0;
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
+    padding-left: var(--spacing-12);
+    padding-right: var(--spacing-12);
     max-width: 100%;
   }
 
@@ -95,7 +95,7 @@
   }
 
   .drawer-content {
-    padding: var(--spacing-6);
+    padding: var(--spacing-12);
   }
 
   @keyframes slideIn {

package/src/widgets/modal/modal.module.css

@@ -28,11 +28,11 @@
     bottom: 0;
     background-color: var(--surface-panel);
     border: 1px solid var(--border-color);
-    margin-left: var(--spacing-2);
-    margin-right: var(--spacing-2);
+    margin-left: var(--spacing-8);
+    margin-right: var(--spacing-8);
   }
 
-  @media screen and (min-width: 640px) {
+  @media screen and (min-width: 40rem) {
     .modal-container {
       max-height: calc(100vh - 24px);
       min-height: auto;
@@ -46,9 +46,9 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--gap-3);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
-    padding-top: var(--spacing-5);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-top: var(--spacing-20);
     max-width: 100%;
   }
 
@@ -62,9 +62,9 @@
     flex: 1;
     flex-direction: column;
     gap: var(--gap-3);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
-    padding-bottom: var(--spacing-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-bottom: var(--spacing-12);
     max-width: 100%;
   }
 
@@ -73,9 +73,9 @@
     align-items: center;
     justify-content: flex-end;
     gap: var(--gap-3);
-    padding-top: var(--spacing-2);
-    padding-bottom: var(--spacing-5);
-    padding-left: var(--spacing-6);
-    padding-right: var(--spacing-6);
+    padding-top: var(--spacing-8);
+    padding-bottom: var(--spacing-20);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
   }
 }

package/src/widgets/timeline/timeline.module.css

@@ -2,13 +2,13 @@
 
 @layer infonomic-components {
   .timeline {
-    margin-left: var(--spacing-2);
+    margin-left: var(--spacing-8);
   }
 
   .timeline-root {
     position: relative;
     list-style: none;
-    margin-left: var(--spacing-2);
+    margin-left: var(--spacing-8);
     padding-left: var(--spacing-8);
     border-left-width: var(--border-width-thin);
     border-left-color: var(--border-color);
@@ -16,7 +16,7 @@
   }
 
   .timeline-item {
-    margin: 0 0 var(--spacing-6) 0;
+    margin: 0 0 var(--spacing-16) var(--spacing-20);
   }
 
   /* 'absolute block flex items-center justify-center w-[36px] h-[36px] rounded-full -mt-[3px] sm:mt-0 -left-[18px] border-[6px] bg-secondary-600 dark:bg-secondary-900 border-gray-50 dark:border-canvas-600', */
@@ -53,8 +53,8 @@
   /* 'block mt-2 mb-2 text-[0.9em] font-medium leading-none text-gray-900 dark:text-gray-100' */
   .timeline-date {
     display: block;
-    margin-top: var(--spacing-2);
-    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
     font-size: 0.9em;
     font-weight: var(--font-weight-medium);
     line-height: 0;
@@ -64,13 +64,13 @@
   /* '[&_p]:m-0 [&_p]:mb-4 [&_p]:sm:m-0 [&_p]:sm:mb-4 text-lg font-normal text-gray-900 dark:text-gray-300' */
   .timeline-content {
     margin: 0;
-    margin-bottom: var(--spacing-4);
+    margin-bottom: var(--spacing-16);
     font-size: 1.125rem;
     font-weight: var(--font-weight-normal);
 
     & p {
       margin: 0;
-      margin-bottom: var(--spacing-4);
+      margin-bottom: var(--spacing-16);
     }
   }
 

package/src/styles/base/vars.css

@@ -1,189 +0,0 @@
-/* TODO: refactor to separate files for size, border, shadows, etc. */
-@layer infonomic-base {
-  :root {
-    /* ========================================
-       BREAKPOINTS
-    ======================================== */
-    --breakpoint-xs: 480px;
-    --breakpoint-sm: 640px;
-    --breakpoint-md: 768px;
-    --breakpoint-lg: 1050px;
-    /* our container component will set max width to common screen size */
-    --breakpoint-xl: 1230px;
-    --breakpoint-2xl: 1500px;
-
-    /* 12px */
-    --font-size-xs: 0.75rem;
-    /* 14px */
-    --font-size-sm: 0.875rem;
-    /* 16px */
-    --font-size-base: 1rem;
-    /* 18px */
-    --font-size-lg: 1.125rem;
-    /* 20px */
-    --font-size-xl: 1.25rem;
-    /* 24px */
-    --font-size-2xl: 1.5rem;
-    /* 30px */
-    --font-size-3xl: 1.875rem;
-    /* 36px */
-    --font-size-4xl: 2.25rem;
-    /* 42px */
-    --font-size-5xl: 2.625rem;
-    /* 48px */
-    --font-size-6xl: 3rem;
-    /* 54px */
-    --font-size-7xl: 3.375rem;
-    /* 60px */
-    --font-size-8xl: 3.75rem;
-
-
-    --font-weight-light: 300;
-    --font-weight-normal: 400;
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-    --font-weight-extrabold: 800;
-    --font-weight-ultrabold: 900;
-
-    --line-height-tight: 1.1;
-    --line-height-snug: 1.25;
-    --line-height-normal: 1.5;
-    --line-height-relaxed: 1.625;
-    --line-height-loose: 2;
-
-    --letter-spacing-tight: -0.02em;
-    --letter-spacing-normal: 0;
-    --letter-spacing-wide: 0.05em;
-
-    /* ========================================
-       SPACING SYSTEM (8px grid)
-    ======================================== */
-    --spacing-0: 0px;
-    --spacing-1: 4px;
-    --spacing-2: 8px;
-    --spacing-3: 12px;
-    --spacing-4: 16px;
-    --spacing-5: 20px;
-    --spacing-6: 24px;
-    --spacing-8: 32px;
-    --spacing-10: 40px;
-    --spacing-12: 48px;
-    --spacing-16: 64px;
-    --spacing-20: 80px;
-    --spacing-24: 96px;
-    --spacing-32: 128px;
-
-    /* ========================================
-       BORDER & RADIUS
-    ======================================== */
-    --border-radius-none: 0px;
-    --border-radius-sm: 4px;
-    --border-radius-md: 8px;
-    --border-radius-lg: 12px;
-    --border-radius-xl: 16px;
-    --border-radius-2xl: 24px;
-    --border-radius-full: 9999px;
-
-    --border-width-thin: 1px;
-    --border-width-normal: 2px;
-    --border-width-thick: 4px;
-
-    --border-style-solid: solid;
-    --border-style-dashed: dashed;
-    --border-style-dotted: dotted;
-
-    /* ========================================
-       RINGS
-    ======================================== */
-
-    --ring-offset-width: 2px;
-    --ring-inset: ;
-    --ring-shadow: 0 0 #0000;
-
-    /* ========================================
-       SHADOWS
-    ======================================== */
-
-    --shadow: 0 0 #0000;
-    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0px 6px 12px rgba(0, 0, 0, 0.15);
-    --shadow-xl: 0px 8px 16px rgba(0, 0, 0, 0.2);
-
-    /* ========================================
-       TRANSITIONS
-    ======================================== */
-    --transition-fast: 175ms ease-in-out;
-    --transition-normal: 230ms ease-in-out;
-    --transition-slow: 400ms ease-in-out;
-
-    /* ========================================
-       Z-INDEX SYSTEM
-    ======================================== */
-    --z-index-low: 10;
-    --z-index-medium: 100;
-    --z-index-high: 1000;
-    --z-index-modal: 1050;
-    --z-index-toast: 1100;
-
-    /* ========================================
-       OPACITY LEVELS
-    ======================================== */
-    --opacity-0: 0;
-    --opacity-25: 0.25;
-    --opacity-50: 0.5;
-    --opacity-75: 0.75;
-    --opacity-100: 1;
-
-    /* ========================================
-       GRID SYSTEM
-    ======================================== */
-    --grid-columns-2: 2;
-    --grid-columns-3: 3;
-    --grid-columns-4: 4;
-    --grid-columns-5: 5;
-    --grid-columns-6: 6;
-    --grid-columns-7: 7;
-    --grid-columns-8: 8;
-    --grid-columns-9: 9;
-    --grid-columns-10: 10;
-    --grid-columns-11: 11;
-    --grid-columns-12: 12;
-    --grid-gap-sm: 8px;
-    --grid-gap-md: 16px;
-    --grid-gap-lg: 24px;
-    --grid-column-size-xs: 240px;
-    --grid-column-size-sm: 260px;
-    --grid-column-size-md: 320px;
-    --grid-column-size-lg: 480px;
-
-    /* ========================================
-       GAP SYSTEM (For Grid & Flexbox)
-    ======================================== */
-    --gap-0: var(--spacing-0);
-    --gap-1: var(--spacing-1);
-    --gap-2: var(--spacing-2);
-    --gap-3: var(--spacing-3);
-    --gap-4: var(--spacing-4);
-    --gap-5: var(--spacing-5);
-    --gap-6: var(--spacing-6);
-    --gap-8: var(--spacing-8);
-    --gap-10: var(--spacing-10);
-    --gap-12: var(--spacing-12);
-    --gap-16: var(--spacing-16);
-    --gap-20: var(--spacing-20);
-    --gap-24: var(--spacing-24);
-    --gap-32: var(--spacing-32);
-
-    /* ========================================
-       FLEXBOX HELPERS
-    ======================================== */
-    --flex-row: row;
-    --flex-column: column;
-    --flex-wrap: wrap;
-    --flex-nowrap: nowrap;
-    --flex-center: center;
-  }
-}

package/src/styles/components/card.css

@@ -1,20 +0,0 @@
-.component--card {
-  background: var(--theme-25);
-  color: oklch(12.97% 0.005 285.67);
-  border: solid 1px var(--gray-50);
-}
-
-.component--card:is(.dark *) {
-  background: var(--canvas-800);
-  color: var(--gray-100);
-  border: solid 1px var(--canvas-700);
-}
-
-.component--card--hover:hover {
-  background: oklch(from var(--theme-50) 1 0.03 h);
-  transition: ease-in-out 200ms;
-}
-
-.component--card--hover:hover:is(.dark *) {
-  background: oklch(from var(--canvas-700) 0.258 c h);
-}

package/src/styles/components/checkbox.css

@@ -1,55 +0,0 @@
-/* Define keyframes for the "checked" state */
-@keyframes checkBoxIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-
-  50% {
-    opacity: 1;
-    transform: scale(1.2);
-    /* Overshoot */
-  }
-
-  80% {
-    transform: scale(0.9);
-    /* Slight bounce back */
-  }
-
-  100% {
-    transform: scale(1);
-    /* Settle */
-  }
-}
-
-/* Define keyframes for the "unchecked" state */
-@keyframes checkBoxOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-}
-
-.component--checkbox,
-.component--checkbox-icon {
-  transition: all ease-in-out 200ms;
-}
-
-/* Style for the "checked" state */
-.component--checkbox-indicator[data-state="checked"] .component--checkbox-icon {
-  animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Style for the "unchecked" state */
-.component--checkbox-indicator[data-state="unchecked"] .component--checkbox-icon {
-  animation: checkBoxOut 0.2s ease-in;
-  opacity: 0;
-  transform: scale(0.8);
-}

package/src/styles/components/directional-button.css

@@ -1,92 +0,0 @@
-.component--directional-button {
-  display: flex;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  text-decoration: none;
-  border-style: none;
-  border-radius: 20px;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  z-index: 20;
-  justify-content: center;
-  color: white;
-  background-color: var(--primary-500);
-  transition-property: all, color;
-  transition-duration: 0.3s, 1ms;
-  transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
-  transition-delay: 0s, 0s;
-  cursor: pointer;
-}
-
-.component--directional-button span {
-  width: 18px;
-  padding-bottom: 3px;
-}
-
-.component--directional-button span .icon path {
-  stroke: none;
-  fill: white;
-}
-
-@media screen and (min-width: 587px) {
-  .component--directional-button {
-    width: 42px;
-    height: 42px;
-    border-radius: 21px;
-  }
-}
-
-.component--directional-button:hover,
-.component--directional-button:focus {
-  color: white;
-  background-color: var(--primary-500);
-  transform: translateY(-5px);
-}
-
-/* Up is default so no need to rotate */
-.component--directional-button.up:hover,
-.component--directional-button.up:focus {
-  transform: translateY(-5px);
-}
-
-.component--directional-button.down span,
-.directional-button.down span {
-  transform: rotate(180deg);
-}
-
-.component--directional-button.down:hover,
-.component--directional-button.down:focus {
-  transform: translateY(5px);
-}
-
-.component--directional-button.left span,
-.component--directional-button.left span {
-  transform: rotate(-90deg);
-}
-
-.component--directional-button.left:hover,
-.component--directional-button.left:focus {
-  transform: translateX(-5px);
-}
-
-.component--directional-button.right span,
-.component--directional-button.right span {
-  transform: rotate(90deg);
-}
-
-.component--directional-button.right:hover,
-.component--directional-button.right:focus {
-  transform: translateX(5px);
-}
-
-.dark .component--directional-button {
-  background-color: var(--secondary-700);
-}
-
-.dark .component--directional-button:hover,
-.dark .component--directional-button:focus {
-  color: white;
-  background-color: var(--secondary-700);
-}

package/src/styles/components/dropdown.css

@@ -1,19 +0,0 @@
-.dropdown-menu-content[data-side="top"],
-.dropdown-menu-subcontent[data-side="top"] {
-  animation: slideDownAndFade 100ms ease-in;
-}
-
-.dropdown-menu-content[data-side="right"],
-.dropdown-menu-subcontent[data-side="right"] {
-  animation: slideLeftAndFade 100ms ease-in;
-}
-
-.dropdown-menu-content[data-side="bottom"],
-.dropdown-menu-subcontent[data-side="bottom"] {
-  animation: slideUpAndFade 100ms ease-in;
-}
-
-.dropdown-menu-content[data-side="left"],
-.dropdown-menu-subcontent[data-side="left"] {
-  animation: slideRightAndFade 100ms ease-in;
-}

package/src/styles/components/icon-element.css

@@ -1,10 +0,0 @@
-@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
-
-@layer infonomic-components {
-  .component--icon-element-root svg {
-    display: block;
-    margin: auto;
-    max-width: 100%;
-    max-height: 100%;
-  }
-}

package/src/styles/components/list-checkbox.css

@@ -1,60 +0,0 @@
-ul.check {
-  padding-left: 0;
-}
-
-.component--list-item-checkbox {
-  position: relative;
-  margin-left: 0;
-  margin-right: 8px;
-  padding-left: 28px;
-  padding-right: 24px;
-  list-style-type: none;
-  outline: none;
-}
-
-@media screen and (min-width: 768px) {
-  ul.check {
-    padding-left: 1rem;
-  }
-}
-
-.component--list-item-checkbox::before {
-  content: "";
-  width: 16px;
-  height: 16px;
-  top: 8px;
-  left: 0;
-  cursor: pointer;
-  display: block;
-  background-size: cover;
-  position: absolute;
-  border: 1px solid rgb(125, 125, 125);
-  border-radius: 2px;
-  background-repeat: no-repeat;
-}
-
-.component--list-item-checkbox-checked {
-  text-decoration: line-through;
-}
-
-.component--list-item-checkbox-checked::before {
-  border: 1px solid var(--secondary-300);
-  background-color: var(--secondary-400);
-  background-repeat: no-repeat;
-}
-
-.component--list-item-checkbox-checked::after {
-  content: "";
-  cursor: pointer;
-  border-color: #fff;
-  border-style: solid;
-  position: absolute;
-  display: block;
-  top: 11px;
-  width: 4px;
-  left: 6px;
-  right: 7px;
-  height: 8px;
-  transform: rotate(45deg);
-  border-width: 0 2px 2px 0;
-}

package/src/styles/components/popover.css

@@ -1,15 +0,0 @@
-.popover-content[data-state="open"][data-side="top"] {
-  animation: slideDownAndFade 100ms ease-in;
-}
-
-.popover-content[data-state="open"][data-side="right"] {
-  animation: slideLeftAndFade 100ms ease-in;
-}
-
-.popover-content[data-state="open"][data-side="bottom"] {
-  animation: slideUpAndFade 100ms ease-in;
-}
-
-.popover-content[data-state="open"][data-side="left"] {
-  animation: slideRightAndFade 100ms ease-in;
-}

package/src/styles/components/toast.css

@@ -1,18 +0,0 @@
-/* styles.css */
-
-.toast-viewport {
-  --viewport-padding: 25px;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  padding: var(--viewport-padding);
-  gap: 10px;
-  width: 100vw;
-  max-width: 100vw;
-  margin: 0;
-  list-style: none;
-  z-index: 2147483647;
-  outline: none;
-}

package/src/styles/theme/typography.css

@@ -1,26 +0,0 @@
-/* Simple headings spec if the optional typography layer is not imported */
-@layer infonomic-theme {
-  h1 {
-    font-size: 1.75rem;
-    font-weight: 600;
-    line-height: 1.125;
-  }
-
-  h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    line-height: 1.125;
-  }
-
-  h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.1;
-  }
-
-  h4 {
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.1;
-  }
-}