@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.2

package/src/scss/component/list/_variables.scss

@@ -0,0 +1,176 @@
+// @graupl/graupl list component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "../../defaults" as root-defaults;
+@use "../../theme/color/variables" as color;
+@use "../../variables" as root-variables;
+@use "defaults";
+@use "sass:map";
+
+// List properties.
+$list-padding-x: var(
+  --#{root-defaults.$prefix}list-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$list-padding-y: var(
+  --#{root-defaults.$prefix}list-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$list-padding: var(
+  --#{root-defaults.$prefix}list-padding,
+  #{$list-padding-y} #{$list-padding-x}
+);
+$list-margin-x: var(
+  --#{root-defaults.$prefix}list-margin-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$list-margin-y: var(
+  --#{root-defaults.$prefix}list-margin-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$list-margin: var(
+  --#{root-defaults.$prefix}list-margin,
+  #{$list-margin-y} #{$list-margin-x}
+);
+
+// List gap properties.
+$list-column-gap: var(
+  --#{root-defaults.$prefix}list-column-gap,
+  #{map.get(root-variables.$spacers, 2)}
+);
+$list-row-gap: var(
+  --#{root-defaults.$prefix}list-row-gap,
+  #{map.get(root-variables.$spacers, 2)}
+);
+$list-gap: var(
+  --#{root-defaults.$prefix}list-gap,
+  #{$list-column-gap} #{$list-row-gap}
+);
+
+// List color properties.
+$list-background: var(
+  --#{root-defaults.$prefix}list-background,
+  #{color.$root-background}
+);
+$list-color: var(--#{root-defaults.$prefix}list-color, #{color.$root-color});
+
+// List border-properties.
+$list-border-color: var(
+  --#{root-defaults.$prefix}list-border-color,
+  #{$list-color}
+);
+$list-top-left-border-radius: var(
+  --#{root-defaults.$prefix}list-top-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$list-top-right-border-radius: var(
+  --#{root-defaults.$prefix}list-top-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$list-bottom-left-border-radius: var(
+  --#{root-defaults.$prefix}list-bottom-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$list-bottom-right-border-radius: var(
+  --#{root-defaults.$prefix}list-bottom-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$list-border-radius: var(
+  --#{root-defaults.$prefix}list-border-radius,
+  #{$list-top-left-border-radius} #{$list-top-right-border-radius}
+    #{$list-bottom-right-border-radius} #{$list-bottom-left-border-radius}
+);
+$list-border-style: var(
+  --#{root-defaults.$prefix}list-border-style,
+  #{root-variables.$border-style}
+);
+$list-border-width: var(--#{root-defaults.$prefix}list-border-width, 0);
+$list-border: var(
+  --#{root-defaults.$prefix}list-border,
+  #{$list-border-width} #{$list-border-style}
+);
+
+// List item properties.
+$list-item-padding-x: var(
+  --#{root-defaults.$prefix}list-item-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$list-item-padding-y: var(
+  --#{root-defaults.$prefix}list-item-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$list-item-padding: var(
+  --#{root-defaults.$prefix}list-item-padding,
+  #{$list-item-padding-y} #{$list-item-padding-x}
+);
+$list-item-transition: var(
+  --#{root-defaults.$prefix}list-item-transition,
+  transform #{map.get(root-variables.$transition-durations, fast)}
+    #{root-variables.$transition-timing-function}
+);
+$list-item-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}list-item-transition-reduced-motion,
+  none
+);
+
+// List item transform properties.
+$list-item-transform: var(
+  --#{root-defaults.$prefix}list-item-transform,
+  #{defaults.$list-item-transform}
+);
+$list-item-hover-transform: var(
+  --#{root-defaults.$prefix}list-item-hover-transform,
+  #{defaults.$list-item-hover-transform}
+);
+
+// List item color properties.
+$list-item-background: var(
+  --#{root-defaults.$prefix}list-item-background,
+  #{color.$root-background}
+);
+$list-item-color: var(
+  --#{root-defaults.$prefix}list-item-color,
+  #{color.$root-color}
+);
+
+// List item border-properties.
+$list-item-border-color: var(
+  --#{root-defaults.$prefix}list-item-border-color,
+  #{$list-item-color}
+);
+$list-item-top-left-border-radius: var(
+  --#{root-defaults.$prefix}list-item-top-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$list-item-top-right-border-radius: var(
+  --#{root-defaults.$prefix}list-item-top-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$list-item-bottom-left-border-radius: var(
+  --#{root-defaults.$prefix}list-item-bottom-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$list-item-bottom-right-border-radius: var(
+  --#{root-defaults.$prefix}list-item-bottom-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$list-item-border-radius: var(
+  --#{root-defaults.$prefix}list-item-border-radius,
+  #{$list-item-top-left-border-radius} #{$list-item-top-right-border-radius}
+    #{$list-item-bottom-right-border-radius}
+    #{$list-item-bottom-left-border-radius}
+);
+$list-item-border-style: var(
+  --#{root-defaults.$prefix}list-item-border-style,
+  #{root-variables.$border-style}
+);
+$list-item-border-width: var(
+  --#{root-defaults.$prefix}list-item-border-width,
+  #{root-variables.$border-width}
+);
+$list-item-border: var(
+  --#{root-defaults.$prefix}list-item-border,
+  #{$list-item-border-width} #{$list-item-border-style}
+);

package/src/scss/component/menu/_index.scss

@@ -10,34 +10,34 @@
 
 @include layer(component) {
   #{defaults.$menu-selector} {
-    --#{root-defaults.$prefix}-link-padding: #{$menu-link-padding};
-    --#{root-defaults.$prefix}-link-border-width: #{$menu-link-border-width};
-    --#{root-defaults.$prefix}-link-border-radius: #{$menu-link-border-radius};
-    --#{root-defaults.$prefix}-link-border-style: #{$menu-link-border-style};
-    --#{root-defaults.$prefix}-link-text-decoration: #{$menu-link-text-decoration};
-    --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$menu-link-text-decoration-thickness};
-    --#{root-defaults.$prefix}-link-text-decoration-style: #{$menu-link-text-decoration-style};
-    --#{root-defaults.$prefix}-link-transform: #{$menu-link-transform};
-    --#{root-defaults.$prefix}-link-visited-text-decoration: #{$menu-link-visited-text-decoration};
-    --#{root-defaults.$prefix}-link-visited-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
-    --#{root-defaults.$prefix}-link-visited-text-decoration-style: #{$menu-link-visited-text-decoration-style};
-    --#{root-defaults.$prefix}-link-visited-transform: #{$menu-link-visited-transform};
-    --#{root-defaults.$prefix}-link-focus-text-decoration: #{$menu-link-focus-text-decoration};
-    --#{root-defaults.$prefix}-link-focus-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
-    --#{root-defaults.$prefix}-link-focus-text-decoration-style: #{$menu-link-focus-text-decoration-style};
-    --#{root-defaults.$prefix}-link-focus-transform: #{$menu-link-focus-transform};
-    --#{root-defaults.$prefix}-link-hover-text-decoration: #{$menu-link-hover-text-decoration};
-    --#{root-defaults.$prefix}-link-hover-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
-    --#{root-defaults.$prefix}-link-hover-text-decoration-style: #{$menu-link-hover-text-decoration-style};
-    --#{root-defaults.$prefix}-link-hover-transform: #{$menu-link-hover-transform};
-    --#{root-defaults.$prefix}-link-active-text-decoration: #{$menu-link-active-text-decoration};
-    --#{root-defaults.$prefix}-link-active-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
-    --#{root-defaults.$prefix}-link-active-text-decoration-style: #{$menu-link-active-text-decoration-style};
-    --#{root-defaults.$prefix}-link-active-transform: #{$menu-link-active-transform};
-    --#{root-defaults.$prefix}-link-disabled-text-decoration: #{$menu-link-disabled-text-decoration};
-    --#{root-defaults.$prefix}-link-disabled-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
-    --#{root-defaults.$prefix}-link-disabled-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
-    --#{root-defaults.$prefix}-link-disabled-transform: #{$menu-link-disabled-transform};
+    --#{root-defaults.$prefix}link-padding: #{$menu-link-padding};
+    --#{root-defaults.$prefix}link-border-width: #{$menu-link-border-width};
+    --#{root-defaults.$prefix}link-border-radius: #{$menu-link-border-radius};
+    --#{root-defaults.$prefix}link-border-style: #{$menu-link-border-style};
+    --#{root-defaults.$prefix}link-text-decoration: #{$menu-link-text-decoration};
+    --#{root-defaults.$prefix}link-text-decoration-thickness: #{$menu-link-text-decoration-thickness};
+    --#{root-defaults.$prefix}link-text-decoration-style: #{$menu-link-text-decoration-style};
+    --#{root-defaults.$prefix}link-transform: #{$menu-link-transform};
+    --#{root-defaults.$prefix}link-visited-text-decoration: #{$menu-link-visited-text-decoration};
+    --#{root-defaults.$prefix}link-visited-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
+    --#{root-defaults.$prefix}link-visited-text-decoration-style: #{$menu-link-visited-text-decoration-style};
+    --#{root-defaults.$prefix}link-visited-transform: #{$menu-link-visited-transform};
+    --#{root-defaults.$prefix}link-focus-text-decoration: #{$menu-link-focus-text-decoration};
+    --#{root-defaults.$prefix}link-focus-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
+    --#{root-defaults.$prefix}link-focus-text-decoration-style: #{$menu-link-focus-text-decoration-style};
+    --#{root-defaults.$prefix}link-focus-transform: #{$menu-link-focus-transform};
+    --#{root-defaults.$prefix}link-hover-text-decoration: #{$menu-link-hover-text-decoration};
+    --#{root-defaults.$prefix}link-hover-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
+    --#{root-defaults.$prefix}link-hover-text-decoration-style: #{$menu-link-hover-text-decoration-style};
+    --#{root-defaults.$prefix}link-hover-transform: #{$menu-link-hover-transform};
+    --#{root-defaults.$prefix}link-active-text-decoration: #{$menu-link-active-text-decoration};
+    --#{root-defaults.$prefix}link-active-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
+    --#{root-defaults.$prefix}link-active-text-decoration-style: #{$menu-link-active-text-decoration-style};
+    --#{root-defaults.$prefix}link-active-transform: #{$menu-link-active-transform};
+    --#{root-defaults.$prefix}link-disabled-text-decoration: #{$menu-link-disabled-text-decoration};
+    --#{root-defaults.$prefix}link-disabled-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
+    --#{root-defaults.$prefix}link-disabled-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
+    --#{root-defaults.$prefix}link-disabled-transform: #{$menu-link-disabled-transform};
 
     display: $menu-display;
     flex-direction: $menu-flex-direction;
@@ -49,11 +49,11 @@
     isolation: isolate;
 
     &#{defaults.$menu-show-selector} {
-      --#{root-defaults.$prefix}-menu-display: #{$menu-show-display};
+      --#{root-defaults.$prefix}menu-display: #{$menu-show-display};
     }
 
     &#{defaults.$menu-hide-selector} {
-      --#{root-defaults.$prefix}-menu-display: #{$menu-hide-display};
+      --#{root-defaults.$prefix}menu-display: #{$menu-hide-display};
     }
   }
 
@@ -72,11 +72,11 @@
     inset: $submenu-inset;
 
     &#{defaults.$menu-show-selector} {
-      --#{root-defaults.$prefix}-submenu-display: #{$submenu-show-display};
+      --#{root-defaults.$prefix}submenu-display: #{$submenu-show-display};
     }
 
     &#{defaults.$menu-hide-selector} {
-      --#{root-defaults.$prefix}-submenu-display: #{$submenu-hide-display};
+      --#{root-defaults.$prefix}submenu-display: #{$submenu-hide-display};
     }
   }
 
@@ -105,31 +105,31 @@
     text-decoration-thickness: $menu-link-text-decoration-thickness;
 
     &:visited {
-      --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-visited-text-decoration};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-visited-text-decoration-style};
-      --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-visited-transform};
+      --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-visited-text-decoration};
+      --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-visited-text-decoration-thickness};
+      --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-visited-text-decoration-style};
+      --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-visited-transform};
     }
 
     &:focus-visible {
-      --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-focus-text-decoration};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-focus-text-decoration-style};
-      --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-focus-transform};
+      --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-focus-text-decoration};
+      --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-focus-text-decoration-thickness};
+      --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-focus-text-decoration-style};
+      --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-focus-transform};
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-hover-text-decoration};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-hover-text-decoration-style};
-      --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-hover-transform};
+      --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-hover-text-decoration};
+      --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-hover-text-decoration-thickness};
+      --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-hover-text-decoration-style};
+      --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-hover-transform};
     }
 
     &:active {
-      --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-active-text-decoration};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-active-text-decoration-style};
-      --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-active-transform};
+      --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-active-text-decoration};
+      --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-active-text-decoration-thickness};
+      --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-active-text-decoration-style};
+      --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-active-transform};
     }
 
     &:disabled,
@@ -139,32 +139,32 @@
       &:focus-visible,
       &:hover,
       &:active {
-        --#{root-defaults.$prefix}-menu-link-text-decoration: #{$menu-link-disabled-text-decoration};
-        --#{root-defaults.$prefix}-menu-link-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
-        --#{root-defaults.$prefix}-menu-link-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
-        --#{root-defaults.$prefix}-menu-link-transform: #{$menu-link-disabled-transform};
+        --#{root-defaults.$prefix}menu-link-text-decoration: #{$menu-link-disabled-text-decoration};
+        --#{root-defaults.$prefix}menu-link-text-decoration-thickness: #{$menu-link-disabled-text-decoration-thickness};
+        --#{root-defaults.$prefix}menu-link-text-decoration-style: #{$menu-link-disabled-text-decoration-style};
+        --#{root-defaults.$prefix}menu-link-transform: #{$menu-link-disabled-transform};
       }
     }
 
     &#{button-defaults.$button-selector} {
-      --#{root-defaults.$prefix}-menu-link-padding: #{button-variables.$button-padding};
-      --#{root-defaults.$prefix}-menu-link-border-width: #{button-variables.$button-border-width};
-      --#{root-defaults.$prefix}-menu-link-border-radius: #{button-variables.$button-border-radius};
-      --#{root-defaults.$prefix}-menu-link-border-style: #{button-variables.$button-border-style};
-      --#{root-defaults.$prefix}-menu-link-text-decoration: none;
-      --#{root-defaults.$prefix}-menu-link-visited-text-decoration: none;
-      --#{root-defaults.$prefix}-menu-link-focus-text-decoration: none;
-      --#{root-defaults.$prefix}-menu-link-hover-text-decoration: none;
-      --#{root-defaults.$prefix}-menu-link-active-text-decoration: none;
-      --#{root-defaults.$prefix}-menu-link-disabled-text-decoration: none;
-      --#{root-defaults.$prefix}-menu-link-transition: #{button-variables.$button-transition};
-      --#{root-defaults.$prefix}-menu-link-transition-reduced-motion: #{button-variables.$button-transition-reduced-motion};
-      --#{root-defaults.$prefix}-menu-link-transform: #{button-variables.$button-transform};
-      --#{root-defaults.$prefix}-menu-link-visited-transform: #{button-variables.$button-visited-transform};
-      --#{root-defaults.$prefix}-menu-link-focus-transform: #{button-variables.$button-focus-transform};
-      --#{root-defaults.$prefix}-menu-link-hover-transform: #{button-variables.$button-hover-transform};
-      --#{root-defaults.$prefix}-menu-link-active-transform: #{button-variables.$button-active-transform};
-      --#{root-defaults.$prefix}-menu-link-disabled-transform: #{button-variables.$button-disabled-transform};
+      --#{root-defaults.$prefix}menu-link-padding: #{button-variables.$button-padding};
+      --#{root-defaults.$prefix}menu-link-border-width: #{button-variables.$button-border-width};
+      --#{root-defaults.$prefix}menu-link-border-radius: #{button-variables.$button-border-radius};
+      --#{root-defaults.$prefix}menu-link-border-style: #{button-variables.$button-border-style};
+      --#{root-defaults.$prefix}menu-link-text-decoration: none;
+      --#{root-defaults.$prefix}menu-link-visited-text-decoration: none;
+      --#{root-defaults.$prefix}menu-link-focus-text-decoration: none;
+      --#{root-defaults.$prefix}menu-link-hover-text-decoration: none;
+      --#{root-defaults.$prefix}menu-link-active-text-decoration: none;
+      --#{root-defaults.$prefix}menu-link-disabled-text-decoration: none;
+      --#{root-defaults.$prefix}menu-link-transition: #{button-variables.$button-transition};
+      --#{root-defaults.$prefix}menu-link-transition-reduced-motion: #{button-variables.$button-transition-reduced-motion};
+      --#{root-defaults.$prefix}menu-link-transform: #{button-variables.$button-transform};
+      --#{root-defaults.$prefix}menu-link-visited-transform: #{button-variables.$button-visited-transform};
+      --#{root-defaults.$prefix}menu-link-focus-transform: #{button-variables.$button-focus-transform};
+      --#{root-defaults.$prefix}menu-link-hover-transform: #{button-variables.$button-hover-transform};
+      --#{root-defaults.$prefix}menu-link-active-transform: #{button-variables.$button-active-transform};
+      --#{root-defaults.$prefix}menu-link-disabled-transform: #{button-variables.$button-disabled-transform};
     }
   }
 
@@ -181,47 +181,47 @@
     }
 
     &[aria-expanded="true"]::after {
-      --#{root-defaults.$prefix}-submenu-toggle-transform: #{$submenu-toggle-open-transform};
+      --#{root-defaults.$prefix}submenu-toggle-transform: #{$submenu-toggle-open-transform};
     }
   }
 
   @include animation.off {
     #{defaults.$menu-link-selector} {
-      --#{root-defaults.$prefix}-menu-link-transition: #{$menu-link-transition-reduced-motion};
+      --#{root-defaults.$prefix}menu-link-transition: #{$menu-link-transition-reduced-motion};
     }
 
     #{defaults.$submenu-toggle-selector}::after {
-      --#{root-defaults.$prefix}-submenu-toggle-transition: #{$submenu-toggle-transition-reduced-motion};
+      --#{root-defaults.$prefix}submenu-toggle-transition: #{$submenu-toggle-transition-reduced-motion};
     }
   }
 }
 
 @include layer(theme) {
   #{defaults.$menu-selector} {
-    --#{root-defaults.$prefix}-link-color: #{$menu-link-color};
-    --#{root-defaults.$prefix}-link-background: #{$menu-link-background};
-    --#{root-defaults.$prefix}-link-border-color: #{$menu-link-border-color};
-    --#{root-defaults.$prefix}-link-text-decoration-color: #{$menu-link-text-decoration-color};
-    --#{root-defaults.$prefix}-link-visited-color: #{$menu-link-visited-color};
-    --#{root-defaults.$prefix}-link-visited-background: #{$menu-link-visited-background};
-    --#{root-defaults.$prefix}-link-visited-border-color: #{$menu-link-visited-border-color};
-    --#{root-defaults.$prefix}-link-visited-text-decoration-color: #{$menu-link-visited-text-decoration-color};
-    --#{root-defaults.$prefix}-link-focus-color: #{$menu-link-focus-color};
-    --#{root-defaults.$prefix}-link-focus-background: #{$menu-link-focus-background};
-    --#{root-defaults.$prefix}-link-focus-border-color: #{$menu-link-focus-border-color};
-    --#{root-defaults.$prefix}-link-focus-text-decoration-color: #{$menu-link-focus-text-decoration-color};
-    --#{root-defaults.$prefix}-link-hover-color: #{$menu-link-hover-color};
-    --#{root-defaults.$prefix}-link-hover-background: #{$menu-link-hover-background};
-    --#{root-defaults.$prefix}-link-hover-border-color: #{$menu-link-hover-border-color};
-    --#{root-defaults.$prefix}-link-hover-text-decoration-color: #{$menu-link-hover-text-decoration-color};
-    --#{root-defaults.$prefix}-link-active-color: #{$menu-link-active-color};
-    --#{root-defaults.$prefix}-link-active-background: #{$menu-link-active-background};
-    --#{root-defaults.$prefix}-link-active-border-color: #{$menu-link-active-border-color};
-    --#{root-defaults.$prefix}-link-active-text-decoration-color: #{$menu-link-active-text-decoration-color};
-    --#{root-defaults.$prefix}-link-disabled-color: #{$menu-link-disabled-color};
-    --#{root-defaults.$prefix}-link-disabled-background: #{$menu-link-disabled-background};
-    --#{root-defaults.$prefix}-link-disabled-border-color: #{$menu-link-disabled-border-color};
-    --#{root-defaults.$prefix}-link-disabled-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
+    --#{root-defaults.$prefix}link-color: #{$menu-link-color};
+    --#{root-defaults.$prefix}link-background: #{$menu-link-background};
+    --#{root-defaults.$prefix}link-border-color: #{$menu-link-border-color};
+    --#{root-defaults.$prefix}link-text-decoration-color: #{$menu-link-text-decoration-color};
+    --#{root-defaults.$prefix}link-visited-color: #{$menu-link-visited-color};
+    --#{root-defaults.$prefix}link-visited-background: #{$menu-link-visited-background};
+    --#{root-defaults.$prefix}link-visited-border-color: #{$menu-link-visited-border-color};
+    --#{root-defaults.$prefix}link-visited-text-decoration-color: #{$menu-link-visited-text-decoration-color};
+    --#{root-defaults.$prefix}link-focus-color: #{$menu-link-focus-color};
+    --#{root-defaults.$prefix}link-focus-background: #{$menu-link-focus-background};
+    --#{root-defaults.$prefix}link-focus-border-color: #{$menu-link-focus-border-color};
+    --#{root-defaults.$prefix}link-focus-text-decoration-color: #{$menu-link-focus-text-decoration-color};
+    --#{root-defaults.$prefix}link-hover-color: #{$menu-link-hover-color};
+    --#{root-defaults.$prefix}link-hover-background: #{$menu-link-hover-background};
+    --#{root-defaults.$prefix}link-hover-border-color: #{$menu-link-hover-border-color};
+    --#{root-defaults.$prefix}link-hover-text-decoration-color: #{$menu-link-hover-text-decoration-color};
+    --#{root-defaults.$prefix}link-active-color: #{$menu-link-active-color};
+    --#{root-defaults.$prefix}link-active-background: #{$menu-link-active-background};
+    --#{root-defaults.$prefix}link-active-border-color: #{$menu-link-active-border-color};
+    --#{root-defaults.$prefix}link-active-text-decoration-color: #{$menu-link-active-text-decoration-color};
+    --#{root-defaults.$prefix}link-disabled-color: #{$menu-link-disabled-color};
+    --#{root-defaults.$prefix}link-disabled-background: #{$menu-link-disabled-background};
+    --#{root-defaults.$prefix}link-disabled-border-color: #{$menu-link-disabled-border-color};
+    --#{root-defaults.$prefix}link-disabled-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
 
     border-color: $menu-border-color;
     background: $menu-background;
@@ -241,31 +241,31 @@
     text-decoration-color: $menu-link-text-decoration-color;
 
     &:visited {
-      --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-visited-background};
-      --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-visited-color};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-visited-text-decoration-color};
-      --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-visited-border-color};
+      --#{root-defaults.$prefix}menu-link-background: #{$menu-link-visited-background};
+      --#{root-defaults.$prefix}menu-link-color: #{$menu-link-visited-color};
+      --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-visited-text-decoration-color};
+      --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-visited-border-color};
     }
 
     &:focus-visible {
-      --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-focus-background};
-      --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-focus-color};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-focus-text-decoration-color};
-      --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-focus-border-color};
+      --#{root-defaults.$prefix}menu-link-background: #{$menu-link-focus-background};
+      --#{root-defaults.$prefix}menu-link-color: #{$menu-link-focus-color};
+      --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-focus-text-decoration-color};
+      --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-focus-border-color};
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-hover-background};
-      --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-hover-color};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-hover-text-decoration-color};
-      --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-hover-border-color};
+      --#{root-defaults.$prefix}menu-link-background: #{$menu-link-hover-background};
+      --#{root-defaults.$prefix}menu-link-color: #{$menu-link-hover-color};
+      --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-hover-text-decoration-color};
+      --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-hover-border-color};
     }
 
     &:active {
-      --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-active-background};
-      --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-active-color};
-      --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-active-text-decoration-color};
-      --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-active-border-color};
+      --#{root-defaults.$prefix}menu-link-background: #{$menu-link-active-background};
+      --#{root-defaults.$prefix}menu-link-color: #{$menu-link-active-color};
+      --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-active-text-decoration-color};
+      --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-active-border-color};
     }
 
     &:disabled {
@@ -274,32 +274,32 @@
       &:active,
       &:focus-visible,
       &:visited {
-        --#{root-defaults.$prefix}-menu-link-background: #{$menu-link-disabled-background};
-        --#{root-defaults.$prefix}-menu-link-color: #{$menu-link-disabled-color};
-        --#{root-defaults.$prefix}-menu-link-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
-        --#{root-defaults.$prefix}-menu-link-border-color: #{$menu-link-disabled-border-color};
+        --#{root-defaults.$prefix}menu-link-background: #{$menu-link-disabled-background};
+        --#{root-defaults.$prefix}menu-link-color: #{$menu-link-disabled-color};
+        --#{root-defaults.$prefix}menu-link-text-decoration-color: #{$menu-link-disabled-text-decoration-color};
+        --#{root-defaults.$prefix}menu-link-border-color: #{$menu-link-disabled-border-color};
       }
     }
 
     &#{button-defaults.$button-selector} {
-      --#{root-defaults.$prefix}-menu-link-background: #{button-variables.$button-background};
-      --#{root-defaults.$prefix}-menu-link-color: #{button-variables.$button-color};
-      --#{root-defaults.$prefix}-menu-link-border-color: #{button-variables.$button-border-color};
-      --#{root-defaults.$prefix}-menu-link-visited-background: #{button-variables.$button-visited-background};
-      --#{root-defaults.$prefix}-menu-link-visited-color: #{button-variables.$button-visited-color};
-      --#{root-defaults.$prefix}-menu-link-visited-border-color: #{button-variables.$button-visited-border-color};
-      --#{root-defaults.$prefix}-menu-link-focus-background: #{button-variables.$button-focus-background};
-      --#{root-defaults.$prefix}-menu-link-focus-color: #{button-variables.$button-focus-color};
-      --#{root-defaults.$prefix}-menu-link-focus-border-color: #{button-variables.$button-focus-border-color};
-      --#{root-defaults.$prefix}-menu-link-hover-background: #{button-variables.$button-hover-background};
-      --#{root-defaults.$prefix}-menu-link-hover-color: #{button-variables.$button-hover-color};
-      --#{root-defaults.$prefix}-menu-link-hover-border-color: #{button-variables.$button-hover-border-color};
-      --#{root-defaults.$prefix}-menu-link-active-background: #{button-variables.$button-active-background};
-      --#{root-defaults.$prefix}-menu-link-active-color: #{button-variables.$button-active-color};
-      --#{root-defaults.$prefix}-menu-link-active-border-color: #{button-variables.$button-active-border-color};
-      --#{root-defaults.$prefix}-menu-link-disabled-background: #{button-variables.$button-disabled-background};
-      --#{root-defaults.$prefix}-menu-link-disabled-color: #{button-variables.$button-disabled-color};
-      --#{root-defaults.$prefix}-menu-link-disabled-border-color: #{button-variables.$button-disabled-border-color};
+      --#{root-defaults.$prefix}menu-link-background: #{button-variables.$button-background};
+      --#{root-defaults.$prefix}menu-link-color: #{button-variables.$button-color};
+      --#{root-defaults.$prefix}menu-link-border-color: #{button-variables.$button-border-color};
+      --#{root-defaults.$prefix}menu-link-visited-background: #{button-variables.$button-visited-background};
+      --#{root-defaults.$prefix}menu-link-visited-color: #{button-variables.$button-visited-color};
+      --#{root-defaults.$prefix}menu-link-visited-border-color: #{button-variables.$button-visited-border-color};
+      --#{root-defaults.$prefix}menu-link-focus-background: #{button-variables.$button-focus-background};
+      --#{root-defaults.$prefix}menu-link-focus-color: #{button-variables.$button-focus-color};
+      --#{root-defaults.$prefix}menu-link-focus-border-color: #{button-variables.$button-focus-border-color};
+      --#{root-defaults.$prefix}menu-link-hover-background: #{button-variables.$button-hover-background};
+      --#{root-defaults.$prefix}menu-link-hover-color: #{button-variables.$button-hover-color};
+      --#{root-defaults.$prefix}menu-link-hover-border-color: #{button-variables.$button-hover-border-color};
+      --#{root-defaults.$prefix}menu-link-active-background: #{button-variables.$button-active-background};
+      --#{root-defaults.$prefix}menu-link-active-color: #{button-variables.$button-active-color};
+      --#{root-defaults.$prefix}menu-link-active-border-color: #{button-variables.$button-active-border-color};
+      --#{root-defaults.$prefix}menu-link-disabled-background: #{button-variables.$button-disabled-background};
+      --#{root-defaults.$prefix}menu-link-disabled-color: #{button-variables.$button-disabled-color};
+      --#{root-defaults.$prefix}menu-link-disabled-border-color: #{button-variables.$button-disabled-border-color};
     }
   }
 }