@x-plat/design-system 0.4.6 → 0.5.0

package/dist/components/Table/index.css

@@ -14,54 +14,54 @@
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.table-bottom-border,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.table-bottom-border {
-  border-bottom: 1px solid var(--xplat-neutral-200);
+  border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary {
-  background-color: var(--ds-color);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary > th {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary > th.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary > th.cell-hover:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 12%);
+  background-color: var(--semantic-surface-brand-strong);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary.hover:hover > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary.hover:hover > th {
-  color: var(--xplat-white);
-  background-color: color-mix(in srgb, var(--ds-color), black 12%);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-strong);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary {
-  background-color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th {
-  background-color: var(--xplat-white);
-  color: var(--ds-color);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th.cell-hover:hover {
-  background-color: color-mix(in srgb, var(--ds-color) 12%, white);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > th {
-  background-color: color-mix(in srgb, var(--ds-color) 12%, white);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.clickable,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.clickable {
@@ -72,7 +72,7 @@
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th {
   min-width: 80px;
-  padding: 0.5rem;
+  padding: var(--spacing-space-2);
   vertical-align: middle;
   transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
@@ -125,8 +125,8 @@
   content: "";
   position: absolute;
   top: 0;
-  right: -10px;
-  width: 10px;
+  right: calc(var(--spacing-space-2) * -1);
+  width: var(--spacing-space-2);
   height: 100%;
   background:
     linear-gradient(

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

@@ -1,6 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 interface TableProps {
     children: React.ReactNode;
@@ -39,7 +38,7 @@ declare const TableHead: {
     displayName: string;
 };
 
-interface TableRowProps extends ColorProps {
+interface TableRowProps {
     children: React.ReactNode;
     type?: "primary" | "secondary";
     isHover?: boolean;

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

@@ -1,6 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 interface TableProps {
     children: React.ReactNode;
@@ -39,7 +38,7 @@ declare const TableHead: {
     displayName: string;
 };
 
-interface TableRowProps extends ColorProps {
+interface TableRowProps {
     children: React.ReactNode;
     type?: "primary" | "secondary";
     isHover?: boolean;

package/dist/components/Table/index.js

@@ -162,7 +162,6 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 var TableRow = (props) => {
   const {
     children,
-    color = "xplat-neutral-900",
     type = "secondary",
     isHover,
     onClick
@@ -175,14 +174,12 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = color;
   return /* @__PURE__ */ jsx5(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx5(
     "tr",
     {
       className: clsx_default(
         rowBorderUse ? "table-bottom-border" : null,
         type,
-        colorClass,
         isHover && "hover",
         onClick && "clickable"
       ),

package/dist/components/Tag/index.cjs

@@ -405,10 +405,10 @@ var import_jsx_runtime126 = require("react/jsx-runtime");
 // src/tokens/svg/file/BookIcon.tsx
 var import_jsx_runtime127 = require("react/jsx-runtime");
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
 
 // src/tokens/svg/file/ClipboardIcon.tsx
@@ -876,10 +876,10 @@ var import_jsx_runtime279 = require("react/jsx-runtime");
 // src/tokens/svg/user/UserPlusIcon.tsx
 var import_jsx_runtime280 = require("react/jsx-runtime");
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 var import_jsx_runtime281 = require("react/jsx-runtime");
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx
@@ -939,15 +939,28 @@ var import_jsx_runtime295 = require("react/jsx-runtime");
 var Tag = (props) => {
   const {
     children,
+    type = "neutral",
     onClose,
     size = "md",
-    color = "xplat-neutral-500"
+    disabled = false,
+    colorIndex
   } = props;
-  const colorClass = color;
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("span", { className: clsx_default("lib-xplat-tag", size, colorClass), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "tag-label", children }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(XIcon_default, {}) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
+    "span",
+    {
+      className: clsx_default(
+        "lib-xplat-tag",
+        type,
+        size,
+        type === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
+        disabled && "disabled"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(XIcon_default, {}) })
+      ]
+    }
+  );
 };
 Tag.displayName = "Tag";
 var Tag_default = Tag;

package/dist/components/Tag/index.css

@@ -2,29 +2,73 @@
 .lib-xplat-tag {
   display: inline-flex;
   align-items: center;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
   line-height: 1.5;
   border: 1px solid;
 }
 .lib-xplat-tag.sm {
-  gap: 3px;
-  padding: 0.0625rem 0.375rem;
+  gap: var(--spacing-space-1);
+  padding: 1px var(--spacing-space-2);
   font-size: 11px;
 }
 .lib-xplat-tag.md {
-  gap: 4px;
-  padding: 0.125rem 0.5rem;
+  gap: var(--spacing-space-1);
+  padding: 2px var(--spacing-space-2);
   font-size: 12px;
 }
 .lib-xplat-tag.lg {
-  gap: 5px;
-  padding: 0.25rem 0.625rem;
+  gap: var(--spacing-space-1);
+  padding: var(--spacing-space-1) var(--spacing-space-2);
   font-size: 14px;
 }
-.lib-xplat-tag {
-  color: var(--ds-color);
-  border-color: var(--ds-color);
-  background-color: color-mix(in srgb, var(--ds-color) 8%, white);
+.lib-xplat-tag.neutral {
+  color: var(--semantic-text-muted);
+  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-tag.categorical.cat-1 {
+  color: var(--semantic-categorical-1-text);
+  background-color: var(--semantic-categorical-1-bg);
+  border-color: var(--semantic-categorical-1-area);
+}
+.lib-xplat-tag.categorical.cat-2 {
+  color: var(--semantic-categorical-2-text);
+  background-color: var(--semantic-categorical-2-bg);
+  border-color: var(--semantic-categorical-2-area);
+}
+.lib-xplat-tag.categorical.cat-3 {
+  color: var(--semantic-categorical-3-text);
+  background-color: var(--semantic-categorical-3-bg);
+  border-color: var(--semantic-categorical-3-area);
+}
+.lib-xplat-tag.categorical.cat-4 {
+  color: var(--semantic-categorical-4-text);
+  background-color: var(--semantic-categorical-4-bg);
+  border-color: var(--semantic-categorical-4-area);
+}
+.lib-xplat-tag.categorical.cat-5 {
+  color: var(--semantic-categorical-5-text);
+  background-color: var(--semantic-categorical-5-bg);
+  border-color: var(--semantic-categorical-5-area);
+}
+.lib-xplat-tag.categorical.cat-6 {
+  color: var(--semantic-categorical-6-text);
+  background-color: var(--semantic-categorical-6-bg);
+  border-color: var(--semantic-categorical-6-area);
+}
+.lib-xplat-tag.categorical.cat-7 {
+  color: var(--semantic-categorical-7-text);
+  background-color: var(--semantic-categorical-7-bg);
+  border-color: var(--semantic-categorical-7-area);
+}
+.lib-xplat-tag.categorical.cat-8 {
+  color: var(--semantic-categorical-8-text);
+  background-color: var(--semantic-categorical-8-bg);
+  border-color: var(--semantic-categorical-8-area);
+}
+.lib-xplat-tag.disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
 .lib-xplat-tag .tag-label {
   white-space: nowrap;
@@ -45,14 +89,11 @@
   opacity: 1;
 }
 .lib-xplat-tag.sm .tag-close svg {
-  width: 10px;
-  height: 10px;
+  font-size: 10px;
 }
 .lib-xplat-tag.md .tag-close svg {
-  width: 12px;
-  height: 12px;
+  font-size: 12px;
 }
 .lib-xplat-tag.lg .tag-close svg {
-  width: 14px;
-  height: 14px;
+  font-size: 14px;
 }

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

@@ -1,12 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
+type TagType = "neutral" | "categorical";
 type TagSize = "sm" | "md" | "lg";
-interface TagProps extends ColorProps {
+interface TagProps {
     children: React.ReactNode;
+    type?: TagType;
     onClose?: () => void;
     size?: TagSize;
+    disabled?: boolean;
+    colorIndex?: number;
 }
 declare const Tag: {
     (props: TagProps): react_jsx_runtime.JSX.Element;

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

@@ -1,12 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
+type TagType = "neutral" | "categorical";
 type TagSize = "sm" | "md" | "lg";
-interface TagProps extends ColorProps {
+interface TagProps {
     children: React.ReactNode;
+    type?: TagType;
     onClose?: () => void;
     size?: TagSize;
+    disabled?: boolean;
+    colorIndex?: number;
 }
 declare const Tag: {
     (props: TagProps): react_jsx_runtime.JSX.Element;

package/dist/components/Tag/index.js

@@ -379,10 +379,10 @@ import { jsx as jsx126, jsxs as jsxs72 } from "react/jsx-runtime";
 // src/tokens/svg/file/BookIcon.tsx
 import { jsx as jsx127 } from "react/jsx-runtime";
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 import { jsx as jsx128 } from "react/jsx-runtime";
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 import { jsx as jsx129 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/ClipboardIcon.tsx
@@ -850,10 +850,10 @@ import { jsx as jsx279, jsxs as jsxs177 } from "react/jsx-runtime";
 // src/tokens/svg/user/UserPlusIcon.tsx
 import { jsx as jsx280, jsxs as jsxs178 } from "react/jsx-runtime";
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 import { jsx as jsx281, jsxs as jsxs179 } from "react/jsx-runtime";
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 import { jsx as jsx282, jsxs as jsxs180 } from "react/jsx-runtime";
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx
@@ -913,15 +913,28 @@ import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
+    type = "neutral",
     onClose,
     size = "md",
-    color = "xplat-neutral-500"
+    disabled = false,
+    colorIndex
   } = props;
-  const colorClass = color;
-  return /* @__PURE__ */ jsxs189("span", { className: clsx_default("lib-xplat-tag", size, colorClass), children: [
-    /* @__PURE__ */ jsx295("span", { className: "tag-label", children }),
-    onClose && /* @__PURE__ */ jsx295("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ jsx295(XIcon_default, {}) })
-  ] });
+  return /* @__PURE__ */ jsxs189(
+    "span",
+    {
+      className: clsx_default(
+        "lib-xplat-tag",
+        type,
+        size,
+        type === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
+        disabled && "disabled"
+      ),
+      children: [
+        /* @__PURE__ */ jsx295("span", { className: "tag-label", children }),
+        onClose && /* @__PURE__ */ jsx295("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", disabled, children: /* @__PURE__ */ jsx295(XIcon_default, {}) })
+      ]
+    }
+  );
 };
 Tag.displayName = "Tag";
 var Tag_default = Tag;

package/dist/components/TextArea/index.css

@@ -2,30 +2,41 @@
 .lib-xplat-textarea-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea {
   display: flex;
   align-items: center;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 0.5rem;
-  min-height: 2.5rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
+  min-height: var(--spacing-control-height-md);
   overflow: hidden;
-  background-color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-default);
   width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
   border: none;
   outline: none;
   flex: 1;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: var(--spacing-space-4);
+  padding-right: var(--spacing-space-4);
   width: 100%;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
   resize: none;
   height: 1.5em;
 }

package/dist/components/Toast/index.css

@@ -8,41 +8,41 @@
   pointer-events: none;
 }
 .lib-xplat-toast-container.top {
-  top: 16px;
+  top: var(--spacing-space-4);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 .lib-xplat-toast-container.bottom {
-  bottom: 16px;
+  bottom: var(--spacing-space-4);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 .lib-xplat-toast-container.top-left {
-  top: 16px;
-  left: 16px;
+  top: var(--spacing-space-4);
+  left: var(--spacing-space-4);
   align-items: flex-start;
 }
 .lib-xplat-toast-container.top-right {
-  top: 16px;
-  right: 16px;
+  top: var(--spacing-space-4);
+  right: var(--spacing-space-4);
   align-items: flex-end;
 }
 .lib-xplat-toast-container.bottom-left {
-  bottom: 16px;
-  left: 16px;
+  bottom: var(--spacing-space-4);
+  left: var(--spacing-space-4);
   align-items: flex-start;
 }
 .lib-xplat-toast-container.bottom-right {
-  bottom: 16px;
-  right: 16px;
+  bottom: var(--spacing-space-4);
+  right: var(--spacing-space-4);
   align-items: flex-end;
 }
 .lib-xplat-toast-wrapper {
   overflow: hidden;
   transition: max-height 0.3s ease, margin-bottom 0.3s ease;
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing-space-2);
 }
 .lib-xplat-toast-wrapper.exit {
   margin-bottom: 0;
@@ -50,9 +50,9 @@
 .lib-xplat-toast {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+  gap: var(--spacing-space-2);
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  border-radius: var(--spacing-radius-md);
   font-size: 14px;
   line-height: 1.5;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
@@ -84,20 +84,20 @@
   opacity: 1;
 }
 .lib-xplat-toast.info {
-  background-color: var(--xplat-lightblue-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-info-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.success {
-  background-color: var(--xplat-green-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-success-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.warning {
-  background-color: var(--xplat-yellow-500);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-warning-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.error {
-  background-color: var(--xplat-red-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-error-default);
+  color: var(--semantic-text-inverse);
 }
 @keyframes lib-xplat-toast-enter {
   from {

package/dist/components/Tooltip/index.cjs

@@ -58,15 +58,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Tooltip = (props) => {
   const {
     type = "primary",
-    color = "xplat-neutral-900",
     description,
     children
   } = props;
   const iconRef = import_react.default.useRef(null);
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-tooltip", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";

package/dist/components/Tooltip/index.css

@@ -13,20 +13,20 @@
   left: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   white-space: nowrap;
-  border-radius: 0.25rem;
-  padding: 6px 10px;
+  border-radius: var(--spacing-radius-sm);
+  padding: var(--spacing-space-2) var(--spacing-space-2);
   opacity: 0;
   pointer-events: none;
   bottom: 100%;
   transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .lib-xplat-tooltip > .tooltip-wrapper.primary {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-neutral-strong);
 }
 .lib-xplat-tooltip > .tooltip-wrapper.secondary {
-  background-color: var(--xplat-white);
-  color: var(--ds-color);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-tooltip.tooltip-bottom > .tooltip-wrapper {
   top: 100%;

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

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
-interface TooltipProps extends ColorProps {
+interface TooltipProps {
     type?: "primary" | "secondary";
     description: React.ReactNode;
     children?: React.ReactNode;

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

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
-interface TooltipProps extends ColorProps {
+interface TooltipProps {
     type?: "primary" | "secondary";
     description: React.ReactNode;
     children?: React.ReactNode;

package/dist/components/Tooltip/index.js

@@ -22,15 +22,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Tooltip = (props) => {
   const {
     type = "primary",
-    color = "xplat-neutral-900",
     description,
     children
   } = props;
   const iconRef = React.useRef(null);
-  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 })
+    /* @__PURE__ */ jsx("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";