@x-plat/design-system 0.4.6 → 0.5.1

package/dist/components/Steps/index.css

@@ -19,8 +19,8 @@
   position: relative;
 }
 .lib-xplat-steps .step-circle {
-  width: 32px;
-  height: 32px;
+  width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -32,8 +32,7 @@
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-steps .step-circle svg {
-  width: 16px;
-  height: 16px;
+  font-size: 16px;
 }
 .lib-xplat-steps .step-line {
   flex: 1;
@@ -44,43 +43,99 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 8px;
+  margin-top: var(--spacing-space-2);
   text-align: center;
 }
 .lib-xplat-steps .step-title {
   font-size: 13px;
   font-weight: 500;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-steps .step-description {
   font-size: 12px;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   margin-top: 2px;
 }
-.lib-xplat-steps .step-item.completed .step-circle {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+.lib-xplat-steps.brand .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-steps .step-item.completed .step-line {
-  background-color: var(--ds-color);
+.lib-xplat-steps.brand .step-item.completed .step-line {
+  background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-steps .step-item.active .step-circle {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+.lib-xplat-steps.brand .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-steps .step-item.active .step-line {
-  background-color: var(--xplat-neutral-200);
+.lib-xplat-steps.brand .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-steps.success .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-steps.success .step-item.completed .step-line {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-steps.success .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-steps.success .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-steps.error .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-steps.error .step-item.completed .step-line {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-steps.error .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-steps.error .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-steps.warning .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-steps.warning .step-item.completed .step-line {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-steps.warning .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-steps.warning .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-steps.info .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-steps.info .step-item.completed .step-line {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-steps.info .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-steps.info .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-steps .step-item.pending .step-circle {
-  background-color: var(--xplat-neutral-200);
-  color: var(--xplat-neutral-500);
+  background-color: var(--semantic-surface-neutral-disabled);
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-steps .step-item.pending .step-line {
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-steps .step-item.pending .step-title {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-steps .step-item.pending .step-description {
-  color: var(--xplat-neutral-300);
+  color: var(--semantic-text-disabled);
 }

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

@@ -1,13 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 interface StepItem {
     title: string;
     description?: string;
 }
-interface StepsProps extends ColorProps {
+type StepsType = "brand" | "success" | "error" | "warning" | "info";
+interface StepsProps {
     items: StepItem[];
     current: number;
+    type?: StepsType;
 }
 declare const Steps: {
     (props: StepsProps): react_jsx_runtime.JSX.Element;

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

@@ -1,13 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 interface StepItem {
     title: string;
     description?: string;
 }
-interface StepsProps extends ColorProps {
+type StepsType = "brand" | "success" | "error" | "warning" | "info";
+interface StepsProps {
     items: StepItem[];
     current: number;
+    type?: StepsType;
 }
 declare const Steps: {
     (props: StepsProps): react_jsx_runtime.JSX.Element;

package/dist/components/Steps/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
@@ -856,10 +856,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
@@ -920,15 +920,14 @@ var Steps = (props) => {
   const {
     items,
     current,
-    color = "xplat-blue-500"
+    type = "brand"
   } = props;
-  const colorClass = color;
-  return /* @__PURE__ */ jsx295("div", { className: "lib-xplat-steps", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx295("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
     return /* @__PURE__ */ jsxs189("div", { className: clsx_default("step-item", status), children: [
       /* @__PURE__ */ jsxs189("div", { className: "step-indicator", children: [
-        /* @__PURE__ */ jsx295("div", { className: clsx_default("step-circle", colorClass), children: status === "completed" ? /* @__PURE__ */ jsx295(CheckIcon_default, {}) : /* @__PURE__ */ jsx295("span", { children: index + 1 }) }),
-        index < items.length - 1 && /* @__PURE__ */ jsx295("div", { className: clsx_default("step-line", colorClass) })
+        /* @__PURE__ */ jsx295("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ jsx295(CheckIcon_default, {}) : /* @__PURE__ */ jsx295("span", { children: index + 1 }) }),
+        index < items.length - 1 && /* @__PURE__ */ jsx295("div", { className: "step-line" })
       ] }),
       /* @__PURE__ */ jsxs189("div", { className: "step-content", children: [
         /* @__PURE__ */ jsx295("span", { className: "step-title", children: item.title }),

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/Switch/index.cjs

@@ -60,9 +60,9 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
+    type = "brand",
     disabled,
-    onChange,
-    color = "xplat-blue-500"
+    onChange
   } = props;
   const [isAnimating, setIsAnimating] = import_react.default.useState(false);
   const timeoutRef = import_react.default.useRef(null);
@@ -81,17 +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
+        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,10 +1,11 @@
 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;
     onChange?: (value: boolean) => void;
 }

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

@@ -1,10 +1,11 @@
 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;
     onChange?: (value: boolean) => void;
 }

package/dist/components/Switch/index.js

@@ -24,9 +24,9 @@ var Switch = (props) => {
   const {
     value,
     size = "md",
+    type = "brand",
     disabled,
-    onChange,
-    color = "xplat-blue-500"
+    onChange
   } = props;
   const [isAnimating, setIsAnimating] = React.useState(false);
   const timeoutRef = React.useRef(null);
@@ -45,17 +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
+        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

@@ -202,7 +202,6 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var TableRow = (props) => {
   const {
     children,
-    color = "xplat-neutral-900",
     type = "secondary",
     isHover,
     onClick
@@ -215,14 +214,12 @@ 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"
       ),