@graupl/graupl 1.0.0-alpha.12 → 1.0.0-alpha.14

package/src/scss/component/menu/_variables.scss

@@ -0,0 +1,495 @@
+// @graupl/graupl menu component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../theme/color/variables" as color;
+@use "../../functions/theme";
+@use "sass:map";
+
+// Menu properties.
+$menu-flex-direction: var(
+  --#{root-defaults.$prefix}-menu-flex-direction,
+  #{defaults.$menu-flex-direction}
+);
+$menu-padding-x: var(
+  --#{root-defaults.$prefix}-menu-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$menu-padding-y: var(
+  --#{root-defaults.$prefix}-menu-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$menu-padding: var(
+  --#{root-defaults.$prefix}-menu-padding,
+  #{$menu-padding-y} #{$menu-padding-x}
+);
+
+// Menu gap properties.
+$menu-column-gap: var(
+  --#{root-defaults.$prefix}-menu-column-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$menu-row-gap: var(
+  --#{root-defaults.$prefix}-menu-row-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$menu-gap: var(
+  --#{root-defaults.$prefix}-menu-gap,
+  #{$menu-column-gap} #{$menu-row-gap}
+);
+
+// Menu display properties.
+$menu-show-display: var(
+  --#{root-defaults.$prefix}-menu-show-display,
+  #{defaults.$menu-show-display}
+);
+$menu-hide-display: var(
+  --#{root-defaults.$prefix}-menu-hide-display,
+  #{defaults.$menu-hide-display}
+);
+$menu-display: var(
+  --#{root-defaults.$prefix}-menu-display,
+  #{defaults.$menu-show-display}
+);
+
+// Menu color properties.
+$menu-background: var(
+  --#{root-defaults.$prefix}-menu-background,
+  #{color.$root-background}
+);
+$menu-color: var(--#{root-defaults.$prefix}-menu-color, #{color.$root-color});
+
+// Menu border properties.
+$menu-border-color: var(
+  --#{root-defaults.$prefix}-menu-border-color,
+  #{$menu-color}
+);
+$menu-border-radius: var(
+  --#{root-defaults.$prefix}-menu-border-radius,
+  #{root-variables.$border-radius}
+);
+$menu-border-style: var(
+  --#{root-defaults.$prefix}-menu-border-style,
+  #{root-variables.$border-style}
+);
+$menu-border-width: var(
+  --#{root-defaults.$prefix}-menu-border-width,
+  #{defaults.$menu-border-width}
+);
+$menu-border: var(
+  --#{root-defaults.$prefix}-menu-border,
+  #{$menu-border-width} #{$menu-border-style}
+);
+
+// Submenu properties
+$submenu-flex-direction: var(
+  --#{root-defaults.$prefix}-submenu-flex-direction,
+  #{defaults.$submenu-flex-direction}
+);
+$submenu-z-index: var(
+  --#{root-defaults.$prefix}-submenu-z-index,
+  #{defaults.$submenu-z-index}
+);
+$submenu-padding-x: var(
+  --#{root-defaults.$prefix}-submenu-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$submenu-padding-y: var(
+  --#{root-defaults.$prefix}-submenu-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$submenu-padding: var(
+  --#{root-defaults.$prefix}-submenu-padding,
+  #{$submenu-padding-y} #{$submenu-padding-x}
+);
+
+// Submenu gap properties.
+$submenu-column-gap: var(
+  --#{root-defaults.$prefix}-submenu-column-gap,
+  #{$menu-column-gap}
+);
+$submenu-row-gap: var(
+  --#{root-defaults.$prefix}-submenu-row-gap,
+  #{$menu-row-gap}
+);
+$submenu-gap: var(
+  --#{root-defaults.$prefix}-submenu-gap,
+  #{$submenu-column-gap} #{$submenu-row-gap}
+);
+
+// Submenu display properties.
+$submenu-show-display: var(
+  --#{root-defaults.$prefix}-submenu-show-display,
+  #{defaults.$submenu-show-display}
+);
+$submenu-hide-display: var(
+  --#{root-defaults.$prefix}-submenu-hide-display,
+  #{defaults.$submenu-hide-display}
+);
+$submenu-display: var(
+  --#{root-defaults.$prefix}-submenu-display,
+  #{defaults.$submenu-hide-display}
+);
+
+// Submenu color properties.
+$submenu-background: var(
+  --#{root-defaults.$prefix}-submenu-background,
+  #{$menu-background}
+);
+$submenu-color: var(--#{root-defaults.$prefix}-submenu-color, #{$menu-color});
+
+// Submenu border properties.
+$submenu-border-color: var(
+  --#{root-defaults.$prefix}-submenu-border-color,
+  #{$submenu-color}
+);
+$submenu-border-radius: var(
+  --#{root-defaults.$prefix}-submenu-border-radius,
+  #{root-variables.$border-radius}
+);
+$submenu-border-style: var(
+  --#{root-defaults.$prefix}-submenu-border-style,
+  #{root-variables.$border-style}
+);
+$submenu-border-width: var(
+  --#{root-defaults.$prefix}-submenu-border-width,
+  #{root-variables.$border-width}
+);
+$submenu-border: var(
+  --#{root-defaults.$prefix}-submenu-border,
+  #{$submenu-border-width} #{$submenu-border-style}
+);
+
+// Submenu position properties.
+$submenu-position: var(
+  --#{root-defaults.$prefix}-submenu-position,
+  #{defaults.$submenu-position}
+);
+$submenu-top: var(
+  --#{root-defaults.$prefix}-submenu-top,
+  #{defaults.$submenu-top}
+);
+$submenu-right: var(
+  --#{root-defaults.$prefix}-submenu-right,
+  #{defaults.$submenu-right}
+);
+$submenu-bottom: var(
+  --#{root-defaults.$prefix}-submenu-bottom,
+  #{defaults.$submenu-bottom}
+);
+$submenu-left: var(
+  --#{root-defaults.$prefix}-submenu-left,
+  #{defaults.$submenu-left}
+);
+$submenu-inset: var(
+  --#{root-defaults.$prefix}-submenu-inset,
+  #{$submenu-top} #{$submenu-right} #{$submenu-bottom} #{$submenu-left}
+);
+
+// Menu item properties.
+$menu-item-min-width: var(
+  --#{root-defaults.$prefix}-menu-item-min-width,
+  #{defaults.$menu-item-min-width}
+);
+$menu-item-max-width: var(
+  --#{root-defaults.$prefix}-menu-item-max-width,
+  #{defaults.$menu-item-max-width}
+);
+$menu-item-padding-x: var(
+  --#{root-defaults.$prefix}-menu-item-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$menu-item-padding-y: var(
+  --#{root-defaults.$prefix}-menu-item-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$menu-item-padding: var(
+  --#{root-defaults.$prefix}-menu-item-padding,
+  #{$menu-item-padding-y} #{$menu-item-padding-x}
+);
+
+// Submenu item properties.
+$submenu-item-width: var(
+  --#{root-defaults.$prefix}-submenu-item-width,
+  #{defaults.$submenu-item-width}
+);
+
+// Menu link properties.
+$menu-link-padding-x: var(
+  --#{root-defaults.$prefix}-menu-link-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$menu-link-padding-y: var(
+  --#{root-defaults.$prefix}-menu-link-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$menu-link-padding: var(
+  --#{root-defaults.$prefix}-menu-link-padding,
+  #{$menu-link-padding-y} #{$menu-link-padding-x}
+);
+
+// Menu link transform properties.
+$menu-link-transition: var(
+  --#{root-defaults.$prefix}-menu-link-transition,
+  background #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
+);
+$menu-link-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-menu-link-transition-reduced-motion,
+  background #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function}
+);
+$menu-link-transform: var(
+  --#{root-defaults.$prefix}-menu-link-transform,
+  #{defaults.$menu-link-transform}
+);
+$menu-link-visited-transform: var(
+  --#{root-defaults.$prefix}-menu-link-visited-transform,
+  #{defaults.$menu-link-visited-transform}
+);
+$menu-link-focus-transform: var(
+  --#{root-defaults.$prefix}-menu-link-focus-transform,
+  #{defaults.$menu-link-focus-transform}
+);
+$menu-link-hover-transform: var(
+  --#{root-defaults.$prefix}-menu-link-hover-transform,
+  #{defaults.$menu-link-hover-transform}
+);
+$menu-link-active-transform: var(
+  --#{root-defaults.$prefix}-menu-link-active-transform,
+  #{defaults.$menu-link-active-transform}
+);
+$menu-link-disabled-transform: var(
+  --#{root-defaults.$prefix}-menu-link-disabled-transform,
+  #{defaults.$menu-link-disabled-transform}
+);
+
+// Menu link gap properties.
+$menu-link-column-gap: var(
+  --#{root-defaults.$prefix}-menu-link-column-gap,
+  #{$menu-link-padding-x}
+);
+$menu-link-row-gap: var(
+  --#{root-defaults.$prefix}-menu-link-row-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$menu-link-gap: var(
+  --#{root-defaults.$prefix}-menu-link-gap,
+  #{$menu-link-column-gap} #{$menu-link-row-gap}
+);
+
+// Menu link colors.
+$menu-link-background: var(
+  --#{root-defaults.$prefix}-menu-link-background,
+  #{$menu-background}
+);
+$menu-link-visited-background: var(
+  --#{root-defaults.$prefix}-menu-link-visited-background,
+  #{$menu-background}
+);
+$menu-link-focus-background: var(
+  --#{root-defaults.$prefix}-menu-link-focus-background,
+  #{$menu-background}
+);
+$menu-link-hover-background: var(
+  --#{root-defaults.$prefix}-menu-link-hover-background,
+  #{$menu-color}
+);
+$menu-link-active-background: var(
+  --#{root-defaults.$prefix}-menu-link-active-background,
+  #{$menu-color}
+);
+$menu-link-disabled-background: var(
+  --#{root-defaults.$prefix}-menu-link-disabled-background,
+  #{color.$root-background}
+);
+$menu-link-color: var(
+  --#{root-defaults.$prefix}-menu-link-color,
+  #{$menu-color}
+);
+$menu-link-visited-color: var(
+  --#{root-defaults.$prefix}-menu-link-visited-color,
+  #{$menu-color}
+);
+$menu-link-focus-color: var(
+  --#{root-defaults.$prefix}-menu-link-focus-color,
+  #{$menu-color}
+);
+$menu-link-hover-color: var(
+  --#{root-defaults.$prefix}-menu-link-hover-color,
+  #{$menu-background}
+);
+$menu-link-active-color: var(
+  --#{root-defaults.$prefix}-menu-link-active-color,
+  #{$menu-background}
+);
+$menu-link-disabled-color: var(
+  --#{root-defaults.$prefix}-menu-link-disabled-color,
+  #{theme.get(primary, 200)}
+);
+
+// Menu link text decoration properties.
+$menu-link-text-decoration: var(
+  --#{root-defaults.$prefix}-menu-link-text-decoration,
+  #{defaults.$menu-link-text-decoration}
+);
+$menu-link-visited-text-decoration: var(
+  --#{root-defaults.$prefix}-menu-link-visited-text-decoration,
+  #{defaults.$menu-link-visited-text-decoration}
+);
+$menu-link-focus-text-decoration: var(
+  --#{root-defaults.$prefix}-menu-link-focus-text-decoration,
+  #{defaults.$menu-link-focus-text-decoration}
+);
+$menu-link-hover-text-decoration: var(
+  --#{root-defaults.$prefix}-menu-link-hover-text-decoration,
+  #{defaults.$menu-link-hover-text-decoration}
+);
+$menu-link-active-text-decoration: var(
+  --#{root-defaults.$prefix}-menu-link-active-text-decoration,
+  #{defaults.$menu-link-active-text-decoration}
+);
+$menu-link-disabled-text-decoration: var(
+  --#{root-defaults.$prefix}-menu-link-disabled-text-decoration,
+  #{defaults.$menu-link-disabled-text-decoration}
+);
+$menu-link-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}-menu-link-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
+$menu-link-visited-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}-menu-link-visited-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
+$menu-link-focus-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}-menu-link-focus-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
+$menu-link-hover-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}-menu-link-hover-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
+$menu-link-active-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}-menu-link-active-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
+$menu-link-disabled-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}-menu-link-disabled-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
+$menu-link-text-decoration-style: var(
+  --#{root-defaults.$prefix}-menu-link-text-decoration-style,
+  #{defaults.$menu-link-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-focus-text-decoration-style: var(
+  --#{root-defaults.$prefix}-menu-link-focus-text-decoration-style,
+  #{defaults.$menu-link-focus-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}
+);
+$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-disabled-text-decoration-style: var(
+  --#{root-defaults.$prefix}-menu-link-disabled-text-decoration-style,
+  #{defaults.$menu-link-disabled-text-decoration-style}
+);
+$menu-link-text-decoration-color: var(
+  --#{root-defaults.$prefix}-menu-link-text-decoration-color,
+  #{$menu-link-color}
+);
+$menu-link-visited-text-decoration-color: var(
+  --#{root-defaults.$prefix}-menu-link-visited-text-decoration-color,
+  #{$menu-link-visited-color}
+);
+$menu-link-focus-text-decoration-color: var(
+  --#{root-defaults.$prefix}-menu-link-focus-text-decoration-color,
+  #{$menu-link-focus-color}
+);
+$menu-link-hover-text-decoration-color: var(
+  --#{root-defaults.$prefix}-menu-link-hover-text-decoration-color,
+  #{$menu-link-hover-color}
+);
+$menu-link-active-text-decoration-color: var(
+  --#{root-defaults.$prefix}-menu-link-active-text-decoration-color,
+  #{$menu-link-active-color}
+);
+$menu-link-disabled-text-decoration-color: var(
+  --#{root-defaults.$prefix}-menu-link-disabled-text-decoration-color,
+  #{$menu-link-disabled-color}
+);
+
+// Menu link border properties.
+$menu-link-border-radius: var(
+  --#{root-defaults.$prefix}-menu-link-border-radius,
+  #{root-variables.$border-radius}
+);
+$menu-link-border-style: var(
+  --#{root-defaults.$prefix}-menu-link-border-style,
+  #{root-variables.$border-style}
+);
+$menu-link-border-width: var(
+  --#{root-defaults.$prefix}-menu-link-border-width,
+  #{defaults.$menu-link-border-width}
+);
+$menu-link-border: var(
+  --#{root-defaults.$prefix}-menu-link-border,
+  #{$menu-link-border-width} #{$menu-link-border-style}
+);
+$menu-link-border-color: var(
+  --#{root-defaults.$prefix}-menu-link-border-color,
+  #{$menu-link-color}
+);
+$menu-link-visited-border-color: var(
+  --#{root-defaults.$prefix}-menu-link-visited-border-color,
+  #{$menu-link-color}
+);
+$menu-link-focus-border-color: var(
+  --#{root-defaults.$prefix}-menu-link-focus-border-color,
+  #{$menu-link-color}
+);
+$menu-link-hover-border-color: var(
+  --#{root-defaults.$prefix}-menu-link-hover-border-color,
+  #{$menu-link-color}
+);
+$menu-link-active-border-color: var(
+  --#{root-defaults.$prefix}-menu-link-active-border-color,
+  #{$menu-link-color}
+);
+$menu-link-disabled-border-color: var(
+  --#{root-defaults.$prefix}-menu-link-disabled-border-color,
+  #{$menu-link-color}
+);
+
+// Submenu toggle properties.
+$submenu-toggle-transform: var(
+  --#{root-defaults.$prefix}-submenu-toggle-transform,
+  #{defaults.$submenu-toggle-transform}
+);
+$submenu-toggle-open-transform: var(
+  --#{root-defaults.$prefix}-submenu-toggle-open-transform,
+  #{defaults.$submenu-toggle-open-transform}
+);
+$submenu-toggle-content: var(
+  --#{root-defaults.$prefix}-submenu-toggle-content,
+  #{defaults.$submenu-toggle-content}
+);
+$submenu-toggle-transition: var(
+  --#{root-defaults.$prefix}-submenu-toggle-transition,
+  transform #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
+);
+$submenu-toggle-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-submenu-toggle-transition-reduced-motion,
+  none
+);

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

@@ -0,0 +1,29 @@
+// @graupl/graupl 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-text-decoration: none !default;
+$navigation-branding-visited-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-focus-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-hover-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-active-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-disabled-text-decoration: $navigation-branding-text-decoration !default;
+$navigation-branding-text-decoration-style: solid !default;
+$navigation-branding-visited-text-decoration-style: $navigation-branding-text-decoration-style !default;
+$navigation-branding-focus-text-decoration-style: $navigation-branding-text-decoration-style !default;
+$navigation-branding-hover-text-decoration-style: $navigation-branding-text-decoration-style !default;
+$navigation-branding-active-text-decoration-style: $navigation-branding-text-decoration-style !default;
+$navigation-branding-disabled-text-decoration-style: $navigation-branding-text-decoration-style !default;

package/src/scss/component/navigation/_index.scss

@@ -0,0 +1,189 @@
+// @graupl/graupl navigation component styles.
+
+@use "defaults";
+@use "variables" as *;
+@use "../../defaults" as root-defaults;
+@use "../menu/defaults" as menu-defaults;
+@use "../menu/variables" as menu-variables;
+@use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+
+@include layer(component) {
+  // Navigation.
+  #{defaults.$navigation-selector} {
+    display: grid;
+    grid-template-areas:
+      "branding - toggle"
+      "menu menu menu";
+    grid-template-columns: auto 1fr auto;
+    isolation: isolate;
+
+    #{menu-defaults.$menu-selector} {
+      grid-area: menu;
+
+      &#{menu-defaults.$menu-show-selector} {
+        --#{root-defaults.$prefix}-menu-display: #{menu-variables.$menu-show-display};
+      }
+
+      &#{menu-defaults.$menu-hide-selector} {
+        --#{root-defaults.$prefix}-menu-display: #{menu-variables.$menu-hide-display};
+      }
+    }
+  }
+
+  // Navigation toggle.
+  #{defaults.$navigation-toggle-selector} {
+    display: flex;
+    grid-area: toggle;
+    align-items: center;
+    justify-content: center;
+    min-width: $navigation-toggle-min-width;
+    min-height: $navigation-toggle-min-height;
+    padding: $navigation-toggle-padding;
+    border: $navigation-toggle-border;
+    border-radius: $navigation-toggle-border-radius;
+
+    &::before {
+      content: $navigation-toggle-content;
+      display: block;
+    }
+  }
+
+  // Navigation branding.
+  #{defaults.$navigation-branding-selector} {
+    display: flex;
+    grid-area: branding;
+    align-items: center;
+    justify-content: flex-start;
+    padding: $navigation-branding-padding;
+    font-size: $navigation-branding-font-size;
+    font-weight: $navigation-branding-font-weight;
+    text-decoration: $navigation-branding-text-decoration;
+    text-decoration-style: $navigation-branding-text-decoration-style;
+    text-decoration-thickness: $navigation-branding-text-decoration-thickness;
+
+    &:visited {
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-visited-text-decoration};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-visited-text-decoration-thickness};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-visited-text-decoration-style};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-focus-text-decoration};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-focus-text-decoration-thickness};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-focus-text-decoration-style};
+    }
+
+    &:hover {
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-hover-text-decoration};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-hover-text-decoration-thickness};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-hover-text-decoration-style};
+    }
+
+    &:active {
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-active-text-decoration};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-active-text-decoration-thickness};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-active-text-decoration-style};
+    }
+
+    &:disabled,
+    &[disabled] {
+      &,
+      &:visited,
+      &:focus-visible,
+      &:hover,
+      &:active {
+        --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-disabled-text-decoration};
+        --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-disabled-text-decoration-thickness};
+        --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-disabled-text-decoration-style};
+      }
+    }
+  }
+
+  @include screen-trigger(navigation-collapse) {
+    // Navigation.
+    #{defaults.$navigation-selector} {
+      --#{root-defaults.$prefix}-menu-flex-direction: column;
+      --#{root-defaults.$prefix}-submenu-position: relative;
+      --#{root-defaults.$prefix}-menu-item-min-width: 100%;
+      --#{root-defaults.$prefix}-submenu-inset: auto;
+    }
+  }
+
+  @include screen-trigger(navigation-expand) {
+    // Navigation.
+    #{defaults.$navigation-selector} {
+      --#{root-defaults.$prefix}-menu-hide-display: #{menu-variables.$menu-show-display};
+
+      grid-template-areas: "branding - menu";
+    }
+
+    // Navigation toggle.
+    #{defaults.$navigation-toggle-selector} {
+      display: none;
+    }
+  }
+}
+
+@include layer(theme) {
+  // Navigation.
+  #{defaults.$navigation-selector} {
+    --#{root-defaults.$prefix}-menu-background: #{$navigation-background};
+    --#{root-defaults.$prefix}-menu-color: #{$navigation-color};
+    --#{root-defaults.$prefix}-submenu-background: #{$navigation-background};
+    --#{root-defaults.$prefix}-submenu-color: #{$navigation-color};
+
+    background: $navigation-background;
+    color: $navigation-color;
+  }
+
+  // Navigation toggle.
+  #{defaults.$navigation-toggle-selector} {
+    border-color: $navigation-toggle-border-color;
+    background: $navigation-toggle-background;
+    color: $navigation-toggle-color;
+
+    &:hover {
+      --#{root-defaults.$prefix}-navigation-toggle-background: #{$navigation-toggle-hover-background};
+      --#{root-defaults.$prefix}-navigation-toggle-color: #{$navigation-toggle-hover-color};
+    }
+  }
+
+  // Navigation branding.
+  #{defaults.$navigation-branding-selector} {
+    color: $navigation-branding-color;
+    text-decoration-color: $navigation-branding-text-decoration-color;
+
+    &:visited {
+      --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-visited-color};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-visited-text-decoration-color};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-focus-color};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-focus-text-decoration-color};
+    }
+
+    &:hover {
+      --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-hover-color};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-hover-text-decoration-color};
+    }
+
+    &:active {
+      --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-active-color};
+      --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-active-text-decoration-color};
+    }
+
+    &:disabled,
+    &[disabled] {
+      &,
+      &:visited,
+      &:focus-visible,
+      &:hover,
+      &:active {
+        --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-disabled-color};
+        --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-disabled-text-decoration-color};
+      }
+    }
+  }
+}