@l3mpire/ui 3.5.0 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@l3mpire/ui",
3
- "version": "3.5.0",
3
+ "version": "3.6.0",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org",
6
6
  "access": "public"
@@ -37,7 +37,7 @@
37
37
  "peerDependencies": {
38
38
  "react": ">=18",
39
39
  "react-dom": ">=18",
40
- "@l3mpire/icons": "0.6.3"
40
+ "@l3mpire/icons": "0.6.4"
41
41
  },
42
42
  "dependencies": {
43
43
  "@dnd-kit/core": "^6.3.1",
@@ -61,8 +61,8 @@
61
61
  "class-variance-authority": "^0.7",
62
62
  "clsx": "^2",
63
63
  "tailwind-merge": "^3",
64
- "@l3mpire/icons": "0.6.3",
65
- "@l3mpire/tokens": "0.15.0"
64
+ "@l3mpire/icons": "0.6.4",
65
+ "@l3mpire/tokens": "0.16.0"
66
66
  },
67
67
  "devDependencies": {
68
68
  "@types/react": "^19",
@@ -72,7 +72,7 @@
72
72
  "tailwindcss": "^4",
73
73
  "tsup": "^8",
74
74
  "typescript": "^5",
75
- "@l3mpire/icons": "0.6.3"
75
+ "@l3mpire/icons": "0.6.4"
76
76
  },
77
77
  "scripts": {
78
78
  "build": "cp ../../USAGE.md ./USAGE.md && tsup",
@@ -88,7 +88,17 @@ body {
88
88
  --shadow-elevation-lg: 0 12px 32px -8px var(--shadow-8), 0 4px 8px -2px var(--shadow-4);
89
89
 
90
90
  /* ── AI gradient ───────────────────────────────────────────────────────── */
91
+ /* Decorative orb/halo gradient (vivid, full-bleed) */
91
92
  --background-image-ai-gradient: linear-gradient(125deg, var(--blue-500) 0%, var(--violet-500) 55%, var(--indigo-500) 100%);
93
+ /* Stateful AI surface gradients (token-driven). Two intensities:
94
+ subtle = translucent wash (ghost AI surfaces) → bg-ai-subtle / -hover / -pressed
95
+ strong = vivid solid gradient (solid AI fill, gradient text) → bg-ai-strong / -hover / -pressed */
96
+ --background-image-ai-subtle: var(--core-bg-specific-ai-light-default);
97
+ --background-image-ai-subtle-hover: var(--core-bg-specific-ai-light-hover);
98
+ --background-image-ai-subtle-pressed: var(--core-bg-specific-ai-light-pressed);
99
+ --background-image-ai-strong: var(--core-bg-specific-ai-dark-default);
100
+ --background-image-ai-strong-hover: var(--core-bg-specific-ai-dark-hover);
101
+ --background-image-ai-strong-pressed: var(--core-bg-specific-ai-dark-pressed);
92
102
 
93
103
  /* ── Colors: Semantic (shadcn compatible) ───────────────────────────────── */
94
104
  --color-background: var(--core-bg-main-primary);
@@ -859,8 +869,21 @@ body {
859
869
  animation: ai-pulse 1.6s ease-in-out infinite;
860
870
  }
861
871
 
862
- .ai-gradient-text {
863
- color: var(--core-text-functional-info);
872
+ /* Gradient-clipped text/icons for AI outlined & ghost buttons. The host element
873
+ carries `data-ai-text` so the gradient follows the button's hover/pressed
874
+ state (icons are font glyphs, so background-clip:text works on them too). */
875
+ .ai-grad-text {
876
+ background-image: var(--core-bg-specific-ai-dark-default);
877
+ -webkit-background-clip: text;
878
+ background-clip: text;
879
+ -webkit-text-fill-color: transparent;
880
+ color: transparent;
881
+ }
882
+ [data-ai-text]:hover .ai-grad-text {
883
+ background-image: var(--core-bg-specific-ai-dark-hover);
884
+ }
885
+ [data-ai-text]:active .ai-grad-text {
886
+ background-image: var(--core-bg-specific-ai-dark-pressed);
864
887
  }
865
888
 
866
889
  .ai-orb {
@@ -935,17 +958,6 @@ body {
935
958
  }
936
959
  }
937
960
 
938
- @keyframes ai-reveal {
939
- from {
940
- opacity: 0;
941
- transform: translateY(4px);
942
- }
943
- to {
944
- opacity: 1;
945
- transform: translateY(0);
946
- }
947
- }
948
-
949
961
  @keyframes ai-ring {
950
962
  0% {
951
963
  opacity: 0.6;