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

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

@@ -124,14 +124,16 @@
 
 .bcm-alert {
   display: block;
+  font-family: Inter, sans-serif;
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
+  font-weight: 500;
   width: 100%;
   max-width: 400px;
   box-sizing: border-box;
-  padding: 8px 16px;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
+  padding: var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-5) var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-3);
+  border-radius: var(--bcm-ui-border-radius-default);
   position: relative;
-  grid-gap: 8px;
 }
 .bcm-alert.hidden {
   display: none;
@@ -139,51 +141,53 @@
 .bcm-alert.full-width {
   max-width: 100%;
 }
+.bcm-alert__status-default {
+  color: var(--bcm-ui-color-text-default);
+  background-color: var(--bcm-ui-color-background-default-default);
+}
 .bcm-alert__status-info {
-  border: 1px solid var(--bcm-color-blue-3);
-  background-color: var(--bcm-color-blue-1);
+  color: var(--bcm-ui-color-text-info);
+  background-color: var(--bcm-ui-color-background-stated-info-default);
 }
 .bcm-alert__status-error {
-  border: 1px solid var(--bcm-color-red-3);
-  background-color: var(--bcm-color-red-1);
+  color: var(--bcm-ui-color-text-error);
+  background-color: var(--bcm-ui-color-background-stated-error-default);
 }
 .bcm-alert__status-warning {
-  border: 1px solid var(--bcm-color-warmyellow-3);
-  background-color: var(--bcm-color-warmyellow-1);
+  color: var(--bcm-ui-color-text-warning);
+  background-color: var(--bcm-ui-color-background-stated-warning-default);
 }
 .bcm-alert__status-success {
-  border: 1px solid var(--bcm-color-green-3);
-  background-color: var(--bcm-color-green-1);
+  color: var(--bcm-ui-color-text-success);
+  background-color: var(--bcm-ui-color-background-stated-success-default);
 }
 .bcm-alert__type-banner {
   border: none;
 }
 .bcm-alert__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 0;
+  display: inline-block;
 }
 .bcm-alert__header-message {
   display: flex;
   align-items: center;
-  grid-gap: 8px;
-  color: var(--bcm-color-grey-8);
+  gap: var(--bcm-ui-spacing-2);
+  margin-right: var(--bcm-ui-spacing-2);
+}
+.bcm-alert__header-message:empty {
+  display: none;
 }
 .bcm-alert__header-dismiss {
   display: flex;
   position: absolute;
-  top: -1px;
-  right: 0;
-  padding: 16px;
-  color: var(--bcm-color-grey-8);
+  top: var(--bcm-ui-spacing-1);
+  right: var(--bcm-ui-spacing-1);
+  padding: var(--bcm-ui-spacing-2);
 }
 .bcm-alert__header-dismiss:hover {
   cursor: pointer;
-  color: var(--bcm-color-grey-9);
 }
 .bcm-alert__content {
-  color: var(--bcm-color-grey-8);
+  display: inline-block;
 }
 .bcm-alert__content p {
   margin: 0;

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

@@ -5,14 +5,12 @@
 import { h, Host } from '@stencil/core';
 import { StatusProps, TypeProps } from './types';
 import cs from 'classnames';
-import alertStates from '../states/alert.states';
 import { Generate } from '../../../helper/generate';
 import { StringHelper } from '../../../helper/string-helper';
 export class BcmAlert {
   constructor() {
     this.hidden = false;
     this._id = Generate.UID();
-    this._title = undefined;
     this.description = undefined;
     this.status = StatusProps.info;
     this.type = TypeProps.basic;
@@ -33,33 +31,42 @@ export class BcmAlert {
         return;
       }
     }
-    this.setData();
   }
   dismiss(e) {
     this.alertdismissible.emit(e);
     this.el.remove();
   }
-  getStateData() {
-    return alertStates.getValue(this._id);
-  }
-  setData() {
-    const { status, type, bigIcon } = this;
-    alertStates.setValue({
-      id: this._id,
-      status,
-      type,
-      bigIcon,
-    });
+  // setData() {
+  //     const { status, type, bigIcon } = this;
+  //     alertStates.setValue({
+  //         id: this._id,
+  //         status,
+  //         type,
+  //         bigIcon,
+  //     });
+  // }
+  statusIcon() {
+    const { status } = this;
+    switch (status) {
+      case StatusProps.info:
+        return "far fa-info-circle";
+      case StatusProps.error:
+        return "far fa-times-circle";
+      case StatusProps.warning:
+        return "far fa-exclamation-circle";
+      case StatusProps.success:
+        return "far fa-check-circle";
+    }
   }
   render() {
-    const { fullWidth, status, type, icon, bigIcon, _title, hidden, dismissible, description } = this;
-    const hostClasses = cs('bcm-alert', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
+    const { fullWidth, status, type, icon, bigIcon, hidden, dismissible, description } = this;
+    const hostClasses = cs('bcm-alert bcm-ui-element', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
       'full-width': fullWidth,
       hidden,
     });
-    const headerMessage = cs('bcm-alert__header-message', !!description ? 'size-3' : 'size-2');
-    const state = this.getStateData();
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), h("header", { class: "bcm-alert__header" }, h("span", { class: headerMessage }, (bigIcon || icon) && h("bcm-icon", { icon: state.icon }), _title), dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "fal fa-times" })))), h("main", { class: "bcm-alert__content size-2" }, description && h("p", null, description), h("slot", null))));
+    const headerMessage = cs('bcm-alert__header-message', !!description ? '' : '');
+    const _icon = this.statusIcon();
+    return (h(Host, { class: hostClasses }, h("header", { class: "bcm-alert__header" }, h("span", { class: headerMessage }, (bigIcon || icon) && h("bcm-icon", { icon: _icon }))), h("main", { class: "bcm-alert__content" }, description && h("p", null, description), h("slot", null)), dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "far fa-times" })))));
   }
   static get is() { return "bcm-alert"; }
   static get originalStyleUrls() {
@@ -110,23 +117,6 @@ export class BcmAlert {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "_title": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "_title",
-        "reflect": false
-      },
       "description": {
         "type": "any",
         "mutable": true,

package/dist/collection/components/molecules/button-group/button-group.css

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
 .size-1 {
   font-size: 12px;
   line-height: 20px;
@@ -123,44 +122,37 @@
   margin-right: 8px;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 .bcm-button-group {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
+  font-family: Inter, sans-serif;
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
+  font-weight: 500;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  flex-wrap: nowrap;
+  justify-content: center;
   width: fit-content;
-  background-color: var(--bcm-new-ds-color-slate-300);
-  border: 1px solid var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-default-active);
+  border: 1px solid var(--bcm-ui-color-border-default);
   gap: 1px;
-  border-radius: 4px;
+  border-radius: var(--bcm-ui-border-radius-default);
 }
 .bcm-button-group .bcm-button__container {
   border-radius: 0;
   border: none;
 }
 .bcm-button-group .bcm-button:first-child .bcm-button__container {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-top-left-radius: var(--bcm-ui-border-radius-default);
+  border-bottom-left-radius: var(--bcm-ui-border-radius-default);
 }
 .bcm-button-group .bcm-button:last-child .bcm-button__container {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-top-right-radius: var(--bcm-ui-border-radius-default);
+  border-bottom-right-radius: var(--bcm-ui-border-radius-default);
 }
 .bcm-button-group__vertical {
-  display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
-  flex-wrap: nowrap;
+  justify-content: center;
 }
 .bcm-button-group__vertical .bcm-button {
   width: 100%;
@@ -170,8 +162,8 @@
   border-radius: 0;
 }
 .bcm-button-group__vertical .bcm-button:first-child .bcm-button__container {
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--bcm-ui-border-radius-default) var(--bcm-ui-border-radius-default) 0 0;
 }
 .bcm-button-group__vertical .bcm-button:last-child .bcm-button__container {
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 var(--bcm-ui-border-radius-default) var(--bcm-ui-border-radius-default);
 }

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

@@ -194,14 +194,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;
@@ -247,15 +247,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 {
@@ -268,8 +268,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 {
@@ -282,8 +282,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/components/molecules/checkbox/checkbox.js

@@ -19,7 +19,6 @@ import { Generate } from '../../../helper/generate';
 import { SlotTemplate } from '../../../templates/slot-template';
 import Bcm from '../../../models/bcm';
 import { delay } from '../../../utils/utils';
-import { ColorHelper } from '../../../helper/color-helper';
 import { IsLoad } from '../../../decorators/is-load-decorator';
 export class BcmCheckbox {
   constructor() {
@@ -122,15 +121,15 @@ export class BcmCheckbox {
       return;
     const prefix = `--bcm-checkbox`;
     return {
-      [`${prefix}-primary-color-default`]: ColorHelper.dsColor(color + '-500'),
-      [`${prefix}-primary-color-hover`]: ColorHelper.dsColor(color + '-600'),
-      [`${prefix}-primary-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
-      [`${prefix}-primary-color-active`]: ColorHelper.dsColor(color + '-700'),
+      [`${prefix}-primary-color-default`]: `var(--bcm-ui-color-background-vivid-${color}-default)`,
+      [`${prefix}-primary-color-hover`]: `var(--bcm-ui-color-background-vivid-${color}-hover)`,
+      [`${prefix}-primary-color-focus-visible`]: `var(--bcm-ui-color-background-vivid-${color}-active)`,
+      [`${prefix}-primary-color-active`]: `var(--bcm-ui-color-background-vivid-${color}-active)`,
       // [`${prefix}-primary-color-disabled`]: ColorHelper.dsColor(color + '-300'),
-      [`${prefix}-secondary-color-default`]: ColorHelper.dsColor('white'),
-      [`${prefix}-secondary-color-hover`]: ColorHelper.dsColor('slate-50'),
-      [`${prefix}-secondary-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
-      [`${prefix}-secondary-color-active`]: ColorHelper.dsColor('slate-50'),
+      [`${prefix}-secondary-color-default`]: `var(--bcm-ui-color-background-default-default)`,
+      [`${prefix}-secondary-color-hover`]: `var(--bcm-ui-color-background-default-default)`,
+      [`${prefix}-secondary-color-focus-visible`]: `var(--bcm-ui-color-background-default-default)`,
+      [`${prefix}-secondary-color-active`]: `var(--bcm-ui-color-background-default-default)`,
       // [`${prefix}-secondary-color-disabled`]: ColorHelper.dsColor('slate-200')
     };
   }

package/dist/collection/components/molecules/color-input/color-input.js

@@ -49,7 +49,7 @@ export class BcmColorInput {
     return typeof window !== "undefined" && "EyeDropper" in window;
   }
   render() {
-    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100", style: {
+    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h("i", { slot: "prefix", 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: this.value,
       } }), this.isEyeDropperSupported() && h("i", { slot: "suffix", class: "far fa-eye-dropper", onClick: () => this.eyeDropper() })), h("bcm-linked", { targetId: this._id + "-color-container" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.handleChange(e.detail) }))));
   }

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

@@ -8,7 +8,7 @@ export class BcmEmpty {
     this.icon = undefined;
   }
   render() {
-    return (h(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h("i", { class: `tw-text-8 tw-text-amber-500 ${this.icon}` }), h("bcm-typography", { class: "tw-text-slate-700 tw-text-2" }, h("slot", null))));
+    return (h(Host, { class: "bcm-empty bcm-ui-element tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1  tw-text-color-caption tw-text-center tw-rounded tw-gap-2" }, this.icon && (h("div", { class: "tw-bg-blue-50 tw-text-color-primary tw-text-size-9 tw-mb-1 tw-rounded-3xl tw-p-4" }, h("i", { class: `${this.icon}` }))), h("bcm-typography", { class: "tw-text-color-caption tw-text-size-4 tw-font-medium" }, h("slot", null))));
   }
   static get is() { return "bcm-empty"; }
   static get properties() {

package/dist/collection/components/molecules/error-layout/error-layout.css

@@ -128,19 +128,17 @@
 }
 
 .error-layout {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
-  font-size: 12px;
-  line-height: calc(12px + 8px);
-  padding: 12px;
-  background: var(--bcm-new-ds-color-red-100);
-  border: 2px solid var(--bcm-new-ds-color-red-200);
-  box-sizing: border-box;
-  border-radius: 4px;
-  color: var(--bcm-new-ds-color-red-400);
-}
-.error-layout li > span {
-  margin-left: -4px;
+  font-family: Inter, sans-serif;
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
+  font-weight: 500;
+  padding: var(--bcm-ui-spacing-4);
+  background: var(--bcm-ui-color-background-stated-error-default);
+  border: 1px solid var(--bcm-ui-color-border-error);
+  border-radius: var(--bcm-ui-border-radius-default);
+  color: var(--bcm-ui-color-text-error);
+}
+.error-layout ul {
+  margin: 0;
+  padding-left: var(--bcm-ui-spacing-5);
 }

package/dist/collection/components/molecules/error-layout/error-layout.js

@@ -42,7 +42,7 @@ export class BcmErrorLayout {
   render() {
     const { itemsProp } = this;
     const classes = cs('error-layout', this.size);
-    const hostClasses = cs(this.hidden ? 'hidden' : null);
+    const hostClasses = cs("tw-w-full bcm-ui-element", this.hidden ? 'hidden' : null);
     return (h(Host, { class: hostClasses }, itemsProp.length > 0 && (h("div", { class: classes }, h("ul", null, this.itemsProp.map((item) => h("li", null, h("span", null, item))))))));
   }
   static get is() { return "bcm-error-layout"; }

package/dist/collection/components/molecules/expansion-panel/expansion-panel.css

@@ -128,19 +128,18 @@
 }
 
 .bcm-expansion-panel {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
+  font-family: Inter, sans-serif;
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
   display: block;
   width: 100%;
-  background-color: var(--bcm-new-ds-color-white);
-  border-radius: 8px;
-  border: 1px solid var(--bcm-new-ds-color-slate-300);
+  background-color: var(--bcm-ui-color-background-base-default);
+  border-radius: var(--bcm-ui-border-radius-default);
+  border: 1px solid var(--bcm-ui-color-border-default);
   box-sizing: border-box;
 }
 .bcm-expansion-panel + .bcm-expansion-panel {
-  margin-top: 4px;
+  margin-top: -1px;
 }
 .bcm-expansion-panel__header {
   display: flex;
@@ -148,10 +147,11 @@
   justify-content: flex-start;
   user-select: none;
   min-height: 50px;
-  border-radius: 8px;
-  padding: 4px 24px;
-  color: var(--bcm-new-ds-color-slate-700);
-  font-weight: 600;
+  border-radius: var(--bcm-ui-border-radius-default);
+  padding: 0 var(--bcm-ui-spacing-4);
+  min-height: 56px;
+  color: var(--bcm-ui-color-text-default);
+  font-weight: 500;
 }
 .bcm-expansion-panel__header-content {
   display: flex;
@@ -172,11 +172,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  gap: 4px;
+  gap: var(--bcm-ui-spacing-2);
+  font-weight: 600;
+  color: var(--bcm-ui-color-text-header);
 }
 .bcm-expansion-panel__header-title-description {
-  margin-left: calc(4px / 2);
-  color: var(--bcm-new-ds-color-slate-500);
+  margin-left: var(--bcm-ui-spacing-1);
+  color: var(--bcm-ui-color-text-caption);
   font-size: 12px;
   line-height: calc(12px + 8px);
 }
@@ -193,7 +195,8 @@
   justify-content: center;
   transform: rotate(0deg);
   transition: transform 0.2s ease-in-out;
-  font-size: 12px;
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
 }
 .bcm-expansion-panel__header-extra {
   display: none;
@@ -212,23 +215,23 @@
 }
 .bcm-expansion-panel__body {
   display: none;
-  padding: 12px 24px;
+  padding: var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-4);
 }
 .bcm-expansion-panel--icon-right .bcm-expansion-panel__header {
   justify-content: space-between;
-  padding-left: 24px;
+  padding-left: var(--bcm-ui-spacing-4);
 }
 .bcm-expansion-panel--icon-right .bcm-expansion-panel__header-toggle {
   order: 6;
 }
-.bcm-expansion-panel--invalid .bcm-expansion-panel__header-toggle, .bcm-expansion-panel--invalid .bcm-expansion-panel__header-content {
-  color: var(--bcm-new-ds-color-red-500);
+.bcm-expansion-panel--invalid .bcm-expansion-panel__header-content {
+  color: var(--bcm-ui-color-text-error);
 }
 .bcm-expansion-panel--expanded {
-  border-bottom: 1px solid var(--bcm-color-grey-5);
+  border-bottom: 1px solid var(--bcm-ui-color-border-default);
 }
 .bcm-expansion-panel--expanded .bcm-expansion-panel__header {
-  border-radius: 8px 8px 0 0;
+  border-radius: var(--bcm-ui-border-radius-default) var(--bcm-ui-border-radius-default) 0 0;
 }
 .bcm-expansion-panel--expanded .bcm-expansion-panel__header-toggle {
   transform: rotate(180deg);

package/dist/collection/components/molecules/expansion-panel/expansion-panel.js

@@ -90,7 +90,7 @@ export class BcmExpansionPanel {
       'bcm-expansion-panel--icon-right': this.expandIconPosition === 'right',
       hidden,
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h("div", { class: "bcm-expansion-panel__header-title" }, h("span", { id: _id + '-header' }, h("slot", { name: "header" })), tooltip && (h("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h("bcm-icon", { color: color, icon: icon })))), h("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h("slot", { name: "description" }))), h("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: "bcm-expansion-panel__header-toggle" }, h("bcm-icon", { icon: "far fa-chevron-down" })))), h("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h("slot", null))));
+    return (h(Host, { class: hostClasses }, h("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h("div", { class: "bcm-expansion-panel__header-title" }, h("span", { id: _id + '-header' }, h("slot", { name: "header" })), tooltip && (h("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h("bcm-icon", { color: color, icon: icon })))), h("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h("slot", { name: "description" }))), h("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: "bcm-expansion-panel__header-toggle" }, h("bcm-icon", { icon: "fas fa-chevron-down" })))), h("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h("slot", null))));
   }
   static get is() { return "bcm-expansion-panel"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/input/input.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/input/input.style.js

@@ -75,7 +75,7 @@ export const inputStyle = tv({
       },
       false: {
         controlsBtn: "hover:tw-bg-color-base-hover hover:tw-text-color",
-        inputContainer: ["has-[:not([disabled]):focus]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primaryInfo"],
+        inputContainer: ["has-[:not([disabled]):focus]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primary"],
       },
     },
     readonly: {