@progressio_resources/gravity-design-system 3.0.49 → 4.0.26

package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss

@@ -1,726 +1,720 @@
-@import "../themes/hero.theme";
-@import "../../../functions";
+@use "../themes/hero.theme" as th;
+@use "../primitives/hero.primitives" as pr;
+@use "../../../functions";
 
 .hero-light-theme {
   // button-primary
-  --on-bg-button-active-primary: #{$on-bg-button-active-primary-light};
-  --bg-button-active-primary: #{$bg-button-active-primary-light};
-  --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-light};
-  --bg-button-hover-primary: #{$bg-button-hover-primary-light};
-  --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-light};
-  --bg-button-pressed-primary: #{$bg-button-pressed-primary-light};
+  --on-bg-button-active-primary: #{th.$on-bg-button-active-primary-light};
+  --bg-button-active-primary: #{th.$bg-button-active-primary-light};
+  --on-bg-button-hover-primary: #{th.$on-bg-button-hover-primary-light};
+  --bg-button-hover-primary: #{th.$bg-button-hover-primary-light};
+  --on-bg-button-pressed-primary: #{th.$on-bg-button-pressed-primary-light};
+  --bg-button-pressed-primary: #{th.$bg-button-pressed-primary-light};
 
   // button-secondary
-  --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-light};
-  --outline-button-active-secondary: #{$outline-button-active-secondary-light};
-  --bg-button-active-secondary: #{$bg-button-active-secondary-light};
-  --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-light};
-  --outline-button-hover-secondary: #{$outline-button-hover-secondary-light};
-  --bg-button-hover-secondary: #{$bg-button-hover-secondary-light};
-  --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-light};
-  --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-light};
-  --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-light};
+  --on-bg-button-active-secondary: #{th.$on-bg-button-active-secondary-light};
+  --outline-button-active-secondary: #{th.$outline-button-active-secondary-light};
+  --bg-button-active-secondary: #{th.$bg-button-active-secondary-light};
+  --on-bg-button-hover-secondary: #{th.$on-bg-button-hover-secondary-light};
+  --outline-button-hover-secondary: #{th.$outline-button-hover-secondary-light};
+  --bg-button-hover-secondary: #{th.$bg-button-hover-secondary-light};
+  --on-bg-button-pressed-secondary: #{th.$on-bg-button-pressed-secondary-light};
+  --outline-button-pressed-secondary: #{th.$outline-button-pressed-secondary-light};
+  --bg-button-pressed-secondary: #{th.$bg-button-pressed-secondary-light};
 
   // button-tertiary
-  --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-light};
-  --bg-button-active-tertiary: #{$bg-button-active-tertiary-light};
-  --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-light};
-  --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-light};
-  --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-light};
-  --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-light};
+  --on-bg-button-active-tertiary: #{th.$on-bg-button-active-tertiary-light};
+  --bg-button-active-tertiary: #{th.$bg-button-active-tertiary-light};
+  --on-bg-button-hover-tertiary: #{th.$on-bg-button-hover-tertiary-light};
+  --bg-button-hover-tertiary: #{th.$bg-button-hover-tertiary-light};
+  --on-bg-button-pressed-tertiary: #{th.$on-bg-button-pressed-tertiary-light};
+  --bg-button-pressed-tertiary: #{th.$bg-button-pressed-tertiary-light};
 
   // button-positive
-  --on-bg-button-active-positive: #{$on-bg-button-active-positive-light};
-  --bg-button-active-positive: #{$bg-button-active-positive-light};
-  --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-light};
-  --bg-button-hover-positive: #{$bg-button-hover-positive-light};
-  --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-light};
-  --bg-button-pressed-positive: #{$bg-button-pressed-positive-light};
+  --on-bg-button-active-positive: #{th.$on-bg-button-active-positive-light};
+  --bg-button-active-positive: #{th.$bg-button-active-positive-light};
+  --on-bg-button-hover-positive: #{th.$on-bg-button-hover-positive-light};
+  --bg-button-hover-positive: #{th.$bg-button-hover-positive-light};
+  --on-bg-button-pressed-positive: #{th.$on-bg-button-pressed-positive-light};
+  --bg-button-pressed-positive: #{th.$bg-button-pressed-positive-light};
 
   // button-negative
-  --on-bg-button-active-negative: #{$on-bg-button-active-negative-light};
-  --bg-button-active-negative: #{$bg-button-active-negative-light};
-  --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-light};
-  --bg-button-hover-negative: #{$bg-button-hover-negative-light};
-  --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-light};
-  --bg-button-pressed-negative: #{$bg-button-pressed-negative-light};
+  --on-bg-button-active-negative: #{th.$on-bg-button-active-negative-light};
+  --bg-button-active-negative: #{th.$bg-button-active-negative-light};
+  --on-bg-button-hover-negative: #{th.$on-bg-button-hover-negative-light};
+  --bg-button-hover-negative: #{th.$bg-button-hover-negative-light};
+  --on-bg-button-pressed-negative: #{th.$on-bg-button-pressed-negative-light};
+  --bg-button-pressed-negative: #{th.$bg-button-pressed-negative-light};
 
   // button-alternative
-  --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-light};
-  --bg-button-active-alternative: #{$bg-button-active-alternative-light};
-  --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-light};
-  --bg-button-hover-alternative: #{$bg-button-hover-alternative-light};
-  --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-light};
-  --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
+  --on-bg-button-active-alternative: #{th.$on-bg-button-active-alternative-light};
+  --bg-button-active-alternative: #{th.$bg-button-active-alternative-light};
+  --on-bg-button-hover-alternative: #{th.$on-bg-button-hover-alternative-light};
+  --bg-button-hover-alternative: #{th.$bg-button-hover-alternative-light};
+  --on-bg-button-pressed-alternative: #{th.$on-bg-button-pressed-alternative-light};
+  --bg-button-pressed-alternative: #{th.$bg-button-pressed-alternative-light};
 
   // button-neutral
-  --on-bg-button-active-neutro: #{$on-bg-button-active-neutro-light};
-  --bg-button-active-neutro: #{$bg-button-active-neutro-light};
-  --bg-neutro-dot-primary: #{$bg-neutro-dot-primary-light};
+  --on-bg-button-active-neutro: #{th.$on-bg-button-active-neutro-light};
+  --bg-button-active-neutro: #{th.$bg-button-active-neutro-light};
+  --bg-neutro-dot-primary: #{th.$bg-neutro-dot-primary-light};
 
   // disabled-status
-  --on-bg-disabled: #{$on-bg-disabled-light};
-  --bg-disabled: #{$bg-disabled-light};
-  --outline-disabled: #{$outline-disabled-light};
+  --on-bg-disabled: #{th.$on-bg-disabled-light};
+  --bg-disabled: #{th.$bg-disabled-light};
+  --outline-disabled: #{th.$outline-disabled-light};
 
   // surface
-  --surface-primary: #{$surface-primary-light};
-  --surface-secondary: #{$surface-secondary-light};
-  --surface-tertiary: #{$surface-tertiary-light};
+  --surface-primary: #{th.$surface-primary-light};
+  --surface-secondary: #{th.$surface-secondary-light};
+  --surface-tertiary: #{th.$surface-tertiary-light};
   --surface-opacity: .25;
 
   // text
-  --text-primary: #{$text-primary-light};
-  --text-highlight-primary: #{$text-highlight-primary-light};
+  --text-primary: #{th.$text-primary-light};
+  --text-highlight-primary: #{th.$text-highlight-primary-light};
 
   // divider
-  --divider-primary: #{$divider-primary-light};
+  --divider-primary: #{th.$divider-primary-light};
 
   // logo
-  --logo-primary: #{$logo-primary-light};
+  --logo-primary: #{th.$logo-primary-light};
 
   // highlight
-  --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-light};
-  --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-light};
-  --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-light};
-  --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-light};
+  --on-bg-highlight-neutro-primary: #{th.$on-bg-highlight-neutro-primary-light};
+  --bg-highlight-neutro-primary: #{th.$bg-highlight-neutro-primary-light};
+  --on-bg-highlight-neutro-secondary: #{th.$on-bg-highlight-neutro-secondary-light};
+  --bg-highlight-neutro-secondary: #{th.$bg-highlight-neutro-secondary-light};
 
   // system
-  --positive-primary: #{$positive-primary-light};
-  --negative-primary: #{$negative-primary-light};
-  --cta-primary: #{$bg-button-active-primary-light};
-  --alternative-primary: #{$alternative-primary-light};
+  --positive-primary: #{th.$positive-primary-light};
+  --negative-primary: #{th.$negative-primary-light};
+  --cta-primary: #{th.$bg-button-active-primary-light};
+  --alternative-primary: #{th.$alternative-primary-light};
 
   // calendar
-  --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-light};
-  --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-light};
-  --on-bg-calender-primary: #{$on-bg-calender-primary-light};
-  --bg-calender-primary: #{$bg-calender-primary-light};
-  --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-light};
-  --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-light};
-  --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-light};
-  --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-light};
-  --number-calender-active-primary: #{$number-calender-active-primary-light};
-  --number-calendar-hover-primary: #{$number-calendar-hover-primary-light};
-  --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-light};
-  --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-light};
-  --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-light};
-  --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-light};
+  --on-bg-calendar-nav-primary: #{th.$on-bg-calendar-nav-primary-light};
+  --bg-calendar-nav-primary: #{th.$bg-calendar-nav-primary-light};
+  --on-bg-calender-primary: #{th.$on-bg-calender-primary-light};
+  --bg-calender-primary: #{th.$bg-calender-primary-light};
+  --arrow-calendar-active-primary: #{th.$arrow-calendar-active-primary-light};
+  --arrow-calendar-hover-primary: #{th.$arrow-calendar-hover-primary-light};
+  --bg-arrow-calendar-hover-primary: #{th.$bg-arrow-calendar-hover-primary-light};
+  --arrow-calendar-disabled-primary: #{th.$arrow-calendar-disabled-primary-light};
+  --number-calender-active-primary: #{th.$number-calender-active-primary-light};
+  --number-calendar-hover-primary: #{th.$number-calendar-hover-primary-light};
+  --bg-number-calendar-hover-primary: #{th.$bg-number-calendar-hover-primary-light};
+  --number-calendar-pressed-primary: #{th.$number-calendar-pressed-primary-light};
+  --bg-number-calendar-pressed-primary: #{th.$bg-number-calendar-pressed-primary-light};
+  --number-calendar-disabled-primary: #{th.$number-calendar-disabled-primary-light};
 
   // checkbox
-  --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-light};
-  --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-light};
-  --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-light};
+  --outline-checkbox-off-primary: #{th.$outline-checkbox-off-primary-light};
+  --on-bg-checkbox-on-primary: #{th.$on-bg-checkbox-on-primary-light};
+  --bg-checkbox-on-primary: #{th.$bg-checkbox-on-primary-light};
 
   // radio button
-  --radio-button-off-primary: #{$radio-button-off-primary-light};
-  --radio-button-on-primary: #{$radio-button-on-primary-light};
+  --radio-button-off-primary: #{th.$radio-button-off-primary-light};
+  --radio-button-on-primary: #{th.$radio-button-on-primary-light};
 
   // stepper
-  --text-stepper-pending-primary: #{$text-stepper-pending-primary-light};
-  --line-stepper-pending-primary: #{$line-stepper-pending-primary-light};
-  --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-light};
-  --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-light};
-  --text-stepper-current-primary: #{$text-stepper-current-primary-light};
-  --line-stepper-current-primary: #{$line-stepper-current-primary-light};
-  --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-light};
-  --bg-stepper-current-primary: #{$bg-stepper-current-primary-light};
-  --text-stepper-completed-primary: #{$text-stepper-completed-primary-light};
-  --line-stepper-completed-primary: #{$line-stepper-completed-primary-light};
-  --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-light};
-  --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-light};
+  --text-stepper-pending-primary: #{th.$text-stepper-pending-primary-light};
+  --line-stepper-pending-primary: #{th.$line-stepper-pending-primary-light};
+  --on-bg-stepper-pending-primary: #{th.$on-bg-stepper-pending-primary-light};
+  --bg-stepper-pending-primary: #{th.$bg-stepper-pending-primary-light};
+  --text-stepper-current-primary: #{th.$text-stepper-current-primary-light};
+  --line-stepper-current-primary: #{th.$line-stepper-current-primary-light};
+  --on-bg-stepper-current-primary: #{th.$on-bg-stepper-current-primary-light};
+  --bg-stepper-current-primary: #{th.$bg-stepper-current-primary-light};
+  --text-stepper-completed-primary: #{th.$text-stepper-completed-primary-light};
+  --line-stepper-completed-primary: #{th.$line-stepper-completed-primary-light};
+  --on-bg-stepper-completed-primary: #{th.$on-bg-stepper-completed-primary-light};
+  --bg-stepper-completed-primary: #{th.$bg-stepper-completed-primary-light};
 
   // table
-  --on-bg-table-header-primary: #{$on-bg-table-header-primary-light};
-  --bg-table-header-primary: #{$bg-table-header-primary-light};
-  --on-bg-table-active-primary: #{$on-bg-table-active-primary-light};
-  --bg-table-active-primary: #{$bg-table-active-primary-light};
-  --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-light};
-  --bg-table-hover-primary: #{$bg-table-hover-primary-light};
-  --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-light};
-  --bg-table-header-secondary: #{$bg-table-header-secondary-light};
+  --on-bg-table-header-primary: #{th.$on-bg-table-header-primary-light};
+  --bg-table-header-primary: #{th.$bg-table-header-primary-light};
+  --on-bg-table-active-primary: #{th.$on-bg-table-active-primary-light};
+  --bg-table-active-primary: #{th.$bg-table-active-primary-light};
+  --on-bg-table-hover-primary: #{th.$on-bg-table-hover-primary-light};
+  --bg-table-hover-primary: #{th.$bg-table-hover-primary-light};
+  --on-bg-table-header-secondary: #{th.$on-bg-table-header-secondary-light};
+  --bg-table-header-secondary: #{th.$bg-table-header-secondary-light};
 
   // tooltip
-  --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-light};
-  --bg-tooltip-primary: #{$bg-tooltip-primary-light};
+  --on-bg-tooltip-primary: #{th.$on-bg-tooltip-primary-light};
+  --bg-tooltip-primary: #{th.$bg-tooltip-primary-light};
 
   // text-field
-  --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-light};
-  --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-light};
-  --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-light};
-  --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-light};
-  --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-light};
-  --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-light};
-  --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-light};
-  --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-light};
-  --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-light};
-  --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-light};
-  --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-light};
-  --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-light};
-  --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-light};
-  --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-light};
-  --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-light};
-  --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-light};
-  --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-light};
-  --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-light};
-  --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-light};
-  --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-light};
-  --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
-  --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-light};
-  --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-light};
-  --outline-field-full-enabled-typing-primary: #{$outline-field-full-enabled-typing-primary-light};
-  --outline-field-full-enabled-typed-primary: #{$outline-field-full-enabled-typed-primary-light};
-  --bg-field-autofill: #{$bg-field-autofill-light};
-  --line-empty-enabled-primary: #{$line-empty-enabled-primary-light};
-  --equivalence-text-empty-enabled-primary: #{$equivalence-text-empty-enabled-primary-light};
-  --outline-field-empty-enabled-hover-primary: #{$outline-field-empty-enabled-hover-primary-light};
-  --equivalence-text-full-enabled-typing-primary: #{$equivalence-text-full-enabled-typing-primary-light};
-  --line-full-enabled-typing-primary: #{$line-full-enabled-typing-primary-light};
-  --label-full-enabled-typing-primary: #{$label-full-enabled-typing-primary-light};
-  --equivalence-text-empty-disabled-primary: #{$equivalence-text-empty-disabled-primary-light};
-  --line-empty-disabled-primary: #{$line-empty-disabled-primary-light};
+  --bg-field-empty-enabled-primary: #{th.$bg-field-empty-enabled-primary-light};
+  --outline-field-empty-enabled-primary: #{th.$outline-field-empty-enabled-primary-light};
+  --placeholder-empty-enabled-primary: #{th.$placeholder-empty-enabled-primary-light};
+  --label-text-empty-enabled-primary: #{th.$label-text-empty-enabled-primary-light};
+  --bg-field-empty-enabled-hover-primary: #{th.$bg-field-empty-enabled-hover-primary-light};
+  --bg-field-full-enabled-primary: #{th.$bg-field-full-enabled-primary-light};
+  --outline-field-full-enabled-primary: #{th.$outline-field-full-enabled-primary-light};
+  --input-text-full-enabled-primary: #{th.$input-text-full-enabled-primary-light};
+  --label-text-full-enabled-primary: #{th.$label-text-full-enabled-primary-light};
+  --bg-field-full-enabled-hover-primary: #{th.$bg-field-full-enabled-hover-primary-light};
+  --bg-field-empty-disabled-primary: #{th.$bg-field-empty-disabled-primary-light};
+  --placeholder-empty-disabled-primary: #{th.$placeholder-empty-disabled-primary-light};
+  --label-text-empty-disabled-primary: #{th.$label-text-empty-disabled-primary-light};
+  --bg-field-full-enabled-pressed-primary: #{th.$bg-field-full-enabled-pressed-primary-light};
+  --outline-field-full-enabled-pressed-primary: #{th.$outline-field-full-enabled-pressed-primary-light};
+  --placeholder-full-enabled-pressed-primary: #{th.$placeholder-full-enabled-pressed-primary-light};
+  --label-text-full-enabled-pressed-primary: #{th.$label-text-full-enabled-pressed-primary-light};
+  --bg-field-full-disabled-primary: #{th.$bg-field-full-disabled-primary-light};
+  --input-text-full-disabled-primary: #{th.$input-text-full-disabled-primary-light};
+  --label-text-full-disabled-primary: #{th.$label-text-full-disabled-primary-light};
+  --bg-field-full-read-only-primary: #{th.$bg-field-full-read-only-primary-light};
+  --input-text-full-read-only-primary: #{th.$input-text-full-read-only-primary-light};
+  --label-text-full-read-only-primary: #{th.$label-text-full-read-only-primary-light};
+  --outline-field-full-enabled-typing-primary: #{th.$outline-field-full-enabled-typing-primary-light};
+  --outline-field-full-enabled-typed-primary: #{th.$outline-field-full-enabled-typed-primary-light};
+  --bg-field-autofill: #{th.$bg-field-autofill-light};
+  --line-empty-enabled-primary: #{th.$line-empty-enabled-primary-light};
+  --equivalence-text-empty-enabled-primary: #{th.$equivalence-text-empty-enabled-primary-light};
+  --outline-field-empty-enabled-hover-primary: #{th.$outline-field-empty-enabled-hover-primary-light};
+  --equivalence-text-full-enabled-typing-primary: #{th.$equivalence-text-full-enabled-typing-primary-light};
+  --line-full-enabled-typing-primary: #{th.$line-full-enabled-typing-primary-light};
+  --label-full-enabled-typing-primary: #{th.$label-full-enabled-typing-primary-light};
+  --equivalence-text-empty-disabled-primary: #{th.$equivalence-text-empty-disabled-primary-light};
+  --line-empty-disabled-primary: #{th.$line-empty-disabled-primary-light};
 
   // icons
-  --icon-active-primary: #{$icon-active-primary-light};
-  --icon-hover-primary: #{$icon-hover-primary-light};
+  --icon-active-primary: #{th.$icon-active-primary-light};
+  --icon-hover-primary: #{th.$icon-hover-primary-light};
 
   // dropdown-list
-  --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-light};
-  --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-light};
-  --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-light};
-  --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-light};
-  --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-light};
-  --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-light};
-  --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-light};
+  --bg-dropdown-list-primary: #{th.$bg-dropdown-list-primary-light};
+  --outline-dropdown-list-primary: #{th.$outline-dropdown-list-primary-light};
+  --on-bg-dropdown-item-active-primary: #{th.$on-bg-dropdown-item-active-primary-light};
+  --on-bg-dropdown-item-hover-primary: #{th.$on-bg-dropdown-item-hover-primary-light};
+  --bg-dropdown-item-hover-primary: #{th.$bg-dropdown-item-hover-primary-light};
+  --on-bg-dropdown-item-pressed-primary: #{th.$on-bg-dropdown-item-pressed-primary-light};
+  --on-bg-dropdown-item-disabled-primary: #{th.$on-bg-dropdown-item-disabled-primary-light};
 
   // dropdown-list-display-currency
-  --bg-dropdown-list-dc-primary: #{$bg-dropdown-list-dc-primary-light};
-  --outline-dropdown-list-dc-primary: #{$outline-dropdown-list-dc-primary-light};
+  --bg-dropdown-list-dc-primary: #{th.$bg-dropdown-list-dc-primary-light};
+  --outline-dropdown-list-dc-primary: #{th.$outline-dropdown-list-dc-primary-light};
 
   // loading
-  --loading-primary: #{$loading-primary-light};
+  --loading-primary: #{th.$loading-primary-light};
 
   // switch
-  --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-light};
-  --bg-switch-on-primary: #{$bg-switch-on-primary-light};
-  --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-light};
-  --bg-switch-off-primary: #{$bg-switch-off-primary-light};
-  --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-light};
-  --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-light};
+  --on-bg-switch-on-primary: #{th.$on-bg-switch-on-primary-light};
+  --bg-switch-on-primary: #{th.$bg-switch-on-primary-light};
+  --on-bg-switch-off-primary: #{th.$on-bg-switch-off-primary-light};
+  --bg-switch-off-primary: #{th.$bg-switch-off-primary-light};
+  --on-bg-switch-disabled-primary: #{th.$on-bg-switch-disabled-primary-light};
+  --bg-switch-disabled-primary: #{th.$bg-switch-disabled-primary-light};
 
   // notification
-  --on-bg-notification-primary: #{$on-bg-notification-primary-light};
-  --bg-notification-primary: #{$bg-notification-primary-light};
-  --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-light};
-  --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-light};
-  --notification-error-highlight-primary: #{$notification-error-highlight-primary-light};
-  --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-light};
-  --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-light};
-  --notification-success-highlight-primary: #{$notification-success-highlight-primary-light};
-  --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
-  --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-light};
-  --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
-  --bg-notification-list-primary: #{$bg-notification-list-primary-light};
-  --on-bg-notification-list-primary: #{$on-bg-notification-list-primary-light};
+  --on-bg-notification-primary: #{th.$on-bg-notification-primary-light};
+  --bg-notification-primary: #{th.$bg-notification-primary-light};
+  --on-bg-icon-notification-error-primary: #{th.$on-bg-icon-notification-error-primary-light};
+  --bg-icon-notification-error-primary: #{th.$bg-icon-notification-error-primary-light};
+  --notification-error-highlight-primary: #{th.$notification-error-highlight-primary-light};
+  --on-bg-icon-notification-success-primary: #{th.$on-bg-icon-notification-success-primary-light};
+  --bg-icon-notification-success-primary: #{th.$bg-icon-notification-success-primary-light};
+  --notification-success-highlight-primary: #{th.$notification-success-highlight-primary-light};
+  --on-bg-icon-notification-warning-primary: #{th.$on-bg-icon-notification-warning-primary-light};
+  --bg-icon-notification-warning-primary: #{th.$bg-icon-notification-warning-primary-light};
+  --notification-warning-highlight-primary: #{th.$notification-warning-highlight-primary-light};
+  --bg-notification-list-primary: #{th.$bg-notification-list-primary-light};
+  --on-bg-notification-list-primary: #{th.$on-bg-notification-list-primary-light};
 
   // dialog
-  --bg-dialog-primary: #{$bg-dialog-primary-light};
-  --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-light};
-  --bg-dialog-header-primary: #{$bg-dialog-header-primary-light};
-  --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-light};
-  --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-light};
-  --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-light};
-  --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-light};
-  --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-light};
+  --bg-dialog-primary: #{th.$bg-dialog-primary-light};
+  --on-bg-dialog-header-primary: #{th.$on-bg-dialog-header-primary-light};
+  --bg-dialog-header-primary: #{th.$bg-dialog-header-primary-light};
+  --close-dialog-header-active-primary: #{th.$close-dialog-header-active-primary-light};
+  --close-dialog-header-hover-primary: #{th.$close-dialog-header-hover-primary-light};
+  --bg-close-dialog-header-hover-primary: #{th.$bg-close-dialog-header-hover-primary-light};
+  --on-bg-icon-dialog-primary: #{th.$on-bg-icon-dialog-primary-light};
+  --bg-icon-dialog-primary: #{th.$bg-icon-dialog-primary-light};
 
   // link
-  --link-active-primary: #{$link-active-primary-light};
-  --link-hover-primary: #{$link-hover-primary-light};
-  --bg-link-hover-primary: #{$bg-link-hover-primary-light};
-  --link-disabled-primary: #{$link-disabled-primary-light};
-  --link-visited-primary: #{$link-visited-primary-light};
+  --link-active-primary: #{th.$link-active-primary-light};
+  --link-hover-primary: #{th.$link-hover-primary-light};
+  --bg-link-hover-primary: #{th.$bg-link-hover-primary-light};
+  --link-disabled-primary: #{th.$link-disabled-primary-light};
+  --link-visited-primary: #{th.$link-visited-primary-light};
 
   // menu
-  --divider-menu-active-primary: #{$divider-menu-active-primary-light};
-  --bg-menu-primary: #{$bg-menu-active-primary-light};
-  --on-bg-menu-primary: #{$on-bg-menu-primary-light};
-  --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-light};
-  --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-light};
-  --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-light};
-  --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-light};
-  --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-light};
-  --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-light};
-  --divider-menu-pressed-primary: #{$divider-menu-pressed-primary-light};
-  --bg-menu-mobile-primary: #{$bg-menu-mobile-primary-light};
-  --bg-menu-mobile-card-primary: #{$bg-menu-mobile-card-primary-light};
-  --bg-menu-mobile-button-pressed-primary: #{$bg-menu-mobile-button-pressed-primary-light};
-  --on-bg-menu-button-active-secondary: #{$on-bg-menu-button-active-secondary-light};
-  --bg-menu-button-active-secondary: #{$bg-menu-button-active-secondary-light};
+  --divider-menu-active-primary: #{th.$divider-menu-active-primary-light};
+  --bg-menu-primary: #{th.$bg-menu-active-primary-light};
+  --on-bg-menu-primary: #{th.$on-bg-menu-primary-light};
+  --on-bg-menu-button-active-primary: #{th.$on-bg-menu-button-active-primary-light};
+  --bg-menu-button-hover-primary: #{th.$bg-menu-button-hover-primary-light};
+  --on-bg-menu-button-hover-primary: #{th.$on-bg-menu-button-hover-primary-light};
+  --on-bg-menu-button-disabled-primary: #{th.$on-bg-menu-button-disabled-primary-light};
+  --bg-menu-button-pressed-primary: #{th.$bg-menu-button-pressed-primary-light};
+  --on-bg-menu-button-pressed-primary: #{th.$on-bg-menu-button-pressed-primary-light};
+  --divider-menu-pressed-primary: #{th.$divider-menu-pressed-primary-light};
+  --bg-menu-mobile-primary: #{th.$bg-menu-mobile-primary-light};
+  --bg-menu-mobile-card-primary: #{th.$bg-menu-mobile-card-primary-light};
+  --bg-menu-mobile-button-pressed-primary: #{th.$bg-menu-mobile-button-pressed-primary-light};
+  --on-bg-menu-button-active-secondary: #{th.$on-bg-menu-button-active-secondary-light};
+  --bg-menu-button-active-secondary: #{th.$bg-menu-button-active-secondary-light};
 
   // Back-button
-  --back-button-active-primary: #{$back-button-active-primary-light};
-  --on-bg-back-button-hover-primary: #{$on-bg-back-button-hover-primary-light};
-  --bg-back-button-hover-primary: #{$bg-back-button-hover-primary-light};
-  --back-button-pressed-primary: #{$back-button-pressed-primary-light};
-  --back-button-disabled-primary: #{$back-button-disabled-primary-light};
+  --back-button-active-primary: #{th.$back-button-active-primary-light};
+  --on-bg-back-button-hover-primary: #{th.$on-bg-back-button-hover-primary-light};
+  --bg-back-button-hover-primary: #{th.$bg-back-button-hover-primary-light};
+  --back-button-pressed-primary: #{th.$back-button-pressed-primary-light};
+  --back-button-disabled-primary: #{th.$back-button-disabled-primary-light};
 
   // Breadcrumb-button
-  --breadcrumb-button-active-primary: #{$breadcrumb-button-active-primary-light};
-  --on-bg-breadcrumb-button-hover-primary: #{$on-bg-breadcrumb-button-hover-primary-light};
-  --bg-breadcrumb-button-hover-primary: #{$bg-breadcrumb-button-hover-primary-light};
-  --breadcrumb-button-pressed-primary: #{$breadcrumb-button-pressed-primary-light};
-  --breadcrumb-button-disabled-primary: #{$breadcrumb-button-disabled-primary-light};
-  --breadcrumb-button-base-primary: #{$breadcrumb-button-base-primary-light};
+  --breadcrumb-button-active-primary: #{th.$breadcrumb-button-active-primary-light};
+  --on-bg-breadcrumb-button-hover-primary: #{th.$on-bg-breadcrumb-button-hover-primary-light};
+  --bg-breadcrumb-button-hover-primary: #{th.$bg-breadcrumb-button-hover-primary-light};
+  --breadcrumb-button-pressed-primary: #{th.$breadcrumb-button-pressed-primary-light};
+  --breadcrumb-button-disabled-primary: #{th.$breadcrumb-button-disabled-primary-light};
+  --breadcrumb-button-base-primary: #{th.$breadcrumb-button-base-primary-light};
 
   // notification-button
-  --on-bg-notification-button-active: #{$on-bg-notification-button-active-light};
-  --bg-notification-button-active: #{$bg-notification-button-active-light};
-  --on-bg-notification-button-hover: #{$on-bg-notification-button-hover-light};
-  --bg-notification-button-hover: #{$bg-notification-button-hover-light};
-  --on-bg-label-notification-button-hover: #{$on-bg-label-notification-button-hover-light};
-  --bg-label-notification-button-hover: #{$bg-label-notification-button-hover-light};
-  --on-bg-notification-button-pressed: #{$on-bg-notification-button-pressed-light};
-  --bg-notification-button-pressed: #{$bg-notification-button-pressed-light};
-  --on-bg-notification-button-disabled: #{$on-bg-notification-button-disabled-light};
-  --bg-notification-button-disabled: #{$bg-notification-button-disabled-light};
+  --on-bg-notification-button-active: #{th.$on-bg-notification-button-active-light};
+  --bg-notification-button-active: #{th.$bg-notification-button-active-light};
+  --on-bg-notification-button-hover: #{th.$on-bg-notification-button-hover-light};
+  --bg-notification-button-hover: #{th.$bg-notification-button-hover-light};
+  --on-bg-label-notification-button-hover: #{th.$on-bg-label-notification-button-hover-light};
+  --bg-label-notification-button-hover: #{th.$bg-label-notification-button-hover-light};
+  --on-bg-notification-button-pressed: #{th.$on-bg-notification-button-pressed-light};
+  --bg-notification-button-pressed: #{th.$bg-notification-button-pressed-light};
+  --on-bg-notification-button-disabled: #{th.$on-bg-notification-button-disabled-light};
+  --bg-notification-button-disabled: #{th.$bg-notification-button-disabled-light};
 
   // badge-button
-  --on-bg-notification-badge-button: #{$on-bg-notification-badge-button-light};
-  --bg-notification-badge-button: #{$bg-notification-badge-button-light};
-  --on-bg-menu-badge-button: #{$on-bg-menu-badge-button-light};
-  --bg-menu-badge-button: #{$bg-menu-badge-button-light};
+  --on-bg-notification-badge-button: #{th.$on-bg-notification-badge-button-light};
+  --bg-notification-badge-button: #{th.$bg-notification-badge-button-light};
+  --on-bg-menu-badge-button: #{th.$on-bg-menu-badge-button-light};
+  --bg-menu-badge-button: #{th.$bg-menu-badge-button-light};
 
   // icon-button
-  --on-bg-icon-button-active: #{$on-bg-icon-button-active-light};
-  --on-bg-icon-button-hover: #{$on-bg-icon-button-hover-light};
-  --bg-icon-button-hover: #{$bg-icon-button-hover-light};
-  --on-bg-label-icon-button-hover: #{$on-bg-label-icon-button-hover-light};
-  --bg-label-icon-button-hover: #{$bg-label-icon-button-hover-light};
-  --on-bg-icon-button-pressed: #{$on-bg-icon-button-pressed-light};
-  --bg-icon-button-pressed: #{$bg-icon-button-pressed-light};
-  --on-bg-icon-button-disabled: #{$on-bg-icon-button-disabled-light};
+  --on-bg-icon-button-active: #{th.$on-bg-icon-button-active-light};
+  --on-bg-icon-button-hover: #{th.$on-bg-icon-button-hover-light};
+  --bg-icon-button-hover: #{th.$bg-icon-button-hover-light};
+  --on-bg-label-icon-button-hover: #{th.$on-bg-label-icon-button-hover-light};
+  --bg-label-icon-button-hover: #{th.$bg-label-icon-button-hover-light};
+  --on-bg-icon-button-pressed: #{th.$on-bg-icon-button-pressed-light};
+  --bg-icon-button-pressed: #{th.$bg-icon-button-pressed-light};
+  --on-bg-icon-button-disabled: #{th.$on-bg-icon-button-disabled-light};
 
   // generic-avatar
-  --cl-generic-avatar-label-primary: #{$cl-generic-avatar-label-primary-light};
-  --cl-generic-avatar-label-disabled: #{$cl-generic-avatar-label-disabled-light};
-  --on-bg-generic-avatar-initials-primary: #{$bg-generic-avatar-initials-primary-light};
-  --on-bg-generic-avatar-initials-disabled: #{$bg-generic-avatar-initials-disabled-light};
-  --cl-generic-avatar-initial-text-primary: #{$cl-generic-avatar-initials-text-primary-light};
-  --cl-generic-avatar-initial-text-disabled: #{$cl-generic-avatar-initials-text-disabled-light};
-
-  --on-bg-generic-avatar-secondary-active: #{$bg-generic-avatar-secondary-active-light};
-  --on-bg-generic-avatar-secondary-inactive: #{$bg-generic-avatar-secondary-inactive-light};
-  --on-bg-generic-avatar-secondary-blocked: #{$bg-generic-avatar-secondary-blocked-light};
-
-  // backdrop
-  --backdrop-primary: #{$backdrop-primary-light};
-  --backdrop-opacity: 0.25;
+  --cl-generic-avatar-label-primary: #{th.$cl-generic-avatar-label-primary-light};
+  --cl-generic-avatar-label-disabled: #{th.$cl-generic-avatar-label-disabled-light};
+  --bg-generic-avatar-initials-primary: #{th.$bg-generic-avatar-initials-primary-light};
+  --bg-generic-avatar-initials-disabled: #{th.$bg-generic-avatar-initials-disabled-light};
+  --cl-generic-avatar-initial-text-primary: #{th.$cl-generic-avatar-initials-text-primary-light};
+  --cl-generic-avatar-initial-text-disabled: #{th.$cl-generic-avatar-initials-text-disabled-light};
 
   // chip
-  --cl-chip-disabled-state: #{$cl-chip-disabled-state-light};
-  --cl-chip-active-primary: #{$cl-chip-active-primary-light};
-  --bg-chip-active-primary: #{$bg-chip-active-primary-light};
-  --cl-chip-active-close-button: #{$cl-chip-active-close-button-light};
-  --bg-chip-active-close-button: #{$bg-chip-active-close-button-light};
-  --bg-chip-active-hover: #{$bg-chip-active-hover-light};
-  --cl-chip-active-close-button-hover: #{$cl-chip-active-close-button-hover-light};
-  --bg-chip-active-close-button-hover: #{$bg-chip-active-close-button-hover-light};
+  --cl-chip-disabled-state: #{th.$cl-chip-disabled-state-light};
+  --cl-chip-active-primary: #{th.$cl-chip-active-primary-light};
+  --bg-chip-active-primary: #{th.$bg-chip-active-primary-light};
+  --cl-chip-active-close-button: #{th.$cl-chip-active-close-button-light};
+  --bg-chip-active-close-button: #{th.$bg-chip-active-close-button-light};
+  --bg-chip-active-hover: #{th.$bg-chip-active-hover-light};
+  --cl-chip-active-close-button-hover: #{th.$cl-chip-active-close-button-hover-light};
+  --bg-chip-active-close-button-hover: #{th.$bg-chip-active-close-button-hover-light};
 
   // Currencies 
-  --btc-primary: #{$btc-primary-light};
-  --busd-primary: #{$busd-primary-light};
-  --ltc-primary: #{$ltc-secondary-light};
-  --ltc-secondary: #{$on-bg-currency};
-  --eurc-primary: #{$eurc-primary-light};
-  --eurc-secondary: #{$eurc-secondary-light};
-  --trx-primary: #{$trx-primary-light};
-  --usdt-primary: #{$usdt-primary-light};
-  --bch-primary: #{$bch-primary-light};
-  --usd-primary: #{$usdt-primary-light};
-  --bnb-primary: #{$bnb-primary-light};
-  --eth-primary: #{$eth-primary-light};
-  --eth-secondary: #{$eth-secondary-light};
-  --eth-terciary: #{$eth-terciary-light};
-  --eth-quaternary: #{$eth-quaternary-light};
-  //--eth-quinary: #{$eth-quinary-light};
-  --eth-senary: #{$eth-senary-light};
-  --eth-septenary: #{$eth-septenary-light};
-  --wbtc-primary: #{$wbtc-primary-light};
-  --wbtc-secondary: #{$wbtc-secundary-dark};
-  --wbtc-terciary: #{$wbtc-terciary-light};
-  --bep-20-primary: #{$bep-20-primary-light};
-  --lightning-primary: #{$lightning-primary-light};
-  --sol-primary: #{$sol-primary-light};
-  --sol-secondary: #{$sol-secondary-light};
-  --sol-terciary: #{$sol-terciary-light};
-  --ada-primary: #{$ada-primary-light};
-  --on-bg-currency: #{$on-bg-currency};
+  --btc-primary: #{th.$btc-primary-light};
+  --busd-primary: #{th.$busd-primary-light};
+  --ltc-primary: #{th.$ltc-secondary-light};
+  --ltc-secondary: #{th.$on-bg-currency};
+  --eurc-primary: #{th.$eurc-primary-light};
+  --eurc-secondary: #{th.$eurc-secondary-light};
+  --trx-primary: #{th.$trx-primary-light};
+  --usdt-primary: #{th.$usdt-primary-light};
+  --bch-primary: #{th.$bch-primary-light};
+  --usd-primary: #{th.$usdt-primary-light};
+  --bnb-primary: #{th.$bnb-primary-light};
+  --eth-primary: #{th.$eth-primary-light};
+  --eth-secondary: #{th.$eth-secondary-light};
+  --eth-terciary: #{th.$eth-terciary-light};
+  --eth-quaternary: #{th.$eth-quaternary-light};
+  //--eth-quinary: #{th.$eth-quinary-light};
+  --eth-senary: #{th.$eth-senary-light};
+  --eth-septenary: #{th.$eth-septenary-light};
+  --wbtc-primary: #{th.$wbtc-primary-light};
+  --wbtc-secondary: #{th.$wbtc-secundary-dark};
+  --wbtc-terciary: #{th.$wbtc-terciary-light};
+  --bep-20-primary: #{th.$bep-20-primary-light};
+  --lightning-primary: #{th.$lightning-primary-light};
+  --sol-primary: #{th.$sol-primary-light};
+  --sol-secondary: #{th.$sol-secondary-light};
+  --sol-terciary: #{th.$sol-terciary-light};
+  --ada-primary: #{th.$ada-primary-light};
+  --on-bg-currency: #{th.$on-bg-currency};
 
   // shadow
-  --shadow-primary: #{$shadow-primary-light};
+  --shadow-primary: #{th.$shadow-primary-light};
+
   // DONT REMOVE
-  --shadow-primary-rgba: #{to-rgb($shadow-primary-light)};
+  --shadow-r: #{red(th.$shadow-primary-light)};
+  --shadow-g: #{green(th.$shadow-primary-light)};
+  --shadow-b: #{blue(th.$shadow-primary-light)};
+
+  --shadow-primary-rgba: #{to-rgb(th.$shadow-primary-light)};
   --shadow-opacity: 0.22;
 }
 
 .hero-dark-theme {
   // button-primary
-  --on-bg-button-active-primary: #{$on-bg-button-active-primary-dark};
-  --bg-button-active-primary: #{$bg-button-active-primary-dark};
-  --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-dark};
-  --bg-button-hover-primary: #{$bg-button-hover-primary-dark};
-  --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-dark};
-  --bg-button-pressed-primary: #{$bg-button-pressed-primary-dark};
+  --on-bg-button-active-primary: #{th.$on-bg-button-active-primary-dark};
+  --bg-button-active-primary: #{th.$bg-button-active-primary-dark};
+  --on-bg-button-hover-primary: #{th.$on-bg-button-hover-primary-dark};
+  --bg-button-hover-primary: #{th.$bg-button-hover-primary-dark};
+  --on-bg-button-pressed-primary: #{th.$on-bg-button-pressed-primary-dark};
+  --bg-button-pressed-primary: #{th.$bg-button-pressed-primary-dark};
 
   // button-secondary
-  --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-dark};
-  --outline-button-active-secondary: #{$outline-button-active-secondary-dark};
-  --bg-button-active-secondary: #{$bg-button-active-secondary-dark};
-  --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-dark};
-  --outline-button-hover-secondary: #{$outline-button-hover-secondary-dark};
-  --bg-button-hover-secondary: #{$bg-button-hover-secondary-dark};
-  --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-dark};
-  --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-dark};
-  --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-dark};
+  --on-bg-button-active-secondary: #{th.$on-bg-button-active-secondary-dark};
+  --outline-button-active-secondary: #{th.$outline-button-active-secondary-dark};
+  --bg-button-active-secondary: #{th.$bg-button-active-secondary-dark};
+  --on-bg-button-hover-secondary: #{th.$on-bg-button-hover-secondary-dark};
+  --outline-button-hover-secondary: #{th.$outline-button-hover-secondary-dark};
+  --bg-button-hover-secondary: #{th.$bg-button-hover-secondary-dark};
+  --on-bg-button-pressed-secondary: #{th.$on-bg-button-pressed-secondary-dark};
+  --outline-button-pressed-secondary: #{th.$outline-button-pressed-secondary-dark};
+  --bg-button-pressed-secondary: #{th.$bg-button-pressed-secondary-dark};
 
   // button-tertiary
-  --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-dark};
-  --bg-button-active-tertiary: #{$bg-button-active-tertiary-dark};
-  --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-dark};
-  --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-dark};
-  --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-dark};
-  --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-dark};
+  --on-bg-button-active-tertiary: #{th.$on-bg-button-active-tertiary-dark};
+  --bg-button-active-tertiary: #{th.$bg-button-active-tertiary-dark};
+  --on-bg-button-hover-tertiary: #{th.$on-bg-button-hover-tertiary-dark};
+  --bg-button-hover-tertiary: #{th.$bg-button-hover-tertiary-dark};
+  --on-bg-button-pressed-tertiary: #{th.$on-bg-button-pressed-tertiary-dark};
+  --bg-button-pressed-tertiary: #{th.$bg-button-pressed-tertiary-dark};
 
   // button-positive
-  --on-bg-button-active-positive: #{$on-bg-button-active-positive-dark};
-  --bg-button-active-positive: #{$bg-button-active-positive-dark};
-  --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-dark};
-  --bg-button-hover-positive: #{$bg-button-hover-positive-dark};
-  --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
-  --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
+  --on-bg-button-active-positive: #{th.$on-bg-button-active-positive-dark};
+  --bg-button-active-positive: #{th.$bg-button-active-positive-dark};
+  --on-bg-button-hover-positive: #{th.$on-bg-button-hover-positive-dark};
+  --bg-button-hover-positive: #{th.$bg-button-hover-positive-dark};
+  --on-bg-button-pressed-positive: #{th.$on-bg-button-pressed-positive-dark};
+  --bg-button-pressed-positive: #{th.$bg-button-pressed-positive-dark};
 
   // button-negative
-  --on-bg-button-active-negative: #{$on-bg-button-active-negative-dark};
-  --bg-button-active-negative: #{$bg-button-active-negative-dark};
-  --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-dark};
-  --bg-button-hover-negative: #{$bg-button-hover-negative-dark};
-  --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-dark};
-  --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
+  --on-bg-button-active-negative: #{th.$on-bg-button-active-negative-dark};
+  --bg-button-active-negative: #{th.$bg-button-active-negative-dark};
+  --on-bg-button-hover-negative: #{th.$on-bg-button-hover-negative-dark};
+  --bg-button-hover-negative: #{th.$bg-button-hover-negative-dark};
+  --on-bg-button-pressed-negative: #{th.$on-bg-button-pressed-negative-dark};
+  --bg-button-pressed-negative: #{th.$bg-button-pressed-negative-dark};
 
   // button-alternative
-  --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-dark};
-  --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
-  --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-dark};
-  --bg-button-hover-alternative: #{$bg-button-hover-alternative-dark};
-  --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
-  --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
+  --on-bg-button-active-alternative: #{th.$on-bg-button-active-alternative-dark};
+  --bg-button-active-alternative: #{th.$bg-button-active-alternative-dark};
+  --on-bg-button-hover-alternative: #{th.$on-bg-button-hover-alternative-dark};
+  --bg-button-hover-alternative: #{th.$bg-button-hover-alternative-dark};
+  --on-bg-button-pressed-alternative: #{th.$on-bg-button-pressed-alternative-dark};
+  --bg-button-pressed-alternative: #{th.$bg-button-pressed-alternative-dark};
 
   // button-neutral
-  --on-bg-button-active-neutro: #{$on-bg-button-active-neutro-dark};
-  --bg-button-active-neutro: #{$bg-button-active-neutro-dark};
-  --bg-neutro-dot-primary: #{$bg-neutro-dot-primary-dark};
+  --on-bg-button-active-neutro: #{th.$on-bg-button-active-neutro-dark};
+  --bg-button-active-neutro: #{th.$bg-button-active-neutro-dark};
+  --bg-neutro-dot-primary: #{th.$bg-neutro-dot-primary-dark};
 
   // disabled-status
-  --on-bg-disabled: #{$on-bg-disabled-dark};
-  --bg-disabled: #{$bg-disabled-dark};
-  --outline-disabled: #{$outline-disabled-dark};
+  --on-bg-disabled: #{th.$on-bg-disabled-dark};
+  --bg-disabled: #{th.$bg-disabled-dark};
+  --outline-disabled: #{th.$outline-disabled-dark};
 
   // surface
-  --surface-primary: #{$surface-primary-dark};
-  --surface-secondary: #{$surface-secondary-dark};
-  --surface-tertiary: #{$surface-tertiary-dark};
+  --surface-primary: #{th.$surface-primary-dark};
+  --surface-secondary: #{th.$surface-secondary-dark};
+  --surface-tertiary: #{th.$surface-tertiary-dark};
   --surface-opacity: .6;
 
   // text
-  --text-primary: #{$text-primary-dark};
-  --text-highlight-primary: #{$text-highlight-primary-dark};
+  --text-primary: #{th.$text-primary-dark};
+  --text-highlight-primary: #{th.$text-highlight-primary-dark};
 
   // divider
-  --divider-primary: #{$divider-primary-dark};
+  --divider-primary: #{th.$divider-primary-dark};
 
   // logo
-  --logo-primary: #{$logo-primary-dark};
+  --logo-primary: #{th.$logo-primary-dark};
 
   // highlight
-  --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
-  --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
-  --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
-  --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
+  --on-bg-highlight-neutro-primary: #{th.$on-bg-highlight-neutro-primary-dark};
+  --bg-highlight-neutro-primary: #{th.$bg-highlight-neutro-primary-dark};
+  --on-bg-highlight-neutro-secondary: #{th.$on-bg-highlight-neutro-secondary-dark};
+  --bg-highlight-neutro-secondary: #{th.$bg-highlight-neutro-secondary-dark};
 
   // system
-  --positive-primary: #{$positive-primary-dark};
-  --negative-primary: #{$negative-primary-dark};
-  --cta-primary: #{$bg-button-active-primary-dark};
-  --alternative-primary: #{$alternative-primary-dark};
+  --positive-primary: #{th.$positive-primary-dark};
+  --negative-primary: #{th.$negative-primary-dark};
+  --cta-primary: #{th.$bg-button-active-primary-dark};
+  --alternative-primary: #{th.$alternative-primary-dark};
 
   // calendar
-  --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
-  --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-dark};
-  --on-bg-calender-primary: #{$on-bg-calender-primary-dark};
-  --bg-calender-primary: #{$bg-calender-primary-dark};
-  --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-dark};
-  --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-dark};
-  --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-dark};
-  --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-dark};
-  --number-calender-active-primary: #{$number-calender-active-primary-dark};
-  --number-calendar-hover-primary: #{$number-calendar-hover-primary-dark};
-  --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-dark};
-  --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-dark};
-  --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-dark};
-  --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-dark};
+  --on-bg-calendar-nav-primary: #{th.$on-bg-calendar-nav-primary-dark};
+  --bg-calendar-nav-primary: #{th.$bg-calendar-nav-primary-dark};
+  --on-bg-calender-primary: #{th.$on-bg-calender-primary-dark};
+  --bg-calender-primary: #{th.$bg-calender-primary-dark};
+  --arrow-calendar-active-primary: #{th.$arrow-calendar-active-primary-dark};
+  --arrow-calendar-hover-primary: #{th.$arrow-calendar-hover-primary-dark};
+  --bg-arrow-calendar-hover-primary: #{th.$bg-arrow-calendar-hover-primary-dark};
+  --arrow-calendar-disabled-primary: #{th.$arrow-calendar-disabled-primary-dark};
+  --number-calender-active-primary: #{th.$number-calender-active-primary-dark};
+  --number-calendar-hover-primary: #{th.$number-calendar-hover-primary-dark};
+  --bg-number-calendar-hover-primary: #{th.$bg-number-calendar-hover-primary-dark};
+  --number-calendar-pressed-primary: #{th.$number-calendar-pressed-primary-dark};
+  --bg-number-calendar-pressed-primary: #{th.$bg-number-calendar-pressed-primary-dark};
+  --number-calendar-disabled-primary: #{th.$number-calendar-disabled-primary-dark};
 
   // checkbox
-  --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-dark};
-  --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
-  --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-dark};
+  --outline-checkbox-off-primary: #{th.$outline-checkbox-off-primary-dark};
+  --on-bg-checkbox-on-primary: #{th.$on-bg-checkbox-on-primary-dark};
+  --bg-checkbox-on-primary: #{th.$bg-checkbox-on-primary-dark};
 
   // radio button
-  --radio-button-off-primary: #{$radio-button-off-primary-dark};
-  --radio-button-on-primary: #{$radio-button-on-primary-dark};
+  --radio-button-off-primary: #{th.$radio-button-off-primary-dark};
+  --radio-button-on-primary: #{th.$radio-button-on-primary-dark};
 
   // stepper
-  --text-stepper-pending-primary: #{$text-stepper-pending-primary-dark};
-  --line-stepper-pending-primary: #{$line-stepper-pending-primary-dark};
-  --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-dark};
-  --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-dark};
-  --text-stepper-current-primary: #{$text-stepper-current-primary-dark};
-  --line-stepper-current-primary: #{$line-stepper-current-primary-dark};
-  --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-dark};
-  --bg-stepper-current-primary: #{$bg-stepper-current-primary-dark};
-  --text-stepper-completed-primary: #{$text-stepper-completed-primary-dark};
-  --line-stepper-completed-primary: #{$line-stepper-completed-primary-dark};
-  --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-dark};
-  --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
+  --text-stepper-pending-primary: #{th.$text-stepper-pending-primary-dark};
+  --line-stepper-pending-primary: #{th.$line-stepper-pending-primary-dark};
+  --on-bg-stepper-pending-primary: #{th.$on-bg-stepper-pending-primary-dark};
+  --bg-stepper-pending-primary: #{th.$bg-stepper-pending-primary-dark};
+  --text-stepper-current-primary: #{th.$text-stepper-current-primary-dark};
+  --line-stepper-current-primary: #{th.$line-stepper-current-primary-dark};
+  --on-bg-stepper-current-primary: #{th.$on-bg-stepper-current-primary-dark};
+  --bg-stepper-current-primary: #{th.$bg-stepper-current-primary-dark};
+  --text-stepper-completed-primary: #{th.$text-stepper-completed-primary-dark};
+  --line-stepper-completed-primary: #{th.$line-stepper-completed-primary-dark};
+  --on-bg-stepper-completed-primary: #{th.$on-bg-stepper-completed-primary-dark};
+  --bg-stepper-completed-primary: #{th.$bg-stepper-completed-primary-dark};
 
   // table
-  --on-bg-table-header-primary: #{$on-bg-table-header-primary-dark};
-  --bg-table-header-primary: #{$bg-table-header-primary-dark};
-  --on-bg-table-active-primary: #{$on-bg-table-active-primary-dark};
-  --bg-table-active-primary: #{$bg-table-active-primary-dark};
-  --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-dark};
-  --bg-table-hover-primary: #{$bg-table-hover-primary-dark};
-  --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-dark};
-  --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
+  --on-bg-table-header-primary: #{th.$on-bg-table-header-primary-dark};
+  --bg-table-header-primary: #{th.$bg-table-header-primary-dark};
+  --on-bg-table-active-primary: #{th.$on-bg-table-active-primary-dark};
+  --bg-table-active-primary: #{th.$bg-table-active-primary-dark};
+  --on-bg-table-hover-primary: #{th.$on-bg-table-hover-primary-dark};
+  --bg-table-hover-primary: #{th.$bg-table-hover-primary-dark};
+  --on-bg-table-header-secondary: #{th.$on-bg-table-header-secondary-dark};
+  --bg-table-header-secondary: #{th.$bg-table-header-secondary-dark};
 
   // tooltip
-  --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-dark};
-  --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
+  --on-bg-tooltip-primary: #{th.$on-bg-tooltip-primary-dark};
+  --bg-tooltip-primary: #{th.$bg-tooltip-primary-dark};
 
   // text-field
-  --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
-  --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-dark};
-  --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-dark};
-  --label-text-empty-enabled-primary: #{$label-text-empty-enabled-primary-dark};
-  --bg-field-empty-enabled-hover-primary: #{$bg-field-empty-enabled-hover-primary-dark};
-  --bg-field-full-enabled-primary: #{$bg-field-full-enabled-primary-dark};
-  --outline-field-full-enabled-primary: #{$outline-field-full-enabled-primary-dark};
-  --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-dark};
-  --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-dark};
-  --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-dark};
-  --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-dark};
-  --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-dark};
-  --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-dark};
-  --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-dark};
-  --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-dark};
-  --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-dark};
-  --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-dark};
-  --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-dark};
-  --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-dark};
-  --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-dark};
-  --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
-  --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-dark};
-  --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-dark};
-  --outline-field-full-enabled-typing-primary: #{$outline-field-full-enabled-typing-primary-dark};
-  --outline-field-full-enabled-typed-primary: #{$outline-field-full-enabled-typed-primary-dark};
-  --bg-field-autofill: #{$bg-field-autofill-dark};
-  --line-empty-enabled-primary: #{$line-empty-enabled-primary-dark};
-  --equivalence-text-empty-enabled-primary: #{$equivalence-text-empty-enabled-primary-dark};
-  --outline-field-empty-enabled-hover-primary: #{$outline-field-empty-enabled-hover-primary-dark};
-  --equivalence-text-full-enabled-typing-primary: #{$equivalence-text-full-enabled-typing-primary-dark};
-  --line-full-enabled-typing-primary: #{$line-full-enabled-typing-primary-dark};
-  --label-full-enabled-typing-primary: #{$label-full-enabled-typing-primary-dark};
-  --equivalence-text-empty-disabled-primary: #{$equivalence-text-empty-disabled-primary-dark};
-  --line-empty-disabled-primary: #{$line-empty-disabled-primary-dark};
+  --bg-field-empty-enabled-primary: #{th.$bg-field-empty-enabled-primary-dark};
+  --outline-field-empty-enabled-primary: #{th.$outline-field-empty-enabled-primary-dark};
+  --placeholder-empty-enabled-primary: #{th.$placeholder-empty-enabled-primary-dark};
+  --label-text-empty-enabled-primary: #{th.$label-text-empty-enabled-primary-dark};
+  --bg-field-empty-enabled-hover-primary: #{th.$bg-field-empty-enabled-hover-primary-dark};
+  --bg-field-full-enabled-primary: #{th.$bg-field-full-enabled-primary-dark};
+  --outline-field-full-enabled-primary: #{th.$outline-field-full-enabled-primary-dark};
+  --input-text-full-enabled-primary: #{th.$input-text-full-enabled-primary-dark};
+  --label-text-full-enabled-primary: #{th.$label-text-full-enabled-primary-dark};
+  --bg-field-full-enabled-hover-primary: #{th.$bg-field-full-enabled-hover-primary-dark};
+  --bg-field-empty-disabled-primary: #{th.$bg-field-empty-disabled-primary-dark};
+  --placeholder-empty-disabled-primary: #{th.$placeholder-empty-disabled-primary-dark};
+  --label-text-empty-disabled-primary: #{th.$label-text-empty-disabled-primary-dark};
+  --bg-field-full-enabled-pressed-primary: #{th.$bg-field-full-enabled-pressed-primary-dark};
+  --outline-field-full-enabled-pressed-primary: #{th.$outline-field-full-enabled-pressed-primary-dark};
+  --placeholder-full-enabled-pressed-primary: #{th.$placeholder-full-enabled-pressed-primary-dark};
+  --label-text-full-enabled-pressed-primary: #{th.$label-text-full-enabled-pressed-primary-dark};
+  --bg-field-full-disabled-primary: #{th.$bg-field-full-disabled-primary-dark};
+  --input-text-full-disabled-primary: #{th.$input-text-full-disabled-primary-dark};
+  --label-text-full-disabled-primary: #{th.$label-text-full-disabled-primary-dark};
+  --bg-field-full-read-only-primary: #{th.$bg-field-full-read-only-primary-dark};
+  --input-text-full-read-only-primary: #{th.$input-text-full-read-only-primary-dark};
+  --label-text-full-read-only-primary: #{th.$label-text-full-read-only-primary-dark};
+  --outline-field-full-enabled-typing-primary: #{th.$outline-field-full-enabled-typing-primary-dark};
+  --outline-field-full-enabled-typed-primary: #{th.$outline-field-full-enabled-typed-primary-dark};
+  --bg-field-autofill: #{th.$bg-field-autofill-dark};
+  --line-empty-enabled-primary: #{th.$line-empty-enabled-primary-dark};
+  --equivalence-text-empty-enabled-primary: #{th.$equivalence-text-empty-enabled-primary-dark};
+  --outline-field-empty-enabled-hover-primary: #{th.$outline-field-empty-enabled-hover-primary-dark};
+  --equivalence-text-full-enabled-typing-primary: #{th.$equivalence-text-full-enabled-typing-primary-dark};
+  --line-full-enabled-typing-primary: #{th.$line-full-enabled-typing-primary-dark};
+  --label-full-enabled-typing-primary: #{th.$label-full-enabled-typing-primary-dark};
+  --equivalence-text-empty-disabled-primary: #{th.$equivalence-text-empty-disabled-primary-dark};
+  --line-empty-disabled-primary: #{th.$line-empty-disabled-primary-dark};
 
   // icons
-  --icon-active-primary: #{$icon-active-primary-dark};
-  --icon-hover-primary: #{$icon-hover-primary-dark};
+  --icon-active-primary: #{th.$icon-active-primary-dark};
+  --icon-hover-primary: #{th.$icon-hover-primary-dark};
 
   // dropdown-list
-  --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-dark};
-  --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-dark};
-  --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-dark};
-  --on-bg-dropdown-item-hover-primary: #{$on-bg-dropdown-item-hover-primary-dark};
-  --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-dark};
-  --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-dark};
-  --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-dark};
+  --bg-dropdown-list-primary: #{th.$bg-dropdown-list-primary-dark};
+  --outline-dropdown-list-primary: #{th.$outline-dropdown-list-primary-dark};
+  --on-bg-dropdown-item-active-primary: #{th.$on-bg-dropdown-item-active-primary-dark};
+  --on-bg-dropdown-item-hover-primary: #{th.$on-bg-dropdown-item-hover-primary-dark};
+  --bg-dropdown-item-hover-primary: #{th.$bg-dropdown-item-hover-primary-dark};
+  --on-bg-dropdown-item-pressed-primary: #{th.$on-bg-dropdown-item-pressed-primary-dark};
+  --on-bg-dropdown-item-disabled-primary: #{th.$on-bg-dropdown-item-disabled-primary-dark};
 
   //dropdown-list-display-currency
-  --bg-dropdown-list-dc-primary: #{$bg-dropdown-list-dc-primary-dark};
-  --outline-dropdown-list-dc-primary: #{$outline-dropdown-list-dc-primary-dark};
+  --bg-dropdown-list-dc-primary: #{th.$bg-dropdown-list-dc-primary-dark};
+  --outline-dropdown-list-dc-primary: #{th.$outline-dropdown-list-dc-primary-dark};
 
   // loading
-  --loading-primary: #{$loading-primary-dark};
+  --loading-primary: #{th.$loading-primary-dark};
 
   // switch
-  --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
-  --bg-switch-on-primary: #{$bg-switch-on-primary-dark};
-  --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-dark};
-  --bg-switch-off-primary: #{$bg-switch-off-primary-dark};
-  --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
-  --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-dark};
+  --on-bg-switch-on-primary: #{th.$on-bg-switch-on-primary-dark};
+  --bg-switch-on-primary: #{th.$bg-switch-on-primary-dark};
+  --on-bg-switch-off-primary: #{th.$on-bg-switch-off-primary-dark};
+  --bg-switch-off-primary: #{th.$bg-switch-off-primary-dark};
+  --on-bg-switch-disabled-primary: #{th.$on-bg-switch-disabled-primary-dark};
+  --bg-switch-disabled-primary: #{th.$bg-switch-disabled-primary-dark};
 
   // notification
-  --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
-  --bg-notification-primary: #{$bg-notification-primary-dark};
-  --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-dark};
-  --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-dark};
-  --notification-error-highlight-primary: #{$notification-error-highlight-primary-dark};
-  --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-dark};
-  --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-dark};
-  --notification-success-highlight-primary: #{$notification-success-highlight-primary-dark};
-  --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
-  --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-dark};
-  --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
-  --bg-notification-list-primary: #{$bg-notification-list-primary-dark};
-  --on-bg-notification-list-primary: #{$on-bg-notification-list-primary-dark};
+  --on-bg-notification-primary: #{th.$on-bg-notification-primary-dark};
+  --bg-notification-primary: #{th.$bg-notification-primary-dark};
+  --on-bg-icon-notification-error-primary: #{th.$on-bg-icon-notification-error-primary-dark};
+  --bg-icon-notification-error-primary: #{th.$bg-icon-notification-error-primary-dark};
+  --notification-error-highlight-primary: #{th.$notification-error-highlight-primary-dark};
+  --on-bg-icon-notification-success-primary: #{th.$on-bg-icon-notification-success-primary-dark};
+  --bg-icon-notification-success-primary: #{th.$bg-icon-notification-success-primary-dark};
+  --notification-success-highlight-primary: #{th.$notification-success-highlight-primary-dark};
+  --on-bg-icon-notification-warning-primary: #{th.$on-bg-icon-notification-warning-primary-dark};
+  --bg-icon-notification-warning-primary: #{th.$bg-icon-notification-warning-primary-dark};
+  --notification-warning-highlight-primary: #{th.$notification-warning-highlight-primary-dark};
+  --bg-notification-list-primary: #{th.$bg-notification-list-primary-dark};
+  --on-bg-notification-list-primary: #{th.$on-bg-notification-list-primary-dark};
 
   // dialog
-  --bg-dialog-primary: #{$bg-dialog-primary-dark};
-  --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-dark};
-  --bg-dialog-header-primary: #{$bg-dialog-header-primary-dark};
-  --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-dark};
-  --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-dark};
-  --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-dark};
-  --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
-  --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
+  --bg-dialog-primary: #{th.$bg-dialog-primary-dark};
+  --on-bg-dialog-header-primary: #{th.$on-bg-dialog-header-primary-dark};
+  --bg-dialog-header-primary: #{th.$bg-dialog-header-primary-dark};
+  --close-dialog-header-active-primary: #{th.$close-dialog-header-active-primary-dark};
+  --close-dialog-header-hover-primary: #{th.$close-dialog-header-hover-primary-dark};
+  --bg-close-dialog-header-hover-primary: #{th.$bg-close-dialog-header-hover-primary-dark};
+  --on-bg-icon-dialog-primary: #{th.$on-bg-icon-dialog-primary-dark};
+  --bg-icon-dialog-primary: #{th.$bg-icon-dialog-primary-dark};
 
   // link
-  --link-active-primary: #{$link-active-primary-dark};
-  --link-hover-primary: #{$link-hover-primary-dark};
-  --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
-  --link-disabled-primary: #{$link-disabled-primary-dark};
-  --link-visited-primary: #{$link-visited-primary-dark};
+  --link-active-primary: #{th.$link-active-primary-dark};
+  --link-hover-primary: #{th.$link-hover-primary-dark};
+  --bg-link-hover-primary: #{th.$bg-link-hover-primary-dark};
+  --link-disabled-primary: #{th.$link-disabled-primary-dark};
+  --link-visited-primary: #{th.$link-visited-primary-dark};
 
   // menu
-  --divider-menu-active-primary: #{$divider-menu-primary-dark};
-  --bg-menu-primary: #{$bg-menu-primary-dark};
-  --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
-  --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-dark};
-  --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-dark};
-  --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-dark};
-  --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-dark};
-  --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-dark};
-  --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-dark};
-  --divider-menu-pressed-primary: #{$divider-menu-pressed-primary-dark};
-  --bg-menu-mobile-primary: #{$bg-menu-mobile-primary-dark};
-  --bg-menu-mobile-card-primary: #{$bg-menu-mobile-card-primary-dark};
-  --bg-menu-mobile-button-pressed-primary: #{$bg-menu-mobile-button-pressed-primary-dark};
-  --on-bg-menu-button-active-secondary: #{$on-bg-menu-button-active-secondary-dark};
-  --bg-menu-button-active-secondary: #{$bg-menu-button-active-secondary-dark};
+  --divider-menu-active-primary: #{th.$divider-menu-primary-dark};
+  --bg-menu-primary: #{th.$bg-menu-primary-dark};
+  --on-bg-menu-primary: #{th.$on-bg-menu-primary-dark};
+  --on-bg-menu-button-active-primary: #{th.$on-bg-menu-button-active-primary-dark};
+  --bg-menu-button-hover-primary: #{th.$bg-menu-button-hover-primary-dark};
+  --on-bg-menu-button-hover-primary: #{th.$on-bg-menu-button-hover-primary-dark};
+  --on-bg-menu-button-disabled-primary: #{th.$on-bg-menu-button-disabled-primary-dark};
+  --bg-menu-button-pressed-primary: #{th.$bg-menu-button-pressed-primary-dark};
+  --on-bg-menu-button-pressed-primary: #{th.$on-bg-menu-button-pressed-primary-dark};
+  --divider-menu-pressed-primary: #{th.$divider-menu-pressed-primary-dark};
+  --bg-menu-mobile-primary: #{th.$bg-menu-mobile-primary-dark};
+  --bg-menu-mobile-card-primary: #{th.$bg-menu-mobile-card-primary-dark};
+  --bg-menu-mobile-button-pressed-primary: #{th.$bg-menu-mobile-button-pressed-primary-dark};
+  --on-bg-menu-button-active-secondary: #{th.$on-bg-menu-button-active-secondary-dark};
+  --bg-menu-button-active-secondary: #{th.$bg-menu-button-active-secondary-dark};
 
   // Back-button
-  --back-button-active-primary: #{$back-button-active-primary-dark};
-  --on-bg-back-button-hover-primary: #{$on-bg-back-button-hover-primary-dark};
-  --bg-back-button-hover-primary: #{$bg-back-button-hover-primary-dark};
-  --back-button-pressed-primary: #{$back-button-pressed-primary-dark};
-  --back-button-disabled-primary: #{$back-button-disabled-primary-dark};
+  --back-button-active-primary: #{th.$back-button-active-primary-dark};
+  --on-bg-back-button-hover-primary: #{th.$on-bg-back-button-hover-primary-dark};
+  --bg-back-button-hover-primary: #{th.$bg-back-button-hover-primary-dark};
+  --back-button-pressed-primary: #{th.$back-button-pressed-primary-dark};
+  --back-button-disabled-primary: #{th.$back-button-disabled-primary-dark};
 
   // Breadcrumb-button
-  --breadcrumb-button-active-primary: #{$breadcrumb-button-active-primary-dark};
-  --on-bg-breadcrumb-button-hover-primary: #{$on-bg-breadcrumb-button-hover-primary-dark};
-  --bg-breadcrumb-button-hover-primary: #{$bg-breadcrumb-button-hover-primary-dark};
-  --breadcrumb-button-pressed-primary: #{$breadcrumb-button-pressed-primary-dark};
-  --breadcrumb-button-disabled-primary: #{$breadcrumb-button-disabled-primary-dark};
-  --breadcrumb-button-base-primary: #{$breadcrumb-button-base-primary-dark};
+  --breadcrumb-button-active-primary: #{th.$breadcrumb-button-active-primary-dark};
+  --on-bg-breadcrumb-button-hover-primary: #{th.$on-bg-breadcrumb-button-hover-primary-dark};
+  --bg-breadcrumb-button-hover-primary: #{th.$bg-breadcrumb-button-hover-primary-dark};
+  --breadcrumb-button-pressed-primary: #{th.$breadcrumb-button-pressed-primary-dark};
+  --breadcrumb-button-disabled-primary: #{th.$breadcrumb-button-disabled-primary-dark};
+  --breadcrumb-button-base-primary: #{th.$breadcrumb-button-base-primary-dark};
 
   // notification-button
-  --on-bg-notification-button-active: #{$on-bg-notification-button-active-dark};
-  --bg-notification-button-active: #{$bg-notification-button-active-dark};
-  --on-bg-notification-button-hover: #{$on-bg-notification-button-hover-dark};
-  --bg-notification-button-hover: #{$bg-notification-button-hover-dark};
-  --on-bg-label-notification-button-hover: #{$on-bg-label-notification-button-hover-dark};
-  --bg-label-notification-button-hover: #{$bg-label-notification-button-hover-dark};
-  --on-bg-notification-button-pressed: #{$on-bg-notification-button-pressed-dark};
-  --bg-notification-button-pressed: #{$bg-notification-button-pressed-dark};
-  --on-bg-notification-button-disabled: #{$on-bg-notification-button-disabled-dark};
-  --bg-notification-button-disabled: #{$bg-notification-button-disabled-dark};
+  --on-bg-notification-button-active: #{th.$on-bg-notification-button-active-dark};
+  --bg-notification-button-active: #{th.$bg-notification-button-active-dark};
+  --on-bg-notification-button-hover: #{th.$on-bg-notification-button-hover-dark};
+  --bg-notification-button-hover: #{th.$bg-notification-button-hover-dark};
+  --on-bg-label-notification-button-hover: #{th.$on-bg-label-notification-button-hover-dark};
+  --bg-label-notification-button-hover: #{th.$bg-label-notification-button-hover-dark};
+  --on-bg-notification-button-pressed: #{th.$on-bg-notification-button-pressed-dark};
+  --bg-notification-button-pressed: #{th.$bg-notification-button-pressed-dark};
+  --on-bg-notification-button-disabled: #{th.$on-bg-notification-button-disabled-dark};
+  --bg-notification-button-disabled: #{th.$bg-notification-button-disabled-dark};
 
   // badge-button
-  --on-bg-notification-badge-button: #{$on-bg-notification-badge-button-dark};
-  --bg-notification-badge-button: #{$bg-notification-badge-button-dark};
-  --on-bg-menu-badge-button: #{$on-bg-menu-badge-button-dark};
-  --bg-menu-badge-button: #{$bg-menu-badge-button-dark};
+  --on-bg-notification-badge-button: #{th.$on-bg-notification-badge-button-dark};
+  --bg-notification-badge-button: #{th.$bg-notification-badge-button-dark};
+  --on-bg-menu-badge-button: #{th.$on-bg-menu-badge-button-dark};
+  --bg-menu-badge-button: #{th.$bg-menu-badge-button-dark};
 
   // icon-button
-  --on-bg-icon-button-active: #{$on-bg-icon-button-active-dark};
-  --on-bg-icon-button-hover: #{$on-bg-icon-button-hover-dark};
-  --bg-icon-button-hover: #{$bg-icon-button-hover-dark};
-  --on-bg-label-icon-button-hover: #{$on-bg-label-icon-button-hover-dark};
-  --bg-label-icon-button-hover: #{$bg-label-icon-button-hover-dark};
-  --on-bg-icon-button-pressed: #{$on-bg-icon-button-pressed-dark};
-  --bg-icon-button-pressed: #{$bg-icon-button-pressed-dark};
-  --on-bg-icon-button-disabled: #{$on-bg-icon-button-disabled-dark};
+  --on-bg-icon-button-active: #{th.$on-bg-icon-button-active-dark};
+  --on-bg-icon-button-hover: #{th.$on-bg-icon-button-hover-dark};
+  --bg-icon-button-hover: #{th.$bg-icon-button-hover-dark};
+  --on-bg-label-icon-button-hover: #{th.$on-bg-label-icon-button-hover-dark};
+  --bg-label-icon-button-hover: #{th.$bg-label-icon-button-hover-dark};
+  --on-bg-icon-button-pressed: #{th.$on-bg-icon-button-pressed-dark};
+  --bg-icon-button-pressed: #{th.$bg-icon-button-pressed-dark};
+  --on-bg-icon-button-disabled: #{th.$on-bg-icon-button-disabled-dark};
 
   // generic-avatar
-  --cl-generic-avatar-label-primary: #{$cl-generic-avatar-label-primary-dark};
-  --cl-generic-avatar-label-disabled: #{$cl-generic-avatar-label-disabled-dark};
-  --on-bg-generic-avatar-initials-primary: #{$bg-generic-avatar-initials-primary-dark};
-  --on-bg-generic-avatar-initials-disabled: #{$bg-generic-avatar-initials-disabled-dark};
-  --cl-generic-avatar-initial-text-primary: #{$cl-generic-avatar-initials-text-primary-dark};
-  --cl-generic-avatar-initial-text-disabled: #{$cl-generic-avatar-initials-text-disabled-dark};
-
-  --on-bg-generic-avatar-secondary-active: #{$bg-generic-avatar-secondary-active-dark};
-  --on-bg-generic-avatar-secondary-inactive: #{$bg-generic-avatar-secondary-inactive-dark};
-  --on-bg-generic-avatar-secondary-blocked: #{$bg-generic-avatar-secondary-blocked-dark};
-
-  // backdrop
-  --backdrop-primary: #{$backdrop-primary-dark};
-  --backdrop-opacity: 0.6;
-
-  // chip
-  --cl-chip-disabled-state: #{$cl-chip-disabled-state-dark};
-  --cl-chip-active-primary: #{$cl-chip-active-primary-dark};
-  --bg-chip-active-primary: #{$bg-chip-active-primary-dark};
-  --cl-chip-active-close-button: #{$cl-chip-active-close-button-dark};
-  --bg-chip-active-close-button: #{$bg-chip-active-close-button-dark};
-  --bg-chip-active-hover: #{$bg-chip-active-hover-dark};
-  --cl-chip-active-close-button-hover: #{$cl-chip-active-close-button-hover-dark};
-  --bg-chip-active-close-button-hover: #{$bg-chip-active-close-button-hover-dark};
+  --cl-generic-avatar-label-primary: #{th.$cl-generic-avatar-label-primary-dark};
+  --cl-generic-avatar-label-disabled: #{th.$cl-generic-avatar-label-disabled-dark};
+  --bg-generic-avatar-initials-primary: #{th.$bg-generic-avatar-initials-primary-dark};
+  --bg-generic-avatar-initials-disabled: #{th.$bg-generic-avatar-initials-disabled-dark};
+  --cl-generic-avatar-initial-text-primary: #{th.$cl-generic-avatar-initials-text-primary-dark};
+  --cl-generic-avatar-initial-text-disabled: #{th.$cl-generic-avatar-initials-text-disabled-dark};
+
+  //chip
+  --cl-chip-disabled-state: #{th.$cl-chip-disabled-state-dark};
+  --cl-chip-active-primary: #{th.$cl-chip-active-primary-dark};
+  --bg-chip-active-primary: #{th.$bg-chip-active-primary-dark};
+  --cl-chip-active-close-button: #{th.$cl-chip-active-close-button-dark};
+  --bg-chip-active-close-button: #{th.$bg-chip-active-close-button-dark};
+  --bg-chip-active-hover: #{th.$bg-chip-active-hover-dark};
+  --cl-chip-active-close-button-hover: #{th.$cl-chip-active-close-button-hover-dark};
+  --bg-chip-active-close-button-hover: #{th.$bg-chip-active-close-button-hover-dark};
 
   // Currencies
-  --btc-primary: #{$c10};
-  --busd-primary: #{$busd-primary-dark};
-  --ltc-primary: #{$on-bg-currency};
-  --ltc-secondary: #{$ltc-primary-dark};
-  --eurc-primary: #{$eurc-primary-light};
-  --eurc-secondary: #{$eurc-secondary-dark};
-  --trx-primary: #{$trx-primary-dark};
-  --usdt-primary: #{$usdt-primary-dark};
-  --bch-primary: #{$bch-primary-dark};
-  --usd-primary: #{$usd-primary-dark};
-  --bnb-primary: #{$bnb-primary-dark};
-  --eth-primary: #{$eth-secondary-dark};
-  --eth-secondary: #{$eth-primary-dark};
-  --eth-terciary: #{$eth-terciary-light};
-  --eth-quaternary: #{$eth-quaternary-dark};
-  //--eth-quinary: #{$eth-quinary-dark};
-  --eth-senary: #{$eth-senary-dark};
-  --eth-septenary: #{$eth-septenary-dark};
-  --wbtc-primary: #{$wbtc-primary-dark};
-  --wbtc-secondary: #{$wbtc-secundary-light};
-  --wbtc-terciary: #{$wbtc-terciary-dark};
-  --bep-20-primary: #{$bep-20-primary-dark};
-  --lightning-primary: #{$lightning-primary-dark};
-  --sol-primary: #{$sol-primary-dark};
-  --sol-secondary: #{$sol-secondary-dark};
-  --sol-terciary: #{$sol-terciary-dark};
-  --ada-primary: #{$ada-primary-dark};
-  --on-bg-currency: #{$on-bg-currency};
+  --btc-primary: #{pr.$c10};
+  --busd-primary: #{th.$busd-primary-dark};
+  --ltc-primary: #{th.$on-bg-currency};
+  --ltc-secondary: #{th.$ltc-primary-dark};
+  --eurc-primary: #{th.$eurc-primary-light};
+  --eurc-secondary: #{th.$eurc-secondary-dark};
+  --trx-primary: #{th.$trx-primary-dark};
+  --usdt-primary: #{th.$usdt-primary-dark};
+  --bch-primary: #{th.$bch-primary-dark};
+  --usd-primary: #{th.$usd-primary-dark};
+  --bnb-primary: #{th.$bnb-primary-dark};
+  --eth-primary: #{th.$eth-secondary-dark};
+  --eth-secondary: #{th.$eth-primary-dark};
+  --eth-terciary: #{th.$eth-terciary-light};
+  --eth-quaternary: #{th.$eth-quaternary-dark};
+  //--eth-quinary: #{th.$eth-quinary-dark};
+  --eth-senary: #{th.$eth-senary-dark};
+  --eth-septenary: #{th.$eth-septenary-dark};
+  --wbtc-primary: #{th.$wbtc-primary-dark};
+  --wbtc-secondary: #{th.$wbtc-secundary-light};
+  --wbtc-terciary: #{th.$wbtc-terciary-dark};
+  --bep-20-primary: #{th.$bep-20-primary-dark};
+  --lightning-primary: #{th.$lightning-primary-dark};
+  --sol-primary: #{th.$sol-primary-dark};
+  --sol-secondary: #{th.$sol-secondary-dark};
+  --sol-terciary: #{th.$sol-terciary-dark};
+  --ada-primary: #{th.$ada-primary-dark};
+  --on-bg-currency: #{th.$on-bg-currency};
 
   // shadow
-  --shadow-primary: #{$shadow-primary-dark};
+  --shadow-primary: #{th.$shadow-primary-dark};
   // DONT REMOVE
-  --shadow-primary-rgba: #{to-rgb($shadow-primary-dark)};
+  --shadow-r: #{red(th.$shadow-primary-dark)};
+  --shadow-g: #{green(th.$shadow-primary-dark)};
+  --shadow-b: #{blue(th.$shadow-primary-dark)};
+
+  --shadow-primary-rgba: #{to-rgb(th.$shadow-primary-dark)};
   --shadow-opacity: 1;
 }