@graupl/core 1.0.0-beta.10

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

@@ -0,0 +1,198 @@
+// @graupl/core 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";
+
+@include layer(base) {
+  #{defaults.$accordion-item-toggle-selector} {
+    @include button-mixins.apply-base;
+  }
+}
+
+@include layer(component) {
+  #{defaults.$accordion-selector} {
+    display: flex;
+    flex-flow: column nowrap;
+    padding: $accordion-padding;
+    gap: $accordion-gap;
+
+    > #{defaults.$accordion-item-selector} {
+      &:not(:first-child) {
+        /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+        margin-top: calc(
+          -1 *
+            min(
+              #{$accordion-item-border-top-width},
+              #{$accordion-item-border-bottom-width}
+            )
+        );
+        /* stylelint-enable  scss/operator-no-newline-after */
+      }
+    }
+  }
+
+  #{defaults.$accordion-item-selector} {
+    overflow: hidden;
+    transition: $accordion-transition;
+    border-width: $accordion-item-border-width;
+    border-style: $accordion-item-border-style;
+    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;
+    }
+  }
+
+  #{defaults.$accordion-item-toggle-selector} {
+    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} {
+    margin: $accordion-item-header-margin;
+    padding: $accordion-item-header-padding;
+  }
+
+  #{defaults.$accordion-item-title-selector} {
+    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%;
+    }
+  }
+
+  #{defaults.$accordion-item-content-selector} {
+    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} {
+    padding: $accordion-item-body-padding;
+  }
+
+  #{defaults.$accordion-item-footer-selector} {
+    padding: $accordion-item-footer-padding;
+  }
+}
+
+@include layer(state) {
+  #{defaults.$accordion-item-selector} {
+    #{defaults.$accordion-item-toggle-selector} {
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      --#{root-defaults.$prefix}focus-outline-offset: calc(
+        -1 *
+          (
+            min(
+                #{$accordion-item-border-top-width},
+                #{$accordion-item-border-bottom-width},
+                #{$accordion-item-border-left-width},
+                #{$accordion-item-border-right-width}
+              ) +
+              #{focus.$focus-width}
+          )
+      );
+      /* stylelint-enable  scss/operator-no-newline-after */
+    }
+  }
+}
+
+@include layer(theme) {
+  #{defaults.$accordion-selector} {
+    background: $accordion-background;
+    color: $accordion-color;
+  }
+
+  #{defaults.$accordion-item-selector} {
+    border-color: $accordion-item-border-color;
+  }
+
+  #{defaults.$accordion-item-toggle-selector} {
+    @include button-mixins.apply-theme;
+  }
+
+  #{defaults.$accordion-item-title-selector} {
+    &,
+    #{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;
+    }
+  }
+}

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

@@ -0,0 +1,356 @@
+// @graupl/core 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.$color}
+);
+$accordion-background: var(
+  --#{root-defaults.$prefix}accordion-background,
+  #{color.$background}
+);
+
+// Accordion item border properties.
+$accordion-item-border-color: var(
+  --#{root-defaults.$prefix}accordion-item-border-color,
+  #{$accordion-color}
+);
+$accordion-item-border-top-left-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$accordion-item-border-top-right-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$accordion-item-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$accordion-item-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
+$accordion-item-border-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-radius,
+  #{$accordion-item-border-top-left-radius}
+    #{$accordion-item-border-top-right-radius}
+    #{$accordion-item-border-bottom-right-radius}
+    #{$accordion-item-border-bottom-left-radius}
+);
+$accordion-item-border-top-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$accordion-item-border-right-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$accordion-item-border-bottom-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$accordion-item-border-left-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-left-width,
+  #{root-variables.$border-left-width}
+);
+$accordion-item-border-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-width,
+  #{$accordion-item-border-top-width} #{$accordion-item-border-right-width}
+    #{$accordion-item-border-bottom-width} #{$accordion-item-border-left-width}
+);
+$accordion-item-border-top-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$accordion-item-border-right-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$accordion-item-border-bottom-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$accordion-item-border-left-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$accordion-item-border-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-style,
+  #{$accordion-item-border-top-style} #{$accordion-item-border-right-style}
+    #{$accordion-item-border-bottom-style} #{$accordion-item-border-left-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}
+);
+/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+$accordion-item-header-margin: var(
+  --#{root-defaults.$prefix}accordion-item-header-margin,
+  calc(
+    -1 *
+      min(
+        #{$accordion-item-border-top-width},
+        #{$accordion-item-border-bottom-width},
+        #{$accordion-item-border-left-width},
+        #{$accordion-item-border-right-width}
+      )
+  )
+);
+/* stylelint-enable  scss/operator-no-newline-after */
+
+// 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

@@ -0,0 +1,49 @@
+// @graupl/core 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
+);