@po-ui/style 18.0.0-next.0 → 18.0.0-rc.0

package/css/po-theme-default-variables.css

@@ -164,8 +164,6 @@
   --color-primary-light-80: #f5dbe8; /* Borda inferior da Table Header */
   --color-primary-alpha-50: rgba(201, 53, 125, 0.5); /* Scroll (opacidade de 50%) */
 
-  --color-primary: var(--color-brand-02-base); /* Deprecated v18.x.x utilizar --color-brand-02-base */
-
   --color-primary-dark-20: #9d2c67; /* Hover do Botão primário, Links, Cor da borda do botão secundário */
   --color-primary-dark-40: #8b255a; /* Pressed do Botão primário, Links, Cor da borda do botão secundário */
 
@@ -301,22 +299,6 @@ po-accordion-manager {
 }
 
 :root {
-  /*------------------------------------*\
-  ACCORDION ITEM HEADER
-\*------------------------------------*/
-  --color-accordion-header-color-primary: var(--color);
-  /*Deprecated v18.x.x utilizar --color*/
-  --color-accordion-header-color-hover: var(--color-hover);
-  /*Deprecated v18.x.x utilizar --color-hover*/
-
-  /*------------------------------------*\
-  ACCORDION ITEM HEADER BUTTON
-\*------------------------------------*/
-  --color-accordion-item-header-button-background-color: var(--background-color);
-  /*Deprecated v18.x.x utilizar --background-color*/
-  --color-accordion-item-header-button-focus: var(--color-focus);
-  /*Deprecated v18.x.x utilizar --color-focus*/
-
   /*------------------------------------*\
   AVATAR
 \*------------------------------------*/
@@ -446,45 +428,12 @@ po-button-group .po-button {
 }
 
 :root {
-  --color-breadcrumb-color-item: var(--color); /*Deprecated v18.x.x utilizar --color */
-
-  /*------------------------------------*\
-  BUTTON GROUP
-\*------------------------------------*/
-  --color-button-group-background-selected: var(--color-pressed);
-  /*Deprecated v18.x.x utilizar --color-pressed */
-  --color-button-group-border-selected: var(--color-pressed);
-  /*Deprecated v18.x.x utilizar --color-pressed */
-  --color-button-group-color-selected: var(--text-color);
-  /*Deprecated v18.x.x utilizar --text-color */
-
-  --color-button-group-background-color-neutral-hover: var(--color-hover);
-  /*Deprecated v18.x.x utilizar --color-hover */
-  --color-button-group-border-neutral-hover: var(--color-hover);
-  /*Deprecated v18.x.x utilizar --color-hover */
-  --color-button-group-color-neutral-hover: var(--text-color);
-  /*Deprecated v18.x.x utilizar --text-color */
-
-  --color-button-group-background-color-neutral-pressed: var(--color-pressed);
-  /*Deprecated v18.x.x utilizar --color-pressed */
-  --color-button-group-border-neutral-pressed: var(--color-pressed);
-  /*Deprecated v18.x.x utilizar --color-pressed */
-  --color-button-group-color-neutral-pressed: var(--text-color);
-  /*Deprecated v18.x.x utilizar --text-color */
-
-  --color-button-group-background-color-neutral-disabled: var(--background-color-disabled);
-  /*Deprecated v18.x.x utilizar --background-color-disabled */
-  --color-button-group-border-neutral-disabled: var(--color-disabled);
-  /*Deprecated v18.x.x utilizar --color-disabled */
-  --color-button-group-color-neutral-disabled: var(--color-disabled);
-  /*Deprecated v18.x.x utilizar --color-disabled */
-
   /*------------------------------------*\
   CALENDAR
 \*------------------------------------*/
   --color-calendar-background-color: var(--color-neutral-light-00);
-  --color-calendar-arrow: var(--color-primary);
-  --color-calendar-title: var(--color-primary);
+  --color-calendar-arrow: var(--color-brand-02-base);
+  --color-calendar-title: var(--color-brand-02-base);
   --color-calender-color-content-label: var(--color-neutral-mid-40);
 
   --color-calendar-background-color-box-background-normal: var(--color-transparent);
@@ -498,13 +447,13 @@ po-button-group .po-button {
   --color-calendar-background-color-box-background-range: var(--color-primary-light-80);
   --color-calendar-background-color-box-background-today-hover: var(--color-neutral-light-20);
 
-  --color-calendar-background-color-border-today: var(--color-primary);
+  --color-calendar-background-color-border-today: var(--color-brand-02-base);
 
   --color-calendar-color-box-foreground: var(--color-neutral-dark-70);
   --color-calendar-color-box-foreground-selected: var(--color-neutral-dark-90);
   --color-calendar-color-box-foreground-pressed: var(--color-neutral-dark-90);
-  --color-calendar-color-box-foreground-range: var(--color-primary);
-  --color-calendar-color-box-foreground-today: var(--color-primary);
+  --color-calendar-color-box-foreground-range: var(--color-brand-02-base);
+  --color-calendar-color-box-foreground-today: var(--color-brand-02-base);
   --color-calendar-color-box-foreground-disabled: var(--color-neutral-light-20);
 
   /*------------------------------------*\
@@ -540,28 +489,6 @@ po-checkbox {
 }
 
 :root {
-  --color-checkbox-background-color: var(--color-unchecked);
-  /* Deprecated v17.x.x utilizar --color-unchecked */
-  --color-checkbox-background-color-active: var(--color-checked);
-  /* Deprecated v17.x.x utilizar --color-checked */
-  --color-checkbox-background-color-disabled: var(--color-unchecked-disabled);
-  /* Deprecated v17.x.x utilizar --color-unchecked-disabled */
-  --color-checkbox-box-shadow-color-focusable: var(--outline-color-focused);
-  /* Deprecated v17.x.x utilizar --outline-color-focused */
-
-  --color-checkbox-border-input: var(--border-color);
-  /* Deprecated v17.x.x utilizar --border-color */
-  --color-checkbox-border-input-active: var(--color-hover);
-  /* Deprecated v17.x.x utilizar --border-color */
-  --color-checkbox-border-input-disabled: var(--color-checked-disabled);
-  /* Deprecated v17.x.x utilizar --color-hover */
-  --color-checkbox-border-input-invalid: var(--color-feedback-negative-base);
-  /* Deprecated v17.x.x utilizar --color-danger */
-  --color-checkbox-background-color-active-disabled: var(--color-checked-disabled);
-  /* Deprecated v17.x.x utilizar --color-checked-disabled */
-  --color-checkbox-hover-active: var(--shadow-color-hover);
-  /* Deprecated v17.x.x utilizar --shadow-color-hover */
-
   /*------------------------------------*\
   CHECKBOX GROUP
 \*------------------------------------*/
@@ -713,21 +640,6 @@ po-dynamic-container po-container {
   --padding: var(--spacing-md);
 }
 
-:root {
-  --color-dropdown-button-color: var(--color); /* Deprecated v17.x.x utilizar --color */
-  --color-dropdown-button-border-color: var(--color); /* Deprecated v17.x.x utilizar --color */
-
-  --color-dropdown-button-color-hover: var(--color-hover); /* Deprecated v17.x.x utilizar --color-hover */
-  --color-dropdown-button-border-color-hover: var(--color-hover); /* Deprecated v17.x.x utilizar --color-hover */
-
-  --color-dropdown-button-color-disabled: var(
-    --color-disabled
-  ); /* Deprecated v17.x.x utilizar --color-action-disabled */
-  --color-dropdown-button-border-color-disabled: var(
-    --color-disabled
-  ); /* Deprecated v17.x.x utilizar --color-action-disabled */
-}
-
 /*------------------------------------*\
   FIELD CONTAINER CONTENT
 \*------------------------------------*/
@@ -751,21 +663,6 @@ po-field-container-bottom {
 }
 
 :root {
-  --color-field-container-bottom-color-text-error: var(--text-color-error);
-  /*Deprecated v18.x.x utilizar --text-color-error */
-  --color-field-container-color-help: var(--text-color-help);
-  /*Deprecated v18.x.x utilizar --text-color-help */
-
-  /*------------------------------------*\
-  FIELD ICON
-\*------------------------------------*/
-  --color-field-icon-color: var(--color-primary);
-  /* Deprecated v18.x.x utilizar --color-brand-02-base */
-  --color-field-icon-color-error: var(--color-feedback-negative-base);
-  /* Deprecated v18.x.x utilizar --color-icon-error */
-  --color-field-icon-color-disabled: var(--color-neutral-light-30);
-  /* Deprecated v18.x.x utilizar --color-neutral-light-30 */
-
   /*------------------------------------*\
   GAUGE
 \*------------------------------------*/
@@ -782,7 +679,7 @@ po-field-container-bottom {
   --color-info-color-text-label: var(--color-neutral-dark-70);
   --color-info-color-text-value: var(--color-neutral-dark-90);
 
-  --color-info-color-link: var(--color-primary);
+  --color-info-color-link: var(--color-brand-02-base);
   --color-info-color-link-hover: var(--color-primary-dark-20);
   --color-info-color-link-pressed: var(--color-primary-dark-40);
 }
@@ -829,25 +726,6 @@ input.po-input {
   --text-color-disabled: var(--color-neutral-dark-70);
 }
 
-:root {
-  --color-input-background-color-text: var(--background);
-  /*Deprecated v18.x.x utilizar --background */
-  --color-input-border-text: var(--color-disabled);
-  /*Deprecated v18.x.x utilizar --color-disabled */
-  --color-input-border-text-disabled: var(--background-disabled);
-  /*Deprecated v18.x.x utilizar --background-disabled */
-  --color-input-border-text-focusable: var(--color-focused);
-  /*Deprecated v18.x.x utilizar --color-focused */
-  --color-input-border-text-error: var(--color-feedback-negative-base);
-  /*Deprecated v18.x.x utilizar --color-feedback-negative-base */
-  --color-input-color-disabled: var(--text-color-disabled);
-  /*Deprecated v18.x.x utilizar -text-color-disabled */
-  --color-input-text-error: var(--color-feedback-negative-base);
-  /*Deprecated v18.x.x utilizar --color-feedback-negative-base */
-  --color-input-text-placeholder: var(--text-color-placeholder);
-  /*Deprecated v18.x.x utilizar --text-color-placeholder */
-}
-
 /*------------------------------------*\
   ITEM LIST
 \*------------------------------------*/
@@ -933,7 +811,7 @@ po-listbox {
 :root {
   --color-list-view-background-color: var(--color-neutral-light-00);
   --color-list-view-border: var(--color-neutral-light-10);
-  --color-list-view-color-primary: var(--color-primary);
+  --color-list-view-color-primary: var(--color-brand-02-base);
   --color-list-view-color-primary-hover: var(--color-primary-dark-20);
   --color-list-view-color-select-all-label: var(--color-neutral-dark-70);
 }
@@ -958,27 +836,15 @@ po-loading-icon {
 }
 
 :root {
-  --color-loading-color-label: var(--text-color);
-  /*Deprecated v18.x.x utilizar --text-color*/
   --color-loading-icon-color-neutral: var(--color-neutral-light-20);
-  --color-loading-icon-color-primary: var(--color); /*Deprecated v18.x.x utilizar --color*/
-
-  /*------------------------------------*\
-    LOADING OVERLAY
-  \*------------------------------------*/
-
-  --color-loading-overlay-background-color-content: var(--background);
-  /*Deprecated v18.x.x utilizar --background*/
-  --color-loading-overlay-box-shadow-content: var(--shadow);
-  /*Deprecated v18.x.x utilizar --shadow*/
 
   /*------------------------------------*\
   LOOKUP
   \*------------------------------------*/
   --color-lookup-search-background-color-text: var(--color-neutral-light-00);
   --color-lookup-search-border-text: var(--color-neutral-light-30);
-  --color-lookup-search-border-text-focusable: var(--color-primary);
-  --color-lookup-advanced-search-link-color-text: var(--color-primary);
+  --color-lookup-search-border-text-focusable: var(--color-brand-02-base);
+  --color-lookup-advanced-search-link-color-text: var(--color-brand-02-base);
 }
 
 /*------------------------------------*\
@@ -1023,32 +889,6 @@ po-menu-item {
   --font-weight-lvl1: var(--font-weight-normal);
 }
 
-:root {
-  --color-menu-color-menu-item-text: var(--color);
-  /*Deprecated v17.x.x utilizar --color*/
-
-  --color-menu-color-menu-item-selected: var(--color-actived);
-  /*Deprecated v17.x.x utilizar --color-actived*/
-
-  --color-menu-color-menu-responsive: var(--color);
-  /*Deprecated v17.x.x utilizar --color*/
-
-  --color-menu-background-color-item-hover: var(--background-color-hover);
-  /*Deprecated v17.x.x utilizar --background-color-hover*/
-
-  --color-menu-background-color-item-selected: var(--background-color-actived);
-  /*Deprecated v17.x.x utilizar --background-color-actived*/
-
-  --color-menu-background-color-menu: var(--background-color);
-  /*Deprecated v17.x.x utilizar --background-color*/
-
-  --color-menu-background-color-menu-responsive-overlay: var(--color-neutral-dark-80);
-  /*Deprecated v17.x.x utilizar --color-neutral-dark-80*/
-
-  --color-menu-border-top-collapse-button: var(--border-color);
-  /*Deprecated v17.x.x utilizar --border-color*/
-}
-
 /*------------------------------------*\
   MENU FILTER
 \*------------------------------------*/
@@ -1074,21 +914,6 @@ po-menu-filter {
 }
 
 :root {
-  --color-menu-filter-color-icon: var(--color-icon-read);
-  /*Deprecated v17.x.x utilizar --color-icon-read*/
-
-  --color-menu-filter-color-text: var(--text-color);
-  /*Deprecated v17.x.x utilizar --text-color*/
-
-  --color-menu-filter-background-color: var(--background);
-  /*Deprecated v17.x.x utilizar --background*/
-
-  --color-menu-filter-border: var(--color);
-  /*Deprecated v17.x.x utilizar --color*/
-
-  --color-menu-filter-border-focusable: var(--color-focused);
-  /*Deprecated v17.x.x utilizar --color-focused*/
-
   /*------------------------------------*\
   MENU PANEL
 \*------------------------------------*/
@@ -1098,7 +923,7 @@ po-menu-filter {
 
   --color-menu-panel-border-top-logo: var(--color-neutral-light-20);
 
-  --color-menu-panel-color-menu-item-text: var(--color-primary);
+  --color-menu-panel-color-menu-item-text: var(--color-brand-02-base);
   --color-menu-panel-color-menu-item-selected: var(--color-neutral-dark-90);
 }
 
@@ -1117,14 +942,10 @@ po-modal {
 }
 
 :root {
-  --color-modal-background-color-content: var(--background); /*Deprecated v17.x.x utilizar --background*/
-  --color-modal-color-overlay: var(--color-overlay); /*Deprecated v17.x.x utilizar --color-overlay*/
-  --shadow-modal-content: var(--shadow); /*Deprecated v17.x.x utilizar --shadow*/
-
   /*------------------------------------*\
   MODAL PASSWORD RECOVERY
 \*------------------------------------*/
-  --color-modal-password-recovery-link-color: var(--color-primary);
+  --color-modal-password-recovery-link-color: var(--color-brand-02-base);
   --color-modal-password-recovery-link-color-hover: var(--color-primary-dark-20);
   --color-modal-password-recovery-text-color: var(--color-neutral-dark-70);
 }
@@ -1191,7 +1012,7 @@ po-page-header .po-page-header-subtitle {
   /*------------------------------------*\
   NAVBAR ACTION
 \*------------------------------------*/
-  --color-navbar-action-color-content: var(--color-primary);
+  --color-navbar-action-color-content: var(--color-brand-02-base);
 
   /*------------------------------------*\
   NAVBAR ACTION POPUP
@@ -1201,14 +1022,14 @@ po-page-header .po-page-header-subtitle {
   /*------------------------------------*\
   NAVBAR ITEM
 \*------------------------------------*/
-  --color-navbar-item-color: var(--color-primary);
+  --color-navbar-item-color: var(--color-brand-02-base);
   --color-navbar-item-color-selected: var(--color-neutral-dark-70);
   --color-navbar-item-color-shadow-selected: var(--color-feedback-negative-light);
 
   /*------------------------------------*\
   NAVBAR ITEM NAVIGATION
 \*------------------------------------*/
-  --color-navbar-item-navigation-color-icon: var(--color-primary);
+  --color-navbar-item-navigation-color-icon: var(--color-brand-02-base);
   --color-navbar-item-navigation-color-icon-disabled: var(--color-neutral-light-20);
 }
 /*------------------------------------*\
@@ -1233,7 +1054,7 @@ po-overlay {
   /*------------------------------------*\
   PAGE BLOCKED USER
 \*------------------------------------*/
-  --color-page-blocked-user-link-color: var(--color-primary);
+  --color-page-blocked-user-link-color: var(--color-brand-02-base);
   --color-page-blocked-user-link-color-hover: var(--color-primary-dark-20);
   --color-page-blocked-user-text-color: var(--color-neutral-dark-70);
   --color-page--blocked-user-background-color: var(--color-neutral-light-05);
@@ -1244,7 +1065,7 @@ po-overlay {
   --color-page-change-password-background-color-buttons: var(--color-neutral-light-05);
   --color-page-change-password-background-color-container: var(--color-neutral-light-00);
   --color-page-change-password-background-color-secondary-logo: var(--color-neutral-light-05);
-  --color-page-change-password-color-link: var(--color-primary);
+  --color-page-change-password-color-link: var(--color-brand-02-base);
   --color-page-change-password-color-text: var(--color-neutral-dark-70);
   --color-page-change-password-color-required: var(--color-neutral-dark-70);
   --color-page-change-password-color-required-ok: var(--color-success-default);
@@ -1254,18 +1075,12 @@ po-overlay {
   /*------------------------------------*\
   PAGE CONTENT
 \*------------------------------------*/
-  --color-page-content-background-color-scrollbar: var(--color-primary);
-
-  /*------------------------------------*\
-    PAGE HEADER
-  \*------------------------------------*/
-  --color-page-header-color-title: var(--color-neutral-dark-70);
-  /*Deprecated v18.x.x utilizar --text-color */
+  --color-page-content-background-color-scrollbar: var(--color-brand-02-base);
 
   /*------------------------------------*\
   PAGE LIST
 \*------------------------------------*/
-  --color-page-list-color-link-text: var(--color-primary);
+  --color-page-list-color-link-text: var(--color-brand-02-base);
 
   /*------------------------------------*\
   PAGE LOGIN
@@ -1275,12 +1090,12 @@ po-overlay {
   --color-page-login-background-color: var(--color-neutral-light-05);
   --color-page-login-background-highlight-image: var(--color-neutral-light-10);
   --color-page-login-highlight-text-color: var(--color-neutral-light-00);
-  --color-page-login-link-color: var(--color-primary);
+  --color-page-login-link-color: var(--color-brand-02-base);
   --color-page-login-link-hover-color: var(--color-primary-dark-20);
-  --color-page-login-popover-color-attempts: var(--color-primary);
+  --color-page-login-popover-color-attempts: var(--color-brand-02-base);
   --color-page-login-popover-color-title: var(--color-brand-03-base);
   --color-page-login-support-background-color: var(--color-neutral-light-00);
-  --color-page-login-support-color: var(--color-primary);
+  --color-page-login-support-color: var(--color-brand-02-base);
 }
 
 /*------------------------------------*\
@@ -1302,7 +1117,7 @@ po-page-slide {
 }
 
 :root {
-  --color-page-slide-close-button-color: var(--color-primary);
+  --color-page-slide-close-button-color: var(--color-brand-02-base);
   --color-page-slide-body-text-color: var(--color-neutral-dark-90);
 
   /*------------------------------------*\
@@ -1310,7 +1125,7 @@ po-page-slide {
 \*------------------------------------*/
   --color-popover-background-color: var(--color-neutral-light-00);
   --color-popover-background-color-arrow: var(--color-neutral-light-00);
-  --color-popover-background-color-scrollbar: var(--color-primary);
+  --color-popover-background-color-scrollbar: var(--color-brand-02-base);
 
   --color-popover-color-text-title: var(--color-neutral-dark-70);
 }
@@ -1352,28 +1167,6 @@ po-popup po-item-list {
   --background-selected: var(--color-brand-01-lightest);
 }
 
-:root {
-  --color-popup-background-color-popup: var(--background); /*Deprecated v17.x.x utilizar --background */
-  --color-popup-background-color-popup-item-hover: var(
-    --background-hover
-  ); /*Deprecated v17.x.x utilizar --background-hover */
-  --color-popup-background-color-popup-item-selected: var(
-    --background-selected
-  ); /* Deprecated v17.x.x utilizar --background-selected */
-
-  --color-popup-background-color-popup-item-selected-hover: var(
-    --background-hover
-  ); /* Deprecated v17.x.x utilizar --background-hover */
-
-  --color-popup-border-color-separator: var(
-    --color-neutral-light-10
-  ); /*Deprecated v17.x.x utilizar --color-neutral-light-10 */
-  --color-popup-color-danger: var(--color-feedback-negative-base); /*Deprecated v17.x.x utilizar --color-danger */
-  --color-popup-color-default: var(--color); /*Deprecated v17.x.x utilizar --color */
-  --color-popup-color-disabled: var(--color-disabled); /*Deprecated v17.x.x utilizar --color-disabled */
-  --color-popup-color-item-selected: var(--color-option); /*Deprecated v17.x.x utilizar --color-option */
-}
-
 po-progress {
   --font-family: var(--font-family-theme);
   --text-color: var(--color-neutral-dark-90);
@@ -1386,26 +1179,6 @@ po-progress-bar {
   --background-color-indicator: var(--color-action-default);
 }
 
-:root {
-  /*------------------------------------*\
-  PROGRESS
-  \*------------------------------------*/
-
-  --color-progress-color-text: var(--text-color); /*Deprecated v18.x.x utilizar --text-color */
-  --color-progress-color-text-error: var(--text-color-error); /*Deprecated v18.x.x utilizar --text-color-error */
-
-  /*------------------------------------*\
-  PROGRESS BAR
-  \*------------------------------------*/
-
-  --color-progress-bar-background-color-bar: var(
-    --background-color-tray
-  ); /*Deprecated v18.x.x utilizar --background-color-tray */
-  --color-progress-bar-background-color-default: var(
-    --background-color-indicator
-  ); /*Deprecated v18.x.x utilizar --background-color-indicator */
-}
-
 /*------------------------------------*\
   RADIO
 \*------------------------------------*/
@@ -1438,7 +1211,7 @@ po-radio {
   --color-rich-text-body-border-error: var(--color-feedback-negative-base);
 
   --color-rich-text-body-text-error: var(--color-feedback-negative-base);
-  --color-rich-text-body-text-link: var(--color-primary);
+  --color-rich-text-body-text-link: var(--color-brand-02-base);
   --color-rich-text-body-text-link-hover: var(--color-primary-dark-20);
   --color-rich-text-body-text-selected-color: var(--color-primary-light-80);
 
@@ -1511,11 +1284,11 @@ po-select {
   /*------------------------------------*\
   SLIDE
 \*------------------------------------*/
-  --color-slide-background-color-active-circle: var(--color-primary);
+  --color-slide-background-color-active-circle: var(--color-brand-02-base);
   --color-slide-background-color-arrow-circle: var(--color-neutral-light-00);
   --color-slide-background-color-circle: var(--color-neutral-light-20);
   --color-slide-background-color-scrollbar: var(--color-primary-alpha-50);
-  --color-slide-border-arrow: var(--color-primary);
+  --color-slide-border-arrow: var(--color-brand-02-base);
   --color-slide-box-shadow-arrow-circle: var(--color-black-alpha-15);
   --color-slide-box-shadow-wrapper: var(--color-black-alpha-30);
 
@@ -1524,8 +1297,8 @@ po-select {
 \*------------------------------------*/
   --color-stepper-bar: var(--color-neutral-dark-70);
   --color-stepper-bar-disabled: var(--color-neutral-mid-40);
-  --color-stepper-circle-active: var(--color-primary);
-  --color-stepper-circle-default: var(--color-primary);
+  --color-stepper-circle-active: var(--color-brand-02-base);
+  --color-stepper-circle-default: var(--color-brand-02-base);
   --color-stepper-circle-disabled: var(--color-neutral-light-30);
   --color-stepper-circle-error: var(--color-feedback-negative-base);
 }
@@ -1572,17 +1345,6 @@ po-tab-button {
   --background-item-disabled: var(--color-neutral-light-10);
 }
 
-:root {
-  /*------------------------------------*\
-  TAB BUTTON
-\*------------------------------------*/
-  --color-tab-button-box-shadow: var(--color-baseline); /*Deprecated v18.x.x utilizar --color-baseline */
-  --color-tab-button-box-shadow-active: var(--color); /*Deprecated v18.x.x utilizar --color */
-
-  --color-tab-button-color: var(--color); /*Deprecated v18.x.x utilizar --color */
-  --color-tab-button-color-disabled: var(--color-disabled); /*Deprecated v18.x.x utilizar --color-disabled */
-}
-
 /*------------------------------------*\
   TABLE
 \*------------------------------------*/
@@ -1614,66 +1376,6 @@ po-table {
 }
 
 :root {
-  --color-table-background-color-action-hover: var(--color-action-hover);
-  /*Deprecated v17.x.x utilizar --color-action-hover*/
-
-  --color-table-background-color-active: var(--background-color-actived);
-  /*Deprecated v17.x.x utilizar --background-color-actived*/
-
-  --color-table-background-color-header: var(--color-neutral-light-10);
-  /*Deprecated v17.x.x utilizar --color-neutral-light-10*/
-
-  --color-table-background-color-overlay: var(--color-secondary-dark-60-alpha-70);
-  /*Deprecated v17.x.x utilizar --color-secondary-dark-60-alpha-70*/
-
-  --color-table-background-color-overlay-content: var(--color-neutral-light-00);
-  /*Deprecated v17.x.x utilizar --color-neutral-light-00*/
-
-  --color-table-background-color-row-strip: var(--background-striped-color);
-  /*Deprecated v17.x.x utilizar --background-striped-color*/
-
-  --color-table-background-color-selected: var(--background-color-selected);
-  /*Deprecated v17.x.x utilizar --background-color-selected*/
-
-  --color-table-background-color-table: var(--color-neutral-light-00);
-  /*Deprecated v17.x.x utilizar --color-neutral-light-00*/
-
-  --color-table-border-rows: var(--color-line);
-  /*Deprecated v17.x.x utilizar --color-line*/
-
-  --color-table-color-footer-show-subtitle: var(--color-neutral-dark-95);
-  /*Deprecated v17.x.x utilizar --color-neutral-dark-95*/
-
-  --color-table-background-color-footer-show-subtitle: var(--color-neutral-light-00);
-  /*Deprecated v17.x.x utilizar --color-neutral-light-00*/
-
-  --color-table-border-footer-show-subtitle: var(--color-neutral-light-10);
-  /*Deprecated v17.x.x utilizar --color-neutral-light-10*/
-
-  --color-table-box-shadow-footer: var(--color-line);
-  /*Deprecated v17.x.x utilizar --color-line*/
-
-  --color-table-box-shadow-overlay-content: var(--color-black-alpha-30);
-  /*Deprecated v17.x.x utilizar --color-black-alpha-30*/
-
-  --color-table-color-actions: var(--color-action-default);
-  /*Deprecated v17.x.x utilizar --color-action-default*/
-
-  --color-table-color-header: var(--color);
-  /*Deprecated v17.x.x utilizar --color*/
-
-  --color-table-color-text: var(--color);
-  /*Deprecated v17.x.x utilizar --color*/
-
-  --color-table-color-disabled: var(--color-disabled);
-  /*Deprecated v17.x.x utilizar --color-disabled*/
-
-  --color-table-color-subtitle-text: var(--color-neutral-light-00);
-  /*Deprecated v17.x.x utilizar --color-neutral-light-00*/
-
-  --color-table-color-single-action-hover: var(--color-action-hover);
-  /*Deprecated v17.x.x utilizar --color-action-hover*/
-
   /*------------------------------------*\
   TABLE COLUMN LINK
 \*------------------------------------*/
@@ -1697,9 +1399,9 @@ po-table-list-manager {
   /*------------------------------------*\
   TABLE COLUMN MANAGER
 \*------------------------------------*/
-  --color-table-column-manager-body-color-background-scrollbar: var(--color-primary);
+  --color-table-column-manager-body-color-background-scrollbar: var(--color-brand-02-base);
   --color-table-column-manager-border-color: var(--color-neutral-light-10);
-  --color-table-column-manager-close-button-color: var(--color-primary);
+  --color-table-column-manager-close-button-color: var(--color-brand-02-base);
   --color-table-column-manager-header-title: var(--color-neutral-dark-90);
   --color-table-column-manager-outline-color-focus: var(--color-action-default);
 }
@@ -1807,7 +1509,7 @@ po-textarea {
   --color-toolbar-border-color-separator: var(--color-neutral-light-10);
 
   --color-toolbar-color-badge-text: var(--color-neutral-light-00);
-  --color-toolbar-color-default: var(--color-primary);
+  --color-toolbar-color-default: var(--color-brand-02-base);
   --color-toolbar-color-title: var(--color-action-default);
 }
 
@@ -1830,7 +1532,7 @@ po-textarea {
   --color-tree-view-item-border-bottom-color: var(--color-neutral-light-10);
 
   /** Tree View Item Header */
-  --color-tree-view-item-header-button-color: var(--color-primary);
+  --color-tree-view-item-header-button-color: var(--color-brand-02-base);
   --color-tree-view-item-header-button-focus: var(--color-action-default);
   --color-tree-view-item-header-label-text-color: var(--color-neutral-dark-70);
 
@@ -1861,14 +1563,14 @@ po-textarea {
   --color-upload-background-color-progress: var(--color-tertiary-light-90);
 
   --color-upload-drag-drop-overlay-icon: var(--color-primary-alpha-50);
-  --color-upload-drag-drop-overlay-text: var(--color-primary);
+  --color-upload-drag-drop-overlay-text: var(--color-brand-02-base);
   --color-upload-drag-drop-area-overlay-background-color: var(--color-neutral-light-00);
 
   --color-upload-drag-drop-area-icon: var(--color-neutral-light-20);
   --color-upload-drag-drop-area-label-text: var(--color-neutral-dark-70);
-  --color-upload-drag-drop-area-select-files-text: var(--color-primary);
+  --color-upload-drag-drop-area-select-files-text: var(--color-brand-02-base);
   --color-upload-drag-drop-area-border: var(--color-neutral-light-30);
-  --color-upload-drag-drop-area-border-primary: var(--color-primary);
+  --color-upload-drag-drop-area-border-primary: var(--color-brand-02-base);
   --color-upload-drag-drop-area-border-error: var(--color-feedback-negative-base);
 
   --color-upload-drag-drop-area-background-color-disabled: var(--color-neutral-light-10);
@@ -1901,9 +1603,9 @@ po-widget {
 :root {
   --color-widget-color-action-active: var(--color-primary-dark-20);
   --color-widget-color-action-hover: var(--color-primary-dark-20);
-  --color-widget-color-action: var(--color-primary);
+  --color-widget-color-action: var(--color-brand-02-base);
   --color-widget-color-default: var(--color-neutral-dark-70);
-  --color-widget-color-title-action: var(--color-primary);
+  --color-widget-color-title-action: var(--color-brand-02-base);
   --color-widget-color-widget-primary: var(--color-neutral-dark-90);
 
   --color-widget-primary-background-color: var(--color-brand-03-base);
@@ -1954,53 +1656,3 @@ po-toaster {
   --background-info: var(--color-feedback-info-lightest);
   --border-color-info: var(--color-feedback-info-lighter);
 }
-
-:root {
-  /**
-   * Toaster Item Success
-   */
-  --color-toaster-background-color-success: var(--background-success);
-  /*Deprecated v18.x.x utilizar --background-success*/
-  --color-toaster-border-color-success: var(--border-color-success);
-  /*Deprecated v18.x.x utilizar --border-color-success*/
-  --color-toaster-icon-background-color-success: var(--color-success);
-  /*Deprecated v18.x.x utilizar --color-success*/
-  --color-toaster-icon-color-success: var(--color-icon);
-  /*Deprecated v18.x.x utilizar --color-icon*/
-
-  /**
-   * Toaster Item Warning
-   */
-  --color-toaster-background-color-warning: var(--background-warning);
-  /*Deprecated v18.x.x utilizar --background-warning*/
-  --color-toaster-border-color-warning: var(--border-color-warning);
-  /*Deprecated v18.x.x utilizar --border-color-warning*/
-  --color-toaster-icon-background-color-warning: var(--color-warning);
-  /*Deprecated v18.x.x utilizar --color-warning*/
-  --color-toaster-icon-color-warning: var(--color-icon-warning);
-  /*Deprecated v18.x.x utilizar --color-icon-warning*/
-
-  /**
-   * Toaster Item Error
-   */
-  --color-toaster-background-color-error: var(--background-error);
-  /*Deprecated v18.x.x utilizar --background-error*/
-  --color-toaster-border-color-error: var(--border-color-error);
-  /*Deprecated v18.x.x utilizar --border-color-error*/
-  --color-toaster-icon-background-color-error: var(--color-error);
-  /*Deprecated v18.x.x utilizar --color-error*/
-  --color-toaster-icon-color-error: var(--color-icon);
-  /*Deprecated v18.x.x utilizar --color-icon*/
-
-  /**
-   * Toaster Item Info
-   */
-  --color-toaster-background-color-info: var(--background-info);
-  /*Deprecated v18.x.x utilizar --background-info*/
-  --color-toaster-border-color-info: var(--border-color-info);
-  /*Deprecated v18.x.x utilizar --border-color-info*/
-  --color-toaster-icon-background-color-info: var(--color-info);
-  /*Deprecated v18.x.x utilizar --color-info*/
-  --color-toaster-icon-color-info: var(--color-icon);
-  /*Deprecated v18.x.x utilizar --color-icon*/
-}