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

package/packages/core/src/scss/layout/container/_variables.scss

@@ -0,0 +1,114 @@
+// @graupl/core container layout variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+
+$container-gap: var(
+  --#{root-defaults.$prefix}container-gap,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$container-content-max-width: var(
+  --#{root-defaults.$prefix}container-content-max-width,
+  #{root-variables.$content-max-width}
+);
+$container-sidebar-width: var(
+  --#{root-defaults.$prefix}container-sidebar-width,
+  #{defaults.$container-sidebar-width}
+);
+$container-breakout-max-width: var(
+  --#{root-defaults.$prefix}container-breakout-max-width,
+  calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
+);
+$container-feature-max-width: var(
+  --#{root-defaults.$prefix}container-feature-max-width,
+  calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
+);
+$container-full-width-section-min-width: var(
+  --#{root-defaults.$prefix}container-full-width-section-min-width,
+  #{$container-gap}
+);
+$container-full-width-section-max-width: var(
+  --#{root-defaults.$prefix}container-full-width-section-max-width,
+  1fr
+);
+$container-feature-section-min-width: var(
+  --#{root-defaults.$prefix}container-feature-section-min-width,
+  0rem
+);
+$container-feature-section-max-width: var(
+  --#{root-defaults.$prefix}container-feature-section-max-width,
+  calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
+);
+$container-breakout-section-min-width: var(
+  --#{root-defaults.$prefix}container-breakout-section-min-width,
+  0rem
+);
+$container-breakout-section-max-width: var(
+  --#{root-defaults.$prefix}container-breakout-section-max-width,
+  calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
+);
+/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+$container-content-section-min-width: var(
+  --#{root-defaults.$prefix}container-content-section-min-width,
+  calc(
+    100% - (#{$container-full-width-section-min-width} * 2) -
+      (#{$container-feature-section-min-width} * 2) -
+      (#{$container-breakout-section-min-width} * 2)
+  )
+);
+/* stylelint-enable  scss/operator-no-newline-after */
+$container-content-section-max-width: var(
+  --#{root-defaults.$prefix}container-content-section-max-width,
+  #{$container-content-max-width}
+);
+$container-full-width-section-width: var(
+  --#{root-defaults.$prefix}container-full-width-section-width,
+  minmax(
+    #{$container-full-width-section-min-width},
+    #{$container-full-width-section-max-width}
+  )
+);
+$container-feature-section-width: var(
+  --#{root-defaults.$prefix}container-feature-section-width,
+  minmax(
+    #{$container-feature-section-min-width},
+    #{$container-feature-section-max-width}
+  )
+);
+$container-breakout-section-width: var(
+  --#{root-defaults.$prefix}container-breakout-section-width,
+  minmax(
+    #{$container-breakout-section-min-width},
+    #{$container-breakout-section-max-width}
+  )
+);
+$container-content-section-width: var(
+  --#{root-defaults.$prefix}container-content-section-width,
+  min(
+    #{$container-content-section-min-width},
+    #{$container-content-section-max-width}
+  )
+);
+$container-sidebar-left-section-width: var(
+  --#{root-defaults.$prefix}container-sidebar-left-section-width,
+  $container-sidebar-width
+);
+$container-sidebar-right-section-width: var(
+  --#{root-defaults.$prefix}container-sidebar-right-section-width,
+  $container-sidebar-width
+);
+/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+$container-inner-content-section-width: var(
+  --#{root-defaults.$prefix}container-inner-content-section-width,
+  calc(
+    #{$container-content-section-width} -
+      #{$container-sidebar-left-section-width} -
+      #{$container-sidebar-right-section-width}
+  )
+);
+/* stylelint-enable  scss/operator-no-newline-after */

package/packages/core/src/scss/layout/flex-columns/_defaults.scss

@@ -0,0 +1,28 @@
+// @graupl/core flex columns layout 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 "../../defaults" as root-defaults;
+
+// Flex columns selectors.
+$flex-columns-selector-base: root-defaults.$component-selector-base !default;
+$flex-columns-selector: "flex-columns" !default;
+$flex-columns-column-selector-base: $flex-columns-selector-base !default;
+$flex-columns-column-selector: "col-" !default;
+$flex-columns-fill-selector-base: $flex-columns-selector-base !default;
+$flex-columns-fill-selector: "fill" !default;
+$flex-columns-screen-aware-separator: root-defaults.$screen-aware-selector-separator !default;
+$flex-columns-container-aware-separator: root-defaults.$container-aware-selector-separator !default;
+$flex-columns-screen-aware-selector-prefix: root-defaults.$screen-aware-selector-prefix !default;
+$flex-columns-container-aware-selector-prefix: root-defaults.$container-aware-selector-prefix !default;
+
+// Flex columns properties.
+$flex-columns-min-count: 1 !default;
+$flex-columns-max-count: 12 !default;
+$flex-columns-size: auto !default;
+$flex-columns-max-width: unset !default;
+$flex-columns-container-type: "inline-size" !default;

package/packages/core/src/scss/layout/flex-columns/_index.scss

@@ -0,0 +1,184 @@
+// @graupl/core flex columns layout styles.
+//
+// This module provides the layout styles for the flex columns component.
+//
+// The flex columns component is a flex container that provides a responsive grid layout for content.
+// The flex columns will adjust their sizes accordingly based on the classes applied to them.
+//
+// These are effectively bootstrap columns, but leaning more on the way flex natively works in the browser.
+// This means that columns will size themselves taking the gap between them into account.
+//
+// The following classes are generated by default:
+// - `.flex-columns`: The main flex columns component.
+// - `.col-1`: Sets the size of a column in the flex columns component to 1.
+// - `.col-2`: Sets the size of a column in the flex columns component to 2.
+// - `.col-3`: Sets the size of a column in the flex columns component to 3.
+// - `.col-4`: Sets the size of a column in the flex columns component to 4.
+// - `.col-5`: Sets the size of a column in the flex columns component to 5.
+// - `.col-6`: Sets the size of a column in the flex columns component to 6.
+// - `.col-7`: Sets the size of a column in the flex columns component to 7.
+// - `.col-8`: Sets the size of a column in the flex columns component to 8.
+// - `.col-9`: Sets the size of a column in the flex columns component to 9.
+// - `.col-10`: Sets the size of a column in the flex columns component to 10.
+// - `.col-11`: Sets the size of a column in the flex columns component to 11.
+// - `.col-12`: Sets the size of a column in the flex columns component to 12.
+// - `.fill`: A class to set a column to fill the remaining space.
+// - `.[screen-name]:col-#`: A class to set the size of a column at a specific screen size.
+// - `.[container-name]:col-#`: A class to set the size of a column at a specific container size.
+//
+// The following custom properties control the generated classes:
+// - `--graupl-flex-columns-row-gap`: The gap between the rows of the flex columns.
+// - `--graupl-flex-columns-column-gap`: The gap between the columns of the flex columns.
+// - `--graupl-flex-columns-size`: The size of a column.
+// - `--graupl-flex-columns-max-width`: The maximum width of a column.
+//
+// The following variables control the generated classes:
+// - `$flex-columns-selector-base`: The base selector for the flex columns component.
+// - `$flex-columns-selector`: The selector for the flex columns component.
+// - `$flex-columns-column-selector-base`: The base selector for the column class.
+// - `$flex-columns-column-selector`: The selector for the column class.
+// - `$flex-columns-fill-selector-base`: The base selector for the fill class.
+// - `$flex-columns-fill-selector`: The selector for the fill class.
+// - `$flex-columns-screen-aware-separator`: The separator for the screen-aware column class.
+// - `$flex-columns-container-aware-separator`: The separator for the container-aware column class.
+// - `$flex-columns-screen-aware-selector-prefix`: The prefix for the screen-aware column class.
+// - `$flex-columns-container-aware-selector-prefix`: The prefix for the container-aware column class.
+// - `$flex-columns-min-count`: The minimum number of columns used to generate `.col-#` classes.
+// - `$flex-columns-max-count`: The maximum number of columns used to generate `.col-#` classes.
+// - `$flex-columns-size`: The default size of a column.
+// - `$flex-columns-max-width`: The default maximum width of a column.
+//
+// @example
+//   <div class="flex-columns">
+//     <div class="col-3">Column 1</div>
+//     <div class="col-6">Column 2</div>
+//     <div class="col-3">Column 3</div>
+//   </div>
+//
+// @example
+//   <div class="flex-columns">
+//     <div class="col-3">Column 1</div>
+//     <div class="col-3 fill">Column 2</div>
+//     <div class="col-3">Column 3</div>
+//   </div>
+//
+// @example
+//   <div class="flex-columns">
+//     <div class="col-3 md:col-2">Column 1</div>
+//     <div class="col-6 md:col-8">Column 2</div>
+//     <div class="col-3 md:col-2">Column 3</div>
+//   </div>
+
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/screen";
+@use "../../mixins/container";
+@use "../../mixins/utility";
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(layout) {
+  // `.flex-columns`
+  #{defaults.$flex-columns-selector-base}#{defaults.$flex-columns-selector} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $flex-columns-row-gap $flex-columns-column-gap;
+    container-type: $flex-columns-container-type;
+
+    > * {
+      flex: 1 1 $flex-columns-size;
+      max-width: $flex-columns-max-width;
+    }
+
+    // `.fill`
+    #{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {
+      --#{root-defaults.$prefix}flex-columns-max-width: unset;
+    }
+  }
+
+  @for $i
+    from defaults.$flex-columns-min-count
+    through defaults.$flex-columns-max-count
+  {
+    // e.g. `.col-1` or `.col-12`
+    #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      --#{root-defaults.$prefix}flex-columns-size: calc(
+        (100% / #{defaults.$flex-columns-max-count} * #{$i}) -
+          #{$flex-columns-column-gap}
+      );
+      --#{root-defaults.$prefix}flex-columns-max-width: calc(
+        100% / #{defaults.$flex-columns-max-count} * #{$i}
+      );
+      /* stylelint-enable  scss/operator-no-newline-after */
+      container-type: $flex-columns-container-type;
+    }
+
+    @include container.trigger(force-single-column) {
+      // e.g. `.col-1` or `.col-12`
+      #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-column-selector}#{$i} {
+        --#{root-defaults.$prefix}flex-columns-size: 100%;
+        --#{root-defaults.$prefix}flex-columns-max-width: auto;
+      }
+    }
+  }
+
+  @each $screen-name in map.keys(root-defaults.$screen-sizes) {
+    @for $i
+      from defaults.$flex-columns-min-count
+      through defaults.$flex-columns-max-count
+    {
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      @include utility.create-mapped(
+        // e.g. `.md:col-1` or `.xl:col-12`
+        #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-screen-aware-selector-prefix}#{$screen-name}#{defaults.$flex-columns-screen-aware-separator}#{defaults.$flex-columns-column-selector}#{$i},
+        (
+          --#{root-defaults.$prefix}flex-columns-size: calc(
+              (100% / #{defaults.$flex-columns-max-count} * #{$i}) -
+                #{$flex-columns-column-gap}
+            ),
+          --#{root-defaults.$prefix}flex-columns-max-width: calc(
+              100% / #{defaults.$flex-columns-max-count} * #{$i}
+            )
+        ),
+        $screen: $screen-name
+      ) {
+        // `&.fill`
+        &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {
+          --#{root-defaults.$prefix}flex-columns-max-width: unset;
+        }
+      }
+      /* stylelint-enable  scss/operator-no-newline-after */
+    }
+  }
+
+  @each $container-name in map.keys(root-defaults.$container-sizes) {
+    @for $i
+      from defaults.$flex-columns-min-count
+      through defaults.$flex-columns-max-count
+    {
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      @include utility.create-mapped(
+        // e.g. `.cq:md:col-1` or `.cq:xl:col-12`
+        #{defaults.$flex-columns-column-selector-base}#{defaults.$flex-columns-container-aware-selector-prefix}#{$container-name}#{defaults.$flex-columns-container-aware-separator}#{defaults.$flex-columns-column-selector}#{$i},
+        (
+          --#{root-defaults.$prefix}flex-columns-size: calc(
+              (100% / #{defaults.$flex-columns-max-count} * #{$i}) -
+                #{$flex-columns-column-gap}
+            ),
+          --#{root-defaults.$prefix}flex-columns-max-width: calc(
+              100% / #{defaults.$flex-columns-max-count} * #{$i}
+            )
+        ),
+        $container: $container-name
+      ) {
+        // `&.fill`
+        &#{defaults.$flex-columns-fill-selector-base}#{defaults.$flex-columns-fill-selector} {
+          --#{root-defaults.$prefix}flex-columns-max-width: unset;
+        }
+      }
+      /* stylelint-enable  scss/operator-no-newline-after */
+    }
+  }
+}

package/{src → packages/core/src}/scss/layout/flex-columns/_variables.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl flex columns layout variables.
+// @graupl/core flex columns layout variables.
 //
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
@@ -24,3 +24,7 @@ $flex-columns-max-width: var(
   --#{root-defaults.$prefix}flex-columns-max-width,
   #{defaults.$flex-columns-max-width}
 );
+$flex-columns-container-type: var(
+  --#{root-defaults.$prefix}flex-columns-container-type,
+  #{defaults.$flex-columns-container-type}
+);

package/{src → packages/core/src}/scss/mixins/_animation.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl animation media query mixins.
+// @graupl/core animation media query mixins.
 
 // A media query for targeting users who have not requested reduced motion.
 @mixin on {

package/packages/core/src/scss/mixins/_container.scss

@@ -0,0 +1,80 @@
+// @graupl/core container mixins.
+//
+// A series of mixins to generate breakpoints.
+
+// @use "../defaults" as root-defaults;
+@use "../functions/container";
+@use "../defaults" as root-defaults;
+@use "sass:map";
+@use "sass:meta";
+
+// A mixin to generate a minimum container width media query.
+@mixin up($size) {
+  $container-size: container.min($size);
+
+  @container (#{$container-size} <= width) {
+    @content;
+  }
+}
+
+// A mixin to generate a maximum container width media query.
+@mixin down($size) {
+  $container-size: container.max($size);
+
+  @container (width <= #{$container-size}) {
+    @content;
+  }
+}
+
+// A mixin to generate a range of container widths media query.
+@mixin between($min, $max) {
+  $container-size: container.range($min, $max);
+  $min: map.get($container-size, "min");
+  $max: map.get($container-size, "max");
+
+  @container (#{$min} <= width <= #{$max}) {
+    @content;
+  }
+}
+
+@mixin only($size) {
+  @include between($size, $size) {
+    @content;
+  }
+}
+
+@mixin trigger($trigger) {
+  @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {
+    @error "The container size trigger \"#{$trigger}\" does not exist.";
+  }
+
+  $container-size-trigger: map.get(
+    root-defaults.$container-size-triggers,
+    $trigger
+  );
+
+  @if not map.has-key($container-size-trigger, "mixin") {
+    @error "The container size trigger \"#{$trigger}\" does not have a mixin key.";
+  }
+
+  @if not map.has-key($container-size-trigger, "args") {
+    @error "The container size trigger \"#{$trigger}\" does not have an args key.";
+  }
+
+  $mixin-name: map.get($container-size-trigger, "mixin");
+  $mixin-args: map.get($container-size-trigger, "args");
+
+  @if not meta.mixin-exists($mixin-name) {
+    @error "The mixin \"#{$mixin-name}\" does not exist.";
+  }
+
+  $mixin: meta.get-mixin($mixin-name);
+
+  @if meta.accepts-content($mixin) {
+    @include meta.apply($mixin, $mixin-args...) {
+      @content;
+    }
+  } @else {
+    @warn "The mixin \"#{$mixin-name}\" does not accept content.";
+  }
+}

package/{src → packages/core/src}/scss/mixins/_layer.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl layer mixins.
+// @graupl/core layer mixins.
 //
 // These should be used to define the layers of your components to ensure that
 // they are output in the correct order in the final compiled CSS.
@@ -6,7 +6,11 @@
 @use "../defaults" as root-defaults;
 
 @mixin layer($layer) {
-  @layer #{root-defaults.$prefix}.#{$layer} {
+  @if root-defaults.$use-layers {
+    @layer #{root-defaults.$id}.#{$layer} {
+      @content;
+    }
+  } @else {
     @content;
   }
 }

package/{src → packages/core/src}/scss/mixins/_screen.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl screen mixins.
+// @graupl/core screen mixins.
 //
 // A series of mixins to generate breakpoints.
 
@@ -6,7 +6,6 @@
 @use "../functions/screen";
 @use "../defaults" as root-defaults;
 @use "sass:map";
-@use "sass:list";
 @use "sass:meta";
 
 // A mixin to generate a minimum screen width media query.
@@ -45,12 +44,34 @@
 }
 
 @mixin trigger($trigger) {
+  @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {
+    @error "The screen size trigger \"#{$trigger}\" does not exist.";
+  }
+
   $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);
+
+  @if not map.has-key($screen-size-trigger, "mixin") {
+    @error "The screen size trigger \"#{$trigger}\" does not have a mixin key.";
+  }
+
+  @if not map.has-key($screen-size-trigger, "args") {
+    @error "The screen size trigger \"#{$trigger}\" does not have an args key.";
+  }
+
   $mixin-name: map.get($screen-size-trigger, "mixin");
   $mixin-args: map.get($screen-size-trigger, "args");
+
+  @if not meta.mixin-exists($mixin-name) {
+    @error "The mixin \"#{$mixin-name}\" does not exist.";
+  }
+
   $mixin: meta.get-mixin($mixin-name);
 
-  @include meta.apply($mixin, $mixin-args...) {
-    @content;
+  @if meta.accepts-content($mixin) {
+    @include meta.apply($mixin, $mixin-args...) {
+      @content;
+    }
+  } @else {
+    @warn "The mixin \"#{$mixin-name}\" does not accept content.";
   }
 }

package/packages/core/src/scss/mixins/_state.scss

@@ -0,0 +1,18 @@
+// @graupl/core state mixins.
+//
+// A series of mixins to tie styles to a state.
+
+@use "../defaults" as root-defaults;
+@use "sass:map";
+
+/// Applies styles to a specific state.
+///
+/// @param {string} $state
+///   The name of the state to apply the styles to.
+@mixin state($state) {
+  @each $selector in map.get(root-defaults.$state-selectors, $state) {
+    &#{$selector} {
+      @content;
+    }
+  }
+}

package/packages/core/src/scss/mixins/_theme.scss

@@ -0,0 +1,15 @@
+// @graupl/core theme mixins.
+//
+// A series of mixins to tie styles to a theme-mode.
+
+@use "../theme/color/defaults" as color-defaults;
+
+/// Applies styles to a specific theme mode.
+///
+/// @param {string} $theme-name
+///   The name of the theme mode to apply the styles to.
+@mixin theme($theme-name) {
+  #{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {
+    @content;
+  }
+}