bromcom-ui 2.12.4-rc.0 → 3.0.0-alpha.1

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

@@ -128,44 +128,47 @@
 }
 
 .bcm-menu {
-  --bcm-menu-color-default: var(--bcm-new-ds-color-slate-700);
-  --bcm-menu-background-color-default: var(--bcm-new-ds-color-transparent);
+  --bcm-menu-color-default: var(--bcm-ui-color-text-default);
+  --bcm-menu-background-color-default: var(--bcm-ui-color-background-base-default);
   --bcm-menu-icon-color-default: var(--bcm-new-ds-color-slate-600);
-  --bcm-menu-color-hover: var(--bcm-new-ds-color-slate-800);
-  --bcm-menu-background-color-hover: var(--bcm-new-ds-color-slate-50);
+  --bcm-menu-color-hover: var(--bcm-ui-color-text-default);
+  --bcm-menu-background-color-hover: var(--bcm-ui-color-background-base-hover);
   --bcm-menu-icon-color-hover: var(--bcm-new-ds-color-slate-700);
-  --bcm-menu-color-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active: var(--bcm-color-primary-600);
-  --bcm-menu-icon-color-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-color-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-focus-visible: var(--bcm-color-primary-600);
-  --bcm-menu-icon-color-focus-visible: var(--bcm-new-ds-color-white);
+  --bcm-menu-color-active: var(--bcm-ui-color-text-primary);
+  --bcm-menu-background-color-active: var(--bcm-ui-color-background-stated-primary-default);
+  --bcm-menu-icon-color-active: var(--bcm-ui-color-text-primary);
+  --bcm-menu-color-focus-visible: var(--bcm-ui-color-text-primary);
+  --bcm-menu-background-color-focus-visible: var(--bcm-ui-color-background-stated-primary-hover);
+  --bcm-menu-icon-color-focus-visible: var(--bcm-ui-color-text-primary);
   --bcm-menu-color-disabled: var(--bcm-new-ds-color-slate-50);
   --bcm-menu-background-color-disabled: var(--bcm-new-ds-color-slate-300);
   --bcm-menu-icon-color-disabled: var(--bcm-new-ds-color-slate-50);
   --bcm-menu-color-dropdownDisabled: var(--bcm-new-ds-color-slate-400);
   --bcm-menu-background-color-dropdownDisabled: var(--bcm-new-ds-color-transparent);
   --bcm-menu-icon-color-dropdownDisabled: var(--bcm-new-ds-color-slate-400);
-  --bcm-menu-color-active-hover: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-hover: var(--bcm-color-primary-700);
-  --bcm-menu-icon-color-active-hover: var(--bcm-new-ds-color-white);
-  --bcm-menu-color-active-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-focus-visible: var(--bcm-color-primary-800);
-  --bcm-menu-icon-color-active-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-color-active-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-active: var(--bcm-color-primary-900);
-  --bcm-menu-icon-color-active-active: var(--bcm-new-ds-color-white);
+  --bcm-menu-color-active-hover: var(--bcm-ui-color-text-primary);
+  --bcm-menu-background-color-active-hover: var(--bcm-ui-color-background-stated-primary-hover);
+  --bcm-menu-icon-color-active-hover: var(--bcm-ui-color-text-primary);
+  --bcm-menu-color-active-focus-visible: var(--bcm-ui-color-text-primary);
+  --bcm-menu-background-color-active-focus-visible: var(--bcm-ui-color-background-stated-primary-active);
+  --bcm-menu-icon-color-active-focus-visible: var(--bcm-ui-color-text-primary);
+  --bcm-menu-color-active-active: var(--bcm-ui-color-text-primary);
+  --bcm-menu-background-color-active-active: var(--bcm-ui-color-background-stated-primary-active);
+  --bcm-menu-icon-color-active-active: var(--bcm-ui-color-text-primary);
   font-family: "Inter", sans-serif;
   font-size: 14px;
   line-height: calc(14px + 8px);
   font-weight: 400;
+  font-weight: 500;
   display: inline-block;
   position: relative;
   width: 210px;
   box-shadow: 0 2px 6px 1px rgba(17, 24, 38, 0.1);
   border-radius: 8px;
   background-color: var(--bcm-new-ds-color-white);
-  transition: background-color 0.1s ease-in-out, width 0.3s ease-in-out;
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 .bcm-menu__container {
   display: flex;
@@ -212,7 +215,9 @@
   gap: 8px;
   padding: 4px 8px;
   border-radius: 4px;
-  transition: background-color 0.1s ease-in-out, padding 0.3s ease-in-out;
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
   color: var(--bcm-menu-color-default);
   background-color: var(--bcm-menu-background-color-default);
 }
@@ -361,8 +366,8 @@
 }
 .bcm-menu__size-medium {
   padding: 16px;
-  font-size: 14px;
-  line-height: calc(16px + 8px);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
 .bcm-menu__size-large {
   padding: 16px;
@@ -477,6 +482,7 @@
   background-color: var(--bcm-menu-background-color-active);
 }
 .bcm-menu__dropdown {
+  padding: var(--bcm-ui-spacing-3);
   width: auto;
   max-width: 210px;
 }

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

@@ -146,7 +146,7 @@
   left: 0;
   visibility: hidden;
   overflow: auto;
-  padding: 24px;
+  padding: var(--bcm-ui-spacing-6);
   transition: opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index;
 }
 .bcm-modal__show {
@@ -166,17 +166,17 @@
   z-index: 1;
   top: 0;
   left: 0;
-  opacity: 0.6;
-  background-color: var(--bcm-new-ds-color-slate-900);
+  background-color: var(--bcm-ui-color-background-transparent-default);
 }
 .bcm-modal__container {
   display: flex;
   flex-direction: column;
   width: 100%;
   box-shadow: 0 2px 6px 1px rgba(17, 24, 38, 0.1);
-  border-radius: 8px;
-  background-color: var(--bcm-new-ds-color-white);
+  border-radius: var(--bcm-ui-border-radius-lg);
+  background-color: var(--bcm-ui-color-background-base-default);
   z-index: 2;
+  border: 1px solid var(--bcm-ui-color-border-default);
   transform: translateY(-50px);
   transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
@@ -214,7 +214,7 @@
   width: 100%;
 }
 .bcm-modal__container-main {
-  color: var(--bcm-color-grey-8);
+  color: var(--bcm-ui-color-text-default);
   padding: 0;
 }
 .bcm-modal__container-header {
@@ -223,13 +223,14 @@
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
-  padding: 12px 24px;
-  font-size: 16px;
-  line-height: calc(16px + 8px);
-  font-weight: 500;
-  color: var(--bcm-new-ds-color-slate-600);
-  background-color: var(--bcm-new-ds-color-slate-100);
-  position: relative;
+  padding: var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-5);
+  border-top-left-radius: calc(var(--bcm-ui-border-radius-lg) - 1px);
+  border-top-right-radius: calc(var(--bcm-ui-border-radius-lg) - 1px);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
+  font-weight: 600;
+  color: var(--bcm-ui-color-text-header);
+  background-color: var(--bcm-ui-color-background-default-default);
 }
 .bcm-modal__container-header span.full-width {
   width: 100%;
@@ -240,30 +241,36 @@
   align-items: center;
   justify-content: center;
   flex-wrap: nowrap;
-  padding: 8px;
   cursor: pointer;
-  color: var(--bcm-new-ds-color-slate-500);
-  transition: color 0.1s ease-in-out;
-}
-.bcm-modal__container-header-close:hover {
-  color: var(--bcm-new-ds-color-slate-600);
-}
-.bcm-modal__container-header-close:active {
-  color: var(--bcm-new-ds-color-slate-700);
-}
-.bcm-modal__container-header-close:focus-visible {
-  color: var(--bcm-new-ds-color-slate-800);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
+  color: var(--bcm-ui-color-text-default);
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  position: relative;
+  z-index: 0;
 }
-.bcm-modal__container-header:after {
-  border-radius: 8px 8px 0 0;
+.bcm-modal__container-header-close::after, .bcm-modal__container-header-close::before {
+  z-index: -1;
   content: "";
-  display: block;
-  width: 100%;
-  height: 4px;
-  background-color: var(--bcm-color-primary-500);
   position: absolute;
-  top: -4px;
-  left: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  width: var(--bcm-ui-spacing-8);
+  height: var(--bcm-ui-spacing-8);
+  background-color: var(--bcm-ui-color-background-default-hover);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+.bcm-modal__container-header-close::before {
+  z-index: -1;
+  background-color: var(--bcm-ui-color-background-default-hover);
+}
+.bcm-modal__container-header-close:hover::before {
+  opacity: 1;
 }
 .bcm-modal__container-footer-content {
   display: flex;
@@ -271,6 +278,6 @@
   align-items: flex-start;
   justify-content: flex-end;
   flex-wrap: nowrap;
-  padding: 12px 24px 24px;
-  grid-gap: 8px;
+  padding: 0 var(--bcm-ui-spacing-5) var(--bcm-ui-spacing-5);
+  grid-gap: var(--bcm-ui-spacing-2);
 }

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

@@ -127,7 +127,7 @@ export class BcmModal {
       return (this.modalSlots['footer'] && (h("footer", { class: "bcm-modal__container-footer" }, h("slot", { name: "footer" }))));
     };
     const HeaderTemplate = () => {
-      return (this.modalSlots['header'] && (h("header", { class: "bcm-modal__container-header" }, h(SlotTemplate, { name: "header", className: 'full-width' }), h("div", { class: "bcm-modal__container-header-close", onClick: () => this.hide() }, h("bcm-icon", { icon: "far fa-times" })))));
+      return (this.modalSlots['header'] && (h("header", { class: "bcm-modal__container-header" }, h(SlotTemplate, { name: "header", className: 'full-width' }), h("div", { class: "bcm-modal__container-header-close", onClick: () => this.hide() }, h("bcm-icon", { icon: "fas fa-times" })))));
     };
     const customStyle = Object.assign(Object.assign({}, (width && { width: width })), (height && { height: height }));
     return (h(Host, { class: `tw-overscroll-contain  ${bcmModalHostClasses}` }, h("div", { class: "overlay", onClick: () => this.handleBackdrop() }), h("div", { class: bcmModalContainer, style: customStyle }, h(HeaderTemplate, null), h("main", { class: mainClasses }, h("article", null, h(SlotTemplate, null))), h(FooterTemplate, null))));

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

@@ -18,26 +18,26 @@ 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,
+        "tw-cursor-pointer tw-text-gray-700": !disabled,
+        "tw-cursor-not-allowed tw-text-gray-500": disabled,
+        "tw-text-size-3": size === Bcm.Size.small,
+        "tw-text-size-4": size === Bcm.Size.medium,
+        "tw-text-size-5": 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`, 
+      `tw-border-gray-300 tw-bg-gray-100`, `checked:tw-border-default-700`, `checked:before:tw-bg-default-700`, 
       // 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(
+      `disabled:tw-border-gray-300 disabled:tw-bg-gray-300 disabled:tw-cursor-not-allowed`, `disabled:checked:tw-border-gray-400`, `disabled:checked:before:tw-bg-gray-400`, !disabled && cs(
       // hover
-      `hover:tw-border-default-600`, `hover:checked:tw-border-default-600`, `hover:checked:before:tw-bg-default-600`, 
+      `hover:tw-border-default-800`, `hover:checked:tw-border-default-800`, `hover:checked:before:tw-bg-default-800`, 
       // 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`, 
+      `focus-visible:tw-border-default-900 focus-visible:tw-shadow-sm`, `focus-visible:checked:tw-border-default-900`, `focus-visible:checked:before:tw-bg-default-900`, 
       // 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))));
+      `active:tw-border-default-800`, `active:checked:tw-border-default-800`, `active:checked:before:tw-bg-default-800`)), onChange: () => this.radioChange.emit(), onFocus: () => this.focus.emit(), onBlur: () => this.blur.emit() }), h("slot", null))));
   }
   static get is() { return "bcm-radio"; }
   static get properties() {

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

@@ -179,7 +179,7 @@
   left: 22.22%;
   right: 22.22%;
   height: 4px;
-  background-color: var(--bcm-new-ds-color-blue-500);
+  background-color: var(--bcm-ui-color-background-primary-default);
   z-index: 2;
 }
 .bcm-range__container-bar-thumb {
@@ -187,7 +187,7 @@
   top: 0;
   width: 16px;
   height: 16px;
-  background-color: var(--bcm-new-ds-color-blue-500);
+  background-color: var(--bcm-ui-color-background-primary-default);
   border-radius: 50%;
   z-index: 3;
   transition: box-shadow 0.2s ease-in-out;
@@ -231,7 +231,7 @@
   display: flex;
   justify-content: center;
   width: 1px;
-  color: var(--bcm-new-ds-color-slate-300);
+  color: var(--bcm-ui-color-text-placeholder);
   cursor: pointer;
   height: 8px;
   line-height: 32px;
@@ -244,7 +244,7 @@
   position: absolute;
   width: 1px;
   height: 8px;
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-default-hover);
   z-index: -1;
   transition: background-color 0.1s ease-in-out;
 }
@@ -254,11 +254,8 @@
 .bcm-range .tick::after {
   top: 0;
 }
-.bcm-range .tick.hover {
-  color: var(--bcm-new-ds-color-slate-400);
-}
 .bcm-range .tick.hover::before, .bcm-range .tick.hover::after {
-  background-color: var(--bcm-new-ds-color-slate-400);
+  background-color: var(--bcm-ui-color-background-default-active);
 }
 .bcm-range .touch {
   position: absolute;

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

@@ -212,9 +212,9 @@
   display: flex;
   align-items: stretch;
   flex-direction: row;
-  background-color: var(--bcm-new-ds-color-white);
-  border: 1px solid var(--bcm-new-ds-color-slate-300);
-  border-radius: 4px;
+  background-color: var(--bcm-ui-color-background-base-default);
+  border: 1px solid var(--bcm-ui-color-border-default);
+  border-radius: var(--bcm-ui-border-radius-default);
   box-sizing: border-box;
   cursor: text;
   padding: 0 0 0 4px;
@@ -222,18 +222,22 @@
   width: 100%;
 }
 .bcm-input__container.disabled {
-  background-color: var(--bcm-new-ds-color-slate-50);
+  background-color: var(--bcm-ui-color-background-disabled-default);
+  border-color: var(--bcm-ui-color-border-disabled);
   cursor: not-allowed;
 }
 .bcm-input__container.disabled .bcm-input-element {
-  color: var(--bcm-new-ds-color-slate-500);
+  color: var(--bcm-ui-color-text-disabled);
+}
+.bcm-input__container.disabled .bcm-input-element::placeholder {
+  color: var(--bcm-color-secondary-400);
 }
 .bcm-input__container.readonly {
   background-color: var(--bcm-new-ds-color-slate-50);
   cursor: default;
 }
 .bcm-input__container.readonly .bcm-input-element {
-  color: var(--bcm-new-ds-color-slate-600);
+  color: var(--bcm-ui-color-text-default);
 }
 .bcm-input__container:not(.disabled):hover .caret-container, .bcm-input__container:not(.disabled).focused .caret-container {
   opacity: 1;
@@ -243,19 +247,20 @@
 }
 .bcm-input__container:not(.disabled).focused {
   background-color: var(--bcm-new-ds-color-slate-50);
+  border-color: var(--bcm-ui-color-border-primary);
 }
 .bcm-input__container:not(.disabled):hover {
-  border-color: var(--bcm-color-prime-blue-6);
+  border-color: var(--bcm-ui-color-border-primary);
 }
 .bcm-input__container.empty .input-clear-button {
   display: none;
 }
 .bcm-input__container.invalid, .bcm-input__container.error {
-  border-color: var(--bcm-new-ds-color-red-500);
+  border-color: var(--bcm-ui-color-border-error);
 }
 .bcm-input__container .bcm-input-element {
   width: 100%;
-  color: var(--bcm-new-ds-color-slate-600);
+  color: var(--bcm-ui-color-text-default);
   flex: 1;
   border: none;
   background: transparent;
@@ -271,7 +276,7 @@
 }
 .bcm-input__container .bcm-input-element::placeholder {
   font-family: "Inter", sans-serif;
-  color: var(--bcm-new-ds-color-slate-300);
+  color: var(--bcm-ui-color-text-placeholder);
   user-select: none;
 }
 .bcm-input__container .bcm-input-element::-webkit-search-decoration, .bcm-input__container .bcm-input-element::-webkit-search-cancel-button, .bcm-input__container .bcm-input-element::-webkit-search-results-button, .bcm-input__container .bcm-input-element::-webkit-search-results-decoration, .bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator, .bcm-input__container .bcm-input-element::-webkit-inner-spin-button, .bcm-input__container .bcm-input-element::-webkit-outer-spin-button {
@@ -347,13 +352,16 @@
   opacity: 0;
 }
 .bcm-input__container--small {
-  font-size: 12px;
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
 }
 .bcm-input__container--medium {
-  font-size: 14px;
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
 .bcm-input__container--large {
-  font-size: 16px;
+  font-size: var(--bcm-ui-font-size-6);
+  line-height: var(--bcm-ui-line-height-6);
 }
 .bcm-input__textarea.clearable .bcm-input-element {
   padding-right: 24px;

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

@@ -188,16 +188,17 @@
   left: -6px;
 }
 .bcm-stepper__header-item-title {
-  color: var(--bcm-new-ds-color-gray-800);
+  font-weight: 600;
+  color: var(--bcm-ui-color-text-default);
 }
 .bcm-stepper__header-item-description {
-  color: var(--bcm-new-ds-color-gray-700);
+  color: var(--bcm-ui-color-text-caption);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-title {
-  color: var(--bcm-new-ds-color-gray-500);
+  color: var(--bcm-ui-color-text-disabled);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-description {
-  color: var(--bcm-new-ds-color-gray-500);
+  color: var(--bcm-ui-color-text-disabled);
 }
 .bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
@@ -233,7 +234,7 @@
   border: 2px solid var(--bcm-new-ds-color-blue-700);
 }
 .bcm-stepper__header-item--active .bcm-stepper__header-item-title {
-  font-weight: 500;
+  font-weight: 600;
 }
 .bcm-stepper__header-line {
   width: 100%;

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

@@ -225,21 +225,9 @@
 .bcm-switch:focus-visible {
   outline: none;
 }
-.bcm-switch:focus-visible .bcm-switch__toggle {
-  background-color: var(--bcm-new-ds-color-slate-400);
-}
-.bcm-switch:focus-visible .bcm-switch__toggle.switch-checked {
-  background-color: var(--bcm-new-ds-color-blue-600);
-}
 .bcm-switch:hover {
   outline: none;
 }
-.bcm-switch:hover .bcm-switch__toggle .handle {
-  background-color: var(--bcm-new-ds-color-slate-100);
-}
-.bcm-switch:hover .bcm-switch__toggle.switch-checked .handle {
-  background-color: var(--bcm-new-ds-color-slate-100);
-}
 .bcm-switch * {
   box-sizing: border-box;
 }
@@ -267,11 +255,11 @@
   margin: 0;
 }
 .bcm-switch__label .active-text {
-  color: var(--bcm-new-ds-color-blue-700);
+  color: var(--bcm-ui-color-text-primary);
   margin: 0 0 0 4px;
 }
 .bcm-switch__label .inactive-text {
-  color: var(--bcm-new-ds-color-slate-700);
+  color: var(--bcm-ui-color-text-default);
   margin: 0 4px 0 0;
 }
 .bcm-switch__toggle {
@@ -279,28 +267,38 @@
   justify-content: space-between;
   align-items: center;
   border-radius: 16px;
-  background-color: var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-default-dark-default);
   position: relative;
   cursor: pointer;
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 .bcm-switch__toggle .handle {
   padding: 1px;
   position: absolute;
-  background-color: var(--bcm-new-ds-color-slate-50);
+  background-color: var(--bcm-ui-color-background-base-default);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
-  transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
+  transition-property: left, width, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
   box-shadow: 0 1px 3px 0 rgba(17, 24, 38, 0.1);
 }
+.bcm-switch__toggle:hover {
+  background-color: var(--bcm-ui-color-background-default-dark-hover);
+}
 .bcm-switch__toggle .icon-active {
   opacity: 0;
   margin-left: 2px;
+  color: var(--bcm-ui-color-text-base);
 }
 .bcm-switch__toggle .icon-inactive {
   opacity: 1;
   margin-right: 2px;
+  color: var(--bcm-ui-color-text-base);
 }
 .bcm-switch__toggle.bcm-switch__size-small {
   width: 32px;
@@ -320,7 +318,7 @@
   width: 16px;
 }
 .bcm-switch__toggle.bcm-switch__size-small:active.switch-checked:not(.disabled):not(.readonly) .handle {
-  left: 12px;
+  left: 14px;
 }
 .bcm-switch__toggle.bcm-switch__size-small .switch-spinner {
   box-sizing: border-box;
@@ -350,7 +348,7 @@
   width: 18px;
 }
 .bcm-switch__toggle.bcm-switch__size-medium:active.switch-checked:not(.disabled):not(.readonly) .handle {
-  left: 14px;
+  left: 16px;
 }
 .bcm-switch__toggle.bcm-switch__size-medium .switch-spinner {
   box-sizing: border-box;
@@ -380,7 +378,7 @@
   width: 20px;
 }
 .bcm-switch__toggle.bcm-switch__size-large:active.switch-checked:not(.disabled):not(.readonly) .handle {
-  left: 16px;
+  left: 18px;
 }
 .bcm-switch__toggle.bcm-switch__size-large .switch-spinner {
   box-sizing: border-box;
@@ -393,7 +391,7 @@
   animation: switch-spinner 1.5s linear infinite;
 }
 .bcm-switch__toggle.switch-checked {
-  background-color: var(--bcm-new-ds-color-blue-500);
+  background-color: var(--bcm-ui-color-background-primary-default);
 }
 .bcm-switch__toggle.switch-checked .icon-active {
   color: var(--bcm-new-ds-color-slate-100);
@@ -405,6 +403,9 @@
 .bcm-switch__toggle.switch-checked .switch-spinner {
   border-top-color: var(--bcm-new-ds-color-blue-600);
 }
+.bcm-switch__toggle.switch-checked:hover {
+  background-color: var(--bcm-ui-color-background-primary-hover);
+}
 .bcm-switch__size-small .bcm-switch__label,
 .bcm-switch__size-small .bcm-label__text {
   font-size: 12px;

package/dist/collection/components/molecules/tab-group/tab-item-header.js

@@ -29,13 +29,13 @@ export class BcmTabItemHeader {
       color: color,
       tones: [700, 800, 900]
     });
-    return (h(Host, { role: "tab", id: `tab-${tabId}`, "aria-selected": active ? "true" : "false", "aria-controls": tabId, onClick: () => this.handleClick(), class: cs(`tw-font-medium tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-0 tw-border-solid tw-border-b-[2px] tw-border-b-gray-300  tw-transition-font tw-focus:outline-none`, {
-        "tw-text-2 tw-pt-1 tw-pb-1 tw-gap-2": size === Bcm.Size.small,
-        "tw-text-3 tw-pt-2 tw-pb-2.5 tw-gap-2.5": size === Bcm.Size.medium,
-        "tw-text-4 tw-pt-3 tw-pb-3 tw-gap-3": size === Bcm.Size.large,
+    return (h(Host, { role: "tab", id: `tab-${tabId}`, "aria-selected": active ? "true" : "false", "aria-controls": tabId, onClick: () => this.handleClick(), class: cs(`bcm-ui-element tw-font-medium tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-0 tw-border-solid tw-border-b-[2px] tw-border-b-gray-500  tw-transition-font tw-focus:outline-none`, {
+        "tw-text-size-4 tw-pt-1 tw-pb-1 tw-gap-2": size === Bcm.Size.small,
+        "tw-text-size-5 tw-pt-1 tw-pb-2.5 tw-gap-2.5": size === Bcm.Size.medium,
+        "tw-text-size-6 tw-pt-3 tw-pb-3 tw-gap-3": size === Bcm.Size.large,
       }, disabled ? disabledClass : "tw-cursor-pointer", active
-        ? `tw-text-default-700 enabled:hover:tw-text-default-800 enabled:active:tw-text-default-900 enabled:focus-visible:tw-text-default-900`
-        : "tw-text-gray-700"), style: dc }));
+        ? `tw-text-default-700`
+        : "tw-text-gray-500 hover:tw-text-default-700"), style: dc }));
   }
   static get is() { return "bcm-tab-item-header"; }
   static get properties() {