beathers 5.7.6 → 5.9.1

package/scss/style/_typographic.scss

@@ -1,345 +1,400 @@
-@use 'sass:meta';
-@use 'sass:string';
-@use 'sass:map';
-@use 'sass:list';
-@use '../variables' as vars;
-@use '../functions/validations' as val;
-@use '../functions/typographic' as typo;
-@use '../settings/configs' as configs;
-@use '../functions/mediaQueries' as mQ;
-@use '../settings/index' as settings;
-@use '../settings/defaults' as defs;
-
-// Definitions
-$useFontFamilies: if(vars.$useFontFamilies != null, vars.$useFontFamilies, settings.$useFontFamilies);
-$useFontFamiliesMediaQueries: if(
-  vars.$useFontFamiliesMediaQueries != null,
-  vars.$useFontFamiliesMediaQueries,
-  settings.$useFontFamiliesMediaQueries
-);
-$fonts: if(vars.$fonts != (), vars.$fonts, defs.$fonts);
-$fontWeights: if(vars.$fontWeights != (), vars.$fontWeights, defs.$fontWeights);
-$fontStyles: if(vars.$fontStyles != (), vars.$fontStyles, defs.$fontStyles);
-$fontFormat: if(vars.$fontFormat != (), vars.$fontFormat, defs.$fontFormat);
-$defaultFontFamilies: if(vars.$defaultFontFamilies != null, vars.$defaultFontFamilies, defs.$defaultFontFamilies);
-$useFontSizes: if(vars.$useFontSizes != null, vars.$useFontSizes, settings.$useFontSizes);
-$useFontSizesMediaQueries: if(
-  vars.$useFontSizesMediaQueries != null,
-  vars.$useFontSizesMediaQueries,
-  settings.$useFontSizesMediaQueries
-);
-$fontSizes: if(vars.$fontSizes != (), vars.$fontSizes, defs.$fontSizes);
-$useFontShapes: if(vars.$useFontShapes != null, vars.$useFontShapes, settings.$useFontShapes);
-$useFontShapesMediaQueries: if(
-  vars.$useFontShapesMediaQueries != null,
-  vars.$useFontShapesMediaQueries,
-  settings.$useFontShapesMediaQueries
-);
-$useTextAligns: if(vars.$useTextAligns != null, vars.$useTextAligns, settings.$useTextAligns);
-$useTextAlignsMediaQueries: if(
-  vars.$useTextAlignsMediaQueries != null,
-  vars.$useTextAlignsMediaQueries,
-  settings.$useTextAlignsMediaQueries
-);
-$useTextTruncate: if(vars.$useTextTruncate != null, vars.$useTextTruncate, settings.$useTextTruncate);
-$useTextTruncateMediaQueries: if(
-  vars.$useTextTruncateMediaQueries != null,
-  vars.$useTextTruncateMediaQueries,
-  settings.$useTextTruncateMediaQueries
-);
-$textTruncate: if(vars.$textTruncate != (), vars.$textTruncate, defs.$textTruncate);
-
-// Typographic Utilities
-// --------------------------------------
-// This file generates various typographic utility classes and @font-face rules
-// based on the settings and variables defined in the project.
-// Each section can be enabled or disabled via the `$use...` variables.
-
-// Font Families & @font-face ----- ----- ----- -----
-//
-// @description
-//   Generates @font-face rules based on the `vars.$fonts` map and
-//   corresponding utility classes for applying font families, weights, and styles.
-//   The generation of these rules and classes is controlled by the
-//   `$useFontFamilies` boolean variable.
-//
-// @see $useFontFamilies
-// @see vars.$fonts
-// @see vars.$fontWeights
-// @see vars.$fontStyles
-// @see configs.$fontWeightsValues (for mapping weight names to numerical values)
-// @see $defaultFontFamilies (for fallback fonts)
-// @see typo.font (mixin used for @font-face generation)
-// @see mQ.multiSizes (mixin used for responsive class generation)
-//
-// @generatedClasses
-//   - @font-face rules for each font variant.
-//   - Font family/weight classes:
-//     - e.g., `.regular`, `.bold`, `.italic`
-//     - e.g., `.fontName-0`, `.fontName-1` (if multiple fonts with same weight names, indexed by $fI)
-//   - Responsive font family/weight classes (if `mQ.multiSizes` is configured):
-//     - e.g., `md:regular`, `lg:bold`
-//   - Font style classes (applied as modifiers):
-//     - e.g., `.regular.italic`
-//
-// @example scss - Configuration in vars.$fonts (simplified)
-//   vars.$fonts: (
-//     sans: (
-//       weights: (regular, bold),
-//       styles: (normal, italic),
-//       variants: (
-//         latin: (title: "OpenSans") // `title` here is used for font-family in @font-face
-//       )
-//     )
-//   );
-//
-// @example css - Generated CSS (simplified, assuming $fI is 0 for the first font)
-//   @font-face { font-family: "OpenSans-0"; src: local("OpenSans Regular"); font-weight: 400; font-style: normal; }
-//   .regular { font-family: "OpenSans-0", "Fallback Font"; font-weight: 400; }
-//   .regular.italic { font-style: italic; }
-//   .bold { font-family: "OpenSans-0", "Fallback Font"; font-weight: 700; }
-//   // ... responsive versions if applicable ...
-//
-
-@if $useFontFamilies {
-  // Font families ----- -----
-  $fI: 0;
-  @each $fontKey, $font in $fonts {
-    // Validate parameters
-    $checkedFontKey: val.string($fontKey, 'Typographic.fonts.title');
-    $checkedFont: val.map($font, 'Typographic.fonts');
-
-    $weights: map.get($font, 'weights');
-    $weights: if($weights != null, map.get($font, 'weights'), $fontWeights);
-    $styles: map.get($font, 'styles');
-    $styles: if($styles != null, map.get($font, 'styles'), $fontStyles);
-    $variants: map.get($font, 'variants');
-
-    // Validate parameters
-    $checkedWeights: val.list($weights, 'Typographic.fontFace.weights');
-    $checkedStyles: val.list($styles, 'Typographic.fontFace.styles');
-    $checkedVariants: val.map($variants, 'Typographic.fontFace.variants');
-
-    @each $weight in $weights {
-      @each $style in $styles {
-        @each $lang, $fontFace in $variants {
-          $title: map.get($fontFace, 'title');
-          $unicode: if(map.has-key($fontFace, 'unicode'), map.get($fontFace, 'unicode'), null);
-          $format: if(map.has-key($fontFace, 'format'), map.get($fontFace, 'format'), $fontFormat);
-          $isLocal: if(map.has-key($fontFace, 'local'), map.get($fontFace, 'isLocal'), true);
-          $externalUrl: if(map.has-key($fontFace, 'url'), map.get($fontFace, 'url'), null);
-
-          // Validate parameters
-          $checkedIsLocal: val.boolean($isLocal, 'Typographic.fontFace.local');
-          $checkedTitle: val.string($title, 'Typographic.fontFace.title');
-          $checkedFormat: val.string($format, 'Typographic.fontFace.format');
-          @if $unicode {
-            $checkedUnicode: val.string($unicode, 'Typographic.fontFace.unicode');
-          }
-
-          @include typo.font($fontKey, $title, $weight, $format, $style, $fI, $unicode, $isLocal, $externalUrl);
-        }
-      }
-    }
-
-    @include mQ.multiSizes($useFontFamiliesMediaQueries) using ($size, $divider) {
-      @each $weight in $weights {
-        @each $style in $styles {
-          // Font weights
-          // Validate parameters
-          $styleClass: if($fI == 0, $weight, '#{$fontKey}\:#{$weight}');
-          $weightValue: map.get(configs.$fontWeightsValues, $weight);
-
-          $mainClass: if($size, #{$size}#{$divider}#{$styleClass}, $styleClass);
-
-          .#{$mainClass} {
-            font-family:
-              '#{$styleClass}',
-              $defaultFontFamilies if($size, !important, null);
-            font-weight: if($size, $weightValue !important, $weightValue);
-
-            @if meta.type-of($styles) == 'list' and list.length($styles) > 0 {
-              &.#{$style} {
-                font-style: $style;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    $fI: $fI + 1;
-  }
-}
-
-// Font Sizes ----- ----- ----- -----
-//
-// @description
-//   Generates utility classes for applying predefined font sizes.
-//   The generation of these classes is controlled by the
-//   `$useFontSizes` boolean variable.
-//   Font sizes are defined in `$fontSizes`.
-//   Responsive variants are generated using the `mQ.multiSizes` mixin.
-//
-// @see $useFontSizes
-// @see $fontSizes
-// @see mQ.multiSizes
-//
-// @generatedClasses
-//   - Font size classes:
-//     - e.g., `.text-sm`, `.text-base`, `.text-lg` (based on keys in `$fontSizes`)
-//   - Responsive font size classes:
-//     - e.g., `md:text-sm`, `lg:text-base`
-//
-// @example scss - Configuration in $fontSizes
-//   $fontSizes: (
-//     sm: 0.875rem,
-//     base: 1rem
-//   );
-//
-// @example css - Generated CSS (simplified)
-//   .text-sm { font-size: 0.875rem; }
-//   .text-base { font-size: 1rem; }
-//   // ... responsive versions if applicable ...
-//
-@if $useFontSizes {
-  @include mQ.multiSizes($useFontSizesMediaQueries) using ($size, $divider) {
-    @each $fontSize, $value in $fontSizes {
-      $mainClass: if($size, #{$size}#{$divider}#{$fontSize}, $fontSize);
-
-      .#{$mainClass} {
-        font-size: $value if($size, !important, null);
-      }
-    }
-  }
-}
-
-// Font Shapes (Text Transformation) ----- ----- ----- -----
-//
-// @description
-//   Generates utility classes for text transformations (e.g., uppercase, lowercase)
-//   and other font-related shape properties like `font-variant`.
-//   The generation of these classes is controlled by the
-//   `$useFontShapes` boolean variable.
-//   Shapes are defined in `configs.$fontShapes` and applied using the `typo.fontShapes` mixin.
-//   Responsive variants are generated using the `mQ.multiSizes` mixin.
-//
-// @see $useFontShapes
-// @see configs.$fontShapes
-// @see typo.fontShapes
-// @see mQ.multiSizes
-//
-// @generatedClasses
-//   - Text transformation/shape classes:
-//     - e.g., `.uppercase`, `.lowercase`, `.small-caps` (based on `configs.$fontShapes`)
-//   - Responsive text transformation/shape classes:
-//     - e.g., `md:uppercase`, `lg:small-caps`
-//
-// @example scss - Configuration in configs.$fontShapes
-//   configs.$fontShapes: (
-//     text-transform: (uppercase, lowercase, capitalize),
-//     font-variant: (small-caps)
-//   );
-//
-// @example css - Generated CSS (simplified)
-//   .uppercase { text-transform: uppercase; }
-//   .small-caps { font-variant: small-caps; }
-//   // ... responsive versions if applicable ...
-//
-@if $useFontShapes {
-  @include mQ.multiSizes($useFontShapesMediaQueries) using ($size, $divider) {
-    @each $type, $values in configs.$fontShapes {
-      @each $value in $values {
-        @include typo.fontShapes(if($size, '#{$size}#{$divider}#{$value}', $value), $type, $value);
-      }
-    }
-  }
-}
-
-// Text Alignment ----- ----- ----- -----
-//
-// @description
-//   Generates utility classes for text alignment (e.g., left, center, right).
-//   The generation of these classes is controlled by the
-//   `$useTextAligns` boolean variable.
-//   Alignments are defined in `configs.$aligns`.
-//   Responsive variants are generated using the `mQ.multiSizes` mixin.
-//
-// @see $useTextAligns
-// @see configs.$aligns
-// @see mQ.multiSizes
-//
-// @generatedClasses
-//   - Text alignment classes:
-//     - e.g., `.text-left`, `.text-center`, `.text-right`
-//   - Responsive text alignment classes:
-//     - e.g., `md:text-left`, `lg:text-center`
-//
-// @example scss - Configuration in configs.$aligns
-//   configs.$aligns: (left, center, right, justify);
-//
-// @example css - Generated CSS (simplified)
-//   .text-left { text-align: left; }
-//   // ... responsive versions if applicable ...
-//
-@if $useTextAligns {
-  @include mQ.multiSizes($useTextAlignsMediaQueries) using ($size, $divider) {
-    @each $dir in configs.$aligns {
-      // Validate parameters
-      $checkedDir: val.listItem(configs.$aligns, $dir, 'Typographic.fonts.aligns');
-
-      $mainClass: if($size, '#{$size}#{$divider}text-#{$dir}', 'text-#{$dir}');
-      .#{$mainClass} {
-        text-align: if($size, $dir !important, $dir);
-      }
-    }
-  }
-}
-
-// Text Truncation ----- ----- ----- -----
-//
-// @description
-//   Generates utility classes for multi-line text truncation (ellipsis).
-//   The generation of these classes is controlled by the
-//   `$useTextTruncate` boolean variable.
-//   The maximum number of lines is controlled by `$textTruncate`.
-//   Responsive variants are generated using the `mQ.multiSizes` mixin.
-//
-// @see $useTextTruncate
-// @see $textTruncate
-// @see mQ.multiSizes
-//
-// @generatedClasses
-//   - Text truncation classes:
-//     - e.g., `.text-lines:1`, `.text-lines:2`, ... up to `$textTruncate`
-//   - Responsive text truncation classes:
-//     - e.g., `md:text-lines:1`, `lg:text-lines:2`
-//
-// @example scss - Configuration in $textTruncate
-//   $textTruncate: 3;
-//
-// @example css - Generated CSS (simplified for .text-lines:2)
-//   .text-lines\:2 { /* Note: CSS escapes the colon */
-//     display: -webkit-box;
-//     -webkit-line-clamp: 2;
-//     line-clamp: 2;
-//     -webkit-box-orient: vertical;
-//     overflow: hidden;
-//   }
-//   // ... responsive versions if applicable ...
-//
-@if $useTextTruncate {
-  @include mQ.multiSizes($useTextTruncateMediaQueries) using ($size, $divider) {
-    @each $i in $textTruncate {
-      $mainClass: if($size, '#{$size}#{$divider}text-lines#{\:}#{$i}', 'text-lines#{\:}#{$i}');
-
-      .#{$mainClass} {
-        display: -webkit-box;
-        -webkit-line-clamp: #{$i};
-        line-clamp: #{$i};
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-    }
-  }
-}
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:list';
+@use '../variables' as vars;
+@use '../functions/validations' as val;
+@use '../functions/typographic' as typo;
+@use '../settings/configs' as configs;
+@use '../functions/mediaQueries' as mQ;
+@use '../settings/index' as settings;
+@use '../settings/defaults' as defs;
+
+// Definitions
+// Definitions
+$useFontFamilies: if(
+  sass(vars.$useFontFamilies != null): vars.$useFontFamilies; else: settings.$useFontFamilies
+);
+$useFontFamiliesMediaQueries: if(
+  sass(vars.$useFontFamiliesMediaQueries != null): vars.$useFontFamiliesMediaQueries;
+    else: settings.$useFontFamiliesMediaQueries
+);
+$fonts: if(
+  sass(vars.$fonts != null): vars.$fonts; else: defs.$fonts
+);
+$fontWeights: if(
+  sass(vars.$fontWeights != null): vars.$fontWeights; else: defs.$fontWeights
+);
+$fontStyles: if(
+  sass(vars.$fontStyles != null): vars.$fontStyles; else: defs.$fontStyles
+);
+$fontFormat: if(
+  sass(vars.$fontFormat != null): vars.$fontFormat; else: defs.$fontFormat
+);
+$defaultFontFamilies: if(
+  sass(vars.$defaultFontFamilies != null): vars.$defaultFontFamilies; else: defs.$defaultFontFamilies
+);
+$useFontSizes: if(
+  sass(vars.$useFontSizes != null): vars.$useFontSizes; else: settings.$useFontSizes
+);
+$useFontSizesMediaQueries: if(
+  sass(vars.$useFontSizesMediaQueries != null): vars.$useFontSizesMediaQueries; else: settings.$useFontSizesMediaQueries
+);
+$fontSizes: if(
+  sass(vars.$fontSizes != null): vars.$fontSizes; else: defs.$fontSizes
+);
+$useFontShapes: if(
+  sass(vars.$useFontShapes != null): vars.$useFontShapes; else: settings.$useFontShapes
+);
+$useFontShapesMediaQueries: if(
+  sass(vars.$useFontShapesMediaQueries != null): vars.$useFontShapesMediaQueries;
+    else: settings.$useFontShapesMediaQueries
+);
+$useTextAligns: if(
+  sass(vars.$useTextAligns != null): vars.$useTextAligns; else: settings.$useTextAligns
+);
+$useTextAlignsMediaQueries: if(
+  sass(vars.$useTextAlignsMediaQueries != null): vars.$useTextAlignsMediaQueries;
+    else: settings.$useTextAlignsMediaQueries
+);
+$useTextTruncate: if(
+  sass(vars.$useTextTruncate != null): vars.$useTextTruncate; else: settings.$useTextTruncate
+);
+$useTextTruncateMediaQueries: if(
+  sass(vars.$useTextTruncateMediaQueries != null): vars.$useTextTruncateMediaQueries;
+    else: settings.$useTextTruncateMediaQueries
+);
+$textTruncate: if(
+  sass(vars.$textTruncate != null): vars.$textTruncate; else: defs.$textTruncate
+);
+
+// Typographic Utilities
+// --------------------------------------
+// This file generates various typographic utility classes and @font-face rules
+// based on the settings and variables defined in the project.
+// Each section can be enabled or disabled via the `$use...` variables.
+
+// Font Families & @font-face ----- ----- ----- -----
+//
+// @description
+//   Generates @font-face rules based on the `vars.$fonts` map and
+//   corresponding utility classes for applying font families, weights, and styles.
+//   The generation of these rules and classes is controlled by the
+//   `$useFontFamilies` boolean variable.
+//
+// @see $useFontFamilies
+// @see vars.$fonts
+// @see vars.$fontWeights
+// @see vars.$fontStyles
+// @see configs.$fontWeightsValues (for mapping weight names to numerical values)
+// @see $defaultFontFamilies (for fallback fonts)
+// @see typo.font (mixin used for @font-face generation)
+// @see mQ.multiSizes (mixin used for responsive class generation)
+//
+// @generatedClasses
+//   - @font-face rules for each font variant.
+//   - Font family/weight classes:
+//     - e.g., `.regular`, `.bold`, `.italic`
+//     - e.g., `.fontName-0`, `.fontName-1` (if multiple fonts with same weight names, indexed by $fI)
+//   - Responsive font family/weight classes (if `mQ.multiSizes` is configured):
+//     - e.g., `md:regular`, `lg:bold`
+//   - Font style classes (applied as modifiers):
+//     - e.g., `.regular.italic`
+//
+// @example scss - Configuration in vars.$fonts (simplified)
+//   vars.$fonts: (
+//     sans: (
+//       weights: (regular, bold),
+//       styles: (normal, italic),
+//       variants: (
+//         latin: (title: "OpenSans") // `title` here is used for font-family in @font-face
+//       )
+//     )
+//   );
+//
+// @example css - Generated CSS (simplified, assuming $fI is 0 for the first font)
+//   @font-face { font-family: "OpenSans-0"; src: local("OpenSans Regular"); font-weight: 400; font-style: normal; }
+//   .regular { font-family: "OpenSans-0", "Fallback Font"; font-weight: 400; }
+//   .regular.italic { font-style: italic; }
+//   .bold { font-family: "OpenSans-0", "Fallback Font"; font-weight: 700; }
+//   // ... responsive versions if applicable ...
+//
+
+@if $useFontFamilies {
+  // Font families ----- -----
+  $fI: 0;
+  @each $fontKey, $font in $fonts {
+    // Validate parameters
+    $checkedFontKey: val.string($fontKey, 'Typographic.fonts.title');
+    $checkedFont: val.map($font, 'Typographic.fonts');
+
+    $weights: map.get($font, 'weights');
+    $weights: if(
+      sass($weights != null): map.get($font, 'weights') ; else: $fontWeights
+    );
+    $styles: if(
+      sass(map.get($font, 'styles') != null): map.get($font, 'styles') ; else: $fontStyles
+    );
+    $variants: map.get($font, 'variants');
+
+    // Validate parameters
+    $checkedWeights: val.list($weights, 'Typographic.fontFace.weights');
+    $checkedStyles: val.list($styles, 'Typographic.fontFace.styles');
+    $checkedVariants: val.map($variants, 'Typographic.fontFace.variants');
+
+    @each $weight in $weights {
+      @each $style in $styles {
+        @each $lang, $fontFace in $variants {
+          $title: map.get($fontFace, 'title');
+          $unicode: if(
+            sass(map.has-key($fontFace, 'unicode')): map.get($fontFace, 'unicode') ; else: null
+          );
+          $format: if(
+            sass(map.has-key($fontFace, 'format')): map.get($fontFace, 'format') ; else: $fontFormat
+          );
+          $isLocal: if(
+            sass(map.has-key($fontFace, 'local')): map.get($fontFace, 'isLocal') ; else: true
+          );
+          $externalUrl: if(
+            sass(map.has-key($fontFace, 'url')): map.get($fontFace, 'url') ; else: null
+          );
+
+          // Validate parameters
+          $checkedIsLocal: val.boolean($isLocal, 'Typographic.fontFace.local');
+          $checkedTitle: val.string($title, 'Typographic.fontFace.title');
+          $checkedFormat: val.string($format, 'Typographic.fontFace.format');
+
+          @if $unicode {
+            $checkedUnicode: val.string($unicode, 'Typographic.fontFace.unicode');
+          }
+
+          @include typo.font($fontKey, $title, $weight, $format, $style, $fI, $unicode, $isLocal, $externalUrl);
+        }
+      }
+    }
+
+    @include mQ.multiSizes($useFontFamiliesMediaQueries) using ($size, $divider) {
+      @each $weight in $weights {
+        @each $style in $styles {
+          // Font weights
+          // Validate parameters
+          $name: if(
+            sass($fI == 0): $weight; else: '#{$fontKey}\:#{$weight}'
+          );
+          $styleClass: if(
+            sass($fI == 0): $weight; else: '#{$fontKey}\\:#{$weight}'
+          );
+          $weightValue: map.get(configs.$fontWeightsValues, $weight);
+
+          $mainClass: if(
+            sass($size): #{$size}#{$divider}#{$styleClass}; else: $styleClass
+          );
+
+          .#{$mainClass} {
+            @if ($size) {
+              font-family: '#{$name}', $defaultFontFamilies !important;
+              font-weight: $weightValue !important;
+            } @else {
+              font-family: '#{$name}', $defaultFontFamilies;
+              font-weight: $weightValue;
+            }
+
+            @if meta.type-of($styles) == 'list' and list.length($styles) > 0 {
+              &.#{$style} {
+                font-style: $style;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    $fI: $fI + 1;
+  }
+}
+
+// Font Sizes ----- ----- ----- -----
+//
+// @description
+//   Generates utility classes for applying predefined font sizes.
+//   The generation of these classes is controlled by the
+//   `$useFontSizes` boolean variable.
+//   Font sizes are defined in `$fontSizes`.
+//   Responsive variants are generated using the `mQ.multiSizes` mixin.
+//
+// @see $useFontSizes
+// @see $fontSizes
+// @see mQ.multiSizes
+//
+// @generatedClasses
+//   - Font size classes:
+//     - e.g., `.text-sm`, `.text-base`, `.text-lg` (based on keys in `$fontSizes`)
+//   - Responsive font size classes:
+//     - e.g., `md:text-sm`, `lg:text-base`
+//
+// @example scss - Configuration in $fontSizes
+//   $fontSizes: (
+//     sm: 0.875rem,
+//     base: 1rem
+//   );
+//
+// @example css - Generated CSS (simplified)
+//   .text-sm { font-size: 0.875rem; }
+//   .text-base { font-size: 1rem; }
+//   // ... responsive versions if applicable ...
+//
+@if $useFontSizes {
+  @include mQ.multiSizes($useFontSizesMediaQueries) using ($size, $divider) {
+    @each $fontSize, $value in $fontSizes {
+      $mainClass: if(
+        sass($size): #{$size}#{$divider}#{$fontSize}; else: $fontSize
+      );
+
+      .#{$mainClass} {
+        @if ($size) {
+          font-size: $value !important;
+        } @else {
+          font-size: $value;
+        }
+      }
+    }
+  }
+}
+
+// Font Shapes (Text Transformation) ----- ----- ----- -----
+//
+// @description
+//   Generates utility classes for text transformations (e.g., uppercase, lowercase)
+//   and other font-related shape properties like `font-variant`.
+//   The generation of these classes is controlled by the
+//   `$useFontShapes` boolean variable.
+//   Shapes are defined in `configs.$fontShapes` and applied using the `typo.fontShapes` mixin.
+//   Responsive variants are generated using the `mQ.multiSizes` mixin.
+//
+// @see $useFontShapes
+// @see configs.$fontShapes
+// @see typo.fontShapes
+// @see mQ.multiSizes
+//
+// @generatedClasses
+//   - Text transformation/shape classes:
+//     - e.g., `.uppercase`, `.lowercase`, `.small-caps` (based on `configs.$fontShapes`)
+//   - Responsive text transformation/shape classes:
+//     - e.g., `md:uppercase`, `lg:small-caps`
+//
+// @example scss - Configuration in configs.$fontShapes
+//   configs.$fontShapes: (
+//     text-transform: (uppercase, lowercase, capitalize),
+//     font-variant: (small-caps)
+//   );
+//
+// @example css - Generated CSS (simplified)
+//   .uppercase { text-transform: uppercase; }
+//   .small-caps { font-variant: small-caps; }
+//   // ... responsive versions if applicable ...
+//
+@if $useFontShapes {
+  @include mQ.multiSizes($useFontShapesMediaQueries) using ($size, $divider) {
+    @each $type, $values in configs.$fontShapes {
+      @each $value in $values {
+        @include typo.fontShapes(if(sass($size): '#{$size}#{$divider}#{$value}' ; else: $value), $type, $value);
+      }
+    }
+  }
+}
+
+// Text Alignment ----- ----- ----- -----
+//
+// @description
+//   Generates utility classes for text alignment (e.g., left, center, right).
+//   The generation of these classes is controlled by the
+//   `$useTextAligns` boolean variable.
+//   Alignments are defined in `configs.$aligns`.
+//   Responsive variants are generated using the `mQ.multiSizes` mixin.
+//
+// @see $useTextAligns
+// @see configs.$aligns
+// @see mQ.multiSizes
+//
+// @generatedClasses
+//   - Text alignment classes:
+//     - e.g., `.text-left`, `.text-center`, `.text-right`
+//   - Responsive text alignment classes:
+//     - e.g., `md:text-left`, `lg:text-center`
+//
+// @example scss - Configuration in configs.$aligns
+//   configs.$aligns: (left, center, right, justify);
+//
+// @example css - Generated CSS (simplified)
+//   .text-left { text-align: left; }
+//   // ... responsive versions if applicable ...
+//
+@if $useTextAligns {
+  @include mQ.multiSizes($useTextAlignsMediaQueries) using ($size, $divider) {
+    @each $dir in configs.$aligns {
+      // Validate parameters
+      $checkedDir: val.listItem(configs.$aligns, $dir, 'Typographic.fonts.aligns');
+
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}text-#{$dir}' ; else: 'text-#{$dir}'
+      );
+      .#{$mainClass} {
+        @if ($size) {
+          text-align: $dir !important;
+        } @else {
+          text-align: $dir;
+        }
+      }
+    }
+  }
+}
+
+// Text Truncation ----- ----- ----- -----
+//
+// @description
+//   Generates utility classes for multi-line text truncation (ellipsis).
+//   The generation of these classes is controlled by the
+//   `$useTextTruncate` boolean variable.
+//   The maximum number of lines is controlled by `$textTruncate`.
+//   Responsive variants are generated using the `mQ.multiSizes` mixin.
+//
+// @see $useTextTruncate
+// @see $textTruncate
+// @see mQ.multiSizes
+//
+// @generatedClasses
+//   - Text truncation classes:
+//     - e.g., `.text-lines:1`, `.text-lines:2`, ... up to `$textTruncate`
+//   - Responsive text truncation classes:
+//     - e.g., `md:text-lines:1`, `lg:text-lines:2`
+//
+// @example scss - Configuration in $textTruncate
+//   $textTruncate: 3;
+//
+// @example css - Generated CSS (simplified for .text-lines:2)
+//   .text-lines\:2 { /* Note: CSS escapes the colon */
+//     display: -webkit-box;
+//     -webkit-line-clamp: 2;
+//     line-clamp: 2;
+//     -webkit-box-orient: vertical;
+//     overflow: hidden;
+//   }
+//   // ... responsive versions if applicable ...
+//
+@if $useTextTruncate {
+  @include mQ.multiSizes($useTextTruncateMediaQueries) using ($size, $divider) {
+    @each $i in $textTruncate {
+      $mainClass: if(
+        sass($size): '#{$size}#{$divider}text-lines#{\:}#{$i}' ; else: 'text-lines#{\:}#{$i}'
+      );
+
+      .#{$mainClass} {
+        display: -webkit-box;
+        -webkit-line-clamp: #{$i};
+        line-clamp: #{$i};
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    }
+  }
+}