@graupl/graupl 1.0.0-beta.1 → 1.0.0-beta.10

package/{src → packages/core/src}/scss/component/menu/_variables.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl menu component variables.
+// @graupl/core menu component variables.
 //
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
@@ -59,30 +59,77 @@ $menu-display: var(
 // Menu color properties.
 $menu-background: var(
   --#{root-defaults.$prefix}menu-background,
-  #{color.$root-background}
+  #{color.$background}
 );
-$menu-color: var(--#{root-defaults.$prefix}menu-color, #{color.$root-color});
+$menu-color: var(--#{root-defaults.$prefix}menu-color, #{color.$color});
 
 // Menu border properties.
 $menu-border-color: var(
   --#{root-defaults.$prefix}menu-border-color,
   #{$menu-color}
 );
+$menu-border-top-left-radius: var(
+  --#{root-defaults.$prefix}menu-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$menu-border-top-right-radius: var(
+  --#{root-defaults.$prefix}menu-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$menu-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}menu-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$menu-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}menu-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
 $menu-border-radius: var(
   --#{root-defaults.$prefix}menu-border-radius,
-  #{root-variables.$border-radius}
+  #{$menu-border-top-left-radius} #{$menu-border-top-right-radius}
+    #{$menu-border-bottom-right-radius} #{$menu-border-bottom-left-radius}
 );
-$menu-border-style: var(
-  --#{root-defaults.$prefix}menu-border-style,
-  #{root-variables.$border-style}
+$menu-border-top-width: var(
+  --#{root-defaults.$prefix}menu-border-top-width,
+  #{defaults.$menu-border-width}
+);
+$menu-border-right-width: var(
+  --#{root-defaults.$prefix}menu-border-right-width,
+  #{defaults.$menu-border-width}
+);
+$menu-border-bottom-width: var(
+  --#{root-defaults.$prefix}menu-border-bottom-width,
+  #{defaults.$menu-border-width}
+);
+$menu-border-left-width: var(
+  --#{root-defaults.$prefix}menu-border-left-width,
+  #{defaults.$menu-border-width}
 );
 $menu-border-width: var(
   --#{root-defaults.$prefix}menu-border-width,
-  #{defaults.$menu-border-width}
+  #{$menu-border-top-width} #{$menu-border-right-width}
+    #{$menu-border-bottom-width} #{$menu-border-left-width}
+);
+$menu-border-top-style: var(
+  --#{root-defaults.$prefix}menu-border-top-style,
+  #{root-variables.$border-top-style}
 );
-$menu-border: var(
-  --#{root-defaults.$prefix}menu-border,
-  #{$menu-border-width} #{$menu-border-style}
+$menu-border-right-style: var(
+  --#{root-defaults.$prefix}menu-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$menu-border-bottom-style: var(
+  --#{root-defaults.$prefix}menu-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$menu-border-left-style: var(
+  --#{root-defaults.$prefix}menu-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$menu-border-style: var(
+  --#{root-defaults.$prefix}menu-border-style,
+  #{$menu-border-top-style} #{$menu-border-right-style}
+    #{$menu-border-bottom-style} #{$menu-border-left-style}
 );
 
 // Submenu properties
@@ -147,21 +194,68 @@ $submenu-border-color: var(
   --#{root-defaults.$prefix}submenu-border-color,
   #{$submenu-color}
 );
+$submenu-border-top-left-radius: var(
+  --#{root-defaults.$prefix}submenu-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$submenu-border-top-right-radius: var(
+  --#{root-defaults.$prefix}submenu-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$submenu-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}submenu-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$submenu-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}submenu-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
 $submenu-border-radius: var(
   --#{root-defaults.$prefix}submenu-border-radius,
-  #{root-variables.$border-radius}
+  #{$submenu-border-top-left-radius} #{$submenu-border-top-right-radius}
+    #{$submenu-border-bottom-right-radius} #{$submenu-border-bottom-left-radius}
 );
-$submenu-border-style: var(
-  --#{root-defaults.$prefix}submenu-border-style,
-  #{root-variables.$border-style}
+$submenu-border-top-width: var(
+  --#{root-defaults.$prefix}submenu-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$submenu-border-right-width: var(
+  --#{root-defaults.$prefix}submenu-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$submenu-border-bottom-width: var(
+  --#{root-defaults.$prefix}submenu-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$submenu-border-left-width: var(
+  --#{root-defaults.$prefix}submenu-border-left-width,
+  #{root-variables.$border-left-width}
 );
 $submenu-border-width: var(
   --#{root-defaults.$prefix}submenu-border-width,
-  #{root-variables.$border-width}
+  #{$submenu-border-top-width} #{$submenu-border-right-width}
+    #{$submenu-border-bottom-width} #{$submenu-border-left-width}
+);
+$submenu-border-top-style: var(
+  --#{root-defaults.$prefix}submenu-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$submenu-border-right-style: var(
+  --#{root-defaults.$prefix}submenu-border-right-style,
+  #{root-variables.$border-right-style}
 );
-$submenu-border: var(
-  --#{root-defaults.$prefix}submenu-border,
-  #{$submenu-border-width} #{$submenu-border-style}
+$submenu-border-bottom-style: var(
+  --#{root-defaults.$prefix}submenu-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$submenu-border-left-style: var(
+  --#{root-defaults.$prefix}submenu-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$submenu-border-style: var(
+  --#{root-defaults.$prefix}submenu-border-style,
+  #{$submenu-border-top-style} #{$submenu-border-right-style}
+    #{$submenu-border-bottom-style} #{$submenu-border-left-style}
 );
 
 // Submenu position properties.
@@ -249,23 +343,23 @@ $menu-link-transition-reduced-motion: var(
 );
 $menu-link-transform: var(
   --#{root-defaults.$prefix}menu-link-transform,
-  #{defaults.$menu-link-transform}
+  #{defaults.$menu-link-initial-transform}
 );
 $menu-link-visited-transform: var(
   --#{root-defaults.$prefix}menu-link-visited-transform,
-  #{defaults.$menu-link-visited-transform}
+  #{$menu-link-transform}
 );
 $menu-link-focus-transform: var(
   --#{root-defaults.$prefix}menu-link-focus-transform,
-  #{defaults.$menu-link-focus-transform}
+  #{$menu-link-transform}
 );
 $menu-link-hover-transform: var(
   --#{root-defaults.$prefix}menu-link-hover-transform,
-  #{defaults.$menu-link-hover-transform}
+  #{defaults.$menu-link-final-transform}
 );
 $menu-link-active-transform: var(
   --#{root-defaults.$prefix}menu-link-active-transform,
-  #{defaults.$menu-link-active-transform}
+  #{$menu-link-hover-transform}
 );
 $menu-link-disabled-transform: var(
   --#{root-defaults.$prefix}menu-link-disabled-transform,
@@ -293,11 +387,11 @@ $menu-link-background: var(
 );
 $menu-link-visited-background: var(
   --#{root-defaults.$prefix}menu-link-visited-background,
-  #{$menu-background}
+  #{$menu-link-background}
 );
 $menu-link-focus-background: var(
   --#{root-defaults.$prefix}menu-link-focus-background,
-  #{$menu-background}
+  #{$menu-link-background}
 );
 $menu-link-hover-background: var(
   --#{root-defaults.$prefix}menu-link-hover-background,
@@ -305,11 +399,11 @@ $menu-link-hover-background: var(
 );
 $menu-link-active-background: var(
   --#{root-defaults.$prefix}menu-link-active-background,
-  #{$menu-color}
+  #{$menu-link-hover-background}
 );
 $menu-link-disabled-background: var(
   --#{root-defaults.$prefix}menu-link-disabled-background,
-  #{color.$root-background}
+  #{color.$background}
 );
 $menu-link-color: var(
   --#{root-defaults.$prefix}menu-link-color,
@@ -317,11 +411,11 @@ $menu-link-color: var(
 );
 $menu-link-visited-color: var(
   --#{root-defaults.$prefix}menu-link-visited-color,
-  #{$menu-color}
+  #{$menu-link-color}
 );
 $menu-link-focus-color: var(
   --#{root-defaults.$prefix}menu-link-focus-color,
-  #{$menu-color}
+  #{$menu-link-color}
 );
 $menu-link-hover-color: var(
   --#{root-defaults.$prefix}menu-link-hover-color,
@@ -329,7 +423,7 @@ $menu-link-hover-color: var(
 );
 $menu-link-active-color: var(
   --#{root-defaults.$prefix}menu-link-active-color,
-  #{$menu-background}
+  #{$menu-link-hover-color}
 );
 $menu-link-disabled-color: var(
   --#{root-defaults.$prefix}menu-link-disabled-color,
@@ -339,23 +433,23 @@ $menu-link-disabled-color: var(
 // Menu link text decoration properties.
 $menu-link-text-decoration: var(
   --#{root-defaults.$prefix}menu-link-text-decoration,
-  #{defaults.$menu-link-text-decoration}
+  #{defaults.$menu-link-initial-text-decoration}
 );
 $menu-link-visited-text-decoration: var(
   --#{root-defaults.$prefix}menu-link-visited-text-decoration,
-  #{defaults.$menu-link-visited-text-decoration}
+  #{$menu-link-text-decoration}
 );
 $menu-link-focus-text-decoration: var(
   --#{root-defaults.$prefix}menu-link-focus-text-decoration,
-  #{defaults.$menu-link-focus-text-decoration}
+  #{$menu-link-text-decoration}
 );
 $menu-link-hover-text-decoration: var(
   --#{root-defaults.$prefix}menu-link-hover-text-decoration,
-  #{defaults.$menu-link-hover-text-decoration}
+  #{defaults.$menu-link-final-text-decoration}
 );
 $menu-link-active-text-decoration: var(
   --#{root-defaults.$prefix}menu-link-active-text-decoration,
-  #{defaults.$menu-link-active-text-decoration}
+  #{$menu-link-hover-text-decoration}
 );
 $menu-link-disabled-text-decoration: var(
   --#{root-defaults.$prefix}menu-link-disabled-text-decoration,
@@ -367,11 +461,11 @@ $menu-link-text-decoration-thickness: var(
 );
 $menu-link-visited-text-decoration-thickness: var(
   --#{root-defaults.$prefix}menu-link-visited-text-decoration-thickness,
-  #{root-variables.$border-width}
+  #{$menu-link-text-decoration-thickness}
 );
 $menu-link-focus-text-decoration-thickness: var(
   --#{root-defaults.$prefix}menu-link-focus-text-decoration-thickness,
-  #{root-variables.$border-width}
+  #{$menu-link-text-decoration-thickness}
 );
 $menu-link-hover-text-decoration-thickness: var(
   --#{root-defaults.$prefix}menu-link-hover-text-decoration-thickness,
@@ -379,7 +473,7 @@ $menu-link-hover-text-decoration-thickness: var(
 );
 $menu-link-active-text-decoration-thickness: var(
   --#{root-defaults.$prefix}menu-link-active-text-decoration-thickness,
-  #{root-variables.$border-width}
+  #{$menu-link-hover-text-decoration-thickness}
 );
 $menu-link-disabled-text-decoration-thickness: var(
   --#{root-defaults.$prefix}menu-link-disabled-text-decoration-thickness,
@@ -387,23 +481,23 @@ $menu-link-disabled-text-decoration-thickness: var(
 );
 $menu-link-text-decoration-style: var(
   --#{root-defaults.$prefix}menu-link-text-decoration-style,
-  #{defaults.$menu-link-text-decoration-style}
+  #{defaults.$menu-link-initial-text-decoration-style}
 );
 $menu-link-visited-text-decoration-style: var(
   --#{root-defaults.$prefix}menu-link-visited-text-decoration-style,
-  #{defaults.$menu-link-visited-text-decoration-style}
+  #{$menu-link-text-decoration-style}
 );
 $menu-link-focus-text-decoration-style: var(
   --#{root-defaults.$prefix}menu-link-focus-text-decoration-style,
-  #{defaults.$menu-link-focus-text-decoration-style}
+  #{$menu-link-text-decoration-style}
 );
 $menu-link-hover-text-decoration-style: var(
   --#{root-defaults.$prefix}menu-link-hover-text-decoration-style,
-  #{defaults.$menu-link-hover-text-decoration-style}
+  #{defaults.$menu-link-final-text-decoration-style}
 );
 $menu-link-active-text-decoration-style: var(
   --#{root-defaults.$prefix}menu-link-active-text-decoration-style,
-  #{defaults.$menu-link-active-text-decoration-style}
+  #{$menu-link-hover-text-decoration-style}
 );
 $menu-link-disabled-text-decoration-style: var(
   --#{root-defaults.$prefix}menu-link-disabled-text-decoration-style,
@@ -435,21 +529,69 @@ $menu-link-disabled-text-decoration-color: var(
 );
 
 // Menu link border properties.
+$menu-link-border-top-left-radius: var(
+  --#{root-defaults.$prefix}menu-link-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$menu-link-border-top-right-radius: var(
+  --#{root-defaults.$prefix}menu-link-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$menu-link-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}menu-link-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$menu-link-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}menu-link-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
 $menu-link-border-radius: var(
   --#{root-defaults.$prefix}menu-link-border-radius,
-  #{root-variables.$border-radius}
+  #{$menu-link-border-top-left-radius} #{$menu-link-border-top-right-radius}
+    #{$menu-link-border-bottom-right-radius}
+    #{$menu-link-border-bottom-left-radius}
 );
-$menu-link-border-style: var(
-  --#{root-defaults.$prefix}menu-link-border-style,
-  #{root-variables.$border-style}
+$menu-link-border-top-width: var(
+  --#{root-defaults.$prefix}menu-link-border-top-width,
+  #{defaults.$menu-link-border-width}
+);
+$menu-link-border-right-width: var(
+  --#{root-defaults.$prefix}menu-link-border-right-width,
+  #{defaults.$menu-link-border-width}
+);
+$menu-link-border-bottom-width: var(
+  --#{root-defaults.$prefix}menu-link-border-bottom-width,
+  #{defaults.$menu-link-border-width}
+);
+$menu-link-border-left-width: var(
+  --#{root-defaults.$prefix}menu-link-border-left-width,
+  #{defaults.$menu-link-border-width}
 );
 $menu-link-border-width: var(
   --#{root-defaults.$prefix}menu-link-border-width,
-  #{defaults.$menu-link-border-width}
+  #{$menu-link-border-top-width} #{$menu-link-border-right-width}
+    #{$menu-link-border-bottom-width} #{$menu-link-border-left-width}
+);
+$menu-link-border-top-style: var(
+  --#{root-defaults.$prefix}menu-link-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$menu-link-border-right-style: var(
+  --#{root-defaults.$prefix}menu-link-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$menu-link-border-bottom-style: var(
+  --#{root-defaults.$prefix}menu-link-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$menu-link-border-left-style: var(
+  --#{root-defaults.$prefix}menu-link-border-left-style,
+  #{root-variables.$border-left-style}
 );
-$menu-link-border: var(
-  --#{root-defaults.$prefix}menu-link-border,
-  #{$menu-link-border-width} #{$menu-link-border-style}
+$menu-link-border-style: var(
+  --#{root-defaults.$prefix}menu-link-border-style,
+  #{$menu-link-border-top-style} #{$menu-link-border-right-style}
+    #{$menu-link-border-bottom-style} #{$menu-link-border-left-style}
 );
 $menu-link-border-color: var(
   --#{root-defaults.$prefix}menu-link-border-color,
@@ -457,23 +599,23 @@ $menu-link-border-color: var(
 );
 $menu-link-visited-border-color: var(
   --#{root-defaults.$prefix}menu-link-visited-border-color,
-  #{$menu-link-color}
+  #{$menu-link-border-color}
 );
 $menu-link-focus-border-color: var(
   --#{root-defaults.$prefix}menu-link-focus-border-color,
-  #{$menu-link-color}
+  #{$menu-link-border-color}
 );
 $menu-link-hover-border-color: var(
   --#{root-defaults.$prefix}menu-link-hover-border-color,
-  #{$menu-link-color}
+  #{$menu-link-hover-color}
 );
 $menu-link-active-border-color: var(
   --#{root-defaults.$prefix}menu-link-active-border-color,
-  #{$menu-link-color}
+  #{$menu-link-hover-border-color}
 );
 $menu-link-disabled-border-color: var(
   --#{root-defaults.$prefix}menu-link-disabled-border-color,
-  #{$menu-link-color}
+  #{$menu-link-disabled-color}
 );
 
 // Submenu toggle properties.

package/packages/core/src/scss/component/navigation/_defaults.scss

@@ -0,0 +1,23 @@
+// @graupl/core navigation component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+// Navigation selectors.
+$navigation-selector: ".navigation" !default;
+$navigation-toggle-selector: ".navigation-toggle" !default;
+$navigation-branding-selector: ".navigation-branding" !default;
+
+// Navigation toggle properties.
+$navigation-toggle-content: "'☰'" !default;
+
+// Navigation branding properties.
+$navigation-branding-initial-text-decoration: none !default;
+$navigation-branding-final-text-decoration: $navigation-branding-initial-text-decoration !default;
+$navigation-branding-disabled-text-decoration: $navigation-branding-initial-text-decoration !default;
+$navigation-branding-initial-text-decoration-style: solid !default;
+$navigation-branding-final-text-decoration-style: $navigation-branding-initial-text-decoration-style !default;
+$navigation-branding-disabled-text-decoration-style: $navigation-branding-initial-text-decoration-style !default;

package/{src → packages/core/src}/scss/component/navigation/_index.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl navigation component styles.
+// @graupl/core navigation component styles.
 
 @use "defaults";
 @use "variables" as *;
@@ -40,7 +40,8 @@
     min-width: $navigation-toggle-min-width;
     min-height: $navigation-toggle-min-height;
     padding: $navigation-toggle-padding;
-    border: $navigation-toggle-border;
+    border-width: $navigation-toggle-border-width;
+    border-style: $navigation-toggle-border-style;
     border-radius: $navigation-toggle-border-radius;
 
     &::before {

package/{src → packages/core/src}/scss/component/navigation/_variables.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl navigation component variables.
+// @graupl/core navigation component variables.
 //
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
@@ -13,11 +13,11 @@
 // Navigation colors.
 $navigation-background: var(
   --#{root-defaults.$prefix}navigation-background,
-  #{color.$root-background}
+  #{color.$background}
 );
 $navigation-color: var(
   --#{root-defaults.$prefix}navigation-color,
-  #{color.$root-color}
+  #{color.$color}
 );
 
 // Navigation toggle size.
@@ -63,25 +63,78 @@ $navigation-toggle-hover-color: var(
 );
 
 // Navigation toggle border properties.
+$navigation-toggle-border-top-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$navigation-toggle-border-right-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$navigation-toggle-border-bottom-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$navigation-toggle-border-left-width: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-left-width,
+  #{root-variables.$border-left-width}
+);
 $navigation-toggle-border-width: var(
   --#{root-defaults.$prefix}navigation-toggle-border-width,
-  #{root-variables.$border-width}
+  #{$navigation-toggle-border-top-width}
+    #{$navigation-toggle-border-right-width}
+    #{$navigation-toggle-border-bottom-width}
+    #{$navigation-toggle-border-left-width}
+);
+$navigation-toggle-border-top-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$navigation-toggle-border-right-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$navigation-toggle-border-bottom-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$navigation-toggle-border-left-style: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-left-style,
+  #{root-variables.$border-left-style}
 );
 $navigation-toggle-border-style: var(
   --#{root-defaults.$prefix}navigation-toggle-border-style,
-  #{root-variables.$border-style}
-);
-$navigation-toggle-border: var(
-  --#{root-defaults.$prefix}navigation-toggle-border,
-  #{$navigation-toggle-border-width} #{$navigation-toggle-border-style}
+  #{$navigation-toggle-border-top-style}
+    #{$navigation-toggle-border-right-style}
+    #{$navigation-toggle-border-bottom-style}
+    #{$navigation-toggle-border-left-style}
 );
 $navigation-toggle-border-color: var(
   --#{root-defaults.$prefix}navigation-toggle-border-color,
   #{$navigation-toggle-color}
 );
+$navigation-toggle-border-top-left-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$navigation-toggle-border-top-right-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$navigation-toggle-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$navigation-toggle-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}navigation-toggle-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
 $navigation-toggle-border-radius: var(
   --#{root-defaults.$prefix}navigation-toggle-border-radius,
-  #{root-variables.$border-radius}
+  #{$navigation-toggle-border-top-left-radius}
+    #{$navigation-toggle-border-top-right-radius}
+    #{$navigation-toggle-border-bottom-right-radius}
+    #{$navigation-toggle-border-bottom-left-radius}
 );
 
 // Navigation branding properties.
@@ -113,11 +166,11 @@ $navigation-branding-color: var(
 );
 $navigation-branding-visited-color: var(
   --#{root-defaults.$prefix}navigation-branding-visited-color,
-  #{$navigation-color}
+  #{$navigation-branding-color}
 );
 $navigation-branding-focus-color: var(
   --#{root-defaults.$prefix}navigation-branding-focus-color,
-  #{$navigation-color}
+  #{$navigation-branding-color}
 );
 $navigation-branding-hover-color: var(
   --#{root-defaults.$prefix}navigation-branding-hover-color,
@@ -125,7 +178,7 @@ $navigation-branding-hover-color: var(
 );
 $navigation-branding-active-color: var(
   --#{root-defaults.$prefix}navigation-branding-active-color,
-  #{$navigation-color}
+  #{$navigation-branding-hover-color}
 );
 $navigation-branding-disabled-color: var(
   --#{root-defaults.$prefix}navigation-branding-disabled-color,
@@ -135,23 +188,23 @@ $navigation-branding-disabled-color: var(
 // Navigation branding text decoration properties.
 $navigation-branding-text-decoration: var(
   --#{root-defaults.$prefix}navigation-branding-text-decoration,
-  #{defaults.$navigation-branding-text-decoration}
+  #{defaults.$navigation-branding-initial-text-decoration}
 );
 $navigation-branding-visited-text-decoration: var(
   --#{root-defaults.$prefix}navigation-branding-visited-text-decoration,
-  #{defaults.$navigation-branding-visited-text-decoration}
+  #{$navigation-branding-text-decoration}
 );
 $navigation-branding-focus-text-decoration: var(
   --#{root-defaults.$prefix}navigation-branding-focus-text-decoration,
-  #{defaults.$navigation-branding-focus-text-decoration}
+  #{$navigation-branding-text-decoration}
 );
 $navigation-branding-hover-text-decoration: var(
   --#{root-defaults.$prefix}navigation-branding-hover-text-decoration,
-  #{defaults.$navigation-branding-hover-text-decoration}
+  #{defaults.$navigation-branding-final-text-decoration}
 );
 $navigation-branding-active-text-decoration: var(
   --#{root-defaults.$prefix}navigation-branding-active-text-decoration,
-  #{defaults.$navigation-branding-active-text-decoration}
+  #{$navigation-branding-hover-text-decoration}
 );
 $navigation-branding-disabled-text-decoration: var(
   --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration,
@@ -159,23 +212,23 @@ $navigation-branding-disabled-text-decoration: var(
 );
 $navigation-branding-text-decoration-style: var(
   --#{root-defaults.$prefix}navigation-branding-text-decoration-style,
-  #{defaults.$navigation-branding-text-decoration-style}
+  #{defaults.$navigation-branding-initial-text-decoration-style}
 );
 $navigation-branding-visited-text-decoration-style: var(
   --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-style,
-  #{defaults.$navigation-branding-visited-text-decoration-style}
+  #{$navigation-branding-text-decoration-style}
 );
 $navigation-branding-focus-text-decoration-style: var(
   --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-style,
-  #{defaults.$navigation-branding-focus-text-decoration-style}
+  #{$navigation-branding-text-decoration-style}
 );
 $navigation-branding-hover-text-decoration-style: var(
   --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-style,
-  #{defaults.$navigation-branding-hover-text-decoration-style}
+  #{defaults.$navigation-branding-final-text-decoration-style}
 );
 $navigation-branding-active-text-decoration-style: var(
   --#{root-defaults.$prefix}navigation-branding-active-text-decoration-style,
-  #{defaults.$navigation-branding-active-text-decoration-style}
+  #{$navigation-branding-hover-text-decoration-style}
 );
 $navigation-branding-disabled-text-decoration-style: var(
   --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-style,
@@ -187,11 +240,11 @@ $navigation-branding-text-decoration-thickness: var(
 );
 $navigation-branding-visited-text-decoration-thickness: var(
   --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-thickness,
-  #{root-variables.$border-width}
+  #{$navigation-branding-text-decoration-thickness}
 );
 $navigation-branding-focus-text-decoration-thickness: var(
   --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-thickness,
-  #{root-variables.$border-width}
+  #{$navigation-branding-text-decoration-thickness}
 );
 $navigation-branding-hover-text-decoration-thickness: var(
   --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-thickness,
@@ -199,7 +252,7 @@ $navigation-branding-hover-text-decoration-thickness: var(
 );
 $navigation-branding-active-text-decoration-thickness: var(
   --#{root-defaults.$prefix}navigation-branding-active-text-decoration-thickness,
-  #{root-variables.$border-width}
+  #{$navigation-branding-hover-text-decoration-thickness}
 );
 $navigation-branding-disabled-text-decoration-thickness: var(
   --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-thickness,