@graupl/graupl 1.0.0-alpha.11 → 1.0.0-alpha.13

package/src/scss/theme/color/_index.scss

@@ -1,4 +1,4 @@
-// Color theme styles.
+// @gruapl/graupl color theme styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

package/src/scss/theme/color/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl color theme 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;

package/src/scss/theme/typography/_defaults.scss

@@ -1,13 +1,15 @@
-// Default values for Graupl.
+// @graupl/graupl typography theme default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 
 // font properties.
-$font-size: 1rem !default;
+$font-size-base: 1rem !default;
 $root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;
 $line-height: 1.2em !default;
 

package/src/scss/theme/typography/_index.scss

@@ -1,4 +1,4 @@
-// Typography theme styles.
+// @gruapl/graupl typography theme styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

package/src/scss/theme/typography/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl typography theme 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;
@@ -6,7 +9,10 @@
 @use "sass:map";
 
 // Font properties.
-$font-size: var(--#{root-defaults.$prefix}-font-base, #{defaults.$font-size});
+$font-size-base: var(
+  --#{root-defaults.$prefix}-font-size-base,
+  #{defaults.$font-size-base}
+);
 $line-height: var(
   --#{root-defaults.$prefix}-line-height,
   #{defaults.$line-height}
@@ -18,7 +24,7 @@ $font-sizes: ();
 @each $key, $value in defaults.$font-size-multipliers {
   $size: var(
     --#{root-defaults.$prefix}-font-#{$key},
-    calc(#{$value} * #{$font-size})
+    calc(#{$value} * #{$font-size-base})
   );
   $font-sizes: map.set($font-sizes, $key, $size);
 }

package/src/scss/utilities/_index.scss

@@ -1,4 +1,4 @@
-// Graupl utilities.
+// @gruapl/graupl utilities styles.
 
 @forward "alignment";
 @forward "color";
@@ -7,7 +7,9 @@
 @forward "inset";
 @forward "justification";
 @forward "list";
+@forward "order";
 @forward "position";
+@forward "ratio";
 @forward "spacing";
 @forward "typography";
 @forward "visibility";

package/src/scss/utilities/alignment/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl alignment utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl alignment 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/color/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl color utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl color 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/display/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl display utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl display 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/flex/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl flex utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl flex 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/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl inset utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl inset 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/justification/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl justification utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl justification 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/list/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl list utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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

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

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl list 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/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 @@
+// @gruapl/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/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl position utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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

package/src/scss/utilities/position/_variables.scss

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl position 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/ratio/_defaults.scss

@@ -0,0 +1,24 @@
+// @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;
+$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,26 @@
+// @gruapl/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;
+    }
+  }
+
+  @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/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl spacing utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

@@ -1,4 +1,4 @@
-// Graupl spacing utilities.
+// @gruapl/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 {
@@ -60,5 +77,12 @@
         }
       }
     }
+
+    // Create the "auto" utility class.
+    .#{$name}-auto {
+      @each $prop in $property {
+        #{$prop}: important.insert(auto);
+      }
+    }
   }
 }

package/src/scss/utilities/spacing/_variables.scss

@@ -1,3 +1,6 @@
-// Variables referencing custom properties.
+// @graupl/graupl spacing 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/typography/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl typography utilities default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 

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

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