@infonomic/uikit 3.8.0 → 3.10.0

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

@@ -51,7 +51,7 @@
     display: flex;
     align-items: start;
     width: 100%;
-    margin-bottom: var(--spacing-2);
+    margin-bottom: var(--spacing-8);
     gap: var(--gap-2);
   }
 
@@ -74,37 +74,37 @@
 
   /* Intents */
   .primary {
-    --alert-border: var(--primary-300);
-    --alert-background: oklch(from var(--primary-500) l c h / 0.1);
+    --alert-border: var(--stroke-primary);
+    --alert-background: var(--fill-primary-weak);
   }
 
   .secondary {
-    --alert-border: var(--secondary-300);
-    --alert-background: oklch(from var(--secondary-500) l c h / 0.1);
+    --alert-border: var(--stroke-secondary);
+    --alert-background: var(--fill-secondary-weak);
   }
 
   .noeffect {
-    --alert-border: var(--gray-300);
-    --alert-background: oklch(from var(--gray-500) l c h / 0.1);
+    --alert-border: var(--stroke-noeffect);
+    --alert-background: var(--fill-noeffect-weak);
   }
 
   .success {
-    --alert-border: var(--green-300);
-    --alert-background: oklch(from var(--green-500) l c h / 0.1);
+    --alert-border: var(--stroke-success);
+    --alert-background: var(--fill-success-weak);
   }
 
   .info {
-    --alert-border: var(--blue-300);
-    --alert-background: oklch(from var(--blue-500) l c h / 0.1);
+    --alert-border: var(--stroke-info);
+    --alert-background: var(--fill-info-weak);
   }
 
   .warning {
-    --alert-border: var(--yellow-300);
-    --alert-background: oklch(from var(--yellow-500) l c h / 0.1);
+    --alert-border: var(--stroke-warning);
+    --alert-background: var(--fill-warning-weak);
   }
 
   .danger {
-    --alert-border: var(--red-300);
-    --alert-background: oklch(from var(--red-500) l c h / 0.1);
+    --alert-border: var(--stroke-danger);
+    --alert-background: var(--fill-danger-weak);
   }
 }

package/src/components/notifications/alert.stories.tsx

@@ -7,7 +7,7 @@ import { Alert as AlertComponent } from './alert.js'
 
 export const Alerts = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '600px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
       {intent.map((intent: Intent) => {
         if (intent !== 'noeffect') {
           return (

package/src/components/notifications/toast.stories.tsx

@@ -15,7 +15,7 @@ export const Toast = (): React.JSX.Element => {
   }
 
   return (
-    <div className="mb-6 max-w-[600px]">
+    <div style={{ maxWidth: '600px', margin: '2rem 0' }}>
       <Button onClick={handleOpenToastClick}>Open Toast</Button>
       <ToastComponent
         title="Note"

package/src/components/pager/pagination.stories.tsx

@@ -32,7 +32,7 @@ const DefaultPager = (): React.JSX.Element => {
         }
       `}
       </style>
-      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
         <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
         <EventPager
           page={page}
@@ -83,7 +83,7 @@ const ClassicPager = (): React.JSX.Element => {
         }
       `}
       </style>
-      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
         <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
         <EventPager
           variant="classic"
@@ -137,7 +137,7 @@ const DashboardPager = (): React.JSX.Element => {
         }
       `}
       </style>
-      <div style={{ marginBottom: '2rem', maxWidth: '600px' }}>
+      <div style={{ margin: '2rem 0', maxWidth: '600px' }}>
         <p style={{ marginBottom: '1rem' }}>Stateful Pagers: Current page: {page}</p>
         <EventPager
           variant="dashboard"

package/src/components/scroll-area/scroll-area.stories.tsx

@@ -17,7 +17,7 @@ const TAGS = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length
 
 export const ScrollArea = (): React.JSX.Element => {
   return (
-    <div style={{ height: '100vh' }}>
+    <div style={{ height: '100vh', margin: '2rem 0' }}>
       <ScrollAreaComponent
         style={{ width: '200px', height: '300px', margin: '0 auto', border: '1px solid #ccc' }}
       >

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

@@ -47,7 +47,7 @@
   /* 'whitespace-nowrap px-2 py-4 text-sm text-gray-700 uppercase bg-canvas-100/50 dark:bg-canvas-800/50 dark:text-gray-200', */
   .table-heading-cell {
     white-space: nowrap;
-    padding: var(--spacing-2) var(--spacing-2);
+    padding: var(--spacing-8) var(--spacing-8);
     font-size: 0.975rem; /* 15.6px */
     /* text-transform: uppercase; */
     background-color: var(--canvas-50);
@@ -55,7 +55,7 @@
 
   /* not-prose px-2 py-2 text-sm [&_a]:underline */
   .table-cell {
-    padding: var(--spacing-2);
+    padding: var(--spacing-8);
     font-size: var(--font-size-sm);
 
     & a {

package/src/components/table/table.stories.tsx

@@ -18,7 +18,7 @@ export default meta
 
 export const Table = (): React.JSX.Element => {
   return (
-    <div style={{ maxWidth: '960px', margin: '0 auto' }}>
+    <div style={{ maxWidth: '960px', margin: '2rem auto' }}>
       <TableComponent.Container>
         <TableComponent>
           <TableComponent.Header>

package/src/components/tabs/tabs.module.css

@@ -4,9 +4,9 @@
 
   .tabs-root {
     display: flex;
-    padding: var(--spacing-2);
+    padding: var(--spacing-8);
     flex-direction: column;
-    gap: var(--spacing-1);
+    gap: var(--spacing-4);
     border-radius: var(--border-radius-md);
     border: 1px solid var(--border-color);
   }
@@ -17,7 +17,7 @@
     gap: var(--gap-2);
     align-items: center;
     border-radius: var(--border-radius-md);
-    padding: var(--spacing-1);
+    padding: var(--spacing-4);
     border: 1px solid var(--border-color);
 
     &:focus-visible {
@@ -40,12 +40,14 @@
 
     &:focus {
       position: relative;
-      box-shadow: 0 0 0 2px black;
+      /* NOTE: will override ring shadows for buttons */
+      /* Will revisit as we're going to rewrite our uikit tabs component */
+      /* box-shadow: 0 0 0 2px black; */
     }
   }
 
   .tabs-content {
-    margin-top: var(--spacing-2);
+    margin-top: var(--spacing-8);
     padding: 6px;
     outline: none;
 

package/src/components/tabs/tabs.stories.tsx

@@ -20,7 +20,7 @@ export const Tabs = (): React.JSX.Element => (
   <div
     style={{
       maxWidth: '700px',
-      marginBottom: '24px',
+      margin: '2rem auto',
       display: 'flex',
       justifyContent: 'center',
     }}

package/src/loaders/loaders.stories.tsx

@@ -1,8 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type React from 'react'
 
-import { LoaderEllipsis } from './ellipses.js'
 import { LoaderRing } from './ring.js'
+import { LoaderEllipsis } from './ellipses.js'
 import { LoaderSpinner } from './spinner.js'
 
 interface LoaderProps {

package/src/styles/base/base.css

@@ -7,6 +7,7 @@
 @import "./opacity.css";
 @import "./shadows.css";
 @import "./spacing.css";
+@import "./size.css";
 @import "./transitions.css";
 @import "./typography.css";
 @import "./z-index.css";

package/src/styles/base/size.css

@@ -0,0 +1,24 @@
+@layer infonomic-base {
+  :root {
+  --size-0: 0;
+  --size-2: 0.125rem;
+  --size-4: 0.25rem;
+  --size-6: 0.375rem;
+  --size-8: 0.5rem;
+  --size-12: 0.75rem;
+  --size-16: 1rem;
+  --size-20: 1.25rem;
+  --size-24: 1.5rem;
+  --size-28: 1.75rem;
+  --size-32: 2rem;
+  --size-36: 2.25rem;
+  --size-40: 2.5rem;
+  --size-44: 2.75rem;
+  --size-48: 3rem;
+  --size-64: 4rem;
+  --size-80: 5rem;
+  --size-96: 6rem;
+  --size-112: 7rem;
+  --size-128: 8rem;
+  }
+}

package/src/styles/base/spacing.css

@@ -1,21 +1,24 @@
 @layer infonomic-base {
   :root {
-    /* ========================================
-       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;
+  --spacing-0: 0;
+  --spacing-2: 0.125rem;
+  --spacing-4: 0.25rem;
+  --spacing-6: 0.375rem;
+  --spacing-8: 0.5rem;
+  --spacing-12: 0.75rem;
+  --spacing-16: 1rem;
+  --spacing-20: 1.25rem;
+  --spacing-24: 1.5rem;
+  --spacing-28: 1.75rem;
+  --spacing-32: 2rem;
+  --spacing-36: 2.25rem;
+  --spacing-40: 2.5rem;
+  --spacing-44: 2.75rem;
+  --spacing-48: 3rem;
+  --spacing-64: 4rem;
+  --spacing-80: 5rem;
+  --spacing-96: 6rem;
+  --spacing-112: 7rem;
+  --spacing-128: 8rem;
   }
 }

package/src/styles/functional/borders.css

@@ -0,0 +1,23 @@
+/**
+ * BORDER FUNCTIONAL TOKENS
+ * 
+ * Semantic tokens for borders, including colors and potentially
+ * widths, styles, and radii in the future.
+ */
+
+@layer infonomic-functional {
+  :root {
+    --border-color: var(--gray-100);
+  }
+
+  /* Dark mode */
+  .dark,
+  [data-theme="dark"] {
+    --border-color: var(--canvas-600);
+  }
+
+  /* Force light mode (local override) */
+  .not-dark {
+    --border-color: var(--gray-100);
+  }
+}

package/src/styles/functional/colors.css

@@ -26,28 +26,28 @@
        ----------------------------------------------------------------- */
     
     /* Fill tokens - for solid backgrounds (filled variant) */
-    --fill-primary-strong: var(--primary-600);
-    --fill-primary-strong-hover: oklch(from var(--primary-600) calc(l * 0.9) c h);
-    --fill-primary-strong-disabled: oklch(from var(--primary-600) calc(l * 1.1) calc(c * 0.85) h);
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * 0.85) h);
     
     /* Weak fill - for subtle backgrounds (outlined hover states) */
-    --fill-primary-weak: oklch(from var(--primary-600) calc(l * 2.15) calc(c * 0.2) h);
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h);
     --fill-primary-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
     
     /* Text tokens - for foreground colors */
     --text-on-primary: white; /* Text on primary fill */
     --text-on-primary-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
-    --text-primary-strong: var(--primary-700); /* Primary-colored text (outlined, text variants) */
-    --text-primary-weak: oklch(from var(--primary-600) calc(l * 0.7) c h); /* Muted primary text */
-    --text-primary-disabled: oklch(from var(--primary-700) calc(l * 1.5) calc(c * 0.5) h);
+    --text-primary-strong: var(--primary-600); /* Primary-colored text (outlined, text variants) */
+    --text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h); /* Muted primary text */
+    --text-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
     
     /* Stroke tokens - for borders */
-    --stroke-primary: var(--primary-700);
-    --stroke-primary-hover: oklch(from var(--primary-700) calc(l * 0.85) c h);
-    --stroke-primary-disabled: oklch(from var(--primary-700) calc(l * 1.5) calc(c * 0.8) h);
+    --stroke-primary: var(--primary-600);
+    --stroke-primary-hover: oklch(from var(--primary-600) calc(l * 0.85) c h);
+    --stroke-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.8) h);
     
     /* Ring tokens - for focus states */
-    --ring-primary: var(--primary-600);
+    --ring-primary: var(--primary-500);
     
     /* Gradient tokens */
     --gradient-primary-start: var(--primary-500);
@@ -210,53 +210,38 @@
     --gradient-danger-end: var(--red-700);
     --gradient-danger-foreground: white;
     --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
-
-    /* SURFACE TOKENS (for panels, dropdowns, menus, lists)
-       ----------------------------------------------------------------- */
-    
-    /* Panel/container backgrounds */
-    --surface-panel: var(--canvas-25);
-    --surface-panel-elevated: white; /* For dropdowns/popovers with shadow */
-    --surface-panel-border: var(--border-color);
-    
-    /* Item backgrounds (default transparent, inherits panel) */
-    --surface-item: transparent;
-    --surface-item-hover: var(--canvas-50);
-    --surface-item-active: var(--canvas-100);
-    
-    /* Item text colors */
-    --surface-item-text: var(--text);
-    --surface-item-text-hover: var(--text);
-    --surface-item-text-active: var(--text);
-    --surface-item-text-disabled: var(--gray-400);
-
-    /* Panel scrollers */
-    --surface-panel-scrollbar: var(--gray-50);
-    --surface-panel-scrollbar-thumb: var(--primary-100);
     
   }
 
-  /* ===================================================================
-     DARK MODE
-     =================================================================== */
-  .dark {
+  
+  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute. 
+   * We rely on the consuming application to detect a user's 
+   * preferred color scheme - either by header or cookie, and to set 
+   * a root html class accordingly (for now), which unfortunately means
+   * relying on either a server-side render or JS to set the theme
+   * on initial load.
+   */
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"] ::backdrop
+  {
     /* PRIMARY INTENT TOKENS (Dark Mode)
        ----------------------------------------------------------------- */
     
     /* Fill tokens */
-    --fill-primary-strong: var(--primary-600);
-    --fill-primary-strong-hover: oklch(from var(--primary-600) calc(l * 0.9) c h);
-    --fill-primary-strong-disabled: oklch(from var(--primary-600) calc(l * 0.85) calc(c * 0.85) h);
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 0.85) calc(c * 0.85) h);
     
     /* Weak fill - adjusted for dark backgrounds */
-    --fill-primary-weak: oklch(from var(--primary-600) calc(l * 0.45) calc(c * 0.1) h);
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 0.45) calc(c * 0.1) h);
     --fill-primary-weak-hover: var(--canvas-800);
     
     /* Text tokens */
     --text-on-primary: white; /* Same as light mode */
     --text-on-primary-disabled: oklch(from white calc(l * 0.85) calc(c * 0.85) h);
     --text-primary-strong: var(--primary-100); /* Lighter for dark backgrounds */
-    --text-primary-weak: var(--primary-600); /* Used for text variant */
+    --text-primary-weak: var(--primary-500); /* Used for text variant */
     --text-primary-disabled: oklch(from var(--primary-100) calc(l * 0.8) calc(c * 0.8) h);
     
     /* Stroke tokens */
@@ -265,7 +250,7 @@
     --stroke-primary-disabled: oklch(from var(--primary-500) calc(l * 0.8) calc(c * 0.8) h);
     
     /* Ring tokens */
-    --ring-primary: var(--primary-600);
+    --ring-primary: var(--primary-500);
     
     /* Gradient tokens */
     --gradient-primary-start: var(--primary-500);
@@ -424,70 +409,42 @@
     --gradient-danger-foreground: white;
     --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 0.85) calc(c * 0.85) h);
 
-    /* SURFACE TOKENS (Dark Mode)
-       ----------------------------------------------------------------- */
-    
-    /* Panel/container backgrounds - slightly elevated from canvas-900 base */
-    --surface-panel: var(--canvas-800);
-    --surface-panel-elevated: var(--canvas-800);
-    --surface-panel-border: var(--border-color);
-    
-    /* Item backgrounds - lighter than panel for hover/active */
-    --surface-item: transparent;
-    --surface-item-hover: var(--canvas-700);
-    --surface-item-active: var(--canvas-600);
-    
-    /* Item text colors */
-    --surface-item-text: var(--text);
-    --surface-item-text-hover: var(--text);
-    --surface-item-text-active: var(--text);
-    --surface-item-text-disabled: var(--gray-500);
-
-    /* Panel scrollers */
-    --surface-panel-scrollbar: var(--canvas-700);
-    --surface-panel-scrollbar-thumb: var(--primary-400);
   }
 
   /* ===================================================================
-     .NOT-DARK OVERRIDE
-  }
-
-  /* .not-dark override: Forces light mode tokens by re-declaring :root values.
-  * This duplication is intentional - it ensures .not-dark always wins over .dark
-  * regardless of DOM order, without needing complex :not() selectors.
-  * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
+   * .NOT-DARK OVERRIDE
+   * .not-dark override: Forces light mode tokens by re-declaring :root values.
+   * This duplication is intentional - it ensures .not-dark always wins over .dark
+   * regardless of DOM order, without needing complex :not() selectors.
+   * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
   */
-
-  /* ===================================================================
-     .NOT-DARK OVERRIDE
-     Forces light mode tokens regardless of parent .dark class
-     =================================================================== */
   .not-dark {
     /* PRIMARY INTENT TOKENS (Force Light Mode)
        ----------------------------------------------------------------- */
     
-    /* Fill tokens - identical to :root light mode */
-    --fill-primary-strong: var(--primary-600);
-    --fill-primary-strong-hover: oklch(from var(--primary-600) calc(l * 0.9) c h);
-    --fill-primary-strong-disabled: oklch(from var(--primary-600) calc(l * 1.1) calc(c * 0.85) h);
+    /* Fill tokens - for solid backgrounds (filled variant) */
+    --fill-primary-strong: var(--primary-500);
+    --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
+    --fill-primary-strong-disabled: oklch(from var(--primary-500) calc(l * 1.1) calc(c * 0.85) h);
     
-    --fill-primary-weak: oklch(from var(--primary-600) calc(l * 2.15) calc(c * 0.2) h);
+    /* Weak fill - for subtle backgrounds (outlined hover states) */
+    --fill-primary-weak: oklch(from var(--primary-500) calc(l * 2.04) calc(c * 0.2) h);
     --fill-primary-weak-hover: oklch(from var(--canvas-50) calc(l * 0.995) c h);
     
-    /* Text tokens */
-    --text-on-primary: white;
+    /* Text tokens - for foreground colors */
+    --text-on-primary: white; /* Text on primary fill */
     --text-on-primary-disabled: oklch(from white calc(l * 0.9) calc(c * 0.85) h);
-    --text-primary-strong: var(--primary-700);
-    --text-primary-weak: oklch(from var(--primary-600) calc(l * 0.7) c h);
-    --text-primary-disabled: oklch(from var(--primary-700) calc(l * 1.5) calc(c * 0.5) h);
+    --text-primary-strong: var(--primary-600); /* Primary-colored text (outlined, text variants) */
+    --text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h); /* Muted primary text */
+    --text-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
     
-    /* Stroke tokens */
-    --stroke-primary: var(--primary-700);
-    --stroke-primary-hover: oklch(from var(--primary-700) calc(l * 0.85) c h);
-    --stroke-primary-disabled: oklch(from var(--primary-700) calc(l * 1.5) calc(c * 0.8) h);
+    /* Stroke tokens - for borders */
+    --stroke-primary: var(--primary-600);
+    --stroke-primary-hover: oklch(from var(--primary-600) calc(l * 0.85) c h);
+    --stroke-primary-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.8) h);
     
-    /* Ring tokens */
-    --ring-primary: var(--primary-600);
+    /* Ring tokens - for focus states */
+    --ring-primary: var(--primary-500);
     
     /* Gradient tokens */
     --gradient-primary-start: var(--primary-500);

package/src/styles/functional/functional.css

@@ -1,2 +1,5 @@
 @import "./colors.css";
+@import "./surfaces.css";
+@import "./typography.css";
+@import "./borders.css";
 @import "./grid-flex.css";

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

@@ -26,19 +26,19 @@
        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-1: var(--spacing-4);
+    --gap-2: var(--spacing-8);
+    --gap-3: var(--spacing-12);
+    --gap-4: var(--spacing-16);
+    --gap-5: var(--spacing-20);
     --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);
+    --gap-10: var(--spacing-40);
+    --gap-12: var(--spacing-48);
+    --gap-16: var(--spacing-64);
+    --gap-20: var(--spacing-80);
+    --gap-24: var(--spacing-96);
+    --gap-32: var(--spacing-128);
 
     /* ========================================
        FLEXBOX HELPERS