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

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

@@ -1,121 +0,0 @@
-// @graupl/graupl table base styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "../../defaults" as root-defaults;
-@use "../../functions/theme";
-
-@include layer(base) {
-  #{defaults.$table-selector} {
-    #{defaults.$table-caption-selector} {
-      padding: $table-caption-padding;
-      caption-side: $table-caption-side;
-    }
-
-    #{defaults.$table-header-selector} {
-      padding: $table-header-padding;
-      font-weight: $table-header-font-weight;
-    }
-
-    #{defaults.$table-cell-selector},
-    #{defaults.$table-body-selector} #{defaults.$table-header-selector} {
-      padding: $table-cell-padding;
-    }
-
-    &#{defaults.$table-collapsed-selector} {
-      border-collapse: collapse;
-    }
-
-    &#{defaults.$table-bordered-selector} {
-      border-collapse: collapse;
-      border: $table-border;
-
-      #{defaults.$table-row-selector} > * {
-        border: $table-cell-border;
-      }
-    }
-  }
-
-  #{defaults.$table-responsive-selector} {
-    display: block;
-    width: 100%;
-    overflow: scroll hidden;
-
-    #{defaults.$table-selector} {
-      width: 100%;
-      margin-bottom: 0;
-    }
-  }
-}
-
-@include layer(theme) {
-  #{defaults.$table-selector} {
-    @each $variant in theme.variants() {
-      &#{defaults.$table-theme-prefix-selector}#{$variant},
-      #{defaults.$table-theme-prefix-selector}#{$variant} {
-        @each $prop, $key in defaults.$table-theme-map {
-          --#{root-defaults.$prefix}-table-#{$prop}: #{theme.get(
-              $variant,
-              $key
-            )};
-        }
-      }
-    }
-
-    #{defaults.$table-header-selector} {
-      background: $table-header-background;
-      color: $table-header-color;
-    }
-
-    #{defaults.$table-cell-selector},
-    #{defaults.$table-body-selector} #{defaults.$table-header-selector} {
-      background: $table-cell-background;
-      color: $table-cell-color;
-    }
-
-    &#{defaults.$table-bordered-selector} {
-      border-color: $table-border-color;
-
-      #{defaults.$table-row-selector} > * {
-        border-color: $table-cell-border-color;
-      }
-    }
-
-    &#{defaults.$table-striped-columns-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}:nth-child(odd)
-        > * {
-        background: $table-striped-background;
-        color: $table-striped-color;
-      }
-    }
-
-    &#{defaults.$table-striped-rows-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}
-        > :nth-child(odd) {
-        background: $table-striped-background;
-        color: $table-striped-color;
-      }
-    }
-
-    &#{defaults.$table-hoverable-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}:hover
-        > * {
-        background: $table-hover-background;
-        color: $table-hover-color;
-      }
-    }
-
-    #{defaults.$table-highlight-selector} {
-      --#{root-defaults.$prefix}-table-cell-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-cell-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}-table-header-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-header-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}-table-striped-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-striped-color: #{$table-highlight-color};
-    }
-  }
-}

package/src/scss/base/table/_variables.scss

@@ -1,135 +0,0 @@
-// @graupl/graupl table base variables.
-//
-// These values are to be used to directly style bases and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../variables" as root-variables;
-@use "../../theme/typography/variables" as typography;
-@use "../../theme/color/variables" as color;
-@use "../../functions/theme";
-@use "sass:map";
-
-// Table caption properties.
-$table-caption-side: var(
-  --#{root-defaults.$prefix}-table-caption-side,
-  #{defaults.$table-caption-side}
-);
-$table-caption-padding-x: var(
-  --#{root-defaults.$prefix}-table-caption-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-caption-padding-y: var(
-  --#{root-defaults.$prefix}-table-caption-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-caption-padding: $table-caption-padding-y $table-caption-padding-x;
-
-// Table header properties.
-$table-header-font-weight: var(
-  --#{root-defaults.$prefix}-table-header-font-weight,
-  #{typography.$font-weight-bold}
-);
-$table-header-padding-x: var(
-  --#{root-defaults.$prefix}-table-header-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-header-padding-y: var(
-  --#{root-defaults.$prefix}-table-header-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-header-padding: $table-header-padding-y $table-header-padding-x;
-$table-header-background: var(
-  --#{root-defaults.$prefix}-table-header-background,
-  #{color.$root-background}
-);
-$table-header-color: var(
-  --#{root-defaults.$prefix}-table-header-color,
-  #{color.$root-color}
-);
-
-// Table cell properties.
-$table-cell-padding-x: var(
-  --#{root-defaults.$prefix}-table-cell-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-cell-padding-y: var(
-  --#{root-defaults.$prefix}-table-cell-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
-$table-cell-background: var(
-  --#{root-defaults.$prefix}-table-cell-background,
-  #{color.$root-background}
-);
-$table-cell-color: var(
-  --#{root-defaults.$prefix}-table-cell-color,
-  #{color.$root-color}
-);
-
-// Table border properties.
-$table-border-width: var(
-  --#{root-defaults.$prefix}-table-border-width,
-  #{root-variables.$border-width}
-);
-$table-border-style: var(
-  --#{root-defaults.$prefix}-table-border-style,
-  #{root-variables.$border-style}
-);
-$table-border: var(
-  --#{root-defaults.$prefix}-table-border,
-  #{$table-border-width} #{$table-border-style}
-);
-$table-border-color: var(
-  --#{root-defaults.$prefix}-table-border-color,
-  #{theme.get(primary, 900)}
-);
-
-// Table cell border properties.
-$table-cell-border-width: var(
-  --#{root-defaults.$prefix}-table-cell-border-width,
-  #{$table-border-width}
-);
-$table-cell-border-style: var(
-  --#{root-defaults.$prefix}-table-cell-border-style,
-  #{$table-border-style}
-);
-$table-cell-border: var(
-  --#{root-defaults.$prefix}-table-cell-border,
-  #{$table-cell-border-width} #{$table-cell-border-style}
-);
-$table-cell-border-color: var(
-  --#{root-defaults.$prefix}-table-cell-border-color,
-  #{$table-border-color}
-);
-
-// Table striped properties.
-$table-striped-background: var(
-  --#{root-defaults.$prefix}-table-striped-background,
-  #{theme.get(secondary, 200)}
-);
-$table-striped-color: var(
-  --#{root-defaults.$prefix}-table-striped-color,
-  #{theme.get(secondary, 900)}
-);
-
-// Table hover properties.
-$table-hover-background: var(
-  --#{root-defaults.$prefix}-table-hover-background,
-  #{theme.get(secondary, 300)}
-);
-$table-hover-color: var(
-  --#{root-defaults.$prefix}-table-hover-color,
-  #{theme.get(secondary, 900)}
-);
-
-// Table highlight properties.
-$table-highlight-background: var(
-  --#{root-defaults.$prefix}-table-highlight-background,
-  #{theme.get(secondary, 500)}
-);
-$table-highlight-color: var(
-  --#{root-defaults.$prefix}-table-highlight-color,
-  #{theme.get(secondary, 100)}
-);

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

@@ -1,173 +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/_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}
-);