@progressio_resources/gravity-design-system 1.0.5 → 1.0.7

package/src/lib/styles/_icons.scss

@@ -0,0 +1,11 @@
+svg-icon svg {
+  --icon-color: var(--icon-active-primary);
+  height: 1rem;
+  width: 1rem;
+}
+
+svg-icon {
+  &:hover, *:hover {
+    --icon-color: var(--icon-hover-primary);
+  }
+}

package/src/lib/styles/_link.scss

@@ -0,0 +1,25 @@
+.gravity-link {
+  color: var(--link-color);
+  text-decoration: underline;
+  text-decoration-color: var(--link-underline-color);
+
+  &:not([disabled]) {
+    --link-color: var(--link-active-primary);
+    --link-underline-color: var(--link-active-primary);
+
+    &:hover {
+      background-color: var(--bg-link-hover-primary);
+      --link-color: var(--link-hover-primary);
+    }
+
+    &:active {
+      --link-color: var(--link-pressed-primary);
+    }
+  }
+
+  &[disabled] {
+    --link-color: var(--link-disabled-primary);
+    --link-underline-color: var(--link-disabled-primary);
+    pointer-events: none;
+  }
+}

package/src/lib/styles/_shared.scss

@@ -0,0 +1,19 @@
+$border-radius-system: 0.625rem;
+
+.text-negative {
+  color: var(--negative-primary);
+}
+
+.text-neutro {
+  color: var(--text-primary);
+}
+
+.text-positive {
+  color: var(--positive-primary);
+}
+
+.support-text {
+  margin-left: 0;
+  margin-top: 0.3125rem;
+  padding-inline: 1rem;
+}

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

@@ -1,5 +1,6 @@
 @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;
@@ -15,36 +16,85 @@ $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-empty-enabled-pressed-primary-dark: $n800;
+$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-empty-enabled-pressed-primary-light: $n400;
-$placeholder-empty-enabled-pressed-primary-light: $n400;
-$outline-field-empty-enabled-pressed-primary-light: $b400;
-$bg-field-empty-enabled-pressed-primary-light: $n900;
-$alternative-primary-light: $o300;
+$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;
-$alternative-primary-dark: $o400;
 $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-button-active-primary-dark: $b700;
 $bg-field-full-enabled-primary-dark: $n100;
-$bg-button-active-primary-light: $b400;
 $bg-field-empty-enabled-hover-primary-dark: $n200;
 $label-text-empty-enabled-primary-dark: $n800;
-$surface-primary-light: $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;
+$bg-button-active-primary-light: $b400;
+$on-bg-button-hover-primary-dark: $b200;
+$bg-button-hover-primary-light: $b500;
+$on-bg-button-pressed-primary-dark: $b200;
+$on-bg-button-pressed-primary-light: $n900;
+$bg-button-pressed-primary-light: $b300;
+$bg-button-hover-primary-dark: $b800;
+$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;
+
+// surface
+$surface-primary-light: $n800;
+$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;
@@ -55,31 +105,66 @@ $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;
+
+// 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;
-$notification-sucess-highlight-primary-light: $g300;
-$bg-dialog-primary-light: $n900;
+$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;
+
+// notification
+$notification-success-highlight-primary-light: $g300;
 $bg-icon-notification-success-primary-light: $g500;
-$bg-field-full-enabled-hover-primary-dark: $n200;
-$bg-field-empty-disabled-primary-dark: $n200;
 $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-switch-disabled-primary-dark: $n200;
 $bg-icon-notification-warning-primary-dark: $o400;
 $on-bg-icon-notification-warning-primary-dark: $o200;
 $on-bg-icon-notification-error-primary-light: $r200;
-$on-bg-switch-disabled-primary-dark: $n100;
 $bg-icon-notification-error-primary-dark: $r600;
-$on-bg-switch-disabled-primary-light: $n900;
 $on-bg-icon-notification-success-primary-light: $g100;
-$notification-sucess-highlight-primary-dark: $g500;
+$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;
+
+// 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;
+
+// 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;
@@ -89,28 +174,61 @@ $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;
-$notification-warning-highlight-primary-light: $o300;
 $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;
-$bg-menu-primary-light: $n900;
+$icon-hover-primary-light: $b400;
+$icon-active-primary-light: $n400;
+
+// calendar
 $number-calendar-disabled-primary-dark: $n400;
+$on-bg-calender-primary-dark: $n800;
+$arrow-calendar-active-primary-light: $n900;
+$bg-number-calendar-pressed-primary-light: $b300;
+$arrow-calendar-disabled-primary-light: $b500;
+$number-calendar-pressed-primary-dark: $n800;
+$number-calendar-pressed-primary-light: $n900;
+$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-button-hover-tertiary-light: $b800;
 $bg-table-active-primary-dark: $n100;
 $on-bg-table-active-primary-dark: $n800;
-$icon-hover-primary-light: $b400;
-$divider-primary-dark: $n800;
 $bg-table-header-secondary-light: $n700;
 $on-bg-table-header-secondary-light: $n400;
 $on-bg-table-hover-primary-light: $n400;
@@ -119,218 +237,158 @@ $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;
+
+// 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;
+
+// divider
+$divider-primary-dark: $n800;
+$divider-primary-light: $n400;
+
+// stepper
 $bg-stepper-completed-primary-dark: $g500;
 $on-bg-stepper-completed-primary-dark: $g100;
-$bg-field-full-enabled-primary-light: $n900;
 $line-stepper-completed-primary-dark: $g500;
-$placeholder-empty-enabled-primary-light: $n600;
 $text-stepper-completed-primary-dark: $n800;
-$label-text-empty-enabled-primary-light: $n400;
 $bg-stepper-current-primary-dark: $b700;
-$bg-field-empty-enabled-primary-light: $n900;
 $on-bg-stepper-current-primary-dark: $n100;
-$surface-primary-dark: $n200;
-$bg-field-empty-enabled-primary-dark: $n100;
 $line-stepper-current-primary-dark: $b700;
-$surface-secondary-dark: $n100;
-$outline-field-full-enabled-primary-light: $n400;
 $text-stepper-current-primary-dark: $n800;
-$input-text-full-enabled-primary-light: $n400;
 $bg-stepper-pending-primary-dark: $n400;
-$bg-field-empty-enabled-hover-primary-light: $n800;
 $on-bg-stepper-pending-primary-dark: $n100;
-$surface-secondary-light: $n900;
-$bg-menu-primary-dark: $n100;
 $line-stepper-pending-primary-dark: $n400;
-$outline-field-empty-enabled-primary-dark: $n800;
 $text-stepper-pending-primary-dark: $n400;
-$on-bg-calender-primary-dark: $n800;
-$arrow-calendar-active-primary-light: $n900;
 $bg-stepper-current-primary-light: $b400;
-$loading-primary-dark: $b700;
 $on-bg-stepper-current-primary-light: $n900;
-$outline-button-pressed-secondary-dark: $b600;
-$bg-switch-disabled-primary-light: $n800;
-$on-bg-button-hover-negative-light: $r200;
 $text-stepper-current-primary-light: $n500;
 $bg-stepper-pending-primary-light: $n800;
-$bg-switch-on-primary-light: $b400;
-$notification-error-highlight-primary-dark: $r600;
+$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;
+$on-bg-stepper-completed-primary-light: $g100;
+$bg-stepper-completed-primary-light: $g500;
+
+// loading
+$loading-primary-dark: $b700;
+$loading-primary-light: $b400;
+
+// button-secondary
+$outline-button-pressed-secondary-dark: $b600;
 $on-bg-button-pressed-secondary-dark: $b600;
-$bg-switch-off-primary-dark: $n300;
+$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;
+
+// button-negative
+$on-bg-button-hover-negative-light: $r200;
 $on-bg-button-pressed-negative-light: $r100;
-$text-stepper-pending-primary-light: $n600;
+$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;
+
+// button-positive
 $on-bg-button-active-positive-light: $g100;
-$bg-checkbox-on-primary-dark: $b700;
 $bg-button-pressed-positive-light: $g400;
-$bg-checkbox-on-primary-light: $b400;
 $bg-button-active-positive-dark: $g500;
-$on-bg-checkbox-on-primary-dark: $n100;
 $on-bg-button-hover-positive-light: $g100;
-$on-bg-checkbox-on-primary-light: $n900;
 $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;
+
+// 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;
+
+// radio button
 $radio-button-on-primary-dark: $b700;
-$bg-menu-button-pressed-primary-light: $b700;
-$bg-number-calendar-pressed-primary-light: $b300;
-$on-bg-menu-button-hover-primary-light: $n400;
-$arrow-calendar-disabled-primary-light: $b500;
-$number-calendar-pressed-primary-dark: $n800;
-$on-bg-menu-primary-light: $n400;
-$number-calendar-pressed-primary-light: $n900;
-$bg-number-calendar-pressed-primary-dark: $n100;
-$icon-active-primary-light: $n400;
-$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;
-$link-hover-primary-dark: $b700;
-$arrow-calendar-hover-primary-dark: $n100;
-$outline-button-hover-secondary-light: $b500;
-$on-bg-switch-on-primary-dark: $n200;
-$divider-primary-light: $n400;
-$arrow-calendar-active-primary-dark: $n100;
-$text-stepper-completed-primary-light: $n500;
-$on-bg-calender-primary-light: $n400;
-$on-bg-notification-primary-dark: $n800;
-$on-bg-table-header-primary-dark: $n800;
-$bg-field-full-read-only-primary-dark: $n300;
-$on-bg-button-active-tertiary-dark: $n900;
-$on-bg-button-active-positive-dark: $g100;
-$on-bg-button-pressed-alternative-dark: $o100;
-$bg-notification-primary-light: $n900;
-$bg-button-hover-alternative-light: $o500;
-$bg-field-empty-enabled-pressed-primary-dark: $n100;
-$on-bg-highlight-neutro-secondary-dark: $n100;
-$label-text-empty-disabled-primary-dark: $n300;
-$bg-highlight-neutro-secondary-light: $n200;
-$line-stepper-current-primary-light: $b400;
-$on-bg-switch-off-primary-light: $n800;
-$bg-button-pressed-secondary-dark: $n100;
-$bg-field-full-disabled-primary-dark: $n200;
-$on-bg-button-hover-primary-dark: $b200;
-$outline-disabled-light: $n700;
-$bg-calender-primary-dark: $n200;
-$on-bg-button-hover-secondary-dark: $b800;
-$negative-primary-light: $r400;
-$bg-button-pressed-secondary-light: $n900;
-$on-bg-icon-notification-error-primary-dark: $r200;
-$on-bg-switch-off-primary-dark: $n400;
-$bg-button-hover-negative-dark: $r700;
-$bg-button-hover-primary-light: $b500;
-$bg-button-hover-secondary-light: $n900;
-$line-stepper-completed-primary-light: $g500;
-$on-bg-button-hover-negative-dark: $r300;
-$bg-button-disabled-light: $n800;
 $radio-button-off-primary-light: $n400;
-$outline-button-active-secondary-dark: $b700;
 $radio-button-off-primary-dark: $n800;
 $radio-button-on-primary-light: $b400;
-$bg-button-active-secondary-light: $n900;
-$number-calendar-disabled-primary-light: $n700;
-$on-bg-button-disabled-dark: $n400;
+
+// button-alternative
+$on-bg-button-pressed-alternative-dark: $o100;
+$bg-button-hover-alternative-light: $o500;
 $bg-button-hover-alternative-dark: $o500;
-$bg-button-disabled-dark: $n200;
-$negative-primary-dark: $r500;
-$bg-highlight-neutro-primary-light: $n800;
-$bg-icon-notification-warning-primary-light: $o400;
-$on-bg-highlight-neutro-primary-light: $n400;
 $bg-button-pressed-alternative-dark: $o300;
 $bg-button-pressed-alternative-light: $o300;
-$divider-menu-primary-light: $n800;
-$arrow-calendar-disabled-primary-dark: $b600;
 $on-bg-button-pressed-alternative-light: $o100;
-$on-bg-menu-button-active-primary-light: $n400;
-$on-bg-dropdown-item-pressed-primary-light: $n200;
-$bg-highlight-neutro-primary-dark: $n200;
 $on-bg-button-hover-alternative-dark: $o200;
-$bg-button-active-secondary-dark: $n100;
 $on-bg-button-hover-alternative-light: $o200;
-$outline-button-active-secondary-light: $b400;
-$bg-button-active-negative-dark: $r600;
-$line-stepper-pending-primary-light: $n800;
-$bg-button-active-negative-light: $r600;
-$on-bg-button-active-secondary-light: $b400;
 $on-bg-button-active-alternative-dark: $o200;
-$bg-switch-on-primary-dark: $b700;
-$on-bg-button-active-secondary-dark: $b700;
-$on-bg-button-active-negative-dark: $r200;
-$on-bg-stepper-pending-primary-light: $n600;
 $bg-button-active-alternative-light: $o400;
-$input-text-full-read-only-primary-light: $n400;
 $on-bg-button-active-alternative-light: $o200;
-$input-text-full-disabled-primary-light: $n700;
-$placeholder-empty-disabled-primary-dark: $n300;
-$on-bg-highlight-neutro-secondary-light: $n900;
-$bg-button-pressed-negative-dark: $r500;
-$on-bg-button-pressed-primary-dark: $b200;
-$bg-button-pressed-positive-dark: $g400;
-$on-bg-button-pressed-negative-dark: $r100;
-$on-bg-button-hover-tertiary-light: $b400;
-$on-bg-button-pressed-positive-dark: $g100;
-$on-bg-button-pressed-primary-light: $n900;
-$bg-button-pressed-negative-light: $r500;
-$bg-calendar-nav-primary-light: $b400;
-$on-bg-switch-on-primary-light: $n900;
-$outline-button-hover-secondary-dark: $b800;
-$bg-button-pressed-primary-light: $b300;
-$bg-button-hover-secondary-dark: $n100;
-$positive-primary-light: $g300;
-$bg-button-hover-negative-light: $r700;
-$on-bg-calendar-nav-primary-light: $n900;
-$on-bg-calendar-nav-primary-dark: $n100;
-$outline-button-pressed-secondary-light: $b300;
-$on-bg-button-pressed-secondary-light: $b300;
-$positive-primary-dark: $g500;
-$logo-primary-light: $b400;
-$on-bg-button-hover-secondary-light: $b500;
-$on-bg-menu-button-pressed-primary-light: $n400;
-$bg-number-calendar-hover-primary-dark: $n400;
-$number-calender-active-primary-dark: $n800;
-$bg-calendar-nav-primary-dark: $b700;
-$on-bg-button-active-negative-light: $r200;
-$bg-notification-primary-dark: $n200;
-$bg-table-header-primary-dark: $n100;
-$label-text-full-disabled-primary-dark: $n300;
-$on-bg-button-active-tertiary-light: $b400;
-$loading-primary-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-primary-dark: $b800;
-$bg-button-hover-tertiary-dark: $n500;
-$on-bg-stepper-completed-primary-light: $g100;
-$on-bg-notification-primary-light: $n400;
-$bg-button-pressed-primary-dark: $b600;
-$label-text-empty-enabled-pressed-primary-dark: $n800;
-$on-bg-button-hover-primary-light: $n900;
-$bg-button-active-tertiary-light: $b700;
-$outline-disabled-dark: $n200;
-$on-bg-button-disabled-light: $n600;
-$outline-checkbox-off-primary-light: $n400;
-$bg-button-hover-positive-light: $g600;
-$link-hover-primary-light: $b400;
 $bg-button-active-alternative-dark: $o400;
-$on-bg-button-hover-positive-dark: $g100;
-$outline-field-empty-enabled-pressed-primary-dark: $b700;
+
+// 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-button-pressed-positive-light: $g100;
-$bg-button-active-tertiary-dark: $n400;
 $on-bg-highlight-neutro-primary-dark: $n800;
-$bg-arrow-calendar-hover-primary-dark: $b800;
-$link-active-primary-dark: $b700;
-$number-calender-active-primary-light: $n400;
-$on-bg-button-active-primary-dark: $n100;
-$bg-button-hover-positive-dark: $g600;
-$bg-stepper-completed-primary-light: $g500;
-$bg-calender-primary-light: $n900;
-$on-bg-icon-notification-warning-primary-light: $o200;
+
+// 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;
+
+// logo
+$logo-primary-light: $b400;
 $logo-primary-dark: $b700;
-$bg-link-hover-primary-dark: $n300;
-$on-bg-button-active-primary-light: $n900;
-$arrow-calendar-hover-primary-light: $n900;
-$link-pressed-primary-dark: $b600;
+
+// text
 $text-primary-dark: $n800;
 $text-primary-light: $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);