@graupl/graupl 1.0.0-beta.2 → 1.0.0-beta.20

package/src/scss/component/accordion/_index.scss

@@ -1,180 +0,0 @@
-// @graupl/graupl accordion component styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../base/button/mixins" as button-mixins;
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../state/focus/variables" as focus;
-@use "sass:map";
-
-#{defaults.$accordion-selector} {
-  @include layer(component) {
-    display: flex;
-    flex-flow: column nowrap;
-    padding: $accordion-padding;
-    gap: $accordion-gap;
-
-    > #{defaults.$accordion-item-selector} {
-      &:not(:first-child) {
-        margin-top: calc(-1 * #{$accordion-item-border-width});
-      }
-    }
-  }
-
-  @include layer(theme) {
-    background: $accordion-background;
-    color: $accordion-color;
-  }
-}
-
-#{defaults.$accordion-item-selector} {
-  @include layer(component) {
-    overflow: hidden;
-    transition: $accordion-transition;
-    border: $accordion-item-border;
-    border-radius: $accordion-item-border-radius;
-    isolation: isolate;
-
-    &#{defaults.$accordion-item-close-selector}
-      #{defaults.$accordion-item-content-selector} {
-      display: none;
-    }
-
-    &#{defaults.$accordion-item-open-selector}
-      #{defaults.$accordion-item-content-selector} {
-      transform: $accordion-item-content-open-transform;
-      opacity: 1;
-    }
-
-    &#{defaults.$accordion-item-transition-selector}
-      #{defaults.$accordion-item-content-selector} {
-      display: flex;
-    }
-  }
-
-  @include layer(state) {
-    #{defaults.$accordion-item-toggle-selector} {
-      --#{root-defaults.$prefix}focus-outline-offset: calc(
-        -1 * (#{$accordion-item-border-width} + #{focus.$focus-width})
-      );
-    }
-  }
-
-  @include layer(theme) {
-    border-color: $accordion-item-border-color;
-  }
-}
-
-#{defaults.$accordion-item-toggle-selector} {
-  @include button-mixins.apply-button;
-
-  @include layer(component) {
-    z-index: 2;
-    padding: $accordion-item-toggle-padding;
-    transform: $accordion-item-toggle-transform;
-    transition: $accordion-item-toggle-transition;
-
-    @each $selector in map.get(root-defaults.$state-selectors, visited) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-visited-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, focus) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-focus-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, hover) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-hover-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, active) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-active-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-disabled-transform};
-      }
-    }
-
-    &#{defaults.$accordion-item-toggle-pseudo-selector} {
-      content: defaults.$accordion-item-toggle-pseudo-content;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-left: auto;
-      transform: $accordion-item-toggle-pseudo-transform;
-      transition: $accordion-item-toggle-pseudo-transition;
-    }
-
-    &[aria-expanded="true"] {
-      &::after {
-        transform: $accordion-item-toggle-pseudo-open-transform;
-      }
-    }
-  }
-}
-
-#{defaults.$accordion-item-header-selector} {
-  @include layer(component) {
-    margin: $accordion-item-header-margin;
-    padding: $accordion-item-header-padding;
-  }
-}
-
-#{defaults.$accordion-item-title-selector} {
-  @include layer(component) {
-    margin: $accordion-item-title-margin;
-    padding: $accordion-item-title-padding;
-
-    &,
-    #{defaults.$accordion-item-toggle-selector} {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      width: 100%;
-    }
-  }
-
-  @include layer(theme) {
-    &,
-    #{defaults.$accordion-item-toggle-selector} {
-      font-family: $accordion-title-font-family;
-      font-size: $accordion-title-font-size;
-      font-weight: $accordion-title-font-weight;
-      line-height: $accordion-title-line-height;
-    }
-  }
-}
-
-#{defaults.$accordion-item-content-selector} {
-  @include layer(component) {
-    display: flex;
-    flex-flow: column nowrap;
-    padding: $accordion-item-content-padding;
-    transform: $accordion-item-content-transform;
-    transition: $accordion-item-content-transition;
-    opacity: 0;
-    gap: $accordion-item-content-gap;
-  }
-}
-
-#{defaults.$accordion-item-body-selector} {
-  @include layer(component) {
-    padding: $accordion-item-body-padding;
-  }
-}
-
-#{defaults.$accordion-item-footer-selector} {
-  @include layer(component) {
-    padding: $accordion-item-footer-padding;
-  }
-}

package/src/scss/component/accordion/_variables.scss

@@ -1,316 +0,0 @@
-// @graupl/graupl accordion 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 "../../functions/theme";
-@use "sass:map";
-@use "../../base/button/variables" as button;
-
-// Accordion properties.
-$accordion-padding-x: var(
-  --#{root-defaults.$prefix}accordion-padding-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-padding-y: var(
-  --#{root-defaults.$prefix}accordion-padding-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-padding: var(
-  --#{root-defaults.$prefix}accordion-padding,
-  #{$accordion-padding-y} #{$accordion-padding-x}
-);
-
-// Accordion gap properties.
-$accordion-column-gap: var(
-  --#{root-defaults.$prefix}accordion-column-gap,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-row-gap: var(
-  --#{root-defaults.$prefix}accordion-row-gap,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-gap: var(
-  --#{root-defaults.$prefix}accordion-gap,
-  #{$accordion-column-gap} #{$accordion-row-gap}
-);
-
-// Accordion color properties.
-$accordion-color: var(
-  --#{root-defaults.$prefix}accordion-color,
-  #{color.$root-color}
-);
-$accordion-background: var(
-  --#{root-defaults.$prefix}accordion-background,
-  #{color.$root-background}
-);
-
-// Accordion item border properties.
-$accordion-item-border-color: var(
-  --#{root-defaults.$prefix}accordion-item-border-color,
-  #{$accordion-color}
-);
-$accordion-item-top-left-border-radius: var(
-  --#{root-defaults.$prefix}accordion-item-top-left-border-radius,
-  #{root-variables.$border-radius}
-);
-$accordion-item-top-right-border-radius: var(
-  --#{root-defaults.$prefix}accordion-item-top-right-border-radius,
-  #{root-variables.$border-radius}
-);
-$accordion-item-bottom-left-border-radius: var(
-  --#{root-defaults.$prefix}accordion-item-bottom-left-border-radius,
-  #{root-variables.$border-radius}
-);
-$accordion-item-bottom-right-border-radius: var(
-  --#{root-defaults.$prefix}accordion-item-bottom-right-border-radius,
-  #{root-variables.$border-radius}
-);
-$accordion-item-border-radius: var(
-  --#{root-defaults.$prefix}accordion-item-border-radius,
-  #{$accordion-item-top-left-border-radius}
-    #{$accordion-item-top-right-border-radius}
-    #{$accordion-item-bottom-right-border-radius}
-    #{$accordion-item-bottom-left-border-radius}
-);
-$accordion-item-border-style: var(
-  --#{root-defaults.$prefix}accordion-item-border-style,
-  #{root-variables.$border-style}
-);
-$accordion-item-border-width: var(
-  --#{root-defaults.$prefix}accordion-item-border-width,
-  #{root-variables.$border-width}
-);
-$accordion-item-border: var(
-  --#{root-defaults.$prefix}accordion-item-border,
-  #{$accordion-item-border-width} #{$accordion-item-border-style}
-);
-
-// Accordion item properties.
-$accordion-item-toggle-padding: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-padding,
-  #{button.$button-padding}
-);
-
-// Transform properties.
-$accordion-item-toggle-transform: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-transform,
-  #{defaults.$accordion-item-toggle-transform}
-);
-$accordion-item-toggle-visited-transform: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-visited-transform,
-  #{defaults.$accordion-item-toggle-visited-transform}
-);
-$accordion-item-toggle-focus-transform: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-focus-transform,
-  #{defaults.$accordion-item-toggle-focus-transform}
-);
-$accordion-item-toggle-hover-transform: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-hover-transform,
-  #{defaults.$accordion-item-toggle-hover-transform}
-);
-$accordion-item-toggle-active-transform: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-active-transform,
-  #{defaults.$accordion-item-toggle-active-transform}
-);
-$accordion-item-toggle-disabled-transform: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-disabled-transform,
-  #{defaults.$accordion-item-toggle-disabled-transform}
-);
-$accordion-item-toggle-transition: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-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}
-);
-$accordion-item-toggle-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-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}
-);
-
-// Accordion item header properties.
-$accordion-item-header-padding-x: var(
-  --#{root-defaults.$prefix}accordion-item-header-padding-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-header-padding-y: var(
-  --#{root-defaults.$prefix}accordion-item-header-padding-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-header-padding: var(
-  --#{root-defaults.$prefix}accordion-item-header-padding,
-  #{$accordion-item-header-padding-y} #{$accordion-item-header-padding-x}
-);
-$accordion-item-header-margin: var(
-  --#{root-defaults.$prefix}accordion-item-header-margin,
-  calc(-1 * #{$accordion-item-border-width})
-);
-
-// Accordion item title properties.
-$accordion-item-title-padding-x: var(
-  --#{root-defaults.$prefix}accordion-item-title-padding-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-title-padding-y: var(
-  --#{root-defaults.$prefix}accordion-item-title-padding-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-title-padding: var(
-  --#{root-defaults.$prefix}accordion-item-title-padding,
-  #{$accordion-item-title-padding-y} #{$accordion-item-title-padding-x}
-);
-$accordion-item-title-margin-x: var(
-  --#{root-defaults.$prefix}accordion-item-title-margin-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-title-margin-y: var(
-  --#{root-defaults.$prefix}accordion-item-title-margin-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-title-margin: var(
-  --#{root-defaults.$prefix}accordion-item-title-margin,
-  #{$accordion-item-title-margin-y} #{$accordion-item-title-margin-x}
-);
-$accordion-title-color: var(
-  --#{root-defaults.$prefix}accordion-title-color,
-  #{$accordion-color}
-);
-$accordion-title-font-size: var(
-  --#{root-defaults.$prefix}accordion-title-font-size,
-  #{typography.$h5-font-size}
-);
-$accordion-title-font-weight: var(
-  --#{root-defaults.$prefix}accordion-title-font-weight,
-  #{typography.$h5-font-weight}
-);
-$accordion-title-font-family: var(
-  --#{root-defaults.$prefix}accordion-title-font-family,
-  #{typography.$h5-font-family}
-);
-$accordion-title-line-height: var(
-  --#{root-defaults.$prefix}accordion-title-line-height,
-  #{typography.$h5-line-height}
-);
-
-// Accordion item content properties.
-$accordion-item-content-padding-x: var(
-  --#{root-defaults.$prefix}accordion-item-content-padding-x,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$accordion-item-content-padding-y: var(
-  --#{root-defaults.$prefix}accordion-item-content-padding-y,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$accordion-item-content-padding: var(
-  --#{root-defaults.$prefix}accordion-item-content-padding,
-  #{$accordion-item-content-padding-y} #{$accordion-item-content-padding-x}
-);
-$accordion-item-content-column-gap: var(
-  --#{root-defaults.$prefix}accordion-item-content-column-gap,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$accordion-item-content-row-gap: var(
-  --#{root-defaults.$prefix}accordion-item-content-row-gap,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-content-gap: var(
-  --#{root-defaults.$prefix}accordion-item-content-gap,
-  #{$accordion-item-content-column-gap} #{$accordion-item-content-row-gap}
-);
-
-// Accordion item body properties.
-$accordion-item-body-padding-x: var(
-  --#{root-defaults.$prefix}accordion-item-body-padding-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-body-padding-y: var(
-  --#{root-defaults.$prefix}accordion-item-body-padding-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-body-padding: var(
-  --#{root-defaults.$prefix}accordion-item-body-padding,
-  #{$accordion-item-body-padding-y} #{$accordion-item-body-padding-x}
-);
-
-// Accordion item footer properties.
-$accordion-item-footer-padding-x: var(
-  --#{root-defaults.$prefix}accordion-item-footer-padding-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-footer-padding-y: var(
-  --#{root-defaults.$prefix}accordion-item-footer-padding-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$accordion-item-footer-padding: var(
-  --#{root-defaults.$prefix}accordion-item-footer-padding,
-  #{$accordion-item-footer-padding-y} #{$accordion-item-footer-padding-x}
-);
-
-// Accordion item transition properties.
-$accordion-transition-duration: var(
-  --#{root-defaults.$prefix}accordion-transition-duration,
-  #{map.get(root-variables.$transition-durations, slow)}
-);
-$accordion-item-toggle-transition-duration: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-transition-duration,
-  #{$accordion-transition-duration}
-);
-$accordion-transition: var(
-  --#{root-defaults.$prefix}accordion-transition,
-  height #{map.get(root-variables.$transition-durations, slow)}
-    #{root-variables.$transition-timing-function}
-);
-$accordion-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}accordion-transition-reduced-motion,
-  none
-);
-$accordion-item-toggle-pseudo-transition: var(
-  --#{root-defaults.$prefix}accordion-transition,
-  transform #{map.get(root-variables.$transition-durations, slow)}
-    #{root-variables.$transition-timing-function}
-);
-$accordion-item-toggle-pseudo-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}accordion-transition-reduced-motion,
-  none
-);
-$accordion-item-content-transition: var(
-  --#{root-defaults.$prefix}accordion-transition,
-  opacity #{map.get(root-variables.$transition-durations, slow)}
-    #{root-variables.$transition-timing-function} transform
-    #{map.get(root-variables.$transition-durations, slow)}
-    #{root-variables.$transition-timing-function}
-);
-$accordion-item-content-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}accordion-transition-reduced-motion,
-  opacity #{map.get(root-variables.$transition-durations, slow)}
-    #{root-variables.$transition-timing-function}
-);
-
-// Accordion item transform properties.
-$accordion-item-content-transform: var(
-  --#{root-defaults.$prefix}accordion-item-content-transform,
-  #{defaults.$accordion-item-content-transform}
-);
-$accordion-item-content-open-transform: var(
-  --#{root-defaults.$prefix}accordion-item-content-open-transform,
-  #{defaults.$accordion-item-content-open-transform}
-);
-$accordion-item-toggle-pseudo-transform: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transform,
-  #{defaults.$accordion-item-toggle-pseudo-transform}
-);
-$accordion-item-toggle-pseudo-open-transform: var(
-  --#{root-defaults.$prefix}accordion-item-toggle-pseudo-open-transform,
-  #{defaults.$accordion-item-toggle-pseudo-open-transform}
-);

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

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

@@ -1,118 +0,0 @@
-// @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/animation";
-@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 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-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;
-  }
-}