@graupl/graupl 1.0.0-alpha.9 → 1.0.0-beta.0

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

@@ -1,8 +1,12 @@
-// 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;
 @use "../../defaults" as root-defaults;
+@use "../../theme/color/variables" as color;
 @use "../../theme/typography/variables" as typography;
 @use "../../functions/theme";
 @use "sass:map";
@@ -34,17 +38,34 @@ $button-font-size: var(
 );
 $button-transition: var(
   --#{root-defaults.$prefix}-button-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},
-  transform #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
+  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},
+  transform #{map.get(root-variables.$transition-durations, fast)}
+    #{root-variables.$transition-timing-function}
 );
 $button-transition-reduced-motion: var(
   --#{root-defaults.$prefix}-button-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}
+  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}
 );
 
 // 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}
@@ -53,19 +74,23 @@ $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.
 $button-background: var(
   --#{root-defaults.$prefix}-button-background,
-  #{theme.get(primary, 100)}
+  #{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,
@@ -77,13 +102,21 @@ $button-active-background: var(
 );
 $button-disabled-background: var(
   --#{root-defaults.$prefix}-button-disabled-background,
-  #{theme.get(primary, 100)}
+  #{color.$root-background}
 );
 
 // 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,
@@ -107,6 +140,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}
@@ -115,15 +152,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.
+// @graupl/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,9 +1,13 @@
-// 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;
 @use "../../defaults" as root-defaults;
 @use "../../theme/typography/variables" as typography;
+@use "../../theme/color//variables" as color;
 @use "../../functions/theme";
 @use "sass:map";
 
@@ -55,7 +59,7 @@ $fieldset-font-size: var(
 // Background properties.
 $input-background: var(
   --#{root-defaults.$prefix}-input-background,
-  #{theme.get(primary, 100)}
+  #{color.$root-background}
 );
 $fieldset-background: var(
   --#{root-defaults.$prefix}-fieldset-background,
@@ -102,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}
@@ -114,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,32 +1,133 @@
-// Link base styles.
+// @graupl/graupl link base styles.
 
+@use "defaults";
 @use "variables" as *;
+@use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
+@use "../../mixins/animation";
 
 @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;
+
+    &: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 {
-      color: $link-hover-color;
+      --#{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 {
-      color: $link-active-color;
+      --#{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};
     }
 
-    &:visited {
-      color: $link-visited-color;
-
-      &:hover {
-        color: $link-hover-color;
+    &:disabled,
+    &[disabled] {
+      &,
+      &:visited,
+      &:focus-visible,
+      &:hover,
+      &: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};
       }
     }
   }