@progressio_resources/gravity-design-system 2.5.8 → 2.5.10

package/src/lib/assets/json/icons.json

@@ -1,5 +1,165 @@
 {
   "iconImageFiles": [
+    {
+      "iconName": "gt-icon-arrow-down-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-arrow-down/gt-icon-arrow-down-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-arrow-down-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-arrow-down/gt-icon-arrow-down-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-arrow-down-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-arrow-down/gt-icon-arrow-down-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-arrow-down-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-arrow-down/gt-icon-arrow-down-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-arrow-up-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-arrow-up/gt-icon-arrow-up-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-arrow-up-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-arrow-up/gt-icon-arrow-up-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-arrow-up-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-arrow-up/gt-icon-arrow-up-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-arrow-up-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-arrow-up/gt-icon-arrow-up-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-home-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-home/gt-icon-home-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-home-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-home/gt-icon-home-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-home-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-home/gt-icon-home-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-home-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-home/gt-icon-home-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-internal-processing-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-internal-processing/gt-icon-internal-processing-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-internal-processing-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-internal-processing/gt-icon-internal-processing-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-internal-processing-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-internal-processing/gt-icon-internal-processing-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-internal-processing-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-internal-processing/gt-icon-internal-processing-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-news-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-news/gt-icon-news-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-news-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-news/gt-icon-news-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-news-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-news/gt-icon-news-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-news-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-news/gt-icon-news-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-report-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-report/gt-icon-report-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-report-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-report/gt-icon-report-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-report-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-report/gt-icon-report-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-report-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-report/gt-icon-report-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-security-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-security/gt-icon-security-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-security-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-security/gt-icon-security-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-security-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-security/gt-icon-security-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-security-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-security/gt-icon-security-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-settings-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-settings/gt-icon-settings-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-settings-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-settings/gt-icon-settings-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-settings-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-settings/gt-icon-settings-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-settings-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-settings/gt-icon-settings-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-sign-out-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-sign-out/gt-icon-sign-out-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-sign-out-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-sign-out/gt-icon-sign-out-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-sign-out-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-sign-out/gt-icon-sign-out-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-sign-out-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-sign-out/gt-icon-sign-out-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-user-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-user/gt-icon-user-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-user-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-user/gt-icon-user-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-user-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-user/gt-icon-user-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-user-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-user/gt-icon-user-xl-32.svg"
+    },
     {
       "iconName": "address_book",
       "iconPath": "/assets/gravity/icons/sections/address_book.svg"

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

@@ -237,9 +237,9 @@ $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;
-$outline-field-full-enabled-pressed-primary-light: $b400;
-$label-text-full-enabled-pressed-primary-light: $n400;
 $placeholder-full-enabled-pressed-primary-light: $n400;
+$label-text-full-enabled-pressed-primary-light: $n400;
+$outline-field-full-enabled-pressed-primary-light: $b400;
 $bg-field-empty-disabled-primary-light: $n800;
 $placeholder-empty-disabled-primary-light: $n700;
 $label-text-empty-disabled-primary-light: $n700;
@@ -383,8 +383,9 @@ $link-disabled-primary-dark: $n300;
 $link-pressed-primary-dark: $b600;
 
 // menu
-$divider-menu-primary-light: $n800;
-$bg-menu-primary-light: $n900;
+$divider-menu-active-primary-light: $n800;
+$divider-menu-pressed-primary-light: $b700;
+$bg-menu-active-primary-light: $n900;
 $on-bg-menu-primary-light: $n400;
 $on-bg-menu-button-active-primary-light: $n400;
 $on-bg-menu-button-hover-primary-light: $n400;
@@ -401,7 +402,94 @@ $bg-menu-button-hover-primary-dark: $n200;
 $on-bg-menu-button-disabled-primary-dark: $n300;
 $on-bg-menu-button-pressed-primary-dark: $n900;
 $bg-menu-button-pressed-primary-dark: $n400;
+$divider-menu-pressed-primary-dark: $n400;
+$bg-menu-mobile-primary-light: $n800;
+$bg-menu-mobile-primary-dark: $n200;
+$bg-menu-mobile-card-primary-light: $n900;
+$bg-menu-mobile-card-primary-dark: $n100;
+$bg-menu-mobile-button-pressed-primary-light: $n800;
+$bg-menu-mobile-button-pressed-primary-dark: $n200;
+$on-bg-menu-button-active-secondary-light: $n400;
+$on-bg-menu-button-active-secondary-dark: $n800;
+$bg-menu-button-active-secondary-light: $n900;
+$bg-menu-button-active-secondary-dark: $n100;
 
 // shadow
 $shadow-primary-dark: $n0;
 $shadow-primary-light: $n100;
+
+// Back-button
+$back-button-active-primary-light: $b500;
+$back-button-active-primary-dark: $b800;
+$on-bg-back-button-hover-primary-light: $b300;
+$bg-back-button-hover-primary-light: $n800;
+$on-bg-back-button-hover-primary-dark: $b700;
+$bg-back-button-hover-primary-dark: $n200;
+$back-button-pressed-primary-light: $b200;
+$back-button-pressed-primary-dark: $b600;
+$back-button-disabled-primary-light: $n700;
+$back-button-disabled-primary-dark: $n400;
+
+// Breadcrumb-button
+$breadcrumb-button-active-primary-light: $b500;
+$breadcrumb-button-active-primary-dark: $b800;
+$on-bg-breadcrumb-button-hover-primary-light: $b300;
+$bg-breadcrumb-button-hover-primary-light: $n800;
+$on-bg-breadcrumb-button-hover-primary-dark: $b700;
+$bg-breadcrumb-button-hover-primary-dark: $n200;
+$breadcrumb-button-pressed-primary-light: $b200;
+$breadcrumb-button-pressed-primary-dark: $b600;
+$breadcrumb-button-disabled-primary-light: $n700;
+$breadcrumb-button-disabled-primary-dark: $n400;
+$breadcrumb-button-base-primary-light: $n600;
+$breadcrumb-button-base-primary-dark: $n600;
+
+// notification-button
+$on-bg-notification-button-active-light: $b400;
+$bg-notification-button-active-light: $n900;
+$on-bg-notification-button-hover-light: $b400;
+$bg-notification-button-hover-light: $n800;
+$on-bg-label-notification-button-hover-light: $n900;
+$bg-label-notification-button-hover-light: $b200;
+$on-bg-notification-button-pressed-light: $n400;
+$bg-notification-button-pressed-light: $n700;
+$on-bg-notification-button-disabled-light: $n700;
+$bg-notification-button-disabled-light: $n900;
+$on-bg-notification-button-active-dark: $n900;
+$bg-notification-button-active-dark: $n100;
+$on-bg-notification-button-hover-dark: $n900;
+$bg-notification-button-hover-dark: $n400;
+$on-bg-label-notification-button-hover-dark: $b200;
+$bg-label-notification-button-hover-dark: $n900;
+$on-bg-notification-button-pressed-dark: $n600;
+$bg-notification-button-pressed-dark: $n300;
+$on-bg-notification-button-disabled-dark: $n400;
+$bg-notification-button-disabled-dark: $n100;
+
+// badge-button
+$on-bg-notification-badge-button-light: $n900;
+$bg-notification-badge-button-light: $r400;
+$on-bg-notification-badge-button-dark: $n100;
+$bg-notification-badge-button-dark: $r500;
+$on-bg-menu-badge-button-light: $n900;
+$bg-menu-badge-button-light: $b500;
+$on-bg-menu-badge-button-dark: $n100;
+$bg-menu-badge-button-dark: $b800;
+
+// icon-button
+$on-bg-icon-button-active-light: $b400;
+$on-bg-icon-button-active-dark: $n900;
+$on-bg-icon-button-hover-light: $b400;
+$on-bg-icon-button-hover-dark: $n900;
+$bg-icon-button-hover-light: $n800;
+$bg-icon-button-hover-dark: $n400;
+$on-bg-label-icon-button-hover-light: $n900;
+$on-bg-label-icon-button-hover-dark: $b200;
+$bg-label-icon-button-hover-light: $b200;
+$bg-label-icon-button-hover-dark: $n900;
+$on-bg-icon-button-pressed-light: $n400;
+$on-bg-icon-button-pressed-dark: $n600;
+$bg-icon-button-pressed-light: $n700;
+$bg-icon-button-pressed-dark: $n300;
+$on-bg-icon-button-disabled-light: $n700;
+$on-bg-icon-button-disabled-dark: $n400;

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

@@ -222,8 +222,8 @@
   --link-pressed-primary: #{$link-pressed-primary-light};
 
   // menu
-  --divider-menu-primary: #{$divider-menu-primary-light};
-  --bg-menu-primary: #{$bg-menu-primary-light};
+  --divider-menu-active-primary: #{$divider-menu-active-primary-light};
+  --bg-menu-primary: #{$bg-menu-active-primary-light};
   --on-bg-menu-primary: #{$on-bg-menu-primary-light};
   --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-light};
   --bg-menu-button-hover-primary: #{$bg-menu-button-hover-primary-light};
@@ -231,6 +231,55 @@
   --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-light};
   --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-light};
   --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-light};
+  --divider-menu-pressed-primary: #{$divider-menu-pressed-primary-light};
+  --bg-menu-mobile-primary: #{$bg-menu-mobile-primary-light};
+  --bg-menu-mobile-card-primary: #{$bg-menu-mobile-card-primary-light};
+  --bg-menu-mobile-button-pressed-primary: #{$bg-menu-mobile-button-pressed-primary-light};
+  --on-bg-menu-button-active-secondary: #{$on-bg-menu-button-active-secondary-light};
+  --bg-menu-button-active-secondary: #{$bg-menu-button-active-secondary-light};
+
+  // Back-button
+  --back-button-active-primary: #{$back-button-active-primary-light};
+  --on-bg-back-button-hover-primary: #{$on-bg-back-button-hover-primary-light};
+  --bg-back-button-hover-primary: #{$bg-back-button-hover-primary-light};
+  --back-button-pressed-primary: #{$back-button-pressed-primary-light};
+  --back-button-disabled-primary: #{$back-button-disabled-primary-light};
+
+  // Breadcrumb-button
+  --breadcrumb-button-active-primary: #{$breadcrumb-button-active-primary-light};
+  --on-bg-breadcrumb-button-hover-primary: #{$on-bg-breadcrumb-button-hover-primary-light};
+  --bg-breadcrumb-button-hover-primary: #{$bg-breadcrumb-button-hover-primary-light};
+  --breadcrumb-button-pressed-primary: #{$breadcrumb-button-pressed-primary-light};
+  --breadcrumb-button-disabled-primary: #{$breadcrumb-button-disabled-primary-light};
+  --breadcrumb-button-base-primary: #{$breadcrumb-button-base-primary-light};
+
+  // notification-button
+  --on-bg-notification-button-active: #{$on-bg-notification-button-active-light};
+  --bg-notification-button-active: #{$bg-notification-button-active-light};
+  --on-bg-notification-button-hover: #{$on-bg-notification-button-hover-light};
+  --bg-notification-button-hover: #{$bg-notification-button-hover-light};
+  --on-bg-label-notification-button-hover: #{$on-bg-label-notification-button-hover-light};
+  --bg-label-notification-button-hover: #{$bg-label-notification-button-hover-light};
+  --on-bg-notification-button-pressed: #{$on-bg-notification-button-pressed-light};
+  --bg-notification-button-pressed: #{$bg-notification-button-pressed-light};
+  --on-bg-notification-button-disabled: #{$on-bg-notification-button-disabled-light};
+  --bg-notification-button-disabled: #{$bg-notification-button-disabled-light};
+
+  // badge-button
+  --on-bg-notification-badge-button: #{$on-bg-notification-badge-button-light};
+  --bg-notification-badge-button: #{$bg-notification-badge-button-light};
+  --on-bg-menu-badge-button: #{$on-bg-menu-badge-button-light};
+  --bg-menu-badge-button: #{$bg-menu-badge-button-light};
+
+  // icon-button
+  --on-bg-icon-button-active: #{$on-bg-icon-button-active-light};
+  --on-bg-icon-button-hover: #{$on-bg-icon-button-hover-light};
+  --bg-icon-button-hover: #{$bg-icon-button-hover-light};
+  --on-bg-label-icon-button-hover: #{$on-bg-label-icon-button-hover-light};
+  --bg-label-icon-button-hover: #{$bg-label-icon-button-hover-light};
+  --on-bg-icon-button-pressed: #{$on-bg-icon-button-pressed-light};
+  --bg-icon-button-pressed: #{$bg-icon-button-pressed-light};
+  --on-bg-icon-button-disabled: #{$on-bg-icon-button-disabled-light};
 
   // shadow
   --shadow-primary: #{$shadow-primary-light};
@@ -275,7 +324,7 @@
   --on-bg-button-pressed-positive: #{$on-bg-button-pressed-positive-dark};
   --bg-button-pressed-positive: #{$bg-button-pressed-positive-dark};
 
-  // button-negative 
+  // button-negative
   --on-bg-button-active-negative: #{$on-bg-button-active-negative-dark};
   --bg-button-active-negative: #{$bg-button-active-negative-dark};
   --on-bg-button-hover-negative: #{$on-bg-button-hover-negative-dark};
@@ -283,7 +332,7 @@
   --on-bg-button-pressed-negative: #{$on-bg-button-pressed-negative-dark};
   --bg-button-pressed-negative: #{$bg-button-pressed-negative-dark};
 
-  // button-alternative 
+  // button-alternative
   --on-bg-button-active-alternative: #{$on-bg-button-active-alternative-dark};
   --bg-button-active-alternative: #{$bg-button-active-alternative-dark};
   --on-bg-button-hover-alternative: #{$on-bg-button-hover-alternative-dark};
@@ -291,38 +340,38 @@
   --on-bg-button-pressed-alternative: #{$on-bg-button-pressed-alternative-dark};
   --bg-button-pressed-alternative: #{$bg-button-pressed-alternative-dark};
 
-  // disabled-status 
+  // disabled-status
   --on-bg-disabled: #{$on-bg-disabled-dark};
   --bg-disabled: #{$bg-disabled-dark};
   --outline-disabled: #{$outline-disabled-dark};
 
-  // surface 
+  // surface
   --surface-primary: #{$surface-primary-dark};
   --surface-secondary: #{$surface-secondary-dark};
 
-  // text 
+  // text
   --text-primary: #{$text-primary-dark};
   --text-highlight-primary: #{$text-highlight-primary-dark};
 
-  // divider 
+  // divider
   --divider-primary: #{$divider-primary-dark};
 
-  // logo 
+  // logo
   --logo-primary: #{$logo-primary-dark};
 
-  // highlight 
+  // highlight
   --on-bg-highlight-neutro-primary: #{$on-bg-highlight-neutro-primary-dark};
   --bg-highlight-neutro-primary: #{$bg-highlight-neutro-primary-dark};
   --on-bg-highlight-neutro-secondary: #{$on-bg-highlight-neutro-secondary-dark};
   --bg-highlight-neutro-secondary: #{$bg-highlight-neutro-secondary-dark};
 
-  // system 
+  // system
   --positive-primary: #{$positive-primary-dark};
   --negative-primary: #{$negative-primary-dark};
   --cta-primary: #{$bg-button-active-primary-dark};
   --alternative-primary: #{$alternative-primary-dark};
 
-  // calendar 
+  // calendar
   --on-bg-calendar-nav-primary: #{$on-bg-calendar-nav-primary-dark};
   --bg-calendar-nav-primary: #{$bg-calendar-nav-primary-dark};
   --on-bg-calender-primary: #{$on-bg-calender-primary-dark};
@@ -338,16 +387,16 @@
   --bg-number-calendar-pressed-primary: #{$bg-number-calendar-pressed-primary-dark};
   --number-calendar-disabled-primary: #{$number-calendar-disabled-primary-dark};
 
-  // checkbox 
+  // checkbox
   --outline-checkbox-off-primary: #{$outline-checkbox-off-primary-dark};
   --on-bg-checkbox-on-primary: #{$on-bg-checkbox-on-primary-dark};
   --bg-checkbox-on-primary: #{$bg-checkbox-on-primary-dark};
 
-  // radio button 
+  // radio button
   --radio-button-off-primary: #{$radio-button-off-primary-dark};
   --radio-button-on-primary: #{$radio-button-on-primary-dark};
 
-  // stepper 
+  // stepper
   --text-stepper-pending-primary: #{$text-stepper-pending-primary-dark};
   --line-stepper-pending-primary: #{$line-stepper-pending-primary-dark};
   --on-bg-stepper-pending-primary: #{$on-bg-stepper-pending-primary-dark};
@@ -361,7 +410,7 @@
   --on-bg-stepper-completed-primary: #{$on-bg-stepper-completed-primary-dark};
   --bg-stepper-completed-primary: #{$bg-stepper-completed-primary-dark};
 
-  // table 
+  // table
   --on-bg-table-header-primary: #{$on-bg-table-header-primary-dark};
   --bg-table-header-primary: #{$bg-table-header-primary-dark};
   --on-bg-table-active-primary: #{$on-bg-table-active-primary-dark};
@@ -371,11 +420,11 @@
   --on-bg-table-header-secondary: #{$on-bg-table-header-secondary-dark};
   --bg-table-header-secondary: #{$bg-table-header-secondary-dark};
 
-  // tooltip 
+  // tooltip
   --on-bg-tooltip-primary: #{$on-bg-tooltip-primary-dark};
   --bg-tooltip-primary: #{$bg-tooltip-primary-dark};
 
-  // text-field 
+  // text-field
   --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
   --outline-field-empty-enabled-primary: #{$outline-field-empty-enabled-primary-dark};
   --placeholder-empty-enabled-primary: #{$placeholder-empty-enabled-primary-dark};
@@ -403,11 +452,11 @@
   --outline-field-full-enabled-typed-primary: #{$outline-field-full-enabled-typed-primary-dark};
   --bg-field-autofill: #{$bg-field-autofill-dark};
 
-  // icons 
+  // icons
   --icon-active-primary: #{$icon-active-primary-dark};
   --icon-hover-primary: #{$icon-hover-primary-dark};
 
-  // dropdown-list 
+  // dropdown-list
   --bg-dropdown-list-primary: #{$bg-dropdown-list-primary-dark};
   --outline-dropdown-list-primary: #{$outline-dropdown-list-primary-dark};
   --on-bg-dropdown-item-active-primary: #{$on-bg-dropdown-item-active-primary-dark};
@@ -416,10 +465,10 @@
   --on-bg-dropdown-item-pressed-primary: #{$on-bg-dropdown-item-pressed-primary-dark};
   --on-bg-dropdown-item-disabled-primary: #{$on-bg-dropdown-item-disabled-primary-dark};
 
-  // loading 
+  // loading
   --loading-primary: #{$loading-primary-dark};
 
-  // switch 
+  // switch
   --on-bg-switch-on-primary: #{$on-bg-switch-on-primary-dark};
   --bg-switch-on-primary: #{$bg-switch-on-primary-dark};
   --on-bg-switch-off-primary: #{$on-bg-switch-off-primary-dark};
@@ -427,7 +476,7 @@
   --on-bg-switch-disabled-primary: #{$on-bg-switch-disabled-primary-dark};
   --bg-switch-disabled-primary: #{$bg-switch-disabled-primary-dark};
 
-  // notification 
+  // notification
   --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
   --bg-notification-primary: #{$bg-notification-primary-dark};
   --on-bg-icon-notification-error-primary: #{$on-bg-icon-notification-error-primary-dark};
@@ -442,7 +491,7 @@
   --bg-notification-list-primary: #{$bg-notification-list-primary-dark};
   --on-bg-notification-list-primary: #{$on-bg-notification-list-primary-dark};
 
-  // dialog 
+  // dialog
   --bg-dialog-primary: #{$bg-dialog-primary-dark};
   --on-bg-dialog-header-primary: #{$on-bg-dialog-header-primary-dark};
   --bg-dialog-header-primary: #{$bg-dialog-header-primary-dark};
@@ -452,15 +501,15 @@
   --on-bg-icon-dialog-primary: #{$on-bg-icon-dialog-primary-dark};
   --bg-icon-dialog-primary: #{$bg-icon-dialog-primary-dark};
 
-  // link 
+  // link
   --link-active-primary: #{$link-active-primary-dark};
   --link-hover-primary: #{$link-hover-primary-dark};
   --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
   --link-disabled-primary: #{$link-disabled-primary-dark};
   --link-pressed-primary: #{$link-pressed-primary-dark};
 
-  // menu 
-  --divider-menu-primary: #{$divider-menu-primary-dark};
+  // menu
+  --divider-menu-active-primary: #{$divider-menu-primary-dark};
   --bg-menu-primary: #{$bg-menu-primary-dark};
   --on-bg-menu-primary: #{$on-bg-menu-primary-dark};
   --on-bg-menu-button-active-primary: #{$on-bg-menu-button-active-primary-dark};
@@ -469,8 +518,57 @@
   --on-bg-menu-button-disabled-primary: #{$on-bg-menu-button-disabled-primary-dark};
   --bg-menu-button-pressed-primary: #{$bg-menu-button-pressed-primary-dark};
   --on-bg-menu-button-pressed-primary: #{$on-bg-menu-button-pressed-primary-dark};
+  --divider-menu-pressed-primary: #{$divider-menu-pressed-primary-dark};
+  --bg-menu-mobile-primary: #{$bg-menu-mobile-primary-dark};
+  --bg-menu-mobile-card-primary: #{$bg-menu-mobile-card-primary-dark};
+  --bg-menu-mobile-button-pressed-primary: #{$bg-menu-mobile-button-pressed-primary-dark};
+  --on-bg-menu-button-active-secondary: #{$on-bg-menu-button-active-secondary-dark};
+  --bg-menu-button-active-secondary: #{$bg-menu-button-active-secondary-dark};
+
+  // Back-button
+  --back-button-active-primary: #{$back-button-active-primary-dark};
+  --on-bg-back-button-hover-primary: #{$on-bg-back-button-hover-primary-dark};
+  --bg-back-button-hover-primary: #{$bg-back-button-hover-primary-dark};
+  --back-button-pressed-primary: #{$back-button-pressed-primary-dark};
+  --back-button-disabled-primary: #{$back-button-disabled-primary-dark};
+
+  // Breadcrumb-button
+  --breadcrumb-button-active-primary: #{$breadcrumb-button-active-primary-dark};
+  --on-bg-breadcrumb-button-hover-primary: #{$on-bg-breadcrumb-button-hover-primary-dark};
+  --bg-breadcrumb-button-hover-primary: #{$bg-breadcrumb-button-hover-primary-dark};
+  --breadcrumb-button-pressed-primary: #{$breadcrumb-button-pressed-primary-dark};
+  --breadcrumb-button-disabled-primary: #{$breadcrumb-button-disabled-primary-dark};
+  --breadcrumb-button-base-primary: #{$breadcrumb-button-base-primary-dark};
+
+  // notification-button
+  --on-bg-notification-button-active: #{$on-bg-notification-button-active-dark};
+  --bg-notification-button-active: #{$bg-notification-button-active-dark};
+  --on-bg-notification-button-hover: #{$on-bg-notification-button-hover-dark};
+  --bg-notification-button-hover: #{$bg-notification-button-hover-dark};
+  --on-bg-label-notification-button-hover: #{$on-bg-label-notification-button-hover-dark};
+  --bg-label-notification-button-hover: #{$bg-label-notification-button-hover-dark};
+  --on-bg-notification-button-pressed: #{$on-bg-notification-button-pressed-dark};
+  --bg-notification-button-pressed: #{$bg-notification-button-pressed-dark};
+  --on-bg-notification-button-disabled: #{$on-bg-notification-button-disabled-dark};
+  --bg-notification-button-disabled: #{$bg-notification-button-disabled-dark};
+
+  // badge-button
+  --on-bg-notification-badge-button: #{$on-bg-notification-badge-button-dark};
+  --bg-notification-badge-button: #{$bg-notification-badge-button-dark};
+  --on-bg-menu-badge-button: #{$on-bg-menu-badge-button-dark};
+  --bg-menu-badge-button: #{$bg-menu-badge-button-dark};
+
+  // icon-button
+  --on-bg-icon-button-active: #{$on-bg-icon-button-active-dark};
+  --on-bg-icon-button-hover: #{$on-bg-icon-button-hover-dark};
+  --bg-icon-button-hover: #{$bg-icon-button-hover-dark};
+  --on-bg-label-icon-button-hover: #{$on-bg-label-icon-button-hover-dark};
+  --bg-label-icon-button-hover: #{$bg-label-icon-button-hover-dark};
+  --on-bg-icon-button-pressed: #{$on-bg-icon-button-pressed-dark};
+  --bg-icon-button-pressed: #{$bg-icon-button-pressed-dark};
+  --on-bg-icon-button-disabled: #{$on-bg-icon-button-disabled-dark};
 
-  // shadow 
+  // shadow
   --shadow-primary: #{$shadow-primary-dark};
   // DONT REMOVE
   --shadow-primary-rgba: #{to-rgb($shadow-primary-dark)};