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

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/form/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl form base styles.
+// @graupl/graupl form base styles.
 
 @use "defaults";
 @use "variables" as *;

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 *;

package/src/scss/base/table/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl table base styles.
+// @graupl/graupl table base styles.
 
 @use "defaults";
 @use "variables" as *;

package/src/scss/component/_index.scss

@@ -1,6 +1,8 @@
-// @gruapl/graupl component styles.
+// @graupl/graupl component styles.
 
+@forward "alert";
 @forward "card";
+@forward "carousel";
 @forward "input-group";
 @forward "menu";
 @forward "navigation";

package/src/scss/component/alert/_defaults.scss

@@ -0,0 +1,49 @@
+// @graupl/graupl alert component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "sass:map";
+
+// Alert selectors.
+$alert-selector: ".alert" !default;
+$alert-theme-selector-prefix: "." !default;
+$alert-body-selector: ".alert-body" !default;
+$alert-header-selector: ".alert-header" !default;
+$alert-footer-selector: ".alert-footer" !default;
+$alert-title-selector: ".alert-title" !default;
+$alert-dismisser-selector: ".alert-dismisser" !default;
+$alert-hidden-selector: ".hide" !default;
+$alert-shown-selector: ".show" !default;
+$alert-transition-selector: ".transitioning" !default;
+
+// Alert state theme defaults.
+// This map is used to define the default colour shades for the
+// themed alert components.
+//
+// e.g.
+// Primary alerts will use primary--900 as the text colour, primary--100 as the background
+// and primary--900 as the border colour.
+//
+// Secondary/tertiary alerts will use the same shade for their respective colours.
+$base-alert-state-theme-map: (
+  color: 900,
+  background: 200,
+  border-color: 700,
+  title-color: 800,
+  button-border-color: transparent,
+  link-color: 800,
+  link-visited-color: 800,
+  link-focus-color: 800,
+  link-hover-color: 900,
+  link-active-color: 900,
+  link-disabled-color: 400,
+);
+$custom-alert-state-theme-map: () !default;
+$alert-state-theme-map: map.merge(
+  $base-alert-state-theme-map,
+  $custom-alert-state-theme-map
+);

package/src/scss/component/alert/_index.scss

@@ -0,0 +1,118 @@
+// @graupl/graupl alert component styles.
+
+@use "defaults";
+@use "variables" as *;
+@use "../../defaults" as root-defaults;
+@use "../../theme/color/variables" as color;
+@use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
+@use "../../functions/theme";
+@use "../../base/button/mixins" as button-mixins;
+@use "sass:map";
+
+#{defaults.$alert-selector} {
+  @include layer(component) {
+    --#{root-defaults.$prefix}-button-border: 0;
+
+    display: grid;
+    grid-template-columns: [content-start] 1fr [content-end dismiss-start] auto [dismiss-end];
+    grid-template-rows: [header-start] auto [header-end body-start] auto [body-end footer-start] auto [footer-end];
+    padding: $alert-padding;
+    transition: $alert-transition;
+    border: $alert-border;
+    border-radius: $alert-border-radius;
+    gap: $alert-gap;
+
+    &#{defaults.$alert-hidden-selector} {
+      display: none;
+    }
+
+    &#{defaults.$alert-transition-selector} {
+      display: grid;
+      opacity: 0;
+    }
+
+    &#{defaults.$alert-shown-selector} {
+      display: grid;
+    }
+
+    @include animation-off {
+      #{defaults.$alert-selector} {
+        --#{root-defaults.$prefix}-alert-transition: #{$alert-transition-reduced-motion};
+      }
+    }
+  }
+
+  @include layer(theme) {
+    --#{root-defaults.$prefix}-button-background: #{$alert-background};
+    --#{root-defaults.$prefix}-button-focus-background: #{$alert-background};
+    --#{root-defaults.$prefix}-link-color: #{$alert-link-color};
+    --#{root-defaults.$prefix}-link-visited-color: #{$alert-link-visited-color};
+    --#{root-defaults.$prefix}-link-focus-color: #{$alert-link-focus-color};
+    --#{root-defaults.$prefix}-link-hover-color: #{$alert-link-hover-color};
+    --#{root-defaults.$prefix}-link-active-color: #{$alert-link-active-color};
+    --#{root-defaults.$prefix}-link-disabled-color: #{$alert-link-disabled-color};
+
+    border-color: $alert-border-color;
+    background-color: $alert-background;
+    color: $alert-color;
+
+    @each $color, $map in color.$theme-active {
+      &#{defaults.$alert-theme-selector-prefix}#{$color} {
+        @each $prop, $shade in defaults.$alert-state-theme-map {
+          --#{root-defaults.$prefix}-alert-#{$prop}: #{theme.get(
+              $color,
+              $shade
+            )};
+        }
+      }
+    }
+  }
+}
+
+#{defaults.$alert-header-selector} {
+  @include layer(component) {
+    grid-column: content;
+    grid-row: header;
+    padding: $alert-header-padding;
+  }
+}
+
+#{defaults.$alert-body-selector} {
+  @include layer(component) {
+    grid-column: content;
+    grid-row: body;
+    padding: $alert-body-padding;
+  }
+}
+
+#{defaults.$alert-footer-selector} {
+  @include layer(component) {
+    grid-column: content;
+    grid-row: footer;
+    padding: $alert-footer-padding;
+  }
+}
+
+#{defaults.$alert-dismisser-selector} {
+  @include button-mixins.apply-button;
+
+  @include layer(component) {
+    grid-column: dismiss;
+    grid-row: 1 / -1;
+    align-self: flex-start;
+  }
+}
+
+#{defaults.$alert-title-selector} {
+  @include layer(component) {
+    margin: $alert-title-margin;
+  }
+
+  @include layer(theme) {
+    color: $alert-title-color;
+    font-size: $alert-title-font-size;
+    font-weight: $alert-title-font-weight;
+    line-height: $alert-title-line-height;
+  }
+}

package/src/scss/component/alert/_variables.scss

@@ -0,0 +1,170 @@
+// @graupl/graupl alert component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../theme/color/variables" as color;
+@use "../../theme/typography/variables" as typography;
+@use "sass:map";
+
+// Alert properties.
+$alert-padding-x: var(
+  --#{root-defaults.$prefix}-alert-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$alert-padding-y: var(
+  --#{root-defaults.$prefix}-alert-padding-y,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$alert-padding: var(
+  --#{root-defaults.$prefix}-alert-padding,
+  #{$alert-padding-y} #{$alert-padding-x}
+);
+
+// Alert gap properties.
+$alert-column-gap: var(
+  --#{root-defaults.$prefix}-alert-column-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$alert-row-gap: var(
+  --#{root-defaults.$prefix}-alert-row-gap,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$alert-gap: var(
+  --#{root-defaults.$prefix}-alert-gap,
+  #{$alert-column-gap} #{$alert-row-gap}
+);
+
+// Alert color properties.
+$alert-background: var(
+  --#{root-defaults.$prefix}-alert-background,
+  #{color.$root-background}
+);
+$alert-color: var(--#{root-defaults.$prefix}-alert-color, #{color.$root-color});
+$alert-link-color: var(--#{root-defaults.$prefix}-alert-link-color);
+$alert-link-visited-color: var(
+  --#{root-defaults.$prefix}-alert-link-visited-color
+);
+$alert-link-focus-color: var(--#{root-defaults.$prefix}-alert-link-focus-color);
+$alert-link-hover-color: var(--#{root-defaults.$prefix}-alert-link-hover-color);
+$alert-link-active-color: var(
+  --#{root-defaults.$prefix}-alert-link-active-color
+);
+$alert-link-disabled-color: var(
+  --#{root-defaults.$prefix}-alert-link-disabled-color
+);
+
+// Alert border-properties.
+$alert-border-color: var(
+  --#{root-defaults.$prefix}-alert-border-color,
+  #{$alert-color}
+);
+$alert-top-left-border-radius: var(
+  --#{root-defaults.$prefix}-alert-top-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$alert-top-right-border-radius: var(
+  --#{root-defaults.$prefix}-alert-top-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$alert-bottom-left-border-radius: var(
+  --#{root-defaults.$prefix}-alert-bottom-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$alert-bottom-right-border-radius: var(
+  --#{root-defaults.$prefix}-alert-bottom-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$alert-border-radius: var(
+  --#{root-defaults.$prefix}-alert-border-radius,
+  #{$alert-top-left-border-radius} #{$alert-top-right-border-radius} #{$alert-bottom-right-border-radius}
+    #{$alert-bottom-left-border-radius}
+);
+$alert-border-style: var(
+  --#{root-defaults.$prefix}-alert-border-style,
+  #{root-variables.$border-style}
+);
+$alert-border-width: var(
+  --#{root-defaults.$prefix}-alert-border-width,
+  #{root-variables.$border-width}
+);
+$alert-border: var(
+  --#{root-defaults.$prefix}-alert-border,
+  #{$alert-border-width} #{$alert-border-style}
+);
+
+// Alert transition properties.
+$alert-transition: var(
+  --#{root-defaults.$prefix}-alert-transition,
+  opacity #{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}
+);
+$alert-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-alert-transition-reduced-motion,
+  opacity #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
+);
+
+// Alert header properties.
+$alert-header-padding-x: var(
+  --#{root-defaults.$prefix}-alert-header-padding-x,
+  0
+);
+$alert-header-padding-y: var(
+  --#{root-defaults.$prefix}-alert-header-padding-y,
+  0
+);
+$alert-header-padding: var(
+  --#{root-defaults.$prefix}-alert-header-padding,
+  #{$alert-header-padding-y} #{$alert-header-padding-x}
+);
+
+// Alert title properties.
+$alert-title-color: var(
+  --#{root-defaults.$prefix}-alert-title-color,
+  #{$alert-color}
+);
+$alert-title-font-size: var(
+  --#{root-defaults.$prefix}-alert-title-font-size,
+  #{typography.$h4-font-size}
+);
+$alert-title-font-weight: var(
+  --#{root-defaults.$prefix}-alert-title-font-weight,
+  #{typography.$h4-font-weight}
+);
+$alert-title-font-family: var(
+  --#{root-defaults.$prefix}-alert-title-font-family,
+  #{typography.$h4-font-family}
+);
+$alert-title-line-height: var(
+  --#{root-defaults.$prefix}-alert-title-line-height,
+  #{typography.$h4-line-height}
+);
+$alert-title-margin: var(
+  --#{root-defaults.$prefix}-alert-title-margin,
+  0 0 0 0
+);
+
+// Alert body properties.
+$alert-body-padding-x: var(--#{root-defaults.$prefix}-alert-body-padding-x, 0);
+$alert-body-padding-y: var(--#{root-defaults.$prefix}-alert-body-padding-y, 0);
+$alert-body-padding: var(
+  --#{root-defaults.$prefix}-alert-body-padding,
+  #{$alert-body-padding-y} #{$alert-body-padding-x}
+);
+
+// Alert footer properties.
+$alert-footer-padding-x: var(
+  --#{root-defaults.$prefix}-alert-footer-padding-x,
+  0
+);
+$alert-footer-padding-y: var(
+  --#{root-defaults.$prefix}-alert-footer-padding-y,
+  0
+);
+$alert-footer-padding: var(
+  --#{root-defaults.$prefix}-alert-footer-padding,
+  #{$alert-footer-padding-y} #{$alert-footer-padding-x}
+);

package/src/scss/component/card/_defaults.scss

@@ -17,6 +17,9 @@ $card-title-selector: ".card-title" !default;
 $horizontal-card-selector: ".horizontal" !default;
 $horizontal-card-left-selector: ".left" !default;
 $horizontal-card-right-selector: ".right" !default;
+$vertical-card-top-selector: ".top" !default;
+$vertical-card-bottom-selector: ".bottom" !default;
+$inverse-card-selector: ".inverse" !default;
 
 // Card properties.
 $card-transform: none !default;

package/src/scss/component/card/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl card component styles.
+// @graupl/graupl card component styles.
 
 @use "defaults";
 @use "variables" as *;
@@ -11,12 +11,6 @@
     display: grid;
     position: relative;
     grid-template-columns: 1fr;
-    grid-template-rows:
-      [image-start]
-      $card-image-ratio
-      [image-end content-start]
-      $card-content-ratio
-      [content-end];
     padding: $card-padding;
     transform: $card-transform;
     transition: $card-transition;
@@ -25,6 +19,26 @@
     gap: $card-gap;
     isolation: isolate;
 
+    &,
+    &#{defaults.$vertical-card-top-selector} {
+      grid-template-rows:
+        [image-start]
+        $card-image-ratio
+        [image-end content-start]
+        $card-content-ratio
+        [content-end];
+    }
+
+    &#{defaults.$vertical-card-bottom-selector},
+    &#{defaults.$inverse-card-selector} {
+      grid-template-rows:
+        [content-start]
+        $card-content-ratio
+        [content-end image-start]
+        $card-image-ratio
+        [image-end];
+    }
+
     &:hover {
       --#{root-defaults.$prefix}-card-transform: #{$card-hover-transform};
     }
@@ -49,7 +63,8 @@
         }
       }
 
-      &#{defaults.$horizontal-card-right-selector} {
+      &#{defaults.$horizontal-card-right-selector},
+      &#{defaults.$inverse-card-selector} {
         grid-template-columns:
           [content-start]
           $card-content-ratio
@@ -104,11 +119,20 @@
       &#{defaults.$horizontal-card-selector} {
         &,
         &#{defaults.$horizontal-card-left-selector},
-        &#{defaults.$horizontal-card-right-selector} {
+        &#{defaults.$vertical-card-top-selector},
+        &#{defaults.$horizontal-card-right-selector},
+        &#{defaults.$vertical-card-bottom-selector},
+        &#{defaults.$inverse-card-selector} {
           --#{root-defaults.$prefix}-horizontal-card-image-ratio: #{defaults.$card-image-ratio};
           --#{root-defaults.$prefix}-horizontal-card-content-ratio: #{defaults.$card-content-ratio};
 
           grid-template-columns: 1fr;
+        }
+
+        &,
+        &#{defaults.$horizontal-card-left-selector},
+        &#{defaults.$horizontal-card-right-selector},
+        &#{defaults.$vertical-card-top-selector} {
           grid-template-rows:
             [image-start]
             $card-image-ratio
@@ -116,6 +140,16 @@
             $card-content-ratio
             [content-end];
         }
+
+        &#{defaults.$vertical-card-bottom-selector},
+        &#{defaults.$inverse-card-selector} {
+          grid-template-rows:
+            [content-start]
+            $card-content-ratio
+            [content-end image-start]
+            $card-image-ratio
+            [image-end];
+        }
       }
     }
   }

package/src/scss/component/carousel/_defaults.scss

@@ -0,0 +1,43 @@
+// @graupl/graupl carousel component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "sass:map";
+
+// Carousel selectors.
+$carousel-selector: ".carousel" !default;
+$carousel-control-container-selector: ".carousel-control-container" !default;
+$carousel-control-selector: ".carousel-control" !default;
+$carousel-pause-selector: ".pause" !default;
+$carousel-play-selector: ".play" !default;
+$carousel-autoplay-selector: ".autoplay" !default;
+$carousel-previous-selector: ".previous" !default;
+$carousel-next-selector: ".next" !default;
+$carousel-item-container-selector: ".carousel-item-container" !default;
+$carousel-item-selector: ".carousel-item" !default;
+$carousel-tab-container-selector: ".carousel-tab-container" !default;
+$carousel-tab-selector: ".carousel-tab" !default;
+$carousel-active-item-selector: ".active" !default;
+$carousel-next-item-selector: ".next" !default;
+$carousel-previous-item-selector: ".previous" !default;
+
+// Carousel grid area properties.
+$carousel-controls-height: auto !default;
+$carousel-tabs-width: 1fr !default;
+$carousel-tabs-height: auto !default;
+$carousel-slide-height: 1fr !default;
+$carousel-control-height: 3rem !default;
+$carousel-control-width: 4rem !default;
+
+// Carousel slide properties.
+$carousel-item-max-width: 100% !default;
+
+// Carousel control properties.
+$carousel-play-content: "'▶'" !default;
+$carousel-pause-content: "'❚❚'" !default;
+$carousel-next-content: "'▶'" !default;
+$carousel-previous-content: "'◀'" !default;