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

package/src/scss/utilities/background/_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,20 +28,27 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 
 // Background attachment properties.
 $background-attachment-selector-prefix: "bg-attachment-" !default;
-$base-background-attachment-properties: (
+$-background-attachment-properties: (
   scroll: scroll,
   fixed: fixed,
   local: local,
 );
 $custom-background-attachment-properties: () !default;
-$background-attachment-properties: map.merge(
-  $base-background-attachment-properties,
-  $custom-background-attachment-properties
-);
+$background-attachment-properties: () !default;
+
+// @todo remove this once $custom-background-attachment-properties is removed
+@if $custom-background-attachment-properties != () {
+  @warn "`$custom-background-attachment-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-attachment-properties` instead.";
+
+  $background-attachment-properties: map.merge(
+    $background-attachment-properties,
+    $custom-background-attachment-properties
+  );
+}
 
 // Background clip properties.
 $background-clip-selector-prefix: "bg-clip-" !default;
-$base-background-clip-properties: (
+$-background-clip-properties: (
   border-box: border-box,
   padding-box: padding-box,
   content-box: content-box,
@@ -48,38 +56,59 @@ $base-background-clip-properties: (
   border-area: border-area,
 );
 $custom-background-clip-properties: () !default;
-$background-clip-properties: map.merge(
-  $base-background-clip-properties,
-  $custom-background-clip-properties
-);
+$background-clip-properties: () !default;
+
+// @todo remove this once $custom-background-clip-properties is removed
+@if $custom-background-clip-properties != () {
+  @warn "`$custom-background-clip-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-clip-properties` instead.";
+
+  $background-clip-properties: map.merge(
+    $background-clip-properties,
+    $custom-background-clip-properties
+  );
+}
 
 // Background image properties.
 $background-image-selector-prefix: "bg-image-" !default;
-$base-background-image-properties: (
+$-background-image-properties: (
   none: none,
 );
 $custom-background-image-properties: () !default;
-$background-image-properties: map.merge(
-  $base-background-image-properties,
-  $custom-background-image-properties
-);
+$background-image-properties: () !default;
+
+// @todo remove this once $custom-background-image-properties is removed
+@if $custom-background-image-properties != () {
+  @warn "`$custom-background-image-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-image-properties` instead.";
+
+  $background-image-properties: map.merge(
+    $background-image-properties,
+    $custom-background-image-properties
+  );
+}
 
 // Background origin properties.
 $background-origin-selector-prefix: "bg-origin-" !default;
-$base-background-origin-properties: (
+$-background-origin-properties: (
   border-box: border-box,
   padding-box: padding-box,
   content-box: content-box,
 );
 $custom-background-origin-properties: () !default;
-$background-origin-properties: map.merge(
-  $base-background-origin-properties,
-  $custom-background-origin-properties
-);
+$background-origin-properties: () !default;
+
+// @todo remove this once $custom-background-origin-properties is removed
+@if $custom-background-origin-properties != () {
+  @warn "`$custom-background-origin-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-origin-properties` instead.";
+
+  $background-origin-properties: map.merge(
+    $background-origin-properties,
+    $custom-background-origin-properties
+  );
+}
 
 // Background position properties.
 $background-position-selector-prefix: "bg-position-" !default;
-$base-background-position-properties: (
+$-background-position-properties: (
   top: top,
   right: right,
   bottom: bottom,
@@ -87,14 +116,21 @@ $base-background-position-properties: (
   center: center,
 );
 $custom-background-position-properties: () !default;
-$background-position-properties: map.merge(
-  $base-background-position-properties,
-  $custom-background-position-properties
-);
+$background-position-properties: () !default;
+
+// @todo remove this once $custom-background-position-properties is removed
+@if $custom-background-position-properties != () {
+  @warn "`$custom-background-position-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-position-properties` instead.";
+
+  $background-position-properties: map.merge(
+    $background-position-properties,
+    $custom-background-position-properties
+  );
+}
 
 // Background repeat properties.
 $background-repeat-selector-prefix: "bg-repeat-" !default;
-$base-background-repeat-properties: (
+$-background-repeat-properties: (
   repeat: repeat,
   repeat-x: repeat-x,
   repeat-y: repeat-y,
@@ -103,20 +139,66 @@ $base-background-repeat-properties: (
   no-repeat: no-repeat,
 );
 $custom-background-repeat-properties: () !default;
-$background-repeat-properties: map.merge(
-  $base-background-repeat-properties,
-  $custom-background-repeat-properties
-);
+$background-repeat-properties: () !default;
+
+// @todo remove this once $custom-background-repeat-properties is removed
+@if $custom-background-repeat-properties != () {
+  @warn "`$custom-background-repeat-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-repeat-properties` instead.";
+
+  $background-repeat-properties: map.merge(
+    $background-repeat-properties,
+    $custom-background-repeat-properties
+  );
+}
 
 // Background size properties.
 $background-size-selector-prefix: "bg-size-" !default;
-$base-background-size-properties: (
+$-background-size-properties: (
   auto: auto,
   cover: cover,
   contain: contain,
 );
 $custom-background-size-properties: () !default;
-$background-size-properties: map.merge(
-  $base-background-size-properties,
-  $custom-background-size-properties
-);
+$background-size-properties: () !default;
+
+// @todo remove this once $custom-background-size-properties is removed
+@if $custom-background-size-properties != () {
+  @warn "`$custom-background-size-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-size-properties` instead.";
+
+  $background-size-properties: map.merge(
+    $background-size-properties,
+    $custom-background-size-properties
+  );
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $background-attachment-properties: map.merge(
+    $-background-attachment-properties,
+    $background-attachment-properties
+  );
+  $background-clip-properties: map.merge(
+    $-background-clip-properties,
+    $background-clip-properties
+  );
+  $background-image-properties: map.merge(
+    $-background-image-properties,
+    $background-image-properties
+  );
+  $background-origin-properties: map.merge(
+    $-background-origin-properties,
+    $background-origin-properties
+  );
+  $background-position-properties: map.merge(
+    $-background-position-properties,
+    $background-position-properties
+  );
+  $background-repeat-properties: map.merge(
+    $-background-repeat-properties,
+    $background-repeat-properties
+  );
+  $background-size-properties: map.merge(
+    $-background-size-properties,
+    $background-size-properties
+  );
+}

package/src/scss/utilities/background/_index.scss

@@ -36,6 +36,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.
@@ -49,32 +50,25 @@
 // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
 // - `$background-attachment-selector-prefix`: The prefix for the background attachment utility classes.
-// - `$base-background-attachment-properties`: The base properties and values for the background attachment utility classes.
-// - `$custom-background-attachment-properties`: The custom properties and values for the background attachment utility classes.
+// - `$custom-background-attachment-properties`: [DEPRECATED] The custom properties and values for the background attachment utility classes.
 // - `$background-attachment-properties`: The combined properties and values for the background attachment utility classes.
 // - `$background-clip-selector-prefix`: The prefix for the background clip utility classes.
-// - `$base-background-clip-properties`: The base properties and values for the background clip utility classes.
-// - `$custom-background-clip-properties`: The custom properties and values for the background clip utility classes.
+// - `$custom-background-clip-properties`: [DEPRECATED] The custom properties and values for the background clip utility classes.
 // - `$background-clip-properties`: The combined properties and values for the background clip utility classes.
 // - `$background-image-selector-prefix`: The prefix for the background image utility classes.
-// - `$base-background-image-properties`: The base properties and values for the background image utility classes.
-// - `$custom-background-image-properties`: The custom properties and values for the background image utility classes.
+// - `$custom-background-image-properties`: [DEPRECATED] The custom properties and values for the background image utility classes.
 // - `$background-image-properties`: The combined properties and values for the background image utility classes.
 // - `$background-origin-selector-prefix`: The prefix for the background origin utility classes.
-// - `$base-background-origin-properties`: The base properties and values for the background origin utility classes.
-// - `$custom-background-origin-properties`: The custom properties and values for the background origin utility classes.
+// - `$custom-background-origin-properties`: [DEPRECATED] The custom properties and values for the background origin utility classes.
 // - `$background-origin-properties`: The combined properties and values for the background origin utility classes.
 // - `$background-position-selector-prefix`: The prefix for the background position utility classes.
-// - `$base-background-position-properties`: The base properties and values for the background position utility classes.
-// - `$custom-background-position-properties`: The custom properties and values for the background position utility classes.
+// - `$custom-background-position-properties`: [DEPRECATED] The custom properties and values for the background position utility classes.
 // - `$background-position-properties`: The combined properties and values for the background position utility classes.
 // - `$background-repeat-selector-prefix`: The prefix for the background repeat utility classes.
-// - `$base-background-repeat-properties`: The base properties and values for the background repeat utility classes.
-// - `$custom-background-repeat-properties`: The custom properties and values for the background repeat utility classes.
+// - `$custom-background-repeat-properties`: [DEPRECATED] The custom properties and values for the background repeat utility classes.
 // - `$background-repeat-properties`: The combined properties and values for the background repeat utility classes.
 // - `$background-size-selector-prefix`: The prefix for the background size utility classes.
-// - `$base-background-size-properties`: The base properties and values for the background size utility classes.
-// - `$custom-background-size-properties`: The custom properties and values for the background size utility classes.
+// - `$custom-background-size-properties`: [DEPRECATED] The custom properties and values for the background size utility classes.
 // - `$background-size-properties`: The combined properties and values for the background size utility classes.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.

package/src/scss/utilities/border/_defaults.scss

@@ -7,11 +7,14 @@
 // Those should be defined as custom properties in the `_variables.scss` file.
 
 @use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+@use "../../theme/color/variables" as color;
 @use "sass:map";
 
 // 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;
@@ -30,32 +33,68 @@ $default-border-selector: "bordered" !default;
 
 // Border width properties.
 $border-width-selector-prefix: "border-" !default;
-$base-border-width-properties: (
+$-border-width-properties: (
   thick: thick,
   thin: thin,
   medium: medium,
   none: none,
 );
 $custom-border-width-properties: () !default;
-$border-width-properties: map.merge(
-  $base-border-width-properties,
-  $custom-border-width-properties
-);
+$border-width-properties: () !default;
+
+// @todo remove this once $custom-border-width-properties is removed
+@if $custom-border-width-properties != () {
+  @warn "`$custom-border-width-properties` is deprecated and will be removed in a future release of Graupl. Use `$border-width-properties` instead.";
+
+  $border-width-properties: map.merge(
+    $border-width-properties,
+    $custom-border-width-properties
+  );
+}
 
 // Border color properties.
 $border-color-selector-prefix: "border-" !default;
-$base-border-color-properties: (
+$-border-color-properties: (
   transparent: transparent,
 );
+
+// Add the active theme colors to the base border color properties.
+@each $color in theme.get-colors() {
+  $map: theme.get-color($color);
+
+  @each $shade, $value in $map {
+    $name: null;
+
+    // Handle _default shade vs proper shade mappings.
+    @if $shade == "_default" {
+      $name: #{$color};
+    } @else {
+      $name: #{$color}-#{$shade};
+    }
+
+    $-border-color-properties: map.merge(
+      $-border-color-properties,
+      (#{$name}: #{$value})
+    );
+  }
+}
+
 $custom-border-color-properties: () !default;
-$border-color-properties: map.merge(
-  $base-border-color-properties,
-  $custom-border-color-properties
-);
+$border-color-properties: () !default;
+
+// @todo remove this once $custom-border-color-properties is removed
+@if $custom-border-color-properties != () {
+  @warn "`$custom-border-color-properties` is deprecated and will be removed in a future release of Graupl. Use `$border-color-properties` instead.";
+
+  $border-color-properties: map.merge(
+    $border-color-properties,
+    $custom-border-color-properties
+  );
+}
 
 // Border style properties.
 $border-style-selector-prefix: "border-" !default;
-$base-border-style-properties: (
+$-border-style-properties: (
   solid: solid,
   dashed: dashed,
   dotted: dotted,
@@ -67,7 +106,30 @@ $base-border-style-properties: (
   none: none,
 );
 $custom-border-style-properties: () !default;
-$border-style-properties: map.merge(
-  $base-border-style-properties,
-  $custom-border-style-properties
-);
+$border-style-properties: () !default;
+
+// @todo remove this once $custom-border-style-properties is removed
+@if $custom-border-style-properties != () {
+  @warn "`$custom-border-style-properties` is deprecated and will be removed in a future release of Graupl. Use `$border-style-properties` instead.";
+
+  $border-style-properties: map.merge(
+    $border-style-properties,
+    $custom-border-style-properties
+  );
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $border-width-properties: map.merge(
+    $-border-width-properties,
+    $border-width-properties
+  );
+  $border-color-properties: map.merge(
+    $-border-color-properties,
+    $border-color-properties
+  );
+  $border-style-properties: map.merge(
+    $-border-style-properties,
+    $border-style-properties
+  );
+}

package/src/scss/utilities/border/_index.scss

@@ -52,6 +52,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.
@@ -66,16 +67,13 @@
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
 // - `$default-border-selector`: The selector for the default border utility class.
 // - `$border-width-selector-prefix`: The prefix for the border width utility classes.
-// - `$base-border-width-properties`: The base properties and values for the border width utility classes.
-// - `$custom-border-width-properties`: The custom properties and values for the border width utility classes.
+// - `$custom-border-width-properties`: [DEPRECATED] The custom properties and values for the border width utility classes.
 // - `$border-width-properties`: The combined properties and values for the border width utility classes.
 // - `$border-color-selector-prefix`: The prefix for the border color utility classes.
-// - `$base-border-color-properties`: The base properties and values for the border color utility classes.
-// - `$custom-border-color-properties`: The custom properties and values for the border color utility classes.
+// - `$custom-border-color-properties`: [DEPRECATED] The custom properties and values for the border color utility classes.
 // - `$border-color-properties`: The combined properties and values for the border color utility classes.
 // - `$border-style-selector-prefix`: The prefix for the border style utility classes.
-// - `$base-border-style-properties`: The base properties and values for the border style utility classes.
-// - `$custom-border-style-properties`: The custom properties and values for the border style utility classes.
+// - `$custom-border-style-properties`: [DEPRECATED] The custom properties and values for the border style utility classes.
 // - `$border-style-properties`: The combined properties and values for the border style utility classes.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
@@ -167,19 +165,19 @@
   }
 
   // For each theme colour, create a utility class for border color.
-  @each $color, $map in map.get(color.$themes, active) {
-    @each $shade, $value in $map {
-      // e.g. `.border-primary-100` or `.border-secondary-900`
-      $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
-
-      @include utility.create(
-        $selector,
-        border-color,
-        $value,
-        $important: defaults.$use-important
-      );
-    }
-  }
+  // @each $color, $map in map.get(color.$themes, active) {
+  //   @each $shade, $value in $map {
+  //     // e.g. `.border-primary-100` or `.border-secondary-900`
+  //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
+
+  //     @include utility.create(
+  //       $selector,
+  //       border-color,
+  //       $value,
+  //       $important: defaults.$use-important
+  //     );
+  //   }
+  // }
 
   // For each border color, create a utility class for border color.
   @each $name, $value in defaults.$border-color-properties {
@@ -253,20 +251,20 @@
       }
 
       // For each theme colour, create a utility class for border color.
-      @each $color, $map in map.get(color.$themes, active) {
-        @each $shade, $value in $map {
-          // e.g. `.md:border-primary-100` or `.lg:border-secondary-900`
-          $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            border-color,
-            $value,
-            $important: defaults.$use-important,
-            $screen: $screen-name
-          );
-        }
-      }
+      // @each $color, $map in map.get(color.$themes, active) {
+      //   @each $shade, $value in $map {
+      //     // e.g. `.md:border-primary-100` or `.lg:border-secondary-900`
+      //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       border-color,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $screen: $screen-name
+      //     );
+      //   }
+      // }
 
       // For each border color, create a utility class for border color.
       @each $name, $value in defaults.$border-color-properties {
@@ -344,20 +342,20 @@
         }
 
         // For each theme colour, create a utility class for border color.
-        @each $color, $map in map.get(color.$themes, active) {
-          @each $shade, $value in $map {
-            // e.g. `.dark:border-primary-100` or `.light:border-secondary-900`
-            $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
-
-            @include utility.create(
-              $selector,
-              border-color,
-              $value,
-              $important: defaults.$use-important,
-              $theme: $theme-name
-            );
-          }
-        }
+        // @each $color, $map in map.get(color.$themes, active) {
+        //   @each $shade, $value in $map {
+        //     // e.g. `.dark:border-primary-100` or `.light:border-secondary-900`
+        //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
+
+        //     @include utility.create(
+        //       $selector,
+        //       border-color,
+        //       $value,
+        //       $important: defaults.$use-important,
+        //       $theme: $theme-name
+        //     );
+        //   }
+        // }
 
         // For each border color, create a utility class for border color.
         @each $name, $value in defaults.$border-color-properties {
@@ -435,20 +433,20 @@
       }
 
       // For each theme colour, create a utility class for border color.
-      @each $color, $map in map.get(color.$themes, active) {
-        @each $shade, $value in $map {
-          // e.g. `.hover:border-primary-100` or `.focus:border-secondary-900`
-          $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            border-color,
-            $value,
-            $important: defaults.$use-important,
-            $state: $state-name
-          );
-        }
-      }
+      // @each $color, $map in map.get(color.$themes, active) {
+      //   @each $shade, $value in $map {
+      //     // e.g. `.hover:border-primary-100` or `.focus:border-secondary-900`
+      //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       border-color,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $state: $state-name
+      //     );
+      //   }
+      // }
 
       // For each border color, create a utility class for border color.
       @each $name, $value in defaults.$border-color-properties {
@@ -525,20 +523,20 @@
       }
 
       // For each theme colour, create a utility class for border color.
-      @each $color, $map in map.get(color.$themes, active) {
-        @each $shade, $value in $map {
-          // e.g. `.md:border-primary-100` or `.lg:border-secondary-900`
-          $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            border-color,
-            $value,
-            $important: defaults.$use-important,
-            $container: $container-name
-          );
-        }
-      }
+      // @each $color, $map in map.get(color.$themes, active) {
+      //   @each $shade, $value in $map {
+      //     // e.g. `.md:border-primary-100` or `.lg:border-secondary-900`
+      //     $selector: #{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       border-color,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $container: $container-name
+      //     );
+      //   }
+      // }
 
       // For each border color, create a utility class for border color.
       @each $name, $value in defaults.$border-color-properties {