@infonomic/uikit 6.5.1 → 6.6.0

package/README.md

@@ -36,6 +36,23 @@ We also highly value the option to 'tell' components to ignore or override a top
 
 In addition to CSS modules, we're experimenting with an assembled global stylesheet (in a post-build script) that can be used in vanilla HTML/CSS projects.
 
+## Design System Architecture
+
+Our CSS is organised into three layers. The directory names matter and are worth calling out because "theme" is a misleading name for what it now does:
+
+- `src/styles/base/` — primitive tokens (color palette scales, spacing, breakpoints, shadows, typography scales). No semantic meaning, no mode switching.
+- `src/styles/functional/` — **the semantic source of truth**. This is where intent-based tokens live (`--fill-primary-strong`, `--text-on-danger-weak`, `--stroke-warning-disabled`, etc.), along with generic role tokens (`--focus-ring`, `--field-border-invalid`, `--surface-subtle`, `--text-subtle`). Every component should read from this layer, not from base primitives. Light / dark / `.not-dark` switching happens here.
+- `src/styles/theme/` — document-level defaults and browser behaviour (autofill colours, scrollbars, element resets). Despite the name, this is not where semantic tokens live.
+
+The intent token taxonomy follows `element-intent-emphasis-state`:
+
+- **element**: `fill` (backgrounds), `text-on` (foreground on a fill), `text` (foreground with no fill context), `stroke` (borders), `ring` (focus rings), `gradient`
+- **intent**: `primary`, `secondary`, `noeffect`, `success`, `info`, `warning`, `danger`
+- **emphasis** (optional): `strong`, `weak`, `outlined`, `text`
+- **state** (optional): `hover`, `disabled`
+
+Example: `--text-on-primary-strong-disabled`. Components that need a role without an intent (e.g. a focus ring on a form field) should use the generic tokens: `--focus-ring`, `--field-border`, `--field-border-invalid`, `--surface-subtle`, `--text-subtle`.
+
 
 
 ## Getting Started
@@ -127,10 +144,15 @@ Here's an example Tailwind CSS integration. Note that we have our own reset, and
     'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
 
-  --color-primary: var(--primary);
-  --color-secondary: var(--secondary);
-  --color-accent: var(--accent);
-  --color-noeffect: var(--noeffect);
+  /* Brand palette access. If you plan to opt into the ShadCN compatibility
+     layer (see below), keep these under the brand-* namespace so the short
+     semantic names (primary, secondary, accent, muted, destructive) stay
+     free for ShadCN-style utilities. If you are not using the compat layer,
+     you can drop the brand- prefix and expose --color-primary etc. directly. */
+  --color-brand-primary: var(--primary);
+  --color-brand-secondary: var(--secondary);
+  --color-brand-accent: var(--accent);
+  --color-brand-noeffect: var(--noeffect);
   --color-success: var(--success);
   --color-info: var(--info);
   --color-warning: var(--warning);
@@ -220,6 +242,56 @@ Here's an example Tailwind CSS integration. Note that we have our own reset, and
 }
 ```
 
+## Optional ShadCN Compatibility Layer
+
+The uikit ships an **opt-in** compatibility layer that exposes ShadCN-style semantic token names as aliases over our existing semantic tokens. This is useful if you're dropping AI-generated UI snippets (which typically reach for `bg-card`, `text-muted-foreground`, `border-border`, `ring-ring`, `bg-destructive`, etc.) into a Tailwind-consumer app.
+
+The compatibility layer is additive. It does **not** change any existing uikit component or semantic token — it only adds a parallel `--shadcn-*` namespace that maps onto our tokens. In particular:
+
+- `--shadcn-accent` maps to a subtle interactive surface (our `--surface-subtle-hover`), not our brand `--accent` palette. This matches ShadCN's convention.
+- `--shadcn-muted` is a subdued surface (our `--surface-subtle-hover`), not our `--muted` text token.
+- `--shadcn-primary` / `--shadcn-destructive` are high-emphasis action surfaces mapped to `--fill-primary-strong` / `--fill-danger-strong`.
+
+The `--shadcn-*` aliases are defined inside `@infonomic/uikit/styles.css` and are always present — they're cheap. To make them resolvable through Tailwind utilities (`bg-card`, `text-primary-foreground`, etc.), add a second Tailwind `@theme` block in your consumer app after the main brand palette block:
+
+```css
+@theme {
+  --color-background: var(--shadcn-background);
+  --color-foreground: var(--shadcn-foreground);
+
+  --color-card: var(--shadcn-card);
+  --color-card-foreground: var(--shadcn-card-foreground);
+
+  --color-popover: var(--shadcn-popover);
+  --color-popover-foreground: var(--shadcn-popover-foreground);
+
+  --color-primary: var(--shadcn-primary);
+  --color-primary-foreground: var(--shadcn-primary-foreground);
+
+  --color-secondary: var(--shadcn-secondary);
+  --color-secondary-foreground: var(--shadcn-secondary-foreground);
+
+  --color-muted: var(--shadcn-muted);
+  --color-muted-foreground: var(--shadcn-muted-foreground);
+
+  --color-accent: var(--shadcn-accent);
+  --color-accent-foreground: var(--shadcn-accent-foreground);
+
+  --color-destructive: var(--shadcn-destructive);
+  --color-destructive-foreground: var(--shadcn-destructive-foreground);
+
+  --color-border: var(--shadcn-border);
+  --color-input: var(--shadcn-input);
+  --color-ring: var(--shadcn-ring);
+
+  --radius: var(--shadcn-radius);
+}
+```
+
+Because this block registers `--color-primary`, `--color-secondary`, `--color-accent`, and `--color-muted` as Tailwind semantic utilities, make sure your brand palette uses the `--color-brand-*` names shown in the Tailwind example above so the two vocabularies don't collide.
+
+Our TanStack example app in `apps/tanstack` demonstrates this pattern: the brand palette and core Tailwind theme registrations live in `tailwind.css`, and the opt-in ShadCN registrations live in a separate `tailwind-shadcn.css` that is imported after it.
+
 ## Questions or Comments?
 
 Feel free to get in touch by reaching out to us at https://infonomic.io, or by posting questions, issues, or PRs to our github repo at https://github.com/infonomic/uikit

package/dist/components/accordion/accordion.module.css

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .item,
   :global(.infonomic-accordion-item) {
     overflow: hidden;
@@ -54,4 +53,4 @@
       height: 0;
     }
   }
-}
+}

package/dist/components/avatar/avatar.module.css

@@ -24,7 +24,6 @@
     object-fit: cover;
   }
 
-  /* flex h-full w-full items-center justify-center rounded-full bg-white dark:bg-gray-800 */
   .avatar-fallback,
   :global(.infonomic-avatar-fallback) {
     display: flex;
@@ -33,7 +32,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background-color: var(--color-white);
+    background-color: var(--surface-panel-elevated);
   }
 
   .avatar-text,
@@ -41,22 +40,6 @@
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
     text-transform: uppercase;
-    color: var(--gray-700);
-  }
-
-  /* 🌙 Dark via `.dark` class. We rely on the 
-  * consuming application to detect a user's preferred
-  * color scheme - either by header or cookie, and set
-  * a root html class accordingly
-  */
-  :global(.dark),
-  :global([data-theme="dark"]) {
-    .avatar-fallback {
-      background-color: var(--gray-800);
-    }
-
-    .avatar-text {
-      color: var(--gray-400);
-    }
+    color: var(--text-subtle);
   }
 }

package/dist/components/avatar/avatar_module.css

@@ -17,7 +17,7 @@
   }
 
   :is(.avatar-fallback-LnFLNm, .infonomic-avatar-fallback) {
-    background-color: var(--color-white);
+    background-color: var(--surface-panel-elevated);
     border-radius: 50%;
     justify-content: center;
     align-items: center;
@@ -30,15 +30,7 @@
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
     text-transform: uppercase;
-    color: var(--gray-700);
-  }
-
-  :is(.dark, [data-theme="dark"]) .avatar-fallback-LnFLNm {
-    background-color: var(--gray-800);
-  }
-
-  :is(.dark, [data-theme="dark"]) .avatar-text-Xf0G6q {
-    color: var(--gray-400);
+    color: var(--text-subtle);
   }
 }
 

package/dist/components/button/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAKzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAE1E,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAWD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAGhE,KAAK,sBAAsB,GAAG,IAAI,CAChC,gBAAgB,EAChB,UAAU,GAAG,OAAO,GAAG,eAAe,CACvC,GAAG;IACF,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,KAAK,wBAAwB,GAAG,IAAI,CAClC,gBAAgB,EAChB,UAAU,GAAG,OAAO,GAAG,eAAe,CACvC,GAAG;IACF,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,GAAG,sBAAsB,CAAA;AAG1B,QAAA,MAAM,WAAW,GAAI,wIAelB,gBAAgB,sBAoClB,CAAA;AAID,KAAK,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,GAAG;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,GAAG,sBAAsB,CAAA;AAE1B,QAAA,MAAM,eAAe;oDAAmD,oBAAoB;;CAyB3F,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAKzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAE1E,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAWD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAGhE,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IAC7F,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,KAAK,wBAAwB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IAC/F,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,GAAG,sBAAsB,CAAA;AAG1B,QAAA,MAAM,WAAW,GAAI,wIAelB,gBAAgB,sBAoClB,CAAA;AAID,KAAK,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,GAAG;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,GAAG,sBAAsB,CAAA;AAE1B,QAAA,MAAM,eAAe;oDAAmD,oBAAoB;;CAyB3F,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/button/button-group.js

@@ -16,7 +16,7 @@ const ButtonGroupContext = /*#__PURE__*/ react.createContext({
 });
 const ButtonGroup = ({ className, variant = 'filled', size = 'md', ripple = true, expandToFit = false, active = 'primary', inactive = 'noeffect', type, onValueChange, value, defaultValue, children, ref, ...props })=>{
     const isMultiple = 'multiple' === type;
-    const handleValueChange = (newValue, event)=>{
+    const handleValueChange = (newValue, _event)=>{
         if (!onValueChange) return;
         isMultiple ? onValueChange(newValue) : onValueChange(newValue[0] ?? '');
     };

package/dist/components/button/button.module.css

@@ -1,12 +1,11 @@
 @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 {
-
   .button,
   :global(.infonomic-button) {
     border: none;
@@ -114,10 +113,14 @@ infonomic-components;
   .filled[disabled],
   :global(.infonomic-button-filled):disabled,
   :global(.infonomic-button-filled)[disabled] {
-    background-color: var(--button-variant-filled-disabled,
-        oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--button-variant-filled-foreground-disabled,
-        oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-filled-disabled,
+      oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-filled-foreground-disabled,
+      oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   /* -------------------------------------------------------- */
@@ -145,10 +148,14 @@ infonomic-components;
   .filled-weak[disabled],
   :global(.infonomic-button-filled-weak):disabled,
   :global(.infonomic-button-filled-weak)[disabled] {
-    background-color: var(--button-variant-filled-weak-disabled,
-        oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
-    color: var(--button-variant-filled-weak-foreground-disabled,
-        oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-filled-weak-disabled,
+      oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-filled-weak-foreground-disabled,
+      oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   .outlined,
@@ -162,10 +169,14 @@ infonomic-components;
   .outlined[disabled],
   :global(.infonomic-button-outlined):disabled,
   :global(.infonomic-button-outlined)[disabled] {
-    border-color: var(--button-variant-outlined-border-disabled,
-        oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
-    color: var(--button-variant-outlined-foreground-disabled,
-        oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
+    border-color: var(
+      --button-variant-outlined-border-disabled,
+      oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
+    );
+    color: var(
+      --button-variant-outlined-foreground-disabled,
+      oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
+    );
   }
 
   .outlined:hover,
@@ -183,9 +194,11 @@ infonomic-components;
   .gradient,
   :global(.infonomic-button-gradient) {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
   }
 
   .gradient:disabled,
@@ -193,18 +206,24 @@ infonomic-components;
   :global(.infonomic-button-gradient):disabled,
   :global(.infonomic-button-gradient)[disabled] {
     background: unset;
-    background-color: var(--button-variant-gradient-disabled,
-        oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h));
-    color: var(--button-variant-gradient-foreground-disabled,
-        oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h));
+    background-color: var(
+      --button-variant-gradient-disabled,
+      oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h)
+    );
+    color: var(
+      --button-variant-gradient-foreground-disabled,
+      oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h)
+    );
   }
 
   .gradient:hover,
   :global(.infonomic-button-gradient):hover {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+    background: linear-gradient(
+      45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end)
+    );
   }
 
   .gradient:focus,
@@ -276,7 +295,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-primary-end);
     --button-variant-gradient-foreground: var(--gradient-primary-foreground);
     --button-variant-gradient-disabled: var(--gradient-primary-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-primary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-primary-strong-disabled);
   }
 
   .secondary,
@@ -315,7 +334,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-secondary-end);
     --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
     --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-strong-disabled);
   }
 
   .noeffect,
@@ -343,7 +362,7 @@ infonomic-components;
     --button-variant-outlined-border: var(--stroke-noeffect);
     --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
     --button-variant-outlined-foreground: var(--text-on-noeffect-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
 
     /* Text */
     --button-variant-text: var(--fill-noeffect-text);
@@ -355,7 +374,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-noeffect-end);
     --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
     --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-strong-disabled);
   }
 
   .success,
@@ -394,7 +413,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-success-end);
     --button-variant-gradient-foreground: var(--gradient-success-foreground);
     --button-variant-gradient-disabled: var(--gradient-success-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-success-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-success-strong-disabled);
   }
 
   .info,
@@ -433,7 +452,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-info-end);
     --button-variant-gradient-foreground: var(--gradient-info-foreground);
     --button-variant-gradient-disabled: var(--gradient-info-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-info-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-info-strong-disabled);
   }
 
   .warning,
@@ -472,7 +491,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-warning-end);
     --button-variant-gradient-foreground: var(--gradient-warning-foreground);
     --button-variant-gradient-disabled: var(--gradient-warning-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-warning-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-warning-strong-disabled);
   }
 
   .danger,
@@ -511,7 +530,7 @@ infonomic-components;
     --button-variant-gradient-end: var(--gradient-danger-end);
     --button-variant-gradient-foreground: var(--gradient-danger-foreground);
     --button-variant-gradient-disabled: var(--gradient-danger-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-danger-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-danger-strong-disabled);
   }
 
   /* Full width */
@@ -520,4 +539,4 @@ infonomic-components;
     width: 100%;
     display: flex;
   }
-}
+}

package/dist/components/button/button_module.css

@@ -139,8 +139,8 @@
   :is(.gradient-ySC3O3, .infonomic-button-gradient) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end));
   }
 
   :is(.gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled], .infonomic-button-gradient:disabled, .infonomic-button-gradient[disabled]) {
@@ -152,8 +152,8 @@
   :is(.gradient-ySC3O3:hover, .infonomic-button-gradient:hover) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(45deg,
-        var(--button-variant-gradient-start),
-        var(--button-variant-gradient-end));
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end));
   }
 
   :is(.gradient-ySC3O3:focus, .gradient-ySC3O3:active, .infonomic-button-gradient:focus, .infonomic-button-gradient:active) {
@@ -202,7 +202,7 @@
     --button-variant-gradient-end: var(--gradient-primary-end);
     --button-variant-gradient-foreground: var(--gradient-primary-foreground);
     --button-variant-gradient-disabled: var(--gradient-primary-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-primary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-primary-strong-disabled);
   }
 
   :is(.secondary-UqT2AY, .infonomic-button-secondary) {
@@ -230,7 +230,7 @@
     --button-variant-gradient-end: var(--gradient-secondary-end);
     --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
     --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-strong-disabled);
   }
 
   :is(.noeffect-fpxSgg, .infonomic-button-noeffect) {
@@ -251,7 +251,7 @@
     --button-variant-outlined-border: var(--stroke-noeffect);
     --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
     --button-variant-outlined-foreground: var(--text-on-noeffect-outlined);
-    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-disabled);
+    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
     --button-variant-text: var(--fill-noeffect-text);
     --button-variant-text-hover: var(--fill-noeffect-text-hover);
     --button-variant-text-foreground: var(--text-noeffect);
@@ -259,7 +259,7 @@
     --button-variant-gradient-end: var(--gradient-noeffect-end);
     --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
     --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-strong-disabled);
   }
 
   :is(.success-fTNDEn, .infonomic-button-success) {
@@ -287,7 +287,7 @@
     --button-variant-gradient-end: var(--gradient-success-end);
     --button-variant-gradient-foreground: var(--gradient-success-foreground);
     --button-variant-gradient-disabled: var(--gradient-success-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-success-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-success-strong-disabled);
   }
 
   :is(.info-qrdXQD, .infonomic-button-info) {
@@ -315,7 +315,7 @@
     --button-variant-gradient-end: var(--gradient-info-end);
     --button-variant-gradient-foreground: var(--gradient-info-foreground);
     --button-variant-gradient-disabled: var(--gradient-info-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-info-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-info-strong-disabled);
   }
 
   :is(.warning-a00T3A, .infonomic-button-warning) {
@@ -343,7 +343,7 @@
     --button-variant-gradient-end: var(--gradient-warning-end);
     --button-variant-gradient-foreground: var(--gradient-warning-foreground);
     --button-variant-gradient-disabled: var(--gradient-warning-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-warning-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-warning-strong-disabled);
   }
 
   :is(.danger-rwIV_i, .infonomic-button-danger) {
@@ -371,7 +371,7 @@
     --button-variant-gradient-end: var(--gradient-danger-end);
     --button-variant-gradient-foreground: var(--gradient-danger-foreground);
     --button-variant-gradient-disabled: var(--gradient-danger-disabled);
-    --button-variant-gradient-foreground-disabled: var(--text-on-danger-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-danger-strong-disabled);
   }
 
   :is(.fullWidth-wXvP0v, .infonomic-button-full-width) {

package/dist/components/button/combo-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,6LAgBzB,gBAAgB,gCAuDlB,CAAA"}
+{"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,6LAgBzB,gBAAgB,gCAiDlB,CAAA"}

package/dist/components/button/combo-button.module.css

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .combo-button-wrapper,
   :global(.infonomic-combo-button-wrapper) {
     display: flex;
@@ -48,5 +47,6 @@
   }
 
   .combo-button-options-item,
-  :global(.infonomic-combo-button-options-item) {}
-}
+  :global(.infonomic-combo-button-options-item) {
+  }
+}

package/dist/components/button/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAkB,EAClB,UAAsB,EACtB,OAAO,EACP,IAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2ErC"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAkB,EAClB,UAAsB,EACtB,OAAO,EACP,IAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyFrC"}

package/dist/components/button/copy-button.js

@@ -6,7 +6,8 @@ import { Tooltip } from "../tooltip/tooltip.js";
 import { Button } from "./button.js";
 import copy_button_module from "./copy-button.module.js";
 function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant, size = 'sm', intent, fullWidth, ripple, className, containerClassName, svgClassName, ...rest }) {
-    const [copied, setCopied] = useState(void 0);
+    const [copied, setCopied] = useState(false);
+    const [hoverOpen, setHoverOpen] = useState(false);
     const handleCopied = ()=>{
         if (null != navigator.clipboard && null != navigator.permissions) navigator.clipboard.writeText(text).then(()=>{
             setCopied(true);
@@ -22,18 +23,24 @@ function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant,
         }
     };
     useEffect(()=>{
-        if (true === copied) setTimeout(()=>{
-            setCopied(void 0);
-        }, 900);
-    });
-    const tooltipText = null != copied && copied ? copiedText : hoverText;
+        if (!copied) return;
+        const timer = setTimeout(()=>setCopied(false), 900);
+        return ()=>clearTimeout(timer);
+    }, [
+        copied
+    ]);
+    const tooltipText = copied ? copiedText : hoverText;
     return /*#__PURE__*/ jsx("div", {
         className: classnames('infonomic-copy-button-container', copy_button_module["copy-button-container"], containerClassName),
         children: /*#__PURE__*/ jsx(Tooltip, {
             side: "top",
             sideOffset: 2,
             text: tooltipText,
-            open: copied,
+            open: copied || hoverOpen,
+            onOpenChange: (next)=>{
+                if (copied && !next) return;
+                setHoverOpen(next);
+            },
             children: /*#__PURE__*/ jsx(Button, {
                 variant: variant,
                 size: size,

package/dist/components/card/card.module.css

@@ -14,7 +14,7 @@
     width: 100%;
     max-width: 100%;
     color: var(--foreground);
-    background: var(--canvas-25);
+    background: var(--surface-panel);
     border-width: var(--border-width-thin);
     border-color: var(--border-color);
     border-style: var(--border-style-solid);
@@ -22,14 +22,6 @@
     box-shadow: var(--shadow-sm);
   }
 
-  :global(.dark),
-  :global([data-theme="dark"]) {
-    .card,
-    :global(.infonomic-card) {
-      background: var(--canvas-800);
-    }
-  }
-
   .card-hover,
   :global(.infonomic-card-hover) {
     transition: background 0.2s ease-in-out;

package/dist/components/card/card_module.css

@@ -5,7 +5,7 @@
     width: 100%;
     max-width: 100%;
     color: var(--foreground);
-    background: var(--canvas-25);
+    background: var(--surface-panel);
     border-width: var(--border-width-thin);
     border-color: var(--border-color);
     border-style: var(--border-style-solid);
@@ -16,10 +16,6 @@
     display: flex;
   }
 
-  :is(:is(.dark, [data-theme="dark"]) .card-mqJaiW, :is(.dark, [data-theme="dark"]) .infonomic-card) {
-    background: var(--canvas-800);
-  }
-
   :is(.card-hover-hvT4d6, .infonomic-card-hover) {
     transition: background .2s ease-in-out;
   }