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

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;

package/src/scss/utilities/inset/_index.scss

@@ -0,0 +1,37 @@
+// @graupl/graupl inset 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 inset property, create a utility class.
+  @each $type, $property in defaults.$inset-properties {
+    @each $name, $value in defaults.$inset-values {
+      @include utility.create(".#{$type}-#{$name}", $property, $value);
+    }
+  }
+
+  @if defaults.$responsive and root-defaults.$responsive-utilities {
+    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+      // For each inset property, create a utility class.
+      @each $type, $property in defaults.$inset-properties {
+        @each $name, $value in defaults.$inset-values {
+          @include utility.create(
+            ".#{$screen-size}#{root-defaults.$responsive-separator}#{$type}-#{$name}",
+            $property,
+            $value,
+            $screen-size
+          );
+        }
+      }
+    }
+  }
+}

package/src/scss/utilities/inset/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl inset 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/justification/_defaults.scss

@@ -0,0 +1,59 @@
+// @graupl/graupl justification 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";
+
+// Justify content properties.
+$justify-content-class-prefix: "justify-content-" !default;
+$base-justify-content-properties: (
+  normal: normal,
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+  stretch: stretch,
+);
+$custom-justify-content-properties: () !default;
+$justify-content-properties: map.merge(
+  $base-justify-content-properties,
+  $custom-justify-content-properties
+);
+
+// Justify items properties.
+$justify-items-class-prefix: "justify-items-" !default;
+$base-justify-items-properties: (
+  start: start,
+  end: end,
+  center: center,
+  stretch: stretch,
+);
+$custom-justify-items-properties: () !default;
+$justify-items-properties: map.merge(
+  $base-justify-items-properties,
+  $custom-justify-items-properties
+);
+
+// Justify self properties.
+$justify-self-class-prefix: "justify-self-" !default;
+$base-justify-self-properties: (
+  auto: auto,
+  start: start,
+  end: end,
+  center: center,
+  stretch: stretch,
+);
+$custom-justify-self-properties: () !default;
+$justify-self-properties: map.merge(
+  $base-justify-self-properties,
+  $custom-justify-self-properties
+);
+
+// Responsive utility flag.
+$responsive: false !default;

package/src/scss/utilities/justification/_index.scss

@@ -0,0 +1,75 @@
+// @graupl/graupl justification 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 justify content property, create a utility class.
+  @each $name, $value in defaults.$justify-content-properties {
+    @include utility.create(
+      ".#{defaults.$justify-content-class-prefix}#{$name}",
+      justify-content,
+      $value
+    );
+  }
+
+  // For each justify items property, create a utility class.
+  @each $name, $value in defaults.$justify-items-properties {
+    @include utility.create(
+      ".#{defaults.$justify-items-class-prefix}#{$name}",
+      justify-items,
+      $value
+    );
+  }
+
+  // For each justify self property, create a utility class.
+  @each $name, $value in defaults.$justify-self-properties {
+    @include utility.create(
+      ".#{defaults.$justify-self-class-prefix}#{$name}",
+      justify-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 justify content property, create a utility class.
+      @each $name, $value in defaults.$justify-content-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$justify-content-class-prefix}#{$name}",
+          justify-content,
+          $value,
+          $screen-size
+        );
+      }
+
+      // For each justify items property, create a utility class.
+      @each $name, $value in defaults.$justify-items-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$justify-items-class-prefix}#{$name}",
+          justify-items,
+          $value,
+          $screen-size
+        );
+      }
+
+      // For each justify self property, create a utility class.
+      @each $name, $value in defaults.$justify-self-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$justify-self-class-prefix}#{$name}",
+          justify-self,
+          $value,
+          $screen-size
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/justification/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl justification 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/list/_defaults.scss

@@ -0,0 +1,39 @@
+// @graupl/graupl list 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";
+
+// List style type properties.
+$list-style-type-class-prefix: "list-style-" !default;
+$base-list-style-type-properties: (
+  none: none,
+  disc: disc,
+  decimal: decimal,
+  circle: circle,
+  square: square,
+);
+$custom-list-style-type-properties: () !default;
+$list-style-type-properties: map.merge(
+  $base-list-style-type-properties,
+  $custom-list-style-type-properties
+);
+
+// List style position properties.
+$list-style-position-class-prefix: "list-style-" !default;
+$base-list-style-position-properties: (
+  inside: inside,
+  outside: outside,
+);
+$custom-list-style-position-properties: () !default;
+$list-style-position-properties: map.merge(
+  $base-list-style-position-properties,
+  $custom-list-style-position-properties
+);
+
+// Responsive utility flag.
+$responsive: false !default;

package/src/scss/utilities/list/_index.scss

@@ -0,0 +1,56 @@
+// @graupl/graupl list 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 list style type property, create a utility class.
+  @each $name, $property in defaults.$list-style-type-properties {
+    @include utility.create(
+      ".#{defaults.$list-style-type-class-prefix}#{$name}",
+      list-style-type,
+      $property
+    );
+  }
+
+  // For each list style position property, create a utility class.
+  @each $name, $property in defaults.$list-style-position-properties {
+    @include utility.create(
+      ".#{defaults.$list-style-position-class-prefix}#{$name}",
+      list-style-position,
+      $property
+    );
+  }
+
+  // Generate responsive utilities.
+  @if defaults.$responsive and root-defaults.$responsive-utilities {
+    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+      // For each list style type property, create a utility class.
+      @each $name, $property in defaults.$list-style-type-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$list-style-type-class-prefix}#{$name}",
+          list-style-type,
+          $property,
+          $screen-size
+        );
+      }
+
+      // For each list style position property, create a utility class.
+      @each $name, $property in defaults.$list-style-position-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$list-style-position-class-prefix}#{$name}",
+          list-style-position,
+          $property,
+          $screen-size
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/list/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl list 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/order/_defaults.scss

@@ -0,0 +1,22 @@
+// @graupl/graupl order 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";
+
+// Order properties.
+$order-class-prefix: "order-" !default;
+$base-order-properties: (
+  "none": 0,
+  "first": -9999,
+  "last": 9999,
+);
+$custom-order-properties: () !default;
+$order-properties: map.merge($base-order-properties, $custom-order-properties);
+
+// Responsive utility flag.
+$responsive: true !default;