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

package/{src → packages/core/src}/scss/component/alert/_index.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl alert component styles.
+// @graupl/core alert component styles.
 
 @use "defaults";
 @use "variables" as *;
@@ -10,16 +10,23 @@
 @use "../../base/button/mixins" as button-mixins;
 @use "sass:map";
 
-#{defaults.$alert-selector} {
-  @include layer(component) {
-    --#{root-defaults.$prefix}-button-border: 0;
+@include layer(base) {
+  #{defaults.$alert-dismisser-selector} {
+    @include button-mixins.apply-base;
+  }
+}
+
+@include layer(component) {
+  #{defaults.$alert-selector} {
+    --#{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-width: $alert-border-width;
+    border-style: $alert-border-style;
     border-radius: $alert-border-radius;
     gap: $alert-gap;
 
@@ -38,78 +45,72 @@
 
     @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 map.get(color.$themes, 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
-            )};
-        }
+        --#{root-defaults.$prefix}alert-transition: #{$alert-transition-reduced-motion};
       }
     }
   }
-}
 
-#{defaults.$alert-header-selector} {
-  @include layer(component) {
+  #{defaults.$alert-header-selector} {
     grid-column: content;
     grid-row: header;
     padding: $alert-header-padding;
   }
-}
 
-#{defaults.$alert-body-selector} {
-  @include layer(component) {
+  #{defaults.$alert-body-selector} {
     grid-column: content;
     grid-row: body;
     padding: $alert-body-padding;
   }
-}
 
-#{defaults.$alert-footer-selector} {
-  @include layer(component) {
+  #{defaults.$alert-footer-selector} {
     grid-column: content;
     grid-row: footer;
     padding: $alert-footer-padding;
   }
-}
-
-#{defaults.$alert-dismisser-selector} {
-  @include button-mixins.apply-button;
 
-  @include layer(component) {
+  #{defaults.$alert-dismisser-selector} {
     grid-column: dismiss;
     grid-row: 1 / -1;
     align-self: flex-start;
   }
-}
 
-#{defaults.$alert-title-selector} {
-  @include layer(component) {
+  #{defaults.$alert-title-selector} {
     margin: $alert-title-margin;
   }
+}
+
+@include layer(theme) {
+  #{defaults.$alert-selector} {
+    --#{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 map.get(color.$themes, 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-dismisser-selector} {
+    @include button-mixins.apply-theme;
+  }
 
-  @include layer(theme) {
+  #{defaults.$alert-title-selector} {
     color: $alert-title-color;
     font-size: $alert-title-font-size;
     font-weight: $alert-title-font-weight;

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

@@ -0,0 +1,200 @@
+// @graupl/core 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.$background}
+);
+$alert-color: var(--#{root-defaults.$prefix}alert-color, #{color.$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-border-top-left-radius: var(
+  --#{root-defaults.$prefix}alert-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$alert-border-top-right-radius: var(
+  --#{root-defaults.$prefix}alert-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$alert-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}alert-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$alert-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}alert-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
+$alert-border-radius: var(
+  --#{root-defaults.$prefix}alert-border-radius,
+  #{$alert-border-top-left-radius} #{$alert-border-top-right-radius}
+    #{$alert-border-bottom-right-radius} #{$alert-border-bottom-left-radius}
+);
+$alert-border-top-width: var(
+  --#{root-defaults.$prefix}alert-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$alert-border-right-width: var(
+  --#{root-defaults.$prefix}alert-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$alert-border-bottom-width: var(
+  --#{root-defaults.$prefix}alert-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$alert-border-left-width: var(
+  --#{root-defaults.$prefix}alert-border-left-width,
+  #{root-variables.$border-left-width}
+);
+$alert-border-width: var(
+  --#{root-defaults.$prefix}alert-border-width,
+  #{$alert-border-top-width} #{$alert-border-right-width}
+    #{$alert-border-bottom-width} #{$alert-border-left-width}
+);
+$alert-border-top-style: var(
+  --#{root-defaults.$prefix}alert-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$alert-border-right-style: var(
+  --#{root-defaults.$prefix}alert-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$alert-border-bottom-style: var(
+  --#{root-defaults.$prefix}alert-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$alert-border-left-style: var(
+  --#{root-defaults.$prefix}alert-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$alert-border-style: var(
+  --#{root-defaults.$prefix}alert-border-style,
+  #{$alert-border-top-style} #{$alert-border-right-style}
+    #{$alert-border-bottom-style} #{$alert-border-left-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 → packages/core/src}/scss/component/card/_defaults.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl card component default values.
+// @graupl/core card 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.

package/{src → packages/core/src}/scss/component/card/_index.scss

@@ -1,21 +1,22 @@
-// @graupl/graupl card component styles.
+// @graupl/core card component styles.
 
 @use "defaults";
 @use "variables" as *;
 @use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
 @use "../../mixins/animation";
-@use "../../mixins/screen";
+@use "../../mixins/container";
 
 @include layer(component) {
   #{defaults.$card-selector} {
     display: grid;
     position: relative;
-    grid-template-columns: 1fr;
+    grid-template-columns: [image-start content-start] 1fr [image-end content-end];
     padding: $card-padding;
     transform: $card-transform;
     transition: $card-transition;
-    border: $card-border;
+    border-width: $card-border-width;
+    border-style: $card-border-style;
     border-radius: $card-border-radius;
     gap: $card-gap;
     isolation: isolate;
@@ -41,14 +42,14 @@
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-card-transform: #{$card-hover-transform};
+      --#{root-defaults.$prefix}card-transform: #{$card-hover-transform};
     }
 
     &#{defaults.$horizontal-card-selector} {
       &,
       &#{defaults.$horizontal-card-left-selector} {
-        --#{root-defaults.$prefix}-card-content-ratio: #{$horizontal-card-content-ratio};
-        --#{root-defaults.$prefix}-card-image-ratio: #{$horizontal-card-image-ratio};
+        --#{root-defaults.$prefix}card-content-ratio: #{$horizontal-card-content-ratio};
+        --#{root-defaults.$prefix}card-image-ratio: #{$horizontal-card-image-ratio};
 
         grid-template-columns:
           [image-start]
@@ -56,11 +57,22 @@
           [image-end content-start]
           $card-content-ratio
           [content-end];
-        grid-template-rows: 1fr;
+        grid-template-rows: [image-start content-start] 1fr [image-end content-end];
 
         #{defaults.$card-image-selector} img {
-          border-radius: calc($card-top-left-border-radius - $card-border-width)
-            0 0 calc($card-bottom-left-border-radius - $card-border-width);
+          border-radius: calc(
+              $card-border-top-left-radius - min(
+                  $card-border-top-width,
+                  $card-border-left-width
+                )
+            )
+            0 0
+            calc(
+              $card-border-bottom-left-radius - min(
+                  $card-border-bottom-width,
+                  $card-border-left-width
+                )
+            );
         }
       }
 
@@ -75,8 +87,19 @@
 
         #{defaults.$card-image-selector} img {
           border-radius: 0
-            calc($card-top-right-border-radius - $card-border-width)
-            calc($card-bottom-right-border-radius - $card-border-width) 0;
+            calc(
+              $card-border-top-right-radius - min(
+                  $card-border-top-width,
+                  $card-border-right-width
+                )
+            )
+            calc(
+              $card-border-bottom-right-radius - min(
+                  $card-border-bottom-width,
+                  $card-border-right-width
+                )
+            )
+            0;
         }
       }
     }
@@ -89,8 +112,19 @@
     img {
       width: 100%;
       height: 100%;
-      border-radius: calc($card-top-left-border-radius - $card-border-width)
-        calc($card-top-right-border-radius - $card-border-width) 0 0;
+      border-radius: calc(
+          $card-border-top-left-radius - min(
+              $card-border-top-width,
+              $card-border-left-width
+            )
+        )
+        calc(
+          $card-border-top-right-radius - min(
+              $card-border-top-width,
+              $card-border-right-width
+            )
+        )
+        0 0;
       object-fit: cover;
     }
   }
@@ -115,7 +149,7 @@
     flex: 0 0 auto;
   }
 
-  @include screen.trigger(force-vertical-card) {
+  @include container.trigger(force-vertical-card) {
     #{defaults.$card-selector} {
       &#{defaults.$horizontal-card-selector} {
         &,
@@ -124,10 +158,10 @@
         &#{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};
+          --#{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;
+          grid-template-columns: [image-start content-start] 1fr [image-end content-end];
         }
 
         &,
@@ -157,7 +191,7 @@
 
   @include animation.off {
     #{defaults.$card-selector} {
-      --#{root-defaults.$prefix}-card-transition: #{$card-transition-reduced-motion};
+      --#{root-defaults.$prefix}card-transition: #{$card-transition-reduced-motion};
     }
   }
 }