@x-plat/design-system 0.2.3 → 0.3.0

package/dist/{colors-BNxEsOY3.d.cts → colors-BgzpjYfN.d.cts}

@@ -149,10 +149,15 @@ type MergedNamespaceColors<N extends keyof AllNamespaces> = N extends keyof Defa
 type ColorNamespace = keyof AllNamespaces;
 type ColorName<C extends ColorNamespace> = keyof MergedNamespaceColors<C>;
 type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = K extends keyof MergedNamespaceColors<C> ? MergedNamespaceColors<C>[K] extends string ? undefined : keyof MergedNamespaceColors<C>[K] : undefined;
-interface ColorProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> {
-    colorNamespace?: N;
-    color?: C;
-    colorDepth?: ColorDepth<N, C>;
+type BuildTokenStrings<N extends ColorNamespace> = {
+    [C in ColorName<N>]: ColorDepth<N, C> extends undefined ? `${N & string}-${C & string}` : `${N & string}-${C & string}-${ColorDepth<N, C> & (string | number)}`;
+}[ColorName<N>];
+type ColorToken = {
+    [N in ColorNamespace]: BuildTokenStrings<N>;
+}[ColorNamespace];
+interface ColorProps {
+    /** "xplat-blue-500" 형태로 지정 (자동완성 지원) */
+    color?: ColorToken;
 }
 
-export { type CustomColors as C, type CustomNamespaces as a, type ColorNamespace as b, colors as c, type ColorName as d, type ColorDepth as e, type ColorProps as f };
+export { type CustomColors as C, type CustomNamespaces as a, type ColorNamespace as b, colors as c, type ColorName as d, type ColorDepth as e, type ColorToken as f, type ColorProps as g };

package/dist/{colors-BNxEsOY3.d.ts → colors-BgzpjYfN.d.ts}

@@ -149,10 +149,15 @@ type MergedNamespaceColors<N extends keyof AllNamespaces> = N extends keyof Defa
 type ColorNamespace = keyof AllNamespaces;
 type ColorName<C extends ColorNamespace> = keyof MergedNamespaceColors<C>;
 type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = K extends keyof MergedNamespaceColors<C> ? MergedNamespaceColors<C>[K] extends string ? undefined : keyof MergedNamespaceColors<C>[K] : undefined;
-interface ColorProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> {
-    colorNamespace?: N;
-    color?: C;
-    colorDepth?: ColorDepth<N, C>;
+type BuildTokenStrings<N extends ColorNamespace> = {
+    [C in ColorName<N>]: ColorDepth<N, C> extends undefined ? `${N & string}-${C & string}` : `${N & string}-${C & string}-${ColorDepth<N, C> & (string | number)}`;
+}[ColorName<N>];
+type ColorToken = {
+    [N in ColorNamespace]: BuildTokenStrings<N>;
+}[ColorNamespace];
+interface ColorProps {
+    /** "xplat-blue-500" 형태로 지정 (자동완성 지원) */
+    color?: ColorToken;
 }
 
-export { type CustomColors as C, type CustomNamespaces as a, type ColorNamespace as b, colors as c, type ColorName as d, type ColorDepth as e, type ColorProps as f };
+export { type CustomColors as C, type CustomNamespaces as a, type ColorNamespace as b, colors as c, type ColorName as d, type ColorDepth as e, type ColorToken as f, type ColorProps as g };

package/dist/components/Avatar/index.cjs

@@ -24,11 +24,6 @@ __export(Avatar_exports, {
 });
 module.exports = __toCommonJS(Avatar_exports);
 
-// src/util/getColor.ts
-var getColorClass = (namespace, palette, shade) => {
-  return `${String(namespace)}-${String(palette)}${shade !== void 0 ? `-${String(shade)}` : ""}`;
-};
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -53,16 +48,10 @@ var Avatar = (props) => {
     alt,
     name,
     size = "md",
-    colorNamespace = "xplat",
-    color = "blue",
-    colorDepth,
+    color = "xplat-blue-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color,
-    colorDepth ?? 500
-  );
+  const colorClass = color;
   const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-avatar", size, className), children: src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };

package/dist/components/Avatar/index.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, f as ColorProps } from '../../colors-BNxEsOY3.cjs';
+import { g as ColorProps } from '../../colors-BgzpjYfN.cjs';
 
 type AvatarSize = "sm" | "md" | "lg";
-interface AvatarProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
+interface AvatarProps extends ColorProps {
     src?: string;
     alt?: string;
     name?: string;
@@ -10,239 +10,7 @@ interface AvatarProps<N extends ColorNamespace, C extends ColorName<N> = ColorNa
     className?: string;
 }
 declare const Avatar: {
-    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof (N extends "xplat" | "test" ? N extends never ? {
-        readonly xplat: {
-            readonly red: {
-                readonly 50: "#FFF0F0";
-                readonly 100: "#FFDDDE";
-                readonly 200: "#FFC1C2";
-                readonly 300: "#FF9698";
-                readonly 400: "#FF5A5D";
-                readonly 500: "#FF272B";
-                readonly 600: "#F80409";
-                readonly 700: "#D40105";
-                readonly 800: "#AE0609";
-                readonly 900: "#900C0F";
-            };
-            readonly green: {
-                readonly 50: "#E5F6EA";
-                readonly 100: "#C1E7CC";
-                readonly 200: "#98D8AC";
-                readonly 300: "#6CCA8B";
-                readonly 400: "#47BE72";
-                readonly 500: "#10B259";
-                readonly 600: "#00A34F";
-                readonly 700: "#009143";
-                readonly 800: "#007F38";
-                readonly 900: "#006024";
-            };
-            readonly orange: {
-                readonly 50: "#FFF8EC";
-                readonly 100: "#FFF0D3";
-                readonly 200: "#FFDDA5";
-                readonly 300: "#FFC46D";
-                readonly 400: "#FF9F32";
-                readonly 500: "#FF820A";
-                readonly 600: "#FF6900";
-                readonly 700: "#CC4B02";
-                readonly 800: "#A13A0B";
-                readonly 900: "#82320C";
-            };
-            readonly yellow: {
-                readonly 50: "#FFFDE7";
-                readonly 100: "#FFFAC1";
-                readonly 200: "#FFF186";
-                readonly 300: "#FFE041";
-                readonly 400: "#FFCC0D";
-                readonly 500: "#F0B100";
-                readonly 600: "#D18800";
-                readonly 700: "#A66002";
-                readonly 800: "#894B0A";
-                readonly 900: "#743D0F";
-            };
-            readonly blue: {
-                readonly 50: "#F1F4FD";
-                readonly 100: "#DFE7FA";
-                readonly 200: "#C5D4F8";
-                readonly 300: "#9EB8F2";
-                readonly 400: "#7093EA";
-                readonly 500: "#4D6DE3";
-                readonly 600: "#3950D7";
-                readonly 700: "#303EC5";
-                readonly 800: "#2D35A0";
-                readonly 900: "#29317F";
-            };
-            readonly lightblue: {
-                readonly 50: "#EEFAFF";
-                readonly 100: "#D9F4FF";
-                readonly 200: "#BBEDFF";
-                readonly 300: "#8DE3FF";
-                readonly 400: "#57D0FF";
-                readonly 500: "#30B6FF";
-                readonly 600: "#1999F7";
-                readonly 700: "#1280E3";
-                readonly 800: "#1566B8";
-                readonly 900: "#175791";
-            };
-            readonly purple: {
-                readonly 50: "#FBF6FE";
-                readonly 100: "#F5EAFD";
-                readonly 200: "#EDD8FC";
-                readonly 300: "#E0BAF8";
-                readonly 400: "#CD8DF3";
-                readonly 500: "#B961EB";
-                readonly 600: "#A541DC";
-                readonly 700: "#9230C5";
-                readonly 800: "#782B9E";
-                readonly 900: "#62247F";
-            };
-            readonly pink: {
-                readonly 50: "#FFF4FE";
-                readonly 100: "#FFE7FD";
-                readonly 200: "#FFCFFA";
-                readonly 300: "#FEA9F1";
-                readonly 400: "#FD75E7";
-                readonly 500: "#F553DA";
-                readonly 600: "#D821B6";
-                readonly 700: "#B31892";
-                readonly 800: "#921676";
-                readonly 900: "#781761";
-            };
-            readonly neutral: {
-                readonly 50: "#FAFAFA";
-                readonly 100: "#F5F5F5";
-                readonly 200: "#E5E5E5";
-                readonly 300: "#D4D4D4";
-                readonly 400: "#A1A1A1";
-                readonly 500: "#737373";
-                readonly 600: "#525252";
-                readonly 700: "#404040";
-                readonly 800: "#262626";
-                readonly 900: "#171717";
-            };
-            readonly black: "#000000";
-            readonly white: "#FFFFFF";
-        };
-        readonly test: {
-            readonly default: "#ffffff";
-        };
-    }[N] & CustomNamespaces[N] & (N extends "xplat" ? CustomColors : {}) : {
-        readonly xplat: {
-            readonly red: {
-                readonly 50: "#FFF0F0";
-                readonly 100: "#FFDDDE";
-                readonly 200: "#FFC1C2";
-                readonly 300: "#FF9698";
-                readonly 400: "#FF5A5D";
-                readonly 500: "#FF272B";
-                readonly 600: "#F80409";
-                readonly 700: "#D40105";
-                readonly 800: "#AE0609";
-                readonly 900: "#900C0F";
-            };
-            readonly green: {
-                readonly 50: "#E5F6EA";
-                readonly 100: "#C1E7CC";
-                readonly 200: "#98D8AC";
-                readonly 300: "#6CCA8B";
-                readonly 400: "#47BE72";
-                readonly 500: "#10B259";
-                readonly 600: "#00A34F";
-                readonly 700: "#009143";
-                readonly 800: "#007F38";
-                readonly 900: "#006024";
-            };
-            readonly orange: {
-                readonly 50: "#FFF8EC";
-                readonly 100: "#FFF0D3";
-                readonly 200: "#FFDDA5";
-                readonly 300: "#FFC46D";
-                readonly 400: "#FF9F32";
-                readonly 500: "#FF820A";
-                readonly 600: "#FF6900";
-                readonly 700: "#CC4B02";
-                readonly 800: "#A13A0B";
-                readonly 900: "#82320C";
-            };
-            readonly yellow: {
-                readonly 50: "#FFFDE7";
-                readonly 100: "#FFFAC1";
-                readonly 200: "#FFF186";
-                readonly 300: "#FFE041";
-                readonly 400: "#FFCC0D";
-                readonly 500: "#F0B100";
-                readonly 600: "#D18800";
-                readonly 700: "#A66002";
-                readonly 800: "#894B0A";
-                readonly 900: "#743D0F";
-            };
-            readonly blue: {
-                readonly 50: "#F1F4FD";
-                readonly 100: "#DFE7FA";
-                readonly 200: "#C5D4F8";
-                readonly 300: "#9EB8F2";
-                readonly 400: "#7093EA";
-                readonly 500: "#4D6DE3";
-                readonly 600: "#3950D7";
-                readonly 700: "#303EC5";
-                readonly 800: "#2D35A0";
-                readonly 900: "#29317F";
-            };
-            readonly lightblue: {
-                readonly 50: "#EEFAFF";
-                readonly 100: "#D9F4FF";
-                readonly 200: "#BBEDFF";
-                readonly 300: "#8DE3FF";
-                readonly 400: "#57D0FF";
-                readonly 500: "#30B6FF";
-                readonly 600: "#1999F7";
-                readonly 700: "#1280E3";
-                readonly 800: "#1566B8";
-                readonly 900: "#175791";
-            };
-            readonly purple: {
-                readonly 50: "#FBF6FE";
-                readonly 100: "#F5EAFD";
-                readonly 200: "#EDD8FC";
-                readonly 300: "#E0BAF8";
-                readonly 400: "#CD8DF3";
-                readonly 500: "#B961EB";
-                readonly 600: "#A541DC";
-                readonly 700: "#9230C5";
-                readonly 800: "#782B9E";
-                readonly 900: "#62247F";
-            };
-            readonly pink: {
-                readonly 50: "#FFF4FE";
-                readonly 100: "#FFE7FD";
-                readonly 200: "#FFCFFA";
-                readonly 300: "#FEA9F1";
-                readonly 400: "#FD75E7";
-                readonly 500: "#F553DA";
-                readonly 600: "#D821B6";
-                readonly 700: "#B31892";
-                readonly 800: "#921676";
-                readonly 900: "#781761";
-            };
-            readonly neutral: {
-                readonly 50: "#FAFAFA";
-                readonly 100: "#F5F5F5";
-                readonly 200: "#E5E5E5";
-                readonly 300: "#D4D4D4";
-                readonly 400: "#A1A1A1";
-                readonly 500: "#737373";
-                readonly 600: "#525252";
-                readonly 700: "#404040";
-                readonly 800: "#262626";
-                readonly 900: "#171717";
-            };
-            readonly black: "#000000";
-            readonly white: "#FFFFFF";
-        };
-        readonly test: {
-            readonly default: "#ffffff";
-        };
-    }[N] & (N extends "xplat" ? CustomColors : {}) : N extends never ? CustomNamespaces[N] : {})>(props: AvatarProps<N, C>): react_jsx_runtime.JSX.Element;
+    (props: AvatarProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/components/Avatar/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, f as ColorProps } from '../../colors-BNxEsOY3.js';
+import { g as ColorProps } from '../../colors-BgzpjYfN.js';
 
 type AvatarSize = "sm" | "md" | "lg";
-interface AvatarProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
+interface AvatarProps extends ColorProps {
     src?: string;
     alt?: string;
     name?: string;
@@ -10,239 +10,7 @@ interface AvatarProps<N extends ColorNamespace, C extends ColorName<N> = ColorNa
     className?: string;
 }
 declare const Avatar: {
-    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof (N extends "xplat" | "test" ? N extends never ? {
-        readonly xplat: {
-            readonly red: {
-                readonly 50: "#FFF0F0";
-                readonly 100: "#FFDDDE";
-                readonly 200: "#FFC1C2";
-                readonly 300: "#FF9698";
-                readonly 400: "#FF5A5D";
-                readonly 500: "#FF272B";
-                readonly 600: "#F80409";
-                readonly 700: "#D40105";
-                readonly 800: "#AE0609";
-                readonly 900: "#900C0F";
-            };
-            readonly green: {
-                readonly 50: "#E5F6EA";
-                readonly 100: "#C1E7CC";
-                readonly 200: "#98D8AC";
-                readonly 300: "#6CCA8B";
-                readonly 400: "#47BE72";
-                readonly 500: "#10B259";
-                readonly 600: "#00A34F";
-                readonly 700: "#009143";
-                readonly 800: "#007F38";
-                readonly 900: "#006024";
-            };
-            readonly orange: {
-                readonly 50: "#FFF8EC";
-                readonly 100: "#FFF0D3";
-                readonly 200: "#FFDDA5";
-                readonly 300: "#FFC46D";
-                readonly 400: "#FF9F32";
-                readonly 500: "#FF820A";
-                readonly 600: "#FF6900";
-                readonly 700: "#CC4B02";
-                readonly 800: "#A13A0B";
-                readonly 900: "#82320C";
-            };
-            readonly yellow: {
-                readonly 50: "#FFFDE7";
-                readonly 100: "#FFFAC1";
-                readonly 200: "#FFF186";
-                readonly 300: "#FFE041";
-                readonly 400: "#FFCC0D";
-                readonly 500: "#F0B100";
-                readonly 600: "#D18800";
-                readonly 700: "#A66002";
-                readonly 800: "#894B0A";
-                readonly 900: "#743D0F";
-            };
-            readonly blue: {
-                readonly 50: "#F1F4FD";
-                readonly 100: "#DFE7FA";
-                readonly 200: "#C5D4F8";
-                readonly 300: "#9EB8F2";
-                readonly 400: "#7093EA";
-                readonly 500: "#4D6DE3";
-                readonly 600: "#3950D7";
-                readonly 700: "#303EC5";
-                readonly 800: "#2D35A0";
-                readonly 900: "#29317F";
-            };
-            readonly lightblue: {
-                readonly 50: "#EEFAFF";
-                readonly 100: "#D9F4FF";
-                readonly 200: "#BBEDFF";
-                readonly 300: "#8DE3FF";
-                readonly 400: "#57D0FF";
-                readonly 500: "#30B6FF";
-                readonly 600: "#1999F7";
-                readonly 700: "#1280E3";
-                readonly 800: "#1566B8";
-                readonly 900: "#175791";
-            };
-            readonly purple: {
-                readonly 50: "#FBF6FE";
-                readonly 100: "#F5EAFD";
-                readonly 200: "#EDD8FC";
-                readonly 300: "#E0BAF8";
-                readonly 400: "#CD8DF3";
-                readonly 500: "#B961EB";
-                readonly 600: "#A541DC";
-                readonly 700: "#9230C5";
-                readonly 800: "#782B9E";
-                readonly 900: "#62247F";
-            };
-            readonly pink: {
-                readonly 50: "#FFF4FE";
-                readonly 100: "#FFE7FD";
-                readonly 200: "#FFCFFA";
-                readonly 300: "#FEA9F1";
-                readonly 400: "#FD75E7";
-                readonly 500: "#F553DA";
-                readonly 600: "#D821B6";
-                readonly 700: "#B31892";
-                readonly 800: "#921676";
-                readonly 900: "#781761";
-            };
-            readonly neutral: {
-                readonly 50: "#FAFAFA";
-                readonly 100: "#F5F5F5";
-                readonly 200: "#E5E5E5";
-                readonly 300: "#D4D4D4";
-                readonly 400: "#A1A1A1";
-                readonly 500: "#737373";
-                readonly 600: "#525252";
-                readonly 700: "#404040";
-                readonly 800: "#262626";
-                readonly 900: "#171717";
-            };
-            readonly black: "#000000";
-            readonly white: "#FFFFFF";
-        };
-        readonly test: {
-            readonly default: "#ffffff";
-        };
-    }[N] & CustomNamespaces[N] & (N extends "xplat" ? CustomColors : {}) : {
-        readonly xplat: {
-            readonly red: {
-                readonly 50: "#FFF0F0";
-                readonly 100: "#FFDDDE";
-                readonly 200: "#FFC1C2";
-                readonly 300: "#FF9698";
-                readonly 400: "#FF5A5D";
-                readonly 500: "#FF272B";
-                readonly 600: "#F80409";
-                readonly 700: "#D40105";
-                readonly 800: "#AE0609";
-                readonly 900: "#900C0F";
-            };
-            readonly green: {
-                readonly 50: "#E5F6EA";
-                readonly 100: "#C1E7CC";
-                readonly 200: "#98D8AC";
-                readonly 300: "#6CCA8B";
-                readonly 400: "#47BE72";
-                readonly 500: "#10B259";
-                readonly 600: "#00A34F";
-                readonly 700: "#009143";
-                readonly 800: "#007F38";
-                readonly 900: "#006024";
-            };
-            readonly orange: {
-                readonly 50: "#FFF8EC";
-                readonly 100: "#FFF0D3";
-                readonly 200: "#FFDDA5";
-                readonly 300: "#FFC46D";
-                readonly 400: "#FF9F32";
-                readonly 500: "#FF820A";
-                readonly 600: "#FF6900";
-                readonly 700: "#CC4B02";
-                readonly 800: "#A13A0B";
-                readonly 900: "#82320C";
-            };
-            readonly yellow: {
-                readonly 50: "#FFFDE7";
-                readonly 100: "#FFFAC1";
-                readonly 200: "#FFF186";
-                readonly 300: "#FFE041";
-                readonly 400: "#FFCC0D";
-                readonly 500: "#F0B100";
-                readonly 600: "#D18800";
-                readonly 700: "#A66002";
-                readonly 800: "#894B0A";
-                readonly 900: "#743D0F";
-            };
-            readonly blue: {
-                readonly 50: "#F1F4FD";
-                readonly 100: "#DFE7FA";
-                readonly 200: "#C5D4F8";
-                readonly 300: "#9EB8F2";
-                readonly 400: "#7093EA";
-                readonly 500: "#4D6DE3";
-                readonly 600: "#3950D7";
-                readonly 700: "#303EC5";
-                readonly 800: "#2D35A0";
-                readonly 900: "#29317F";
-            };
-            readonly lightblue: {
-                readonly 50: "#EEFAFF";
-                readonly 100: "#D9F4FF";
-                readonly 200: "#BBEDFF";
-                readonly 300: "#8DE3FF";
-                readonly 400: "#57D0FF";
-                readonly 500: "#30B6FF";
-                readonly 600: "#1999F7";
-                readonly 700: "#1280E3";
-                readonly 800: "#1566B8";
-                readonly 900: "#175791";
-            };
-            readonly purple: {
-                readonly 50: "#FBF6FE";
-                readonly 100: "#F5EAFD";
-                readonly 200: "#EDD8FC";
-                readonly 300: "#E0BAF8";
-                readonly 400: "#CD8DF3";
-                readonly 500: "#B961EB";
-                readonly 600: "#A541DC";
-                readonly 700: "#9230C5";
-                readonly 800: "#782B9E";
-                readonly 900: "#62247F";
-            };
-            readonly pink: {
-                readonly 50: "#FFF4FE";
-                readonly 100: "#FFE7FD";
-                readonly 200: "#FFCFFA";
-                readonly 300: "#FEA9F1";
-                readonly 400: "#FD75E7";
-                readonly 500: "#F553DA";
-                readonly 600: "#D821B6";
-                readonly 700: "#B31892";
-                readonly 800: "#921676";
-                readonly 900: "#781761";
-            };
-            readonly neutral: {
-                readonly 50: "#FAFAFA";
-                readonly 100: "#F5F5F5";
-                readonly 200: "#E5E5E5";
-                readonly 300: "#D4D4D4";
-                readonly 400: "#A1A1A1";
-                readonly 500: "#737373";
-                readonly 600: "#525252";
-                readonly 700: "#404040";
-                readonly 800: "#262626";
-                readonly 900: "#171717";
-            };
-            readonly black: "#000000";
-            readonly white: "#FFFFFF";
-        };
-        readonly test: {
-            readonly default: "#ffffff";
-        };
-    }[N] & (N extends "xplat" ? CustomColors : {}) : N extends never ? CustomNamespaces[N] : {})>(props: AvatarProps<N, C>): react_jsx_runtime.JSX.Element;
+    (props: AvatarProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/components/Avatar/index.js

@@ -1,8 +1,3 @@
-// src/util/getColor.ts
-var getColorClass = (namespace, palette, shade) => {
-  return `${String(namespace)}-${String(palette)}${shade !== void 0 ? `-${String(shade)}` : ""}`;
-};
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -27,16 +22,10 @@ var Avatar = (props) => {
     alt,
     name,
     size = "md",
-    colorNamespace = "xplat",
-    color = "blue",
-    colorDepth,
+    color = "xplat-blue-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color,
-    colorDepth ?? 500
-  );
+  const colorClass = color;
   const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
   return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-avatar", size, className), children: src ? /* @__PURE__ */ jsx("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };

package/dist/components/Badge/index.cjs

@@ -24,11 +24,6 @@ __export(Badge_exports, {
 });
 module.exports = __toCommonJS(Badge_exports);
 
-// src/util/getColor.ts
-var getColorClass = (namespace, palette, shade) => {
-  return `${String(namespace)}-${String(palette)}${shade !== void 0 ? `-${String(shade)}` : ""}`;
-};
-
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -54,16 +49,10 @@ var Badge = (props) => {
     maxCount = 99,
     dot = false,
     size = "md",
-    colorNamespace = "xplat",
-    color = "red",
-    colorDepth,
+    color = "xplat-red-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color,
-    colorDepth ?? 500
-  );
+  const colorClass = color;
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-badge", size, className), children: [