@x-plat/design-system 0.2.4 → 0.3.0

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

@@ -1,249 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, g as ColorProps, e as ColorDepth } from '../../colors-cxE7RsuF.js';
 import React from 'react';
+import { g as ColorProps } from '../../colors-BgzpjYfN.js';
 
-type TooltipColor = Exclude<ColorName<ColorNamespace>, "black" | "white">;
-interface TooltipProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
+interface TooltipProps extends ColorProps {
     type?: "primary" | "secondary";
     description: React.ReactNode;
-    color?: TooltipColor;
-    colorDepth?: ColorDepth<ColorNamespace, TooltipColor>;
     children?: React.ReactNode;
 }
 declare const Tooltip: {
-    <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: TooltipProps<N, C>): react_jsx_runtime.JSX.Element;
+    (props: TooltipProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/components/Tooltip/index.js

@@ -1,11 +1,6 @@
 // src/components/Tooltip/Tooltip.tsx
 import React from "react";
 
-// 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,19 +22,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Tooltip = (props) => {
   const {
     type = "primary",
-    colorNamespace = "xplat",
-    color = "blue",
-    colorDepth,
-    colorToken,
+    color = "xplat-neutral-900",
     description,
     children
   } = props;
   const iconRef = React.useRef(null);
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color,
-    colorDepth ?? 500
-  );
+  const colorClass = color;
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-tooltip", children: [
     /* @__PURE__ */ jsx("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
     /* @__PURE__ */ jsx("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })

package/dist/components/index.cjs

@@ -1453,11 +1453,6 @@ var Alert = (props) => {
 Alert.displayName = "Alert";
 var Alert_default = Alert;
 
-// src/util/getColor.ts
-var getColorClass = (namespace, palette, shade) => {
-  return `${String(namespace)}-${String(palette)}${shade !== void 0 ? `-${String(shade)}` : ""}`;
-};
-
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime297 = require("react/jsx-runtime");
 var Avatar = (props) => {
@@ -1466,17 +1461,10 @@ var Avatar = (props) => {
     alt,
     name,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
   return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: clsx_default("lib-xplat-avatar", size4, className), children: src ? /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime297.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" }) }) }) });
 };
@@ -1492,17 +1480,10 @@ var Badge = (props) => {
     maxCount = 99,
     dot = false,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "red",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-red-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const showBadge = dot || count2 !== void 0 && count2 > 0;
   const displayCount = count2 !== void 0 && count2 > maxCount ? `${maxCount}+` : count2;
   return /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: clsx_default("lib-xplat-badge", size4, className), children: [
@@ -1535,19 +1516,12 @@ var Button = (props) => {
     children,
     type = "primary",
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-black",
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
     "button",
     {
@@ -16165,10 +16139,7 @@ var Chart_default = Chart3;
 var import_jsx_runtime306 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     checked,
     label,
     onChange,
@@ -16180,11 +16151,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const mainColor = color2;
   const uncheckedClasses = `unchecked`;
   const checkedClasses = `checked ${mainColor}`;
   const disabledClasses = "disabled";
@@ -16212,19 +16179,12 @@ var import_jsx_runtime307 = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-black",
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size4, colorClass, className), children });
 };
 Chip.displayName = "Chip";
@@ -27218,19 +27178,11 @@ var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_jsx_runtime314 = require("react/jsx-runtime");
-function getColorValue(ns, color2, depth) {
-  const nsColors = colors[ns];
-  const colorEntry = nsColors[color2];
-  if (typeof colorEntry === "string") return colorEntry;
-  return colorEntry[String(depth)] ?? "";
-}
 var SingleDatePicker = (props) => {
   const {
     value,
     onChange,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     highlightDates,
     ...rest
   } = props;
@@ -27238,16 +27190,11 @@ var SingleDatePicker = (props) => {
     if (Array.isArray(date)) return;
     onChange?.(date);
   };
-  const activeColor = getColorValue(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
     "div",
     {
       className: "lib-xplat-datepicker",
-      style: { "--datepicker-active-color": activeColor },
+      style: { "--datepicker-active-color": `var(--${color2})` },
       children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
         DatePicker,
         {
@@ -27305,13 +27252,12 @@ var PopupPicker = (props) => {
           Button_default,
           {
             type: "secondary",
-            color: "neutral",
-            colorDepth: 400,
+            color: "xplat-neutral-400",
             onClick: handleClose,
             children: "\uCDE8\uC18C"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
+        /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(Button_default, { type: "primary", color: "xplat-blue-500", onClick: handleClose, children: "\uC801\uC6A9" })
       ] })
     ] }) })
   ] });
@@ -27341,19 +27287,12 @@ var RangePicker = (props) => {
     onChange,
     minDate,
     maxDate,
-    colorNamespace,
-    color: color2,
-    colorDepth
+    color: color2
   } = props;
   const rangeDates = import_react15.default.useMemo(
     () => getDatesBetween(startDate, endDate),
     [startDate, endDate]
   );
-  const colorProps = {
-    ...colorNamespace !== void 0 && { colorNamespace },
-    ...color2 !== void 0 && { color: color2 },
-    ...colorDepth !== void 0 && { colorDepth }
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "lib-xplat-range-datepicker", children: [
     /* @__PURE__ */ (0, import_jsx_runtime316.jsxs)("div", { className: "lib-xplat-range-datepicker-from", children: [
       /* @__PURE__ */ (0, import_jsx_runtime316.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
@@ -27365,7 +27304,7 @@ var RangePicker = (props) => {
           minDate,
           maxDate: endDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] }),
@@ -27379,7 +27318,7 @@ var RangePicker = (props) => {
           minDate: startDate,
           maxDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] })
@@ -28091,17 +28030,10 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -28211,17 +28143,10 @@ var Progress = (props) => {
     max: max3 = 100,
     size: size4 = "md",
     showLabel = false,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const percentage = Math.min(100, Math.max(0, value / max3 * 100));
   return /* @__PURE__ */ (0, import_jsx_runtime328.jsxs)("div", { className: clsx_default("lib-xplat-progress", size4, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime328.jsx)(
@@ -28267,10 +28192,7 @@ var Radio = (props) => {
     label,
     value,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     size: sizeProp,
     ...rest
   } = props;
@@ -28283,11 +28205,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
     "label",
     {
@@ -28352,17 +28270,10 @@ var import_jsx_runtime332 = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
     "div",
     {
@@ -28404,17 +28315,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index3) => {
     const status = index3 < current ? "completed" : index3 === current ? "active" : "pending";
     return /* @__PURE__ */ (0, import_jsx_runtime333.jsxs)("div", { className: clsx_default("step-item", status), children: [
@@ -28442,10 +28346,7 @@ var Switch = (props) => {
     size: size4 = "md",
     disabled,
     onChange,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
   const [isAnimating, setIsAnimating] = import_react29.default.useState(false);
@@ -28465,11 +28366,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
     "div",
     {
@@ -28711,10 +28608,7 @@ var TableRow = (props) => {
   const {
     children,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     type = "secondary",
     isHover,
     onClick
@@ -28727,11 +28621,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
     "tr",
     {
@@ -28758,17 +28648,10 @@ var Tag = (props) => {
     children,
     onClose,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "neutral",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-neutral-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)("span", { className: clsx_default("lib-xplat-tag", size4, colorClass, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: "tag-label", children }),
     onClose && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(XIcon_default, {}) })
@@ -28931,19 +28814,12 @@ var import_jsx_runtime345 = require("react/jsx-runtime");
 var Tooltip2 = (props) => {
   const {
     type = "primary",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-neutral-900",
     description,
     children
   } = props;
   const iconRef = import_react39.default.useRef(null);
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)("div", { className: "lib-xplat-tooltip", children: [
     /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
     /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })