@l3mpire/ui 3.5.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@l3mpire/ui",
-  "version": "3.5.1",
+  "version": "4.0.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@l3mpire/icons": "0.6.3"
+    "@l3mpire/icons": "0.7.0"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -61,8 +61,8 @@
     "class-variance-authority": "^0.7",
     "clsx": "^2",
     "tailwind-merge": "^3",
-    "@l3mpire/icons": "0.6.3",
-    "@l3mpire/tokens": "0.15.0"
+    "@l3mpire/icons": "0.7.0",
+    "@l3mpire/tokens": "0.17.0"
   },
   "devDependencies": {
     "@types/react": "^19",
@@ -72,7 +72,7 @@
     "tailwindcss": "^4",
     "tsup": "^8",
     "typescript": "^5",
-    "@l3mpire/icons": "0.6.3"
+    "@l3mpire/icons": "0.7.0"
   },
   "scripts": {
     "build": "cp ../../USAGE.md ./USAGE.md && tsup",

package/src/styles/globals.css

@@ -88,7 +88,17 @@ body {
   --shadow-elevation-lg: 0 12px 32px -8px var(--shadow-8), 0 4px 8px -2px var(--shadow-4);
 
   /* ── AI gradient ───────────────────────────────────────────────────────── */
+  /* Decorative orb/halo gradient (vivid, full-bleed) */
   --background-image-ai-gradient: linear-gradient(125deg, var(--blue-500) 0%, var(--violet-500) 55%, var(--indigo-500) 100%);
+  /* Stateful AI surface gradients (token-driven). Two intensities:
+       subtle = translucent wash (ghost AI surfaces) → bg-ai-subtle / -hover / -pressed
+       strong = vivid solid gradient (solid AI fill, gradient text) → bg-ai-strong / -hover / -pressed */
+  --background-image-ai-subtle: var(--core-bg-specific-ai-light-default);
+  --background-image-ai-subtle-hover: var(--core-bg-specific-ai-light-hover);
+  --background-image-ai-subtle-pressed: var(--core-bg-specific-ai-light-pressed);
+  --background-image-ai-strong: var(--core-bg-specific-ai-dark-default);
+  --background-image-ai-strong-hover: var(--core-bg-specific-ai-dark-hover);
+  --background-image-ai-strong-pressed: var(--core-bg-specific-ai-dark-pressed);
 
   /* ── Colors: Semantic (shadcn compatible) ───────────────────────────────── */
   --color-background: var(--core-bg-main-primary);
@@ -423,6 +433,21 @@ body {
   --color-info-message-description: var(--comp-info-message-description);
   --color-info-message-close: var(--comp-info-message-close);
 
+  /* ── Colors: InlineField (Discreet family) ─────────────────────────────── */
+  --color-inline-field-value-text: var(--comp-inline-field-value-text);
+  --color-inline-field-value-muted: var(--comp-inline-field-value-muted);
+  --color-inline-field-pill-bg-hover: var(--comp-inline-field-pill-bg-hover);
+  --color-inline-field-pill-bg-outline: var(--comp-inline-field-pill-bg-outline);
+  --color-inline-field-pill-border-outline: var(--comp-inline-field-pill-border-outline);
+  --color-inline-field-affordance-icon: var(--comp-inline-field-affordance-icon);
+  --color-inline-field-affordance-spinner: var(--comp-inline-field-affordance-spinner);
+  --color-inline-field-affordance-saved: var(--comp-inline-field-affordance-saved);
+  --color-inline-field-accent-default: var(--comp-inline-field-accent-default);
+  --color-inline-field-accent-hover: var(--comp-inline-field-accent-hover);
+  --color-inline-field-link-text: var(--comp-inline-field-link-text);
+  --color-inline-field-error-text: var(--comp-inline-field-error-text);
+  --color-inline-field-error-border: var(--comp-inline-field-error-border);
+
   /* ── Colors: InputLabel ────────────────────────────────────────────────── */
   --color-input-label-text: var(--comp-input-label-text);
   --color-input-label-optional: var(--comp-input-label-optional);
@@ -804,8 +829,8 @@ body {
 /*
  * ── AI utilities ─────────────────────────────────────────────────────────
  *
- * Animation primitives used by AICell, AIBadge, AIColumnSidePanel and any
- * surface that wants the "AI is thinking" look. The shimmer-text and
+ * Animation primitives for the AI button intent, AICell, and any surface that
+ * wants the "AI is thinking" look. The shimmer-text and
  * icon-spin classes are the load-bearing ones; the rest are decorative.
  *
  * FA Kit caveat — `fa-spin` applied directly to an <i> element gets
@@ -859,6 +884,23 @@ body {
   animation: ai-pulse 1.6s ease-in-out infinite;
 }
 
+/* Gradient-clipped text/icons for AI outlined & ghost buttons. The host element
+   carries `data-ai-text` so the gradient follows the button's hover/pressed
+   state (icons are font glyphs, so background-clip:text works on them too). */
+.ai-grad-text {
+  background-image: var(--core-bg-specific-ai-dark-default);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+[data-ai-text]:hover .ai-grad-text {
+  background-image: var(--core-bg-specific-ai-dark-hover);
+}
+[data-ai-text]:active .ai-grad-text {
+  background-image: var(--core-bg-specific-ai-dark-pressed);
+}
+
 .ai-orb {
   position: relative;
   width: 96px;