@graupl/graupl 1.0.0-alpha.9 → 1.0.0-beta.1

package/src/scss/utilities/alignment/_index.scss

@@ -0,0 +1,75 @@
+// @graupl/graupl alignment utilities styles.
+//
+// Responsive class must be within their own loop to prevent specificity issues.
+// This keeps responsive specificity tied to screen size before property order.
+
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/utility";
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // For each align content property, create a utility class.
+  @each $name, $value in defaults.$align-content-properties {
+    @include utility.create(
+      ".#{defaults.$align-content-class-prefix}#{$name}",
+      align-content,
+      $value
+    );
+  }
+
+  // For each align items property, create a utility class.
+  @each $name, $value in defaults.$align-items-properties {
+    @include utility.create(
+      ".#{defaults.$align-items-class-prefix}#{$name}",
+      align-items,
+      $value
+    );
+  }
+
+  // For each align self property, create a utility class.
+  @each $name, $value in defaults.$align-self-properties {
+    @include utility.create(
+      ".#{defaults.$align-self-class-prefix}#{$name}",
+      align-self,
+      $value
+    );
+  }
+
+  // Generate responsive utilities.
+  @if defaults.$responsive and root-defaults.$responsive-utilities {
+    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+      // For each align content property, create a utility class.
+      @each $name, $value in defaults.$align-content-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-content-class-prefix}#{$name}",
+          align-content,
+          $value,
+          $screen-size
+        );
+      }
+
+      // For each align items property, create a utility class.
+      @each $name, $value in defaults.$align-items-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-items-class-prefix}#{$name}",
+          align-items,
+          $value,
+          $screen-size
+        );
+      }
+
+      // For each align self property, create a utility class.
+      @each $name, $value in defaults.$align-self-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-self-class-prefix}#{$name}",
+          align-self,
+          $value,
+          $screen-size
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/alignment/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl alignment utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";

package/src/scss/utilities/color/_defaults.scss

@@ -0,0 +1,35 @@
+// @graupl/graupl color utilities 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";
+
+// Background utility properties.
+$background-class-prefix: "bg-" !default;
+$base-background-properties: (
+  inherit: inherit,
+  current: currentcolor,
+  transparent: transparent,
+);
+$custom-background-properties: () !default;
+$background-properties: map.merge(
+  $base-background-properties,
+  $custom-background-properties
+);
+
+// Text utility properties.
+$text-class-prefix: "text-" !default;
+$base-text-properties: (
+  inherit: inherit,
+  current: currentcolor,
+  transparent: transparent,
+);
+$custom-text-properties: () !default;
+$text-properties: map.merge($base-text-properties, $custom-text-properties);
+
+// Responsive utility flag.
+$responsive: false !default;

package/src/scss/utilities/color/_index.scss

@@ -0,0 +1,91 @@
+// @graupl/graupl color utilities styles.
+//
+// Responsive class must be within their own loop to prevent specificity issues.
+// This keeps responsive specificity tied to screen size before property order.
+
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/utility";
+@use "../../theme/color/variables" as color;
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // For each theme colour, create a utility class for background and color.
+  @each $color, $map in map.get(color.$themes, active) {
+    @each $shade, $value in $map {
+      $name: #{$color}-#{$shade};
+
+      @include utility.create(
+        ".#{defaults.$background-class-prefix}#{$name}",
+        background,
+        $value
+      );
+      @include utility.create(
+        ".#{defaults.$text-class-prefix}#{$name}",
+        color,
+        $value
+      );
+    }
+  }
+
+  // For each background property, create a utility class.
+  @each $name, $value in defaults.$background-properties {
+    $selector: ".#{defaults.$background-class-prefix}#{$name}";
+
+    @include utility.create($selector, background, $value);
+  }
+
+  // For each text property, create a utility class.
+  @each $name, $value in defaults.$text-properties {
+    $selector: ".#{defaults.$text-class-prefix}#{$name}";
+
+    @include utility.create($selector, color, $value);
+  }
+
+  // Create responsive utilities.
+  @if defaults.$responsive and root-defaults.$responsive-utilities {
+    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+      // For each theme colour, create a utility class for background and color.
+      @each $color, $map in map.get(color.$themes, active) {
+        @each $shade, $value in $map {
+          $name: #{$color}-#{$shade};
+
+          @include utility.create(
+            ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$background-class-prefix}#{$name}",
+            background,
+            $value,
+            $screen-size
+          );
+          @include utility.create(
+            ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$text-class-prefix}#{$name}",
+            color,
+            $value,
+            $screen-size
+          );
+        }
+      }
+
+      // For each background property, create a utility class.
+      @each $name, $value in defaults.$background-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$background-class-prefix}#{$name}",
+          background,
+          $value,
+          $screen-size
+        );
+      }
+
+      // For each text property, create a utility class.
+      @each $name, $value in defaults.$text-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$text-class-prefix}#{$name}",
+          color,
+          $value,
+          $screen-size
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/color/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl color utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";

package/src/scss/utilities/display/_defaults.scss

@@ -0,0 +1,32 @@
+// @graupl/graupl display utilities 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";
+
+$display-class-prefix: "display-" !default;
+$base-display-properties: (
+  block: block,
+  inline-block: inline-block,
+  inline: inline,
+  flex: flex,
+  inline-flex: inline-flex,
+  grid: grid,
+  inline-grid: inline-grid,
+  flow-root: flow-root,
+  none: none,
+  contents: contents,
+  list-item: list-item,
+);
+$custom-display-properties: () !default;
+$display-properties: map.merge(
+  $base-display-properties,
+  $custom-display-properties
+);
+$visually-hidden-class: "visually-hidden" !default;
+$visually-hidden-focusable-class: "visually-hidden-focusable" !default;
+$responsive: true !default;

package/src/scss/utilities/display/_index.scss

@@ -0,0 +1,61 @@
+// @graupl/graupl display utilities styles.
+//
+// Responsive class must be within their own loop to prevent specificity issues.
+// This keeps responsive specificity tied to screen size before property order.
+
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/screen";
+@use "../../mixins/utility";
+@use "../../mixins/visually-hidden";
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // For each display property, create a utility class.
+  @each $name, $property in defaults.$display-properties {
+    @include utility.create(
+      ".#{defaults.$display-class-prefix}#{$name}",
+      display,
+      $property
+    );
+  }
+
+  // Visually hidden utility classes.
+  #{defaults.$visually-hidden-class} {
+    @include visually-hidden.apply;
+  }
+
+  #{defaults.$visually-hidden-focusable-class} {
+    @include visually-hidden.focusable;
+  }
+
+  // Create responsive utilities for visually hidden classes.
+  @if defaults.$responsive and root-defaults.$responsive-utilities {
+    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+      // For each display property, create a utility class.
+      @each $name, $property in defaults.$display-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$display-class-prefix}#{$name}",
+          display,
+          $property,
+          $screen-size
+        );
+      }
+
+      // Visually hidden utility classes.
+      .#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$visually-hidden-class} {
+        @include screen.up($screen-size) {
+          @include visually-hidden.apply;
+        }
+      }
+
+      .#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$visually-hidden-focusable-class} {
+        @include screen.up($screen-size) {
+          @include visually-hidden.focusable;
+        }
+      }
+    }
+  }
+}

package/src/scss/utilities/display/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl display utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";

package/src/scss/utilities/flex/_defaults.scss

@@ -0,0 +1,63 @@
+// @graupl/graupl flex utilities 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";
+
+// Flex direction properties.
+$flex-direction-class-prefix: "flex-" !default;
+$base-flex-direction-properties: (
+  row: row,
+  row-reverse: row-reverse,
+  col: column,
+  col-reverse: column-reverse,
+);
+$custom-flex-direction-properties: () !default;
+$flex-direction-properties: map.merge(
+  $base-flex-direction-properties,
+  $custom-flex-direction-properties
+);
+
+// Flex wrap properties.
+$flex-wrap-class-prefix: "flex-" !default;
+$base-flex-wrap-properties: (
+  wrap: wrap,
+  wrap-reverse: wrap-reverse,
+  nowrap: nowrap,
+);
+$custom-flex-wrap-properties: () !default;
+$flex-wrap-properties: map.merge(
+  $base-flex-wrap-properties,
+  $custom-flex-wrap-properties
+);
+
+// Flex grow properties.
+$flex-grow-class-prefix: "flex-" !default;
+$base-flex-grow-properties: (
+  grow: 1,
+  no-grow: 0,
+);
+$custom-flex-grow-properties: () !default;
+$flex-grow-properties: map.merge(
+  $base-flex-grow-properties,
+  $custom-flex-grow-properties
+);
+
+// Flex shrink properties.
+$flex-shrink-class-prefix: "flex-" !default;
+$base-flex-shrink-properties: (
+  shrink: 1,
+  no-shrink: 0,
+);
+$custom-flex-shrink-properties: () !default;
+$flex-shrink-properties: map.merge(
+  $base-flex-shrink-properties,
+  $custom-flex-shrink-properties
+);
+
+// Responsive utility flag.
+$responsive: false !default;

package/src/scss/utilities/flex/_index.scss

@@ -0,0 +1,71 @@
+// @graupl/graupl flex utilities styles.
+//
+// Responsive class must be within their own loop to prevent specificity issues.
+// This keeps responsive specificity tied to screen size before property order.
+
+@use "../../defaults" as root-defaults;
+@use "../../functions/important";
+@use "../../mixins/layer" as *;
+@use "../../mixins/utility";
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // For each flex direction property, create a utility class.
+  @each $name, $property in defaults.$flex-direction-properties {
+    @include utility.create(
+      ".#{defaults.$flex-direction-class-prefix}#{$name}",
+      flex-direction,
+      $property
+    );
+    @include utility.create(
+      ".#{defaults.$flex-wrap-class-prefix}#{$name}",
+      flex-wrap,
+      $property
+    );
+    @include utility.create(
+      ".#{defaults.$flex-grow-class-prefix}#{$name}",
+      flex-grow,
+      $property
+    );
+    @include utility.create(
+      ".#{defaults.$flex-shrink-class-prefix}#{$name}",
+      flex-shrink,
+      $property
+    );
+  }
+
+  // Create responsive utilities.
+  @if defaults.$responsive and root-defaults.$responsive-utilities {
+    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+      // For each flex direction property, create a utility class.
+      @each $name, $property in defaults.$flex-direction-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$flex-direction-class-prefix}#{$name}",
+          flex-direction,
+          $property,
+          $screen-size
+        );
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$flex-wrap-class-prefix}#{$name}",
+          flex-wrap,
+          $property,
+          $screen-size
+        );
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$flex-grow-class-prefix}#{$name}",
+          flex-grow,
+          $property,
+          $screen-size
+        );
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$flex-shrink-class-prefix}#{$name}",
+          flex-shrink,
+          $property,
+          $screen-size
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/flex/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl flex utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";

package/src/scss/utilities/height/_defaults.scss

@@ -0,0 +1,41 @@
+// @graupl/graupl height utilities 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";
+
+// Height properties.
+$height-class-prefix: "h-" !default;
+$max-height-class-prefix: "max-h-" !default;
+$min-height-class-prefix: "min-h-" !default;
+
+// Height values.
+$base-height-values: (
+  auto: auto,
+  fit-content: fit-content,
+  max-content: max-content,
+  min-content: min-content,
+  stretch: stretch,
+  0: 0,
+  full: 100%,
+  quarter: 25%,
+  half: 50%,
+  three-quarters: 75%,
+  third: calc(100% / 3),
+  two-thirds: calc(100% / 1.5),
+  half-screen: 50vh,
+  third-screen: calc(100vh / 3),
+  two-thirds-screen: calc(100vh / 1.5),
+  quarter-screen: 25vh,
+  three-quarters-screen: 75vh,
+  full-screen: 100vh,
+);
+$custom-height-values: () !default;
+$height-values: map.merge($base-height-values, $custom-height-values);
+
+// Responsive utility flag.
+$responsive: false !default;

package/src/scss/utilities/height/_index.scss

@@ -0,0 +1,98 @@
+// @graupl/graupl height utilities styles.
+//
+// Responsive class must be within their own loop to prevent specificity issues.
+// This keeps responsive specificity tied to screen size before property order.
+
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../mixins/utility";
+@use "../../variables" as root-variables;
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // For each height property, create a utility class.
+  @each $height, $value in defaults.$height-values {
+    @include utility.create(
+      ".#{defaults.$height-class-prefix}#{$height}",
+      height,
+      $value
+    );
+    @include utility.create(
+      ".#{defaults.$max-height-class-prefix}#{$height}",
+      max-height,
+      $value
+    );
+    @include utility.create(
+      ".#{defaults.$min-height-class-prefix}#{$height}",
+      min-height,
+      $value
+    );
+  }
+
+  @each $spacer, $value in root-variables.$spacers {
+    @include utility.create(
+      ".#{defaults.$height-class-prefix}#{$spacer}",
+      height,
+      $value
+    );
+    @include utility.create(
+      ".#{defaults.$max-height-class-prefix}#{$spacer}",
+      max-height,
+      $value
+    );
+    @include utility.create(
+      ".#{defaults.$min-height-class-prefix}#{$spacer}",
+      min-height,
+      $value
+    );
+  }
+
+  // Create responsive utilities.
+  @if defaults.$responsive and root-defaults.$responsive-utilities {
+    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+      @each $height, $value in defaults.$height-values {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$height-class-prefix}#{$height}",
+          height,
+          $value,
+          $screen-size
+        );
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$max-height-class-prefix}#{$height}",
+          max-height,
+          $value,
+          $screen-size
+        );
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$min-height-class-prefix}#{$height}",
+          min-height,
+          $value,
+          $screen-size
+        );
+      }
+
+      @each $spacer, $value in root-variables.$spacers {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$height-class-prefix}#{$spacer}",
+          height,
+          $value,
+          $screen-size
+        );
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$max-height-class-prefix}#{$spacer}",
+          max-height,
+          $value,
+          $screen-size
+        );
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$min-height-class-prefix}#{$spacer}",
+          min-height,
+          $value,
+          $screen-size
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/height/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl height utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";

package/src/scss/utilities/inset/_defaults.scss

@@ -0,0 +1,41 @@
+// @graupl/graupl inset utilities 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";
+
+// Inset properties.
+$base-inset-properties: (
+  inset: inset,
+  inset-x: left right,
+  inset-y: top bottom,
+  inset-start: inset-inline-start,
+  inset-end: inset-inline-end,
+  top: top,
+  right: right,
+  bottom: bottom,
+  left: left,
+);
+$custom-inset-properties: () !default;
+$inset-properties: map.merge($base-inset-properties, $custom-inset-properties);
+
+// Inset values.
+$base-inset-values: (
+  0: 0,
+  auto: auto,
+  full: 100%,
+  quarter: 25%,
+  half: 50%,
+  three-quarters: 75%,
+  third: calc(100% / 3),
+  two-thirds: calc(100% / 1.5),
+);
+$custom-inset-values: () !default;
+$inset-values: map.merge($base-inset-values, $custom-inset-values);
+
+// Responsive utility flag.
+$responsive: false !default;