@graupl/graupl 1.0.0-beta.4 → 1.0.0-beta.41

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

@@ -1,255 +0,0 @@
-// @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 "../../theme/color/variables" as color;
-@use "defaults";
-@use "sass:map";
-@use "variables" as *;
-
-@include layer(utilities) {
-  $selector-prefix: root-defaults.$utility-selector-base;
-
-  // For each flex direction property, create a utility class.
-  @each $name, $property in defaults.$flex-direction-properties {
-    $selector: "#{$selector-prefix}#{defaults.$flex-direction-selector-prefix}#{$name}";
-
-    @include utility.create($selector, flex-direction, $property);
-  }
-
-  // For each flex wrap property, create a utility class.
-  @each $name, $property in defaults.$flex-wrap-properties {
-    $selector: "#{$selector-prefix}#{defaults.$flex-wrap-selector-prefix}#{$name}";
-
-    @include utility.create($selector, flex-wrap, $property);
-  }
-
-  // For each flex grow property, create a utility class.
-  @each $name, $property in defaults.$flex-grow-properties {
-    $selector: "#{$selector-prefix}#{defaults.$flex-grow-selector-prefix}#{$name}";
-
-    @include utility.create($selector, flex-grow, $property);
-  }
-
-  // For each flex shrink property, create a utility class.
-  @each $name, $property in defaults.$flex-shrink-properties {
-    $selector: "#{$selector-prefix}#{defaults.$flex-shrink-selector-prefix}#{$name}";
-
-    @include utility.create($selector, flex-shrink, $property);
-  }
-
-  // For each flex basis property, create a utility class.
-  @each $name, $property in defaults.$flex-basis-properties {
-    $selector: "#{$selector-prefix}#{defaults.$flex-basis-selector-prefix}#{$name}";
-
-    @include utility.create($selector, flex-basis, $property);
-  }
-
-  // Generate screen-aware utilities.
-  @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
-    @each $screen-name in map.keys(root-defaults.$screen-sizes) {
-      $selector-prefix: "#{root-defaults.$utility-selector-base}#{$screen-name}#{root-defaults.$utility-screen-aware-separator}";
-
-      // For each flex direction property, create a utility class.
-      @each $name, $property in defaults.$flex-direction-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-direction-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-direction,
-          $property,
-          $screen: $screen-name
-        );
-      }
-
-      // For each flex wrap property, create a utility class.
-      @each $name, $property in defaults.$flex-wrap-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-wrap-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-wrap,
-          $property,
-          $screen: $screen-name
-        );
-      }
-
-      // For each flex grow property, create a utility class.
-      @each $name, $property in defaults.$flex-grow-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-grow-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-grow,
-          $property,
-          $screen: $screen-name
-        );
-      }
-
-      // For each flex shrink property, create a utility class.
-      @each $name, $property in defaults.$flex-shrink-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-shrink-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-shrink,
-          $property,
-          $screen: $screen-name
-        );
-      }
-
-      // For each flex basis property, create a utility class.
-      @each $name, $property in defaults.$flex-basis-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-basis-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-basis,
-          $property,
-          $screen: $screen-name
-        );
-      }
-    }
-  }
-
-  // Generate theme-aware utilities.
-  @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {
-    @each $theme-name, $colors in color.$themes {
-      @if $theme-name != active {
-        $selector-prefix: "#{root-defaults.$utility-selector-base}#{$theme-name}#{root-defaults.$utility-theme-aware-separator}";
-
-        // For each flex direction property, create a utility class.
-        @each $name, $property in defaults.$flex-direction-properties {
-          $selector: "#{$selector-prefix}#{defaults.$flex-direction-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            flex-direction,
-            $property,
-            $theme: $theme-name
-          );
-        }
-
-        // For each flex wrap property, create a utility class.
-        @each $name, $property in defaults.$flex-wrap-properties {
-          $selector: "#{$selector-prefix}#{defaults.$flex-wrap-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            flex-wrap,
-            $property,
-            $theme: $theme-name
-          );
-        }
-
-        // For each flex grow property, create a utility class.
-        @each $name, $property in defaults.$flex-grow-properties {
-          $selector: "#{$selector-prefix}#{defaults.$flex-grow-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            flex-grow,
-            $property,
-            $theme: $theme-name
-          );
-        }
-
-        // For each flex shrink property, create a utility class.
-        @each $name, $property in defaults.$flex-shrink-properties {
-          $selector: "#{$selector-prefix}#{defaults.$flex-shrink-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            flex-shrink,
-            $property,
-            $theme: $theme-name
-          );
-        }
-
-        // For each flex basis property, create a utility class.
-        @each $name, $property in defaults.$flex-basis-properties {
-          $selector: "#{$selector-prefix}#{defaults.$flex-basis-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            flex-basis,
-            $property,
-            $theme: $theme-name
-          );
-        }
-      }
-    }
-  }
-
-  // Generate state-aware utilities.
-  @if defaults.$state-aware and root-defaults.$state-aware-utilities {
-    @each $state-name, $value in root-defaults.$state-selectors {
-      $selector-prefix: "#{root-defaults.$utility-selector-base}#{$state-name}#{root-defaults.$utility-state-aware-separator}";
-
-      // For each flex direction property, create a utility class.
-      @each $name, $property in defaults.$flex-direction-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-direction-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-direction,
-          $property,
-          $state: $state-name
-        );
-      }
-
-      // For each flex wrap property, create a utility class.
-      @each $name, $property in defaults.$flex-wrap-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-wrap-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-wrap,
-          $property,
-          $state: $state-name
-        );
-      }
-
-      // For each flex grow property, create a utility class.
-      @each $name, $property in defaults.$flex-grow-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-grow-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-grow,
-          $property,
-          $state: $state-name
-        );
-      }
-
-      // For each flex shrink property, create a utility class.
-      @each $name, $property in defaults.$flex-shrink-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-shrink-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-shrink,
-          $property,
-          $state: $state-name
-        );
-      }
-
-      // For each flex basis property, create a utility class.
-      @each $name, $property in defaults.$flex-basis-properties {
-        $selector: "#{$selector-prefix}#{defaults.$flex-basis-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          flex-basis,
-          $property,
-          $state: $state-name
-        );
-      }
-    }
-  }
-}

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

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

@@ -1,58 +0,0 @@
-// @graupl/graupl gradient 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";
-
-// Gradient properties.
-$gradient-selector: "gradient" !default;
-$gradient-type-selector-prefix: "" !default;
-$gradient-direction-selector-prefix: "" !default;
-$gradient-color-selector-prefix: "" !default;
-$gradient-color-from-selector-prefix: "from-" !default;
-$gradient-color-to-selector-prefix: "to-" !default;
-$base-gradient-types: (
-  linear: linear-gradient,
-  radial: radial-gradient,
-);
-$custom-gradient-types: () !default;
-$gradient-types: map.merge($base-gradient-types, $custom-gradient-types);
-$base-gradient-directions: (
-  to-top: "to top",
-  to-right: "to right",
-  to-bottom: "to bottom",
-  to-left: "to left",
-  circle: circle,
-  circle-at-top: circle at top,
-  circle-at-right: circle at right,
-  circle-at-bottom: circle at bottom,
-  circle-at-left: circle at left,
-  ellipse: ellipse,
-  ellipse-at-top: ellipse at top,
-  ellipse-at-right: ellipse at right,
-  ellipse-at-bottom: ellipse at bottom,
-  ellipse-at-left: ellipse at left,
-  closest-side: closest-side,
-  closest-corner: closest-corner,
-  farthest-side: farthest-side,
-  farthest-corner: farthest-corner,
-);
-$custom-gradient-directions: () !default;
-$gradient-directions: map.merge(
-  $base-gradient-directions,
-  $custom-gradient-directions
-);
-$base-gradient-colors: (
-  transparent: transparent,
-);
-$custom-gradient-colors: () !default;
-$gradient-colors: map.merge($base-gradient-colors, $custom-gradient-colors);
-
-// Utility modifier flags.
-$screen-aware: false !default;
-$theme-aware: false !default;
-$state-aware: false !default;

package/src/scss/utilities/gradient/_index.scss

@@ -1,380 +0,0 @@
-// @graupl/graupl background 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 "../../theme/color/variables" as color;
-@use "defaults";
-@use "sass:map";
-@use "variables" as *;
-
-@include layer(utilities) {
-  $selector-prefix: root-defaults.$utility-selector-base;
-
-  // Generate gradient utilities.
-  $selector: "#{$selector-prefix}#{defaults.$gradient-selector}";
-
-  @include utility.create(
-    $selector,
-    background-image,
-    linear-gradient(
-      map.get($gradient-directions, linear),
-      $gradient-from $gradient-from-position,
-      $gradient-to $gradient-to-position
-    )
-  );
-
-  // For each gradient type, create a utility class.
-  @each $name, $type in defaults.$gradient-types {
-    $selector: "#{$selector-prefix}#{defaults.$gradient-type-selector-prefix}#{$name}";
-
-    @include utility.create(
-      $selector,
-      background-image,
-      #{$type
-        }(
-          map.get($gradient-directions, $name),
-          $gradient-from $gradient-from-position,
-          $gradient-to $gradient-to-position
-        )
-    );
-  }
-
-  // For each gradient direction, create a utility class.
-  @each $name, $direction in defaults.$gradient-directions {
-    $selector: "#{$selector-prefix}#{defaults.$gradient-direction-selector-prefix}#{$name}";
-
-    @include utility.create(
-      $selector,
-      --#{root-defaults.$prefix}gradient-direction,
-      $direction
-    );
-  }
-
-  // For each gradient color, create a utility class for both to and from.
-  @each $name, $color in defaults.$gradient-colors {
-    $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$name}";
-
-    @include utility.create(
-      $selector,
-      --#{root-defaults.$prefix}gradient-from,
-      $color
-    );
-
-    $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$name}";
-
-    @include utility.create(
-      $selector,
-      --#{root-defaults.$prefix}gradient-to,
-      $color
-    );
-  }
-
-  // For each theme color, create a utility class for both to and from.
-  @each $color, $map in map.get(color.$themes, active) {
-    @each $shade, $value in $map {
-      $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade}";
-
-      @include utility.create(
-        $selector,
-        --#{root-defaults.$prefix}gradient-from,
-        $value
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade}";
-
-      @include utility.create(
-        $selector,
-        --#{root-defaults.$prefix}gradient-to,
-        $value
-      );
-    }
-  }
-
-  // Generate screen-aware utilities.
-  @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
-    @each $screen-name in map.keys(root-defaults.$screen-sizes) {
-      $selector-prefix: "#{root-defaults.$utility-selector-base}#{$screen-name}#{root-defaults.$utility-screen-aware-separator}";
-
-      // Generate gradient utilities.
-      $selector: "#{$selector-prefix}#{defaults.$gradient-selector}";
-
-      @include utility.create(
-        $selector,
-        background-image,
-        linear-gradient(
-          map.get($gradient-directions, linear),
-          $gradient-from $gradient-from-position,
-          $gradient-to $gradient-to-position
-        ),
-        $screen: $screen-name
-      );
-
-      // For each gradient type, create a utility class.
-      @each $name, $type in defaults.$gradient-types {
-        $selector: "#{$selector-prefix}#{defaults.$gradient-type-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          background-image,
-          #{$type
-            }(
-              map.get($gradient-directions, $name),
-              $gradient-from $gradient-from-position,
-              $gradient-to $gradient-to-position
-            ),
-          $screen: $screen-name
-        );
-      }
-
-      // For each gradient direction, create a utility class.
-      @each $name, $direction in defaults.$gradient-directions {
-        $selector: "#{$selector-prefix}#{defaults.$gradient-direction-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          --#{root-defaults.$prefix}gradient-direction,
-          $direction,
-          $screen: $screen-name
-        );
-      }
-
-      // For each gradient color, create a utility class for both to and from.
-      @each $name, $color in defaults.$gradient-colors {
-        $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          --#{root-defaults.$prefix}gradient-from,
-          $color,
-          $screen: $screen-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          --#{root-defaults.$prefix}gradient-to,
-          $color,
-          $screen: $screen-name
-        );
-      }
-
-      // For each theme color, create a utility class for both to and from.
-      @each $color, $map in map.get(color.$themes, active) {
-        @each $shade, $value in $map {
-          $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade}";
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-from,
-            $value,
-            $screen: $screen-name
-          );
-
-          $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade}";
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-to,
-            $value,
-            $screen: $screen-name
-          );
-        }
-      }
-    }
-  }
-
-  // Generate theme-aware utilities.
-  @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {
-    @each $theme-name, $colors in color.$themes {
-      @if $theme-name != active {
-        $selector-prefix: "#{root-defaults.$utility-selector-base}#{$theme-name}#{root-defaults.$utility-theme-aware-separator}";
-
-        // Generate gradient utilities.
-        $selector: "#{$selector-prefix}#{defaults.$gradient-selector}";
-
-        @include utility.create(
-          $selector,
-          background-image,
-          linear-gradient(
-            map.get($gradient-directions, linear),
-            $gradient-from $gradient-from-position,
-            $gradient-to $gradient-to-position
-          ),
-          $theme: $theme-name
-        );
-
-        // For each gradient type, create a utility class.
-        @each $name, $type in defaults.$gradient-types {
-          $selector: "#{$selector-prefix}#{defaults.$gradient-type-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            background-image,
-            #{$type
-              }(
-                map.get($gradient-directions, $name),
-                $gradient-from $gradient-from-position,
-                $gradient-to $gradient-to-position
-              ),
-            $theme: $theme-name
-          );
-        }
-
-        // For each gradient direction, create a utility class.
-        @each $name, $direction in defaults.$gradient-directions {
-          $selector: "#{$selector-prefix}#{defaults.$gradient-direction-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-direction,
-            $direction,
-            $theme: $theme-name
-          );
-        }
-
-        // For each gradient color, create a utility class for both to and from.
-        @each $name, $color in defaults.$gradient-colors {
-          $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-from,
-            $color,
-            $theme: $theme-name
-          );
-
-          $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$name}";
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-to,
-            $color,
-            $theme: $theme-name
-          );
-        }
-
-        // For each theme color, create a utility class for both to and from.
-        @each $color, $map in map.get(color.$themes, active) {
-          @each $shade, $value in $map {
-            $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade}";
-
-            @include utility.create(
-              $selector,
-              --#{root-defaults.$prefix}gradient-from,
-              $value,
-              $theme: $theme-name
-            );
-
-            $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade}";
-
-            @include utility.create(
-              $selector,
-              --#{root-defaults.$prefix}gradient-to,
-              $value,
-              $theme: $theme-name
-            );
-          }
-        }
-      }
-    }
-  }
-
-  // Generate state-aware utilities.
-  @if defaults.$state-aware and root-defaults.$state-aware-utilities {
-    @each $state-name, $value in root-defaults.$state-selectors {
-      $selector-prefix: "#{root-defaults.$utility-selector-base}#{$state-name}#{root-defaults.$utility-state-aware-separator}";
-
-      // Generate gradient utilities.
-      $selector: "#{$selector-prefix}#{defaults.$gradient-selector}";
-
-      @include utility.create(
-        $selector,
-        background-image,
-        linear-gradient(
-          map.get($gradient-directions, linear),
-          $gradient-from $gradient-from-position,
-          $gradient-to $gradient-to-position
-        ),
-        $state: $state-name
-      );
-
-      // For each gradient type, create a utility class.
-      @each $name, $type in defaults.$gradient-types {
-        $selector: "#{$selector-prefix}#{defaults.$gradient-type-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          background-image,
-          #{$type
-            }(
-              map.get($gradient-directions, $name),
-              $gradient-from $gradient-from-position,
-              $gradient-to $gradient-to-position
-            ),
-          $state: $state-name
-        );
-      }
-
-      // For each gradient direction, create a utility class.
-      @each $name, $direction in defaults.$gradient-directions {
-        $selector: "#{$selector-prefix}#{defaults.$gradient-direction-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          --#{root-defaults.$prefix}gradient-direction,
-          $direction,
-          $state: $state-name
-        );
-      }
-
-      // For each gradient color, create a utility class for both to and from.
-      @each $name, $color in defaults.$gradient-colors {
-        $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          --#{root-defaults.$prefix}gradient-from,
-          $color,
-          $state: $state-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$name}";
-
-        @include utility.create(
-          $selector,
-          --#{root-defaults.$prefix}gradient-to,
-          $color,
-          $state: $state-name
-        );
-      }
-
-      // For each theme color, create a utility class for both to and from.
-      @each $color, $map in map.get(color.$themes, active) {
-        @each $shade, $value in $map {
-          $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade}";
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-from,
-            $value,
-            $state: $state-name
-          );
-
-          $selector: "#{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade}";
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-to,
-            $value,
-            $state: $state-name
-          );
-        }
-      }
-    }
-  }
-}