@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.11

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

@@ -1,1089 +0,0 @@
-// @graupl/core typography utilities styles.
-//
-// This file generates the typography utility classes provided by Graupl.
-//
-// The following classes are generated by default:
-// - `.text-xs`: Sets the font size property to Graupl's extra small font size.
-// - `.text-sm`: Sets the font size property to Graupl's small font size.
-// - `.text-base`: Sets the font size property to Graupl's base font size.
-// - `.text-lg`: Sets the font size property to Graupl's large font size.
-// - `.text-xl`: Sets the font size property to Graupl's extra large font size.
-// - `.text-2xl`: Sets the font size property to Graupl's 2 extra large font size.
-// - `.text-3xl`: Sets the font size property to Graupl's 3 extra large font size.
-// - `.text-4xl`: Sets the font size property to Graupl's 4 extra large font size.
-// - `.text-5xl`: Sets the font size property to Graupl's 5 extra large font size.
-// - `.text-paragraph`: Sets the font size, margin, font weight, and line height properties to Graupl's paragraph styles.
-// - `.text-small`: Sets the font size, margin, font weight, and line height properties to Graupl's small text styles.
-// - `.text-h1`: Sets the font size, margin, font family, font weight, and line height properties to Graupl's h1 styles.
-// - `.text-h2`: Sets the font size, margin, font family, font weight, and line height properties to Graupl's h2 styles.
-// - `.text-h3`: Sets the font size, margin, font family, font weight, and line height properties to Graupl's h3 styles.
-// - `.text-h4`: Sets the font size, margin, font family, font weight, and line height properties to Graupl's h4 styles.
-// - `.text-h5`: Sets the font size, margin, font family, font weight, and line height properties to Graupl's h5 styles.
-// - `.text-h6`: Sets the font size, margin, font family, font weight, and line height properties to Graupl's h6 styles.
-// - `.font-weight-light`: Sets the font weight property to Graupl's light font weight.
-// - `.font-weight-normal`: Sets the font weight property to Graupl's normal font weight.
-// - `.font-weight-bold`: Sets the font weight property to Graupl's bold font weight.
-// - `.font-normal`: Sets the font style property to `normal`.
-// - `.font-italic`: Sets the font style property to `italic`.
-// - `.text-uppercase`: Sets the text transform property to `uppercase`.
-// - `.text-lowercase`: Sets the text transform property to `lowercase`.
-// - `.text-capitalize`: Sets the text transform property to `capitalize`.
-// - `.text-none`: Sets the text transform property to `none`.
-//
-// The following custom properties control the generated classes:
-// - N/A.
-//
-// 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.
-// - `$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.
-// - `$container-aware`: A flag to generate container-aware utility classes.
-// - `$screen-aware-separator`: The separator for screen-aware utility classes.
-// - `$theme-aware-separator`: The separator for theme-aware utility classes.
-// - `$state-aware-separator`: The separator for state-aware utility classes.
-// - `$container-aware-separator`: The separator for container-aware utility classes.
-// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
-// - `$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.
-// - `$text-selector-prefix`: The prefix for the text utility classes.
-// - `$font-weight-selector-prefix`: The prefix for the font weight utility classes.
-// - `$font-style-selector-prefix`: The prefix for the font style utility classes.
-// - `$base-font-style-properties`: The base properties and values for the font style utility classes.
-// - `$custom-font-style-properties`: The custom properties and values for the font style utility classes.
-// - `$font-style-properties`: The combined properties and values for the font style utility classes.
-// - `$text-transform-selector-prefix`: The prefix for the text transform utility classes.
-// - `$base-text-transform-properties`: The base properties and values for the text transform utility classes.
-// - `$custom-text-transform-properties`: The custom properties and values for the text transform utility classes.
-// - `$text-transform-properties`: The combined properties and values for the text transform utility classes.
-//
-// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
-// By default, no responsive utility classes are generated.
-//
-// When set to true, screen-aware utility classes will be generated for each screen size in the following pattern:
-// - `.{screen-prefix}{screen-name}:{prefix}{value}`
-//
-// e.g. `.md:text-2xl` will set the `font-size` property to Graupl's 2 extra large font size on screens equal to or larger than the `md` breakpoint.
-//
-// When set to true, theme-aware utility classes will be generated for each theme in the following pattern:
-// - `.{theme-prefix}{theme-name}:{prefix}{value}`
-//
-// e.g. `.dark:text-paragraph` will set the `font-size`, `margin`, `font-weight`, and `line-height` properties to Graupl's paragraph styles when the `dark` theme is active.
-//
-// When set to true, state-aware utility classes will be generated for each state in the following pattern:
-// - `.{state-prefix}{state-name}:{prefix}{value}`
-//
-// e.g. `.hover:text-paragraph` will set the `font-size`, `margin`, `font-weight`, and `line-height` properties to Graupl's paragraph styles when the element is hovered.
-//
-// When set to true, container-aware utility classes will be generated for each container in the following pattern:
-// - `.{container-prefix}{container-name}:{prefix}{value}`
-//
-// e.g. `.cq:md:text-paragraph` will set the `font-size`, `margin`, `font-weight`, and `line-height` properties to Graupl's paragraph styles when the parent container is larger than the `md` breakpoint.
-//
-// @example
-//   <span class="text-h3">This is an h3-styled element.</span>
-
-@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: defaults.$selector-base;
-
-  // For each font size property, create a utility class.
-  @each $size, $value in typography.$font-sizes {
-    // e.g. `.text-2xl` or `.text-3xl`
-    $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.
-  //
-  // `.text-paragraph`
-  $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,
-      color: typography.$paragraph-color,
-    ),
-    $important: defaults.$use-important
-  );
-
-  // `.text-small`
-  $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,
-      color: typography.$small-color,
-    ),
-    $important: defaults.$use-important
-  );
-
-  // `.text-h1`
-  $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,
-      color: typography.$h1-color,
-    ),
-    $important: defaults.$use-important
-  );
-
-  // `.text-h2`
-  $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,
-      color: typography.$h2-color,
-    ),
-    $important: defaults.$use-important
-  );
-
-  // `.text-h3`
-  $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,
-      color: typography.$h3-color,
-    ),
-    $important: defaults.$use-important
-  );
-
-  // `.text-h4`
-  $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,
-      color: typography.$h4-color,
-    ),
-    $important: defaults.$use-important
-  );
-
-  // `.text-h5`
-  $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,
-      color: typography.$h5-color,
-    ),
-    $important: defaults.$use-important
-  );
-
-  // `.text-h6`
-  $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,
-      color: typography.$h6-color,
-    ),
-    $important: defaults.$use-important
-  );
-
-  // For each font weight property, create a utility class.
-  @each $weight, $value in typography.$font-weights {
-    // e.g. `.font-bold` or `.font-normal`
-    $selector: #{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight};
-
-    @include utility.create(
-      $selector,
-      font-weight,
-      $value,
-      $important: defaults.$use-important
-    );
-  }
-
-  // For each font style property, create a utility class.
-  @each $style, $value in defaults.$font-style-properties {
-    // e.g. `.font-normal` or `.font-italic`
-    $selector: #{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style};
-
-    @include utility.create(
-      $selector,
-      font-style,
-      $value,
-      $important: defaults.$use-important
-    );
-  }
-
-  // For each text transform property, create a utility class.
-  @each $transform, $value in defaults.$text-transform-properties {
-    // e.g. `.text-uppercase` or `.text-lowercase`
-    $selector: #{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform};
-
-    @include utility.create(
-      $selector,
-      text-transform,
-      $value,
-      $important: defaults.$use-important
-    );
-  }
-
-  // Generate screen-aware utilities.
-  @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
-    @each $screen-name in map.keys(root-defaults.$screen-sizes) {
-      // e.g. `.md:` or `.lg:`
-      $selector-prefix: #{defaults.$selector-base}#{defaults.$screen-aware-selector-prefix}#{$screen-name}#{defaults.$screen-aware-separator};
-
-      // For each font size property, create a utility class.
-      @each $size, $value in typography.$font-sizes {
-        // e.g. `.md:text-2xl` or `.lg:text-3xl`
-        $selector: #{$selector-prefix}#{defaults.$text-selector-prefix}#{$size};
-
-        @include utility.create(
-          $selector,
-          font-size,
-          $value,
-          $important: defaults.$use-important,
-          $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.
-      //
-      // e.g. `.md:text-paragraph` or `.lg:text-paragraph`
-      $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,
-          color: typography.$paragraph-color,
-        ),
-        $important: defaults.$use-important,
-        $screen: $screen-name
-      );
-
-      // e.g. `.md:text-small` or `.lg:text-small`
-      $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,
-          color: typography.$small-color,
-        ),
-        $important: defaults.$use-important,
-        $screen: $screen-name
-      );
-
-      // e.g. `.md:text-h1` or `.lg:text-h1`
-      $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,
-          color: typography.$h1-color,
-        ),
-        $important: defaults.$use-important,
-        $screen: $screen-name
-      );
-
-      // e.g. `.md:text-h2` or `.lg:text-h2`
-      $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,
-          color: typography.$h2-color,
-        ),
-        $important: defaults.$use-important,
-        $screen: $screen-name
-      );
-
-      // e.g. `.md:text-h3` or `.lg:text-h3`
-      $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,
-          color: typography.$h3-color,
-        ),
-        $important: defaults.$use-important,
-        $screen: $screen-name
-      );
-
-      // e.g. `.md:text-h4` or `.lg:text-h4`
-      $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,
-          color: typography.$h4-color,
-        ),
-        $important: defaults.$use-important,
-        $screen: $screen-name
-      );
-
-      // e.g. `.md:text-h5` or `.lg:text-h5`
-      $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,
-          color: typography.$h5-color,
-        ),
-        $important: defaults.$use-important,
-        $screen: $screen-name
-      );
-
-      // e.g. `.md:text-h6` or `.lg:text-h6`
-      $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,
-          color: typography.$h6-color,
-        ),
-        $important: defaults.$use-important,
-        $screen: $screen-name
-      );
-
-      // For each font weight property, create a utility class.
-      @each $weight, $value in typography.$font-weights {
-        // e.g. `.md:font-bold` or `.lg:font-normal`
-        $selector: #{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight};
-
-        @include utility.create(
-          $selector,
-          font-weight,
-          $value,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-      }
-
-      // For each font style property, create a utility class.
-      @each $style, $value in defaults.$font-style-properties {
-        // e.g. `.md:font-normal` or `.lg:font-italic`
-        $selector: #{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style};
-
-        @include utility.create(
-          $selector,
-          font-style,
-          $value,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-      }
-
-      // For each text transform property, create a utility class.
-      @each $transform, $value in defaults.$text-transform-properties {
-        // e.g. `.md:text-uppercase` or `.lg:text-lowercase`
-        $selector: #{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform};
-
-        @include utility.create(
-          $selector,
-          text-transform,
-          $value,
-          $important: defaults.$use-important,
-          $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 {
-        // e.g. `.dark:` or `.light:`
-        $selector-prefix: #{defaults.$selector-base}#{defaults.$theme-aware-selector-prefix}#{$theme-name}#{defaults.$theme-aware-separator};
-
-        // For each font size property, create a utility class.
-        @each $size, $value in typography.$font-sizes {
-          // e.g. `.dark:text-2xl` or `.light:text-3xl`
-          $selector: #{$selector-prefix}#{defaults.$text-selector-prefix}#{$size};
-
-          @include utility.create(
-            $selector,
-            font-size,
-            $value,
-            $important: defaults.$use-important,
-            $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.
-        //
-        // e.g. `.dark:text-paragraph` or `.light:text-paragraph`
-        $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,
-            color: typography.$paragraph-color,
-          ),
-          $important: defaults.$use-important,
-          $theme: $theme-name
-        );
-
-        // e.g. `.dark:text-small` or `.light:text-small`
-        $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,
-            color: typography.$small-color,
-          ),
-          $important: defaults.$use-important,
-          $theme: $theme-name
-        );
-
-        // e.g. `.dark:text-h1` or `.light:text-h1`
-        $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,
-            color: typography.$h1-color,
-          ),
-          $important: defaults.$use-important,
-          $theme: $theme-name
-        );
-
-        // e.g. `.dark:text-h2` or `.light:text-h2`
-        $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,
-            color: typography.$h2-color,
-          ),
-          $important: defaults.$use-important,
-          $theme: $theme-name
-        );
-
-        // e.g. `.dark:text-h3` or `.light:text-h3`
-        $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,
-            color: typography.$h3-color,
-          ),
-          $important: defaults.$use-important,
-          $theme: $theme-name
-        );
-
-        // e.g. `.dark:text-h4` or `.light:text-h4`
-        $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,
-            color: typography.$h4-color,
-          ),
-          $important: defaults.$use-important,
-          $theme: $theme-name
-        );
-
-        // e.g. `.dark:text-h5` or `.light:text-h5`
-        $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,
-            color: typography.$h5-color,
-          ),
-          $important: defaults.$use-important,
-          $theme: $theme-name
-        );
-
-        // e.g. `.dark:text-h6` or `.light:text-h6`
-        $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,
-            color: typography.$h6-color,
-          ),
-          $important: defaults.$use-important,
-          $theme: $theme-name
-        );
-
-        // For each font weight property, create a utility class.
-        @each $weight, $value in typography.$font-weights {
-          // e.g. `.dark:font-bold` or `.light:font-normal`
-          $selector: #{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight};
-
-          @include utility.create(
-            $selector,
-            font-weight,
-            $value,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-        }
-
-        // For each font style property, create a utility class.
-        @each $style, $value in defaults.$font-style-properties {
-          // e.g. `.dark:font-normal` or `.light:font-italic`
-          $selector: #{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style};
-
-          @include utility.create(
-            $selector,
-            font-style,
-            $value,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-        }
-
-        // For each text transform property, create a utility class.
-        @each $transform, $value in defaults.$text-transform-properties {
-          // e.g. `.dark:text-uppercase` or `.light:text-lowercase`
-          $selector: #{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform};
-
-          @include utility.create(
-            $selector,
-            text-transform,
-            $value,
-            $important: defaults.$use-important,
-            $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 {
-      // e.g. `.hover:` or `.focus:`
-      $selector-prefix: #{defaults.$selector-base}#{defaults.$state-aware-selector-prefix}#{$state-name}#{defaults.$state-aware-separator};
-
-      // For each font size property, create a utility class.
-      @each $size, $value in typography.$font-sizes {
-        // e.g. `.hover:text-2xl` or `.focus:text-3xl`
-        $selector: #{$selector-prefix}#{defaults.$text-selector-prefix}#{$size};
-
-        @include utility.create(
-          $selector,
-          font-size,
-          $value,
-          $important: defaults.$use-important,
-          $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.
-      //
-      // e.g. `.hover:text-paragraph` or `.focus:text-paragraph`
-      $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,
-          color: typography.$paragraph-color,
-        ),
-        $important: defaults.$use-important,
-        $state: $state-name
-      );
-
-      // e.g. `.hover:text-small` or `.focus:text-small`
-      $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,
-          color: typography.$small-color,
-        ),
-        $important: defaults.$use-important,
-        $state: $state-name
-      );
-
-      // e.g. `.hover:text-h1` or `.focus:text-h1`
-      $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,
-          color: typography.$h1-color,
-        ),
-        $important: defaults.$use-important,
-        $state: $state-name
-      );
-
-      // e.g. `.hover:text-h2` or `.focus:text-h2`
-      $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,
-          color: typography.$h2-color,
-        ),
-        $important: defaults.$use-important,
-        $state: $state-name
-      );
-
-      // e.g. `.hover:text-h3` or `.focus:text-h3`
-      $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,
-          color: typography.$h3-color,
-        ),
-        $important: defaults.$use-important,
-        $state: $state-name
-      );
-
-      // e.g. `.hover:text-h4` or `.focus:text-h4`
-      $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,
-          color: typography.$h4-color,
-        ),
-        $important: defaults.$use-important,
-        $state: $state-name
-      );
-
-      // e.g. `.hover:text-h5` or `.focus:text-h5`
-      $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,
-          color: typography.$h5-color,
-        ),
-        $important: defaults.$use-important,
-        $state: $state-name
-      );
-
-      // e.g. `.hover:text-h6` or `.focus:text-h6`
-      $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,
-          color: typography.$h6-color,
-        ),
-        $important: defaults.$use-important,
-        $state: $state-name
-      );
-
-      // For each font weight property, create a utility class.
-      @each $weight, $value in typography.$font-weights {
-        // e.g. `.hover:font-bold` or `.focus:font-normal`
-        $selector: #{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight};
-
-        @include utility.create(
-          $selector,
-          font-weight,
-          $value,
-          $important: defaults.$use-important,
-          $state: $state-name
-        );
-      }
-
-      // For each font style property, create a utility class.
-      @each $style, $value in defaults.$font-style-properties {
-        // e.g. `.hover:font-normal` or `.focus:font-italic`
-        $selector: #{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style};
-
-        @include utility.create(
-          $selector,
-          font-style,
-          $value,
-          $important: defaults.$use-important,
-          $state: $state-name
-        );
-      }
-
-      // For each text transform property, create a utility class.
-      @each $transform, $value in defaults.$text-transform-properties {
-        // e.g. `.hover:text-uppercase` or `.focus:text-lowercase`
-        $selector: #{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform};
-
-        @include utility.create(
-          $selector,
-          text-transform,
-          $value,
-          $important: defaults.$use-important,
-          $state: $state-name
-        );
-      }
-    }
-  }
-
-  // Generate container-aware utilities.
-  @if defaults.$container-aware and root-defaults.$container-aware-utilities {
-    @each $container-name in map.keys(root-defaults.$container-sizes) {
-      // e.g. `.md:` or `.lg:`
-      $selector-prefix: #{defaults.$selector-base}#{defaults.$container-aware-selector-prefix}#{$container-name}#{defaults.$container-aware-separator};
-
-      // For each font size property, create a utility class.
-      @each $size, $value in typography.$font-sizes {
-        // e.g. `.md:text-2xl` or `.lg:text-3xl`
-        $selector: #{$selector-prefix}#{defaults.$text-selector-prefix}#{$size};
-
-        @include utility.create(
-          $selector,
-          font-size,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-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.
-      //
-      // e.g. `.md:text-paragraph` or `.lg:text-paragraph`
-      $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,
-          color: typography.$paragraph-color,
-        ),
-        $important: defaults.$use-important,
-        $container: $container-name
-      );
-
-      // e.g. `.md:text-small` or `.lg:text-small`
-      $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,
-          color: typography.$small-color,
-        ),
-        $important: defaults.$use-important,
-        $container: $container-name
-      );
-
-      // e.g. `.md:text-h1` or `.lg:text-h1`
-      $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,
-          color: typography.$h1-color,
-        ),
-        $important: defaults.$use-important,
-        $container: $container-name
-      );
-
-      // e.g. `.md:text-h2` or `.lg:text-h2`
-      $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,
-          color: typography.$h2-color,
-        ),
-        $important: defaults.$use-important,
-        $container: $container-name
-      );
-
-      // e.g. `.md:text-h3` or `.lg:text-h3`
-      $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,
-          color: typography.$h3-color,
-        ),
-        $important: defaults.$use-important,
-        $container: $container-name
-      );
-
-      // e.g. `.md:text-h4` or `.lg:text-h4`
-      $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,
-          color: typography.$h4-color,
-        ),
-        $important: defaults.$use-important,
-        $container: $container-name
-      );
-
-      // e.g. `.md:text-h5` or `.lg:text-h5`
-      $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,
-          color: typography.$h5-color,
-        ),
-        $important: defaults.$use-important,
-        $container: $container-name
-      );
-
-      // e.g. `.md:text-h6` or `.lg:text-h6`
-      $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,
-          color: typography.$h6-color,
-        ),
-        $important: defaults.$use-important,
-        $container: $container-name
-      );
-
-      // For each font weight property, create a utility class.
-      @each $weight, $value in typography.$font-weights {
-        // e.g. `.md:font-bold` or `.lg:font-normal`
-        $selector: #{$selector-prefix}#{defaults.$font-weight-selector-prefix}#{$weight};
-
-        @include utility.create(
-          $selector,
-          font-weight,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-      }
-
-      // For each font style property, create a utility class.
-      @each $style, $value in defaults.$font-style-properties {
-        // e.g. `.md:font-normal` or `.lg:font-italic`
-        $selector: #{$selector-prefix}#{defaults.$font-style-selector-prefix}#{$style};
-
-        @include utility.create(
-          $selector,
-          font-style,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-      }
-
-      // For each text transform property, create a utility class.
-      @each $transform, $value in defaults.$text-transform-properties {
-        // e.g. `.md:text-uppercase` or `.lg:text-lowercase`
-        $selector: #{$selector-prefix}#{defaults.$text-transform-selector-prefix}#{$transform};
-
-        @include utility.create(
-          $selector,
-          text-transform,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-      }
-    }
-  }
-}