@infonomic/uikit 6.5.1 → 6.6.0

package/src/components/tooltip/tooltip.tsx

@@ -21,7 +21,15 @@ export interface TooltipProps {
 
 function ArrowSvg(props: React.ComponentProps<'svg'>) {
   return (
-    <svg width="15" height="8" viewBox="0 0 20 10" fill="none" aria-hidden role="presentation" {...props}>
+    <svg
+      width="15"
+      height="8"
+      viewBox="0 0 20 10"
+      fill="none"
+      aria-hidden
+      role="presentation"
+      {...props}
+    >
       <path
         d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
         className={styles['arrow-fill']}
@@ -56,18 +64,10 @@ export const Tooltip = function Tooltip({
         onOpenChange={onOpenChange}
         disableHoverablePopup={disableHoverablePopup}
       >
-        <TooltipPrimitive.Trigger
-          render={children}
-        />
+        <TooltipPrimitive.Trigger render={children} />
         <TooltipPrimitive.Portal>
-          <TooltipPrimitive.Positioner
-            ref={ref}
-            side={side}
-            sideOffset={sideOffset}
-          >
-            <TooltipPrimitive.Popup
-              className={cx(styles.tooltip, 'infonomic-tooltip')}
-            >
+          <TooltipPrimitive.Positioner ref={ref} side={side} sideOffset={sideOffset}>
+            <TooltipPrimitive.Popup className={cx(styles.tooltip, 'infonomic-tooltip')}>
               <TooltipPrimitive.Arrow
                 className={cx(styles['tooltip-arrow'], 'infonomic-tooltip-arrow')}
               >

package/src/lib/ripple.ts

@@ -43,9 +43,9 @@ export class Ripple {
     element.style.borderRadius = '50%'
     element.style.pointerEvents = 'none'
     element.style.position = 'absolute'
-    element.style.left = clientX - rect.left - radius + 'px'
-    element.style.top = clientY - rect.top - radius + 'px'
-    element.style.width = element.style.height = radius * 2 + 'px'
+    element.style.left = `${clientX - rect.left - radius}px`
+    element.style.top = `${clientY - rect.top - radius}px`
+    element.style.width = element.style.height = `${radius * 2}px`
   }
 
   private applyAnimation(element: HTMLSpanElement): void {

package/src/loaders/ellipses.tsx

@@ -3,8 +3,8 @@ import type React from 'react'
 
 import cx from 'classnames'
 
-import type { LoaderProps } from './@types/index.js'
 import styles from './ellipses.module.css'
+import type { LoaderProps } from './@types/index.js'
 
 export function LoaderEllipsis({
   color,

package/src/loaders/loaders.stories.tsx

@@ -53,7 +53,11 @@ export const Sizes = (): React.JSX.Element => {
           <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ring</h3>
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
             {sizes.map((size) => (
-              <Loader key={String(size)} loader={<LoaderRing size={size} />} label={`${size}${typeof size === 'number' ? 'px' : ''}`} />
+              <Loader
+                key={String(size)}
+                loader={<LoaderRing size={size} />}
+                label={`${size}${typeof size === 'number' ? 'px' : ''}`}
+              />
             ))}
           </div>
         </div>
@@ -61,7 +65,11 @@ export const Sizes = (): React.JSX.Element => {
           <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ellipsis</h3>
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
             {sizes.map((size) => (
-              <Loader key={String(size)} loader={<LoaderEllipsis size={size} />} label={`${size}${typeof size === 'number' ? 'px' : ''}`} />
+              <Loader
+                key={String(size)}
+                loader={<LoaderEllipsis size={size} />}
+                label={`${size}${typeof size === 'number' ? 'px' : ''}`}
+              />
             ))}
           </div>
         </div>
@@ -69,7 +77,11 @@ export const Sizes = (): React.JSX.Element => {
           <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Spinner</h3>
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
             {sizes.map((size) => (
-              <Loader key={String(size)} loader={<LoaderSpinner size={size} />} label={`${size}${typeof size === 'number' ? 'px' : ''}`} />
+              <Loader
+                key={String(size)}
+                loader={<LoaderSpinner size={size} />}
+                label={`${size}${typeof size === 'number' ? 'px' : ''}`}
+              />
             ))}
           </div>
         </div>
@@ -102,7 +114,11 @@ export const Colors = (): React.JSX.Element => {
           <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ellipsis</h3>
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
             {colors.map(({ value, label }) => (
-              <Loader key={label} loader={<LoaderEllipsis size={48} color={value} />} label={label} />
+              <Loader
+                key={label}
+                loader={<LoaderEllipsis size={48} color={value} />}
+                label={label}
+              />
             ))}
           </div>
         </div>
@@ -110,7 +126,11 @@ export const Colors = (): React.JSX.Element => {
           <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Spinner</h3>
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
             {colors.map(({ value, label }) => (
-              <Loader key={label} loader={<LoaderSpinner size={48} color={value} />} label={label} />
+              <Loader
+                key={label}
+                loader={<LoaderSpinner size={48} color={value} />}
+                label={label}
+              />
             ))}
           </div>
         </div>
@@ -126,7 +146,9 @@ export const StringSizes = (): React.JSX.Element => {
     <div style={{ maxWidth: '800px', margin: '1.5rem auto' }}>
       <div style={{ maxWidth: '800px', display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
         <div>
-          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ring (rem units)</h3>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>
+            Ring (rem units)
+          </h3>
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
             {stringSizes.map((size) => (
               <Loader key={String(size)} loader={<LoaderRing size={size} />} label={String(size)} />
@@ -134,18 +156,30 @@ export const StringSizes = (): React.JSX.Element => {
           </div>
         </div>
         <div>
-          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Ellipsis (rem units)</h3>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>
+            Ellipsis (rem units)
+          </h3>
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
             {stringSizes.map((size) => (
-              <Loader key={String(size)} loader={<LoaderEllipsis size={size} />} label={String(size)} />
+              <Loader
+                key={String(size)}
+                loader={<LoaderEllipsis size={size} />}
+                label={String(size)}
+              />
             ))}
           </div>
         </div>
         <div>
-          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>Spinner (rem units)</h3>
+          <h3 style={{ marginBottom: '1rem', fontSize: '1.125rem', fontWeight: 600 }}>
+            Spinner (rem units)
+          </h3>
           <div style={{ display: 'flex', alignItems: 'flex-end', gap: '2.5rem' }}>
             {stringSizes.map((size) => (
-              <Loader key={String(size)} loader={<LoaderSpinner size={size} />} label={String(size)} />
+              <Loader
+                key={String(size)}
+                loader={<LoaderSpinner size={size} />}
+                label={String(size)}
+              />
             ))}
           </div>
         </div>

package/src/loaders/ring.tsx

@@ -3,8 +3,8 @@ import type React from 'react'
 
 import cx from 'classnames'
 
-import type { LoaderProps } from './@types/index.js'
 import styles from './ring.module.css'
+import type { LoaderProps } from './@types/index.js'
 
 export function LoaderRing({
   color,

package/src/loaders/spinner.tsx

@@ -3,8 +3,8 @@ import type React from 'react'
 
 import cx from 'classnames'
 
-import type { LoaderProps } from './@types/index.js'
 import styles from './spinner.module.css'
+import type { LoaderProps } from './@types/index.js'
 
 export function LoaderSpinner({
   color,
@@ -23,7 +23,7 @@ export function LoaderSpinner({
         <div
           className={cx(
             'infonomic-loader-spinner-blade-inner',
-            styles['loader-spinner-blade-inner'],
+            styles['loader-spinner-blade-inner']
           )}
         />
       </div>

package/src/styles/components/hamburger.css

@@ -1,11 +1,11 @@
 /* No longer used in our actual hamburger React and Astro components
 but left here as a reference. */
 @layer infonomic-base,
-infonomic-functional,
-infonomic-utilities,
-infonomic-theme,
-infonomic-typography,
-infonomic-components;
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
 
 @layer infonomic-components {
   .component--hamburger {
@@ -119,4 +119,4 @@ infonomic-components;
       bottom 0.075s ease,
       transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
   }
-}
+}

package/src/styles/components/loaders.css

@@ -195,4 +195,4 @@ but left here as a reference. */
   100% {
     opacity: 0;
   }
-}
+}

package/src/styles/functional/README.md

@@ -0,0 +1,67 @@
+# Functional Token Layer
+
+This directory holds the **semantic source of truth** for the uikit. Every token here is defined in three scopes: `:root` (light), `.dark` / `[data-theme="dark"]` (dark), and `.not-dark` (a local override that forces light-mode tokens regardless of an ancestor `.dark` class).
+
+Components must read from these tokens. They must not read base palette primitives directly unless there is no semantic equivalent.
+
+## Files
+
+- `colors.css` — intent token families (fill, text-on, text, stroke, ring, gradient × primary, secondary, noeffect, success, info, warning, danger), plus the generic `--focus-ring` role token.
+- `surfaces.css` — `--background`, `--foreground`, `--surface-panel*`, `--surface-item*`, `--surface-subtle*`, scrollbar tokens.
+- `typography.css` — `--text`, `--headings`, `--muted`, `--text-subtle`, `--text-placeholder`.
+- `borders.css` — `--border-color`, field-state tokens (`--field-border`, `--field-border-hover`, `--field-border-invalid`, `--field-ring`, `--field-ring-invalid`).
+- `grid-flex.css` — layout tokens.
+- `shadcn-compat.css` — optional `--shadcn-*` alias namespace. Strictly for ShadCN-style Tailwind utilities in consumer apps; **do not use inside uikit components**.
+
+## Intent Token Taxonomy
+
+`--{element}-{intent}[-{emphasis}][-{state}]`
+
+| Part | Values |
+| --- | --- |
+| element | `fill`, `text-on`, `text`, `stroke`, `ring`, `gradient` |
+| intent | `primary`, `secondary`, `noeffect`, `success`, `info`, `warning`, `danger` |
+| emphasis | `strong`, `weak`, `outlined`, `text` (present on `fill` and `text-on` tokens) |
+| state | `hover`, `disabled` (present where a state-specific value is needed) |
+
+There is **no `accent` intent family**. `--accent` is a raw brand palette token; prefer `--fill-primary-*` for emphasis surfaces or `--surface-subtle-*` for interactive neutral surfaces.
+
+### Standard variants per intent
+
+Every intent family provides these:
+
+- `--fill-{intent}-strong`, `-strong-hover`, `-strong-disabled`
+- `--fill-{intent}-weak`, `-weak-hover`, `-weak-disabled`
+- `--fill-{intent}-outlined`, `-outlined-hover`, `-outlined-disabled`
+- `--fill-{intent}-text`, `-text-hover`, `-text-disabled`
+- `--text-on-{intent}-strong`, `-strong-hover`, `-strong-disabled`
+- `--text-on-{intent}-weak`, `-weak-hover`, `-weak-disabled`
+- `--text-on-{intent}-outlined`, `-outlined-hover`, `-outlined-disabled`
+- `--text-{intent}`, `-weak`, `-hover`, `-disabled`
+- `--stroke-{intent}`, `-hover`, `-disabled`
+- `--ring-{intent}`
+- `--gradient-{intent}-start`, `-end`, `-foreground`, `-disabled`
+
+Noeffect additionally provides `--text-on-noeffect-text*` and `--gradient-noeffect-hover`.
+
+## Generic Role Tokens
+
+Use these when a component needs a role without adopting an intent:
+
+| Token | Purpose |
+| --- | --- |
+| `--focus-ring` | Neutral focus ring when the component is not tied to an intent |
+| `--field-border` | Default border on form fields |
+| `--field-border-hover` | Hover border on form fields |
+| `--field-border-invalid` | Invalid-state border on form fields |
+| `--field-ring` | Default focus ring on form fields |
+| `--field-ring-invalid` | Invalid-state focus ring on form fields |
+| `--surface-subtle` | Subdued neutral surface |
+| `--surface-subtle-hover` | Subdued neutral surface on hover / for interactive neutral highlight |
+| `--surface-subtle-active` | Subdued neutral surface when pressed / active |
+| `--text-subtle` | Subdued foreground text |
+| `--text-placeholder` | Placeholder-style foreground text |
+
+## Parity Contract
+
+Every token defined in `:root` must also be defined in `.dark` and `.not-dark`, or it will silently fall back to the property's initial value in one of the modes. A Python parity check is in the repo history at `packages/uikit/src/styles/functional/colors.css` — if you add a new token, audit all three scopes before merging.

package/src/styles/functional/borders.css

@@ -8,16 +8,35 @@
 @layer infonomic-functional {
   :root {
     --border-color: var(--gray-100);
+
+    /* Generic field-state tokens (used by Input, Autocomplete, Select, etc.) */
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
   }
 
   /* Dark mode */
   .dark,
   [data-theme="dark"] {
     --border-color: var(--canvas-600);
+
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
   }
 
   /* Force light mode (local override) */
   .not-dark {
     --border-color: var(--gray-100);
+
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
   }
 }