@progressio_resources/gravity-design-system 1.0.5 → 1.0.7

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

@@ -1,15 +1,14 @@
 @import "../themes/hero.theme";
 
 .hero-light-theme {
+  // text-field
   --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-light};
   --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-light};
-  --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-light};
   --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-light};
-  --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-light};
   --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-light};
-  --label-text-empty-enabled-pressed-primary: #{$label-text-empty-enabled-pressed-primary-light};
-  --placeholder-empty-enabled-pressed-primary: #{$placeholder-empty-enabled-pressed-primary-light};
-  --bg-field-empty-enabled-pressed-primary: #{$bg-field-empty-enabled-pressed-primary-light};
+  --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-light};
+  --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-light};
+  --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-light};
   --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-light};
   --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-light};
   --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-light};
@@ -20,34 +19,104 @@
   --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-light};
   --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-light};
   --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-light};
+  --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-light};
+  --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-light};
+  --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-light};
+  --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-light};
+  --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
+  --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-light};
+
+  // dialog
+  --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-light};
+  --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-light};
+  --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};
+  --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-light};
+  --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-light};
+
+  // divider
   --divider-primary: #{$divider-primary-light};
+
+  // menu
   --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-light};
-  --surface-secondary: #{$surface-secondary-light};
   --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-light};
   --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-light};
   --divider-menu-primary: #{$divider-menu-primary-light};
+  --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-light};
+  --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-light};
+  --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-light};
+  --bg-menu-primary: #{$bg-menu-primary-light};
+  --on-bg-menu-primary: #{$on-bg-menu-primary-light};
+
+  // surface
+  --surface-secondary: #{$surface-secondary-light};
+  --surface-primary: #{$surface-primary-light};
+
+  // 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};
+  --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-light};
+  --bg-button-pressed-primary: #{$bg-button-pressed-primary-light};
+  --bg-button-hover-primary: #{$bg-button-hover-primary-light};
+
+  // link
   --link-pressed-primary: #{$link-pressed-primary-light};
   --link-disabled-primary: #{$link-disabled-primary-light};
   --bg-link-hover-primary: #{$bg-link-hover-primary-light};
   --link-hover-primary: #{$link-hover-primary-light};
   --link-active-primary: #{$link-active-primary-light};
+
+  // calendar
   --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-light};
+  --bg-calender-primary: #{$bg-calender-primary-light};
+  --number-calendar-hover-primary: #{$number-calendar-hover-primary-light};
+  --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-light};
+  --on-bg-calender-primary: #{$on-bg-calender-primary-light};
+  --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-light};
+  --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-light};
+  --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-light};
+  --number-calender-active-primary: #{$number-calender-active-primary-light};
+  --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-light};
+  --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-light};
+  --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-light};
+  --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-light};
+  --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-light};
+
+  // switch
   --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-light};
   --bg-switch-on-primary: #{$bg-switch-on-primary-light};
+  --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-light};
+  --bg-switch-off-primary: #{$bg-switch-off-primary-light};
+  --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-light};
+  --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-light};
+
+  // dropdown-list
   --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-light};
   --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-light};
-  --bg-calender-primary: #{$bg-calender-primary-light};
-  --notification-error-highlight-primary: #{$notification-error-highlight-primary-light};
-  --bg-table-header-secondary: #{$bg-table-header-secondary-light};
   --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-light};
-  --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-light};
-  --bg-tooltip-primary: #{$bg-tooltip-primary-light};
-  --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-light};
-  --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-light};
   --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-light};
-  --bg-switch-disabled-primary: #{$bg-switch-disabled-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};
+
+  // notification
+  --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-warning-primary: #{$bg-icon-notification-warning-primary-light};
+  --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
+  --notification-success-highlight-primary: #{$notification-success-highlight-primary-light};
+  --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
+  --on-bg-notification-primary: #{$on-bg-notification-primary-light};
+  --bg-icon-notification-error-primary: #{$bg-icon-notification-error-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-success-primary: #{$bg-icon-notification-success-primary-light};
+
+  // table
+  --bg-table-header-secondary: #{$bg-table-header-secondary-light};
   --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-light};
   --bg-table-hover-primary: #{$bg-table-hover-primary-light};
   --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-light};
@@ -55,134 +124,117 @@
   --on-bg-table-active-primary: #{$on-bg-table-active-primary-light};
   --bg-table-header-primary: #{$bg-table-header-primary-light};
   --on-bg-table-header-primary: #{$on-bg-table-header-primary-light};
-  --bg-dialog-primary: #{$bg-dialog-primary-light};
-  --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-light};
+
+  // highlight
+  --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-light};
+  --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-light};
+  --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-light};
+  --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-light};
+
+  // tooltip
+  --bg-tooltip-primary: #{$bg-tooltip-primary-light};
+  --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-light};
+
+  // stepper
   --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-light};
-  --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-light};
-  --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
   --line-stepper-completed-primary: #{$line-stepper-completed-primary-light};
-  --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-light};
-  --number-calendar-hover-primary: #{$number-calendar-hover-primary-light};
-  --icon-hover-primary: #{$icon-hover-primary-light};
   --text-stepper-completed-primary: #{$text-stepper-completed-primary-light};
-  --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-light};
-  --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-light};
-  --icon-active-primary: #{$icon-active-primary-light};
   --bg-stepper-current-primary: #{$bg-stepper-current-primary-light};
   --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-light};
   --line-stepper-current-primary: #{$line-stepper-current-primary-light};
-  --bg-dialog-header-primary: #{$bg-dialog-header-primary-light};
-  --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-light};
-  --notification-sucess-highlight-primary: #{$notification-sucess-highlight-primary-light};
-  --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-light};
-  --alternative-primary: #{$alternative-primary-light};
   --text-stepper-current-primary: #{$text-stepper-current-primary-light};
-  --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-light};
-  --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
   --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-light};
-  --outline-field-empty-enabled-pressed-primary: #{$outline-field-empty-enabled-pressed-primary-light};
   --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-light};
-  --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-light};
   --line-stepper-pending-primary: #{$line-stepper-pending-primary-light};
-  --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-light};
-  --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
-  --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-light};
   --text-stepper-pending-primary: #{$text-stepper-pending-primary-light};
+  --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-light};
+
+  // button-tertiary
+  --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-light};
+  --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-light};
+  --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-light};
+  --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-light};
+  --bg-button-active-tertiary: #{$bg-button-active-tertiary-light};
+  --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-light};
+
+  // icons
+  --icon-hover-primary: #{$icon-hover-primary-light};
+  --icon-active-primary: #{$icon-active-primary-light};
+
+  // system
+  --alternative-primary: #{$alternative-primary-light};
+  --negative-primary: #{$negative-primary-light};
+  --positive-primary: #{$positive-primary-light};
+  --cta-primary: #{$bg-button-active-primary-light};
+
+  // checkbox
   --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-light};
   --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-light};
-  --on-bg-calender-primary: #{$on-bg-calender-primary-light};
+  --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-light};
+
+  // loading
   --loading-primary: #{$loading-primary-light};
+
+  // disabled-status
   --outline-disabled: #{$outline-disabled-light};
-  --bg-switch-off-primary: #{$bg-switch-off-primary-light};
-  --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-light};
+  --bg-button-disabled: #{$bg-button-disabled-light};
+  --on-bg-disabled: #{$on-bg-button-disabled-light};
+
+  // button-secondary
   --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-light};
   --outline-button-hover-secondary: #{$outline-button-hover-secondary-light};
   --bg-button-active-secondary: #{$bg-button-active-secondary-light};
   --outline-button-active-secondary: #{$outline-button-active-secondary-light};
-  --surface-primary: #{$surface-primary-light};
-  --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-light};
   --bg-button-hover-secondary: #{$bg-button-hover-secondary-light};
+  --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-light};
+  --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-light};
+  --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-light};
+  --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-light};
+
+  // button-positive
   --on-bg-button-active-positive: #{$on-bg-button-active-positive-light};
-  --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-light};
-  --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-light};
   --bg-button-pressed-positive: #{$bg-button-pressed-positive-light};
-  --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-light};
-  --negative-primary: #{$negative-primary-light};
-  --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-light};
-  --positive-primary: #{$positive-primary-light};
-  --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-light};
-  --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-light};
-  --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-light};
-  --bg-button-disabled: #{$bg-button-disabled-light};
-  --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-light};
-  --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-light};
-  --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-light};
-  --on-bg-notification-primary: #{$on-bg-notification-primary-light};
+  --bg-button-hover-positive: #{$bg-button-hover-positive-light};
+  --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-light};
+  --bg-button-active-positive: #{$bg-button-active-positive-light};
+  --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-light};
+
+  // button-alternative
   --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-light};
-  --cta-primary: #{$bg-button-active-primary-light};
   --bg-button-active-alternative: #{$bg-button-active-alternative-light};
-  --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-light};
-  --bg-button-active-tertiary: #{$bg-button-active-tertiary-light};
-  --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-light};
-  --bg-menu-primary: #{$bg-menu-primary-light};
-  --logo-primary: #{$logo-primary-light};
-  --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-light};
   --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-light};
-  --bg-button-hover-positive: #{$bg-button-hover-positive-light};
-  --number-calender-active-primary: #{$number-calender-active-primary-light};
-  --bg-notification-primary: #{$bg-notification-primary-light};
+  --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-light};
+  --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
+  --bg-button-hover-alternative: #{$bg-button-hover-alternative-light};
+
+  // logo
+  --logo-primary: #{$logo-primary-light};
+
+  // button-negative
   --bg-button-pressed-negative: #{$bg-button-pressed-negative-light};
   --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-light};
-  --on-bg-menu-primary: #{$on-bg-menu-primary-light};
-  --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-light};
-  --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-light};
-  --radio-button-on-primary: #{$radio-button-on-primary-light};
-  --radio-button-off-primary: #{$radio-button-off-primary-light};
-  --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-light};
-  --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-light};
   --bg-button-hover-negative: #{$bg-button-hover-negative-light};
-  --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-light};
-  --bg-button-active-positive: #{$bg-button-active-positive-light};
   --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-light};
   --on-bg-button-active-negative: #{$on-bg-button-active-negative-light};
-  --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-light};
   --bg-button-active-negative: #{$bg-button-active-negative-light};
-  --bg-button-active-primary: #{$bg-button-active-primary-light};
-  --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-light};
-  --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-light};
-  --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-light};
-  --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-light};
-  --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-light};
-  --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-light};
-  --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-light};
-  --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-light};
-  --bg-button-pressed-primary: #{$bg-button-pressed-primary-light};
-  --bg-button-hover-primary: #{$bg-button-hover-primary-light};
-  --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-light};
-  --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-light};
-  --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-light};
-  --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-light};
-  --text-primary: #{$text-primary-light};
-  --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-light};
-  --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-light};
-  --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-light};
-  --on-bg-disabled: #{$on-bg-button-disabled-light};
-  --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-light};
-  --bg-button-hover-alternative: #{$bg-button-hover-alternative-light};
-}
 
+  // radio button
+  --radio-button-on-primary: #{$radio-button-on-primary-light};
+  --radio-button-off-primary: #{$radio-button-off-primary-light};
 
+  // text
+  --text-primary: #{$text-primary-light};
+}
 
 .hero-dark-theme {
+  // text-field
   --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-dark};
   --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-dark};
-  --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-dark};
   --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-dark};
-  --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-dark};
   --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-dark};
-  --label-text-empty-enabled-pressed-primary: #{$label-text-empty-enabled-pressed-primary-dark};
-  --placeholder-empty-enabled-pressed-primary: #{$placeholder-empty-enabled-pressed-primary-dark};
-  --bg-field-empty-enabled-pressed-primary: #{$bg-field-empty-enabled-pressed-primary-dark};
+  --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-dark};
+  --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-dark};
+  --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-dark};
   --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-dark};
   --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-dark};
   --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-dark};
@@ -193,34 +245,104 @@
   --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-dark};
   --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-dark};
   --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
+  --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-dark};
+  --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-dark};
+  --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-dark};
+  --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-dark};
+  --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
+  --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-dark};
+
+  // dialog
+  --bg-close-dialog-header-hover-primary: #{$bg-close-dialog-header-hover-primary-dark};
+  --close-dialog-header-hover-primary: #{$close-dialog-header-hover-primary-dark};
+  --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};
+  --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
+  --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
+
+  // divider
   --divider-primary: #{$divider-primary-dark};
+
+  // menu
   --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-dark};
-  --surface-secondary: #{$surface-secondary-dark};
   --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-dark};
   --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-dark};
   --divider-menu-primary: #{$divider-menu-primary-dark};
+  --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-dark};
+  --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-dark};
+  --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-dark};
+  --bg-menu-primary: #{$bg-menu-primary-dark};
+  --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
+
+  // surface
+  --surface-secondary: #{$surface-secondary-dark};
+  --surface-primary: #{$surface-primary-dark};
+
+  // 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};
+  --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-dark};
+  --bg-button-pressed-primary: #{$bg-button-pressed-primary-dark};
+  --bg-button-hover-primary: #{$bg-button-hover-primary-dark};
+
+  // link
   --link-pressed-primary: #{$link-pressed-primary-dark};
   --link-disabled-primary: #{$link-disabled-primary-dark};
   --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
   --link-hover-primary: #{$link-hover-primary-dark};
   --link-active-primary: #{$link-active-primary-dark};
+
+  // calendar
   --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-dark};
+  --bg-calender-primary: #{$bg-calender-primary-dark};
+  --number-calendar-hover-primary: #{$number-calendar-hover-primary-dark};
+  --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-dark};
+  --on-bg-calender-primary: #{$on-bg-calender-primary-dark};
+  --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
+  --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-dark};
+  --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-dark};
+  --number-calender-active-primary: #{$number-calender-active-primary-dark};
+  --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-dark};
+  --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-dark};
+  --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-dark};
+  --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-dark};
+  --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-dark};
+
+  // switch
   --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-dark};
   --bg-switch-on-primary: #{$bg-switch-on-primary-dark};
+  --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-dark};
+  --bg-switch-off-primary: #{$bg-switch-off-primary-dark};
+  --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
+  --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
+
+  // dropdown-list
   --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-dark};
   --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-dark};
-  --bg-calender-primary: #{$bg-calender-primary-dark};
-  --notification-error-highlight-primary: #{$notification-error-highlight-primary-dark};
-  --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
   --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-dark};
-  --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
-  --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
-  --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-dark};
-  --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-dark};
   --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-dark};
-  --bg-switch-disabled-primary: #{$bg-switch-disabled-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};
+
+  // notification
+  --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-warning-primary: #{$bg-icon-notification-warning-primary-dark};
+  --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
+  --notification-success-highlight-primary: #{$notification-success-highlight-primary-dark};
+  --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
+  --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
+  --bg-icon-notification-error-primary: #{$bg-icon-notification-error-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-success-primary: #{$bg-icon-notification-success-primary-dark};
+
+  // table
+  --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
   --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-dark};
   --bg-table-hover-primary: #{$bg-table-hover-primary-dark};
   --on-bg-table-hover-primary: #{$on-bg-table-hover-primary-dark};
@@ -228,118 +350,109 @@
   --on-bg-table-active-primary: #{$on-bg-table-active-primary-dark};
   --bg-table-header-primary: #{$bg-table-header-primary-dark};
   --on-bg-table-header-primary: #{$on-bg-table-header-primary-dark};
-  --bg-dialog-primary: #{$bg-dialog-primary-dark};
-  --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-dark};
+
+  // highlight
+  --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
+  --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
+  --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
+  --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
+
+  // tooltip
+  --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
+  --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-dark};
+
+  // stepper
   --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-dark};
-  --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-dark};
-  --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
   --line-stepper-completed-primary: #{$line-stepper-completed-primary-dark};
-  --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-dark};
-  --number-calendar-hover-primary: #{$number-calendar-hover-primary-dark};
-  --icon-hover-primary: #{$icon-hover-primary-dark};
   --text-stepper-completed-primary: #{$text-stepper-completed-primary-dark};
-  --arrow-calendar-disabled-primary: #{$arrow-calendar-disabled-primary-dark};
-  --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-dark};
-  --icon-active-primary: #{$icon-active-primary-dark};
   --bg-stepper-current-primary: #{$bg-stepper-current-primary-dark};
   --on-bg-stepper-current-primary: #{$on-bg-stepper-current-primary-dark};
   --line-stepper-current-primary: #{$line-stepper-current-primary-dark};
-  --bg-dialog-header-primary: #{$bg-dialog-header-primary-dark};
-  --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-dark};
-  --notification-sucess-highlight-primary: #{$notification-sucess-highlight-primary-dark};
-  --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-dark};
-  --alternative-primary: #{$alternative-primary-dark};
   --text-stepper-current-primary: #{$text-stepper-current-primary-dark};
-  --close-dialog-header-active-primary: #{$close-dialog-header-active-primary-dark};
-  --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
   --bg-stepper-pending-primary: #{$bg-stepper-pending-primary-dark};
-  --outline-field-empty-enabled-pressed-primary: #{$outline-field-empty-enabled-pressed-primary-dark};
   --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-dark};
-  --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-dark};
   --line-stepper-pending-primary: #{$line-stepper-pending-primary-dark};
-  --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
-  --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
-  --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-dark};
   --text-stepper-pending-primary: #{$text-stepper-pending-primary-dark};
+  --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
+
+  // button-tertiary
+  --on-bg-button-hover-tertiary: #{$on-bg-button-hover-tertiary-dark};
+  --bg-button-hover-tertiary: #{$bg-button-hover-tertiary-dark};
+  --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-dark};
+  --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-dark};
+  --bg-button-active-tertiary: #{$bg-button-active-tertiary-dark};
+  --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-dark};
+
+  // icons
+  --icon-hover-primary: #{$icon-hover-primary-dark};
+  --icon-active-primary: #{$icon-active-primary-dark};
+
+  // system
+  --alternative-primary: #{$alternative-primary-dark};
+  --negative-primary: #{$negative-primary-dark};
+  --positive-primary: #{$positive-primary-dark};
+  --cta-primary: #{$bg-button-active-primary-dark};
+
+  // checkbox
   --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-dark};
   --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-dark};
-  --on-bg-calender-primary: #{$on-bg-calender-primary-dark};
+  --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
+
+  // loading
   --loading-primary: #{$loading-primary-dark};
+
+  // disabled-status
   --outline-disabled: #{$outline-disabled-dark};
-  --bg-switch-off-primary: #{$bg-switch-off-primary-dark};
-  --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
+  --bg-button-disabled: #{$bg-button-disabled-dark};
+  --on-bg-disabled: #{$on-bg-button-disabled-dark};
+
+  // button-secondary
   --on-bg-button-pressed-secondary: #{$on-bg-button-pressed-secondary-dark};
   --outline-button-hover-secondary: #{$outline-button-hover-secondary-dark};
   --bg-button-active-secondary: #{$bg-button-active-secondary-dark};
   --outline-button-active-secondary: #{$outline-button-active-secondary-dark};
-  --surface-primary: #{$surface-primary-dark};
-  --bg-button-pressed-tertiary: #{$bg-button-pressed-tertiary-dark};
   --bg-button-hover-secondary: #{$bg-button-hover-secondary-dark};
+  --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-dark};
+  --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-dark};
+  --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-dark};
+  --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-dark};
+
+  // button-positive
   --on-bg-button-active-positive: #{$on-bg-button-active-positive-dark};
-  --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
-  --bg-dropdown-item-hover-primary: #{$bg-dropdown-item-hover-primary-dark};
   --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
-  --on-bg-menu-button-hover-primary: #{$on-bg-menu-button-hover-primary-dark};
-  --negative-primary: #{$negative-primary-dark};
-  --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-dark};
-  --positive-primary: #{$positive-primary-dark};
-  --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-dark};
-  --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
-  --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
-  --bg-button-disabled: #{$bg-button-disabled-dark};
-  --bg-button-pressed-secondary: #{$bg-button-pressed-secondary-dark};
-  --on-bg-button-active-tertiary: #{$on-bg-button-active-tertiary-dark};
-  --number-calendar-pressed-primary: #{$number-calendar-pressed-primary-dark};
-  --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
+  --bg-button-hover-positive: #{$bg-button-hover-positive-dark};
+  --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
+  --bg-button-active-positive: #{$bg-button-active-positive-dark};
+  --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-dark};
+
+  // button-alternative
   --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-dark};
-  --cta-primary: #{$bg-button-active-primary-dark};
   --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
-  --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-dark};
-  --bg-button-active-tertiary: #{$bg-button-active-tertiary-dark};
-  --bg-arrow-calendar-hover-primary: #{$bg-arrow-calendar-hover-primary-dark};
-  --bg-menu-primary: #{$bg-menu-primary-dark};
-  --logo-primary: #{$logo-primary-dark};
-  --outline-button-pressed-secondary: #{$outline-button-pressed-secondary-dark};
   --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-dark};
-  --bg-button-hover-positive: #{$bg-button-hover-positive-dark};
-  --number-calender-active-primary: #{$number-calender-active-primary-dark};
-  --bg-notification-primary: #{$bg-notification-primary-dark};
+  --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
+  --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
+  --bg-button-hover-alternative: #{$bg-button-hover-alternative-dark};
+
+  // logo
+  --logo-primary: #{$logo-primary-dark};
+
+  // button-negative
   --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
   --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-dark};
-  --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
-  --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
-  --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
-  --radio-button-on-primary: #{$radio-button-on-primary-dark};
-  --radio-button-off-primary: #{$radio-button-off-primary-dark};
-  --bg-number-calendar-hover-primary: #{$bg-number-calendar-hover-primary-dark};
-  --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
   --bg-button-hover-negative: #{$bg-button-hover-negative-dark};
-  --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-dark};
-  --bg-button-active-positive: #{$bg-button-active-positive-dark};
   --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-dark};
   --on-bg-button-active-negative: #{$on-bg-button-active-negative-dark};
-  --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-dark};
   --bg-button-active-negative: #{$bg-button-active-negative-dark};
-  --bg-button-active-primary: #{$bg-button-active-primary-dark};
-  --arrow-calendar-active-primary: #{$arrow-calendar-active-primary-dark};
-  --on-bg-button-hover-positive: #{$on-bg-button-hover-positive-dark};
-  --on-bg-button-hover-primary: #{$on-bg-button-hover-primary-dark};
-  --bg-icon-notification-success-primary: #{$bg-icon-notification-success-primary-dark};
-  --arrow-calendar-hover-primary: #{$arrow-calendar-hover-primary-dark};
-  --on-bg-button-pressed-tertiary: #{$on-bg-button-pressed-tertiary-dark};
-  --on-bg-button-pressed-primary: #{$on-bg-button-pressed-primary-dark};
-  --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-dark};
-  --bg-button-pressed-primary: #{$bg-button-pressed-primary-dark};
-  --bg-button-hover-primary: #{$bg-button-hover-primary-dark};
-  --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
-  --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-dark};
-  --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
-  --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
+
+  // radio button
+  --radio-button-on-primary: #{$radio-button-on-primary-dark};
+  --radio-button-off-primary: #{$radio-button-off-primary-dark};
+
+  // text
   --text-primary: #{$text-primary-dark};
-  --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
-  --on-bg-button-active-secondary: #{$on-bg-button-active-secondary-dark};
-  --on-bg-button-hover-secondary: #{$on-bg-button-hover-secondary-dark};
-  --on-bg-disabled: #{$on-bg-button-disabled-dark};
-  --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
-  --bg-button-hover-alternative: #{$bg-button-hover-alternative-dark};
+
+  //
+  //@each $name, $value in $hero-dark-theme {
+  //  --#{$name}: #{$value};
+  //}
 }

package/src/lib/styles/fundamentals/typography/_hero.typography.scss

@@ -57,7 +57,6 @@ body {
 }
 
 .hr-title {
-
   &.sm-regular {
     font-size: $font-size-16px;
     font-weight: 420;