@graupl/graupl 1.0.0-beta.2 → 1.0.0-beta.20

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

@@ -1,658 +0,0 @@
-// @graupl/graupl typography 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/screen";
-@use "../../mixins/utility";
-@use "../../theme/color/variables" as color;
-@use "../../theme/typography/variables" as typography;
-@use "defaults";
-@use "sass:map";
-@use "variables" as *;
-
-@include layer(utilities) {
-  $selector-prefix: root-defaults.$utility-selector-prefix;
-
-  // For each font size property, create a utility class.
-  @each $size, $value in typography.$font-sizes {
-    $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$size}";
-
-    @include utility.create($selector, font-size, $value);
-  }
-
-  // Create utility classes for each type of text style in Graupl.
-  // These will apply not only the font size, but also the margin, font weight, and line height.
-  // This will allow for a more consistent and maintainable typography system.
-  $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}paragraph";
-
-  @include utility.create-mapped(
-    $selector,
-    (
-      margin: typography.$paragraph-margin,
-      font-size: typography.$paragraph-font-size,
-      font-weight: typography.$paragraph-font-weight,
-      line-height: typography.$paragraph-line-height,
-    )
-  );
-
-  $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}small";
-
-  @include utility.create-mapped(
-    $selector,
-    (
-      margin: typography.$small-margin,
-      font-size: typography.$small-font-size,
-      font-weight: typography.$small-font-weight,
-      line-height: typography.$small-line-height,
-    )
-  );
-
-  $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h1";
-
-  @include utility.create-mapped(
-    $selector,
-    (
-      margin: typography.$h1-margin,
-      font-family: typography.$h1-font-family,
-      font-size: typography.$h1-font-size,
-      font-weight: typography.$h1-font-weight,
-      line-height: typography.$h1-line-height,
-    )
-  );
-
-  $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h2";
-
-  @include utility.create-mapped(
-    $selector,
-    (
-      margin: typography.$h2-margin,
-      font-family: typography.$h2-font-family,
-      font-size: typography.$h2-font-size,
-      font-weight: typography.$h2-font-weight,
-      line-height: typography.$h2-line-height,
-    )
-  );
-
-  $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h3";
-
-  @include utility.create-mapped(
-    $selector,
-    (
-      margin: typography.$h3-margin,
-      font-family: typography.$h3-font-family,
-      font-size: typography.$h3-font-size,
-      font-weight: typography.$h3-font-weight,
-      line-height: typography.$h3-line-height,
-    )
-  );
-
-  $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h4";
-
-  @include utility.create-mapped(
-    $selector,
-    (
-      margin: typography.$h4-margin,
-      font-family: typography.$h4-font-family,
-      font-size: typography.$h4-font-size,
-      font-weight: typography.$h4-font-weight,
-      line-height: typography.$h4-line-height,
-    )
-  );
-
-  $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h5";
-
-  @include utility.create-mapped(
-    $selector,
-    (
-      margin: typography.$h5-margin,
-      font-family: typography.$h5-font-family,
-      font-size: typography.$h5-font-size,
-      font-weight: typography.$h5-font-weight,
-      line-height: typography.$h5-line-height,
-    )
-  );
-
-  $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h6";
-
-  @include utility.create-mapped(
-    $selector,
-    (
-      margin: typography.$h6-margin,
-      font-family: typography.$h6-font-family,
-      font-size: typography.$h6-font-size,
-      font-weight: typography.$h6-font-weight,
-      line-height: typography.$h6-line-height,
-    )
-  );
-
-  // For each font weight property, create a utility class.
-  @each $weight, $value in typography.$font-weights {
-    $selector: "#{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight}";
-
-    @include utility.create($selector, font-weight, $value);
-  }
-
-  // For each font style property, create a utility class.
-  @each $style, $value in defaults.$font-style-properties {
-    $selector: "#{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style}";
-
-    @include utility.create($selector, font-style, $value);
-  }
-
-  // For each text transform property, create a utility class.
-  @each $transform, $value in defaults.$text-transform-properties {
-    $selector: "#{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform}";
-
-    @include utility.create($selector, text-transform, $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-prefix}#{$screen-name}#{root-defaults.$utility-screen-aware-separator}";
-
-      // For each font size property, create a utility class.
-      @each $size, $value in typography.$font-sizes {
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$size}";
-
-        @include utility.create(
-          $selector,
-          font-size,
-          $value,
-          $screen: $screen-name
-        );
-      }
-
-      // Create utility classes for each type of text style in Graupl.
-      // These will apply not only the font size, but also the margin, font weight, and line height.
-      // This will allow for a more consistent and maintainable typography system.
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}paragraph";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$paragraph-margin,
-          font-size: typography.$paragraph-font-size,
-          font-weight: typography.$paragraph-font-weight,
-          line-height: typography.$paragraph-line-height,
-        ),
-        $screen: $screen-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}small";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$small-margin,
-          font-size: typography.$small-font-size,
-          font-weight: typography.$small-font-weight,
-          line-height: typography.$small-line-height,
-        ),
-        $screen: $screen-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h1";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h1-margin,
-          font-family: typography.$h1-font-family,
-          font-size: typography.$h1-font-size,
-          font-weight: typography.$h1-font-weight,
-          line-height: typography.$h1-line-height,
-        ),
-        $screen: $screen-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h2";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h2-margin,
-          font-family: typography.$h2-font-family,
-          font-size: typography.$h2-font-size,
-          font-weight: typography.$h2-font-weight,
-          line-height: typography.$h2-line-height,
-        ),
-        $screen: $screen-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h3";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h3-margin,
-          font-family: typography.$h3-font-family,
-          font-size: typography.$h3-font-size,
-          font-weight: typography.$h3-font-weight,
-          line-height: typography.$h3-line-height,
-        ),
-        $screen: $screen-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h4";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h4-margin,
-          font-family: typography.$h4-font-family,
-          font-size: typography.$h4-font-size,
-          font-weight: typography.$h4-font-weight,
-          line-height: typography.$h4-line-height,
-        ),
-        $screen: $screen-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h5";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h5-margin,
-          font-family: typography.$h5-font-family,
-          font-size: typography.$h5-font-size,
-          font-weight: typography.$h5-font-weight,
-          line-height: typography.$h5-line-height,
-        ),
-        $screen: $screen-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h6";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h6-margin,
-          font-family: typography.$h6-font-family,
-          font-size: typography.$h6-font-size,
-          font-weight: typography.$h6-font-weight,
-          line-height: typography.$h6-line-height,
-        ),
-        $screen: $screen-name
-      );
-
-      // For each font weight property, create a utility class.
-      @each $weight, $value in typography.$font-weights {
-        $selector: "#{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight}";
-
-        @include utility.create(
-          $selector,
-          font-weight,
-          $value,
-          $screen: $screen-name
-        );
-      }
-
-      // For each font style property, create a utility class.
-      @each $style, $value in defaults.$font-style-properties {
-        $selector: "#{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style}";
-
-        @include utility.create(
-          $selector,
-          font-style,
-          $value,
-          $screen: $screen-name
-        );
-      }
-
-      // For each text transform property, create a utility class.
-      @each $transform, $value in defaults.$text-transform-properties {
-        $selector: "#{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform}";
-
-        @include utility.create(
-          $selector,
-          text-transform,
-          $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-prefix}#{$theme-name}#{root-defaults.$utility-theme-aware-separator}";
-
-        // For each font size property, create a utility class.
-        @each $size, $value in typography.$font-sizes {
-          $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$size}";
-
-          @include utility.create(
-            $selector,
-            font-size,
-            $value,
-            $theme: $theme-name
-          );
-        }
-
-        // Create utility classes for each type of text style in Graupl.
-        // These will apply not only the font size, but also the margin, font weight, and line height.
-        // This will allow for a more consistent and maintainable typography system.
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}paragraph";
-
-        @include utility.create-mapped(
-          $selector,
-          (
-            margin: typography.$paragraph-margin,
-            font-size: typography.$paragraph-font-size,
-            font-weight: typography.$paragraph-font-weight,
-            line-height: typography.$paragraph-line-height,
-          ),
-          $theme: $theme-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}small";
-
-        @include utility.create-mapped(
-          $selector,
-          (
-            margin: typography.$small-margin,
-            font-size: typography.$small-font-size,
-            font-weight: typography.$small-font-weight,
-            line-height: typography.$small-line-height,
-          ),
-          $theme: $theme-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h1";
-
-        @include utility.create-mapped(
-          $selector,
-          (
-            margin: typography.$h1-margin,
-            font-family: typography.$h1-font-family,
-            font-size: typography.$h1-font-size,
-            font-weight: typography.$h1-font-weight,
-            line-height: typography.$h1-line-height,
-          ),
-          $theme: $theme-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h2";
-
-        @include utility.create-mapped(
-          $selector,
-          (
-            margin: typography.$h2-margin,
-            font-family: typography.$h2-font-family,
-            font-size: typography.$h2-font-size,
-            font-weight: typography.$h2-font-weight,
-            line-height: typography.$h2-line-height,
-          ),
-          $theme: $theme-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h3";
-
-        @include utility.create-mapped(
-          $selector,
-          (
-            margin: typography.$h3-margin,
-            font-family: typography.$h3-font-family,
-            font-size: typography.$h3-font-size,
-            font-weight: typography.$h3-font-weight,
-            line-height: typography.$h3-line-height,
-          ),
-          $theme: $theme-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h4";
-
-        @include utility.create-mapped(
-          $selector,
-          (
-            margin: typography.$h4-margin,
-            font-family: typography.$h4-font-family,
-            font-size: typography.$h4-font-size,
-            font-weight: typography.$h4-font-weight,
-            line-height: typography.$h4-line-height,
-          ),
-          $theme: $theme-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h5";
-
-        @include utility.create-mapped(
-          $selector,
-          (
-            margin: typography.$h5-margin,
-            font-family: typography.$h5-font-family,
-            font-size: typography.$h5-font-size,
-            font-weight: typography.$h5-font-weight,
-            line-height: typography.$h5-line-height,
-          ),
-          $theme: $theme-name
-        );
-
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h6";
-
-        @include utility.create-mapped(
-          $selector,
-          (
-            margin: typography.$h6-margin,
-            font-family: typography.$h6-font-family,
-            font-size: typography.$h6-font-size,
-            font-weight: typography.$h6-font-weight,
-            line-height: typography.$h6-line-height,
-          ),
-          $theme: $theme-name
-        );
-
-        // For each font weight property, create a utility class.
-        @each $weight, $value in typography.$font-weights {
-          $selector: "#{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight}";
-
-          @include utility.create(
-            $selector,
-            font-weight,
-            $value,
-            $theme: $theme-name
-          );
-        }
-
-        // For each font style property, create a utility class.
-        @each $style, $value in defaults.$font-style-properties {
-          $selector: "#{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style}";
-
-          @include utility.create(
-            $selector,
-            font-style,
-            $value,
-            $theme: $theme-name
-          );
-        }
-
-        // For each text transform property, create a utility class.
-        @each $transform, $value in defaults.$text-transform-properties {
-          $selector: "#{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform}";
-
-          @include utility.create(
-            $selector,
-            text-transform,
-            $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-prefix}#{$state-name}#{root-defaults.$utility-state-aware-separator}";
-
-      // For each font size property, create a utility class.
-      @each $size, $value in typography.$font-sizes {
-        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$size}";
-
-        @include utility.create(
-          $selector,
-          font-size,
-          $value,
-          $state: $state-name
-        );
-      }
-
-      // Create utility classes for each type of text style in Graupl.
-      // These will apply not only the font size, but also the margin, font weight, and line height.
-      // This will allow for a more consistent and maintainable typography system.
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}paragraph";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$paragraph-margin,
-          font-size: typography.$paragraph-font-size,
-          font-weight: typography.$paragraph-font-weight,
-          line-height: typography.$paragraph-line-height,
-        ),
-        $state: $state-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}small";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$small-margin,
-          font-size: typography.$small-font-size,
-          font-weight: typography.$small-font-weight,
-          line-height: typography.$small-line-height,
-        ),
-        $state: $state-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h1";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h1-margin,
-          font-family: typography.$h1-font-family,
-          font-size: typography.$h1-font-size,
-          font-weight: typography.$h1-font-weight,
-          line-height: typography.$h1-line-height,
-        ),
-        $state: $state-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h2";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h2-margin,
-          font-family: typography.$h2-font-family,
-          font-size: typography.$h2-font-size,
-          font-weight: typography.$h2-font-weight,
-          line-height: typography.$h2-line-height,
-        ),
-        $state: $state-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h3";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h3-margin,
-          font-family: typography.$h3-font-family,
-          font-size: typography.$h3-font-size,
-          font-weight: typography.$h3-font-weight,
-          line-height: typography.$h3-line-height,
-        ),
-        $state: $state-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h4";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h4-margin,
-          font-family: typography.$h4-font-family,
-          font-size: typography.$h4-font-size,
-          font-weight: typography.$h4-font-weight,
-          line-height: typography.$h4-line-height,
-        ),
-        $state: $state-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h5";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h5-margin,
-          font-family: typography.$h5-font-family,
-          font-size: typography.$h5-font-size,
-          font-weight: typography.$h5-font-weight,
-          line-height: typography.$h5-line-height,
-        ),
-        $state: $state-name
-      );
-
-      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}h6";
-
-      @include utility.create-mapped(
-        $selector,
-        (
-          margin: typography.$h6-margin,
-          font-family: typography.$h6-font-family,
-          font-size: typography.$h6-font-size,
-          font-weight: typography.$h6-font-weight,
-          line-height: typography.$h6-line-height,
-        ),
-        $state: $state-name
-      );
-
-      // For each font weight property, create a utility class.
-      @each $weight, $value in typography.$font-weights {
-        $selector: "#{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight}";
-
-        @include utility.create(
-          $selector,
-          font-weight,
-          $value,
-          $state: $state-name
-        );
-      }
-
-      // For each font style property, create a utility class.
-      @each $style, $value in defaults.$font-style-properties {
-        $selector: "#{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style}";
-
-        @include utility.create(
-          $selector,
-          font-style,
-          $value,
-          $state: $state-name
-        );
-      }
-
-      // For each text transform property, create a utility class.
-      @each $transform, $value in defaults.$text-transform-properties {
-        $selector: "#{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform}";
-
-        @include utility.create(
-          $selector,
-          text-transform,
-          $value,
-          $state: $state-name
-        );
-      }
-    }
-  }
-}

package/src/scss/utilities/typography/_variables.scss

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

@@ -1,27 +0,0 @@
-// @graupl/graupl visibility 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";
-
-// Visibility properties.
-$visibility-selector-prefix: "visibility-" !default;
-$base-visibility-properties: (
-  visible: visible,
-  hidden: hidden,
-  collapse: collapse,
-);
-$custom-visibility-properties: () !default;
-$visibility-properties: map.merge(
-  $base-visibility-properties,
-  $custom-visibility-properties
-);
-
-// Utility modifier flags.
-$screen-aware: true !default;
-$theme-aware: false !default;
-$state-aware: false !default;