@graupl/core 1.0.0-beta.19 → 1.0.0-beta.21

package/src/scss/component/disclosure/_index.scss

@@ -0,0 +1,214 @@
+// @graupl/core disclosure component base styles.
+//
+// This module provides the disclosure component styles, wiring together the
+// container, content panel, and toggle control layers.
+//
+// The disclosure component exposes CSS custom properties for display, block
+// sizing, opacity, and transitions so that the open, closed, and transitioning
+// states can be themed without rewriting the core selectors. The toggle control
+// shares the base button styles to keep interactive affordances consistent.
+//
+// The following selectors are generated by default:
+// - `.disclosure`: The disclosure root container that manages layout, overflow, and transitions.
+// - `.disclosure.hide`: A modifier that forces the disclosure container into the closed state.
+// - `.disclosure.transitioning`: A modifier that applies the transitioning state to the container.
+// - `.disclosure.show`: A modifier that forces the disclosure container into the open state.
+// - `.disclosure-content`: The disclosure content wrapper that receives padding and border styles.
+// - `.disclosure-toggle`: The disclosure toggle control that inherits the button base styles.
+//
+// The following custom properties can be used to customize the disclosure component:
+// - `--graupl-disclosure-background`: The disclosure container background colour.
+// - `--graupl-disclosure-colour`: The disclosure container text colour.
+// - `--graupl-disclosure-content-border-color`: The disclosure content border colour.
+// - `--graupl-disclosure-content-padding-x`: The horizontal padding for the disclosure content.
+// - `--graupl-disclosure-content-padding-y`: The vertical padding for the disclosure content.
+// - `--graupl-disclosure-content-padding`: The shorthand padding for the disclosure content (combines x and y padding).
+// - `--graupl-disclosure-show-display`: The display value applied when the disclosure is open.
+// - `--graupl-disclosure-hide-display`: The display value applied when the disclosure is hidden.
+// - `--graupl-disclosure-transitioning-display`: The display value applied while transitioning.
+// - `--graupl-disclosure-display`: The base display value applied to the disclosure container.
+// - `--graupl-disclosure-show-block-size`: The block-size value applied when the disclosure is open.
+// - `--graupl-disclosure-hide-block-size`: The block-size value applied when the disclosure is hidden.
+// - `--graupl-disclosure-transitioning-block-size`: The block-size value applied while transitioning.
+// - `--graupl-disclosure-block-size`: The base block-size value applied to the disclosure container.
+// - `--graupl-disclosure-show-opacity`: The opacity value applied when the disclosure is open.
+// - `--graupl-disclosure-hide-opacity`: The opacity value applied when the disclosure is hidden.
+// - `--graupl-disclosure-transitioning-opacity`: The opacity value applied while transitioning.
+// - `--graupl-disclosure-opacity`: The base opacity value applied to the disclosure container.
+// - `--graupl-disclosure-transition-duration`: The animation duration for disclosure transitions.
+// - `--graupl-disclosure-transition-timing-function`: The easing used for disclosure transitions.
+// - `--graupl-disclosure-transition`: The combined transition declaration for the disclosure container.
+// - `--graupl-disclosure-transition-reduced-motion`: The transition used when motion is reduced.
+// - `--graupl-disclosure-content-border-top-width`: The top border width for the disclosure content.
+// - `--graupl-disclosure-content-border-right-width`: The right border width for the disclosure content.
+// - `--graupl-disclosure-content-border-bottom-width`: The bottom border width for the disclosure content.
+// - `--graupl-disclosure-content-border-left-width`: The left border width for the disclosure content.
+// - `--graupl-disclosure-content-border-width`: The shorthand border width for the disclosure content (combines top, right, bottom, and left widths).
+// - `--graupl-disclosure-content-border-top-style`: The top border style for the disclosure content.
+// - `--graupl-disclosure-content-border-right-style`: The right border style for the disclosure content.
+// - `--graupl-disclosure-content-border-bottom-style`: The bottom border style for the disclosure content.
+// - `--graupl-disclosure-content-border-left-style`: The left border style for the disclosure content.
+// - `--graupl-disclosure-content-border-style`: The shorthand border style for the disclosure content (combines top, right, bottom, and left styles).
+// - `--graupl-disclosure-content-border-top-left-radius`: The top-left border radius for the content.
+// - `--graupl-disclosure-content-border-top-right-radius`: The top-right border radius for the content.
+// - `--graupl-disclosure-content-border-bottom-right-radius`: The bottom-right border radius for the content.
+// - `--graupl-disclosure-content-border-bottom-left-radius`: The bottom-left border radius for the content.
+// - `--graupl-disclosure-content-border-radius`: The shorthand border radius for the disclosure content (combines top-left, top-right, bottom-right, and top-left widths).
+// - `--graupl-disclosure-toggle-transform`: The transform applied to the toggle indicator.
+// - `--graupl-disclosure-toggle-open-transform`: The transform applied to the toggle when open.
+// - `--graupl-disclosure-toggle-content`: The string content inserted by the toggle pseudo-element.
+// - `--graupl-disclosure-toggle-transition`: The transition applied to the toggle indicator.
+// - `--graupl-disclosure-toggle-transition-reduced-motion`: The toggle transition when motion is reduced.
+//
+// The following Sass variables can be used to customize selectors and defaults:
+// - `$selector-base`: The selector base for the component.
+// - `$modifier-selector-base`: The selector base for component modifiers.
+// - `$disclosure-selector-base`: The selector base for disclosure containers.
+// - `$disclosure-selector`: The disclosure container selector.
+// - `$disclosure-content-selector-base`: The selector base for disclosure content.
+// - `$disclosure-content-selector`: The disclosure content selector.
+// - `$disclosure-toggle-selector-base`: The selector base for disclosure toggles.
+// - `$disclosure-toggle-selector`: The disclosure toggle selector.
+// - `$disclosure-open-selector-base`: The selector base applied to the open modifier.
+// - `$disclosure-open-selector`: The selector applied to the open modifier.
+// - `$disclosure-closed-selector-base`: The selector base applied to the closed modifier.
+// - `$disclosure-closed-selector`: The selector applied to the closed modifier.
+// - `$disclosure-transitioning-selector-base`: The selector base applied to the transitioning modifier.
+// - `$disclosure-transitioning-selector`: The selector applied to the transitioning modifier.
+// - `$disclosure-show-display`: The default display value for open disclosures.
+// - `$disclosure-hide-display`: The default display value for closed disclosures.
+// - `$disclosure-transitioning-display`: The default display value for transitioning disclosures.
+// - `$disclosure-show-block-size`: The default block-size value for open disclosures.
+// - `$disclosure-hide-block-size`: The default block-size value for closed disclosures.
+// - `$disclosure-transitioning-block-size`: The default block-size value for transitioning disclosures.
+// - `$disclosure-show-opacity`: The default opacity value for open disclosures.
+// - `$disclosure-hide-opacity`: The default opacity value for closed disclosures.
+// - `$disclosure-transitioning-opacity`: The default opacity value for transitioning disclosures.
+// - `$disclosure-toggle-content`: The default string inserted for the toggle indicator.
+// - `$disclosure-toggle-transform`: The default transform applied to the toggle indicator.
+// - `$disclosure-toggle-open-transform`: The transform applied to the toggle when the disclosure is open.
+//
+// @example
+// <button
+//   class="disclosure-toggle primary"
+//   type="button"
+//   aria-expanded="false"
+//   aria-controls="disclosure-example"
+//   data-graupl-disclosure-target="#disclosure-example"
+// >
+//   Toggle details
+// </button>
+// <div id="disclosure-example" class="disclosure">
+//   <div class="disclosure-content">
+//     <p>This content is hidden until the disclosure is open.</p>
+//   </div>
+// </div>
+//
+// @example
+// <button
+//   class="disclosure-toggle primary"
+//   type="button"
+//   aria-expanded="true"
+//   aria-controls="disclosure-example-open"
+//   data-graupl-disclosure-target="#disclosure-example-open"
+// >
+//   Toggle details
+// </button>
+// <div id="disclosure-example-open" class="disclosure show">
+//   <div class="disclosure-content">
+//     <p>This content is visible when the disclosure has the `.show` modifier.</p>
+//     <p><a href="#">Links and inline content</a> keep their default styling.</p>
+//   </div>
+// </div>
+
+@use "../../mixins/layer" as *;
+@use "../../mixins/animation";
+@use "../../defaults" as root-defaults;
+@use "defaults";
+@use "variables" as *;
+@use "../../base/button/mixins" as button-mixins;
+
+@include layer(component) {
+  // .disclosure
+  #{defaults.$disclosure-selector-base}#{defaults.$disclosure-selector} {
+    display: $disclosure-display;
+    block-size: $disclosure-block-size;
+    overflow: hidden;
+    transition: $disclosure-transition;
+    opacity: $disclosure-opacity;
+
+    // &.hide
+    &#{defaults.$disclosure-closed-selector-base}#{defaults.$disclosure-closed-selector} {
+      --#{root-defaults.$prefix}disclosure-display: #{$disclosure-hide-display};
+      --#{root-defaults.$prefix}disclosure-block-size: #{$disclosure-hide-block-size};
+      --#{root-defaults.$prefix}disclosure-opacity: #{$disclosure-hide-opacity};
+    }
+
+    // &.transitioning
+    &#{defaults.$disclosure-transitioning-selector-base}#{defaults.$disclosure-transitioning-selector} {
+      --#{root-defaults.$prefix}disclosure-display: #{$disclosure-transitioning-display};
+      --#{root-defaults.$prefix}disclosure-block-size: #{$disclosure-transitioning-block-size};
+      --#{root-defaults.$prefix}disclosure-opacity: #{$disclosure-transitioning-opacity};
+    }
+
+    // &.show
+    &#{defaults.$disclosure-open-selector-base}#{defaults.$disclosure-open-selector} {
+      --#{root-defaults.$prefix}disclosure-display: #{$disclosure-show-display};
+      --#{root-defaults.$prefix}disclosure-block-size: #{$disclosure-show-block-size};
+      --#{root-defaults.$prefix}disclosure-opacity: #{$disclosure-show-opacity};
+    }
+  }
+
+  // .disclosure-content
+  #{defaults.$disclosure-content-selector-base}#{defaults.$disclosure-content-selector} {
+    flex: 1 1 auto;
+    padding: $disclosure-content-padding;
+    border-width: $disclosure-content-border-width;
+    border-style: $disclosure-content-border-style;
+    border-radius: $disclosure-content-border-radius;
+  }
+
+  // .disclosure-toggle.
+  #{defaults.$disclosure-toggle-selector-base}#{defaults.$disclosure-toggle-selector} {
+    @include button-mixins.apply-base;
+
+    &::after {
+      content: $disclosure-toggle-content;
+      display: block;
+      transform: $disclosure-toggle-transform;
+      transition: $disclosure-toggle-transition;
+    }
+
+    &[aria-expanded="true"]::after {
+      --#{root-defaults.$prefix}disclosure-toggle-transform: #{$disclosure-toggle-open-transform};
+    }
+  }
+
+  @include animation.off {
+    #{defaults.$disclosure-selector-base}#{defaults.$disclosure-selector} {
+      --#{root-defaults.$prefix}disclosure-transition: #{$disclosure-transition-reduced-motion};
+    }
+
+    #{defaults.$disclosure-toggle-selector-base}#{defaults.$disclosure-toggle-selector} {
+      --#{root-defaults.$prefix}disclosure-toggle-transition: #{$disclosure-toggle-transition-reduced-motion};
+    }
+  }
+}
+
+@include layer(theme) {
+  // .disclosure
+  #{defaults.$disclosure-selector-base}#{defaults.$disclosure-selector} {
+    background: $disclosure-background;
+    color: $disclosure-color;
+  }
+
+  // .disclosure-content
+  #{defaults.$disclosure-content-selector-base}#{defaults.$disclosure-content-selector} {
+    border-color: $disclosure-content-border-color;
+  }
+
+  // .disclosure-toggle
+  #{defaults.$disclosure-toggle-selector-base}#{defaults.$disclosure-toggle-selector} {
+    @include button-mixins.apply-theme;
+  }
+}

package/src/scss/component/disclosure/_variables.scss

@@ -0,0 +1,205 @@
+// @graupl/core disclosure 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 "sass:map";
+
+// Color properties.
+$disclosure-color: var(--#{root-defaults}disclosure-colour, #{color.$color});
+$disclosure-background: var(
+  --#{root-defaults}disclosure-background,
+  #{color.$background}
+);
+$disclosure-content-border-color: var(
+  --#{root-defaults.$prefix}disclosure-content-border-color,
+  #{color.$border-color}
+);
+
+// Spacing properties.
+$disclosure-content-padding-x: var(
+  --#{root-defaults.$prefix}disclosure-content-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$disclosure-content-padding-y: var(
+  --#{root-defaults.$prefix}disclosure-content-padding-y,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$disclosure-content-padding: var(
+  --#{root-defaults.$prefix}disclosure-content-padding,
+  #{$disclosure-content-padding-y} #{$disclosure-content-padding-x}
+);
+
+// Display properties.
+$disclosure-show-display: var(
+  --#{root-defaults.$prefix}disclosure-show-display,
+  #{defaults.$disclosure-show-display}
+);
+$disclosure-hide-display: var(
+  --#{root-defaults.$prefix}disclosure-hide-display,
+  #{defaults.$disclosure-hide-display}
+);
+$disclosure-transitioning-display: var(
+  --#{root-defaults.$prefix}disclosure-transitioning-display,
+  #{defaults.$disclosure-transitioning-display}
+);
+$disclosure-display: var(
+  --#{root-defaults.$prefix}disclosure-display,
+  #{defaults.$disclosure-hide-display}
+);
+
+// Block-size properties.
+$disclosure-show-block-size: var(
+  --#{root-defaults.$prefix}disclosure-show-block-size,
+  #{defaults.$disclosure-show-block-size}
+);
+$disclosure-hide-block-size: var(
+  --#{root-defaults.$prefix}disclosure-hide-block-size,
+  #{defaults.$disclosure-hide-block-size}
+);
+$disclosure-transitioning-block-size: var(
+  --#{root-defaults.$prefix}disclosure-transitioning-block-size,
+  #{defaults.$disclosure-transitioning-block-size}
+);
+$disclosure-block-size: var(
+  --#{root-defaults.$prefix}disclosure-block-size,
+  #{defaults.$disclosure-hide-block-size}
+);
+
+// Opacity properties.
+$disclosure-show-opacity: var(
+  --#{root-defaults.$prefix}disclosure-show-opacity,
+  #{defaults.$disclosure-show-opacity}
+);
+$disclosure-hide-opacity: var(
+  --#{root-defaults.$prefix}disclosure-hide-opacity,
+  #{defaults.$disclosure-hide-opacity}
+);
+$disclosure-transitioning-opacity: var(
+  --#{root-defaults.$prefix}disclosure-transitioning-opacity,
+  #{defaults.$disclosure-transitioning-opacity}
+);
+$disclosure-opacity: var(
+  --#{root-defaults.$prefix}disclosure-opacity,
+  #{$disclosure-hide-opacity}
+);
+
+// Transition properties.
+$disclosure-transition-duration: var(
+  --#{root-defaults.$prefix}disclosure-transition-duration,
+  #{map.get(root-variables.$transition-durations, fast)}
+);
+$disclosure-transition-timing-function: var(
+  --#{root-defaults.$prefix}disclosure-transition-timing-function,
+  #{root-variables.$transition-timing-function}
+);
+$disclosure-transition: var(
+  --#{root-defaults.$prefix}disclosure-transition,
+  opacity #{$disclosure-transition-duration}
+    #{$disclosure-transition-timing-function},
+  block-size #{$disclosure-transition-duration}
+    #{$disclosure-transition-timing-function}
+);
+$disclosure-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}disclosure-transition-reduced-motion,
+  opacity #{$disclosure-transition-duration}
+    #{$disclosure-transition-timing-function}
+);
+
+// Border properties.
+$disclosure-content-border-top-width: var(
+  --#{root-defaults.$prefix}disclosure-content-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$disclosure-content-border-right-width: var(
+  --#{root-defaults.$prefix}disclosure-content-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$disclosure-content-border-bottom-width: var(
+  --#{root-defaults.$prefix}disclosure-content-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$disclosure-content-border-left-width: var(
+  --#{root-defaults.$prefix}disclosure-content-border-left-width,
+  #{root-variables.$border-left-width}
+);
+$disclosure-content-border-width: var(
+  --#{root-defaults.$prefix}disclosure-content-border-width,
+  #{$disclosure-content-border-top-width}
+    #{$disclosure-content-border-right-width}
+    #{$disclosure-content-border-bottom-width}
+    #{$disclosure-content-border-left-width}
+);
+$disclosure-content-border-top-style: var(
+  --#{root-defaults.$prefix}disclosure-content-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$disclosure-content-border-right-style: var(
+  --#{root-defaults.$prefix}disclosure-content-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$disclosure-content-border-bottom-style: var(
+  --#{root-defaults.$prefix}disclosure-content-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$disclosure-content-border-left-style: var(
+  --#{root-defaults.$prefix}disclosure-content-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$disclosure-content-border-style: var(
+  --#{root-defaults.$prefix}disclosure-content-border-style,
+  #{$disclosure-content-border-top-style}
+    #{$disclosure-content-border-right-style}
+    #{$disclosure-content-border-bottom-style}
+    #{$disclosure-content-border-left-style}
+);
+$disclosure-content-border-top-left-radius: var(
+  --#{root-defaults.$prefix}disclosure-content-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$disclosure-content-border-top-right-radius: var(
+  --#{root-defaults.$prefix}disclosure-content-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$disclosure-content-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}disclosure-content-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
+$disclosure-content-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}disclosure-content-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$disclosure-content-border-radius: var(
+  --#{root-defaults.$prefix}disclosure-content-border-radius,
+  #{$disclosure-content-border-top-left-radius}
+    #{$disclosure-content-border-top-right-radius}
+    #{$disclosure-content-border-bottom-right-radius}
+    #{$disclosure-content-border-bottom-left-radius}
+);
+
+// Disclosure toggle properties.
+$disclosure-toggle-transform: var(
+  --#{root-defaults.$prefix}disclosure-toggle-transform,
+  #{defaults.$disclosure-toggle-transform}
+);
+$disclosure-toggle-open-transform: var(
+  --#{root-defaults.$prefix}disclosure-toggle-open-transform,
+  #{defaults.$disclosure-toggle-open-transform}
+);
+$disclosure-toggle-content: var(
+  --#{root-defaults.$prefix}disclosure-toggle-content,
+  #{defaults.$disclosure-toggle-content}
+);
+$disclosure-toggle-transition: var(
+  --#{root-defaults.$prefix}disclosure-toggle-transition,
+  transform #{map.get(root-variables.$transition-durations, fast)}
+    #{root-variables.$transition-timing-function}
+);
+$disclosure-toggle-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}disclosure-toggle-transition-reduced-motion,
+  none
+);

package/src/scss/layout/_index.scss

@@ -1,5 +1,5 @@
 // @graupl/core layout styles.
 
-@forward "container";
-@forward "columns";
-@forward "flex-columns";
+@use "container";
+@use "columns";
+@use "flex-columns";

package/src/scss/theme/_index.scss

@@ -1,4 +1,4 @@
 // @graupl/core theme styles.
 
-@forward "color";
-@forward "typography";
+@use "color";
+@use "typography";

package/src/scss/utilities/_index.scss

@@ -1,23 +1,23 @@
 // @graupl/core utilities styles.
 
-@forward "alignment";
-@forward "background";
-@forward "border";
-@forward "color";
-@forward "container";
-@forward "display";
-@forward "flex";
-@forward "gradient";
-@forward "height";
-@forward "inset";
-@forward "justification";
-@forward "list";
-@forward "order";
-@forward "position";
-@forward "ratio";
-@forward "spacing";
-@forward "typography";
-@forward "visibility";
-@forward "visually-hidden";
-@forward "width";
-@forward "z-index";
+@use "alignment";
+@use "background";
+@use "border";
+@use "color";
+@use "container";
+@use "display";
+@use "flex";
+@use "gradient";
+@use "height";
+@use "inset";
+@use "justification";
+@use "list";
+@use "order";
+@use "position";
+@use "ratio";
+@use "spacing";
+@use "typography";
+@use "visibility";
+@use "visually-hidden";
+@use "width";
+@use "z-index";