@l3mpire/ui 3.0.0 → 3.2.1

package/package.json

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

package/src/styles/globals.css

@@ -159,6 +159,37 @@ body {
   --color-badge-outlined-warning-text: var(--comp-badge-outlined-warning-text);
   --color-badge-outlined-neutral-border: var(--comp-badge-outlined-neutral-border);
   --color-badge-outlined-neutral-text: var(--comp-badge-outlined-neutral-text);
+  /* Categorical tones (tonal soft tags) */
+  --color-badge-indigo-bg: var(--comp-badge-indigo-bg);
+  --color-badge-indigo-text: var(--comp-badge-indigo-text);
+  --color-badge-indigo-border: var(--comp-badge-indigo-border);
+  --color-badge-rose-bg: var(--comp-badge-rose-bg);
+  --color-badge-rose-text: var(--comp-badge-rose-text);
+  --color-badge-rose-border: var(--comp-badge-rose-border);
+  --color-badge-lime-bg: var(--comp-badge-lime-bg);
+  --color-badge-lime-text: var(--comp-badge-lime-text);
+  --color-badge-lime-border: var(--comp-badge-lime-border);
+  --color-badge-violet-bg: var(--comp-badge-violet-bg);
+  --color-badge-violet-text: var(--comp-badge-violet-text);
+  --color-badge-violet-border: var(--comp-badge-violet-border);
+  --color-badge-cyan-bg: var(--comp-badge-cyan-bg);
+  --color-badge-cyan-text: var(--comp-badge-cyan-text);
+  --color-badge-cyan-border: var(--comp-badge-cyan-border);
+  --color-badge-orange-bg: var(--comp-badge-orange-bg);
+  --color-badge-orange-text: var(--comp-badge-orange-text);
+  --color-badge-orange-border: var(--comp-badge-orange-border);
+  --color-badge-emerald-bg: var(--comp-badge-emerald-bg);
+  --color-badge-emerald-text: var(--comp-badge-emerald-text);
+  --color-badge-emerald-border: var(--comp-badge-emerald-border);
+  --color-badge-fuchsia-bg: var(--comp-badge-fuchsia-bg);
+  --color-badge-fuchsia-text: var(--comp-badge-fuchsia-text);
+  --color-badge-fuchsia-border: var(--comp-badge-fuchsia-border);
+  --color-badge-amber-bg: var(--comp-badge-amber-bg);
+  --color-badge-amber-text: var(--comp-badge-amber-text);
+  --color-badge-amber-border: var(--comp-badge-amber-border);
+  --color-badge-slate-bg: var(--comp-badge-slate-bg);
+  --color-badge-slate-text: var(--comp-badge-slate-text);
+  --color-badge-slate-border: var(--comp-badge-slate-border);
 
   /* ── Colors: Button ────────────────────────────────────────────────────── */
   --color-btn-solid-brand-bg-default: var(--comp-btn-solid-brand-bg-default);
@@ -473,6 +504,37 @@ body {
   --color-tag-brand-text: var(--comp-tag-brand-text);
   --color-tag-neutral-bg: var(--comp-tag-neutral-bg);
   --color-tag-neutral-text: var(--comp-tag-neutral-text);
+  /* Categorical tones */
+  --color-tag-indigo-bg: var(--comp-tag-indigo-bg);
+  --color-tag-indigo-text: var(--comp-tag-indigo-text);
+  --color-tag-indigo-border: var(--comp-tag-indigo-border);
+  --color-tag-rose-bg: var(--comp-tag-rose-bg);
+  --color-tag-rose-text: var(--comp-tag-rose-text);
+  --color-tag-rose-border: var(--comp-tag-rose-border);
+  --color-tag-lime-bg: var(--comp-tag-lime-bg);
+  --color-tag-lime-text: var(--comp-tag-lime-text);
+  --color-tag-lime-border: var(--comp-tag-lime-border);
+  --color-tag-violet-bg: var(--comp-tag-violet-bg);
+  --color-tag-violet-text: var(--comp-tag-violet-text);
+  --color-tag-violet-border: var(--comp-tag-violet-border);
+  --color-tag-cyan-bg: var(--comp-tag-cyan-bg);
+  --color-tag-cyan-text: var(--comp-tag-cyan-text);
+  --color-tag-cyan-border: var(--comp-tag-cyan-border);
+  --color-tag-orange-bg: var(--comp-tag-orange-bg);
+  --color-tag-orange-text: var(--comp-tag-orange-text);
+  --color-tag-orange-border: var(--comp-tag-orange-border);
+  --color-tag-emerald-bg: var(--comp-tag-emerald-bg);
+  --color-tag-emerald-text: var(--comp-tag-emerald-text);
+  --color-tag-emerald-border: var(--comp-tag-emerald-border);
+  --color-tag-fuchsia-bg: var(--comp-tag-fuchsia-bg);
+  --color-tag-fuchsia-text: var(--comp-tag-fuchsia-text);
+  --color-tag-fuchsia-border: var(--comp-tag-fuchsia-border);
+  --color-tag-amber-bg: var(--comp-tag-amber-bg);
+  --color-tag-amber-text: var(--comp-tag-amber-text);
+  --color-tag-amber-border: var(--comp-tag-amber-border);
+  --color-tag-slate-bg: var(--comp-tag-slate-bg);
+  --color-tag-slate-text: var(--comp-tag-slate-text);
+  --color-tag-slate-border: var(--comp-tag-slate-border);
 
   /* ── Colors: TextInput ─────────────────────────────────────────────────── */
   --color-text-input-bg-default: var(--comp-text-input-bg-default);