@graupl/graupl 1.0.0-alpha.11 → 1.0.0-alpha.13

package/src/scss/base/button/_index.scss

@@ -0,0 +1,210 @@
+// @gruapl/graupl button base styles.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../link/defaults" as link-defaults;
+@use "../../theme/color/variables" as color;
+@use "../../base/link/variables" as link;
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+@use "../../functions/theme";
+@use "sass:map";
+
+@include layer(base) {
+  #{defaults.$button-selector} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: $button-min-width;
+    min-height: $button-min-height;
+    padding: $button-padding;
+    transform: $button-transform;
+    transition: $button-transition;
+    border: $button-border;
+    border-radius: $button-border-radius;
+    font-size: $button-font-size;
+    cursor: pointer;
+
+    &:visited {
+      --#{root-defaults.$prefix}-button-transform: #{$button-visited-transform};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-button-transform: #{$button-focus-transform};
+    }
+
+    &:hover {
+      --#{root-defaults.$prefix}-button-transform: #{$button-hover-transform};
+    }
+
+    &:active {
+      --#{root-defaults.$prefix}-button-transform: #{$button-active-transform};
+    }
+
+    &:disabled,
+    &[disabled] {
+      cursor: not-allowed;
+
+      &,
+      &:visited,
+      &:focus-visible,
+      &:hover,
+      &:active {
+        --#{root-defaults.$prefix}-button-transform: #{$button-disabled-transform};
+      }
+    }
+
+    &#{defaults.$button-link-selector} {
+      --#{root-defaults.$prefix}-button-padding: #{link.$link-padding};
+      --#{root-defaults.$prefix}-button-transition: #{link.$link-transition};
+      --#{root-defaults.$prefix}-button-transition-reduced-motion: #{link.$link-transition-reduced-motion};
+      --#{root-defaults.$prefix}-button-transform: #{link.$link-transform};
+      --#{root-defaults.$prefix}-button-visited-transform: #{link.$link-visited-transform};
+      --#{root-defaults.$prefix}-button-focus-transform: #{link.$link-transform};
+      --#{root-defaults.$prefix}-button-hover-transform: #{link.$link-hover-transform};
+      --#{root-defaults.$prefix}-button-active-transform: #{link.$link-active-transform};
+      --#{root-defaults.$prefix}-button-border-width: #{link.$link-border-width};
+      --#{root-defaults.$prefix}-button-border-style: #{link.$link-border-style};
+      --#{root-defaults.$prefix}-button-border-radius: #{link.$link-border-radius};
+      --#{root-defaults.$prefix}-button-min-width: #{link.$link-min-width};
+      --#{root-defaults.$prefix}-button-min-height: #{link.$link-min-height};
+      --#{root-defaults.$prefix}-button-font-size: inherit;
+
+      text-decoration: link.$link-text-decoration;
+      text-decoration-thickness: link.$link-text-decoration-thickness;
+      text-decoration-style: link.$link-text-decoration-style;
+    }
+  }
+
+  #{link-defaults.$link-selector} {
+    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
+      --#{root-defaults.$prefix}-link-padding: #{$button-padding};
+      --#{root-defaults.$prefix}-link-transition: #{$button-transition};
+      --#{root-defaults.$prefix}-link-transition-reduced-motion: #{$button-transition-reduced-motion};
+      --#{root-defaults.$prefix}-link-transform: #{$button-transform};
+      --#{root-defaults.$prefix}-link-visited-transform: #{$button-visited-transform};
+      --#{root-defaults.$prefix}-link-focus-transform: #{$button-focus-transform};
+      --#{root-defaults.$prefix}-link-hover-transform: #{$button-hover-transform};
+      --#{root-defaults.$prefix}-link-active-transform: #{$button-active-transform};
+      --#{root-defaults.$prefix}-link-disabled-transform: #{$button-disabled-transform};
+      --#{root-defaults.$prefix}-link-border-width: #{$button-border-width};
+      --#{root-defaults.$prefix}-link-border-style: #{$button-border-style};
+      --#{root-defaults.$prefix}-link-border-radius: #{$button-border-radius};
+      --#{root-defaults.$prefix}-link-min-width: #{$button-min-width};
+      --#{root-defaults.$prefix}-link-min-height: #{$button-min-height};
+      --#{root-defaults.$prefix}-link-text-decoration: none;
+      --#{root-defaults.$prefix}-link-visited-text-decoration: none;
+      --#{root-defaults.$prefix}-link-focus-text-decoration: none;
+      --#{root-defaults.$prefix}-link-hover-text-decoration: none;
+      --#{root-defaults.$prefix}-link-active-text-decoration: none;
+      --#{root-defaults.$prefix}-link-disabled-text-decoration: none;
+    }
+  }
+
+  @include animation-off {
+    #{defaults.$button-selector} {
+      --#{root-defaults.$prefix}-button-transition: #{$button-transition-reduced-motion};
+    }
+  }
+}
+
+@include layer(theme) {
+  #{defaults.$button-selector} {
+    border-color: $button-border-color;
+    background: $button-background;
+    color: $button-color;
+
+    @each $color, $map in color.$theme-active {
+      &#{defaults.$button-theme-selector-prefix}#{$color} {
+        @each $prop, $shade in defaults.$button-state-theme-map {
+          --#{root-defaults.$prefix}-button-#{$prop}: #{theme.get(
+              $color,
+              $shade
+            )};
+        }
+      }
+    }
+
+    &#{defaults.$button-link-selector} {
+      --#{root-defaults.$prefix}-button-color: #{link.$link-color};
+      --#{root-defaults.$prefix}-button-visited-color: #{link.$link-visited-color};
+      --#{root-defaults.$prefix}-button-focus-color: #{link.$link-focus-color};
+      --#{root-defaults.$prefix}-button-hover-color: #{link.$link-hover-color};
+      --#{root-defaults.$prefix}-button-active-color: #{link.$link-active-color};
+      --#{root-defaults.$prefix}-button-disabled-color: #{link.$link-disabled-color};
+      --#{root-defaults.$prefix}-button-background: #{link.$link-background};
+      --#{root-defaults.$prefix}-button-visited-background: #{link.$link-visited-background};
+      --#{root-defaults.$prefix}-button-focus-background: #{link.$link-focus-background};
+      --#{root-defaults.$prefix}-button-hover-background: #{link.$link-hover-background};
+      --#{root-defaults.$prefix}-button-active-background: #{link.$link-active-background};
+      --#{root-defaults.$prefix}-button-disabled-background: #{link.$link-disabled-background};
+      --#{root-defaults.$prefix}-button-border-color: #{link.$link-border-color};
+      --#{root-defaults.$prefix}-button-visited-border-color: #{link.$link-visited-border-color};
+      --#{root-defaults.$prefix}-button-focus-border-color: #{link.$link-focus-border-color};
+      --#{root-defaults.$prefix}-button-hover-border-color: #{link.$link-hover-border-color};
+      --#{root-defaults.$prefix}-button-active-border-color: #{link.$link-active-border-color};
+      --#{root-defaults.$prefix}-button-disabled-border-color: #{link.$link-disabled-border-color};
+    }
+
+    &:visited {
+      --#{root-defaults.$prefix}-button-border-color: #{$button-visited-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$button-visited-background};
+      --#{root-defaults.$prefix}-button-color: #{$button-visited-color};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-button-border-color: #{$button-focus-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$button-focus-background};
+      --#{root-defaults.$prefix}-button-color: #{$button-focus-color};
+    }
+
+    &:hover {
+      --#{root-defaults.$prefix}-button-border-color: #{$button-hover-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$button-hover-background};
+      --#{root-defaults.$prefix}-button-color: #{$button-hover-color};
+    }
+
+    &:active {
+      --#{root-defaults.$prefix}-button-border-color: #{$button-active-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$button-active-background};
+      --#{root-defaults.$prefix}-button-color: #{$button-active-color};
+    }
+
+    &:disabled,
+    &[disabled] {
+      &,
+      &:visited,
+      &:focus-visible,
+      &:hover,
+      &:active {
+        --#{root-defaults.$prefix}-button-border-color: #{$button-disabled-border-color};
+        --#{root-defaults.$prefix}-button-background: #{$button-disabled-background};
+        --#{root-defaults.$prefix}-button-color: #{$button-disabled-color};
+      }
+    }
+  }
+
+  #{link-defaults.$link-selector} {
+    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
+      --#{root-defaults.$prefix}-link-color: #{$button-color};
+      --#{root-defaults.$prefix}-link-visited-color: #{$button-visited-color};
+      --#{root-defaults.$prefix}-link-focus-color: #{$button-focus-color};
+      --#{root-defaults.$prefix}-link-hover-color: #{$button-hover-color};
+      --#{root-defaults.$prefix}-link-active-color: #{$button-active-color};
+      --#{root-defaults.$prefix}-link-disabled-color: #{$button-disabled-color};
+      --#{root-defaults.$prefix}-link-background: #{$button-background};
+      --#{root-defaults.$prefix}-link-visited-background: #{$button-visited-background};
+      --#{root-defaults.$prefix}-link-focus-background: #{$button-focus-background};
+      --#{root-defaults.$prefix}-link-hover-background: #{$button-hover-background};
+      --#{root-defaults.$prefix}-link-active-background: #{$button-active-background};
+      --#{root-defaults.$prefix}-link-disabled-background: #{$button-disabled-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$button-border-color};
+      --#{root-defaults.$prefix}-link-visited-border-color: #{$button-visited-border-color};
+      --#{root-defaults.$prefix}-link-focus-border-color: #{$button-focus-border-color};
+      --#{root-defaults.$prefix}-link-hover-border-color: #{$button-hover-border-color};
+      --#{root-defaults.$prefix}-link-active-border-color: #{$button-active-border-color};
+      --#{root-defaults.$prefix}-link-disabled-border-color: #{$button-disabled-border-color};
+    }
+  }
+}

package/src/scss/{component → base}/button/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl button base variables.
+//
+// These values are to be used to directly style bases and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "../../variables" as root-variables;
@@ -46,6 +49,18 @@ $button-transition-reduced-motion: var(
 );
 
 // Transform properties.
+$button-transform: var(
+  --#{root-defaults.$prefix}-button-transform,
+  #{defaults.$button-transform}
+);
+$button-visited-transform: var(
+  --#{root-defaults.$prefix}-button-visited-transform,
+  #{defaults.$button-visited-transform}
+);
+$button-focus-transform: var(
+  --#{root-defaults.$prefix}-button-focus-transform,
+  #{defaults.$button-focus-transform}
+);
 $button-hover-transform: var(
   --#{root-defaults.$prefix}-button-hover-transform,
   #{defaults.$button-hover-transform}
@@ -54,13 +69,9 @@ $button-active-transform: var(
   --#{root-defaults.$prefix}-button-active-transform,
   #{defaults.$button-active-transform}
 );
-$button-hover-transform-reduced-motion: var(
-  --#{root-defaults.$prefix}-button-hover-transform-reduced-motion,
-  #{defaults.$button-hover-transform-reduced-motion}
-);
-$button-active-transform-reduced-motion: var(
-  --#{root-defaults.$prefix}-button-active-transform-reduced-motion,
-  #{defaults.$button-active-transform-reduced-motion}
+$button-disabled-transform: var(
+  --#{root-defaults.$prefix}-button-disabled-transform,
+  #{defaults.$button-disabled-transform}
 );
 
 // Background properties.
@@ -68,6 +79,14 @@ $button-background: var(
   --#{root-defaults.$prefix}-button-background,
   #{color.$root-background}
 );
+$button-visited-background: var(
+  --#{root-defaults.$prefix}-button-visited-background,
+  #{color.$root-background}
+);
+$button-focus-background: var(
+  --#{root-defaults.$prefix}-button-focus-background,
+  #{color.$root-background}
+);
 $button-hover-background: var(
   --#{root-defaults.$prefix}-button-hover-background,
   #{theme.get(primary, 900)}
@@ -84,7 +103,15 @@ $button-disabled-background: var(
 // Text properties.
 $button-color: var(
   --#{root-defaults.$prefix}-button-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
+);
+$button-visited-color: var(
+  --#{root-defaults.$prefix}-button-visited-color,
+  #{color.$root-color}
+);
+$button-focus-color: var(
+  --#{root-defaults.$prefix}-button-focus-color,
+  #{color.$root-color}
 );
 $button-hover-color: var(
   --#{root-defaults.$prefix}-button-hover-color,
@@ -108,6 +135,10 @@ $button-border-style: var(
   --#{root-defaults.$prefix}-botton-border-style,
   #{root-variables.$border-style}
 );
+$button-border: var(
+  --#{root-defaults.$prefix}-button-border,
+  #{$button-border-width} #{$button-border-style}
+);
 $button-border-radius: var(
   --#{root-defaults.$prefix}-button-border-radius,
   #{root-variables.$border-radius}
@@ -116,15 +147,23 @@ $button-border-radius: var(
 // Border colour properties.
 $button-border-color: var(
   --#{root-defaults.$prefix}-button-border-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
+);
+$button-visited-border-color: var(
+  --#{root-defaults.$prefix}-button-visited-border-color,
+  #{color.$root-color}
+);
+$button-focus-border-color: var(
+  --#{root-defaults.$prefix}-button-focus-border-color,
+  #{color.$root-color}
 );
 $button-hover-border-color: var(
   --#{root-defaults.$prefix}-button-hover-border-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
 );
 $button-active-border-color: var(
   --#{root-defaults.$prefix}-button-active-border-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
 );
 $button-disabled-border-color: var(
   --#{root-defaults.$prefix}-button-disabled-border-color,

package/src/scss/base/form/_defaults.scss

@@ -1,7 +1,17 @@
-// Default values for Graupl.
+// @graupl/graupl form base default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// Generally, these should not be used directly when styling bases 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.
+
+// Form selectors.
+$input-selector: "input" !default;
+$textarea-selector: "textarea" !default;
+$select-selector: "select" !default;
+$label-selector: "label" !default;
+$fieldset-selector: "fieldset" !default;
 
+// Fieldset properties.
 $fieldset-direction: column !default;

package/src/scss/base/form/_index.scss

@@ -1,15 +1,15 @@
-// Graupl form base styles.
+// @gruapl/graupl form base styles.
 
+@use "defaults";
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 
 @include layer(base) {
-  input,
-  textarea,
-  select {
+  #{defaults.$input-selector},
+  #{defaults.$textarea-selector},
+  #{defaults.$select-selector} {
     padding: $input-padding;
-    border-width: $input-border-width;
-    border-style: $input-border-style;
+    border: $input-border;
     border-radius: $input-border-radius;
     font-size: $input-font-size;
 
@@ -18,24 +18,23 @@
     }
   }
 
-  label {
+  #{defaults.$label-selector} {
     font-size: $label-font-size;
   }
 
-  fieldset {
+  #{defaults.$fieldset-selector} {
     display: flex;
     flex-flow: $fieldset-direction wrap;
     gap: $fieldset-gap;
     padding: $fieldset-padding;
-    border-width: $fieldset-border-width;
-    border-style: $fieldset-border-style;
+    border: $fieldset-border;
     border-radius: $fieldset-border-radius;
     font-size: $fieldset-font-size;
 
     &:disabled {
-      input,
-      textarea,
-      select {
+      #{defaults.$input-selector},
+      #{defaults.$textarea-selector},
+      #{defaults.$select-selector} {
         cursor: not-allowed;
       }
     }
@@ -43,9 +42,9 @@
 }
 
 @include layer(theme) {
-  input,
-  textarea,
-  select {
+  #{defaults.$input-selector},
+  #{defaults.$textarea-selector},
+  #{defaults.$select-selector} {
     border-color: $input-border-color;
     background: $input-background;
     color: $input-color;
@@ -65,15 +64,19 @@
     }
   }
 
-  label {
+  #{defaults.$label-selector} {
     color: $label-color;
 
-    &:has(+ input:disabled, + textarea:disabled, + select:disabled) {
+    &:has(
+        + #{defaults.$input-selector}:disabled,
+        + #{defaults.$textarea-selector}:disabled,
+        + #{defaults.$select-selector}:disabled
+      ) {
       color: $label-disabled-color;
     }
   }
 
-  fieldset {
+  #{defaults.$fieldset-selector} {
     border-color: $fieldset-border-color;
     background: $fieldset-background;
     color: $fieldset-color;
@@ -82,7 +85,7 @@
       border-color: $fieldset-disabled-border-color;
       color: $fieldset-disabled-color;
 
-      label {
+      #{defaults.$label-selector} {
         color: $label-disabled-color;
       }
     }

package/src/scss/base/form/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl form base variables.
+//
+// These values are to be used to directly style bases and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "../../variables" as root-variables;
@@ -103,6 +106,10 @@ $input-border-style: var(
   --#{root-defaults.$prefix}-botton-border-style,
   #{root-variables.$border-style}
 );
+$input-border: var(
+  --#{root-defaults.$prefix}-input-border,
+  #{$input-border-width} #{$input-border-style}
+);
 $input-border-radius: var(
   --#{root-defaults.$prefix}-input-border-radius,
   #{root-variables.$border-radius}
@@ -115,6 +122,10 @@ $fieldset-border-style: var(
   --#{root-defaults.$prefix}-fieldset-border-style,
   #{$input-border-style}
 );
+$fieldset-border: var(
+  --#{root-defaults.$prefix}-fieldset-border,
+  #{$fieldset-border-width} #{$fieldset-border-style}
+);
 $fieldset-border-radius: var(
   --#{root-defaults.$prefix}-fieldset-border-radius,
   #{$input-border-radius}

package/src/scss/base/link/_defaults.scss

@@ -1,7 +1,50 @@
-// Default values for Graupl.
+// @graupl/graupl link base default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// Generally, these should not be used directly when styling bases 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.
+
+// Link selectors.
+$link-selector: "a" !default;
+$stretched-link-selector: ".stretched" !default;
+$stretched-link-pseudo-selector: "before" !default;
+
+// Link properties.
+$link-text-decoration: underline !default;
+$link-visited-text-decoration: $link-text-decoration !default;
+$link-active-text-decoration: $link-text-decoration !default;
+$link-hover-text-decoration: $link-text-decoration !default;
+$link-focus-text-decoration: $link-text-decoration !default;
+$link-disabled-text-decoration: $link-text-decoration !default;
+$link-text-decoration-style: solid !default;
+$link-visited-text-decoration-style: $link-text-decoration-style !default;
+$link-active-text-decoration-style: $link-text-decoration-style !default;
+$link-hover-text-decoration-style: $link-text-decoration-style !default;
+$link-focus-text-decoration-style: $link-text-decoration-style !default;
+$link-disabled-text-decoration-style: $link-text-decoration-style !default;
+$link-transform: none !default;
+$link-visited-transform: $link-transform !default;
+$link-focus-transform: $link-transform !default;
+$link-hover-transform: $link-transform !default;
+$link-active-transform: $link-transform !default;
+$link-disabled-transform: $link-transform !default;
+$link-border-width: 0 !default;
+$link-border-color: transparent !default;
+$link-visited-border-color: $link-border-color !default;
+$link-focus-border-color: $link-border-color !default;
+$link-hover-border-color: $link-border-color !default;
+$link-active-border-color: $link-border-color !default;
+$link-disabled-border-color: $link-border-color !default;
+$link-background: transparent !default;
+$link-visited-background: $link-background !default;
+$link-focus-background: $link-background !default;
+$link-hover-background: $link-background !default;
+$link-active-background: $link-background !default;
+$link-disabled-background: $link-background !default;
+$link-min-width: auto;
+$link-min-height: auto;
 
-$link-text-decoration: underline;
+// Stretched link properties.
+$stretched-link-z-index: 5 !default;

package/src/scss/base/link/_index.scss

@@ -1,50 +1,134 @@
-// Link base styles.
+// @gruapl/graupl link base styles.
 
+@use "defaults";
 @use "variables" as *;
 @use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
 
 @include layer(base) {
-  a {
+  #{defaults.$link-selector} {
+    min-width: $link-min-width;
+    min-height: $link-min-height;
+    padding: $link-padding;
+    transform: $link-transform;
+    transition: $link-transition;
+    border: $link-border;
+    border-radius: $link-border-radius;
     text-decoration: $link-text-decoration;
+    text-decoration-style: $link-text-decoration-style;
     text-decoration-thickness: $link-text-decoration-thickness;
 
-    &:disabled {
+    &:visited {
+      --#{root-defaults.$prefix}-link-text-decoration: #{$link-visited-text-decoration};
+      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-visited-text-decoration-thickness};
+      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-visited-text-decoration-style};
+      --#{root-defaults.$prefix}-link-transform: #{$link-visited-transform};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-link-text-decoration: #{$link-focus-text-decoration};
+      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-focus-text-decoration-thickness};
+      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-focus-text-decoration-style};
+      --#{root-defaults.$prefix}-link-transform: #{$link-focus-transform};
+    }
+
+    &:hover {
+      --#{root-defaults.$prefix}-link-text-decoration: #{$link-hover-text-decoration};
+      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-hover-text-decoration-thickness};
+      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-hover-text-decoration-style};
+      --#{root-defaults.$prefix}-link-transform: #{$link-hover-transform};
+    }
+
+    &:active {
+      --#{root-defaults.$prefix}-link-text-decoration: #{$link-active-text-decoration};
+      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-active-text-decoration-thickness};
+      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-active-text-decoration-style};
+      --#{root-defaults.$prefix}-link-transform: #{$link-active-transform};
+    }
+
+    &:disabled,
+    &[disabled] {
       cursor: not-allowed;
+
+      &,
+      &:visited,
+      &:focus-visible,
+      &:hover,
+      &:active {
+        --#{root-defaults.$prefix}-link-text-decoration: #{$link-disabled-text-decoration};
+        --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-disabled-text-decoration-thickness};
+        --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-disabled-text-decoration-style};
+        --#{root-defaults.$prefix}-link-transform: #{$link-disabled-transform};
+      }
+    }
+
+    &#{defaults.$stretched-link-selector} {
+      isolation: isolate;
+
+      &::#{defaults.$stretched-link-pseudo-selector} {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: $stretched-link-z-index;
+      }
+    }
+  }
+
+  @include animation-off {
+    #{defaults.$link-selector} {
+      --#{root-defaults.$prefix}-link-transition: #{$link-transition-reduced-motion};
     }
   }
 }
 
 @include layer(theme) {
-  a {
+  #{defaults.$link-selector} {
+    border-color: $link-border-color;
+    background: $link-background;
     color: $link-color;
+    text-decoration-color: $link-text-decoration-color;
+
+    &:visited {
+      --#{root-defaults.$prefix}-link-color: #{$link-visited-color};
+      --#{root-defaults.$prefix}-link-background: #{$link-visited-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$link-visited-border-color};
+      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-visited-text-decoration-color};
+    }
+
+    &:focus-visible {
+      --#{root-defaults.$prefix}-link-color: #{$link-focus-color};
+      --#{root-defaults.$prefix}-link-background: #{$link-focus-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$link-focus-border-color};
+      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-focus-text-decoration-color};
+    }
 
     &:hover {
       --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
+      --#{root-defaults.$prefix}-link-background: #{$link-hover-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$link-hover-border-color};
+      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-hover-text-decoration-color};
     }
 
     &:active {
       --#{root-defaults.$prefix}-link-color: #{$link-active-color};
+      --#{root-defaults.$prefix}-link-background: #{$link-active-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$link-active-border-color};
+      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-active-text-decoration-color};
     }
 
-    // stylelint-disable no-descending-specificity
-    &:visited {
-      &,
-      &:hover {
-        --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
-      }
-    }
-
+    &:disabled,
     &[disabled] {
-      pointer-events: none;
-
       &,
+      &:visited,
+      &:focus-visible,
       &:hover,
-      &:active,
-      &:visited {
+      &:active {
         --#{root-defaults.$prefix}-link-color: #{$link-disabled-color};
+        --#{root-defaults.$prefix}-link-background: #{$link-disabled-background};
+        --#{root-defaults.$prefix}-link-border-color: #{$link-disabled-border-color};
+        --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-disabled-text-decoration-color};
       }
     }
-    // stylelint-enable no-descending-specificity
   }
 }