@x-plat/design-system 0.4.5 → 0.5.0

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,14 +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;
-    className?: string;
+    type?: StepsType;
 }
 declare const Steps: {
     (props: StepsProps): react_jsx_runtime.JSX.Element;

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

@@ -1,14 +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;
-    className?: string;
+    type?: StepsType;
 }
 declare const Steps: {
     (props: StepsProps): react_jsx_runtime.JSX.Element;