@l3mpire/ui 2.26.3 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@l3mpire/ui",
-  "version": "2.26.3",
+  "version": "3.2.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -37,12 +37,14 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@l3mpire/icons": "0.5.5"
+    "@l3mpire/icons": "0.6.1"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -59,8 +61,8 @@
     "class-variance-authority": "^0.7",
     "clsx": "^2",
     "tailwind-merge": "^3",
-    "@l3mpire/icons": "0.5.5",
-    "@l3mpire/tokens": "0.11.0"
+    "@l3mpire/tokens": "0.13.0",
+    "@l3mpire/icons": "0.6.1"
   },
   "devDependencies": {
     "@types/react": "^19",
@@ -70,7 +72,7 @@
     "tailwindcss": "^4",
     "tsup": "^8",
     "typescript": "^5",
-    "@l3mpire/icons": "0.5.5"
+    "@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);
@@ -307,6 +338,15 @@ body {
   --color-dropdown-heading-text: var(--comp-dropdown-heading-text);
   --color-dropdown-clear-text: var(--comp-dropdown-clear-text);
 
+  /* ── Colors: EmojiPicker ──────────────────────────────────────────────── */
+  --color-emoji-picker-bg: var(--comp-emoji-picker-bg);
+  --color-emoji-picker-border: var(--comp-emoji-picker-border);
+  --color-emoji-picker-search-bg: var(--comp-emoji-picker-search-bg);
+  --color-emoji-picker-text: var(--comp-emoji-picker-text);
+  --color-emoji-picker-text-muted: var(--comp-emoji-picker-text-muted);
+  --color-emoji-picker-accent: var(--comp-emoji-picker-accent);
+  --color-emoji-picker-category-bg: var(--comp-emoji-picker-category-bg);
+
   /* ── Colors: InfoMessage ───────────────────────────────────────────────── */
   --color-info-message-info-bg: var(--comp-info-message-info-bg);
   --color-info-message-info-icon: var(--comp-info-message-info-icon);
@@ -464,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);
@@ -626,3 +697,31 @@ body {
   from { transform: translateX(0); }
   to { transform: translateX(100%); }
 }
+
+/*
+ * EmojiPicker theming
+ *
+ * Maps emoji-mart's documented CSS variables to lemDS color values so the
+ * picker matches the rest of the surface. emoji-mart renders into a custom
+ * `<em-emoji-picker>` element backed by shadow DOM; CSS custom properties
+ * inherit through that boundary, so we set the vars on the element itself.
+ *
+ * RGB triplets are required (emoji-mart consumes them via `rgba(var(--x), a)`).
+ * The two `--em-color-*` border vars can hold any color, so we reuse our
+ * border tokens directly and they pick up the dark-mode override automatically.
+ */
+.lemds-emoji-picker em-emoji-picker {
+  --em-rgb-color: 33, 56, 86;
+  --em-rgb-accent: 49, 107, 255;
+  --em-rgb-background: 255, 255, 255;
+  --em-rgb-input: 250, 250, 250;
+  --em-color-border: var(--core-border-main-primary);
+  --em-color-border-over: var(--core-border-main-secondary);
+}
+
+[data-theme="dark"] .lemds-emoji-picker em-emoji-picker {
+  --em-rgb-color: 255, 255, 255;
+  --em-rgb-accent: 22, 70, 194;
+  --em-rgb-background: 12, 21, 33;
+  --em-rgb-input: 17, 30, 46;
+}