@graupl/graupl 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -1,170 +0,0 @@
-// @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

@@ -1,32 +0,0 @@
-// @graupl/graupl 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.
-//
-// 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.
-
-// Card selectors.
-$card-selector: ".card" !default;
-$card-image-selector: ".card-image" !default;
-$card-content-selector: ".card-content" !default;
-$card-body-selector: ".card-body" !default;
-$card-header-selector: ".card-header" !default;
-$card-footer-selector: ".card-footer" !default;
-$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;
-$card-hover-transform: $card-transform !default;
-
-// Card layout properties.
-$card-content-ratio: 1fr !default;
-$card-image-ratio: auto !default;
-$horizontal-card-content-ratio: 3fr !default;
-$horizontal-card-image-ratio: 2fr !default;

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

@@ -1,178 +0,0 @@
-// @graupl/graupl card component styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/animation";
-@use "../../mixins/screen";
-
-@include layer(component) {
-  #{defaults.$card-selector} {
-    display: grid;
-    position: relative;
-    grid-template-columns: 1fr;
-    padding: $card-padding;
-    transform: $card-transform;
-    transition: $card-transition;
-    border: $card-border;
-    border-radius: $card-border-radius;
-    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};
-    }
-
-    &#{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};
-
-        grid-template-columns:
-          [image-start]
-          $card-image-ratio
-          [image-end content-start]
-          $card-content-ratio
-          [content-end];
-        grid-template-rows: 1fr;
-
-        #{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);
-        }
-      }
-
-      &#{defaults.$horizontal-card-right-selector},
-      &#{defaults.$inverse-card-selector} {
-        grid-template-columns:
-          [content-start]
-          $card-content-ratio
-          [content-end image-start]
-          $card-image-ratio
-          [image-end];
-
-        #{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;
-        }
-      }
-    }
-  }
-
-  #{defaults.$card-image-selector} {
-    grid-area: image;
-    padding: $card-image-padding;
-
-    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;
-      object-fit: cover;
-    }
-  }
-
-  #{defaults.$card-content-selector} {
-    display: flex;
-    grid-area: content;
-    flex-direction: column;
-    padding: $card-content-padding;
-    gap: $card-content-gap;
-  }
-
-  #{defaults.$card-body-selector} {
-    flex: 1 0 auto;
-  }
-
-  #{defaults.$card-footer-selector} {
-    flex: 0 0 auto;
-  }
-
-  #{defaults.$card-title-selector} {
-    flex: 0 0 auto;
-  }
-
-  @include screen.trigger(force-vertical-card) {
-    #{defaults.$card-selector} {
-      &#{defaults.$horizontal-card-selector} {
-        &,
-        &#{defaults.$horizontal-card-left-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
-            [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];
-        }
-      }
-    }
-  }
-
-  @include animation.off {
-    #{defaults.$card-selector} {
-      --#{root-defaults.$prefix}card-transition: #{$card-transition-reduced-motion};
-    }
-  }
-}
-
-@include layer(theme) {
-  #{defaults.$card-selector} {
-    border-color: $card-border-color;
-    background: $card-background;
-    color: $card-color;
-  }
-
-  #{defaults.$card-title-selector} {
-    color: $card-title-color;
-    font-size: $card-title-font-size;
-    font-weight: $card-title-font-weight;
-    line-height: $card-title-line-height;
-  }
-}

package/src/scss/component/card/_variables.scss

@@ -1,186 +0,0 @@
-// @graupl/graupl card 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";
-
-// Card properties.
-$card-padding-x: var(
-  --#{root-defaults.$prefix}card-padding-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$card-padding-y: var(
-  --#{root-defaults.$prefix}card-padding-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$card-padding: var(
-  --#{root-defaults.$prefix}card-padding,
-  #{$card-padding-y} #{$card-padding-x}
-);
-$card-transition: var(
-  --#{root-defaults.$prefix}card-transition,
-  transform #{map.get(root-variables.$transition-durations, fast)}
-    #{root-variables.$transition-timing-function}
-);
-$card-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}card-transition-reduced-motion,
-  none
-);
-
-// Card transform properties.
-$card-transform: var(
-  --#{root-defaults.$prefix}card-transform,
-  #{defaults.$card-transform}
-);
-$card-hover-transform: var(
-  --#{root-defaults.$prefix}card-hover-transform,
-  #{defaults.$card-hover-transform}
-);
-
-// Card gap properties.
-$card-column-gap: var(
-  --#{root-defaults.$prefix}card-column-gap,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$card-row-gap: var(
-  --#{root-defaults.$prefix}card-row-gap,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$card-gap: var(
-  --#{root-defaults.$prefix}card-gap,
-  #{$card-column-gap} #{$card-row-gap}
-);
-
-// Card color properties.
-$card-background: var(
-  --#{root-defaults.$prefix}card-background,
-  #{color.$root-background}
-);
-$card-color: var(--#{root-defaults.$prefix}card-color, #{color.$root-color});
-
-// Card border-properties.
-$card-border-color: var(
-  --#{root-defaults.$prefix}card-border-color,
-  #{$card-color}
-);
-$card-top-left-border-radius: var(
-  --#{root-defaults.$prefix}card-top-left-border-radius,
-  #{root-variables.$border-radius}
-);
-$card-top-right-border-radius: var(
-  --#{root-defaults.$prefix}card-top-right-border-radius,
-  #{root-variables.$border-radius}
-);
-$card-bottom-left-border-radius: var(
-  --#{root-defaults.$prefix}card-bottom-left-border-radius,
-  #{root-variables.$border-radius}
-);
-$card-bottom-right-border-radius: var(
-  --#{root-defaults.$prefix}card-bottom-right-border-radius,
-  #{root-variables.$border-radius}
-);
-$card-border-radius: var(
-  --#{root-defaults.$prefix}card-border-radius,
-  #{$card-top-left-border-radius} #{$card-top-right-border-radius}
-    #{$card-bottom-right-border-radius} #{$card-bottom-left-border-radius}
-);
-$card-border-style: var(
-  --#{root-defaults.$prefix}card-border-style,
-  #{root-variables.$border-style}
-);
-$card-border-width: var(
-  --#{root-defaults.$prefix}card-border-width,
-  #{root-variables.$border-width}
-);
-$card-border: var(
-  --#{root-defaults.$prefix}card-border,
-  #{$card-border-width} #{$card-border-style}
-);
-
-// Card layout properties.
-$card-content-ratio: var(
-  --#{root-defaults.$prefix}card-content-ratio,
-  defaults.$card-content-ratio
-);
-$card-image-ratio: var(
-  --#{root-defaults.$prefix}card-image-ratio,
-  defaults.$card-image-ratio
-);
-$horizontal-card-content-ratio: var(
-  --#{root-defaults.$prefix}horizontal-card-content-ratio,
-  defaults.$horizontal-card-content-ratio
-);
-$horizontal-card-image-ratio: var(
-  --#{root-defaults.$prefix}horizontal-card-image-ratio,
-  defaults.$horizontal-card-image-ratio
-);
-
-// Card image properties.
-$card-image-padding-x: var(
-  --#{root-defaults.$prefix}card-image-padding-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$card-image-padding-y: var(
-  --#{root-defaults.$prefix}card-image-padding-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$card-image-padding: var(
-  --#{root-defaults.$prefix}card-image-padding,
-  #{$card-image-padding-y} #{$card-image-padding-x}
-);
-
-// Card content properties.
-$card-content-padding-x: var(
-  --#{root-defaults.$prefix}card-content-padding-x,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$card-content-padding-y: var(
-  --#{root-defaults.$prefix}card-content-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$card-content-padding: var(
-  --#{root-defaults.$prefix}card-content-padding,
-  #{$card-content-padding-y} #{$card-content-padding-x}
-);
-
-// Card content gap properties.
-$card-content-column-gap: var(
-  --#{root-defaults.$prefix}card-content-column-gap,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$card-content-row-gap: var(
-  --#{root-defaults.$prefix}card-content-row-gap,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$card-content-gap: var(
-  --#{root-defaults.$prefix}card-content-gap,
-  #{$card-content-column-gap} #{$card-content-row-gap}
-);
-
-// Card title properties.
-$card-title-color: var(
-  --#{root-defaults.$prefix}card-title-color,
-  #{$card-color}
-);
-$card-title-font-size: var(
-  --#{root-defaults.$prefix}card-title-font-size,
-  #{typography.$h4-font-size}
-);
-$card-title-font-weight: var(
-  --#{root-defaults.$prefix}card-title-font-weight,
-  #{typography.$h4-font-weight}
-);
-$card-title-font-family: var(
-  --#{root-defaults.$prefix}card-title-font-family,
-  #{typography.$h4-font-family}
-);
-$card-title-line-height: var(
-  --#{root-defaults.$prefix}card-title-line-height,
-  #{typography.$h4-line-height}
-);

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

@@ -1,43 +0,0 @@
-// @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;