bromcom-ui 2.12.1-test.1 → 3.0.0-preview.0

package/dist/collection/components/{atoms/chip/chip-group.css → molecules/radio/radio.css}

@@ -122,6 +122,13 @@
   margin-right: 8px;
 }
 
-.bcm-chip-group .bcm-chip {
-  cursor: pointer;
+:root {
+  --bcm-radio-text: var(--bcm-ui-color-text-default);
+  --bcm-radio-border: var(--bcm-ui-color-border-default);
+  --bcm-radio-border-hover: var(--bcm-ui-color-border-primary-info);
+  --bcm-radio-bg: var(--bcm-ui-color-background-default-default);
+  --bcm-radio-checked-border: var(--bcm-ui-color-background-primary-info-default);
+  --bcm-radio-checked-dot: var(--bcm-ui-color-background-primary-info-default);
+  --bcm-radio-checked-border-hover: var(--bcm-ui-color-background-primary-info-hover);
+  --bcm-radio-checked-dot-hover: var(--bcm-ui-color-background-primary-info-hover);
 }

package/dist/collection/components/molecules/radio/radio.js

@@ -5,7 +5,7 @@
 import { h, Host } from "@stencil/core";
 import { Bcm } from "@bcm/model";
 import { Generate } from "@bcm/helpers";
-import cs from 'classnames';
+import { radioStyle } from './radio.style';
 export class BcmRadio {
   constructor() {
     this._id = Generate.UID();
@@ -17,29 +17,28 @@ export class BcmRadio {
   }
   render() {
     const { value, size, disabled, checked, _id, color } = this;
-    return (h(Host, { class: cs("tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1", {
-        "tw-cursor-pointer tw-text-slate-600": !disabled,
-        "tw-cursor-not-allowed tw-text-slate-400": disabled,
-        "tw-text-1": size === Bcm.Size.small,
-        "tw-text-2.5": size === Bcm.Size.medium,
-        "tw-text-4": size === Bcm.Size.large,
-      }), style: (Generate.getTwColor(color)) }, h("label", { class: cs("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: cs("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-border-solid tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
-        "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
-        "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
-        "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,
-      }, "focus:tw-outline-none focus:tw-shadow-outline", 
-      // default
-      `tw-border-slate-400 tw-bg-slate-50`, `checked:tw-border-default-500`, `checked:before:tw-bg-default-500`, 
-      // disabled
-      `disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed`, `disabled:checked:tw-border-slate-400`, `disabled:checked:before:tw-bg-slate-400`, !disabled && cs(
-      // hover
-      `hover:tw-border-default-600`, `hover:checked:tw-border-default-600`, `hover:checked:before:tw-bg-default-600`, 
-      // focus-visible 
-      `focus-visible:tw-border-default-800 focus-visible:tw-shadow-sm`, `focus-visible:checked:tw-border-default-800`, `focus-visible:checked:before:tw-bg-default-800`, 
-      // active
-      `active:tw-border-default-700`, `active:checked:tw-border-default-700`, `active:checked:before:tw-bg-default-700`)), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h("slot", null))));
+    const style = Object.assign({}, color && Generate.getTwColor({
+      color: color,
+      tones: {
+        700: ["border-hover", "checked-dot", "checked-border"],
+        800: ["checked-border-hover", "checked-dot-hover"],
+      },
+      variable: "--bcm-radio",
+    }));
+    const { host, label, input } = radioStyle({ size, disabled });
+    return (h(Host, { class: host(), style: style }, h("label", { class: label(), htmlFor: _id + '-input' }, h("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: input(), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h("slot", null))));
   }
   static get is() { return "bcm-radio"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["radio.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["radio.css"]
+    };
+  }
   static get properties() {
     return {
       "_id": {

package/dist/collection/components/molecules/radio/radio.style.js

@@ -0,0 +1,67 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const radioStyle = tv({
+  slots: {
+    host: [
+      "bcm-radio",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-cursor-pointer tw-font-sans tw-mb-1.5 tw-mt-1",
+    ],
+    label: ["tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center"],
+    input: [
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-appearance-none tw-border tw-border-solid tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out",
+      "tw-m-0",
+      "before:tw-content-[''] before:tw-absolute before:tw-rounded-full",
+      "focus:tw-outline-none focus:tw-shadow-outline",
+      // default
+      "tw-border-[--bcm-radio-border] tw-bg-[--bcm-radio-bg]",
+      "checked:tw-border-[--bcm-radio-checked-border]",
+      "checked:before:tw-bg-[--bcm-radio-checked-dot]",
+    ],
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-text-size-4",
+        input: "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2"
+      },
+      medium: {
+        host: "tw-text-size-5",
+        input: "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5"
+      },
+      large: {
+        host: "tw-text-size-6",
+        input: "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3"
+      },
+    },
+    disabled: {
+      true: {
+        host: "tw-cursor-not-allowed tw-text-color-disabled",
+        label: "tw-cursor-not-allowed ",
+        input: [
+          "disabled:tw-border-slate-400 disabled:tw-bg-slate-200 disabled:tw-cursor-not-allowed",
+          "disabled:checked:tw-border-slate-400",
+          "disabled:checked:before:tw-bg-slate-400",
+        ]
+      },
+      false: {
+        host: "tw-cursor-pointer tw-text-[--bcm-radio-text]",
+        label: "tw-cursor-pointer",
+        input: [
+          // hover
+          "hover:tw-border-[--bcm-radio-border-hover]",
+          "hover:checked:tw-border-[--bcm-radio-checked-border-hover]",
+          "hover:checked:before:tw-bg-[--bcm-radio-checked-dot-hover]",
+        ]
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    disabled: false,
+  },
+});

package/dist/collection/components/molecules/result/result-footer.js

@@ -0,0 +1,41 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Host, h } from "@stencil/core";
+import { resultStyle } from "./result.style";
+export class BcmResultFooter {
+  constructor() {
+    this._id = Generate.UID();
+    this.el.slot = "footer";
+  }
+  render() {
+    const { footer } = resultStyle();
+    return (h(Host, { class: footer() }, h("slot", null)));
+  }
+  static get is() { return "bcm-result-footer"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/result/result.js

@@ -3,64 +3,37 @@
  * Copyright (c) Bromcom.
  */
 import { h, Host } from '@stencil/core';
-import cs from 'classnames';
-import { statuses } from './types';
+import { Bcm } from '@bcm/model';
+import { resultStyle } from './result.style';
 export class BcmResult {
   constructor() {
-    this.status = null;
+    this.icon = undefined;
     this.heading = undefined;
     this.description = undefined;
-    this.hidden = false;
-    this.footerArea = undefined;
-    this.footerHtml = undefined;
-  }
-  getIcon() {
-    if (this.status != null) {
-      const icon = statuses[this.status].icon;
-      return (h("div", { class: "icon" }, h("bcm-icon", { icon: icon })));
-    }
-  }
-  componentDidRender() {
-    const slot = this.el.shadowRoot.querySelector('slot').assignedElements();
-    slot.map(el => {
-      if (String(el.tagName).toLowerCase() === 'bcm-result-footer') {
-        el.slot = 'footer';
-        this.footerArea = true;
-        this.footerHtml = el.innerHTML;
-        el.innerHTML = "";
-      }
-    });
+    this.status = Bcm.Status.default;
   }
   render() {
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: "result" }, this.getIcon(), h("div", { class: "content" }, h("span", { class: "heading size-5 weight-semibold" }, this.heading), h("span", { class: "desc size-2" }, this.description), h("div", { class: "extra" }, h("slot", null)), (this.footerArea && (h("div", { class: "buttons", innerHTML: this.footerHtml })))))));
+    const { icon, heading, description, status } = this;
+    const { host, iconStyle, headingStyle, descriptionStyle } = resultStyle({ status });
+    const statusIcon = {
+      default: icon || "",
+      info: "fa-regular fa-circle-info",
+      success: "fa-regular fa-circle-check",
+      warning: "fa-regular fa-triangle-exclamation",
+      error: "fa-regular fa-xmark-circle",
+    }[status];
+    return (h(Host, { class: host() }, h("div", { class: iconStyle() }, statusIcon && h("i", { class: statusIcon })), h("div", { class: headingStyle() }, heading), h("div", { class: descriptionStyle() }, description), h("slot", null), h("slot", { name: "footer" })));
   }
   static get is() { return "bcm-result"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["result.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["result.css"]
-    };
-  }
   static get properties() {
     return {
-      "status": {
+      "icon": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "statusType",
-          "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
-          "references": {
-            "statusType": {
-              "location": "import",
-              "path": "./types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -68,13 +41,12 @@ export class BcmResult {
           "tags": [],
           "text": ""
         },
-        "attribute": "status",
-        "reflect": false,
-        "defaultValue": "null"
+        "attribute": "icon",
+        "reflect": false
       },
       "heading": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -91,7 +63,7 @@ export class BcmResult {
       },
       "description": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -106,13 +78,18 @@ export class BcmResult {
         "attribute": "description",
         "reflect": false
       },
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
+      "status": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "Bcm.Status",
+          "resolved": "Status.default | Status.error | Status.info | Status.success | Status.warning",
+          "references": {
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -120,17 +97,11 @@ export class BcmResult {
           "tags": [],
           "text": ""
         },
-        "attribute": "hidden",
+        "attribute": "status",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "Bcm.Status.default"
       }
     };
   }
-  static get states() {
-    return {
-      "footerArea": {},
-      "footerHtml": {}
-    };
-  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/molecules/result/result.style.js

@@ -0,0 +1,51 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const resultStyle = tv({
+  slots: {
+    host: [
+      "bcm-result bcm-ui-element bcm-ui-feedback",
+      "tw-flex tw-flex-col tw-items-center tw-justify-center ",
+      "tw-rounded-cards",
+      "tw-py-8 tw-px-6 tw-w-full",
+      "tw-text-size-5 tw-text-color-default tw-font-medium tw-text-center tw-text-balanced"
+    ],
+    iconStyle: "tw-text-size-11 tw-mb-6 empty:tw-hidden",
+    headingStyle: "tw-text-size-7 tw-font-semibold tw-text-color-header tw-mb-2 empty:tw-hidden",
+    descriptionStyle: "empty:tw-hidden",
+    footer: [
+      "tw-flex tw-justify-center tw-items-center empty:tw-hidden",
+      "tw-gap-2",
+      "tw-mt-8",
+    ],
+  },
+  variants: {
+    status: {
+      default: {
+        host: "",
+        iconStyle: "tw-text-color-primary",
+      },
+      success: {
+        host: "",
+        iconStyle: "tw-text-color-success",
+      },
+      warning: {
+        host: "",
+        iconStyle: "tw-text-color-warning",
+      },
+      error: {
+        host: "",
+        iconStyle: "tw-text-color-error",
+      },
+      info: {
+        host: "",
+        iconStyle: "tw-text-color-primary",
+      },
+    },
+  },
+  defaultVariants: {
+    status: "default",
+  },
+});

package/dist/collection/components/molecules/search/search.js

@@ -5,7 +5,7 @@
 import { h, Host } from '@stencil/core';
 import { Generate } from '../../../helper/generate';
 import Bcm from '../../../models/bcm';
-import { InputTemplate } from '../../../templates/input-template';
+import { inputStyle } from "../input/input.style";
 import { delay } from '../../../utils/utils';
 import searchState from '../states/search.states';
 export class BcmSearch {
@@ -82,20 +82,17 @@ export class BcmSearch {
     bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
   }
   render() {
-    const { _id, placeholder, disabled, readonly } = this;
-    return h(Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, h(InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
+    const { _id, placeholder, disabled, readonly, size } = this;
+    const { host, inputContainer, input, slotClass, clearButton } = inputStyle({
+      size,
+      fullWidth: true,
+      clearable: this.isActiveClearable,
+      disabled,
+      readonly,
+    });
+    return h(Host, { class: host(), onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, h("div", { class: inputContainer(), id: _id + "-container" }, h("input", { class: input(), id: _id + "-input", type: "search", placeholder: placeholder, disabled: disabled, readonly: readonly, onInput: this.debounceHandler, onChange: _event => this.handleChange(), onFocus: _event => this.handleFocus(), onBlur: _event => this.handleBlur(), autocomplete: "off", ref: el => (this.inputElement = el) }), h("div", { class: slotClass() }, this.isActiveClearable && (h("button", { type: "button", class: clearButton(), onClick: () => this.handleClear() }, h("i", { class: "far fa-times" }))))));
   }
   static get is() { return "bcm-search"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["search.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["search.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {

package/dist/collection/components/molecules/stepper/stepper.css

@@ -130,9 +130,8 @@
 .bcm-stepper {
   display: block;
   font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
 }
 .bcm-stepper__header {
   display: flex;
@@ -151,6 +150,7 @@
   justify-content: center;
   position: relative;
   min-width: 150px;
+  text-align: center;
 }
 .bcm-stepper__header-item--container {
   display: flex;
@@ -170,7 +170,7 @@
   align-items: center;
   border-radius: 50%;
   background-color: var(--bcm-new-ds-color-blue-600);
-  color: var(--bcm-new-ds-color-slate-700);
+  color: var(--bcm-ui-color-text-disabled);
   line-height: 1;
   margin-bottom: 16px;
   user-select: none;
@@ -188,29 +188,35 @@
   left: -6px;
 }
 .bcm-stepper__header-item-title {
-  color: var(--bcm-new-ds-color-slate-700);
+  color: var(--bcm-ui-color-text-default);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
+  font-weight: 600;
 }
 .bcm-stepper__header-item-description {
-  color: var(--bcm-new-ds-color-slate-600);
+  color: var(--bcm-ui-color-text-caption);
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
+  font-weight: 400;
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-title {
-  color: var(--bcm-new-ds-color-slate-500);
+  color: var(--bcm-ui-color-text-disabled);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-description {
-  color: var(--bcm-new-ds-color-slate-500);
+  color: var(--bcm-ui-color-text-disabled);
 }
 .bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-7);
+  background-color: var(--bcm-ui-color-background-primary-info-hover);
 }
 .bcm-stepper__header-item::before, .bcm-stepper__header-item::after {
   content: "";
   position: absolute;
   width: calc(50% - 24px);
   height: 2px;
-  background-color: var(--bcm-new-ds-color-blue-600);
+  background-color: var(--bcm-ui-color-background-primary-info-default);
   top: 16px;
   box-sizing: content-box;
 }
@@ -230,7 +236,7 @@
 }
 .bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before {
   content: "";
-  border: 2px solid var(--bcm-new-ds-color-blue-600);
+  border: 2px solid var(--bcm-ui-color-background-primary-info-default);
 }
 .bcm-stepper__header-item--active .bcm-stepper__header-item-title {
   font-weight: 500;
@@ -258,7 +264,7 @@
   border-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
-  color: white;
+  color: var(--bcm-ui-color-text-base);
 }
 .bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
@@ -267,28 +273,28 @@
   background-color: var(--bcm-new-ds-color-amber-700);
 }
 .bcm-stepper__header-line--success {
-  background-color: var(--bcm-new-ds-color-emerald-600);
+  background-color: var(--bcm-ui-color-background-success-default);
 }
 .bcm-stepper__header-line--success + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-new-ds-color-emerald-600);
+  background-color: var(--bcm-ui-color-background-success-default);
 }
 .bcm-stepper__header-item--success::after {
-  background-color: var(--bcm-new-ds-color-emerald-600);
+  background-color: var(--bcm-ui-color-background-success-default);
 }
 .bcm-stepper__header-item--success .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-new-ds-color-emerald-600);
+  background-color: var(--bcm-ui-color-background-success-default);
 }
 .bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-new-ds-color-emerald-600);
+  border-color: var(--bcm-ui-color-background-success-default);
 }
 .bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
-  color: white;
+  color: var(--bcm-ui-color-text-base);
 }
 .bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-new-ds-color-emerald-700);
+  background-color: var(--bcm-ui-color-background-success-hover);
 }
 .bcm-stepper__header-line--error {
   background-color: var(--bcm-new-ds-color-slate-300);
@@ -306,7 +312,7 @@
   border-color: var(--bcm-new-ds-color-red-600);
 }
 .bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
-  color: white;
+  color: var(--bcm-ui-color-text-base);
 }
 .bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
@@ -315,28 +321,28 @@
   background-color: var(--bcm-new-ds-color-red-700);
 }
 .bcm-stepper__header-line--default {
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-primary-info-default);
 }
 .bcm-stepper__header-line--default + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-primary-info-default);
 }
 .bcm-stepper__header-item--default::after {
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-primary-info-default);
 }
 .bcm-stepper__header-item--default .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-new-ds-color-blue-600);
+  background-color: var(--bcm-ui-color-background-primary-info-default);
 }
 .bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-new-ds-color-blue-600);
+  border-color: var(--bcm-ui-color-background-primary-info-default);
 }
 .bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
-  color: white;
+  color: var(--bcm-ui-color-text-base);
 }
 .bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-new-ds-color-blue-700);
+  background-color: var(--bcm-ui-color-background-primary-info-hover);
 }
 .bcm-stepper__header-line--loading {
   background-color: var(--bcm-new-ds-color-blue-600);
@@ -354,7 +360,7 @@
   border-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
-  color: white;
+  color: var(--bcm-ui-color-text-base);
 }
 .bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
@@ -363,28 +369,28 @@
   background-color: var(--bcm-new-ds-color-blue-700);
 }
 .bcm-stepper__header-line--disabled {
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-disabled-disable);
 }
 .bcm-stepper__header-line--disabled + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-disabled-disable);
 }
 .bcm-stepper__header-item--disabled::after {
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-disabled-disable);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-disabled-disable);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-new-ds-color-slate-300);
+  border-color: var(--bcm-ui-color-background-disabled-disable);
 }
 .bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
-  color: white;
+  color: var(--bcm-ui-color-text-base);
 }
 .bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-new-ds-color-slate-400);
+  background-color: var(--bcm-ui-color-background-disabled-disable);
 }
 .bcm-stepper__header-item--disabled {
   cursor: not-allowed;