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

package/dist/collection/components/molecules/textarea/textarea.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/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/organism/list/list.js

@@ -102,7 +102,6 @@ export class BcmList {
     this.shouldTriggerChange = undefined;
     this.placement = Bcm.Placement["bottom-start"];
     this.disableChangeEvent = false;
-    this.autoFocusSelected = false;
     this.data = [];
     window.addEventListener("scroll", this.handleWheel.bind(this), true);
     window.addEventListener("wheel", this.handleWheel.bind(this), true);
@@ -215,7 +214,6 @@ export class BcmList {
     }
   }
   async handleOpen() {
-    const isAutoSelected = this.autoFocusSelected && this.type == "select" && !this.checkboxes && this.value;
     if (this.isOpen) {
       this.detectClone();
       if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
@@ -230,15 +228,10 @@ export class BcmList {
       this.onSelectSearch();
       await delay(50);
       this.isOpenAnimation = true;
-      if (isAutoSelected) {
-        this.focusSelectedElement();
-      }
     }
     else {
-      if (!isAutoSelected) {
-        this.listScrollToTop();
-      }
       this.isOpenAnimation = false;
+      this.listScrollToTop();
       this.close.emit();
       this.listClose.emit();
       await delay(100);
@@ -591,33 +584,22 @@ export class BcmList {
     this.markForCheck();
   }
   async initState() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     this.onClearSearch();
     await listState.setValue({
       id: this._id,
       dataSource: this.data && snq(() => (typeof this.data == "string" ? JSON.parse(this.data) : this.data), []),
       options: this,
     });
-    const { totalRoots, totalItems, dataSource } = listState.getValue(this._id);
+    const { totalRoots, totalItems } = listState.getValue(this._id);
     this.totalData = (totalItems === null || totalItems === void 0 ? void 0 : totalItems.total) || 0;
     this.totalRootData = totalRoots || 0;
     this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
-    /** @description Focus selected element * BUG 282262 */
-    if (this.autoFocusSelected && this.type == "select" && this.value && !this.checkboxes) {
-      const selectedId = Array.isArray(this.value) ? (_a = this.value[0]) === null || _a === void 0 ? void 0 : _a.id : (_b = this.value) === null || _b === void 0 ? void 0 : _b.id;
-      if (selectedId && dataSource) {
-        const selectedIndex = dataSource.findIndex(item => item.id === selectedId);
-        if (selectedIndex !== -1 && selectedIndex >= this.limit) {
-          this.limit = selectedIndex + 5;
-          this.searchResultLimit = this.limit;
-        }
-      }
-    }
     if (!this.checkboxes) {
-      this.inputText = Generate.domParser((_c = this.value) === null || _c === void 0 ? void 0 : _c.text) || null;
+      this.inputText = Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
     }
     // checkli olan subparentların indeterminate kontrolü için
-    if (this.checkboxes && ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+    if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
       const checkedIDs = [];
       this.value.forEach(item => {
         if (!item.items || item.items.length === 0) {
@@ -626,7 +608,7 @@ export class BcmList {
       });
       await this.addChecked(checkedIDs, false, false);
     }
-    await this.handleIndeterminate((_e = this.value) === null || _e === void 0 ? void 0 : _e.length, this.totalData);
+    await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
     await this.markForCheck();
   }
   async markForCheck() {
@@ -709,16 +691,20 @@ export class BcmList {
   getAutoCompleteInput() {
     return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
   }
-  /** @description Fixes the issue where the list appears empty during fast scrolling. */
   dataScrollEvent(event) {
-    var _a, _b;
-    const itemHeight = this.size === 'small' ? 28 : this.size === 'large' ? 48 : 36;
-    const currentScrollBottom = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.scrollTop) + ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.clientHeight);
-    const requiredItems = Math.ceil(currentScrollBottom / itemHeight) + 20;
-    if (requiredItems > this.limit) {
-      this.limit = requiredItems;
-      this.searchResultLimit = requiredItems;
-    }
+    let count = 0;
+    let io = new IntersectionObserver((data) => {
+      if (count === 0) {
+        count++;
+        if (data[0].isIntersecting) {
+          this.limit += 15;
+          this.searchResultLimit += 15;
+          io.disconnect();
+          io = null;
+        }
+      }
+    }, this.options);
+    io.observe(event.target.lastElementChild);
   }
   async calculateLocation() {
     var _a, _b;
@@ -788,28 +774,6 @@ export class BcmList {
       this.listOpen.emit();
     }
   }
-  /** @description Focus selected element * BUG 282262 */
-  focusSelectedElement() {
-    var _a;
-    const listElement = document.querySelector(`#bcm-list-${this._id}`);
-    if (!listElement)
-      return;
-    const selectedId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
-    if (selectedId) {
-      const targetItem = listElement.querySelector(`[id*="${selectedId}"]`);
-      if (targetItem) {
-        targetItem.scrollIntoView({
-          block: 'center',
-          inline: 'nearest',
-          behavior: 'auto'
-        });
-        targetItem.focus();
-        const items = listElement.querySelectorAll(".bcm-list__item");
-        items.forEach(i => i.classList.remove("focused"));
-        targetItem.classList.add("focused");
-      }
-    }
-  }
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
     const hostClasses = cs("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
@@ -1656,24 +1620,6 @@ export class BcmList {
         "reflect": false,
         "defaultValue": "false"
       },
-      "autoFocusSelected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "auto-focus-selected",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "data": {
         "type": "any",
         "mutable": true,

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

@@ -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;