bromcom-ui 2.12.3 → 3.0.0-alpha.0

package/dist/collection/components/organism/list/list.css

@@ -199,14 +199,14 @@
 .bcm-checkbox {
   outline: none;
   border: none;
-  --bcm-checkbox-primary-color-default: var(--bcm-new-ds-color-blue-500);
-  --bcm-checkbox-secondary-color-default: var(--bcm-new-ds-color-white);
-  --bcm-checkbox-primary-color-hover: var(--bcm-new-ds-color-blue-600);
-  --bcm-checkbox-secondary-color-hover: var(--bcm-new-ds-color-slate-50);
-  --bcm-checkbox-primary-color-focus-visible: var(--bcm-new-ds-color-blue-800);
-  --bcm-checkbox-secondary-color-focus-visible: var(--bcm-new-ds-color-slate-50);
-  --bcm-checkbox-primary-color-active: var(--bcm-new-ds-color-blue-700);
-  --bcm-checkbox-secondary-color-active: var(--bcm-new-ds-color-slate-50);
+  --bcm-checkbox-primary-color-default: var(--bcm-ui-color-background-primary-default);
+  --bcm-checkbox-secondary-color-default: var(--bcm-ui-color-background-base-default);
+  --bcm-checkbox-primary-color-hover: var(--bcm-ui-color-background-primary-hover);
+  --bcm-checkbox-secondary-color-hover: var(--bcm-ui-color-background-default-default);
+  --bcm-checkbox-primary-color-focus-visible: var(--bcm-ui-color-background-primary-active);
+  --bcm-checkbox-secondary-color-focus-visible: var(--bcm-ui-color-background-default-active);
+  --bcm-checkbox-primary-color-active: var(--bcm-ui-color-background-primary-active);
+  --bcm-checkbox-secondary-color-active: var(--bcm-ui-color-background-default-active);
   --bcm-checkbox-primary-color-disabled: var(--bcm-new-ds-color-slate-300);
   --bcm-checkbox-secondary-color-disabled: var(--bcm-new-ds-color-slate-200);
   display: inline-flex;
@@ -252,15 +252,15 @@
   line-height: calc(14px + 8px);
   font-weight: 400;
   font-weight: 500;
-  color: var(--bcm-new-ds-color-slate-600);
+  color: var(--bcm-ui-color-text-default);
 }
 .bcm-checkbox .slot:not(:empty) {
   margin-left: 8px;
   margin-right: 8px;
 }
 .bcm-checkbox-size-small .slot {
-  font-size: 12px;
-  line-height: calc(12px + 8px);
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
   margin-top: -2.5px;
 }
 .bcm-checkbox-size-small .bcm-checkbox__input {
@@ -273,8 +273,8 @@
   font-size: calc(10px - 2px);
 }
 .bcm-checkbox-size-medium .slot {
-  font-size: calc(12px + 1px);
-  line-height: calc(12px + 8px);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-4);
   margin-top: -1.5px;
 }
 .bcm-checkbox-size-medium .bcm-checkbox__input {
@@ -287,8 +287,8 @@
   font-size: 10px;
 }
 .bcm-checkbox-size-large .slot {
-  font-size: 16px;
-  line-height: calc(16px + 8px);
+  font-size: var(--bcm-ui-font-size-6);
+  line-height: var(--bcm-ui-line-height-6);
   margin-top: -1.5px;
 }
 .bcm-checkbox-size-large .bcm-checkbox__input {
@@ -470,8 +470,8 @@
 }
 .bcm-list__size-small .bcm-list__input {
   height: 24px;
-  font-size: 12px;
-  line-height: calc(12px + 8px);
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
 }
 .bcm-list__size-small .bcm-list__input .bcm-tag__content.dismissable {
   font-size: 10px;
@@ -479,8 +479,8 @@
 }
 .bcm-list__size-medium .bcm-list__input {
   height: 32px;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
 .bcm-list__size-medium .bcm-list__input .bcm-tag__content.dismissable {
   font-size: 12px;
@@ -488,8 +488,8 @@
 }
 .bcm-list__size-large .bcm-list__input {
   height: 40px;
-  font-size: 16px;
-  line-height: calc(16px + 8px);
+  font-size: var(--bcm-ui-font-size-6);
+  line-height: var(--bcm-ui-line-height-6);
 }
 .bcm-list__size-large .bcm-list__input .bcm-tag__content.dismissable {
   font-size: 14px;
@@ -521,9 +521,9 @@
   --height: 256px;
   width: var(--width);
   height: var(--height);
-  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;
   padding-top: 8px;
   display: flex;
@@ -591,10 +591,10 @@
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
-  border: 1px solid var(--bcm-new-ds-color-slate-300);
-  border-radius: 4px;
-  color: var(--bcm-new-ds-color-slate-600);
-  background-color: var(--bcm-new-ds-color-white);
+  color: var(--bcm-ui-color-text-default);
+  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);
   user-select: none;
   cursor: pointer;
   padding: 0 8px;
@@ -637,7 +637,7 @@
   text-overflow: ellipsis;
 }
 .bcm-list__input-placeholder {
-  color: #6B7280;
+  color: var(--bcm-ui-color-text-placeholder);
 }
 .bcm-list__input-tag-container {
   height: 100%;
@@ -662,7 +662,7 @@
   box-sizing: border-box;
   padding: 0 4px 0 4px;
   font-size: 16px;
-  color: var(--bcm-new-ds-color-slate-500);
+  color: var(--bcm-ui-color-text-default);
 }
 .bcm-list__input-buttons-button.caret-is {
   transform: rotate(360deg);
@@ -729,8 +729,8 @@
   border-color: var(--bcm-color-red-6);
 }
 .bcm-list.disabled .bcm-list__container, .bcm-list.disabled .bcm-list__input {
-  color: var(--bcm-new-ds-color-slate-300);
-  background-color: var(--bcm-new-ds-color-slate-50);
+  color: var(--bcm-ui-color-text-disabled);
+  background-color: var(--bcm-ui-color-background-disabled-default);
   cursor: not-allowed;
 }
 .bcm-list.disabled .bcm-tag__content.dismissable .close-button {
@@ -743,18 +743,18 @@
   color: var(--bcm-new-ds-color-slate-200);
 }
 .bcm-list:not(.disabled) .bcm-list__input:hover {
-  border-color: var(--bcm-new-ds-color-blue-500);
+  border-color: var(--bcm-ui-color-border-primary);
 }
 .bcm-list:not(.disabled) .bcm-list__input:hover .bcm-tag__content.dismissable:not(.checked) {
   background-color: var(--bcm-new-ds-color-slate-200);
   border-color: var(--bcm-new-ds-color-slate-200);
 }
 .bcm-list:not(.disabled) .bcm-list__input:focus-visible {
-  border-color: var(--bcm-new-ds-color-blue-500);
+  border-color: var(--bcm-ui-color-border-primary);
   box-shadow: 0 1px 3px 0 rgba(17, 24, 38, 0.1);
 }
 .bcm-list:not(.disabled) .bcm-list__input:active {
-  border-color: var(--bcm-new-ds-color-blue-500);
+  border-color: var(--bcm-ui-color-border-primary);
 }
 .bcm-list__item {
   padding: 2px 0;
@@ -781,12 +781,12 @@
   border-radius: 4px;
   padding: 0;
   padding-left: 4px;
-  color: var(--bcm-new-ds-color-slate-700);
+  color: var(--bcm-ui-color-text-default);
   transition: background-color 0.2s ease;
 }
 .bcm-list__item-content.disabled {
-  color: var(--bcm-new-ds-color-slate-400);
-  background-color: var(--bcm-new-ds-color-slate-200);
+  color: var(--bcm-ui-color-text-disabled);
+  background-color: var(--bcm-ui-color-background-disabled-default);
   user-select: none;
   cursor: not-allowed;
 }
@@ -800,19 +800,19 @@
   cursor: pointer;
 }
 .bcm-list__item-content.selected {
-  color: var(--bcm-new-ds-color-white);
-  background-color: var(--bcm-new-ds-color-blue-500);
+  color: var(--bcm-ui-color-text-primary);
+  background-color: var(--bcm-ui-color-background-stated-primary-default);
 }
 .bcm-list__item-content.selected:hover:not(.disabled):not(.readonly) {
-  color: var(--bcm-new-ds-color-white);
-  background-color: var(--bcm-new-ds-color-blue-600);
+  color: var(--bcm-ui-color-text-primary);
+  background-color: var(--bcm-ui-color-background-stated-primary-hover);
 }
 .bcm-list__item-content:hover:not(.disabled):not(.readonly) {
-  background-color: var(--bcm-new-ds-color-slate-100);
+  background-color: var(--bcm-ui-color-background-base-hover);
 }
 .bcm-list__item-content:active:not(.disabled):not(.readonly) {
   color: var(--bcm-new-ds-color-slate-600);
-  background-color: var(--bcm-new-ds-color-slate-200);
+  background-color: var(--bcm-ui-color-background-base-active);
 }
 .bcm-list__item-content-collapse-icon {
   width: 16px;

package/dist/collection/components/other/shortcut/shortcut.js

@@ -37,10 +37,10 @@ export class BcmShortcut {
   }
   render() {
     const { size, color, hotkey } = this;
-    return (h(Host, { class: cs("bcm-ui-element bcm-ui-content-display", "tw-block tw-h-fit tw-w-fit tw-rounded tw-border tw-border-solid tw-px-1", "tw-border-default-300 tw-bg-default-100 tw-text-default-700", "tw-text-center tw-font-medium tw-capitalize", {
-        "tw-text-2": size === Bcm.Size.small,
-        "tw-text-3": size === Bcm.Size.medium,
-        "tw-text-4": size === Bcm.Size.large,
+    return (h(Host, { class: cs("bcm-ui-element bcm-ui-content-display", "tw-block tw-h-fit tw-w-fit tw-rounded tw-border tw-border-solid tw-px-1", "tw-border-color-default tw-bg-color-default tw-text-color-default", "tw-text-center tw-font-medium tw-capitalize", {
+        "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: Object.assign({}, Generate.getTwColor({ color })) }, this.getHotkey(hotkey)));
   }
   static get is() { return "bcm-shortcut"; }

package/dist/collection/components/other/toast/toast.js

@@ -40,15 +40,15 @@ export class BcmToast {
     return this.el;
   }
   async hide() {
-    this.visibleContainer = false;
-    clearTimeout(this.timer);
-    this.bcmToastClose.emit();
-    await delay(100);
-    this.visible = false;
-    if (this.removeAfterClose) {
-      await delay(100);
-      this.el.remove();
-    }
+    // this.visibleContainer = false;
+    // clearTimeout(this.timer);
+    // this.bcmToastClose.emit();
+    // await delay(100);
+    // this.visible = false;
+    // if (this.removeAfterClose) {
+    //     await delay(100);
+    //     this.el.remove();
+    // }
   }
   handleMouseEnter() {
     clearTimeout(this.timer);
@@ -78,7 +78,7 @@ export class BcmToast {
     return container;
   }
   render() {
-    return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: cs("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
+    return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: cs("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-color-default tw-bg-white tw-text-color-default", {
         "tw-p-4": !this.description,
         "tw-p-6": this.description,
       }, "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
@@ -87,10 +87,10 @@ export class BcmToast {
         "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
         "tw-translate-y-[100%]": !this.visibleContainer && this.position.split("-")[0] === "bottom",
       }) }, h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (h("i", { class: cs("tw-text-6", this.messageIcon ? this.messageIcon : "far", {
-        "tw-text-emerald-500": this.status === "success",
-        "tw-text-red-500": this.status === "error",
-        "tw-text-amber-500": this.status === "warning",
-        "tw-text-blue-500": this.status === "info",
+        "tw-text-color-success": this.status === "success",
+        "tw-text-color-error": this.status === "error",
+        "tw-text-color-warning": this.status === "warning",
+        "tw-text-color-info": this.status === "info",
       }, {
         "fa-check-circle": !this.messageIcon && this.status === "success",
         "fa-exclamation-circle": !this.messageIcon && this.status === "error",
@@ -99,9 +99,9 @@ export class BcmToast {
       }) })), h("span", { class: cs({
         "tw-text-4": !this.description,
         "tw-text-6 tw-font-medium": this.description,
-      }) }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: cs("tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200", "tw-transition tw-duration-300 tw-ease-in-out", {
+      }) }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: cs("tw-appearance-none tw-outline-0 tw-border-none tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active", "tw-transition tw-duration-300 tw-ease-in-out", {
         "tw-font-medium": this.description,
-      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: cs("tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-3 " }, this.description), h("slot", null)))));
+      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: cs("tw-appearance-none tw-outline-0 tw-border-none tw-cursor-pointer", "tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-size-5 font-medium" }, this.description), h("slot", null)))));
   }
   static get is() { return "bcm-toast"; }
   static get properties() {

package/dist/collection/components/third-parts/colorful/colorful.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/third-parts/rc-picker/rc-picker.css

@@ -125,19 +125,19 @@
 
 :root {
   --bcm-date-border-color: var(--bcm-ui-color-border-default);
-  --bcm-date-border-hover: #4293cf;
+  --bcm-date-border-hover: var(--bcm-ui-color-border-primary);
   --bcm-date-text-color: var(--bcm-ui-color-text-default);
   --bcm-date-placeholder-color: var(--bcm-ui-color-text-placeholder);
   --bcm-date-disabled-color: var(--bcm-ui-color-text-disabled);
   --bcm-date-error-color: #e53e3e;
-  --bcm-date-primary-color: var(--bcm-ui-color-background-primary-info-default);
-  --bcm-date-primary-hover: var(--bcm-ui-color-background-primary-info-hover);
+  --bcm-date-primary-color: var(--bcm-ui-color-background-primary-default);
+  --bcm-date-primary-hover: var(--bcm-ui-color-background-primary-hover);
   --bcm-date-bg-hover: #e2e8f0;
-  --bcm-date-range-bg: var(--bcm-ui-color-background-palette-blue-default);
-  --bcm-date-range-hover-bg: var(--bcm-ui-color-background-palette-blue-hover);
+  --bcm-date-range-bg: var(--bcm-ui-color-background-stated-blue-default);
+  --bcm-date-range-hover-bg: var(--bcm-ui-color-background-stated-blue-hover);
   --bcm-date-disabled-bg: #f8fafc;
   --bcm-date-focused-bg: #f8fafc;
-  --bcm-date-border-radius: 4px;
+  --bcm-date-border-radius: var(--bcm-ui-border-radius-default);
 }
 
 .bcm-date {
@@ -167,8 +167,12 @@
 }
 .bcm-date--medium {
   height: 32px;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
+}
+.bcm-date--medium input {
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
 .bcm-date--small {
   height: 24px;
@@ -243,7 +247,7 @@
   outline: none;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 500;
+  font-weight: 400;
 }
 .bcm-date-input > input::placeholder {
   font-family: "Inter", sans-serif;

package/dist/collection/global/components/_checkbox.css

@@ -130,14 +130,14 @@
 .bcm-checkbox {
   outline: none;
   border: none;
-  --bcm-checkbox-primary-color-default: var(--bcm-new-ds-color-blue-500);
-  --bcm-checkbox-secondary-color-default: var(--bcm-new-ds-color-white);
-  --bcm-checkbox-primary-color-hover: var(--bcm-new-ds-color-blue-600);
-  --bcm-checkbox-secondary-color-hover: var(--bcm-new-ds-color-slate-50);
-  --bcm-checkbox-primary-color-focus-visible: var(--bcm-new-ds-color-blue-800);
-  --bcm-checkbox-secondary-color-focus-visible: var(--bcm-new-ds-color-slate-50);
-  --bcm-checkbox-primary-color-active: var(--bcm-new-ds-color-blue-700);
-  --bcm-checkbox-secondary-color-active: var(--bcm-new-ds-color-slate-50);
+  --bcm-checkbox-primary-color-default: var(--bcm-ui-color-background-primary-default);
+  --bcm-checkbox-secondary-color-default: var(--bcm-ui-color-background-base-default);
+  --bcm-checkbox-primary-color-hover: var(--bcm-ui-color-background-primary-hover);
+  --bcm-checkbox-secondary-color-hover: var(--bcm-ui-color-background-default-default);
+  --bcm-checkbox-primary-color-focus-visible: var(--bcm-ui-color-background-primary-active);
+  --bcm-checkbox-secondary-color-focus-visible: var(--bcm-ui-color-background-default-active);
+  --bcm-checkbox-primary-color-active: var(--bcm-ui-color-background-primary-active);
+  --bcm-checkbox-secondary-color-active: var(--bcm-ui-color-background-default-active);
   --bcm-checkbox-primary-color-disabled: var(--bcm-new-ds-color-slate-300);
   --bcm-checkbox-secondary-color-disabled: var(--bcm-new-ds-color-slate-200);
   display: inline-flex;
@@ -183,15 +183,15 @@
   line-height: calc(14px + 8px);
   font-weight: 400;
   font-weight: 500;
-  color: var(--bcm-new-ds-color-slate-600);
+  color: var(--bcm-ui-color-text-default);
 }
 .bcm-checkbox .slot:not(:empty) {
   margin-left: 8px;
   margin-right: 8px;
 }
 .bcm-checkbox-size-small .slot {
-  font-size: 12px;
-  line-height: calc(12px + 8px);
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
   margin-top: -2.5px;
 }
 .bcm-checkbox-size-small .bcm-checkbox__input {
@@ -204,8 +204,8 @@
   font-size: calc(10px - 2px);
 }
 .bcm-checkbox-size-medium .slot {
-  font-size: calc(12px + 1px);
-  line-height: calc(12px + 8px);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-4);
   margin-top: -1.5px;
 }
 .bcm-checkbox-size-medium .bcm-checkbox__input {
@@ -218,8 +218,8 @@
   font-size: 10px;
 }
 .bcm-checkbox-size-large .slot {
-  font-size: 16px;
-  line-height: calc(16px + 8px);
+  font-size: var(--bcm-ui-font-size-6);
+  line-height: var(--bcm-ui-line-height-6);
   margin-top: -1.5px;
 }
 .bcm-checkbox-size-large .bcm-checkbox__input {

package/dist/collection/helper/popover-helper.js

@@ -25,15 +25,15 @@ export class Popover {
         variable: "--bcm-popover",
       });
       const style = Object.assign(Object.assign({}, dc), (dc["--bcm-popover-bg"] && { "--bcm-popover-text": ColorHelper.reverseColor(dc["--bcm-popover-bg"]) }));
-      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2">
-            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ""}
-            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ""}
+      const inner = `<div class="tw-z-[1] tw-rounded-md tw-py-3">
+            ${this.message ? `<div class="tw-font-semibold tw-w-full tw-pb-3 tw-px-3">${StringHelper.trim(this.message)}</div>` : ""}
+            ${this.content ? `<div class="tw-font-normal tw-px-3">${StringHelper.trim(this.content)}</div>` : ""}
         </div>`;
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-popover-box`,
         "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text] tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
-            tw-shadow`,
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text] tw-text-size-4 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
+            tw-shadow-md`,
         "role": "popover",
         "aria-hidden": "true",
         "style": ColorHelper.generateStyleString(style),

package/dist/collection/helper/tooltip-helper.js

@@ -6,7 +6,7 @@ import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 export class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
+  constructor({ message, targetId, placement = "top", color = "gray-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -19,13 +19,13 @@ export class Tooltip {
     this.sizeClass = () => {
       switch (this.size) {
         case Bcm.Size.small:
-          return "tw-text-1";
+          return "tw-text-size-3";
         case Bcm.Size.medium:
-          return "tw-text-2";
+          return "tw-text-size-4";
         case Bcm.Size.large:
-          return "tw-text-3";
+          return "tw-text-size-5";
         default:
-          return "tw-text-2";
+          return "tw-text-size-4";
       }
     };
     this.init = () => {
@@ -41,7 +41,7 @@ export class Tooltip {
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-tooltip-box`,
         "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-font-medium tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-3 tw-rounded-md tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
         "role": "tooltip",
         "aria-hidden": "true",
         "style": ColorHelper.generateStyleString(style),

package/dist/collection/templates/caption-template.js

@@ -9,14 +9,14 @@ export const CaptionTemplate = ({ noCaption, captionType, caption, captionError,
 maxLength, value, }) => {
   size = size || "medium";
   return ((noCaption == false || maxLength) && (h("div", { class: cs("bcm-ui-element bcm-ui-feedback bcm-caption-area tw-mt-1 tw-min-h-[20px] tw-flex tw-flex-row tw-items-start tw-justify-between tw-font-normal", {
-      "tw-text-slate-500": !captionType || captionType == "default",
-      "tw-text-blue-600": captionType == "info",
-      "tw-text-emerald-700": captionType == "success",
-      "tw-text-amber-700": captionType == "warning",
-      "tw-text-red-600": captionType == "error",
+      "tw-text-color-caption": !captionType || captionType == "default",
+      "tw-text-color-info": captionType == "info",
+      "tw-text-color-success": captionType == "success",
+      "tw-text-color-warning": captionType == "warning",
+      "tw-text-color-error": captionType == "error",
     }, {
-      "tw-text-1": size == "small",
-      "tw-text-2": size == "medium",
-      "tw-text-3": size == "large",
-    }, captionType && captionType != "default" && `bcm-caption-area__type-${captionType}`) }, h("div", { class: "bcm-caption-area__text" }, captionType == "error" ? customErrorMessage || captionError : caption), maxLength && h("div", { class: "bcm-caption-area__text tw-text-slate-500" }, " ", `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`, " "))));
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
+    }, captionType && captionType != "default" && `bcm-caption-area__type-${captionType}`) }, h("div", { class: "bcm-caption-area__text" }, captionType == "error" ? customErrorMessage || captionError : caption), maxLength && h("div", { class: "bcm-caption-area__text tw-text-color-caption" }, " ", `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`, " "))));
 };

package/dist/collection/templates/input-template.js

@@ -51,7 +51,7 @@ ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported,
   });
   const inputClass = "bcm-input__container--" + size;
   const unitClass = cs(inputClass, "unit-prefix");
-  return (h("div", { class: containerClass, id: id + "-container" }, h("span", { hidden: true }, h("slot", null)), h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }), unitPrefix && h("span", { class: unitClass }, unitPrefix), typeColor && (h("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-slate-300", style: {
+  return (h("div", { class: containerClass, id: id + "-container" }, h("span", { hidden: true }, h("slot", null)), h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }), unitPrefix && h("span", { class: unitClass }, unitPrefix), typeColor && (h("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-color-default", style: {
       backgroundColor: value,
     } }))), h(ElementTagType, Object.assign({ tabindex: "0", id: id + "-input", "bcm-internal-id": internalId, class: "bcm-input-element " + inputClass }, (ElementTagType === Bcm.HtmlElementType.input && {
     type,

package/dist/collection/templates/label-template.js

@@ -8,9 +8,9 @@ import Bcm from "../models/bcm";
 export const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip }) => {
   size = size || "medium";
   type = type || Bcm.Status.default;
-  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-slate-600 ", {
-      "tw-text-1": size == "small",
-      "tw-text-2": size == "medium",
-      "tw-text-3": size == "large",
+  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-color-label ", {
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
     }) }, value, " ", required && "*", tooltip && (h("span", { class: "tw-ml-1" }, h("bcm-tooltip", { message: tooltip, placement: "top", trigger: "hover" }, h("bcm-icon", { icon: "fas fa-info-circle" }))))));
 };

package/dist/collection/templates/step-template.js

@@ -13,10 +13,10 @@ export const StepperHeaderTemplate = ({ _title, description, status, valid, inde
     'hidden': headerHidden,
   });
   const defaultIcons = {
-    success: 'fal fa-check',
-    warning: 'fal fa-exclamation-triangle',
-    error: 'fal fa-times',
+    success: 'far fa-check',
+    warning: 'far fa-exclamation-triangle',
+    error: 'far fa-times',
   };
   const customIcon = (icon || (statusIcon && defaultIcons[status])) && h("bcm-icon", { icon: icon ? icon : defaultIcons[status] });
-  return (h("div", { class: classes }, h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) }, h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index), h("div", { class: "bcm-stepper__header-item-title size-2" }, _title), h("div", { class: "bcm-stepper__header-item-description size-1 tw-text-center", innerHTML: description }))));
+  return (h("div", { class: classes }, h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) }, h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index), h("div", { class: "bcm-stepper__header-item-title tw-text-size-5" }, _title), h("div", { class: "bcm-stepper__header-item-description tw-text-size-4 tw-text-center", innerHTML: description }))));
 };