@progressio_resources/gravity-design-system 3.0.49 → 4.0.26

package/src/lib/styles/foundations/colors/themes/_hero.theme.scss

@@ -1,633 +1,622 @@
-@import "../primitives/hero.primitives";
+@use "../primitives/hero.primitives" as pr;
 
 // button-primary
-$on-bg-button-active-primary-light: $n900;
-$bg-button-active-primary-light: $b500;
-$on-bg-button-active-primary-dark: $n100;
-$bg-button-active-primary-dark: $b800;
-$on-bg-button-hover-primary-light: $n900;
-$bg-button-hover-primary-light: $b300;
-$on-bg-button-hover-primary-dark: $b200;
-$bg-button-hover-primary-dark: $b700;
-$on-bg-button-pressed-primary-light: $n900;
-$bg-button-pressed-primary-light: $b200;
-$on-bg-button-pressed-primary-dark: $b200;
-$bg-button-pressed-primary-dark: $b600;
+$on-bg-button-active-primary-light: pr.$n900;
+$bg-button-active-primary-light: pr.$b500;
+$on-bg-button-active-primary-dark: pr.$n100;
+$bg-button-active-primary-dark: pr.$b800;
+$on-bg-button-hover-primary-light: pr.$n900;
+$bg-button-hover-primary-light: pr.$b300;
+$on-bg-button-hover-primary-dark: pr.$b200;
+$bg-button-hover-primary-dark: pr.$b700;
+$on-bg-button-pressed-primary-light: pr.$n900;
+$bg-button-pressed-primary-light: pr.$b200;
+$on-bg-button-pressed-primary-dark: pr.$b200;
+$bg-button-pressed-primary-dark: pr.$b600;
 
 // button-secondary
-$on-bg-button-active-secondary-light: $b400;
-$outline-button-active-secondary-light: $b400;
-$bg-button-active-secondary-light: $n900;
-$on-bg-button-active-secondary-dark: $b700;
-$outline-button-active-secondary-dark: $b700;
-$bg-button-active-secondary-dark: $n100;
-$on-bg-button-hover-secondary-light: $b500;
-$outline-button-hover-secondary-light: $b500;
-$bg-button-hover-secondary-light: $n900;
-$on-bg-button-hover-secondary-dark: $b800;
-$outline-button-hover-secondary-dark: $b800;
-$bg-button-hover-secondary-dark: $n100;
-$on-bg-button-pressed-secondary-light: $b300;
-$outline-button-pressed-secondary-light: $b300;
-$bg-button-pressed-secondary-light: $n900;
-$on-bg-button-pressed-secondary-dark: $b600;
-$outline-button-pressed-secondary-dark: $b600;
-$bg-button-pressed-secondary-dark: $n100;
+$on-bg-button-active-secondary-light: pr.$b400;
+$outline-button-active-secondary-light: pr.$b400;
+$bg-button-active-secondary-light: pr.$n900;
+$on-bg-button-active-secondary-dark: pr.$b700;
+$outline-button-active-secondary-dark: pr.$b700;
+$bg-button-active-secondary-dark: pr.$n100;
+$on-bg-button-hover-secondary-light: pr.$b500;
+$outline-button-hover-secondary-light: pr.$b500;
+$bg-button-hover-secondary-light: pr.$n900;
+$on-bg-button-hover-secondary-dark: pr.$b800;
+$outline-button-hover-secondary-dark: pr.$b800;
+$bg-button-hover-secondary-dark: pr.$n100;
+$on-bg-button-pressed-secondary-light: pr.$b300;
+$outline-button-pressed-secondary-light: pr.$b300;
+$bg-button-pressed-secondary-light: pr.$n900;
+$on-bg-button-pressed-secondary-dark: pr.$b600;
+$outline-button-pressed-secondary-dark: pr.$b600;
+$bg-button-pressed-secondary-dark: pr.$n100;
 
 // button-tertiary
-$on-bg-button-active-tertiary-light: $b400;
-$bg-button-active-tertiary-light: $b800;
-$on-bg-button-active-tertiary-dark: $n900;
-$bg-button-active-tertiary-dark: $n400;
-$on-bg-button-hover-tertiary-light: $b400;
-$bg-button-hover-tertiary-light: $b700;
-$on-bg-button-hover-tertiary-dark: $n900;
-$bg-button-hover-tertiary-dark: $n500;
-$on-bg-button-pressed-tertiary-light: $b300;
-$bg-button-pressed-tertiary-light: $b600;
-$on-bg-button-pressed-tertiary-dark: $n900;
-$bg-button-pressed-tertiary-dark: $n200;
+$on-bg-button-active-tertiary-light: pr.$b400;
+$bg-button-active-tertiary-light: pr.$b800;
+$on-bg-button-active-tertiary-dark: pr.$n900;
+$bg-button-active-tertiary-dark: pr.$n400;
+$on-bg-button-hover-tertiary-light: pr.$b400;
+$bg-button-hover-tertiary-light: pr.$b700;
+$on-bg-button-hover-tertiary-dark: pr.$n900;
+$bg-button-hover-tertiary-dark: pr.$n500;
+$on-bg-button-pressed-tertiary-light: pr.$b300;
+$bg-button-pressed-tertiary-light: pr.$b600;
+$on-bg-button-pressed-tertiary-dark: pr.$n900;
+$bg-button-pressed-tertiary-dark: pr.$n200;
 
 // button-positive
-$on-bg-button-active-positive-light: $g100;
-$bg-button-active-positive-light: $g600;
-$on-bg-button-active-positive-dark: $g100;
-$bg-button-active-positive-dark: $g600;
-$on-bg-button-hover-positive-light: $g100;
-$bg-button-hover-positive-light: $g500;
-$on-bg-button-hover-positive-dark: $g100;
-$bg-button-hover-positive-dark: $g500;
-$on-bg-button-pressed-positive-light: $g100;
-$bg-button-pressed-positive-light: $g400;
-$on-bg-button-pressed-positive-dark: $g100;
-$bg-button-pressed-positive-dark: $g400;
+$on-bg-button-active-positive-light: pr.$g100;
+$bg-button-active-positive-light: pr.$g600;
+$on-bg-button-active-positive-dark: pr.$g100;
+$bg-button-active-positive-dark: pr.$g600;
+$on-bg-button-hover-positive-light: pr.$g100;
+$bg-button-hover-positive-light: pr.$g500;
+$on-bg-button-hover-positive-dark: pr.$g100;
+$bg-button-hover-positive-dark: pr.$g500;
+$on-bg-button-pressed-positive-light: pr.$g100;
+$bg-button-pressed-positive-light: pr.$g400;
+$on-bg-button-pressed-positive-dark: pr.$g100;
+$bg-button-pressed-positive-dark: pr.$g400;
 
 // button-negative
-$on-bg-button-active-negative-light: $r200;
-$bg-button-active-negative-light: $r700;
-$on-bg-button-active-negative-dark: $r300;
-$bg-button-active-negative-dark: $r700;
-$on-bg-button-hover-negative-light: $r200;
-$bg-button-hover-negative-light: $r600;
-$on-bg-button-hover-negative-dark: $r200;
-$bg-button-hover-negative-dark: $r600;
-$on-bg-button-pressed-negative-light: $r100;
-$bg-button-pressed-negative-light: $r500;
-$on-bg-button-pressed-negative-dark: $r100;
-$bg-button-pressed-negative-dark: $r500;
+$on-bg-button-active-negative-light: pr.$r200;
+$bg-button-active-negative-light: pr.$r700;
+$on-bg-button-active-negative-dark: pr.$r300;
+$bg-button-active-negative-dark: pr.$r700;
+$on-bg-button-hover-negative-light: pr.$r200;
+$bg-button-hover-negative-light: pr.$r600;
+$on-bg-button-hover-negative-dark: pr.$r200;
+$bg-button-hover-negative-dark: pr.$r600;
+$on-bg-button-pressed-negative-light: pr.$r100;
+$bg-button-pressed-negative-light: pr.$r500;
+$on-bg-button-pressed-negative-dark: pr.$r100;
+$bg-button-pressed-negative-dark: pr.$r500;
 
 // button-alternative
-$on-bg-button-active-alternative-light: $o200;
-$bg-button-active-alternative-light: $o400;
-$on-bg-button-active-alternative-dark: $o200;
-$bg-button-active-alternative-dark: $o400;
-$on-bg-button-hover-alternative-light: $o200;
-$bg-button-hover-alternative-light: $o500;
-$on-bg-button-hover-alternative-dark: $o200;
-$bg-button-hover-alternative-dark: $o500;
-$on-bg-button-pressed-alternative-light: $o100;
-$bg-button-pressed-alternative-light: $o300;
-$on-bg-button-pressed-alternative-dark: $o100;
-$bg-button-pressed-alternative-dark: $o300;
+$on-bg-button-active-alternative-light: pr.$o200;
+$bg-button-active-alternative-light: pr.$o400;
+$on-bg-button-active-alternative-dark: pr.$o200;
+$bg-button-active-alternative-dark: pr.$o400;
+$on-bg-button-hover-alternative-light: pr.$o200;
+$bg-button-hover-alternative-light: pr.$o500;
+$on-bg-button-hover-alternative-dark: pr.$o200;
+$bg-button-hover-alternative-dark: pr.$o500;
+$on-bg-button-pressed-alternative-light: pr.$o100;
+$bg-button-pressed-alternative-light: pr.$o300;
+$on-bg-button-pressed-alternative-dark: pr.$o100;
+$bg-button-pressed-alternative-dark: pr.$o300;
 
 // button-neutral
-$on-bg-button-active-neutro-light: $n400;
-$bg-button-active-neutro-light: $n800;
-$on-bg-button-active-neutro-dark: $n800;
-$bg-button-active-neutro-dark: $n200;
-$bg-neutro-dot-primary-light: $n600;
-$bg-neutro-dot-primary-dark: $n800;
+$on-bg-button-active-neutro-light: pr.$n400;
+$bg-button-active-neutro-light: pr.$n800;
+$on-bg-button-active-neutro-dark: pr.$n800;
+$bg-button-active-neutro-dark: pr.$n200;
+$bg-neutro-dot-primary-light: pr.$n600;
+$bg-neutro-dot-primary-dark: pr.$n800;
 
 // disabled-status
-$on-bg-disabled-light: $n600;
-$bg-disabled-light: $n800;
-$on-bg-disabled-dark: $n500;
-$bg-disabled-dark: $n200;
-$outline-disabled-light: $n600;
-$outline-disabled-dark: $n500;
+$on-bg-disabled-light: pr.$n600;
+$bg-disabled-light: pr.$n800;
+$on-bg-disabled-dark: pr.$n500;
+$bg-disabled-dark: pr.$n200;
+$outline-disabled-light: pr.$n600;
+$outline-disabled-dark: pr.$n500;
 
 // surface
-$surface-primary-light: $n800;
-$surface-secondary-light: $n900;
-$surface-tertiary-light: $n600;
-$surface-primary-dark: $n200;
-$surface-secondary-dark: $n100;
-$surface-tertiary-dark: $n100;
+$surface-primary-light: pr.$n800;
+$surface-secondary-light: pr.$n900;
+$surface-tertiary-light: pr.$n600;
+$surface-primary-dark: pr.$n200;
+$surface-secondary-dark: pr.$n100;
+$surface-tertiary-dark: pr.$n100;
 
 // text
-$text-primary-light: $n400;
-$text-primary-dark: $n800;
-$text-highlight-primary-light: $b500;
-$text-highlight-primary-dark: $n600;
+$text-primary-light: pr.$n400;
+$text-primary-dark: pr.$n800;
+$text-highlight-primary-light: pr.$b500;
+$text-highlight-primary-dark: pr.$n600;
 
 // divider
-$divider-primary-light: $n400;
-$divider-primary-dark: $n800;
+$divider-primary-light: pr.$n400;
+$divider-primary-dark: pr.$n800;
 
 // logo
-$logo-primary-light: $b400;
-$logo-primary-dark: $b700;
+$logo-primary-light: pr.$b400;
+$logo-primary-dark: pr.$b700;
 
 // highlight
-$on-bg-highlight-neutro-primary-light: $n400;
-$bg-highlight-neutro-primary-light: $n800;
-$on-bg-highlight-neutro-primary-dark: $n800;
-$bg-highlight-neutro-primary-dark: $n200;
-$on-bg-highlight-neutro-secondary-light: $n900;
-$bg-highlight-neutro-secondary-light: $n200;
-$on-bg-highlight-neutro-secondary-dark: $n100;
-$bg-highlight-neutro-secondary-dark: $n700;
+$on-bg-highlight-neutro-primary-light: pr.$n400;
+$bg-highlight-neutro-primary-light: pr.$n800;
+$on-bg-highlight-neutro-primary-dark: pr.$n800;
+$bg-highlight-neutro-primary-dark: pr.$n200;
+$on-bg-highlight-neutro-secondary-light: pr.$n900;
+$bg-highlight-neutro-secondary-light: pr.$n200;
+$on-bg-highlight-neutro-secondary-dark: pr.$n100;
+$bg-highlight-neutro-secondary-dark: pr.$n700;
 
 // system
-$positive-primary-light: $g300;
-$positive-primary-dark: $g500;
-$negative-primary-light: $r400;
-$negative-primary-dark: $r500;
-$alternative-primary-light: $o300;
-$alternative-primary-dark: $o400;
+$positive-primary-light: pr.$g300;
+$positive-primary-dark: pr.$g500;
+$negative-primary-light: pr.$r400;
+$negative-primary-dark: pr.$r500;
+$alternative-primary-light: pr.$o300;
+$alternative-primary-dark: pr.$o400;
 
 // calendar
-$on-bg-calendar-nav-primary-light: $n900;
-$on-bg-calendar-nav-primary-dark: $n100;
-$bg-calendar-nav-primary-light: $b400;
-$bg-calendar-nav-primary-dark: $b700;
-$on-bg-calender-primary-light: $n400;
-$on-bg-calender-primary-dark: $n800;
-$bg-calender-primary-light: $n900;
-$bg-calender-primary-dark: $n100;
-$arrow-calendar-active-primary-light: $n900;
-$arrow-calendar-active-primary-dark: $n100;
-$arrow-calendar-hover-primary-light: $n900;
-$arrow-calendar-hover-primary-dark: $n100;
-$bg-arrow-calendar-hover-primary-light: $b500;
-$bg-arrow-calendar-hover-primary-dark: $b800;
-$arrow-calendar-disabled-primary-light: $b500;
-$arrow-calendar-disabled-primary-dark: $b600;
-$number-calender-active-primary-light: $n400;
-$number-calender-active-primary-dark: $n800;
-$number-calendar-hover-primary-light: $n400;
-$number-calendar-hover-primary-dark: $n800;
-$bg-number-calendar-hover-primary-light: $b800;
-$bg-number-calendar-hover-primary-dark: $n400;
-$number-calendar-pressed-primary-light: $n900;
-$number-calendar-pressed-primary-dark: $n800;
-$bg-number-calendar-pressed-primary-light: $b300;
-$bg-number-calendar-pressed-primary-dark: $n100;
-$number-calendar-disabled-primary-light: $n700;
-$number-calendar-disabled-primary-dark: $n400;
+$on-bg-calendar-nav-primary-light: pr.$n900;
+$on-bg-calendar-nav-primary-dark: pr.$n100;
+$bg-calendar-nav-primary-light: pr.$b400;
+$bg-calendar-nav-primary-dark: pr.$b700;
+$on-bg-calender-primary-light: pr.$n400;
+$on-bg-calender-primary-dark: pr.$n800;
+$bg-calender-primary-light: pr.$n900;
+$bg-calender-primary-dark: pr.$n100;
+$arrow-calendar-active-primary-light: pr.$n900;
+$arrow-calendar-active-primary-dark: pr.$n100;
+$arrow-calendar-hover-primary-light: pr.$n900;
+$arrow-calendar-hover-primary-dark: pr.$n100;
+$bg-arrow-calendar-hover-primary-light: pr.$b500;
+$bg-arrow-calendar-hover-primary-dark: pr.$b800;
+$arrow-calendar-disabled-primary-light: pr.$b500;
+$arrow-calendar-disabled-primary-dark: pr.$b600;
+$number-calender-active-primary-light: pr.$n400;
+$number-calender-active-primary-dark: pr.$n800;
+$number-calendar-hover-primary-light: pr.$n400;
+$number-calendar-hover-primary-dark: pr.$n800;
+$bg-number-calendar-hover-primary-light: pr.$b800;
+$bg-number-calendar-hover-primary-dark: pr.$n400;
+$number-calendar-pressed-primary-light: pr.$n900;
+$number-calendar-pressed-primary-dark: pr.$n800;
+$bg-number-calendar-pressed-primary-light: pr.$b300;
+$bg-number-calendar-pressed-primary-dark: pr.$n100;
+$number-calendar-disabled-primary-light: pr.$n700;
+$number-calendar-disabled-primary-dark: pr.$n400;
 
 // checkbox
-$outline-checkbox-off-primary-light: $n400;
-$outline-checkbox-off-primary-dark: $n800;
-$on-bg-checkbox-on-primary-light: $n900;
-$on-bg-checkbox-on-primary-dark: $n100;
-$bg-checkbox-on-primary-light: $b400;
-$bg-checkbox-on-primary-dark: $b700;
+$outline-checkbox-off-primary-light: pr.$n400;
+$outline-checkbox-off-primary-dark: pr.$n800;
+$on-bg-checkbox-on-primary-light: pr.$n900;
+$on-bg-checkbox-on-primary-dark: pr.$n100;
+$bg-checkbox-on-primary-light: pr.$b400;
+$bg-checkbox-on-primary-dark: pr.$b700;
 
 // radio button
-$radio-button-off-primary-light: $n400;
-$radio-button-off-primary-dark: $n800;
-$radio-button-on-primary-light: $b400;
-$radio-button-on-primary-dark: $b700;
+$radio-button-off-primary-light: pr.$n400;
+$radio-button-off-primary-dark: pr.$n800;
+$radio-button-on-primary-light: pr.$b400;
+$radio-button-on-primary-dark: pr.$b700;
 
 // stepper
-$text-stepper-pending-primary-light: $n600;
-$line-stepper-pending-primary-light: $n800;
-$on-bg-stepper-pending-primary-light: $n600;
-$bg-stepper-pending-primary-light: $n800;
-$text-stepper-current-primary-light: $n500;
-$line-stepper-current-primary-light: $b400;
-$on-bg-stepper-current-primary-light: $n900;
-$bg-stepper-current-primary-light: $b400;
-$text-stepper-completed-primary-light: $n500;
-$line-stepper-completed-primary-light: $g500;
-$on-bg-stepper-completed-primary-light: $g100;
-$bg-stepper-completed-primary-light: $g500;
-$text-stepper-pending-primary-dark: $n400;
-$line-stepper-pending-primary-dark: $n400;
-$on-bg-stepper-pending-primary-dark: $n100;
-$bg-stepper-pending-primary-dark: $n400;
-$text-stepper-current-primary-dark: $n800;
-$line-stepper-current-primary-dark: $b700;
-$on-bg-stepper-current-primary-dark: $n100;
-$bg-stepper-current-primary-dark: $b700;
-$text-stepper-completed-primary-dark: $n800;
-$line-stepper-completed-primary-dark: $g500;
-$on-bg-stepper-completed-primary-dark: $g100;
-$bg-stepper-completed-primary-dark: $g500;
+$text-stepper-pending-primary-light: pr.$n600;
+$line-stepper-pending-primary-light: pr.$n800;
+$on-bg-stepper-pending-primary-light: pr.$n600;
+$bg-stepper-pending-primary-light: pr.$n800;
+$text-stepper-current-primary-light: pr.$n500;
+$line-stepper-current-primary-light: pr.$b400;
+$on-bg-stepper-current-primary-light: pr.$n900;
+$bg-stepper-current-primary-light: pr.$b400;
+$text-stepper-completed-primary-light: pr.$n500;
+$line-stepper-completed-primary-light: pr.$g500;
+$on-bg-stepper-completed-primary-light: pr.$g100;
+$bg-stepper-completed-primary-light: pr.$g500;
+$text-stepper-pending-primary-dark: pr.$n400;
+$line-stepper-pending-primary-dark: pr.$n400;
+$on-bg-stepper-pending-primary-dark: pr.$n100;
+$bg-stepper-pending-primary-dark: pr.$n400;
+$text-stepper-current-primary-dark: pr.$n800;
+$line-stepper-current-primary-dark: pr.$b700;
+$on-bg-stepper-current-primary-dark: pr.$n100;
+$bg-stepper-current-primary-dark: pr.$b700;
+$text-stepper-completed-primary-dark: pr.$n800;
+$line-stepper-completed-primary-dark: pr.$g500;
+$on-bg-stepper-completed-primary-dark: pr.$g100;
+$bg-stepper-completed-primary-dark: pr.$g500;
 
 // table
-$on-bg-table-header-primary-light: $n400;
-$bg-table-header-primary-light: $n900;
-$on-bg-table-active-primary-light: $n400;
-$bg-table-active-primary-light: $n900;
-$on-bg-table-hover-primary-light: $n400;
-$bg-table-hover-primary-light: $n800;
-$on-bg-table-header-secondary-light: $n400;
-$bg-table-header-secondary-light: $n700;
-$on-bg-table-header-primary-dark: $n800;
-$bg-table-header-primary-dark: $n100;
-$on-bg-table-active-primary-dark: $n800;
-$bg-table-active-primary-dark: $n100;
-$on-bg-table-hover-primary-dark: $n800;
-$bg-table-hover-primary-dark: $n200;
-$on-bg-table-header-secondary-dark: $n900;
-$bg-table-header-secondary-dark: $n400;
+$on-bg-table-header-primary-light: pr.$n400;
+$bg-table-header-primary-light: pr.$n900;
+$on-bg-table-active-primary-light: pr.$n400;
+$bg-table-active-primary-light: pr.$n900;
+$on-bg-table-hover-primary-light: pr.$n400;
+$bg-table-hover-primary-light: pr.$n800;
+$on-bg-table-header-secondary-light: pr.$n400;
+$bg-table-header-secondary-light: pr.$n700;
+$on-bg-table-header-primary-dark: pr.$n800;
+$bg-table-header-primary-dark: pr.$n100;
+$on-bg-table-active-primary-dark: pr.$n800;
+$bg-table-active-primary-dark: pr.$n100;
+$on-bg-table-hover-primary-dark: pr.$n800;
+$bg-table-hover-primary-dark: pr.$n200;
+$on-bg-table-header-secondary-dark: pr.$n900;
+$bg-table-header-secondary-dark: pr.$n400;
 
 // tooltip
-$on-bg-tooltip-primary-light: $n400;
-$bg-tooltip-primary-light: $n900;
-$on-bg-tooltip-primary-dark: $n900;
-$bg-tooltip-primary-dark: $n400;
+$on-bg-tooltip-primary-light: pr.$n800;
+$bg-tooltip-primary-light: pr.$n400;
+$on-bg-tooltip-primary-dark: pr.$n900;
+$bg-tooltip-primary-dark: pr.$n400;
 
 // text-field
-$bg-field-empty-enabled-primary-light: $n900;
-$outline-field-empty-enabled-primary-light: $n400;
-$placeholder-empty-enabled-primary-light: $n600;
-$label-text-empty-enabled-primary-light: $n400;
-$bg-field-empty-enabled-hover-primary-light: $n800;
-$bg-field-full-enabled-pressed-primary-light: $n900;
-$placeholder-full-enabled-pressed-primary-light: $n400;
-$label-text-full-enabled-pressed-primary-light: $n400;
-$outline-field-full-enabled-pressed-primary-light: $b400;
-$bg-field-empty-disabled-primary-light: $n800;
-$placeholder-empty-disabled-primary-light: $n700;
-$label-text-empty-disabled-primary-light: $n700;
-$bg-field-full-enabled-primary-light: $n900;
-$outline-field-full-enabled-primary-light: $n400;
-$input-text-full-enabled-primary-light: $n400;
-$label-text-full-enabled-primary-light: $n400;
-$bg-field-full-enabled-hover-primary-light: $n800;
-$bg-field-full-disabled-primary-light: $n800;
-$input-text-full-disabled-primary-light: $n700;
-$label-text-full-disabled-primary-light: $n700;
-$bg-field-full-read-only-primary-light: $n800;
-$input-text-full-read-only-primary-light: $n400;
-$label-text-full-read-only-primary-light: $n400;
-$bg-field-empty-enabled-primary-dark: $n100;
-$outline-field-empty-enabled-primary-dark: $n800;
-$placeholder-empty-enabled-primary-dark: $n600;
-$label-text-empty-enabled-primary-dark: $n800;
-$bg-field-empty-enabled-hover-primary-dark: $n200;
-$bg-field-empty-disabled-primary-dark: $n200;
-$placeholder-empty-disabled-primary-dark: $n300;
-$label-text-empty-disabled-primary-dark: $n300;
-$bg-field-full-enabled-pressed-primary-dark: $n100;
-$outline-field-full-enabled-pressed-primary-dark: $b700;
-$placeholder-full-enabled-pressed-primary-dark: $n800;
-$label-text-full-enabled-pressed-primary-dark: $n800;
-$bg-field-full-enabled-primary-dark: $n100;
-$outline-field-full-enabled-primary-dark: $n800;
-$input-text-full-enabled-primary-dark: $n800;
-$label-text-full-enabled-primary-dark: $n800;
-$bg-field-full-enabled-hover-primary-dark: $n200;
-$bg-field-full-disabled-primary-dark: $n200;
-$input-text-full-disabled-primary-dark: $n300;
-$label-text-full-disabled-primary-dark: $n300;
-$bg-field-full-read-only-primary-dark: $n300;
-$input-text-full-read-only-primary-dark: $n800;
-$label-text-full-read-only-primary-dark: $n800;
-$outline-field-full-enabled-typing-primary-light: $b400;
-$outline-field-full-enabled-typing-primary-dark: $b700;
-$outline-field-full-enabled-typed-primary-light: $n400;
-$outline-field-full-enabled-typed-primary-dark: $n800;
-$bg-field-autofill-light: $b800;
-$bg-field-autofill-dark: $n400;
-$placeholder-empty-enabled-primary-light: $n600;
-$placeholder-empty-enabled-primary-dark: $n600;
-$line-empty-enabled-primary-light: $n400;
-$line-empty-enabled-primary-dark: $n800;
-$equivalence-text-empty-enabled-primary-light: $n700;
-$equivalence-text-empty-enabled-primary-dark: $n300;
-$outline-field-empty-enabled-hover-primary-light: $n800;
-$outline-field-empty-enabled-hover-primary-dark: $n200;
-$equivalence-text-full-enabled-typing-primary-light: $n400;
-$equivalence-text-full-enabled-typing-primary-dark: $n800;
-$line-full-enabled-typing-primary-light: $b500;
-$line-full-enabled-typing-primary-dark: $b800;
-$label-full-enabled-typing-primary-light: $n400;
-$label-full-enabled-typing-primary-dark: $n800;
-$equivalence-text-empty-disabled-primary-light: $n700;
-$equivalence-text-empty-disabled-primary-dark: $n300;
-$line-empty-disabled-primary-light: $n700;
-$line-empty-disabled-primary-dark: $n300;
-$placeholder-empty-disabled-primary-light: $n700;
-$placeholder-empty-disabled-primary-dark: $n300;
+$bg-field-empty-enabled-primary-light: pr.$n900;
+$outline-field-empty-enabled-primary-light: pr.$n400;
+$placeholder-empty-enabled-primary-light: pr.$n600;
+$label-text-empty-enabled-primary-light: pr.$n400;
+$bg-field-empty-enabled-hover-primary-light: pr.$n800;
+$bg-field-full-enabled-pressed-primary-light: pr.$n900;
+$placeholder-full-enabled-pressed-primary-light: pr.$n400;
+$label-text-full-enabled-pressed-primary-light: pr.$n400;
+$outline-field-full-enabled-pressed-primary-light: pr.$b400;
+$bg-field-empty-disabled-primary-light: pr.$n800;
+$placeholder-empty-disabled-primary-light: pr.$n700;
+$label-text-empty-disabled-primary-light: pr.$n700;
+$bg-field-full-enabled-primary-light: pr.$n900;
+$outline-field-full-enabled-primary-light: pr.$n400;
+$input-text-full-enabled-primary-light: pr.$n400;
+$label-text-full-enabled-primary-light: pr.$n400;
+$bg-field-full-enabled-hover-primary-light: pr.$n800;
+$bg-field-full-disabled-primary-light: pr.$n800;
+$input-text-full-disabled-primary-light: pr.$n700;
+$label-text-full-disabled-primary-light: pr.$n700;
+$bg-field-full-read-only-primary-light: pr.$n800;
+$input-text-full-read-only-primary-light: pr.$n400;
+$label-text-full-read-only-primary-light: pr.$n400;
+$bg-field-empty-enabled-primary-dark: pr.$n100;
+$outline-field-empty-enabled-primary-dark: pr.$n800;
+$placeholder-empty-enabled-primary-dark: pr.$n600;
+$label-text-empty-enabled-primary-dark: pr.$n800;
+$bg-field-empty-enabled-hover-primary-dark: pr.$n200;
+$bg-field-empty-disabled-primary-dark: pr.$n200;
+$placeholder-empty-disabled-primary-dark: pr.$n300;
+$label-text-empty-disabled-primary-dark: pr.$n300;
+$bg-field-full-enabled-pressed-primary-dark: pr.$n100;
+$outline-field-full-enabled-pressed-primary-dark: pr.$b700;
+$placeholder-full-enabled-pressed-primary-dark: pr.$n800;
+$label-text-full-enabled-pressed-primary-dark: pr.$n800;
+$bg-field-full-enabled-primary-dark: pr.$n100;
+$outline-field-full-enabled-primary-dark: pr.$n800;
+$input-text-full-enabled-primary-dark: pr.$n800;
+$label-text-full-enabled-primary-dark: pr.$n800;
+$bg-field-full-enabled-hover-primary-dark: pr.$n200;
+$bg-field-full-disabled-primary-dark: pr.$n200;
+$input-text-full-disabled-primary-dark: pr.$n300;
+$label-text-full-disabled-primary-dark: pr.$n300;
+$bg-field-full-read-only-primary-dark: pr.$n300;
+$input-text-full-read-only-primary-dark: pr.$n800;
+$label-text-full-read-only-primary-dark: pr.$n800;
+$outline-field-full-enabled-typing-primary-light: pr.$b400;
+$outline-field-full-enabled-typing-primary-dark: pr.$b700;
+$outline-field-full-enabled-typed-primary-light: pr.$n400;
+$outline-field-full-enabled-typed-primary-dark: pr.$n800;
+$bg-field-autofill-light: pr.$b800;
+$bg-field-autofill-dark: pr.$n400;
+$placeholder-empty-enabled-primary-light: pr.$n600;
+$placeholder-empty-enabled-primary-dark: pr.$n600;
+$line-empty-enabled-primary-light: pr.$n400;
+$line-empty-enabled-primary-dark: pr.$n800;
+$equivalence-text-empty-enabled-primary-light: pr.$n700;
+$equivalence-text-empty-enabled-primary-dark: pr.$n300;
+$outline-field-empty-enabled-hover-primary-light: pr.$n800;
+$outline-field-empty-enabled-hover-primary-dark: pr.$n200;
+$equivalence-text-full-enabled-typing-primary-light: pr.$n400;
+$equivalence-text-full-enabled-typing-primary-dark: pr.$n800;
+$line-full-enabled-typing-primary-light: pr.$b500;
+$line-full-enabled-typing-primary-dark: pr.$b800;
+$label-full-enabled-typing-primary-light: pr.$n400;
+$label-full-enabled-typing-primary-dark: pr.$n800;
+$equivalence-text-empty-disabled-primary-light: pr.$n700;
+$equivalence-text-empty-disabled-primary-dark: pr.$n300;
+$line-empty-disabled-primary-light: pr.$n700;
+$line-empty-disabled-primary-dark: pr.$n300;
+$placeholder-empty-disabled-primary-light: pr.$n700;
+$placeholder-empty-disabled-primary-dark: pr.$n300;
 
 // icon
-$icon-active-primary-light: $n400;
-$icon-hover-primary-light: $b400;
-$icon-active-primary-dark: $n800;
-$icon-hover-primary-dark: $b700;
+$icon-active-primary-light: pr.$n400;
+$icon-hover-primary-light: pr.$b400;
+$icon-active-primary-dark: pr.$n800;
+$icon-hover-primary-dark: pr.$b700;
 
 // dropdown-list
-$bg-dropdown-list-primary-light: $n900;
-$outline-dropdown-list-primary-light: $n400;
-$on-bg-dropdown-item-active-primary-light: $n400;
-$on-bg-dropdown-item-hover-primary-light: $n400;
-$bg-dropdown-item-hover-primary-light: $b700;
-$on-bg-dropdown-item-pressed-primary-light: $n200;
-$on-bg-dropdown-item-disabled-primary-light: $n700;
-$outline-dropdown-list-primary-dark: $n800;
-$bg-dropdown-list-primary-dark: $n100;
-$on-bg-dropdown-item-active-primary-dark: $n800;
-$on-bg-dropdown-item-hover-primary-dark: $n800;
-$bg-dropdown-item-hover-primary-dark: $n300;
-$on-bg-dropdown-item-pressed-primary-dark: $n900;
-$on-bg-dropdown-item-disabled-primary-dark: $n300;
+$bg-dropdown-list-primary-light: pr.$n900;
+$outline-dropdown-list-primary-light: pr.$n400;
+$on-bg-dropdown-item-active-primary-light: pr.$n400;
+$on-bg-dropdown-item-hover-primary-light: pr.$n400;
+$bg-dropdown-item-hover-primary-light: pr.$b700;
+$on-bg-dropdown-item-pressed-primary-light: pr.$n200;
+$on-bg-dropdown-item-disabled-primary-light: pr.$n700;
+$outline-dropdown-list-primary-dark: pr.$n800;
+$bg-dropdown-list-primary-dark: pr.$n100;
+$on-bg-dropdown-item-active-primary-dark: pr.$n800;
+$on-bg-dropdown-item-hover-primary-dark: pr.$n800;
+$bg-dropdown-item-hover-primary-dark: pr.$n300;
+$on-bg-dropdown-item-pressed-primary-dark: pr.$n900;
+$on-bg-dropdown-item-disabled-primary-dark: pr.$n300;
 
 // dropdown-list-display-currency
-$bg-dropdown-list-dc-primary-light: $n800;
-$outline-dropdown-list-dc-primary-light: $n800;
-$bg-dropdown-list-dc-primary-dark: $n200;
-$outline-dropdown-list-dc-primary-dark: $n200;
+$bg-dropdown-list-dc-primary-light: pr.$n800;
+$outline-dropdown-list-dc-primary-light: pr.$n800;
+$bg-dropdown-list-dc-primary-dark: pr.$n200;
+$outline-dropdown-list-dc-primary-dark: pr.$n200;
 
 // loading
-$loading-primary-light: $b400;
-$loading-primary-dark: $b700;
+$loading-primary-light: pr.$b400;
+$loading-primary-dark: pr.$b700;
 
 // switch
-$on-bg-switch-on-primary-light: $n900;
-$bg-switch-on-primary-light: $b400;
-$on-bg-switch-on-primary-dark: $n200;
-$bg-switch-on-primary-dark: $b700;
-$on-bg-switch-off-primary-light: $n900;
-$bg-switch-off-primary-light: $n600;
-$on-bg-switch-off-primary-dark: $n200;
-$bg-switch-off-primary-dark: $n500;
-$on-bg-switch-disabled-primary-light: $n700;
-$bg-switch-disabled-primary-light: $n700;
-$on-bg-switch-disabled-primary-dark: $n400;
-$bg-switch-disabled-primary-dark: $n400;
+$on-bg-switch-on-primary-light: pr.$n900;
+$bg-switch-on-primary-light: pr.$b400;
+$on-bg-switch-on-primary-dark: pr.$n200;
+$bg-switch-on-primary-dark: pr.$b700;
+$on-bg-switch-off-primary-light: pr.$n900;
+$bg-switch-off-primary-light: pr.$n600;
+$on-bg-switch-off-primary-dark: pr.$n200;
+$bg-switch-off-primary-dark: pr.$n500;
+$on-bg-switch-disabled-primary-light: pr.$n700;
+$bg-switch-disabled-primary-light: pr.$n700;
+$on-bg-switch-disabled-primary-dark: pr.$n400;
+$bg-switch-disabled-primary-dark: pr.$n400;
 
 // notification
-$on-bg-notification-primary-light: $n400;
-$bg-notification-primary-light: $n900;
-$on-bg-icon-notification-error-primary-light: $r200;
-$bg-icon-notification-error-primary-light: $r600;
-$notification-error-highlight-primary-light: $r400;
-$on-bg-icon-notification-success-primary-light: $g100;
-$bg-icon-notification-success-primary-light: $g500;
-$notification-success-highlight-primary-light: $g300;
-$on-bg-icon-notification-warning-primary-light: $o200;
-$bg-icon-notification-warning-primary-light: $o400;
-$notification-warning-highlight-primary-light: $o300;
-$on-bg-notification-primary-dark: $n800;
-$bg-notification-primary-dark: $n200;
-$on-bg-icon-notification-error-primary-dark: $r200;
-$bg-icon-notification-error-primary-dark: $r600;
-$notification-error-highlight-primary-dark: $r600;
-$on-bg-icon-notification-success-primary-dark: $g100;
-$bg-icon-notification-success-primary-dark: $g500;
-$notification-success-highlight-primary-dark: $g500;
-$on-bg-icon-notification-warning-primary-dark: $o200;
-$bg-icon-notification-warning-primary-dark: $o400;
-$notification-warning-highlight-primary-dark: $o400;
-$bg-notification-list-primary-light: $n400;
-$bg-notification-list-primary-dark: $n800;
-$on-bg-notification-list-primary-light: $n900;
-$on-bg-notification-list-primary-dark: $n100;
+$on-bg-notification-primary-light: pr.$n400;
+$bg-notification-primary-light: pr.$n900;
+$on-bg-icon-notification-error-primary-light: pr.$r200;
+$bg-icon-notification-error-primary-light: pr.$r600;
+$notification-error-highlight-primary-light: pr.$r400;
+$on-bg-icon-notification-success-primary-light: pr.$g100;
+$bg-icon-notification-success-primary-light: pr.$g500;
+$notification-success-highlight-primary-light: pr.$g300;
+$on-bg-icon-notification-warning-primary-light: pr.$o200;
+$bg-icon-notification-warning-primary-light: pr.$o400;
+$notification-warning-highlight-primary-light: pr.$o300;
+$on-bg-notification-primary-dark: pr.$n800;
+$bg-notification-primary-dark: pr.$n200;
+$on-bg-icon-notification-error-primary-dark: pr.$r200;
+$bg-icon-notification-error-primary-dark: pr.$r600;
+$notification-error-highlight-primary-dark: pr.$r600;
+$on-bg-icon-notification-success-primary-dark: pr.$g100;
+$bg-icon-notification-success-primary-dark: pr.$g500;
+$notification-success-highlight-primary-dark: pr.$g500;
+$on-bg-icon-notification-warning-primary-dark: pr.$o200;
+$bg-icon-notification-warning-primary-dark: pr.$o400;
+$notification-warning-highlight-primary-dark: pr.$o400;
+$bg-notification-list-primary-light: pr.$n400;
+$bg-notification-list-primary-dark: pr.$n800;
+$on-bg-notification-list-primary-light: pr.$n900;
+$on-bg-notification-list-primary-dark: pr.$n100;
 
 // dialog
-$bg-dialog-primary-light: $n900;
-$on-bg-dialog-header-primary-light: $n300;
-$bg-dialog-header-primary-light: $n800;
-$close-dialog-header-active-primary-light: $b400;
-$close-dialog-header-hover-primary-light: $b400;
-$bg-close-dialog-header-hover-primary-light: $n900;
-$on-bg-icon-dialog-primary-light: $n900;
-$bg-icon-dialog-primary-light: $n300;
-$bg-dialog-primary-dark: $n100;
-$on-bg-dialog-header-primary-dark: $n800;
-$bg-dialog-header-primary-dark: $n200;
-$close-dialog-header-active-primary-dark: $b700;
-$close-dialog-header-hover-primary-dark: $b700;
-$bg-close-dialog-header-hover-primary-dark: $n100;
-$on-bg-icon-dialog-primary-dark: $n300;
-$bg-icon-dialog-primary-dark: $n800;
+$bg-dialog-primary-light: pr.$n900;
+$on-bg-dialog-header-primary-light: pr.$n300;
+$bg-dialog-header-primary-light: pr.$n800;
+$close-dialog-header-active-primary-light: pr.$b400;
+$close-dialog-header-hover-primary-light: pr.$b400;
+$bg-close-dialog-header-hover-primary-light: pr.$n900;
+$on-bg-icon-dialog-primary-light: pr.$n900;
+$bg-icon-dialog-primary-light: pr.$n300;
+$bg-dialog-primary-dark: pr.$n100;
+$on-bg-dialog-header-primary-dark: pr.$n800;
+$bg-dialog-header-primary-dark: pr.$n200;
+$close-dialog-header-active-primary-dark: pr.$b700;
+$close-dialog-header-hover-primary-dark: pr.$b700;
+$bg-close-dialog-header-hover-primary-dark: pr.$n100;
+$on-bg-icon-dialog-primary-dark: pr.$n300;
+$bg-icon-dialog-primary-dark: pr.$n800;
 
 // link
-$link-active-primary-light: $b500;
-$link-hover-primary-light: $b800;
-$bg-link-hover-primary-light: $b400;
-$link-disabled-primary-light: $n600;
-$link-visited-primary-light: $b200;
-$link-active-primary-dark: $b800;
-$link-hover-primary-dark: $n300;
-$bg-link-hover-primary-dark: $n700;
-$link-disabled-primary-dark: $n500;
-$link-visited-primary-dark: $n900;
+$link-active-primary-light: pr.$b500;
+$link-hover-primary-light: pr.$b800;
+$bg-link-hover-primary-light: pr.$b400;
+$link-disabled-primary-light: pr.$n600;
+$link-visited-primary-light: pr.$b200;
+$link-active-primary-dark: pr.$b800;
+$link-hover-primary-dark: pr.$n300;
+$bg-link-hover-primary-dark: pr.$n700;
+$link-disabled-primary-dark: pr.$n500;
+$link-visited-primary-dark: pr.$n900;
 
 // menu
-$divider-menu-active-primary-light: $n800;
-$divider-menu-pressed-primary-light: $b700;
-$bg-menu-active-primary-light: $n900;
-$on-bg-menu-primary-light: $n400;
-$on-bg-menu-button-active-primary-light: $n400;
-$on-bg-menu-button-hover-primary-light: $n400;
-$bg-menu-button-hover-primary-light: $n800;
-$on-bg-menu-button-disabled-primary-light: $n700;
-$on-bg-menu-button-pressed-primary-light: $n400;
-$bg-menu-button-pressed-primary-light: $b700;
-$divider-menu-primary-dark: $n200;
-$bg-menu-primary-dark: $n100;
-$on-bg-menu-primary-dark: $n800;
-$on-bg-menu-button-active-primary-dark: $n800;
-$on-bg-menu-button-hover-primary-dark: $n800;
-$bg-menu-button-hover-primary-dark: $n200;
-$on-bg-menu-button-disabled-primary-dark: $n300;
-$on-bg-menu-button-pressed-primary-dark: $n900;
-$bg-menu-button-pressed-primary-dark: $n400;
-$divider-menu-pressed-primary-dark: $n400;
-$bg-menu-mobile-primary-light: $n800;
-$bg-menu-mobile-primary-dark: $n200;
-$bg-menu-mobile-card-primary-light: $n900;
-$bg-menu-mobile-card-primary-dark: $n100;
-$bg-menu-mobile-button-pressed-primary-light: $n800;
-$bg-menu-mobile-button-pressed-primary-dark: $n200;
-$on-bg-menu-button-active-secondary-light: $n400;
-$on-bg-menu-button-active-secondary-dark: $n800;
-$bg-menu-button-active-secondary-light: $n900;
-$bg-menu-button-active-secondary-dark: $n100;
+$divider-menu-active-primary-light: pr.$n800;
+$divider-menu-pressed-primary-light: pr.$b700;
+$bg-menu-active-primary-light: pr.$n900;
+$on-bg-menu-primary-light: pr.$n400;
+$on-bg-menu-button-active-primary-light: pr.$n400;
+$on-bg-menu-button-hover-primary-light: pr.$n400;
+$bg-menu-button-hover-primary-light: pr.$n800;
+$on-bg-menu-button-disabled-primary-light: pr.$n700;
+$on-bg-menu-button-pressed-primary-light: pr.$n400;
+$bg-menu-button-pressed-primary-light: pr.$b700;
+$divider-menu-primary-dark: pr.$n200;
+$bg-menu-primary-dark: pr.$n100;
+$on-bg-menu-primary-dark: pr.$n800;
+$on-bg-menu-button-active-primary-dark: pr.$n800;
+$on-bg-menu-button-hover-primary-dark: pr.$n800;
+$bg-menu-button-hover-primary-dark: pr.$n200;
+$on-bg-menu-button-disabled-primary-dark: pr.$n300;
+$on-bg-menu-button-pressed-primary-dark: pr.$n900;
+$bg-menu-button-pressed-primary-dark: pr.$n400;
+$divider-menu-pressed-primary-dark: pr.$n400;
+$bg-menu-mobile-primary-light: pr.$n800;
+$bg-menu-mobile-primary-dark: pr.$n200;
+$bg-menu-mobile-card-primary-light: pr.$n900;
+$bg-menu-mobile-card-primary-dark: pr.$n100;
+$bg-menu-mobile-button-pressed-primary-light: pr.$n800;
+$bg-menu-mobile-button-pressed-primary-dark: pr.$n200;
+$on-bg-menu-button-active-secondary-light: pr.$n400;
+$on-bg-menu-button-active-secondary-dark: pr.$n800;
+$bg-menu-button-active-secondary-light: pr.$n900;
+$bg-menu-button-active-secondary-dark: pr.$n100;
 
 // shadow
-$shadow-primary-dark: $n0;
-$shadow-primary-light: $n100;
+$shadow-primary-dark: pr.$n0;
+$shadow-primary-light: pr.$n100;
 
 // Back-button
-$back-button-active-primary-light: $b500;
-$back-button-active-primary-dark: $b800;
-$on-bg-back-button-hover-primary-light: $b300;
-$bg-back-button-hover-primary-light: $n800;
-$on-bg-back-button-hover-primary-dark: $b700;
-$bg-back-button-hover-primary-dark: $n200;
-$back-button-pressed-primary-light: $b200;
-$back-button-pressed-primary-dark: $b600;
-$back-button-disabled-primary-light: $n700;
-$back-button-disabled-primary-dark: $n400;
+$back-button-active-primary-light: pr.$b500;
+$back-button-active-primary-dark: pr.$b800;
+$on-bg-back-button-hover-primary-light: pr.$b300;
+$bg-back-button-hover-primary-light: pr.$n800;
+$on-bg-back-button-hover-primary-dark: pr.$b700;
+$bg-back-button-hover-primary-dark: pr.$n200;
+$back-button-pressed-primary-light: pr.$b200;
+$back-button-pressed-primary-dark: pr.$b600;
+$back-button-disabled-primary-light: pr.$n700;
+$back-button-disabled-primary-dark: pr.$n400;
 
 // Breadcrumb-button
-$breadcrumb-button-active-primary-light: $b500;
-$breadcrumb-button-active-primary-dark: $b800;
-$on-bg-breadcrumb-button-hover-primary-light: $b300;
-$bg-breadcrumb-button-hover-primary-light: $n800;
-$on-bg-breadcrumb-button-hover-primary-dark: $b700;
-$bg-breadcrumb-button-hover-primary-dark: $n200;
-$breadcrumb-button-pressed-primary-light: $b200;
-$breadcrumb-button-pressed-primary-dark: $b600;
-$breadcrumb-button-disabled-primary-light: $n700;
-$breadcrumb-button-disabled-primary-dark: $n400;
-$breadcrumb-button-base-primary-light: $n600;
-$breadcrumb-button-base-primary-dark: $n600;
+$breadcrumb-button-active-primary-light: pr.$b500;
+$breadcrumb-button-active-primary-dark: pr.$b800;
+$on-bg-breadcrumb-button-hover-primary-light: pr.$b300;
+$bg-breadcrumb-button-hover-primary-light: pr.$n800;
+$on-bg-breadcrumb-button-hover-primary-dark: pr.$b700;
+$bg-breadcrumb-button-hover-primary-dark: pr.$n200;
+$breadcrumb-button-pressed-primary-light: pr.$b200;
+$breadcrumb-button-pressed-primary-dark: pr.$b600;
+$breadcrumb-button-disabled-primary-light: pr.$n700;
+$breadcrumb-button-disabled-primary-dark: pr.$n400;
+$breadcrumb-button-base-primary-light: pr.$n600;
+$breadcrumb-button-base-primary-dark: pr.$n600;
 
 // notification-button
-$on-bg-notification-button-active-light: $b400;
-$bg-notification-button-active-light: $n900;
-$on-bg-notification-button-hover-light: $b400;
-$bg-notification-button-hover-light: $n800;
-$on-bg-label-notification-button-hover-light: $n900;
-$bg-label-notification-button-hover-light: $b200;
-$on-bg-notification-button-pressed-light: $n400;
-$bg-notification-button-pressed-light: $n700;
-$on-bg-notification-button-disabled-light: $n700;
-$bg-notification-button-disabled-light: $n900;
-$on-bg-notification-button-active-dark: $n900;
-$bg-notification-button-active-dark: $n100;
-$on-bg-notification-button-hover-dark: $n900;
-$bg-notification-button-hover-dark: $n400;
-$on-bg-label-notification-button-hover-dark: $b200;
-$bg-label-notification-button-hover-dark: $n900;
-$on-bg-notification-button-pressed-dark: $n600;
-$bg-notification-button-pressed-dark: $n300;
-$on-bg-notification-button-disabled-dark: $n400;
-$bg-notification-button-disabled-dark: $n100;
+$on-bg-notification-button-active-light: pr.$b400;
+$bg-notification-button-active-light: pr.$n900;
+$on-bg-notification-button-hover-light: pr.$b400;
+$bg-notification-button-hover-light: pr.$n800;
+$on-bg-label-notification-button-hover-light: pr.$n900;
+$bg-label-notification-button-hover-light: pr.$b200;
+$on-bg-notification-button-pressed-light: pr.$n400;
+$bg-notification-button-pressed-light: pr.$n700;
+$on-bg-notification-button-disabled-light: pr.$n700;
+$bg-notification-button-disabled-light: pr.$n900;
+$on-bg-notification-button-active-dark: pr.$n900;
+$bg-notification-button-active-dark: pr.$n100;
+$on-bg-notification-button-hover-dark: pr.$n900;
+$bg-notification-button-hover-dark: pr.$n400;
+$on-bg-label-notification-button-hover-dark: pr.$b200;
+$bg-label-notification-button-hover-dark: pr.$n900;
+$on-bg-notification-button-pressed-dark: pr.$n600;
+$bg-notification-button-pressed-dark: pr.$n300;
+$on-bg-notification-button-disabled-dark: pr.$n400;
+$bg-notification-button-disabled-dark: pr.$n100;
 
 // badge-button
-$on-bg-notification-badge-button-light: $n900;
-$bg-notification-badge-button-light: $r400;
-$on-bg-notification-badge-button-dark: $n100;
-$bg-notification-badge-button-dark: $r500;
-$on-bg-menu-badge-button-light: $n900;
-$bg-menu-badge-button-light: $b500;
-$on-bg-menu-badge-button-dark: $n100;
-$bg-menu-badge-button-dark: $b800;
+$on-bg-notification-badge-button-light: pr.$n900;
+$bg-notification-badge-button-light: pr.$r400;
+$on-bg-notification-badge-button-dark: pr.$n100;
+$bg-notification-badge-button-dark: pr.$r500;
+$on-bg-menu-badge-button-light: pr.$n900;
+$bg-menu-badge-button-light: pr.$b500;
+$on-bg-menu-badge-button-dark: pr.$n100;
+$bg-menu-badge-button-dark: pr.$b800;
 
 // icon-button
-$on-bg-icon-button-active-light: $b500;
-$on-bg-icon-button-active-dark: $n900;
-$on-bg-icon-button-hover-light: $b500;
-$on-bg-icon-button-hover-dark: $n900;
-$bg-icon-button-hover-light: $n800;
-$bg-icon-button-hover-dark: $n400;
-$on-bg-label-icon-button-hover-light: $n900;
-$on-bg-label-icon-button-hover-dark: $b200;
-$bg-label-icon-button-hover-light: $b200;
-$bg-label-icon-button-hover-dark: $n900;
-$on-bg-icon-button-pressed-light: $n400;
-$on-bg-icon-button-pressed-dark: $n600;
-$bg-icon-button-pressed-light: $n700;
-$bg-icon-button-pressed-dark: $n300;
-$on-bg-icon-button-disabled-light: $n700;
-$on-bg-icon-button-disabled-dark: $n400;
-$cl-icon-button-support-text-light: $n900;
-$bg-icon-button-support-text-light: $b200;
+$on-bg-icon-button-active-light: pr.$b500;
+$on-bg-icon-button-active-dark: pr.$n900;
+$on-bg-icon-button-hover-light: pr.$b500;
+$on-bg-icon-button-hover-dark: pr.$n900;
+$bg-icon-button-hover-light: pr.$n800;
+$bg-icon-button-hover-dark: pr.$n400;
+$on-bg-label-icon-button-hover-light: pr.$n900;
+$on-bg-label-icon-button-hover-dark: pr.$b200;
+$bg-label-icon-button-hover-light: pr.$b200;
+$bg-label-icon-button-hover-dark: pr.$n900;
+$on-bg-icon-button-pressed-light: pr.$n400;
+$on-bg-icon-button-pressed-dark: pr.$n600;
+$bg-icon-button-pressed-light: pr.$n700;
+$bg-icon-button-pressed-dark: pr.$n300;
+$on-bg-icon-button-disabled-light: pr.$n700;
+$on-bg-icon-button-disabled-dark: pr.$n400;
+$cl-icon-button-support-text-light: pr.$n900;
+$bg-icon-button-support-text-light: pr.$b200;
 
 // generic-avatar
-$cl-generic-avatar-label-primary-light: $n400;
-$cl-generic-avatar-label-primary-dark: $n800;
-$cl-generic-avatar-label-disabled-light: $n600;
-$cl-generic-avatar-label-disabled-dark: $n500;
-$bg-generic-avatar-initials-primary-light: $n400;
-$bg-generic-avatar-initials-primary-dark: $n800;
-$bg-generic-avatar-initials-disabled-light: $n800;
-$bg-generic-avatar-initials-disabled-dark: $n200;
-$cl-generic-avatar-initials-text-primary-light: $n900;
-$cl-generic-avatar-initials-text-primary-dark: $n500;
-$cl-generic-avatar-initials-text-disabled-light: $n600;
-$cl-generic-avatar-initials-text-disabled-dark: $n500;
-
-$bg-generic-avatar-secondary-inactive-light: $n700;
-$bg-generic-avatar-secondary-inactive-dark: $n700;
-$bg-generic-avatar-secondary-blocked-light: $r500;
-$bg-generic-avatar-secondary-blocked-dark: $r500;
-$bg-generic-avatar-secondary-active-light: $g400;
-$bg-generic-avatar-secondary-active-dark: $g400;
-
-// Backdrop
-$backdrop-primary-light: $n600;
-$backdrop-primary-dark: $n100;
+$cl-generic-avatar-label-primary-light: pr.$n400;
+$cl-generic-avatar-label-primary-dark: pr.$n800;
+$cl-generic-avatar-label-disabled-light: pr.$n600;
+$cl-generic-avatar-label-disabled-dark: pr.$n500;
+$bg-generic-avatar-initials-primary-light: pr.$n400;
+$bg-generic-avatar-initials-primary-dark: pr.$n800;
+$bg-generic-avatar-initials-disabled-light: pr.$n800;
+$bg-generic-avatar-initials-disabled-dark: pr.$n200;
+$cl-generic-avatar-initials-text-primary-light: pr.$n900;
+$cl-generic-avatar-initials-text-primary-dark: pr.$n500;
+$cl-generic-avatar-initials-text-disabled-light: pr.$n600;
+$cl-generic-avatar-initials-text-disabled-dark: pr.$n500;
 
 // Chip
-$cl-chip-disabled-state-light: $n600;
-$cl-chip-disabled-state-dark: $n500;
-$cl-chip-active-primary-light: $b400;
-$cl-chip-active-primary-dark: $n900;
-$bg-chip-active-primary-light: $n900;
-$bg-chip-active-primary-dark: $n100;
-$cl-chip-active-close-button-light: $b400;
-$cl-chip-active-close-button-dark: $n900;
-$bg-chip-active-close-button-light: $n800;
-$bg-chip-active-close-button-dark: $n200;
-$bg-chip-active-hover-light: $b800;
-$bg-chip-active-hover-dark: $n400;
-$cl-chip-active-close-button-hover-light: $n900;
-$cl-chip-active-close-button-hover-dark: $n100;
-$bg-chip-active-close-button-hover-light: $b400;
-$bg-chip-active-close-button-hover-dark: $n900;
+$cl-chip-disabled-state-light: pr.$n600;
+$cl-chip-disabled-state-dark: pr.$n500;
+$cl-chip-active-primary-light: pr.$b400;
+$cl-chip-active-primary-dark: pr.$n900;
+$bg-chip-active-primary-light: pr.$n900;
+$bg-chip-active-primary-dark: pr.$n100;
+$cl-chip-active-close-button-light: pr.$b400;
+$cl-chip-active-close-button-dark: pr.$n900;
+$bg-chip-active-close-button-light: pr.$n800;
+$bg-chip-active-close-button-dark: pr.$n200;
+$bg-chip-active-hover-light: pr.$b800;
+$bg-chip-active-hover-dark: pr.$n400;
+$cl-chip-active-close-button-hover-light: pr.$n900;
+$cl-chip-active-close-button-hover-dark: pr.$n100;
+$bg-chip-active-close-button-hover-light: pr.$b400;
+$bg-chip-active-close-button-hover-dark: pr.$n900;
 
 // currencies
-$on-bg-currency: $c1;
-$btc-primary-light: $c10;
-$btc-primary-dark: $c10;
-$busd-primary-light: $c20;
-$busd-primary-dark: $c20;
+$on-bg-currency: pr.$c1;
+$btc-primary-light: pr.$c10;
+$btc-primary-dark: pr.$c10;
+$busd-primary-light: pr.$c20;
+$busd-primary-dark: pr.$c20;
 $ltc-primary-light: $on-bg-currency;
-$ltc-secondary-light: $c30;
-$ltc-primary-dark: $c220;
+$ltc-secondary-light: pr.$c30;
+$ltc-primary-dark: pr.$c220;
 $ltc-secondary-dark: $on-bg-currency;
-$eurc-primary-light: $c40;
-$eurc-secondary-light: $c50;
-$eurc-primary-dark: $c40;
-$eurc-secondary-dark: $c50;
-$trx-primary-light: $c60;
-$trx-primary-dark: $c60;
-$usdt-primary-light: $c70;
-$usdt-primary-dark: $c70;
-$bch-primary-light: $c80;
-$bch-primary-dark: $c80;
-$usd-primary-light: $c90;
-$usd-primary-dark: $c90;
-$bnb-primary-light: $c100;
-$bnb-primary-dark: $c100;
-$eth-primary-light: $c110;
-$eth-secondary-light: $c120;
-$eth-terciary-light: $c220;
-$eth-quaternary-light: $c230;
-//$eth-quinary-light: $c6000;
-$eth-senary-light: $c240;
-$eth-septenary-light: $c250;
-$eth-primary-dark: $c120;
-$eth-secondary-dark: $c110;
-$eth-terciary-dark: $c220;
-$eth-quaternary-dark: $c230;
-//$eth-quinary-dark: $c6000;
-$eth-senary-dark: $c240;
-$eth-septenary-dark: $c240;
-$wbtc-primary-light: $c130;
-$wbtc-secundary-light: $c140;
-$wbtc-terciary-light: $c150;
-$wbtc-primary-dark: $c130;
-$wbtc-secundary-dark: $c140;
-$wbtc-terciary-dark: $c150;
-$bep-20-primary-light: $c160;
-$bep-20-primary-dark: $c160;
-$lightning-primary-light: $c170;
-$lightning-primary-dark: $c170;
-$sol-primary-light: $c180;
-$sol-secondary-light: $c190;
-$sol-terciary-light: $c200;
-$sol-primary-dark: $c180;
-$sol-secondary-dark: $c190;
-$sol-terciary-dark: $c200;
-$ada-primary-light: $c210;
-$ada-primary-dark: $c210;
+$eurc-primary-light: pr.$c40;
+$eurc-secondary-light: pr.$c50;
+$eurc-primary-dark: pr.$c40;
+$eurc-secondary-dark: pr.$c50;
+$trx-primary-light: pr.$c60;
+$trx-primary-dark: pr.$c60;
+$usdt-primary-light: pr.$c70;
+$usdt-primary-dark: pr.$c70;
+$bch-primary-light: pr.$c80;
+$bch-primary-dark: pr.$c80;
+$usd-primary-light: pr.$c90;
+$usd-primary-dark: pr.$c90;
+$bnb-primary-light: pr.$c100;
+$bnb-primary-dark: pr.$c100;
+$eth-primary-light: pr.$c110;
+$eth-secondary-light: pr.$c120;
+$eth-terciary-light: pr.$c220;
+$eth-quaternary-light: pr.$c230;
+//$eth-quinary-light: pr.$c6000;
+$eth-senary-light: pr.$c240;
+$eth-septenary-light: pr.$c250;
+$eth-primary-dark: pr.$c120;
+$eth-secondary-dark: pr.$c110;
+$eth-terciary-dark: pr.$c220;
+$eth-quaternary-dark: pr.$c230;
+//$eth-quinary-dark: pr.$c6000;
+$eth-senary-dark: pr.$c240;
+$eth-septenary-dark: pr.$c240;
+$wbtc-primary-light: pr.$c130;
+$wbtc-secundary-light: pr.$c140;
+$wbtc-terciary-light: pr.$c150;
+$wbtc-primary-dark: pr.$c130;
+$wbtc-secundary-dark: pr.$c140;
+$wbtc-terciary-dark: pr.$c150;
+$bep-20-primary-light: pr.$c160;
+$bep-20-primary-dark: pr.$c160;
+$lightning-primary-light: pr.$c170;
+$lightning-primary-dark: pr.$c170;
+$sol-primary-light: pr.$c180;
+$sol-secondary-light: pr.$c190;
+$sol-terciary-light: pr.$c200;
+$sol-primary-dark: pr.$c180;
+$sol-secondary-dark: pr.$c190;
+$sol-terciary-dark: pr.$c200;
+$ada-primary-light: pr.$c210;
+$ada-primary-dark: pr.$c210;