@infonomic/uikit 6.5.1 → 6.6.0

package/src/styles/functional/shadcn-compat.css

@@ -0,0 +1,120 @@
+/**
+ * SHADCN COMPATIBILITY ALIAS LAYER
+ *
+ * Additive translation layer that maps Infonomic semantic tokens onto the
+ * naming ShadCN-style UI snippets and AI-generated markup expect. The
+ * Infonomic token model remains the source of truth - these aliases are
+ * strictly for compatibility with consumer apps that register Tailwind
+ * semantic utilities (bg-card, text-muted-foreground, border-border, etc.).
+ *
+ * Important notes on mapping intent:
+ * - ShadCN `accent` is an interactive neutral surface, NOT a brand accent.
+ *   It is mapped to --surface-subtle-hover, not --accent.
+ * - ShadCN `muted` is a subdued surface, NOT Infonomic's --muted text token.
+ *   Surface aliases use --surface-subtle*; text aliases use --text-subtle.
+ * - ShadCN `primary` is a high-emphasis action surface, matched to
+ *   --fill-primary-strong (not the raw --primary palette token).
+ *
+ * This file is imported after the rest of the functional layer so the
+ * aliases always resolve against the current mode's semantic values.
+ */
+
+@layer infonomic-functional {
+  :root {
+    --shadcn-background: var(--background);
+    --shadcn-foreground: var(--foreground);
+
+    --shadcn-card: var(--surface-panel);
+    --shadcn-card-foreground: var(--text);
+
+    --shadcn-popover: var(--surface-panel-elevated);
+    --shadcn-popover-foreground: var(--text);
+
+    --shadcn-primary: var(--fill-primary-strong);
+    --shadcn-primary-foreground: var(--text-on-primary-strong);
+
+    --shadcn-secondary: var(--fill-secondary-strong);
+    --shadcn-secondary-foreground: var(--text-on-secondary-strong);
+
+    --shadcn-muted: var(--surface-subtle-hover);
+    --shadcn-muted-foreground: var(--text-subtle);
+
+    --shadcn-accent: var(--surface-subtle-hover);
+    --shadcn-accent-foreground: var(--text);
+
+    --shadcn-destructive: var(--fill-danger-strong);
+    --shadcn-destructive-foreground: var(--text-on-danger-strong);
+
+    --shadcn-border: var(--border-color);
+    --shadcn-input: var(--field-border);
+    --shadcn-ring: var(--focus-ring);
+
+    --shadcn-radius: var(--border-radius-md);
+  }
+
+  .dark,
+  [data-theme="dark"],
+  [data-theme="dark"]::backdrop {
+    --shadcn-background: var(--background);
+    --shadcn-foreground: var(--foreground);
+
+    --shadcn-card: var(--surface-panel);
+    --shadcn-card-foreground: var(--text);
+
+    --shadcn-popover: var(--surface-panel-elevated);
+    --shadcn-popover-foreground: var(--text);
+
+    --shadcn-primary: var(--fill-primary-strong);
+    --shadcn-primary-foreground: var(--text-on-primary-strong);
+
+    --shadcn-secondary: var(--fill-secondary-strong);
+    --shadcn-secondary-foreground: var(--text-on-secondary-strong);
+
+    --shadcn-muted: var(--surface-subtle-hover);
+    --shadcn-muted-foreground: var(--text-subtle);
+
+    --shadcn-accent: var(--surface-subtle-hover);
+    --shadcn-accent-foreground: var(--text);
+
+    --shadcn-destructive: var(--fill-danger-strong);
+    --shadcn-destructive-foreground: var(--text-on-danger-strong);
+
+    --shadcn-border: var(--border-color);
+    --shadcn-input: var(--field-border);
+    --shadcn-ring: var(--focus-ring);
+
+    --shadcn-radius: var(--border-radius-md);
+  }
+
+  .not-dark {
+    --shadcn-background: var(--background);
+    --shadcn-foreground: var(--foreground);
+
+    --shadcn-card: var(--surface-panel);
+    --shadcn-card-foreground: var(--text);
+
+    --shadcn-popover: var(--surface-panel-elevated);
+    --shadcn-popover-foreground: var(--text);
+
+    --shadcn-primary: var(--fill-primary-strong);
+    --shadcn-primary-foreground: var(--text-on-primary-strong);
+
+    --shadcn-secondary: var(--fill-secondary-strong);
+    --shadcn-secondary-foreground: var(--text-on-secondary-strong);
+
+    --shadcn-muted: var(--surface-subtle-hover);
+    --shadcn-muted-foreground: var(--text-subtle);
+
+    --shadcn-accent: var(--surface-subtle-hover);
+    --shadcn-accent-foreground: var(--text);
+
+    --shadcn-destructive: var(--fill-danger-strong);
+    --shadcn-destructive-foreground: var(--text-on-danger-strong);
+
+    --shadcn-border: var(--border-color);
+    --shadcn-input: var(--field-border);
+    --shadcn-ring: var(--focus-ring);
+
+    --shadcn-radius: var(--border-radius-md);
+  }
+}

package/src/styles/functional/surfaces.css

@@ -32,6 +32,13 @@
     --surface-item-text-active: var(--text);
     --surface-item-text-disabled: var(--gray-400);
 
+    /* Subtle neutral surface - generic role used by components that need
+       a muted background without adopting any intent color. Also the
+       mapping target for ShadCN-style muted/accent tokens. */
+    --surface-subtle: var(--canvas-50);
+    --surface-subtle-hover: var(--canvas-100);
+    --surface-subtle-active: var(--canvas-200);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);
@@ -71,6 +78,11 @@
     --surface-item-text-active: var(--text);
     --surface-item-text-disabled: var(--gray-500);
 
+    /* Subtle neutral surface */
+    --surface-subtle: var(--canvas-800);
+    --surface-subtle-hover: var(--canvas-700);
+    --surface-subtle-active: var(--canvas-600);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--canvas-700);
     --surface-panel-scrollbar-thumb: var(--primary-400);
@@ -108,6 +120,11 @@
     --surface-item-text-active: var(--text);
     --surface-item-text-disabled: var(--gray-400);
 
+    /* Subtle neutral surface */
+    --surface-subtle: var(--canvas-50);
+    --surface-subtle-hover: var(--canvas-100);
+    --surface-subtle-active: var(--canvas-200);
+
     /* Panel scrollers */
     --surface-panel-scrollbar: var(--gray-50);
     --surface-panel-scrollbar-thumb: var(--primary-100);

package/src/styles/functional/typography.css

@@ -11,12 +11,16 @@
     --text: var(--gray-900);
     --headings: var(--primary-700);
     --muted: oklch(from var(--foreground) calc(l * 2) c h);
-    --error: var(--red-500);
+
+    /* Generic text-role tokens - for components that need a subdued or
+       placeholder-style foreground without adopting any intent color. */
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
   }
 
-  /* 🌙 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 
+  /* 🌙 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.
@@ -27,7 +31,9 @@
     --text: var(--gray-50);
     --headings: var(--gray-50);
     --muted: oklch(from var(--foreground) calc(l * 0.75) c h);
-    --error: var(--red-400);
+
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
   }
 
   /* ===================================================================
@@ -41,6 +47,8 @@
     --text: var(--gray-900);
     --headings: var(--primary-800);
     --muted: oklch(from var(--foreground) calc(l * 2) c h);
-    --error: var(--red-500);
+
+    --text-subtle: var(--muted);
+    --text-placeholder: var(--muted);
   }
 }

package/src/styles/local-fonts.css

@@ -73,4 +73,4 @@
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
-}
+}

package/src/styles/theme/theme.css

@@ -14,4 +14,4 @@
 
 @import "./autofill.css";
 @import "./scrollers.css";
-@import "./defaults.css";
+@import "./defaults.css";

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

@@ -63,72 +63,62 @@
 
   .primary-strong {
     background-color: var(--fill-primary-strong);
-    color: var(--text-on-primary);
+    color: var(--text-on-primary-strong);
   }
 
   .primary-weak {
     background-color: var(--fill-primary-weak);
-    color: var(--text-on-primary);
+    color: var(--text-on-primary-weak);
   }
 
   .secondary-strong {
     background-color: var(--fill-secondary-strong);
-    color: var(--text-on-secondary);
+    color: var(--text-on-secondary-strong);
   }
 
   .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);
+    color: var(--text-on-secondary-weak);
   }
 
   .info-strong {
     background-color: var(--fill-info-strong);
-    color: var(--text-on-info);
+    color: var(--text-on-info-strong);
   }
 
   .info-weak {
     background-color: var(--fill-info-weak);
-    color: var(--text-on-info);
+    color: var(--text-on-info-weak);
   }
 
   .success-strong {
     background-color: var(--fill-success-strong);
-    color: var(--text-on-success);
+    color: var(--text-on-success-strong);
   }
 
   .success-weak {
     background-color: var(--fill-success-weak);
-    color: var(--text-on-success);
+    color: var(--text-on-success-weak);
   }
 
   .warning-strong {
     background-color: var(--fill-warning-strong);
-    color: var(--text-on-warning);
+    color: var(--text-on-warning-strong);
   }
 
   .warning-weak {
     background-color: var(--fill-warning-weak);
-    color: var(--text-on-warning);
+    color: var(--text-on-warning-weak);
   }
 
   .danger-strong {
     background-color: var(--fill-danger-strong);
-    color: var(--text-on-danger);
+    color: var(--text-on-danger-strong);
   }
 
   .danger-weak {
     background-color: var(--fill-danger-weak);
-    color: var(--text-on-danger);
+    color: var(--text-on-danger-weak);
   }
 
   /* ========================================

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

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .container,
   :global(.infonomic-datepicker-container) {
     position: relative;
@@ -205,4 +204,4 @@
       transform: translateX(0);
     }
   }
-}
+}

package/src/widgets/datepicker/datepicker.tsx

@@ -70,8 +70,8 @@ export function DatePicker({
   inputWrapperClassName,
   containerClassName,
   contentClassName,
-  onClear = () => { },
-  onDateChange = () => { },
+  onClear = () => {},
+  onDateChange = () => {},
   validatorFn,
   helpText,
   errorText,
@@ -237,11 +237,11 @@ export function DatePicker({
                     }}
                     startMonth={new Date(new Date().getFullYear() - yearsInPast, 0)}
                     endMonth={new Date(new Date().getFullYear() + yearsInFuture, 0)}
-                  // TODO: add props
-                  // disabled={(date) =>
-                  //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
-                  //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
-                  // }
+                    // TODO: add props
+                    // disabled={(date) =>
+                    //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+                    //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+                    // }
                   />
                 </div>
                 {mode === 'datetime' && (
@@ -289,7 +289,9 @@ export function DatePicker({
                   styles['status-and-actions']
                 )}
               >
-                <div className={cx('infonomic-datepicker-content-status', styles['content-status'])}>
+                <div
+                  className={cx('infonomic-datepicker-content-status', styles['content-status'])}
+                >
                   {date ? format(date, mode === 'datetime' ? 'PPPp' : 'PPP') : 'No date selected'}
                 </div>
                 <div

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

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   /* Backdrop overlay (replaces previous Overlay component) */
 
   .backdrop,
@@ -139,4 +138,4 @@
   :global(.infonomic-drawer-content) {
     padding: var(--spacing-12);
   }
-}
+}

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

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   /* Backdrop overlay */
 
   .backdrop,
@@ -49,7 +48,6 @@
   }
 
   @media screen and (min-width: 40rem) {
-
     .modal-wrapper,
     :global(.infonomic-modal-wrapper) {
       justify-content: center;
@@ -74,7 +72,6 @@
   }
 
   @media screen and (min-width: 40rem) {
-
     .modal-container,
     :global(.infonomic-modal-container) {
       max-height: calc(100vh - 24px);
@@ -127,4 +124,4 @@
     padding-left: var(--spacing-16);
     padding-right: var(--spacing-16);
   }
-}
+}

package/src/widgets/modal/modal.tsx

@@ -68,12 +68,8 @@ function Modal({
         disablePointerDismissal={closeOnOverlayClick !== true}
       >
         <Dialog.Portal>
-          <Dialog.Backdrop
-            className={cx('infonomic-modal-backdrop', styles.backdrop)}
-          />
-          <Dialog.Popup
-            className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}
-          >
+          <Dialog.Backdrop className={cx('infonomic-modal-backdrop', styles.backdrop)} />
+          <Dialog.Popup className={cx('infonomic-modal-wrapper', styles['modal-wrapper'])}>
             {children}
           </Dialog.Popup>
         </Dialog.Portal>