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

package/src/scss/base/button/_mixins.scss

@@ -0,0 +1,164 @@
+// @graupl/graupl button base styles.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../theme/color/variables" as color;
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+@use "../../functions/theme";
+@use "sass:map";
+
+@mixin apply-button(
+  $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,
+  $visited-transform: $button-visited-transform,
+  $focus-transform: $button-focus-transform,
+  $hover-transform: $button-hover-transform,
+  $active-transform: $button-active-transform,
+  $disabled-transform: $button-disabled-transform,
+  $border-color: $button-border-color,
+  $background: $button-background,
+  $color: $button-color,
+  $visited-border-color: $button-visited-border-color,
+  $visited-background: $button-visited-background,
+  $visited-color: $button-visited-color,
+  $focus-border-color: $button-focus-border-color,
+  $focus-background: $button-focus-background,
+  $focus-color: $button-focus-color,
+  $hover-border-color: $button-hover-border-color,
+  $hover-background: $button-hover-background,
+  $hover-color: $button-hover-color,
+  $active-border-color: $button-active-border-color,
+  $active-background: $button-active-background,
+  $active-color: $button-active-color,
+  $disabled-border-color: $button-disabled-border-color,
+  $disabled-background: $button-disabled-background,
+  $disabled-color: $button-disabled-color
+) {
+  @include layer(base) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: $min-width;
+    min-height: $min-height;
+    padding: $padding;
+    transform: $transform;
+    transition: $transition;
+    border: $border;
+    border-radius: $border-radius;
+    font-size: $font-size;
+    cursor: pointer;
+
+    &:visited,
+    &#{defaults.$button-visited-selector} {
+      --#{root-defaults.$prefix}-button-transform: #{$visited-transform};
+    }
+
+    &:focus-visible,
+    &#{defaults.$button-focus-selector} {
+      --#{root-defaults.$prefix}-button-transform: #{$focus-transform};
+    }
+
+    &:hover,
+    &#{defaults.$button-hover-selector} {
+      --#{root-defaults.$prefix}-button-transform: #{$hover-transform};
+    }
+
+    &:active,
+    &#{defaults.$button-active-selector} {
+      --#{root-defaults.$prefix}-button-transform: #{$active-transform};
+    }
+
+    &:disabled,
+    &[disabled],
+    &#{defaults.$button-disabled-selector} {
+      cursor: not-allowed;
+
+      &,
+      &:visited,
+      &#{defaults.$button-visited-selector},
+      &:focus-visible,
+      &#{defaults.$button-focus-selector},
+      &:hover,
+      &#{defaults.$button-hover-selector},
+      &:active,
+      &#{defaults.$button-active-selector} {
+        --#{root-defaults.$prefix}-button-transform: #{$disabled-transform};
+      }
+    }
+
+    @include animation-off {
+      --#{root-defaults.$prefix}-button-transition: #{$button-transition-reduced-motion};
+    }
+  }
+
+  @include layer(theme) {
+    border-color: $border-color;
+    background: $background;
+    color: $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
+            )};
+        }
+      }
+    }
+
+    &:visited,
+    &#{defaults.$button-visited-selector} {
+      --#{root-defaults.$prefix}-button-border-color: #{$visited-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$visited-background};
+      --#{root-defaults.$prefix}-button-color: #{$visited-color};
+    }
+
+    &:focus-visible,
+    &#{defaults.$button-focus-selector} {
+      --#{root-defaults.$prefix}-button-border-color: #{$focus-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$focus-background};
+      --#{root-defaults.$prefix}-button-color: #{$focus-color};
+    }
+
+    &:hover,
+    &#{defaults.$button-hover-selector} {
+      --#{root-defaults.$prefix}-button-border-color: #{$hover-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$hover-background};
+      --#{root-defaults.$prefix}-button-color: #{$hover-color};
+    }
+
+    &:active,
+    &#{defaults.$button-active-selector} {
+      --#{root-defaults.$prefix}-button-border-color: #{$active-border-color};
+      --#{root-defaults.$prefix}-button-background: #{$active-background};
+      --#{root-defaults.$prefix}-button-color: #{$active-color};
+    }
+
+    &:disabled,
+    &[disabled],
+    &#{defaults.$button-disabled-selector} {
+      &,
+      &:visited,
+      &#{defaults.$button-visited-selector},
+      &:focus-visible,
+      &#{defaults.$button-focus-selector},
+      &:hover,
+      &#{defaults.$button-hover-selector},
+      &:active,
+      &#{defaults.$button-active-selector} {
+        --#{root-defaults.$prefix}-button-border-color: #{$disabled-border-color};
+        --#{root-defaults.$prefix}-button-background: #{$disabled-background};
+        --#{root-defaults.$prefix}-button-color: #{$disabled-color};
+      }
+    }
+  }
+}

package/src/scss/base/button/_variables.scss

@@ -53,6 +53,14 @@ $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}
@@ -61,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.
@@ -75,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)}
@@ -91,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,
@@ -115,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}
@@ -123,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/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl form base styles.
+// @graupl/graupl form base styles.
 
 @use "defaults";
 @use "variables" as *;
@@ -9,8 +9,7 @@
   #{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;
 
@@ -28,8 +27,7 @@
     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;
 

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

@@ -106,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}
@@ -118,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

@@ -8,12 +8,43 @@
 
 // Link selectors.
 $link-selector: "a" !default;
+$stretched-link-selector: ".stretched" !default;
+$stretched-link-pseudo-selector: "before" !default;
 
 // Link properties.
-$link-text-decoration: underline;
-$link-hover-text-decoration: underline;
+$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-hover-transform: none !default;
-$link-hover-transform-reduced-motion: none !default;
-$link-active-transform: none !default;
-$link-active-transform-reduced-motion: 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;
+
+// Stretched link properties.
+$stretched-link-z-index: 5 !default;

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

@@ -1,4 +1,4 @@
-// @gruapl/graupl link base styles.
+// @graupl/graupl link base styles.
 
 @use "defaults";
 @use "variables" as *;
@@ -8,24 +8,70 @@
 
 @include layer(base) {
   #{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;
 
+    &: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;
+      }
     }
   }
 
@@ -38,37 +84,51 @@
 
 @include layer(theme) {
   #{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-visited-color};
-        --#{root-defaults.$prefix}-link-background: #{$link-visited-background};
-      }
-    }
-
+    &:disabled,
     &[disabled] {
       &,
+      &: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
   }
 }