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

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

@@ -0,0 +1,1089 @@
+// @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
+        );
+      }
+    }
+  }
+}