@infonomic/uikit 3.6.0 → 3.8.0

package/src/styles/{theme/tokens.css → functional/colors.css}

@@ -1,5 +1,7 @@
 /**
- * SEMANTIC TOKEN LAYER
+ * SEMANTIC / FUNCTIONAL TOKEN LAYER FOR COLORS
+ *
+ * TODO: Refactor into separate file per token category (e.g., buttons, alerts)
  * 
  * This layer provides intent-based semantic tokens that automatically switch
  * between light and dark modes. By defining tokens here (in infonomic-theme layer),
@@ -15,7 +17,7 @@
  * Example: --fill-primary-strong-hover
  */
 
-@layer infonomic-theme {
+@layer infonomic-functional {
   /* ===================================================================
      LIGHT MODE (default)
      =================================================================== */

package/src/styles/functional/functional.css

@@ -0,0 +1,2 @@
+@import "./colors.css";
+@import "./grid-flex.css";

package/src/styles/functional/grid-flex.css

@@ -0,0 +1,52 @@
+@layer infonomic-functional {
+  :root {
+    /* ========================================
+       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/styles.css

@@ -1,6 +1,7 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @import "./base/base.css";
+@import "./functional/functional.css";
 @import "./utils/utils.css";
 @import "./theme/theme.css";
 @import "./components/components.css";

package/src/styles/theme/theme.css

@@ -1,6 +1,6 @@
 @import "./autofill.css";
 @import "./scrollers.css";
-@import "./tokens.css";
+@import "./typography.css";
 
 @layer infonomic-theme {
   :root {

package/src/styles/theme/theme.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react-vite'
 
-export const Base = (): React.JSX.Element => {
+export const Default = (): React.JSX.Element => {
   return (
     <>
       <div style={{ marginBottom: '48px' }}>
@@ -27,7 +27,7 @@ const meta: Meta = {
    * to learn how to generate automatic titles
    */
   title: 'Theme',
-  component: Base,
+  component: Default,
 }
 
 export default meta

package/src/styles/theme/typography.css

@@ -0,0 +1,26 @@
+/* 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;
+  }
+}

package/src/styles/typography/prose.css

@@ -125,7 +125,7 @@
   }
 
   /* medium breakpoint */
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 48rem) {
 
     article,
     .dynamic-text {
@@ -395,7 +395,7 @@
     padding-bottom: 0;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
       font-size: 1.7rem;
       line-height: 1.2;

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

@@ -127,7 +127,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 +237,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:text-xs {
       font-size: var(--font-size-xs);
     }
@@ -450,7 +450,7 @@
     padding: var(--spacing-32);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .sm\:m-0 {
       margin: var(--spacing-0);
     }
@@ -552,7 +552,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:m-0 {
       margin: var(--spacing-0);
     }
@@ -685,7 +685,7 @@
     justify-content: var(--flex-center);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .sm\:flex {
       display: flex;
     }
@@ -715,7 +715,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:flex {
       display: flex;
     }
@@ -853,7 +853,7 @@
     gap: var(--gap-32);
   }
 
-  @media (min-width: 640px) {
+  @media (min-width: 40rem) {
     .sm\:grid {
       display: grid;
     }
@@ -923,7 +923,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
 
     .md\:grid {
       display: grid;
@@ -1042,7 +1042,7 @@
     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);
@@ -1089,7 +1089,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:border {
       border-width: var(--border-width-normal);
       border-style: var(--border-style-solid);
@@ -1163,7 +1163,7 @@
     box-shadow: var(--shadow-xl);
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:shadow {
       box-shadow: var(--shadow);
     }
@@ -1213,7 +1213,7 @@
     opacity: var(--opacity-100);
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .md\:opacity-0 {
       opacity: var(--opacity-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;
     }

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

@@ -32,7 +32,7 @@
     margin-right: var(--spacing-2);
   }
 
-  @media screen and (min-width: 640px) {
+  @media screen and (min-width: 40rem) {
     .modal-container {
       max-height: calc(100vh - 24px);
       min-height: auto;

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

@@ -1,4 +1,4 @@
-@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
   .timeline {

package/src/styles/base/vars.css

@@ -1,188 +0,0 @@
-@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-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%;
-  }
-}