@cobre-npm/ds-v3 0.0.1

package/dist/_components.scss

@@ -0,0 +1,1222 @@
+/**
+ * HEADER
+ */
+
+ :root {
+    --cobre-header-bg: var(--cobre-primary-5);
+    --cobre-header-border-bottom: 1px solid #ebebeb;
+    --cobre-header-shadow: 0 0 0 1px var(--cobre-header-border-color);
+    --cobre-header-height: 56px;
+    --cobre-header-menu-bg: var(--cobre-white);
+    --cobre-header-icon-color: var(--cobre-primary-95);
+
+    // Item
+    --cobre-header-item-font-family: 'Inter', sans-serif;
+    --cobre-header-item-font-size: initial;
+    --cobre-header-item-bg: transparent;
+    --cobre-header-item-color: var(--cobre-primary-95);
+    --cobre-header-item-hover-bg: var(--cobre-primary-7);
+    --cobre-header-item-hover-color: var(--cobre-secondary);
+    --cobre-header-item-padding-x: 12px;
+    --cobre-header-item-min-width: initial;
+
+    // Active Item
+    --cobre-header-item-active-radius: 0px;
+    --cobre-header-item-active-bg: transparent;
+    --cobre-header-item-active-color: var(--cobre-secondary-50);
+
+    // Desktop Item
+    --cobre-header-desktop-item-bg: transparent;
+    --cobre-header-desktop-item-hover-bg: var(--cobre-primary-7);
+    --cobre-header-desktop-item-color: var(--cobre-primary-95);
+    --cobre-header-desktop-item-padding-x: 2px;
+
+    // Desktop Active Item
+    --cobre-header-desktop-item-active-radius: 8px;
+    --cobre-header-desktop-item-active-bg: transparent;
+    --cobre-header-desktop-item-active-color: var(--cobre-secondary-50);
+    --cobre-header-desktop-item-active-hover-color: var(--cobre-secondary-50);
+  }
+
+  /**
+   * BUTTONS
+   */
+
+  :root {
+    // Generals
+    --cobre-btn-radius: 8px;
+    --cobre-btn-font-family: 'Inter', sans-serif;
+    --cobre-btn-font-size: 14.22px;
+
+    // By Sizes
+    --cobre-btn-small-height: 40px;
+    --cobre-btn-small-min-width: 176px;
+
+    --cobre-btn-medium-height: 40px;
+    --cobre-btn-medium-min-width: 176px;
+
+    --cobre-btn-big-height: 52px;
+    --cobre-btn-big-min-width: 176px;
+
+    --cobre-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--cobre-secondary-50-rgba), .5);
+
+    // Primary
+    --cobre-btn-primary-bg: var(--cobre-primary-95);
+    --cobre-btn-primary-color: var(--cobre-white);
+    --cobre-btn-primary-hover-bg: var(--cobre-primary-80);
+    --cobre-btn-primary-active-bg: var(--cobre-primary-60);
+    --cobre-btn-primary-focus-bg: var(--cobre-primary-95);
+    --cobre-btn-primary-disabled-bg: var(--cobre-primary-20);
+
+    // Secondary
+    --cobre-btn-secondary-bg: transparent;
+    --cobre-btn-secondary-border: 1px solid var(--cobre-primary-20);
+    --cobre-btn-secondary-color: var(--cobre-primary-95);
+    --cobre-btn-secondary-hover-bg: var(--cobre-primary-10);
+    --cobre-btn-secondary-active-bg: var(--cobre-primary-20);
+    --cobre-btn-secondary-focus-bg: var(--cobre-white);
+    --cobre-btn-secondary-disabled-bg: var(--cobre-white);
+    --cobre-btn-secondary-disabled-color: var(--cobre-primary-30);
+
+    // Single
+    --cobre-btn-single-bg: transparent;
+    --cobre-btn-single-color: var(--cobre-secondary-50);
+    --cobre-btn-single-hover-bg: var(--cobre-header-item-hover-bg);
+    --cobre-btn-single-hover-color: var(--cobre-secondary-80);
+    --cobre-btn-single-disabled-bg: none;
+    --cobre-btn-single-disabled-color: var(--cobre-primary-20);
+    --cobre-btn-single-padding-x: 8px;
+    --cobre-btn-single-padding-y: 2px;
+
+    // Ghost
+    --cobre-btn-ghost-bg: transparent;
+    --cobre-btn-ghost-color: var(--cobre-secondary-50);
+    --cobre-btn-ghost-hover-bg: transparent;
+    --cobre-btn-ghost-hover-color: var(--cobre-secondary-80);
+    --cobre-btn-ghost-active-color: var(--cobre-secondary-70);
+    --cobre-btn-ghost-focus-color: var(--cobre-secondary-50);
+    --cobre-btn-ghost-disabled-color: var(--cobre-primary-20);
+
+    // Link
+    --cobre-btn-link-bg: transparent;
+    --cobre-btn-link-color: var(--cobre-secondary-50);
+    --cobre-btn-link-fw: 600;
+    --cobre-btn-link-hover-bg: transparent;
+    --cobre-btn-link-hover-color: var(--cobre-secondary-80);
+    --cobre-btn-link-active-color: var(--cobre-secondary-70);
+    --cobre-btn-link-focus-color: var(--cobre-secondary-50);
+    --cobre-btn-link-disabled-color: var(--cobre-primary-20);
+  }
+
+  /**
+   * BUTTONS V3
+   */
+
+   :root {
+    // Generals
+    --cobre-btn-v3-radius: 999px;
+    --cobre-btn-v3-font-family: 'Inter', sans-serif;
+    --cobre-btn-v3-font-size: 14px;
+    --cobre-btn-v3-small-font-size: 12px;
+    --cobre-btn-v3-padding: 0 8px;
+
+    // By Sizes
+    --cobre-btn-v3-small-height: 32px;
+
+    --cobre-btn-v3-medium-height: 32px;
+
+    --cobre-btn-v3-big-height: 52px;
+
+     --cobre-btn-v3-icon-small: 16px;
+
+     --cobre-btn-v3-icon-medium: 20px;
+
+    // Primary
+    --cobre-btn-v3-primary-bg: var(--cobre-primary-95);
+    --cobre-btn-v3-primary-color: var(--cobre-white);
+    --cobre-btn-v3-primary-hover-bg: var(--cobre-primary-80);
+    --cobre-btn-v3-primary-active-bg: var(--cobre-primary-60);
+    --cobre-btn-v3-primary-focus-bg: var(--cobre-primary-95);
+    --cobre-btn-v3-primary-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
+    --cobre-btn-v3-primary-disabled-bg: var(--cobre-primary-20);
+
+    // Secondary
+    --cobre-btn-v3-secondary-bg: transparent;
+    --cobre-btn-v3-secondary-border: 0.5px solid var(--cobre-primary-20);
+    --cobre-btn-v3-secondary-color: var(--cobre-primary-95);
+    --cobre-btn-v3-secondary-hover-bg: var(--cobre-primary-10);
+    --cobre-btn-v3-secondary-active-bg: var(--cobre-primary-20);
+    --cobre-btn-v3-secondary-active-border: 1px solid var(--cobre-primary-95);
+    --cobre-btn-v3-secondary-focus-border: 1px solid var(--cobre-brand);
+    --cobre-btn-v3-secondary-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
+    --cobre-btn-v3-secondary-disabled-color: var(--cobre-primary-30);
+    --cobre-btn-v3-secondary-disabled-border: 0.5px solid var(--cobre-primary-20);
+
+    // Secondary Cloudy
+    --cobre-btn-v3-secondary-cloudy-bg: transparent;
+    --cobre-btn-v3-secondary-cloudy-border: 0.5px solid var(--cobre-primary-20);
+    --cobre-btn-v3-secondary-cloudy-color: var(--cobre-primary-95);
+    --cobre-btn-v3-secondary-cloudy-hover-bg: var(--cobre-primary-30);
+    --cobre-btn-v3-secondary-cloudy-active-bg: var(--cobre-primary-20);
+    --cobre-btn-v3-secondary-cloudy-active-border: 1px solid var(--cobre-primary-95);
+    --cobre-btn-v3-secondary-cloudy-focus-border: 1px solid var(--cobre-brand);
+    --cobre-btn-v3-secondary-cloudy-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
+    --cobre-btn-v3-secondary-cloudy-disabled-color: var(--cobre-primary-30);
+    --cobre-btn-v3-secondary-cloudy-disabled-border: 0.5px solid var(--cobre-primary-20);
+
+    // Ghost
+    --cobre-btn-v3-ghost-bg: transparent;
+    --cobre-btn-v3-ghost-color: var(--cobre-primary-95);
+    --cobre-btn-v3-ghost-hover-bg: transparent;
+    --cobre-btn-v3-ghost-hover-color: var(--cobre-secondary-50);
+    --cobre-btn-v3-ghost-active-color: var(--cobre-secondary-70);
+    --cobre-btn-v3-ghost-focus-color: var(--cobre-secondary-50);
+    --cobre-btn-v3-ghost-focus-border: 1px solid var(--cobre-brand);
+    --cobre-btn-v3-ghost-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
+    --cobre-btn-v3-ghost-disabled-color: var(--cobre-primary-20);
+
+    // Ghost Teal
+    --cobre-btn-v3-ghost-teal-bg: transparent;
+    --cobre-btn-v3-ghost-teal-color: var(--cobre-secondary-30);
+    --cobre-btn-v3-ghost-teal-hover-bg: transparent;
+    --cobre-btn-v3-ghost-teal-hover-color: var(--cobre-secondary-40);
+    --cobre-btn-v3-ghost-teal-active-color: var(--cobre-secondary-50);
+    --cobre-btn-v3-ghost-teal-focus-color: var(--cobre-primary-80);
+    --cobre-btn-v3-ghost-teal-focus-border: 1px solid var(--cobre-brand);
+    --cobre-btn-v3-ghost-teal-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
+    --cobre-btn-v3-ghost-teal-disabled-color: var(--cobre-primary-60);
+
+    // Link
+    --cobre-btn-v3-link-bg: transparent;
+    --cobre-btn-v3-link-color: var(--cobre-primary-95);
+    --cobre-btn-v3-link-fw: 500;
+    --cobre-btn-v3-link-hover-bg: transparent;
+    --cobre-btn-v3-link-hover-color: var(--cobre-secondary-50);
+    --cobre-btn-v3-link-active-color: var(--cobre-secondary-70);
+    --cobre-btn-v3-link-focus-color: var(--cobre-secondary-50);
+    --cobre-btn-v3-link-focus-border: 1px solid var(--cobre-brand);
+    --cobre-btn-v3-link-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
+    --cobre-btn-v3-link-disabled-color: var(--cobre-secondary-20);
+
+     // Filter
+     --cobre-btn-v3-filter-radius: var(--cobre-radius-XS);
+     --cobre-btn-v3-filter-bg: transparent;
+     --cobre-btn-v3-filter-color: var(--cobre-primary-80);
+     --cobre-btn-v3-filter-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+     --cobre-btn-v3-filter-padding: 0 8px;
+     --cobre-btn-v3-filter-height: 24px;
+     --cobre-btn-v3-filter-fs: var(--cobre-label-small-fs);
+     --cobre-btn-v3-filter-lh: var(--cobre-label-small-lh);
+     --cobre-btn-v3-filter-hover-bg: var(--cobre-white);
+     --cobre-btn-v3-filter-active-bg: var(--cobre-primary-30);
+     --cobre-btn-v3-filter-focus-bg: var(--cobre-secondary-5);
+     --cobre-btn-v3-filter-focus-border-color: var(--cobre-secondary-50);
+     --cobre-btn-v3-filter-font-weight: 400;
+     --cobre-btn-v3-filter-width: fit-content;
+
+     // Icon
+     --cobre-btn-v3-icon-fs: transparent;
+     --cobre-btn-v3-icon-bg: transparent;
+     --cobre-btn-v3-icon-color: var(--cobre-primary-95);
+     --cobre-btn-v3-icon-radius: var(--cobre-radius-full);
+     --cobre-btn-v3-icon-hover-bg: var(--cobre-primary-10);
+     --cobre-btn-v3-icon-active-bg: var(--cobre-primary-20);
+     --cobre-btn-v3-icon-focus-border: 1px solid var(--cobre-brand);
+     --cobre-btn-v3-icon-focus-box-shadow: 0 0 0 2px #A8C5C4;
+     --cobre-btn-v3-icon-disabled-color: var(--cobre-primary-50);
+
+     // Icon cloudy
+     --cobre-btn-v3-icon-cloudy-fs: transparent;
+     --cobre-btn-v3-icon-cloudy-bg: transparent;
+     --cobre-btn-v3-icon-cloudy-color: var(--cobre-primary-95);
+     --cobre-btn-v3-icon-cloudy-radius: var(--cobre-radius-full);
+     --cobre-btn-v3-icon-cloudy-hover-bg: var(--cobre-primary-20);
+     --cobre-btn-v3-icon-cloudy-active-bg: var(--cobre-primary-30);
+     --cobre-btn-v3-icon-cloudy-focus-border: 1px solid var(--cobre-brand);
+     --cobre-btn-v3-icon-cloudy-focus-box-shadow: 0 0 0 2px #A8C5C4;
+     --cobre-btn-v3-icon-cloudy-disabled-color: var(--cobre-primary-50);
+
+     // Search
+     --cobre-btn-v3-toolbar-radius: 4px;
+     --cobre-btn-v3-toolbar-fs: 12px;
+     --cobre-btn-v3-toolbar-bg: transparent;
+     --cobre-btn-v3-toolbar-color: var(--cobre-primary-80);
+     --cobre-btn-v3-toolbar-hover-bg:  var(--cobre-primary-10);
+     --cobre-btn-v3-toolbar-hover-color: var(--cobre-primary-80);
+
+
+     // Primary Warning
+     --cobre-btn-v3-primary-warning-bg: var(--cobre-red-50);
+     --cobre-btn-v3-primary-warning-color: var(--cobre-primary-5);
+     --cobre-btn-v3-primary-warning-hover-bg: var(--cobre-red-60);
+     --cobre-btn-v3-primary-warning-active-bg: var(--cobre-red-70);
+     --cobre-btn-v3-primary-warning-focus-bg: var(--cobre-red-50);
+     --cobre-btn-v3-primary-warning-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
+     --cobre-btn-v3-primary-warning-disabled-bg: var(--cobre-red-40);
+  }
+
+  /**
+   * CHIPS V3
+   */
+
+  :root {
+    --cobre-chips-disabled-color: var(--cobre-primary-20);
+    --cobre-chips-divider-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+    --cobre-chips-button-color: var(--cobre-primary-80);
+    --cobre-chips-button-disabled-color: var(--cobre-primary-20);
+  }
+
+  /**
+   * ACTION LIST
+   */
+
+  :root {
+    --cobre-action-list-bg: var(--cobre-white);
+    --cobre-action-list-shadow: 0px 2px 15px rgba(40, 40, 43, 0.05), 0px 4px 20px rgba(40, 40, 43, 0.04);
+    --cobre-action-list-radius: 8px;
+    --cobre-action-list-width: 269px;
+    --cobre-action-list-border: none;
+    --cobre-action-list-header-padding: 12px;
+
+    // Item Icon
+    --cobre-action-list-icon-wrap-bg: var(--cobre-secondary-10);
+    --cobre-action-list-icon-wrap-radius: 8px;
+    --cobre-action-list-icon-wrap-padding: 4px;
+    --cobre-action-list-icon-wrap-size: 24px;
+    --cobre-action-list-icon-wrap-disabled-bg: var(--cobre-primary-10);
+    --cobre-action-list-icon-color: var(--cobre-brand);
+    --cobre-action-list-icon-disabled-color: var(--cobre-primary-30);
+
+    // Item
+    --cobre-action-list-item-bg: var(--cobre-white);
+    --cobre-action-list-item-color: initial;
+    --cobre-action-list-item-padding: 12px;
+    --cobre-action-list-item-margin: 0 0 8px 0;
+    --cobre-action-list-item-font-size: var(--cobre-body-large-fs);
+    --cobre-action-list-item-font-line-height: var(--cobre-body-large-lh);
+    --cobre-action-list-item-font-letter-spacing: var(--cobre-body-large-ls);
+    --cobre-action-list-item-font-weight: 400;
+    --cobre-action-list-item-font-color: initial;
+    --cobre-action-list-item-radius: 0;
+
+    // --cobre-action-list-item-hover-bg: var(--cobre-secondary-5);
+    --cobre-action-list-item-hover-color: initial;
+
+    --cobre-action-list-item-focus-bg: var(--cobre-secondary-10);
+    --cobre-action-list-item-focus-color: initial;
+
+    --cobre-action-list-item-active-bg: var(--cobre-secondary-20);
+    --cobre-action-list-item-active-color: initial;
+  }
+
+  /**
+   * BADGES
+   */
+
+  :root {
+    --cobre-badge-radius: 30px;
+    --cobre-badge-font-size: 12.64px;
+    --cobre-badge-padding-x: 8px;
+    --cobre-badge-padding-y: 2px;
+    --cobre-badge-height: 24px;
+    --cobre-badge-font-size: 14.22px;
+
+    --cobre-badge-neutral-bg: var(--cobre-primary-10);
+    --cobre-badge-neutral-color: var(--cobre-primary-80);
+
+    --cobre-badge-success-bg: var(--cobre-green-10);
+    --cobre-badge-success-border: none;
+    --cobre-badge-success-color: var(--cobre-primary-95);
+
+    --cobre-badge-info-bg: var(--cobre-blue-10);
+    --cobre-badge-info-border: none;
+    --cobre-badge-info-color:  var(--cobre-primary-95);
+
+    --cobre-badge-warning-bg: var(--cobre-yellow-10);
+    --cobre-badge-warning-border: none;
+    --cobre-badge-warning-color:  var(--cobre-primary-95);
+
+    --cobre-badge-error-bg: var(--cobre-red-10);
+    --cobre-badge-error-border: none;
+    --cobre-badge-error-color: var(--cobre-primary-95);
+
+    --cobre-badge-inactive-bg: var(--cobre-primary-10);
+    --cobre-badge-inactive-border: none;
+    --cobre-badge-inactive-color: var(--cobre-primary-95);
+
+    // Status
+    --cobre-badge-status-finished-bg: var(--cobre-green-10);
+    --cobre-badge-status-finished-color: var(--cobre-green-50);
+    --cobre-badge-status-finished-border: none;
+
+    --cobre-badge-status-progress-bg: var(--cobre-blue-10);
+    --cobre-badge-status-progress-color: var(--cobre-blue-50);
+    --cobre-badge-status-progress-border: none;
+
+    --cobre-badge-status-error-bg: var(--cobre-red-10);
+    --cobre-badge-status-error-color: var(--cobre-red-50);
+    --cobre-badge-status-error-border: none;
+
+    --cobre-badge-status-pending-bg: var(--cobre-yellow-10);
+    --cobre-badge-status-pending-color: var(--cobre-yellow-50);
+    --cobre-badge-status-pending-border: none;
+
+    --cobre-badge-status-inactive-bg: var(--cobre-primary-10);
+    --cobre-badge-status-inactive-color: var(--cobre-primary-50);
+    --cobre-badge-status-inactive-border: none;
+
+    --cobre-badge-filter-bg: transparent;
+    --cobre-badge-filter-color: var(--cobre-primary-95);
+    --cobre-badge-filter-border: var(--cobre-brand);
+    --cobre-badge-filter-label-color: var(--cobre-brand);
+    --cobre-badge-filter-hover-bg: var(--cobre-brand-light);
+
+    --cobre-badge-outline-bg: var(--cobre-white);
+    --cobre-badge-outline-border: var(--cobre-primary-20) 1px solid;
+    --cobre-badge-outline-color: var(--cobre-primary-95);
+
+    --cobre-badge-alert-bg: var(--cobre-yellow-5);
+    --cobre-badge-alert-color: var(--cobre-yellow-20);
+    --cobre-badge-alert-border: 1px solid var(--cobre-yellow-20);
+  }
+
+  /**
+   * Tabs
+   */
+
+  :root {
+    --cobre-tabs-bg: transparent;
+    --cobre-tabs-border: 2px solid transparent;
+    --cobre-tabs-color: var(--cobre-primary-60);
+    --cobre-tabs-font-weight: 400;
+    --cobre-tabs-font-size: 16px;
+    --cobre-tabs-radius: 0px;
+    --cobre-tabs-padding: 16px 0px;
+    --cobre-tabs-margin: 16px;
+    --cobre-tabs-height: auto;
+
+    --cobre-tabs-hover-bg: transparent;
+    --cobre-tabs-hover-border: 2px solid var(--cobre-secondary-70);
+    --cobre-tabs-hover-color: var(--cobre-secondary-70);
+    --cobre-tabs-hover-radius: 0px;
+    --cobre-tabs-counter-hover-bg: var(--cobre-secondary-70);
+    --cobre-tabs-counter-hover-color: var(--cobre-secondary-10);
+
+    // Active (Selected)
+    --cobre-tabs-active-bg: transparent;
+    --cobre-tabs-active-border: 2px solid var(--cobre-secondary-50);
+    --cobre-tabs-active-color: var(--cobre-secondary-50);
+    --cobre-tabs-active-font-weight: 500;
+    --cobre-tabs-active-radius: 0px;
+    --cobre-tabs-counter-active-bg: var(--cobre-secondary-70);
+    --cobre-tabs-counter-active-color: var(--cobre-secondary-10);
+
+    // Pressed (Selected)
+    --cobre-tabs-pressed-border: 2px solid var(--cobre-secondary-80);
+    --cobre-tabs-pressed-color: var(--cobre-secondary-80);
+    --cobre-tabs-pressed-counter-bg: var(--cobre-secondary-10);
+    --cobre-tabs-pressed-counter-color: var(--cobre-secondary-80);
+
+    // Disabled
+    --cobre-tabs-disabled-bg: transparent;
+    --cobre-tabs-disabled-border: 2px solid var(--cobre-primary-20);
+    --cobre-tabs-disabled-color: var(--cobre-primary-60);
+    --cobre-tabs-disabled-radius: 0px;
+
+    // Counter
+    --cobre-tabs-counter-bg: var(--cobre-primary-5);
+    --cobre-tabs-counter-color: var(--cobre-primary-60);
+    --cobre-tabs-counter-padding: 0 8px;
+    --cobre-tabs-counter-height: 24px;
+    --cobre-tabs-counter-min-width: 24px;
+    --cobre-tabs-counter-hover-bg: var(--cobre-primary-20);
+    --cobre-tabs-counter-hover-color: var(--cobre-secondary);
+    --cobre-tabs-counter-active-bg: var(--cobre-secondary-10);
+    --cobre-tabs-counter-active-color: var(--cobre-secondary-50);
+
+    // Column (Vertical)
+    --cobre-tabs-column-border: 2px solid var(--cobre-primary-30);
+  }
+
+  /**
+   * Select
+   */
+
+  :root {
+    --cobre-select-height: 38px;
+    --cobre-select-bg: var(--cobre-white);
+    --cobre-select-color: var(--cobre-primary-40);
+    --cobre-select-border: 1px solid #ebebeb;
+    --cobre-select-radius: 8px;
+    --cobre-select-arrow: 18px;
+    --cobre-select-border-radius: 8px;
+
+    --cobre-select-hover-bg: var(--cobre-primary-7);
+    --cobre-select-hover-color: var(--cobre-primary-95);
+    --cobre-select-hover-border-color: var(--cobre-primary-30);
+
+    --cobre-select-active-color: var(--cobre-primary-95);
+    --cobre-select-active-border-color: var(--cobre-secondary-50);
+
+    --cobre-select-active-focus-color: var(--cobre-primary-95);
+    --cobre-select-active-focus-shadow: none;
+
+    --cobre-select-disabled-border: var(--cobre-primary-95);
+
+    --cobre-select-selected-bg: var(--cobre-secondary-20);
+    --cobre-select-selected-color: var(--cobre-white);
+    --cobre-select-selected-input-color: var(--cobre-primary-80);
+
+    --cobre-select-dropdown-border: var(--cobre-primary-10);
+    --cobre-select-dropdown-margin-top: 8px;
+    --cobre-select-dropdown-item-height: 37px;
+    --cobre-select-dropdown-item-font-size: 14px;
+    --cobre-select-dropdown-item-padding: 8px;
+    --cobre-select-dropdown-item-color: var(--cobre-primary-80);
+    --cobre-select-dropdown-item-disabled-bg: var(--cobre-primary-7);
+    --cobel-select-dropdown-item-disabled-color: var(--cobre-primary-40);
+    --cobre-select-dropdown-item-active-bg: var(--cobre-secondary-10);
+    --cobre-select-dropdown-item-margin: 0px;
+
+    --cobre-select-add-item-color: var(--cobre-secondary-50);
+
+    --cobre-select-badge-color: var(--cobre-primary-95);
+  }
+
+  /**
+   * Option Switch
+   */
+
+  :root {
+    --cobre-option-switch-bg: var(--cobre-primary-5);
+    --cobre-option-switch-color: var(--cobre-primary-50);
+    --cobre-option-switch-radius: 12px;
+    --cobre-option-switch-height: 40px;
+    --cobre-option-switch-min-width: 110px;
+    --cobre-option-switch-font-size: 14.22px;
+    --cobre-option-switch-shadow: none;
+
+    --cobre-option-switch-disabled-bg: var(--cobre-primary-10);
+    --cobre-option-switch-disabled-color: var(--cobre-primary-50);
+
+    --cobre-option-switch-selected-bg: var(--cobre-secondary-50);
+    --cobre-option-switch-selected-color: var(--cobre-white);
+    --cobre-option-switch-selected-fw: 400;
+
+    --cobre-option-switch-desktop-min-width: 160px;
+  }
+
+  /**
+   * Modal
+   */
+
+   :root {
+    --cobre-modal-border-radius: 8px;
+    --cobre-modal-padding: 16px;
+  }
+
+  /**
+   * Modal Step
+   */
+
+  :root {
+    --cobre-modal-step-bg: var(--cobre-white);
+    --cobre-modal-step-header-bg: var(--cobre-white);
+    --cobre-modal-step-border-bottom: 1px solid var(--cobre-primary-10);
+    --cobre-modal-step-color: var(--cobre-primary-95);
+    --cobre-modal-step-close-btn-color: var(--cobre-primary-95);
+    --cobre-modal-step-footer-bg: var(--cobre-white);
+  }
+
+  /**
+   * OTP Form
+   */
+
+   :root {
+    --cobre-otp-title-box-bg: transparent;
+    --cobre-otp-input-box-bg: transparent;
+    --cobre-otp-input-box-padding: 0px;
+  }
+
+  /**
+   * Error Screen Paths
+   */
+
+   :root {
+    --cobre-error-screen-path-radius: 8px;
+  }
+
+  /**
+   * Radio
+   */
+
+  :root {
+    --cobre-radio-size: 24px;
+    --cobre-radio-bg: var(--cobre-primary-10);
+    --cobre-radio-border: var(--cobre-primary-20);
+    --cobre-radio-disabled-color: var(--cobre-primary-10);
+    --cobre-radio-label-color: var(--cobre-primary-95);
+    --cobre-radio-label-fw: 600;
+    --cobre-radio-label-fs: var(--cobre-label-medium-fs);
+    --cobre-radio-description-color: var(--cobre-primary-80);
+    --cobre-radio-description-margin: 6px 32px;
+    --cobre-radio-description-fs: var(--cobre-label-medium-fs);
+
+    --cobre-radio-input-checked-bg: var(--cobre-secondary-70);
+    --cobre-radio-input-checked-border: 1px solid var(--cobre-secondary-70);
+    --cobre-radio-input-checked-hover-bg: var(--cobre-secondary-50);
+    --cobre-radio-input-checked-disabled-border: 1px solid var(--cobre-secondary-50);
+
+    --cobre-radio-input-hover-bg: var(--cobre-secondary-10);
+    --cobre-radio-input-hover-border: 1px solid var(--cobre-secondary-10);
+
+    --cobre-radio-input-disabled-bg: var(--cobre-primary-5);
+  }
+
+  /**
+   * Radio Box
+   */
+
+  :root {
+    --cobre-radio-box-radius: 12px;
+    --cobre-radio-box-bg: var(--cobre-white);
+    --cobre-radio-box-border: 1px solid var(--cobre-primary-10);
+
+    --cobre-radio-box-active-bg: var(--cobre-secondary-5);
+    --cobre-radio-box-active-border: 1px solid var(--cobre-secondary-50);
+  }
+
+  /**
+   * Uploader
+   */
+
+  :root {
+    --cobre-uploader-bg: var(--cobre-white);
+    --cobre-uploader-color: var(--cobre-primary-60);
+    --cobre-uploader-border: 1.5px dashed var(--cobre-primary-50);
+    --cobre-uploader-height: 240px;
+    --cobre-uploader-radius: 8px;
+    --cobre-uploader-disabled-color: var(--cobre-primary-30);
+
+    --cobre-uploader-icon-color: var(--cobre-primary-95);
+    --cobre-uploader-text-color: var(--cobre-primary-30);
+    --cobre-uploader-text-disabled-color: var(--cobre-primary-40);
+
+    --cobre-uploader-disabled-box-bg: var(--cobre-primary-7);
+    --cobre-uploader-active-drop-bg: var(--cobre-secondary-5);
+    --cobre-uploader-active-drop-color: var(--cobre-secondary-50);
+
+    --cobre-uploader-drag-area-active-bg: var(--cobre-secondary-5);
+    --cobre-uploader-drag-area-active-border: 1.5px dashed var(--cobre-secondary-50);
+    --cobre-uploader-drag-area-disabled-bg: var(--cobre-primary-5);
+    --cobre-uploader-drag-area-disabled-border: 1.5px dashed var(--cobre-primary-30);
+
+    --cobre-uploader-selected-file-border: 1px solid var(--cobre-secondary-50);
+    --cobre-uploader-selected-file-bg: var(--cobre-primary-5);
+    --cobre-uploader-selected-file-color: var(--cobre-primary-95);
+  }
+
+  /**
+   * Checkbox
+   */
+
+  :root {
+    --cobre-checkbox-size-small: 20px;
+    --cobre-checkbox-size-medium: 24px;
+    --cobre-checkbox-radius-small: 6px;
+    --cobre-checkbox-radius-medium: 8px;
+    --cobre-checkbox-bg: var(--cobre-primary-10);
+    --cobre-checkbox-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+
+    --cobre-checkbox-input-checked-bg: var(--cobre-secondary-50);
+    --cobre-checkbox-input-checked-hover-bg: var(--cobre-secondary-70);
+
+    --cobre-checkbox-input-hover-bg: var(--cobre-secondary-10);
+    --cobre-checkbox-input-hover-box-shadow: 0 0 0 0.5px var(--cobre-secondary-50);
+
+    --cobre-checkbox-input-disabled-bg: var(--cobre-secondary-30);
+  }
+
+  /**
+   * Stepper
+   */
+
+  :root {
+    --cobre-stepper-progress-bg: var(--cobre-primary-20);
+    --cobre-stepper-progress-height: 2px;
+
+    --cobre-stepper-progress-bar-bg: var(--cobre-secondary-50);
+
+    --cobre-stepper-item-color: var(--cobre-primary-20);
+    --cobre-stepper-item-counter-bg: var(--cobre-primary-10);
+    --cobre-stepper-item-counter-color: var(--cobre-primary-40);
+    --cobre-stepper-item-counter-radius: 100%;
+    --cobre-stepper-item-counter-size: 24px;
+
+    --cobre-stepper-item-success-color: var(--cobre-secondary-50);
+    --cobre-stepper-item-success-counter-border-color: var(--cobre-secondary-50);
+    --cobre-stepper-item-success-counter-bg: var(--cobre-secondary-50);
+    --cobre-stepper-item-success-counter-color: var(--cobre-white);
+
+    --cobre-stepper-item-current-item-title-color: var(--cobre-secondary-50);
+    --cobre-stepper-item-current-counter-border-color: var(--cobre-secondary-50);
+    --cobre-stepper-item-current-counter-bg: var(--cobre-secondary-50);
+    --cobre-stepper-item-current-counter-color: var(--cobre-white);
+    --cobre-stepper-item-current-counter-outline: 2px solid var(--cobre-secondary-20);
+    --cobre-stepper-item-current-counter-shadow: 0px 4px 4px var(--cobre-primary-20);
+  }
+
+  /**
+   * Switch
+   */
+
+  :root {
+    --cobre-switch-bg: var(--cobre-primary-40);
+    --cobre-switch-point-bg: var(--cobre-white);
+    --cobre-switch-hover-bg: var(--cobre-primary-60);
+    --cobre-switch-border-hover-color: var(--cobre-primary-60);
+    --cobre-switch-shadow: 0 0 8px rgba(99, 97, 95, 0.5);
+    --cobre-switch-border-color: var(--cobre-primary-40);
+
+    --cobre-switch-checked-bg: var(--cobre-secondary-50);
+    --cobre-switch-point-checked-bg: var(--cobre-white);
+    --cobre-switch-checked-disabled-bg: var(--cobre-secondary-30);
+    --cobre-switch-checked-disabled-border-color: var(--cobre-secondary-30);
+    --cobre-switch-checked-hover-bg: var(--cobre-secondary-70);
+    --cobre-switch-checked-border-hover-color: var(--cobre-secondary-70);
+    --cobre-switch-checked-shadow: 0 0 8px rgba(31, 93, 93, 0.5);
+    --cobre-switch-checked-border-color: var(--cobre-secondary-50);
+
+    --cobre-switch-disabled-bg: var(--cobre-primary-20);
+    --cobre-switch-point-disabled-bg: var(--cobre-white);
+    --cobre-switch-disabled-label-color: var(--cobre-primary-40);
+    --cobre-switch-disabled-border-color: var(--cobre-primary-20);
+  }
+
+  /**
+   * Calendar
+   */
+
+  :root {
+    --cobre-calendar-day-today-color: var(--cobre-primary-95);
+    --cobre-calendar-day-today-selected-color: var(--cobre-primary-40);
+    --cobre-calendar-color: var(--cobre-brand);
+    --cobre-calendar-color-light: var(--cobre-brand-light);
+
+    --cobre-calendar-menu-padding: 10px;
+
+    --cobre-calendar-input-height: 40px;
+    --cobre-calendar-input-radius: 8px;
+    --cobre-calendar-input-border: 1px solid var(--cobre-primary-20);
+    --cobre-calendar-input-font-size: var(--cobre-label-medium-fs);
+    --cobre-calendar-input-readonly-bg: var(--cobre-primary-5);
+    --cobre-calendar-input-readonly-border-color: var(--cobre-primary-20);
+    --cobre-calendar-input-readonly-color: var(--cobre-primary-40);
+    --cobre-calendar-input-hover-border-color: var(--cobre-calendar-color);
+
+    --cobre-calendar-cell-font-size: 13px;
+    --cobre-calendar-cell-range-start-radius: 20px 0 0 20px;
+    --cobre-calendar-cell-range-start-bg: var(--cobre-calendar-color);
+    --cobre-calendar-cell-range-end-radius: 0 20px 20px 0;
+    --cobre-calendar-cell-range-end-bg: var(--cobre-calendar-color);
+    --cobre-calendar-cell-range-between-bg: var(--cobre-calendar-color-light);
+    --cobre-calendar-cell-active-bg: var(--cobre-calendar-color);
+    --cobre-calendar-cell-active-color: var(--cobre-white);
+    --cobre-calendar-cell-active-radius: 20px;
+    --cobre-calendar-cell-today-radius: 20px;
+    --cobre-calendar-cell-today-border-width: 2px;
+    --cobre-calendar-cell-today-color: var(--cobre-calendar-day-today-color);
+    --cobre-calendar-cell-today-border: 2px solid var(--cobre-calendar-color);
+    --cobre-calendar-range-end-today-color: var(--cobre-calendar-day-today-selected-color);
+
+    --cobre-calendar-disabled-bg: var(--cobre-primary-5);
+    --cobre-calendar-disabled-border-color: var(--cobre-primary-20);
+    --cobre-calendar-disabled-color: var(--cobre-primary-40);
+
+    --cobre-calendar-overlay-bg: var(--cobre-calendar-color);
+    --cobre-calendar-overlay-color: var(--cobre-white);
+  }
+
+  /**
+   * Alert
+   */
+
+  :root {
+    --cobre-alert-radius: 8px;
+    --cobre-alert-padding: 14px;
+    --cobre-alert-color: var(--cobre-primary-80);
+
+    --cobre-alert-warning-bg: var(--cobre-yellow-10);
+    --cobre-alert-warning-icon-color: var(--cobre-yellow-50);
+    --cobre-alert-warning-border: 1px solid var(--cobre-yellow-10);
+
+    --cobre-alert-success-bg: var(--cobre-green-10);
+    --cobre-alert-success-icon-color: var(--cobre-green-50);
+    --cobre-alert-success-border: 1px solid var(--cobre-green-10);
+
+    --cobre-alert-info-bg: var(--cobre-blue-10);
+    --cobre-alert-info-icon-color: var(--cobre-blue-50);
+    --cobre-alert-info-border: 1px solid var(--cobre-blue-10);
+
+    --cobre-alert-error-bg: var(--cobre-red-10);
+    --cobre-alert-error-icon-color: var(--cobre-red-50);
+    --cobre-alert-error-border: 1px solid var(--cobre-red-10);
+
+    --cobre-alert-transp-icon-color: var(--cobre-primary-50);
+
+
+  }
+
+  /**
+   * Input
+   */
+
+  :root {
+    --cobre-input-height: 40px;
+    --cobre-input-bg: var(--cobre-white);
+    --cobre-input-color: var(--cobre-primary-80);
+    --cobre-input-fw: 400;
+    --cobre-input-border: 1px solid var(--cobre-primary-20);
+    --cobre-input-placeholder-color: #bfbfc1;
+    --cobre-input-placeholder-fw: 400;
+    --cobre-input-radius: 8px;
+    --cobre-input-fs: 16px;
+    --cobre-optional-label-fs: 14.22px;
+
+    --cobre-input-error-border: 1px solid var(--cobre-red-60);
+    --cobre-input-error-color: var(--cobre-red-60);
+    --cobre-input-error-fs: 12.6px;
+
+    --cobre-input-focus-border: 1px solid (--cobre-secondary-50);
+    --cobre-input-focus-shadow: 0 0 0 0.25rem #21212140;
+    --cobre-input-focus-color: #202223;
+    --cobre-input-focus-bg: var(--cobre-white);
+
+    --cobre-input-hover-border: 1px solid var(--cobre-primary-20);
+    --cobre-input-hover-bg: var(--cobre-white);
+
+    --cobre-input-disabled-color: var(--cobre-primary-20);
+    --cobre-input-disabled-bg: var(--cobre-primary-7);
+    --cobre-input-disabled-border: 1px solid var(--cobre-primary-20);
+
+    --cobre-input-active-border: 1px solid var(--cobre-primary-20);
+    --cobre-input-active-bg: var(--cobre-white);
+
+    --cobre-input-autofill-border: 1px solid var(--cobre-primary-20);
+
+    --cobre-input-label-fw: 400;
+    --cobre-input-label-color: var(--cobre-primary-40);
+    --cobre-input-label-disabled-color: var(--cobre-primary-20);
+    --cobre-input-label-fs: var(--cobre-body-medium-fs);
+
+    --cobre-input-url-top: calc(50% - 14px);
+    --cobre-input-url-padding-left: 59px;
+
+  }
+
+  /**
+   * Avatar
+   */
+
+   :root {
+    --cobre-avatar-bg: #9C3314; // TODO: Migrate to variable when new colors palette is ready
+    --cobre-avatar-color: var(--cobre-white);
+
+    --cobre-avatar-disabled-bg: var(--cobre-primary-10);
+    --cobre-avatar-disabled-color:  var(--cobre-primary-40);
+    --cobre-avatar-disabled-border: 1px dashed var(--cobre-primary-20);
+
+    --cobre-avatar-empty-bg: var(--cobre-primary-20);
+    --cobre-avatar-empty-color: var(--cobre-primary-40);
+    --cobre-avatar-empty-border: 1px dashed var(--cobre-primary-10);
+
+    --cobre-avatar-hover-outline: none;
+
+    --cobre-avatar-small: 24px;
+    --cobre-avatar-medium: 32px;
+    --cobre-avatar-large: 40px;
+  }
+
+  /**
+   * Avatar Group
+   */
+
+  :root {
+    --cobre-avatar-group-first-bg: #9C3314; // TODO: Migrate to variable when new colors palette is ready
+    --cobre-avatar-group-second-bg: #9ECBEC; // TODO: Migrate to variable when new colors palette is ready
+  }
+
+  /**
+   * Timeline
+   */
+
+   :root {
+    --cobre-timeline-line-bg: var(--cobre-primary-20);
+  }
+
+  /**
+   * Accordion
+   */
+
+  :root {
+    --cobre-accordion-border-radius: 8px;
+  }
+
+
+  /**
+   * SideMenu
+   */
+
+   :root {
+    --cobre-side-menu-bg: var(--cobre-primary-95);
+    --cobre-side-menu-divider-color: 1px solid var(--cobre-primary-60);
+    --cobre-side-menu-color: var(--cobre-primary-30);
+    --cobre-side-menu-item-bg: var(--cobre-primary-95);
+    --cobre-side-menu-active-bg: var(--cobre-primary-90);
+    --cobre-side-menu-active-color: var(--cobre-primary-20);
+    --cobre-side-menu-focus-bg: var(--cobre-primary-90);
+    --cobre-side-menu-focus-color: var(--cobre-primary-20);
+    --cobre-side-menu-focus-border: 1px solid var(--cobre-primary-20);
+    --cobre-side-menu-hover-bg: var(--cobre-primary-40);
+    --cobre-side-menu-hover-color: var(--cobre-primary-20);
+    --cobre-side-menu-disabled-color: var(--cobre-primary-50);
+    --cobre-side-menu-item-padding: 12px 8px;
+    --cobre-side-menu-item-width: 173px;
+    --cobre-side-menu-item-height: 40px;
+    --cobre-side-menu-item-radius: 8px;
+
+     --cobre-side-menu-option-bg: var(--cobre-primary-90);
+     --cobre-side-menu-option-color: var(--cobre-primary-95);
+     --cobre-side-menu-option-padding: 4px 8px;
+     --cobre-side-menu-option-height: 40px;
+     --cobre-side-menu-option-radius: 8px;
+
+     --cobre-side-menu-option-active-bg: var(--cobre-primary-80);
+     --cobre-side-menu-option-active-color: var(--cobre-primary-10);
+
+     --cobre-side-menu-option-hover-bg: var(--cobre-primary-80);
+     --cobre-side-menu-option-hover-color: var(--cobre-primary-10);
+     --cobre-side-menu-option-focus-border: 1px solid var(--cobre-secondary-20);
+   }
+
+   /**
+   * Header V3
+   */
+
+   :root {
+    --cobre-header-v3-background: var(--cobre-white);
+    --cobre-header-v3-height: 48px;
+   }
+
+
+  /**
+  * Input V3
+  */
+
+  :root {
+    --cobre-input-v3-height: 32px;
+    --cobre-input-v3-color: var(--cobre-primary-95);
+    --cobre-input-v3-radius: 4px;
+    --cobre-input-v3-fw: 400;
+    --cobre-input-v3-fs: 12px;
+
+    --cobre-input-v3-placeholder-color: var(--cobre-primary-50);
+    --cobre-input-v3-placeholder-fw: 400 !important;
+
+    --cobre-input-v3-focus-border: 0.5px solid var(--cobre-secondary-50);
+    --cobre-input-v3-autofill-border: 0.5px solid var(--cobre-secondary-50);
+
+    --cobre-input-v3-error-border: 0.5px solid var(--cobre-red-50);
+    --cobre-input-v3-error-color: var(--cobre-red-50);
+
+    --cobre-input-v3-optional-label-fs: 12px;
+    --cobre-input-v3-optional-label-color: var(--cobre-primary-95);
+    --cobre-input-v3-optional-label-disabled-color: var(--cobre-primary-50);
+
+    // input search
+    --cobre-input-search-v3-color: var(--cobre-primary-80);
+    --cobre-input-search-v3-border: 0;
+    --cobre-input-search-v3-border-bottom: 1px solid var(--cobre-primary-95);
+    --cobre-input-search-v3-focus-border-bottom: 1px solid var(--cobre-secondary-50);
+    --cobre-input-search-v3-focus-search-color: var(--cobre-brand);
+
+    --cobre-input-v3-focus-bg: var(--cobre-white);
+    --cobre-input-v3-focus-border-bottom: 1px solid var(--cobre-brand);
+    --cobre-input-v3-focus-search-color: var(--cobre-brand);
+    --cobre-input-v3-focus-fw: 500;
+
+    // theme white
+
+    --cobre-input-v3-white-bg: var(--cobre-white);
+    --cobre-input-v3-white-border: 0.5px solid var(--cobre-primary-20);
+    --cobre-input-v3-white-hover-border: 0.5px solid var(--cobre-primary-95);
+    --cobre-input-v3-white-hover-bg: var(--cobre-primary-5);
+
+    --cobre-input-v3-white-disabled-bg: var(--cobre-primary-10);
+    --cobre-input-v3-white-disabled-color: var(--cobre-primary-50);
+    --cobre-input-v3-white-disabled-border: none;
+
+    --cobre-input-v3-white-active-bg: var(--cobre-white);
+    --cobre-input-v3-white-active-border: 1px solid var(--cobre-secondary-50);
+    --cobre-input-v3-white-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+
+    // theme cloudy
+
+    --cobre-input-v3-cloudy-bg: var(--cobre-white);
+    --cobre-input-v3-cloudy-border: 0.5px solid var(--cobre-primary-40);
+    --cobre-input-v3-cloudy-hover-border: 0.5px solid var(--cobre-primary-95);
+    --cobre-input-v3-cloudy-hover-bg: var(--cobre-primary-10);
+
+    --cobre-input-v3-cloudy-disabled-bg: var(--cobre-primary-20);
+    --cobre-input-v3-cloudy-disabled-color: var(--cobre-primary-50);
+    --cobre-input-v3-cloudy-disabled-border: 0.5px solid var(--cobre-primary-60);
+
+    --cobre-input-v3-cloudy-active-bg: var(--cobre-white);
+    --cobre-input-v3-cloudy-active-border: 1px solid var(--cobre-secondary-50);
+    --cobre-input-v3-cloudy-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+  }
+
+  /**
+  * Empty State v3
+  */
+
+  :root {
+    --cobre-empty-state-v3-color: var(--cobre-primary-95);
+  }
+
+  /**
+  * RADIUS
+  */
+
+  :root {
+    --cobre-radius-full: 62.4375rem;
+    --cobre-radius-M: 1rem;
+    --cobre-radius-S: 0.5rem;
+    --cobre-radius-XS: 0.25rem;
+  }
+
+  /**
+  * BORDER
+  */
+
+  :root {
+    --cobre-border-stroke-XXXL: 0.1875rem;
+    --cobre-border-stroke-XL: 0.125rem;
+    --cobre-border-stroke-L: 0.0625rem;
+    --cobre-border-stroke-M: 0.03125rem;
+
+  }
+
+  /**
+  * Card v3
+  */
+
+  :root {
+    --cobre-card-border: 0.5px solid var(--cobre-primary-20);
+    --cobre-card-border-radius: 8px;
+    --cobre-card-padding: 24px;
+
+    --cobre-card-header-border: 0.5px solid var(--cobre-primary-20);
+    --cobre-card-header-padding: 24px;
+
+    --cobre-card-content-padding: 24px 0;
+  }
+
+  /**
+  * Flow Result v3
+  */
+
+  :root {
+    --cobre-flow-result-border: 0.5px solid var(--cobre-primary-20);
+
+    // Danger
+    --cobre-flow-result-danger-bg: var(--cobre-red-10);
+    --cobre-flow-result-danger-color: var(--cobre-red-50);
+
+    // Success
+    --cobre-flow-result-success-bg: var(--cobre-green-10);
+    --cobre-flow-result-success-color: var(--cobre-green-50);
+
+  // Info
+    --cobre-flow-result-info-bg: var(--cobre-blue-10);
+    --cobre-flow-result-info-color: var(--cobre-blue-50);
+
+    // Warning
+    --cobre-flow-result-warning-bg: var(--cobre-yellow-10);
+    --cobre-flow-result-warning-color: var(--cobre-yellow-50);
+
+    // Logout
+    --cobre-flow-result-logout-bg: var(--cobre-blue-10);
+    --cobre-flow-result-logout-color: var(--cobre-blue-50);
+
+    // Otp
+    --cobre-flow-result-otp-bg: var(--cobre-blue-10);
+    --cobre-flow-result-otp-color: var(--cobre-blue-50)
+  }
+
+  /**
+  * Float Modal
+  */
+
+  :root {
+    --cobre-float-modal-bg: var(--cobre-primary-20);
+    --cobre-float-modal-bg-filter: none;
+    --cobre-float-modal-opacity: 0.3;
+    --cobre-float-modal-z-index: 2;
+
+    --cobre-float-modal-footer-border: 0.5px solid var(--cobre-primary-20);
+  }
+
+
+  /**
+  * Toast Alert
+  */
+
+  :root {
+    --cobre-toast-padding: 12px 8px;
+
+    --cobre-toast-title-font-weight: 600;
+    --cobre-toast-title-color: var(--cobre-primary-95);
+
+    --cobre-toast-content-font-weight: 400;
+    --cobre-toast-content-color: var(--cobre-primary-80);
+
+    --cobre-toast-text-font-weight: 600;
+
+    --cobre-toast-description-font-size: 16px;
+    --cobre-toast-description-font-weight: 400;
+
+    --cobre-toast-icon-close-color: var(--cobre-primary-95);
+    --cobre-toast-icon-close-font-size: 24px;
+    --cobre-toast-icon-close-font-weight: 400;
+    --cobre-toast-icon-close-top: -12px;
+
+    --cobre-toast-warning-bg: var(--cobre-yellow-10);
+    --cobre-toast-warning-border: none;
+
+    --cobre-toast-danger-bg: var(--cobre-red-10);
+    --cobre-toast-danger-border: none;
+
+    --cobre-toast-success-bg: var(--cobre-green-10);
+    --cobre-toast-success-border: none;
+
+    --cobre-toast-info-bg: var(--cobre-blue-10);
+    --cobre-toast-info-border: none;
+
+    --cobre-toast-icon-padding: 3px;
+    --cobre-toast-icon-border-radius: 20px;
+
+    --cobre-toast-icon-warning-color: var(--cobre-yellow-50);
+    --cobre-toast-icon-warning-bg: var(--cobre-yellow-10);
+
+    --cobre-toast-icon-danger-color: var(--cobre-red-50);
+    --cobre-toast-icon-danger-bg: var(--cobre-red-10);
+
+    --cobre-toast-icon-success-color: var(--cobre-green-50);
+    --cobre-toast-icon-success-bg: var(--cobre-green-10);
+
+    --cobre-toast-icon-info-color: var(--cobre-blue-50);
+    --cobre-toast-icon-info-bg: var(--cobre-blue-10);
+  }
+
+  /**
+   * Uploader V3
+   */
+
+   :root {
+    --cobre-uploader-v3-bg: var(--cobre-white);
+    --cobre-uploader-v3-color: var(--cobre-primary-60);
+    --cobre-uploader-v3-border: 1.5px dashed var(--cobre-primary-50);
+    --cobre-uploader-v3-height: auto;
+    --cobre-uploader-v3-radius: 8px;
+    --cobre-uploader-v3-disabled-color: var(--cobre-primary-30);
+    --cobre-uploader-v3-title-color: var(--cobre-primary-95);
+
+    --cobre-uploader-v3-icon-color: var(--cobre-primary-95);
+    --cobre-uploader-v3-text-color: var(--cobre-primary-30);
+    --cobre-uploader-v3-text-disabled-color: var(--cobre-primary-40);
+
+    --cobre-uploader-v3-disabled-box-bg: var(--cobre-primary-7);
+    --cobre-uploader-v3-active-drop-bg: var(--cobre-secondary-5);
+    --cobre-uploader-v3-active-drop-color: var(--cobre-secondary-50);
+
+    --cobre-uploader-v3-drag-area-active-bg: var(--cobre-secondary-5);
+    --cobre-uploader-v3-drag-area-active-border: 1.5px dashed var(--cobre-secondary-50);
+    --cobre-uploader-v3-drag-area-disabled-bg: var(--cobre-primary-5);
+    --cobre-uploader-v3-drag-area-disabled-border: 1.5px dashed var(--cobre-primary-30);
+
+    --cobre-uploader-v3-selected-file-border: 1px solid var(--cobre-secondary-50);
+    --cobre-uploader-v3-selected-file-bg: var(--cobre-primary-5);
+    --cobre-uploader-v3-selected-file-color: var(--cobre-primary-95);
+  }
+
+
+  /**
+  * Loader
+  */
+
+  :root {
+    --cobre-loader-border-color: var(--cobre-brand) var(--cobre-brand) #0000 #0000
+  }
+
+  /**
+  * Select V3
+  */
+
+  :root {
+
+    --cobre-input-border-selected: var(--cobre-secondary-50);
+
+    --cobre-select-v3-hover-color: var(--cobre-primary-95);
+    --cobre-select-v3-hover-border-color: var(--cobre-primary-30);
+
+    --cobre-select-v3-active-color: var(--cobre-primary-95);
+
+    --cobre-select-v3-active-focus-color: var(--cobre-primary-95);
+    --cobre-select-v3-active-focus-shadow: none;
+
+    --cobre-select-disabled-border: var(--cobre-primary-95);
+
+    --cobre-select-v3-selected-bg: var(--cobre-primary-20);
+    --cobre-select-v3-selected-color: var(--cobre-primary-95);
+
+    --cobre-select-v3-dropdown-item-margin: 4px;
+    --cobre-select-v3-dropdown-item-height: 28px;
+
+    /* z-index */
+    --vs-dropdown-z-index: 2 !important;
+
+    /* Search Input */
+    --vs-search-input-bg: var(--cobre-input-bg) !important;
+    --vs-search-input-placeholder-color: var(--cobre-primary-50) !important;
+
+    /* Font */
+    --vs-font-size: var(--cobre-label-small-fs) !important;
+
+    /* Disabled State */
+    --vs-disabled-bg: var(--cobre-primary-5) !important;
+    --vs-disabled-color: var(--cobre-primary-40) !important;
+
+    /* Borders */
+    --vs-border-color: var(--cobre-primary-20) !important;
+    --vs-border-width: var(--cobre-border-stroke-M) !important;
+    --vs-border-radius: var(--cobre-radius-XS) !important;
+
+    /* Actions: house the component controls */
+    --vs-actions-padding: 4px 6px 0 3px;
+
+    /* Selected */
+    --vs-selected-bg: var(--cobre-input-bg) !important;
+    --vs-selected-color: var(--cobre-input-color) !important;
+
+    /* Dropdown */
+    --vs-dropdown-bg: var(--cobre-select-bg) !important;
+
+    /* Options */
+    --vs-dropdown-option-color: var(--cobre-input-color) !important;
+    --vs-dropdown-option-padding: 4px !important;
+
+    /* Active State */
+    --vs-dropdown-option--active-bg: var(--cobre-select-v3-selected-bg) !important;
+    --vs-dropdown-option--active-color:  var(--cobre-input-color) !important;
+  }