@progressio_resources/gravity-design-system 1.1.14 → 1.1.16

package/src/lib/styles/{fundamentals → foundations}/colors/themes/_hero.theme.scss

@@ -1,394 +1,395 @@
 @import "../primitives/hero.primitives";
 
-// dialog
-$bg-icon-dialog-primary-dark: $n800;
-$on-bg-icon-dialog-primary-dark: $n300;
-$bg-close-dialog-header-hover-primary-dark: $n100;
-$close-dialog-header-hover-primary-dark: $b700;
-$close-dialog-header-active-primary-dark: $b700;
-$bg-dialog-header-primary-dark: $n200;
-$on-bg-dialog-header-primary-dark: $n800;
-$bg-dialog-primary-dark: $n100;
-$bg-icon-dialog-primary-light: $n300;
-$on-bg-icon-dialog-primary-light: $n900;
-$bg-close-dialog-header-hover-primary-light: $n900;
-$close-dialog-header-hover-primary-light: $b400;
-$close-dialog-header-active-primary-light: $b400;
-$bg-dialog-header-primary-light: $n800;
-$on-bg-dialog-header-primary-light: $n300;
-$bg-dialog-primary-light: $n900;
-
-// text-field
-$label-text-full-read-only-primary-dark: $n800;
-$input-text-full-read-only-primary-dark: $n800;
-$input-text-full-disabled-primary-dark: $n300;
-$placeholder-full-enabled-pressed-primary-dark: $n800;
-$label-text-full-read-only-primary-light: $n400;
-$bg-field-full-read-only-primary-light: $n800;
-$label-text-full-disabled-primary-light: $n700;
-$bg-field-full-disabled-primary-light: $n800;
-$label-text-full-enabled-pressed-primary-light: $n400;
-$placeholder-full-enabled-pressed-primary-light: $n400;
-$outline-field-full-enabled-pressed-primary-light: $b400;
-$bg-field-full-enabled-pressed-primary-light: $n900;
-$label-text-empty-disabled-primary-light: $n700;
-$placeholder-empty-disabled-primary-light: $n700;
-$bg-field-empty-disabled-primary-light: $n800;
-$label-text-full-enabled-primary-dark: $n800;
-$input-text-full-enabled-primary-dark: $n800;
-$outline-field-full-enabled-primary-dark: $n800;
-$bg-field-full-enabled-primary-dark: $n100;
-$bg-field-empty-enabled-hover-primary-dark: $n200;
-$label-text-empty-enabled-primary-dark: $n800;
-$bg-field-full-enabled-hover-primary-light: $n800;
-$placeholder-empty-enabled-primary-dark: $n400;
-$label-text-full-enabled-primary-light: $n400;
-$outline-field-empty-enabled-primary-light: $n400;
-$bg-field-full-enabled-hover-primary-dark: $n200;
-$bg-field-empty-disabled-primary-dark: $n200;
-$bg-field-full-enabled-primary-light: $n900;
-$placeholder-empty-enabled-primary-light: $n600;
-$label-text-empty-enabled-primary-light: $n400;
-$bg-field-empty-enabled-primary-light: $n900;
-$bg-field-empty-enabled-primary-dark: $n100;
-$outline-field-full-enabled-primary-light: $n400;
-$input-text-full-enabled-primary-light: $n400;
-$bg-field-empty-enabled-hover-primary-light: $n800;
-$outline-field-empty-enabled-primary-dark: $n800;
-$bg-field-full-read-only-primary-dark: $n300;
-$bg-field-full-enabled-pressed-primary-dark: $n100;
-$label-text-empty-disabled-primary-dark: $n300;
-$bg-field-full-disabled-primary-dark: $n200;
-$input-text-full-read-only-primary-light: $n400;
-$input-text-full-disabled-primary-light: $n700;
-$placeholder-empty-disabled-primary-dark: $n300;
-$label-text-full-disabled-primary-dark: $n300;
-$label-text-full-enabled-pressed-primary-dark: $n800;
-$outline-field-full-enabled-pressed-primary-dark: $b700;
-
-// system
-$alternative-primary-light: $o300;
-$alternative-primary-dark: $o400;
-$negative-primary-light: $r400;
-$negative-primary-dark: $r500;
-$positive-primary-light: $g300;
-$positive-primary-dark: $g500;
-
 // button-primary
-$bg-button-active-primary-dark: $b700;
+$on-bg-button-active-primary-light: $n900;
 $bg-button-active-primary-light: $b400;
-$on-bg-button-hover-primary-dark: $b200;
+$on-bg-button-active-primary-dark: $n100;
+$bg-button-active-primary-dark: $b700;
+$on-bg-button-hover-primary-light: $n900;
 $bg-button-hover-primary-light: $b500;
-$on-bg-button-pressed-primary-dark: $b200;
+$on-bg-button-hover-primary-dark: $b200;
+$bg-button-hover-primary-dark: $b800;
 $on-bg-button-pressed-primary-light: $n900;
 $bg-button-pressed-primary-light: $b300;
-$bg-button-hover-primary-dark: $b800;
+$on-bg-button-pressed-primary-dark: $b200;
 $bg-button-pressed-primary-dark: $b600;
-$on-bg-button-hover-primary-light: $n900;
-$on-bg-button-active-primary-dark: $n100;
-$on-bg-button-active-primary-light: $n900;
+
+// button-secondary
+$on-bg-button-active-secondary-light: $b400;
+$outline-button-active-secondary-light: $b400;
+$bg-button-active-secondary-light: $n900;
+$on-bg-button-active-secondary-dark: $b700;
+$outline-button-active-secondary-dark: $b700;
+$bg-button-active-secondary-dark: $n100;
+$on-bg-button-hover-secondary-light: $b500;
+$outline-button-hover-secondary-light: $b500;
+$bg-button-hover-secondary-light: $n900;
+$on-bg-button-hover-secondary-dark: $b800;
+$outline-button-hover-secondary-dark: $b800;
+$bg-button-hover-secondary-dark: $n100;
+$on-bg-button-pressed-secondary-light: $b300;
+$outline-button-pressed-secondary-light: $b300;
+$bg-button-pressed-secondary-light: $n900;
+$on-bg-button-pressed-secondary-dark: $b600;
+$outline-button-pressed-secondary-dark: $b600;
+$bg-button-pressed-secondary-dark: $n100;
+
+// button-tertiary
+$on-bg-button-active-tertiary-light: $b400;
+$bg-button-active-tertiary-light: $b700;
+$on-bg-button-active-tertiary-dark: $n900;
+$bg-button-active-tertiary-dark: $n400;
+$on-bg-button-hover-tertiary-light: $b400;
+$bg-button-hover-tertiary-light: $b800;
+$on-bg-button-hover-tertiary-dark: $n900;
+$bg-button-hover-tertiary-dark: $n500;
+$on-bg-button-pressed-tertiary-light: $b300;
+$bg-button-pressed-tertiary-light: $b600;
+$on-bg-button-pressed-tertiary-dark: $n900;
+$bg-button-pressed-tertiary-dark: $n200;
+
+// button-positive
+$on-bg-button-active-positive-light: $g100;
+$bg-button-active-positive-light: $g500;
+$on-bg-button-active-positive-dark: $g100;
+$bg-button-active-positive-dark: $g500;
+$on-bg-button-hover-positive-light: $g100;
+$bg-button-hover-positive-light: $g600;
+$on-bg-button-hover-positive-dark: $g100;
+$bg-button-hover-positive-dark: $g600;
+$on-bg-button-pressed-positive-light: $g100;
+$bg-button-pressed-positive-light: $g400;
+$on-bg-button-pressed-positive-dark: $g100;
+$bg-button-pressed-positive-dark: $g400;
+
+// button-negative
+$on-bg-button-active-negative-light: $r200;
+$bg-button-active-negative-light: $r600;
+$on-bg-button-active-negative-dark: $r200;
+$bg-button-active-negative-dark: $r600;
+$on-bg-button-hover-negative-light: $r200;
+$bg-button-hover-negative-light: $r700;
+$on-bg-button-hover-negative-dark: $r300;
+$bg-button-hover-negative-dark: $r700;
+$on-bg-button-pressed-negative-light: $r100;
+$bg-button-pressed-negative-light: $r500;
+$on-bg-button-pressed-negative-dark: $r100;
+$bg-button-pressed-negative-dark: $r500;
+
+// button-alternative
+$on-bg-button-active-alternative-light: $o200;
+$bg-button-active-alternative-light: $o400;
+$on-bg-button-active-alternative-dark: $o200;
+$bg-button-active-alternative-dark: $o400;
+$on-bg-button-hover-alternative-light: $o200;
+$bg-button-hover-alternative-light: $o500;
+$on-bg-button-hover-alternative-dark: $o200;
+$bg-button-hover-alternative-dark: $o500;
+$on-bg-button-pressed-alternative-light: $o100;
+$bg-button-pressed-alternative-light: $o300;
+$on-bg-button-pressed-alternative-dark: $o100;
+$bg-button-pressed-alternative-dark: $o300;
+
+// disabled-status
+$on-bg-disabled-light: $n600;
+$bg-disabled-light: $n800;
+$on-bg-disabled-dark: $n400;
+$bg-disabled-dark: $n200;
+$outline-disabled-light: $n700;
+$outline-disabled-dark: $n200;
 
 // surface
 $surface-primary-light: $n800;
+$surface-secondary-light: $n900;
 $surface-primary-dark: $n200;
 $surface-secondary-dark: $n100;
-$surface-secondary-light: $n900;
 
-// menu
-$on-bg-menu-button-pressed-primary-dark: $n900;
-$bg-menu-button-pressed-primary-dark: $n400;
-$on-bg-menu-button-disabled-primary-dark: $n300;
-$on-bg-menu-button-hover-primary-dark: $n800;
-$bg-menu-button-hover-primary-dark: $n200;
-$on-bg-menu-button-active-primary-dark: $n800;
-$on-bg-menu-primary-dark: $n800;
-$divider-menu-primary-dark: $n200;
-$on-bg-menu-button-disabled-primary-light: $n700;
-$bg-menu-button-hover-primary-light: $n800;
-$bg-menu-primary-light: $n900;
-$bg-menu-primary-dark: $n100;
-$bg-menu-button-pressed-primary-light: $b700;
-$on-bg-menu-button-hover-primary-light: $n400;
-$on-bg-menu-primary-light: $n400;
-$divider-menu-primary-light: $n800;
-$on-bg-menu-button-active-primary-light: $n400;
-$on-bg-menu-button-pressed-primary-light: $n400;
+// text
+$text-primary-light: $n400;
+$text-primary-dark: $n800;
 
-// link
-$link-disabled-primary-dark: $n300;
-$link-pressed-primary-light: $b200;
-$link-disabled-primary-light: $n700;
-$bg-link-hover-primary-light: $b800;
-$link-active-primary-light: $b400;
-$link-hover-primary-dark: $b700;
-$link-hover-primary-light: $b400;
-$link-active-primary-dark: $b700;
-$bg-link-hover-primary-dark: $n300;
-$link-pressed-primary-dark: $b600;
+// divider
+$divider-primary-light: $n400;
+$divider-primary-dark: $n800;
 
-// notification
-$notification-success-highlight-primary-light: $g300;
-$bg-icon-notification-success-primary-light: $g500;
-$notification-error-highlight-primary-light: $r400;
-$notification-warning-highlight-primary-dark: $o400;
-$on-bg-icon-notification-success-primary-dark: $g100;
-$bg-icon-notification-error-primary-light: $r600;
-$bg-icon-notification-warning-primary-dark: $o400;
-$on-bg-icon-notification-warning-primary-dark: $o200;
-$on-bg-icon-notification-error-primary-light: $r200;
-$bg-icon-notification-error-primary-dark: $r600;
-$on-bg-icon-notification-success-primary-light: $g100;
-$notification-success-highlight-primary-dark: $g500;
-$bg-icon-notification-success-primary-dark: $g500;
-$notification-warning-highlight-primary-light: $o300;
-$notification-error-highlight-primary-dark: $r600;
-$on-bg-notification-primary-dark: $n800;
-$bg-notification-primary-light: $n900;
-$on-bg-icon-notification-error-primary-dark: $r200;
-$bg-icon-notification-warning-primary-light: $o400;
-$bg-notification-primary-dark: $n200;
-$on-bg-notification-primary-light: $n400;
-$on-bg-icon-notification-warning-primary-light: $o200;
+// logo
+$logo-primary-light: $b400;
+$logo-primary-dark: $b700;
 
-// switch
-$bg-switch-disabled-primary-dark: $n200;
-$on-bg-switch-disabled-primary-dark: $n100;
-$on-bg-switch-disabled-primary-light: $n900;
-$bg-switch-off-primary-light: $n700;
-$bg-switch-disabled-primary-light: $n800;
-$bg-switch-on-primary-light: $b400;
-$bg-switch-off-primary-dark: $n300;
-$on-bg-switch-on-primary-dark: $n200;
-$on-bg-switch-off-primary-light: $n800;
-$on-bg-switch-off-primary-dark: $n400;
-$bg-switch-on-primary-dark: $b700;
-$on-bg-switch-on-primary-light: $n900;
+// highlight
+$on-bg-highlight-neutro-primary-light: $n400;
+$bg-highlight-neutro-primary-light: $n800;
+$on-bg-highlight-neutro-primary-dark: $n800;
+$bg-highlight-neutro-primary-dark: $n200;
+$on-bg-highlight-neutro-secondary-light: $n900;
+$bg-highlight-neutro-secondary-light: $n200;
+$on-bg-highlight-neutro-secondary-dark: $n100;
+$bg-highlight-neutro-secondary-dark: $n700;
 
-// dropdown-list
-$on-bg-dropdown-item-disabled-primary-dark: $n300;
-$on-bg-dropdown-item-pressed-primary-dark: $n900;
-$bg-dropdown-item-hover-primary-dark: $n300;
-$on-bg-dropdown-item-hover-primary-dark: $n800;
-$on-bg-dropdown-item-active-primary-dark: $n800;
-$on-bg-dropdown-item-disabled-primary-light: $n700;
-$bg-dropdown-item-hover-primary-light: $b700;
-$on-bg-dropdown-item-hover-primary-light: $n400;
-$on-bg-dropdown-item-active-primary-light: $n400;
-$outline-dropdown-list-primary-dark: $n800;
-$bg-dropdown-list-primary-dark: $n100;
-$outline-dropdown-list-primary-light: $n400;
-$bg-dropdown-list-primary-light: $n900;
-$on-bg-dropdown-item-pressed-primary-light: $n200;
-
-// icon
-$icon-hover-primary-dark: $b700;
-$icon-active-primary-dark: $n800;
-$icon-hover-primary-light: $b400;
-$icon-active-primary-light: $n400;
+// system
+$positive-primary-light: $g300;
+$positive-primary-dark: $g500;
+$negative-primary-light: $r400;
+$negative-primary-dark: $r500;
+$alternative-primary-light: $o300;
+$alternative-primary-dark: $o400;
 
 // calendar
-$number-calendar-disabled-primary-dark: $n400;
+$on-bg-calendar-nav-primary-light: $n900;
+$on-bg-calendar-nav-primary-dark: $n100;
+$bg-calendar-nav-primary-light: $b400;
+$bg-calendar-nav-primary-dark: $b700;
+$on-bg-calender-primary-light: $n400;
 $on-bg-calender-primary-dark: $n800;
+$bg-calender-primary-light: $n900;
+$bg-calender-primary-dark: $n200;
 $arrow-calendar-active-primary-light: $n900;
-$bg-number-calendar-pressed-primary-light: $b300;
+$arrow-calendar-active-primary-dark: $n100;
+$arrow-calendar-hover-primary-light: $n900;
+$arrow-calendar-hover-primary-dark: $n100;
+$bg-arrow-calendar-hover-primary-light: $b500;
+$bg-arrow-calendar-hover-primary-dark: $b800;
 $arrow-calendar-disabled-primary-light: $b500;
-$number-calendar-pressed-primary-dark: $n800;
+$arrow-calendar-disabled-primary-dark: $b600;
+$number-calender-active-primary-light: $n400;
+$number-calender-active-primary-dark: $n800;
+$number-calendar-hover-primary-light: $n400;
+$number-calendar-hover-primary-dark: $n800;
+$bg-number-calendar-hover-primary-light: $b800;
+$bg-number-calendar-hover-primary-dark: $n400;
 $number-calendar-pressed-primary-light: $n900;
+$number-calendar-pressed-primary-dark: $n800;
+$bg-number-calendar-pressed-primary-light: $b300;
 $bg-number-calendar-pressed-primary-dark: $n100;
-$bg-number-calendar-hover-primary-light: $b800;
-$number-calendar-hover-primary-dark: $n800;
-$number-calendar-hover-primary-light: $n400;
-$bg-arrow-calendar-hover-primary-light: $b500;
-$arrow-calendar-hover-primary-dark: $n100;
-$arrow-calendar-active-primary-dark: $n100;
-$on-bg-calender-primary-light: $n400;
-$bg-calender-primary-dark: $n200;
 $number-calendar-disabled-primary-light: $n700;
-$arrow-calendar-disabled-primary-dark: $b600;
-$bg-calendar-nav-primary-light: $b400;
-$on-bg-calendar-nav-primary-light: $n900;
-$on-bg-calendar-nav-primary-dark: $n100;
-$bg-number-calendar-hover-primary-dark: $n400;
-$number-calender-active-primary-dark: $n800;
-$bg-calendar-nav-primary-dark: $b700;
-$bg-arrow-calendar-hover-primary-dark: $b800;
-$number-calender-active-primary-light: $n400;
-$bg-calender-primary-light: $n900;
-$arrow-calendar-hover-primary-light: $n900;
-
-// tooltip
-$bg-tooltip-primary-light: $n800;
-$on-bg-tooltip-primary-light: $n400;
-$bg-tooltip-primary-dark: $n400;
-$on-bg-tooltip-primary-dark: $n900;
-
-// table
-$bg-table-header-secondary-dark: $n400;
-$on-bg-table-header-secondary-dark: $n900;
-$bg-table-hover-primary-dark: $n200;
-$on-bg-table-hover-primary-dark: $n800;
-$bg-table-active-primary-dark: $n100;
-$on-bg-table-active-primary-dark: $n800;
-$bg-table-header-secondary-light: $n700;
-$on-bg-table-header-secondary-light: $n400;
-$on-bg-table-hover-primary-light: $n400;
-$bg-table-hover-primary-light: $n800;
-$bg-table-active-primary-light: $n900;
-$on-bg-table-active-primary-light: $n400;
-$bg-table-header-primary-light: $n900;
-$on-bg-table-header-primary-light: $n400;
-$on-bg-table-header-primary-dark: $n800;
-$bg-table-header-primary-dark: $n100;
+$number-calendar-disabled-primary-dark: $n400;
 
-// button-tertiary
-$bg-button-hover-tertiary-light: $b800;
-$on-bg-button-active-tertiary-dark: $n900;
-$on-bg-button-hover-tertiary-light: $b400;
-$on-bg-button-active-tertiary-light: $b400;
-$on-bg-button-hover-tertiary-dark: $n900;
-$bg-button-pressed-tertiary-dark: $n200;
-$on-bg-button-pressed-tertiary-dark: $n900;
-$bg-button-pressed-tertiary-light: $b600;
-$on-bg-button-pressed-tertiary-light: $b300;
-$bg-button-hover-tertiary-dark: $n500;
-$bg-button-active-tertiary-light: $b700;
-$bg-button-active-tertiary-dark: $n400;
+// checkbox
+$outline-checkbox-off-primary-light: $n400;
+$outline-checkbox-off-primary-dark: $n800;
+$on-bg-checkbox-on-primary-light: $n900;
+$on-bg-checkbox-on-primary-dark: $n100;
+$bg-checkbox-on-primary-light: $b400;
+$bg-checkbox-on-primary-dark: $b700;
 
-// divider
-$divider-primary-dark: $n800;
-$divider-primary-light: $n400;
+// radio button
+$radio-button-off-primary-light: $n400;
+$radio-button-off-primary-dark: $n800;
+$radio-button-on-primary-light: $b400;
+$radio-button-on-primary-dark: $b700;
 
 // stepper
-$bg-stepper-completed-primary-dark: $g500;
-$on-bg-stepper-completed-primary-dark: $g100;
-$line-stepper-completed-primary-dark: $g500;
-$text-stepper-completed-primary-dark: $n800;
-$bg-stepper-current-primary-dark: $b700;
-$on-bg-stepper-current-primary-dark: $n100;
-$line-stepper-current-primary-dark: $b700;
-$text-stepper-current-primary-dark: $n800;
-$bg-stepper-pending-primary-dark: $n400;
-$on-bg-stepper-pending-primary-dark: $n100;
-$line-stepper-pending-primary-dark: $n400;
-$text-stepper-pending-primary-dark: $n400;
-$bg-stepper-current-primary-light: $b400;
-$on-bg-stepper-current-primary-light: $n900;
-$text-stepper-current-primary-light: $n500;
-$bg-stepper-pending-primary-light: $n800;
 $text-stepper-pending-primary-light: $n600;
-$text-stepper-completed-primary-light: $n500;
-$line-stepper-current-primary-light: $b400;
-$line-stepper-completed-primary-light: $g500;
 $line-stepper-pending-primary-light: $n800;
 $on-bg-stepper-pending-primary-light: $n600;
+$bg-stepper-pending-primary-light: $n800;
+$text-stepper-current-primary-light: $n500;
+$line-stepper-current-primary-light: $b400;
+$on-bg-stepper-current-primary-light: $n900;
+$bg-stepper-current-primary-light: $b400;
+$text-stepper-completed-primary-light: $n500;
+$line-stepper-completed-primary-light: $g500;
 $on-bg-stepper-completed-primary-light: $g100;
 $bg-stepper-completed-primary-light: $g500;
+$text-stepper-pending-primary-dark: $n400;
+$line-stepper-pending-primary-dark: $n400;
+$on-bg-stepper-pending-primary-dark: $n100;
+$bg-stepper-pending-primary-dark: $n400;
+$text-stepper-current-primary-dark: $n800;
+$line-stepper-current-primary-dark: $b700;
+$on-bg-stepper-current-primary-dark: $n100;
+$bg-stepper-current-primary-dark: $b700;
+$text-stepper-completed-primary-dark: $n800;
+$line-stepper-completed-primary-dark: $g500;
+$on-bg-stepper-completed-primary-dark: $g100;
+$bg-stepper-completed-primary-dark: $g500;
 
-// loading
-$loading-primary-dark: $b700;
-$loading-primary-light: $b400;
+// table
+$on-bg-table-header-primary-light: $n400;
+$bg-table-header-primary-light: $n900;
+$on-bg-table-active-primary-light: $n400;
+$bg-table-active-primary-light: $n900;
+$on-bg-table-hover-primary-light: $n400;
+$bg-table-hover-primary-light: $n800;
+$on-bg-table-header-secondary-light: $n400;
+$bg-table-header-secondary-light: $n700;
+$on-bg-table-header-primary-dark: $n800;
+$bg-table-header-primary-dark: $n100;
+$on-bg-table-active-primary-dark: $n800;
+$bg-table-active-primary-dark: $n100;
+$on-bg-table-hover-primary-dark: $n800;
+$bg-table-hover-primary-dark: $n200;
+$on-bg-table-header-secondary-dark: $n900;
+$bg-table-header-secondary-dark: $n400;
 
-// button-secondary
-$outline-button-pressed-secondary-dark: $b600;
-$on-bg-button-pressed-secondary-dark: $b600;
-$outline-button-hover-secondary-light: $b500;
-$bg-button-pressed-secondary-dark: $n100;
-$on-bg-button-hover-secondary-dark: $b800;
-$bg-button-pressed-secondary-light: $n900;
-$bg-button-hover-secondary-light: $n900;
-$outline-button-active-secondary-dark: $b700;
-$bg-button-active-secondary-light: $n900;
-$bg-button-active-secondary-dark: $n100;
-$outline-button-active-secondary-light: $b400;
-$on-bg-button-active-secondary-light: $b400;
-$on-bg-button-active-secondary-dark: $b700;
-$outline-button-hover-secondary-dark: $b800;
-$bg-button-hover-secondary-dark: $n100;
-$outline-button-pressed-secondary-light: $b300;
-$on-bg-button-pressed-secondary-light: $b300;
-$on-bg-button-hover-secondary-light: $b500;
+// tooltip
+$on-bg-tooltip-primary-light: $n400;
+$bg-tooltip-primary-light: $n800;
+$on-bg-tooltip-primary-dark: $n900;
+$bg-tooltip-primary-dark: $n400;
 
-// button-negative
-$on-bg-button-hover-negative-light: $r200;
-$on-bg-button-pressed-negative-light: $r100;
-$bg-button-hover-negative-dark: $r700;
-$on-bg-button-hover-negative-dark: $r300;
-$bg-button-active-negative-dark: $r600;
-$bg-button-active-negative-light: $r600;
-$on-bg-button-active-negative-dark: $r200;
-$bg-button-pressed-negative-dark: $r500;
-$on-bg-button-pressed-negative-dark: $r100;
-$bg-button-pressed-negative-light: $r500;
-$bg-button-hover-negative-light: $r700;
-$on-bg-button-active-negative-light: $r200;
+// text-field
+$bg-field-empty-enabled-primary-light: $n900;
+$outline-field-empty-enabled-primary-light: $n400;
+$placeholder-empty-enabled-primary-light: $n600;
+$label-text-empty-enabled-primary-light: $n400;
+$bg-field-empty-enabled-hover-primary-light: $n800;
+$bg-field-full-enabled-pressed-primary-light: $n900;
+$label-text-full-enabled-pressed-primary-light: $n400;
+$outline-field-full-enabled-pressed-primary-light: $b400;
+$placeholder-full-enabled-pressed-primary-light: $n400;
+$bg-field-empty-disabled-primary-light: $n800;
+$placeholder-empty-disabled-primary-light: $n700;
+$label-text-empty-disabled-primary-light: $n700;
+$bg-field-full-enabled-primary-light: $n900;
+$outline-field-full-enabled-primary-light: $n400;
+$input-text-full-enabled-primary-light: $n400;
+$label-text-full-enabled-primary-light: $n400;
+$bg-field-full-enabled-hover-primary-light: $n800;
+$bg-field-full-disabled-primary-light: $n800;
+$input-text-full-disabled-primary-light: $n700;
+$label-text-full-disabled-primary-light: $n700;
+$bg-field-full-read-only-primary-light: $n800;
+$input-text-full-read-only-primary-light: $n400;
+$label-text-full-read-only-primary-light: $n400;
+$bg-field-empty-enabled-primary-dark: $n100;
+$outline-field-empty-enabled-primary-dark: $n800;
+$placeholder-empty-enabled-primary-dark: $n400;
+$label-text-empty-enabled-primary-dark: $n800;
+$bg-field-empty-enabled-hover-primary-dark: $n200;
+$bg-field-empty-disabled-primary-dark: $n200;
+$placeholder-empty-disabled-primary-dark: $n300;
+$label-text-empty-disabled-primary-dark: $n300;
+$bg-field-full-enabled-pressed-primary-dark: $n100;
+$outline-field-full-enabled-pressed-primary-dark: $b700;
+$placeholder-full-enabled-pressed-primary-dark: $n800;
+$label-text-full-enabled-pressed-primary-dark: $n800;
+$bg-field-full-enabled-primary-dark: $n100;
+$outline-field-full-enabled-primary-dark: $n800;
+$input-text-full-enabled-primary-dark: $n800;
+$label-text-full-enabled-primary-dark: $n800;
+$bg-field-full-enabled-hover-primary-dark: $n200;
+$bg-field-full-disabled-primary-dark: $n200;
+$input-text-full-disabled-primary-dark: $n300;
+$label-text-full-disabled-primary-dark: $n300;
+$bg-field-full-read-only-primary-dark: $n300;
+$input-text-full-read-only-primary-dark: $n800;
+$label-text-full-read-only-primary-dark: $n800;
 
-// button-positive
-$on-bg-button-active-positive-light: $g100;
-$bg-button-pressed-positive-light: $g400;
-$bg-button-active-positive-dark: $g500;
-$on-bg-button-hover-positive-light: $g100;
-$bg-button-active-positive-light: $g500;
-$on-bg-button-active-positive-dark: $g100;
-$bg-button-pressed-positive-dark: $g400;
-$on-bg-button-pressed-positive-dark: $g100;
-$bg-button-hover-positive-light: $g600;
-$on-bg-button-hover-positive-dark: $g100;
-$on-bg-button-pressed-positive-light: $g100;
-$bg-button-hover-positive-dark: $g600;
+// icon
+$icon-active-primary-light: $n400;
+$icon-hover-primary-light: $b400;
+$icon-active-primary-dark: $n800;
+$icon-hover-primary-dark: $b700;
 
-// checkbox
-$bg-checkbox-on-primary-dark: $b700;
-$bg-checkbox-on-primary-light: $b400;
-$on-bg-checkbox-on-primary-dark: $n100;
-$on-bg-checkbox-on-primary-light: $n900;
-$outline-checkbox-off-primary-dark: $n800;
-$outline-checkbox-off-primary-light: $n400;
+// dropdown-list
+$bg-dropdown-list-primary-light: $n900;
+$outline-dropdown-list-primary-light: $n400;
+$on-bg-dropdown-item-active-primary-light: $n400;
+$on-bg-dropdown-item-hover-primary-light: $n400;
+$bg-dropdown-item-hover-primary-light: $b700;
+$on-bg-dropdown-item-pressed-primary-light: $n200;
+$on-bg-dropdown-item-disabled-primary-light: $n700;
+$outline-dropdown-list-primary-dark: $n800;
+$bg-dropdown-list-primary-dark: $n100;
+$on-bg-dropdown-item-active-primary-dark: $n800;
+$on-bg-dropdown-item-hover-primary-dark: $n800;
+$bg-dropdown-item-hover-primary-dark: $n300;
+$on-bg-dropdown-item-pressed-primary-dark: $n900;
+$on-bg-dropdown-item-disabled-primary-dark: $n300;
 
-// radio button
-$radio-button-on-primary-dark: $b700;
-$radio-button-off-primary-light: $n400;
-$radio-button-off-primary-dark: $n800;
-$radio-button-on-primary-light: $b400;
+// loading
+$loading-primary-light: $b400;
+$loading-primary-dark: $b700;
 
-// button-alternative
-$on-bg-button-pressed-alternative-dark: $o100;
-$bg-button-hover-alternative-light: $o500;
-$bg-button-hover-alternative-dark: $o500;
-$bg-button-pressed-alternative-dark: $o300;
-$bg-button-pressed-alternative-light: $o300;
-$on-bg-button-pressed-alternative-light: $o100;
-$on-bg-button-hover-alternative-dark: $o200;
-$on-bg-button-hover-alternative-light: $o200;
-$on-bg-button-active-alternative-dark: $o200;
-$bg-button-active-alternative-light: $o400;
-$on-bg-button-active-alternative-light: $o200;
-$bg-button-active-alternative-dark: $o400;
+// switch
+$on-bg-switch-on-primary-light: $n900;
+$bg-switch-on-primary-light: $b400;
+$on-bg-switch-off-primary-light: $n800;
+$bg-switch-off-primary-light: $n700;
+$on-bg-switch-disabled-primary-light: $n900;
+$bg-switch-disabled-primary-light: $n800;
+$on-bg-switch-on-primary-dark: $n200;
+$bg-switch-on-primary-dark: $b700;
+$on-bg-switch-off-primary-dark: $n400;
+$bg-switch-off-primary-dark: $n300;
+$on-bg-switch-disabled-primary-dark: $n100;
+$bg-switch-disabled-primary-dark: $n200;
 
-// highlight
-$on-bg-highlight-neutro-secondary-dark: $n100;
-$bg-highlight-neutro-secondary-light: $n200;
-$bg-highlight-neutro-primary-light: $n800;
-$on-bg-highlight-neutro-primary-light: $n400;
-$bg-highlight-neutro-primary-dark: $n200;
-$on-bg-highlight-neutro-secondary-light: $n900;
-$bg-highlight-neutro-secondary-dark: $n700;
-$on-bg-highlight-neutro-primary-dark: $n800;
+// notification
+$on-bg-notification-primary-light: $n400;
+$bg-notification-primary-light: $n900;
+$on-bg-icon-notification-error-primary-light: $r200;
+$bg-icon-notification-error-primary-light: $r600;
+$notification-error-highlight-primary-light: $r400;
+$on-bg-icon-notification-success-primary-light: $g100;
+$bg-icon-notification-success-primary-light: $g500;
+$notification-success-highlight-primary-light: $g300;
+$on-bg-icon-notification-warning-primary-light: $o200;
+$bg-icon-notification-warning-primary-light: $o400;
+$notification-warning-highlight-primary-light: $o300;
+$on-bg-notification-primary-dark: $n800;
+$bg-notification-primary-dark: $n200;
+$on-bg-icon-notification-error-primary-dark: $r200;
+$bg-icon-notification-error-primary-dark: $r600;
+$notification-error-highlight-primary-dark: $r600;
+$on-bg-icon-notification-success-primary-dark: $g100;
+$bg-icon-notification-success-primary-dark: $g500;
+$notification-success-highlight-primary-dark: $g500;
+$on-bg-icon-notification-warning-primary-dark: $o200;
+$bg-icon-notification-warning-primary-dark: $o400;
+$notification-warning-highlight-primary-dark: $o400;
 
-// disabled-status
-$outline-disabled-light: $n700;
-$bg-button-disabled-light: $n800;
-$on-bg-button-disabled-dark: $n400;
-$bg-button-disabled-dark: $n200;
-$outline-disabled-dark: $n200;
-$on-bg-button-disabled-light: $n600;
+// dialog
+$bg-dialog-primary-light: $n900;
+$on-bg-dialog-header-primary-light: $n300;
+$bg-dialog-header-primary-light: $n800;
+$close-dialog-header-active-primary-light: $b400;
+$close-dialog-header-hover-primary-light: $b400;
+$bg-close-dialog-header-hover-primary-light: $n900;
+$on-bg-icon-dialog-primary-light: $n900;
+$bg-icon-dialog-primary-light: $n300;
+$bg-dialog-primary-dark: $n100;
+$on-bg-dialog-header-primary-dark: $n800;
+$bg-dialog-header-primary-dark: $n200;
+$close-dialog-header-active-primary-dark: $b700;
+$close-dialog-header-hover-primary-dark: $b700;
+$bg-close-dialog-header-hover-primary-dark: $n100;
+$on-bg-icon-dialog-primary-dark: $n300;
+$bg-icon-dialog-primary-dark: $n800;
 
-// logo
-$logo-primary-light: $b400;
-$logo-primary-dark: $b700;
+// link
+$link-active-primary-light: $b400;
+$link-hover-primary-light: $b400;
+$bg-link-hover-primary-light: $b800;
+$link-disabled-primary-light: $n700;
+$link-pressed-primary-light: $b200;
+$link-active-primary-dark: $b700;
+$link-hover-primary-dark: $b700;
+$bg-link-hover-primary-dark: $n300;
+$link-disabled-primary-dark: $n300;
+$link-pressed-primary-dark: $b600;
 
-// text
-$text-primary-dark: $n800;
-$text-primary-light: $n400;
+// menu
+$divider-menu-primary-light: $n800;
+$bg-menu-primary-light: $n900;
+$on-bg-menu-primary-light: $n400;
+$on-bg-menu-button-active-primary-light: $n400;
+$on-bg-menu-button-hover-primary-light: $n400;
+$bg-menu-button-hover-primary-light: $n800;
+$on-bg-menu-button-disabled-primary-light: $n700;
+$on-bg-menu-button-pressed-primary-light: $n400;
+$bg-menu-button-pressed-primary-light: $b700;
+$divider-menu-primary-dark: $n200;
+$bg-menu-primary-dark: $n100;
+$on-bg-menu-primary-dark: $n800;
+$on-bg-menu-button-active-primary-dark: $n800;
+$on-bg-menu-button-hover-primary-dark: $n800;
+$bg-menu-button-hover-primary-dark: $n200;
+$on-bg-menu-button-disabled-primary-dark: $n300;
+$on-bg-menu-button-pressed-primary-dark: $n900;
+$bg-menu-button-pressed-primary-dark: $n400;
 
-$hero-light-theme: (radio-button-on-primary: $radio-button-on-primary-light);
-$hero-dark-theme: (radio-button-on-primary: $radio-button-on-primary-dark);
+// shadow
+$shadow-primary-dark: $n0;
+$shadow-primary-light: $n100;