@graupl/graupl 1.0.0-alpha.12 → 1.0.0-alpha.14

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

@@ -0,0 +1,23 @@
+// @graupl/graupl height utilities styles.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each height property, create a utility class.
+  @each $height, $value in defaults.$height-values {
+    .#{defaults.$height-class-prefix}#{$height} {
+      height: important.insert($value);
+    }
+
+    .#{defaults.$max-height-class-prefix}#{$height} {
+      max-height: important.insert($value);
+    }
+
+    .#{defaults.$min-height-class-prefix}#{$height} {
+      min-height: important.insert($value);
+    }
+  }
+}

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.
+
+@forward "defaults";

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

@@ -1,4 +1,4 @@
-// @gruapl/graupl inset utilities styles.
+// @graupl/graupl inset utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

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

@@ -1,4 +1,4 @@
-// @gruapl/graupl justification utilities styles.
+// @graupl/graupl justification utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

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

@@ -1,4 +1,4 @@
-// @gruapl/graupl list utilities styles.
+// @graupl/graupl list utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/order/_defaults.scss

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

package/src/scss/utilities/order/_index.scss

@@ -0,0 +1,35 @@
+// @graupl/graupl order utilities styles.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../layout/columns/defaults" as columns-defaults;
+@use "../../layout/flex-columns/defaults" as flex-columns-defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  @each $order-property, $order-value in $order-properties {
+    .#{$order-class-prefix}#{$order-property} {
+      order: $order-value;
+    }
+  }
+
+  $order-max-count: 0;
+
+  /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+  @if (
+    columns-defaults.$columns-max-count >
+      flex-columns-defaults.$flex-columns-max-count
+  ) {
+    $order-max-count: columns-defaults.$columns-max-count;
+  } @else {
+    $order-max-count: flex-columns-defaults.$flex-columns-max-count;
+  }
+  /* stylelint-enable  scss/operator-no-newline-after */
+
+  @for $i from 1 through $order-max-count {
+    .#{$order-class-prefix}#{$i} {
+      order: $i;
+    }
+  }
+}

package/src/scss/utilities/order/_variables.scss

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

package/src/scss/utilities/position/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl position utilities styles.
+// @graupl/graupl position utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/ratio/_defaults.scss

@@ -0,0 +1,25 @@
+// @graupl/graupl ratio 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";
+
+// Ratio utilities.
+$ratio-selector: ".ratio" !default;
+$ratio-variant-selector-prefix: "." !default;
+$force-ratio-selector: ".force-ratio" !default;
+$base-ratios: (
+  "one-by-one": 100%,
+  "two-by-one": 50%,
+  "four-by-three": 75%,
+  "four-by-one": 25%,
+  "sixteen-by-nine": calc(9 / 16 * 100%),
+  "three-by-two": calc(2 / 3 * 100%),
+  "eight-by-five": calc(5 / 8 * 100%),
+);
+$custom-ratios: () !default;
+$ratios: map.merge($base-ratios, $custom-ratios);

package/src/scss/utilities/ratio/_index.scss

@@ -0,0 +1,34 @@
+// @graupl/graupl ratio utilities styles.
+
+@use "variables" as *;
+@use "defaults" as defaults;
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  #{defaults.$ratio-selector} {
+    position: relative;
+    width: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      padding-top: $ratio;
+    }
+
+    #{defaults.$force-ratio-selector} {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  @each $ratio-selector, $value in defaults.$ratios {
+    #{defaults.$ratio-variant-selector-prefix}#{$ratio-selector} {
+      --#{root-defaults.$prefix}-ratio: #{$value};
+    }
+  }
+}

package/src/scss/utilities/ratio/_variables.scss

@@ -0,0 +1,9 @@
+// @graupl/graupl ratio utilities 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;
+
+$ratio: var(--#{root-defaults.$prefix}-ratio);

package/src/scss/utilities/spacing/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl spacing utilities styles.
+// @graupl/graupl spacing utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;
@@ -6,16 +6,18 @@
 @use "../../functions/important";
 @use "../../variables" as root-variables;
 @use "../../defaults" as root-defaults;
+@use "../../layout/columns/defaults" as columns-defaults;
+@use "../../layout/flex-columns/defaults" as flex-columns-defaults;
 
 @include layer(utilities) {
   // For each spacing property, create a utility class.
   @each $name, $property in defaults.$spacing-properties {
     @each $key, $value in root-variables.$spacers {
       .#{$name}-#{$key} {
-        // If we're dealing with gap, column-gap, or row-gap inside of .columns, we should update
+        // If we're dealing with gap, column-gap, or row-gap inside of #{columns-defaults.$columns-selector}, we should update
         // the columns-column-gap property instead of the raw property.
         @if $name == "g" {
-          &.columns {
+          &#{columns-defaults.$columns-selector} {
             --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
                 $value
               )};
@@ -24,34 +26,49 @@
               )};
           }
 
-          &:not(.columns) {
-            @each $prop in $property {
-              #{$prop}: important.insert($value);
-            }
+          &#{flex-columns-defaults.$flex-columns-selector} {
+            --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+                $value
+              )};
+            --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          @each $prop in $property {
+            #{$prop}: important.insert($value);
           }
         } @else if $name == "cg" {
-          &.columns {
+          &#{columns-defaults.$columns-selector} {
             --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
                 $value
               )};
           }
 
-          &:not(.columns) {
-            @each $prop in $property {
-              #{$prop}: important.insert($value);
-            }
+          &#{flex-columns-defaults.$flex-columns-selector} {
+            --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          @each $prop in $property {
+            #{$prop}: important.insert($value);
           }
         } @else if $name == "rg" {
-          &.columns {
+          &#{columns-defaults.$columns-selector} {
             --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
                 $value
               )};
           }
 
-          &:not(.columns) {
-            @each $prop in $property {
-              #{$prop}: important.insert($value);
-            }
+          &#{flex-columns-defaults.$flex-columns-selector} {
+            --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+                $value
+              )};
+          }
+
+          @each $prop in $property {
+            #{$prop}: important.insert($value);
           }
         } @else {
           @each $prop in $property {

package/src/scss/utilities/typography/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl typography utilities styles.
+// @graupl/graupl typography utilities styles.
 
 @use "variables" as *;
 @use "defaults";

package/src/scss/utilities/visibility/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl visibility utilities styles.
+// @graupl/graupl visibility utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/width/_defaults.scss

@@ -0,0 +1,38 @@
+// @graupl/graupl width 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";
+
+// Width properties.
+$width-class-prefix: "w-" !default;
+$max-width-class-prefix: "max-w-" !default;
+$min-width-class-prefix: "min-w-" !default;
+
+// Width values.
+$base-width-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: 50vw,
+  third-screen: calc(100vw / 3),
+  two-thirds-screen: calc(100vw / 1.5),
+  quarter-screen: 25vw,
+  three-quarters-screen: 75vw,
+  full-screen: 100vw,
+);
+$custom-width-values: () !default;
+$width-values: map.merge($base-width-values, $custom-width-values);

package/src/scss/utilities/width/_index.scss

@@ -0,0 +1,23 @@
+// @graupl/graupl width utilities styles.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each width property, create a utility class.
+  @each $width, $value in defaults.$width-values {
+    .#{defaults.$width-class-prefix}#{$width} {
+      width: important.insert($value);
+    }
+
+    .#{defaults.$max-width-class-prefix}#{$width} {
+      max-width: important.insert($value);
+    }
+
+    .#{defaults.$min-width-class-prefix}#{$width} {
+      min-width: important.insert($value);
+    }
+  }
+}

package/src/scss/utilities/width/_variables.scss

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

package/stylelint.config.js

@@ -9,6 +9,7 @@ const config = {
     "prettier/prettier": true,
     "scss/comment-no-empty": null,
     "selector-max-compound-selectors": 4,
+    "max-nesting-depth": 4,
     "selector-no-qualifying-type": null,
   },
 };