@graupl/core 1.0.0-beta.15 → 1.0.0-beta.17

package/src/scss/utilities/list/_defaults.scss

@@ -12,6 +12,7 @@
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: false !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -27,7 +28,7 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 
 // List style type properties.
 $list-style-type-selector-prefix: "list-style-" !default;
-$base-list-style-type-properties: (
+$-list-style-type-properties: (
   none: none,
   disc: disc,
   decimal: decimal,
@@ -35,19 +36,45 @@ $base-list-style-type-properties: (
   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-type-properties: () !default;
+
+// @todo remove this once $custom-list-style-type-properties is removed
+@if $custom-list-style-type-properties != () {
+  @warn "`$custom-list-style-type-properties` is deprecated and will be removed in a future release of Graupl. Use `$list-style-type-properties` instead.";
+
+  $list-style-type-properties: map.merge(
+    $list-style-type-properties,
+    $custom-list-style-type-properties
+  );
+}
 
 // List style position properties.
 $list-style-position-selector-prefix: "list-style-" !default;
-$base-list-style-position-properties: (
+$-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
-);
+$list-style-position-properties: () !default;
+
+// @todo remove this once $custom-list-style-position-properties is removed
+@if $custom-list-style-position-properties != () {
+  @warn "`$custom-list-style-position-properties` is deprecated and will be removed in a future release of Graupl. Use `$list-style-position-properties` instead.";
+
+  $list-style-position-properties: map.merge(
+    $list-style-position-properties,
+    $custom-list-style-position-properties
+  );
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $list-style-type-properties: map.merge(
+    $-list-style-type-properties,
+    $list-style-type-properties
+  );
+  $list-style-position-properties: map.merge(
+    $-list-style-position-properties,
+    $list-style-position-properties
+  );
+}

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

@@ -17,6 +17,7 @@
 // The following variables control the generated classes:
 // - `$selector-base`: The base selector for the utility classes.
 // - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
+// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
 // - `$screen-aware`: A flag to generate screen-aware utility classes.
 // - `$theme-aware`: A flag to generate theme-aware utility classes.
 // - `$state-aware`: A flag to generate state-aware utility classes.
@@ -30,12 +31,10 @@
 // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
 // - `$list-style-type-selector-prefix`: The prefix for the list-style-type utility classes.
-// - `$base-list-style-type-properties`: The base properties and values for the list-style-type utility classes.
-// - `$custom-list-style-type-properties`: The custom properties and values for list-style-type.
+// - `$custom-list-style-type-properties`: [DEPRECATED] The custom properties and values for list-style-type.
 // - `$list-style-type-properties`: The combined properties and values for list-style-type.
 // - `$list-style-position-selector-prefix`: The prefix for the list-style-position utility classes.
-// - `$base-list-style-position-properties`: The base properties and values for the list-style-position utility classes.
-// - `$custom-list-style-position-properties`: The custom properties and values for list-style-position.
+// - `$custom-list-style-position-properties`: [DEPRECATED] The custom properties and values for list-style-position.
 // - `$list-style-position-properties`: The combined properties and values for list-style-position.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.

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

@@ -7,11 +7,15 @@
 // Those should be defined as custom properties in the `_variables.scss` file.
 
 @use "../../defaults" as root-defaults;
+@use "../../layout/columns/defaults" as columns-defaults;
+@use "../../layout/flex-columns/defaults" as flex-columns-defaults;
 @use "sass:map";
+@use "sass:math";
 
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: true !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -26,11 +30,38 @@ $state-aware-selector-prefix: root-defaults.$utility-state-aware-selector-prefix
 $container-aware-selector-prefix: root-defaults.$utility-container-aware-selector-prefix !default;
 
 // Order properties.
+$order-max-count: math.max(
+  columns-defaults.$columns-max-count,
+  flex-columns-defaults.$flex-columns-max-count
+) !default;
 $order-selector-prefix: "order-" !default;
-$base-order-properties: (
+$-order-properties: (
   "none": 0,
   "first": -9999,
   "last": 9999,
 );
+
+// Add the count values to the base order properties.
+@for $i from 1 through $order-max-count {
+  $-order-properties: map.merge(
+    $-order-properties,
+    (
+      math.abs($i): $i,
+    )
+  );
+}
+
 $custom-order-properties: () !default;
-$order-properties: map.merge($base-order-properties, $custom-order-properties);
+$order-properties: () !default;
+
+// @todo remove this once $custom-order-properties is removed
+@if $custom-order-properties != () {
+  @warn "`$custom-order-properties` is deprecated and will be removed in a future release of Graupl. Use `$order-properties` instead.";
+
+  $order-properties: map.merge($order-properties, $custom-order-properties);
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $order-properties: map.merge($-order-properties, $order-properties);
+}

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

@@ -25,6 +25,7 @@
 // The following variables control the generated classes:
 // - `$selector-base`: The base selector for the utility classes.
 // - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
+// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
 // - `$screen-aware`: A flag to generate screen-aware utility classes.
 // - `$theme-aware`: A flag to generate theme-aware utility classes.
 // - `$state-aware`: A flag to generate state-aware utility classes.
@@ -38,8 +39,7 @@
 // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
 // - `$order-selector-prefix`: The prefix for the order utility classes.
-// - `$base-order-properties`: The base properties and values for the order utility classes.
-// - `$custom-order-properties`: The custom properties and values for the order utility classes.
+// - `$custom-order-properties`: [DEPRECATED] The custom properties and values for the order utility classes.
 // - `$order-properties`: The combined properties and values for the order utility classes.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
@@ -83,18 +83,6 @@
 
 @include layer(utilities) {
   $selector-prefix: defaults.$selector-base;
-  $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 */
 
   @each $property, $value in defaults.$order-properties {
     $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$property};
@@ -107,16 +95,16 @@
     );
   }
 
-  @for $i from 1 through $order-max-count {
-    $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
+  // @for $i from 1 through defaults.$order-max-count {
+  //   $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
 
-    @include utility.create(
-      $selector,
-      order,
-      $i,
-      $important: defaults.$use-important
-    );
-  }
+  //   @include utility.create(
+  //     $selector,
+  //     order,
+  //     $i,
+  //     $important: defaults.$use-important
+  //   );
+  // }
 
   // Generate screen-aware utilities.
   @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
@@ -135,17 +123,17 @@
         );
       }
 
-      @for $i from 1 through $order-max-count {
-        $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
-
-        @include utility.create(
-          $selector,
-          order,
-          $i,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-      }
+      // @for $i from 1 through defaults.$order-max-count {
+      //   $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
+
+      //   @include utility.create(
+      //     $selector,
+      //     order,
+      //     $i,
+      //     $important: defaults.$use-important,
+      //     $screen: $screen-name
+      //   );
+      // }
     }
   }
 
@@ -167,17 +155,17 @@
           );
         }
 
-        @for $i from 1 through $order-max-count {
-          $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
-
-          @include utility.create(
-            $selector,
-            order,
-            $i,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-        }
+        // @for $i from 1 through defaults.$order-max-count {
+        //   $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
+
+        //   @include utility.create(
+        //     $selector,
+        //     order,
+        //     $i,
+        //     $important: defaults.$use-important,
+        //     $theme: $theme-name
+        //   );
+        // }
       }
     }
   }
@@ -199,17 +187,17 @@
         );
       }
 
-      @for $i from 1 through $order-max-count {
-        $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
-
-        @include utility.create(
-          $selector,
-          order,
-          $i,
-          $important: defaults.$use-important,
-          $state: $state-name
-        );
-      }
+      // @for $i from 1 through defaults.$order-max-count {
+      //   $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
+
+      //   @include utility.create(
+      //     $selector,
+      //     order,
+      //     $i,
+      //     $important: defaults.$use-important,
+      //     $state: $state-name
+      //   );
+      // }
     }
   }
 
@@ -230,17 +218,17 @@
         );
       }
 
-      @for $i from 1 through $order-max-count {
-        $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
-
-        @include utility.create(
-          $selector,
-          order,
-          $i,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-      }
+      // @for $i from 1 through defaults.$order-max-count {
+      //   $selector: #{$selector-prefix}#{defaults.$order-selector-prefix}#{$i};
+
+      //   @include utility.create(
+      //     $selector,
+      //     order,
+      //     $i,
+      //     $important: defaults.$use-important,
+      //     $container: $container-name
+      //   );
+      // }
     }
   }
 }

package/src/scss/utilities/position/_defaults.scss

@@ -12,6 +12,7 @@
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: true !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -27,7 +28,7 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 
 // Position properties.
 $position-selector-prefix: "position-" !default;
-$base-position-properties: (
+$-position-properties: (
   static: static,
   fixed: fixed,
   absolute: absolute,
@@ -35,7 +36,19 @@ $base-position-properties: (
   sticky: sticky,
 );
 $custom-position-properties: () !default;
-$position-properties: map.merge(
-  $base-position-properties,
-  $custom-position-properties
-);
+$position-properties: () !default;
+
+// @todo remove this once $custom-position-properties is removed
+@if $custom-position-properties != () {
+  @warn "`$custom-position-properties` is deprecated and will be removed in a future release of Graupl. Use `$position-properties` instead.";
+
+  $position-properties: map.merge(
+    $position-properties,
+    $custom-position-properties
+  );
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $position-properties: map.merge($-position-properties, $position-properties);
+}

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

@@ -15,6 +15,7 @@
 // The following variables control the generated classes:
 // - `$selector-base`: The base selector for the utility classes.
 // - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
+// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
 // - `$screen-aware`: A flag to generate screen-aware utility classes.
 // - `$theme-aware`: A flag to generate theme-aware utility classes.
 // - `$state-aware`: A flag to generate state-aware utility classes.
@@ -28,8 +29,7 @@
 // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
 // - `$position-selector-prefix`: The prefix for the position utility classes.
-// - `$base-position-properties`: The base properties and values for the position utility classes.
-// - `$custom-position-properties`: The custom properties and values for the position utility classes.
+// - `$custom-position-properties`: [DEPRECATED] The custom properties and values for the position utility classes.
 // - `$position-properties`: The combined properties and values for the position utility classes.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.

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

@@ -12,6 +12,7 @@
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: true !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -29,7 +30,7 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 $ratio-selector: "ratio" !default;
 $ratio-variant-selector-prefix: "" !default;
 $force-ratio-selector: "force-ratio" !default;
-$base-ratios: (
+$-ratios: (
   "one-by-one": 100%,
   "two-by-one": 50%,
   "four-by-three": 75%,
@@ -39,4 +40,16 @@ $base-ratios: (
   "eight-by-five": calc(5 / 8 * 100%),
 );
 $custom-ratios: () !default;
-$ratios: map.merge($base-ratios, $custom-ratios);
+$ratios: () !default;
+
+// @todo remove this once $custom-ratios is removed
+@if $custom-ratios != () {
+  @warn "`$custom-ratios` is deprecated and will be removed in a future release of Graupl. Use `$ratios` instead.";
+
+  $ratios: map.merge($ratios, $custom-ratios);
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $ratios: map.merge($-ratios, $ratios);
+}

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

@@ -19,6 +19,7 @@
 // The following variables control the generated classes:
 // - `$selector-base`: The base selector for the utility classes.
 // - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
+// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
 // - `$screen-aware`: A flag to generate screen-aware utility classes.
 // - `$theme-aware`: A flag to generate theme-aware utility classes.
 // - `$state-aware`: A flag to generate state-aware utility classes.
@@ -34,8 +35,7 @@
 // - `$ratio-selector`: The base selector for the ratio utility classes.
 // - `$ratio-variant-selector-prefix`: The prefix for the ratio variant utility classes.
 // - `$force-ratio-selector`: The selector for the force ratio utility class.
-// - `$base-ratios`: The base properties and values for the aspect ratio utility classes.
-// - `$custom-ratios`: The custom properties and values for the aspect ratio utility classes.
+// - `$custom-ratios`: [DEPRECATED] The custom properties and values for the aspect ratio utility classes.
 // - `$ratios`: The combined properties and values for the aspect ratio utility classes.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.

package/src/scss/utilities/spacing/_defaults.scss

@@ -12,6 +12,7 @@
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: true !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -26,7 +27,7 @@ $state-aware-selector-prefix: root-defaults.$utility-state-aware-selector-prefix
 $container-aware-selector-prefix: root-defaults.$utility-container-aware-selector-prefix !default;
 
 // Spacing properties.
-$base-spacing-properties: (
+$-spacing-properties: (
   g: gap,
   rg: row-gap,
   cg: column-gap,
@@ -58,7 +59,19 @@ $base-spacing-properties: (
   mise: margin-inline-start margin-inline-end,
 );
 $custom-spacing-properties: () !default;
-$spacing-properties: map.merge(
-  $base-spacing-properties,
-  $custom-spacing-properties
-);
+$spacing-properties: () !default;
+
+// @todo remove this once $custom-spacing-properties is removed
+@if $custom-spacing-properties != () {
+  @warn "`$custom-spacing-properties` is deprecated and will be removed in a future release of Graupl. Use `$spacing-properties` instead.";
+
+  $spacing-properties: map.merge(
+    $spacing-properties,
+    $custom-spacing-properties
+  );
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $spacing-properties: map.merge($-spacing-properties, $spacing-properties);
+}

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

@@ -358,6 +358,7 @@
 // The following variables control the generated classes:
 // - `$selector-base`: The base selector for the utility classes.
 // - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
+// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
 // - `$screen-aware`: A flag to generate screen-aware utility classes.
 // - `$theme-aware`: A flag to generate theme-aware utility classes.
 // - `$state-aware`: A flag to generate state-aware utility classes.
@@ -370,8 +371,7 @@
 // - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
 // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
-// - `$base-spacing-properties`: The base properties and values for the spacing utility classes.
-// - `$custom-spacing-properties`: The custom properties and values for the spacing utility classes.
+// - `$custom-spacing-properties`: [DEPRECATED] The custom properties and values for the spacing utility classes.
 // - `$spacing-properties`: The combined properties and values for the spacing utility classes.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.