@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Swiper/index.cjs

@@ -69,8 +69,7 @@ var Swiper = (props) => {
     speed = 300,
     slideBy = 1,
     index: indexProp,
-    onChange,
-    className
+    onChange
   } = props;
   const items = maxItems ? renderItems.slice(0, maxItems) : renderItems;
   const totalSlides = items.length;
@@ -258,7 +257,7 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-swiper", className), ref: containerRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {

package/dist/components/Swiper/index.css

@@ -24,7 +24,7 @@
   overflow: hidden;
 }
 .lib-xplat-swiper__progress {
-  margin-top: 1rem;
+  margin-top: var(--spacing-space-4);
   display: flex;
   justify-content: center;
 }
@@ -33,7 +33,7 @@
   width: 100%;
   max-width: 580px;
   height: 2px;
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
   border-radius: 1px;
 }
 .lib-xplat-swiper__progress-fill {
@@ -41,7 +41,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  background-color: var(--xplat-neutral-500);
+  background-color: var(--semantic-text-muted);
   border-radius: 1px;
   transition-property: width;
   transition-timing-function: ease;
@@ -49,22 +49,22 @@
 .lib-xplat-swiper__dots {
   display: flex;
   justify-content: center;
-  gap: 6px;
-  margin-top: 1rem;
+  gap: var(--spacing-space-2);
+  margin-top: var(--spacing-space-4);
 }
 .lib-xplat-swiper__dot {
-  width: 8px;
-  height: 8px;
+  width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
   border-radius: 50%;
   border: none;
   padding: 0;
   cursor: pointer;
-  background-color: var(--xplat-neutral-300);
+  background-color: var(--semantic-border-default);
   transition: background-color 0.2s;
 }
 .lib-xplat-swiper__dot.active {
-  background-color: var(--xplat-neutral-700);
+  background-color: var(--semantic-text-subtle);
 }
 .lib-xplat-swiper__dot:hover:not(.active) {
-  background-color: var(--xplat-neutral-400);
+  background-color: var(--semantic-text-disabled);
 }

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

@@ -33,7 +33,6 @@ interface SwiperProps {
     index?: number;
     /** 슬라이드 변경 콜백 */
     onChange?: (index: number) => void;
-    className?: string;
 }
 declare const Swiper: {
     (props: SwiperProps): react_jsx_runtime.JSX.Element;

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

@@ -33,7 +33,6 @@ interface SwiperProps {
     index?: number;
     /** 슬라이드 변경 콜백 */
     onChange?: (index: number) => void;
-    className?: string;
 }
 declare const Swiper: {
     (props: SwiperProps): react_jsx_runtime.JSX.Element;

package/dist/components/Swiper/index.js

@@ -33,8 +33,7 @@ var Swiper = (props) => {
     speed = 300,
     slideBy = 1,
     index: indexProp,
-    onChange,
-    className
+    onChange
   } = props;
   const items = maxItems ? renderItems.slice(0, maxItems) : renderItems;
   const totalSlides = items.length;
@@ -222,7 +221,7 @@ var Swiper = (props) => {
     Math.floor(realIndex / slideBy),
     totalSteps - 1
   );
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-swiper", className), ref: containerRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-swiper", ref: containerRef, children: [
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/Switch/index.cjs

@@ -60,10 +60,9 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
+    type = "brand",
     disabled,
-    onChange,
-    color = "xplat-blue-500",
-    className
+    onChange
   } = props;
   const [isAnimating, setIsAnimating] = import_react.default.useState(false);
   const timeoutRef = import_react.default.useRef(null);
@@ -82,18 +81,16 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: clsx_default(
         "lib-xplat-switch",
         size,
+        type,
         value ? "checked" : void 0,
         disabled && "disabled",
-        isAnimating && "animating",
-        colorClass,
-        className
+        isAnimating && "animating"
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,

package/dist/components/Switch/index.css

@@ -1,45 +1,45 @@
 /* src/components/Switch/switch.scss */
 .lib-xplat-switch {
   position: relative;
-  border-radius: 9999px;
+  border-radius: var(--spacing-radius-full);
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
-  background-color: var(--xplat-neutral-300);
-  border-color: var(--xplat-neutral-300);
+  background-color: var(--semantic-border-default);
+  border-color: var(--semantic-border-default);
 }
 .lib-xplat-switch.sm {
-  width: 2rem;
-  height: 1.125rem;
+  width: var(--spacing-space-8);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-switch.sm > .knob {
-  width: 0.875rem;
-  height: 0.875rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-switch.sm > .knob.checked {
-  transform: translateY(-50%) translateX(0.875rem);
+  transform: translateY(-50%) translateX(14px);
 }
 .lib-xplat-switch.md {
-  width: 3rem;
-  height: 1.625rem;
+  width: var(--spacing-space-11);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-switch.md > .knob {
-  width: 1.375rem;
-  height: 1.375rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-switch.md > .knob.checked {
-  transform: translateY(-50%) translateX(1.375rem);
+  transform: translateY(-50%) translateX(22px);
 }
 .lib-xplat-switch.lg {
-  width: 3.5rem;
-  height: 1.875rem;
+  width: var(--spacing-space-11);
+  height: var(--spacing-space-8);
 }
 .lib-xplat-switch.lg > .knob {
-  width: 1.625rem;
-  height: 1.625rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-switch.lg > .knob.checked {
-  transform: translateY(-50%) translateX(1.625rem);
+  transform: translateY(-50%) translateX(26px);
 }
 .lib-xplat-switch.disabled {
   opacity: 0.5;
@@ -50,20 +50,52 @@
   pointer-events: none;
   cursor: wait;
 }
-.lib-xplat-switch.checked {
-  background-color: var(--ds-color);
-  border-color: var(--ds-color);
+.lib-xplat-switch.brand.checked {
+  background-color: var(--semantic-surface-brand-default);
+  border-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-switch.checked:hover:not(.disabled):not(.animating) {
-  background-color: color-mix(in srgb, var(--ds-color), black 15%);
-  border-color: color-mix(in srgb, var(--ds-color), black 15%);
+.lib-xplat-switch.brand.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-brand-strong);
+  border-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-switch.success.checked {
+  background-color: var(--semantic-surface-success-default);
+  border-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-switch.success.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-success-strong);
+  border-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-switch.error.checked {
+  background-color: var(--semantic-surface-error-default);
+  border-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-switch.error.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-error-strong);
+  border-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-switch.warning.checked {
+  background-color: var(--semantic-surface-warning-default);
+  border-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-switch.warning.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-warning-strong);
+  border-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-switch.info.checked {
+  background-color: var(--semantic-surface-info-default);
+  border-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-switch.info.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-info-strong);
+  border-color: var(--semantic-surface-info-strong);
 }
 .lib-xplat-switch > .knob {
   position: absolute;
   top: 50%;
   left: 0;
-  background-color: var(--xplat-white);
-  border-radius: 9999px;
+  background-color: var(--semantic-surface-neutral-default);
+  border-radius: var(--spacing-radius-full);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transform: translateY(-50%);
   transition: transform 0.25s;

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

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type SwitchSize = "sm" | "md" | "lg";
-interface SwitchProps extends ColorProps {
+type SwitchType = "brand" | "success" | "error" | "warning" | "info";
+interface SwitchProps {
     value: boolean;
     size?: SwitchSize;
+    type?: SwitchType;
     disabled?: boolean;
-    className?: string;
     onChange?: (value: boolean) => void;
 }
 declare const Switch: {

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

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type SwitchSize = "sm" | "md" | "lg";
-interface SwitchProps extends ColorProps {
+type SwitchType = "brand" | "success" | "error" | "warning" | "info";
+interface SwitchProps {
     value: boolean;
     size?: SwitchSize;
+    type?: SwitchType;
     disabled?: boolean;
-    className?: string;
     onChange?: (value: boolean) => void;
 }
 declare const Switch: {

package/dist/components/Switch/index.js

@@ -24,10 +24,9 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
+    type = "brand",
     disabled,
-    onChange,
-    color = "xplat-blue-500",
-    className
+    onChange
   } = props;
   const [isAnimating, setIsAnimating] = React.useState(false);
   const timeoutRef = React.useRef(null);
@@ -46,18 +45,16 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = color;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx_default(
         "lib-xplat-switch",
         size,
+        type,
         value ? "checked" : void 0,
         disabled && "disabled",
-        isAnimating && "animating",
-        colorClass,
-        className
+        isAnimating && "animating"
       ),
       onClick: handleClick,
       "aria-disabled": disabled || isAnimating,

package/dist/components/Tab/index.css

@@ -7,45 +7,45 @@
   align-items: center;
 }
 .lib-xplat-tab.sm {
-  height: 2rem;
+  height: var(--spacing-control-height-sm);
   font-size: 14px;
 }
 .lib-xplat-tab.md {
-  height: 2.5rem;
+  height: var(--spacing-control-height-md);
   font-size: 16px;
 }
 .lib-xplat-tab.lg {
-  height: 3rem;
+  height: var(--spacing-control-height-lg);
   font-size: 18px;
 }
 .lib-xplat-tab.type-default {
-  background-color: var(--xplat-neutral-500);
-  border-radius: 0.5rem;
+  background-color: var(--semantic-surface-neutral-strong);
+  border-radius: var(--spacing-radius-md);
 }
 .lib-xplat-tab.type-default > .tab-item {
-  padding: 0.25rem 1.5rem;
+  padding: var(--spacing-space-1) var(--spacing-space-6);
   height: 100%;
   display: flex;
   align-items: center;
   cursor: pointer;
-  border-right: 1px solid var(--xplat-neutral-400);
-  color: var(--xplat-white);
+  border-right: 1px solid var(--semantic-border-strong);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-tab.type-default > .tab-item:last-child {
   border-right: none;
 }
 .lib-xplat-tab.type-default > .tab-item.active {
-  background-color: var(--xplat-blue-500);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-tab.type-toggle {
-  border-bottom: 1px solid var(--xplat-neutral-200);
-  gap: 1.5rem;
+  border-bottom: 1px solid var(--semantic-border-default);
+  gap: var(--spacing-space-6);
 }
 .lib-xplat-tab.type-toggle > .tab-item {
   position: relative;
   display: flex;
   align-items: center;
-  padding: 0 0.75rem;
+  padding: 0 var(--spacing-space-3);
   font-size: 16px;
   font-weight: 500;
   height: 100%;
@@ -53,10 +53,10 @@
   border: none;
   cursor: pointer;
   transition: color 0.2s;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-tab.type-toggle > .tab-item.active {
-  color: var(--xplat-blue-600);
+  color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-tab.type-toggle > .tab-toggle-underline {
   position: absolute;
@@ -64,7 +64,7 @@
   right: 0;
   bottom: -1px;
   height: 2px;
-  background-color: var(--xplat-blue-600);
+  background-color: var(--semantic-surface-brand-default);
   transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
   will-change: left, width;
 }

package/dist/components/Table/index.cjs

@@ -38,22 +38,6 @@ __export(Table_exports, {
 });
 module.exports = __toCommonJS(Table_exports);
 
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/components/Table/TableContext.tsx
 var import_react = __toESM(require("react"), 1);
 var TableContext = import_react.default.createContext(null);
@@ -68,14 +52,13 @@ var TableContext_default = TableContext;
 var import_jsx_runtime = require("react/jsx-runtime");
 var Table = (props) => {
   const {
-    className,
     children,
     rowBorderUse = true,
     colBorderUse = true,
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-table-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     TableContext_default.Provider,
     {
       value: {
@@ -94,8 +77,8 @@ var Table_default = Table;
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TableBody = (props) => {
-  const { children, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { className, children });
+  const { children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children });
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;
@@ -103,6 +86,22 @@ var TableBody_default = TableBody;
 // src/components/Table/TableCell.tsx
 var import_react4 = __toESM(require("react"), 1);
 
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
 // src/components/Table/TableHeadContext.tsx
 var import_react2 = __toESM(require("react"), 1);
 var TableHeadContext = import_react2.default.createContext(
@@ -130,7 +129,6 @@ var TableCell = (props) => {
   const {
     children,
     align = "center",
-    className,
     isSticky = false,
     onClick
   } = props;
@@ -175,8 +173,7 @@ var TableCell = (props) => {
         isSticky && "table-sticky",
         isLastSticky && stickyShadow && "right-shadow",
         onClick && "clickable",
-        enableHover && "cell-hover",
-        className
+        enableHover && "cell-hover"
       ),
       style: isSticky ? { left } : void 0,
       onClick,
@@ -191,11 +188,10 @@ var TableCell_default = TableCell;
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var TableHead = ({
   children,
-  className = "",
   cellHover = false
 }) => {
   const { headerSticky } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null, className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableHeadContext_default.Provider, { value: { cellHover }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { className: clsx_default(headerSticky ? "table-sticky" : null), children }) });
 };
 TableHead.displayName = "TableHead";
 var TableHead_default = TableHead;
@@ -206,8 +202,6 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var TableRow = (props) => {
   const {
     children,
-    className,
-    color = "xplat-neutral-900",
     type = "secondary",
     isHover,
     onClick
@@ -220,17 +214,14 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "tr",
     {
       className: clsx_default(
         rowBorderUse ? "table-bottom-border" : null,
         type,
-        colorClass,
         isHover && "hover",
-        onClick && "clickable",
-        className
+        onClick && "clickable"
       ),
       onClick,
       children

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(