@l.x/mycelium 1.0.2 → 1.0.4

package/css/theme.css

@@ -0,0 +1,322 @@
+/* Mycelium Theme Tokens for Tailwind v4 */
+
+@theme {
+  /* Font Families - these create font-* utilities */
+  --font-basel: "Basel Grotesk", sans-serif;
+  --font-basel-book: "Basel Grotesk Book", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Helvetica, Arial, sans-serif;
+  --font-basel-medium: "Basel Grotesk Medium", -apple-system, system-ui, BlinkMacSystemFont,
+    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: "InputMono-Regular", monospace;
+
+  /* Font Weights */
+  --font-weight-book: 485;
+  --font-weight-medium: 535;
+
+  /* Breakpoints */
+  --breakpoint-xxs: 360px;
+  --breakpoint-xs: 380px;
+  --breakpoint-sm: 450px;
+  --breakpoint-md: 640px;
+  --breakpoint-lg: 768px;
+  --breakpoint-xl: 1024px;
+  --breakpoint-xxl: 1280px;
+  --breakpoint-xxxl: 1536px;
+
+  /* Typography Scale - Headings (creates text-heading-* utilities) */
+  --text-heading-1: 52px;
+  --text-heading-1--line-height: 60px;
+  --text-heading-1--letter-spacing: -0.02em;
+  --text-heading-1--font-weight: 485;
+
+  --text-heading-2: 36px;
+  --text-heading-2--line-height: 44px;
+  --text-heading-2--letter-spacing: -0.01em;
+  --text-heading-2--font-weight: 485;
+
+  --text-heading-3: 24px;
+  --text-heading-3--line-height: 32px;
+  --text-heading-3--letter-spacing: -0.005em;
+  --text-heading-3--font-weight: 485;
+
+  /* Typography Scale - Subheadings */
+  --text-subheading-1: 18px;
+  --text-subheading-1--line-height: 24px;
+  --text-subheading-1--font-weight: 485;
+
+  --text-subheading-2: 16px;
+  --text-subheading-2--line-height: 24px;
+  --text-subheading-2--font-weight: 485;
+
+  /* Typography Scale - Body */
+  --text-body-1: 18px;
+  --text-body-1--line-height: 24px;
+  --text-body-1--font-weight: 485;
+
+  --text-body-2: 16px;
+  --text-body-2--line-height: 24px;
+  --text-body-2--font-weight: 485;
+
+  --text-body-3: 14px;
+  --text-body-3--line-height: 20px;
+  --text-body-3--font-weight: 485;
+
+  --text-body-4: 12px;
+  --text-body-4--line-height: 16px;
+  --text-body-4--font-weight: 485;
+
+  /* Typography Scale - Buttons */
+  --text-button-1: 18px;
+  --text-button-1--line-height: 24px;
+  --text-button-1--font-weight: 535;
+
+  --text-button-2: 16px;
+  --text-button-2--line-height: 24px;
+  --text-button-2--font-weight: 535;
+
+  --text-button-3: 14px;
+  --text-button-3--line-height: 20px;
+  --text-button-3--font-weight: 535;
+
+  --text-button-4: 12px;
+  --text-button-4--line-height: 16px;
+  --text-button-4--font-weight: 535;
+
+  /* Base Colors */
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Semantic Colors - Background */
+  --color-background: #ffffff;
+  --color-background-dark: #000000;
+
+  /* Semantic Colors - Neutrals */
+  --color-neutral1-light: #222222;
+  --color-neutral1-dark: #ffffff;
+  --color-neutral2-light: #7d7d7d;
+  --color-neutral2-dark: #9b9b9b;
+  --color-neutral3-light: #cecece;
+  --color-neutral3-dark: #5e5e5e;
+
+  /* Semantic Colors - Surfaces */
+  --color-surface1-light: #ffffff;
+  --color-surface1-dark: #131313;
+  --color-surface1-hovered: #f5f5f5;
+  --color-surface1-hovered-dark: #181818;
+
+  --color-surface2-light: #f9f9f9;
+  --color-surface2-dark: #1b1b1b;
+  --color-surface2-hovered: #f2f2f2;
+  --color-surface2-hovered-dark: #242424;
+
+  --color-surface3-light: #22222212;
+  --color-surface3-dark: #ffffff12;
+  --color-surface3-hovered: rgba(34, 34, 34, 0.12);
+  --color-surface3-hovered-dark: rgba(255, 255, 255, 0.16);
+
+  --color-surface4-light: #ffffff64;
+  --color-surface4-dark: #ffffff20;
+
+  --color-surface5-light: #00000004;
+  --color-surface5-dark: #00000004;
+
+  /* Semantic Colors - Accents */
+  --color-accent1-light: #ff37c7;
+  --color-accent1-dark: #ff37c7;
+  --color-accent2-light: #ffefff;
+  --color-accent2-dark: #311c31;
+  --color-accent3: #4c82fb;
+  --color-accent3-dark: #4c82fb;
+  --color-accent4: #fdaff0;
+  --color-accent4-light: #fef4ff;
+
+  /* Token Colors */
+  --color-token0: #fc72ff;
+  --color-token0-dark: #fc72ff;
+  --color-token1: #4c82fb;
+  --color-token1-dark: #4c82fb;
+
+  /* Status Colors */
+  --color-success-light: #0c8911;
+  --color-success-dark: #21c95e;
+  --color-critical-light: #e10f0f;
+  --color-critical-dark: #ff593c;
+  --color-critical-secondary: #fff2f1;
+  --color-critical-secondary-dark: #2e0805;
+  --color-warning: #eeb317;
+
+  /* Network Colors */
+  --color-network-ethereum: #627eea;
+  --color-network-optimism: #ff0420;
+  --color-network-polygon: #a457ff;
+  --color-network-arbitrum: #28a0f0;
+  --color-network-bsc: #f0b90b;
+  --color-network-base: #0052ff;
+  --color-network-blast: #fcfc03;
+
+  /* Decorative/Pattern Colors */
+  --color-pattern-dots-dark: rgba(252, 116, 254, 0.08);
+  --color-pattern-dots-light: rgba(252, 116, 254, 0.2);
+
+  /* Gray Palette */
+  --color-gray-50: #f5f6fc;
+  --color-gray-100: #e8ecfb;
+  --color-gray-150: #d2d9ee;
+  --color-gray-200: #b8c0dc;
+  --color-gray-250: #a6afca;
+  --color-gray-300: #98a1c0;
+  --color-gray-350: #888fab;
+  --color-gray-400: #7780a0;
+  --color-gray-450: #6b7594;
+  --color-gray-500: #5d6785;
+  --color-gray-550: #505a78;
+  --color-gray-600: #404a67;
+  --color-gray-650: #333d59;
+  --color-gray-700: #293249;
+  --color-gray-750: #1b2236;
+  --color-gray-800: #131a2a;
+  --color-gray-850: #0e1524;
+  --color-gray-900: #0d111c;
+  --color-gray-950: #080b11;
+
+  /* Pink Palette */
+  --color-pink-50: #f9ecf1;
+  --color-pink-100: #ffd9e4;
+  --color-pink-200: #fba4c0;
+  --color-pink-300: #ff6fa3;
+  --color-pink-400: #fb118e;
+  --color-pink-500: #c41969;
+  --color-pink-600: #8c0f49;
+  --color-pink-700: #55072a;
+  --color-pink-800: #350318;
+  --color-pink-900: #2b000b;
+  --color-pink-vibrant: #f50db4;
+  --color-pink-base: #fc74fe;
+
+  /* Red Palette */
+  --color-red-50: #faecea;
+  --color-red-100: #fed5cf;
+  --color-red-200: #fea79b;
+  --color-red-300: #fd766b;
+  --color-red-400: #fa2b39;
+  --color-red-500: #c4292f;
+  --color-red-600: #891e20;
+  --color-red-700: #530f0f;
+  --color-red-800: #380a03;
+  --color-red-900: #240800;
+  --color-red-vibrant: #f14544;
+
+  /* Yellow Palette */
+  --color-yellow-50: #f6f2d5;
+  --color-yellow-100: #dbbc19;
+  --color-yellow-200: #dbbc19;
+  --color-yellow-300: #bb9f13;
+  --color-yellow-400: #a08116;
+  --color-yellow-500: #866311;
+  --color-yellow-600: #5d4204;
+  --color-yellow-700: #3e2b04;
+  --color-yellow-800: #231902;
+  --color-yellow-900: #180f02;
+  --color-yellow-vibrant: #faf40a;
+
+  /* Green Palette */
+  --color-green-50: #e3f3e6;
+  --color-green-100: #bfeeca;
+  --color-green-200: #76d191;
+  --color-green-300: #40b66b;
+  --color-green-400: #209853;
+  --color-green-500: #0b783e;
+  --color-green-600: #0c522a;
+  --color-green-700: #053117;
+  --color-green-800: #091f10;
+  --color-green-900: #09130b;
+  --color-green-vibrant: #5cfe9d;
+
+  /* Blue Palette */
+  --color-blue-50: #edeff8;
+  --color-blue-100: #dee1ff;
+  --color-blue-200: #adbcff;
+  --color-blue-300: #869eff;
+  --color-blue-400: #4c82fb;
+  --color-blue-500: #1267d6;
+  --color-blue-600: #1d4294;
+  --color-blue-700: #09265e;
+  --color-blue-800: #0b193f;
+  --color-blue-900: #040e34;
+  --color-blue-vibrant: #587bff;
+
+  /* Gold Palette */
+  --color-gold-200: #eeb317;
+  --color-gold-400: #b17900;
+  --color-gold-vibrant: #feb239;
+
+  /* Magenta Palette */
+  --color-magenta-300: #fd82ff;
+  --color-magenta-vibrant: #fc72ff;
+
+  /* Purple Palette */
+  --color-purple-300: #8440f2;
+  --color-purple-900: #1c0337;
+  --color-purple-vibrant: #6100ff;
+
+  /* Unicon Avatar Colors - Light Mode */
+  --color-unicon-0-light: #f50db4;
+  --color-unicon-1-light: #ffbf17;
+  --color-unicon-2-light: #ff8934;
+  --color-unicon-3-light: #85754a;
+  --color-unicon-4-light: #0c8911;
+  --color-unicon-5-light: #78e744;
+  --color-unicon-6-light: #00c3a0;
+  --color-unicon-7-light: #23a3ff;
+  --color-unicon-8-light: #4981ff;
+  --color-unicon-9-light: #4300b0;
+
+  /* Unicon Avatar Colors - Dark Mode */
+  --color-unicon-0-dark: #fc74fe;
+  --color-unicon-1-dark: #fff612;
+  --color-unicon-2-dark: #ff4d00;
+  --color-unicon-3-dark: #996f01;
+  --color-unicon-4-dark: #21c95e;
+  --color-unicon-5-dark: #b1f13c;
+  --color-unicon-6-dark: #5cfe9d;
+  --color-unicon-7-dark: #3adcff;
+  --color-unicon-8-dark: #0047ff;
+  --color-unicon-9-dark: #9e62ff;
+
+  /* Legacy/Compatibility Colors */
+  --color-border: #f9f9f9;
+  --color-input: #f9f9f9;
+  --color-ring: #222222;
+  --color-foreground: #222222;
+  --color-card: #ffffff;
+  --color-card-foreground: #222222;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #222222;
+  --color-primary: #222222;
+  --color-primary-foreground: #f9f9f9;
+  --color-secondary: #f9f9f9;
+  --color-secondary-foreground: #222222;
+  --color-muted: #f9f9f9;
+  --color-muted-foreground: #7d7d7d;
+  --color-destructive: #ff5f52;
+  --color-destructive-foreground: #f9f9f9;
+  --color-scrim: rgba(0, 0, 0, 0.6);
+
+  /* Border Radius */
+  --radius-none: 0px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-24: 24px;
+  --radius-28: 28px;
+  --radius-32: 32px;
+  --radius-full: 999999px;
+
+  /* Box Shadows */
+  --shadow-short: var(--shadow-short);
+  --shadow-medium: var(--shadow-medium);
+  --shadow-large: var(--shadow-large);
+}

package/css/variables.css

@@ -0,0 +1,202 @@
+/* CSS Custom Properties */
+
+/* Light mode is the default */
+:root {
+  color-scheme: light;
+  --font-basel: "Basel Grotesk";
+
+  /* Light mode shadows */
+  --shadow-short: 0px 1px 6px 2px rgba(0, 0, 0, 0.03), 0px 1px 2px 0px rgba(0, 0, 0, 0.02);
+  --shadow-medium: 0px 6px 12px -3px rgba(19, 19, 19, 0.04), 0px 2px 5px -2px rgba(19, 19, 19, 0.03);
+  --shadow-large: 0px 10px 20px -5px rgba(19, 19, 19, 0.05), 0px 4px 12px -3px rgba(19, 19, 19, 0.04);
+
+  /* shadcn compatibility */
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Mycelium semantic colors - light mode (auto-switching) */
+  --surface1: var(--color-surface1-light);
+  --surface2: var(--color-surface2-light);
+  --surface3: var(--color-surface3-light);
+  --surface4: var(--color-surface4-light);
+  --surface5: var(--color-surface5-light);
+  --neutral1: var(--color-neutral1-light);
+  --neutral2: var(--color-neutral2-light);
+  --neutral3: var(--color-neutral3-light);
+  --accent1: var(--color-accent1-light);
+  --accent2: var(--color-accent2-light);
+
+  /* Semantic status colors - auto-switching light/dark */
+  --success: var(--color-success-light);
+  --warning: var(--color-gold-200);
+  --critical: var(--color-critical-light);
+
+  /* Unicon avatar colors - auto-switching */
+  --unicon-0: var(--color-unicon-0-light);
+  --unicon-1: var(--color-unicon-1-light);
+  --unicon-2: var(--color-unicon-2-light);
+  --unicon-3: var(--color-unicon-3-light);
+  --unicon-4: var(--color-unicon-4-light);
+  --unicon-5: var(--color-unicon-5-light);
+  --unicon-6: var(--color-unicon-6-light);
+  --unicon-7: var(--color-unicon-7-light);
+  --unicon-8: var(--color-unicon-8-light);
+  --unicon-9: var(--color-unicon-9-light);
+  --unicon-bg-opacity: 0.12;
+}
+
+/* Dark mode applies when .dark class is present */
+.dark {
+  color-scheme: dark;
+
+  /* Dark mode shadows */
+  --shadow-short: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24);
+  --shadow-medium: 0px 10px 15px -3px rgba(19, 19, 19, 0.54), 0px 4px 6px -2px rgba(19, 19, 19, 0.4);
+  --shadow-large: 0px 16px 24px -6px rgba(0, 0, 0, 0.6), 0px 8px 12px -4px rgba(0, 0, 0, 0.48);
+
+  /* shadcn compatibility */
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  /* Mycelium semantic colors - dark mode (auto-switching) */
+  --surface1: var(--color-surface1-dark);
+  --surface2: var(--color-surface2-dark);
+  --surface3: var(--color-surface3-dark);
+  --surface4: var(--color-surface4-dark);
+  --surface5: var(--color-surface5-dark);
+  --neutral1: var(--color-neutral1-dark);
+  --neutral2: var(--color-neutral2-dark);
+  --neutral3: var(--color-neutral3-dark);
+  --accent1: var(--color-accent1-dark);
+  --accent2: var(--color-accent2-dark);
+  /* Status colors - dark mode */
+  --success: var(--color-success-dark);
+  --critical: var(--color-critical-dark);
+
+  /* Unicon avatar colors - dark mode */
+  --unicon-0: var(--color-unicon-0-dark);
+  --unicon-1: var(--color-unicon-1-dark);
+  --unicon-2: var(--color-unicon-2-dark);
+  --unicon-3: var(--color-unicon-3-dark);
+  --unicon-4: var(--color-unicon-4-dark);
+  --unicon-5: var(--color-unicon-5-dark);
+  --unicon-6: var(--color-unicon-6-dark);
+  --unicon-7: var(--color-unicon-7-dark);
+  --unicon-8: var(--color-unicon-8-dark);
+  --unicon-9: var(--color-unicon-9-dark);
+  --unicon-bg-opacity: 0.16;
+}
+
+/* shadcn theme inline block for Tailwind v4 */
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Mycelium semantic colors - auto-switching Tailwind utilities */
+  --color-surface1: var(--surface1);
+  --color-surface2: var(--surface2);
+  --color-surface3: var(--surface3);
+  --color-surface4: var(--surface4);
+  --color-surface5: var(--surface5);
+  --color-neutral1: var(--neutral1);
+  --color-neutral2: var(--neutral2);
+  --color-neutral3: var(--neutral3);
+  --color-accent1: var(--accent1);
+  --color-accent2: var(--accent2);
+  /* Status colors: semantic tokens reference raw palette from theme.css */
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-critical: var(--critical);
+}

package/fonts.css

@@ -0,0 +1,4 @@
+/* Basel Grotesk Fonts */
+/* Usage: @import "@universe/mycelium/fonts"; */
+
+@import "./css/fonts.css";

package/package.json

@@ -1 +1,50 @@
-{"name":"@l.x/mycelium","version":"1.0.2","description":"LX Exchange - mycelium","main":"index.js","dependencies":{"@luxexchange/mycelium":"1.0.2"}}
+{
+  "name": "@l.x/mycelium",
+  "version": "1.0.4",
+  "private": false,
+  "main": "src/index.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./tailwind": "./tailwind.css",
+    "./fonts": "./fonts.css",
+    "./cn": {
+      "types": "./src/cn.d.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.13.1",
+    "@typescript/native-preview": "7.0.0-dev.20260311.1",
+    "depcheck": "1.4.7",
+    "eslint": "8.57.1",
+    "react": "19.0.3",
+    "tailwindcss": "4.1.16",
+    "typescript": "5.8.3",
+    "@luxfi/eslint-config": "^1.0.6"
+  },
+  "nx": {
+    "includedScripts": []
+  },
+  "scripts": {
+    "typecheck": "nx typecheck @l.x/mycelium",
+    "typecheck:tsgo": "nx typecheck:tsgo @l.x/mycelium",
+    "lint": "nx lint @l.x/mycelium",
+    "lint:fix": "nx lint:fix @l.x/mycelium",
+    "lint:biome": "nx lint:biome @l.x/mycelium",
+    "lint:biome:fix": "nx lint:biome:fix @l.x/mycelium",
+    "lint:eslint": "nx lint:eslint @l.x/mycelium",
+    "lint:eslint:fix": "nx lint:eslint:fix @l.x/mycelium",
+    "check:deps:usage": "nx check:deps:usage @l.x/mycelium"
+  }
+}

package/project.json

@@ -0,0 +1,18 @@
+{
+  "name": "@l.x/mycelium",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "pkgs/mycelium/src",
+  "projectType": "library",
+  "tags": ["scope:mycelium", "type:lib"],
+  "targets": {
+    "typecheck": {},
+    "typecheck:tsgo": {},
+    "lint:biome": {},
+    "lint:biome:fix": {},
+    "lint:eslint": {},
+    "lint:eslint:fix": {},
+    "lint": {},
+    "lint:fix": {},
+    "check:deps:usage": {}
+  }
+}

package/src/cn.ts

@@ -0,0 +1,75 @@
+import { type ClassValue, clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+import { typographyClasses } from './types'
+
+/** Custom color classes for tailwind-merge conflict resolution */
+const colorClasses = [
+  'foreground',
+  'background',
+  'neutral1',
+  'neutral1-light',
+  'neutral1-dark',
+  'neutral2',
+  'neutral2-light',
+  'neutral2-dark',
+  'neutral3',
+  'neutral3-light',
+  'neutral3-dark',
+  'surface1',
+  'surface1-light',
+  'surface1-dark',
+  'surface2',
+  'surface2-light',
+  'surface2-dark',
+  'surface3',
+  'surface3-light',
+  'surface3-dark',
+  'surface4',
+  'surface4-light',
+  'surface4-dark',
+  'surface5',
+  'surface5-light',
+  'surface5-dark',
+  'accent1',
+  'accent1-light',
+  'accent1-dark',
+  'accent2',
+  'accent2-light',
+  'accent2-dark',
+  'success',
+  'warning',
+  'critical',
+  'destructive',
+  'muted-foreground',
+  'card-foreground',
+  'popover-foreground',
+  'primary-foreground',
+  'secondary-foreground',
+  'destructive-foreground',
+] as const
+
+/**
+ * Extended tailwind-merge configuration for Mycelium classes.
+ * - Typography: ensures cn('text-sm', 'text-body-1') correctly resolves to 'text-body-1'
+ * - Colors: ensures cn('text-foreground', 'text-critical') correctly resolves to 'text-critical'
+ */
+const customTwMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [...typographyClasses],
+      'text-color': colorClasses.map((c) => `text-${c}`),
+    },
+  },
+})
+
+/**
+ * Merge class names with Tailwind CSS conflict resolution.
+ *
+ * @example
+ * cn('text-sm', 'text-body-1') // => 'text-body-1'
+ * cn('bg-red-500', isActive && 'bg-blue-500') // => 'bg-blue-500' if isActive
+ * cn('p-4', className) // Merge with external className prop
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return customTwMerge(clsx(inputs))
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// Mycelium - Lx's Tailwind Design System
+// Main JS exports
+
+export { cn } from './cn'
+export * from './types'
+export { COLOR_COUNT, UNICON_COLORS } from './unicon/colors'
+export { hashString } from './unicon/hash'
+export { Unicon, type UniconProps } from './unicon/Unicon'