@nuvoui/core 1.3.5 → 1.4.1

package/src/styles/utilities/_typography.scss

@@ -5,10 +5,12 @@
 @use "sass:meta";
 
 // Import variables
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../config/typography" as config-typo;
+@use "../functions/feature-flags" as fn-flags;
 
-// Typography Utilities
+// config-typo Utilities
 // Classes:
 // - Font Size: .text-xs, .text-sm, .text-base, etc.
 // - Font Weight: .font-thin, .font-normal, .font-bold, etc.
@@ -25,416 +27,429 @@
 
 // Text size utility
 // @param {string} $size - The size of the text.
+// @deprecated - Use `font-size` instead.
 @mixin text-size($size) {
-  @if map.has-key(VAR.$font-sizes, $size) {
-    font-size: map.get(VAR.$font-sizes, $size);
-  } @else {
-    font-size: $size;
-  }
+    @warn "The `text-size` mixin has been deprecated. Use `font-size` instead.";
+    @if map.has-key(config-typo.$font-sizes, $size) {
+        font-size: map.get(config-typo.$font-sizes, $size);
+    } @else {
+        font-size: $size;
+    }
+}
+
+// font size utility
+// @param {string} $size - The size of the text.
+@mixin font-size($size) {
+    @if map.has-key(config-typo.$font-sizes, $size) {
+        font-size: map.get(config-typo.$font-sizes, $size);
+    } @else {
+        font-size: $size;
+    }
 }
 
 // Font weights
 @mixin font($weight) {
-  @if map.has-key(VAR.$font-weights, #{$weight}) {
-    font-weight: map.get(VAR.$font-weights, $weight);
-  } @else if meta.type-of($weight) == number {
-    font-weight: $weight;
-  } @else {
-    @warn "Unknown font weight: #{$weight} setting it to default.";
-
-    font-weight: 400; // Default to normal weight
-  }
+    @if map.has-key(config-typo.$font-weights, #{$weight}) {
+        font-weight: map.get(config-typo.$font-weights, $weight);
+    } @else if meta.type-of($weight) == "number" {
+        font-weight: $weight;
+    } @else {
+        @warn "Unknown font weight: #{$weight} setting it to default.";
+
+        font-weight: 400; // Default to normal weight
+    }
 }
 
 @mixin leading($value) {
-  @if meta.type-of($value) == "number" {
-    line-height: $value;
-  } @else if $value == "none" {
-    line-height: 1;
-  } @else if $value == "tight" {
-    line-height: 1.25;
-  } @else if $value == "snug" {
-    line-height: 1.375;
-  } @else if $value == "normal" {
-    line-height: 1.5;
-  } @else if $value == "relaxed" {
-    line-height: 1.625;
-  } @else if $value == "loose" {
-    line-height: 2;
-  } @else {
-    line-height: $value;
-  }
+    @if meta.type-of($value) == "number" {
+        line-height: $value;
+    } @else if $value == "none" {
+        line-height: 1;
+    } @else if $value == "tight" {
+        line-height: 1.25;
+    } @else if $value == "snug" {
+        line-height: 1.375;
+    } @else if $value == "normal" {
+        line-height: 1.5;
+    } @else if $value == "relaxed" {
+        line-height: 1.625;
+    } @else if $value == "loose" {
+        line-height: 2;
+    } @else {
+        line-height: $value;
+    }
 }
 
 // Line heights
 @mixin leading-none {
-  @include leading(none);
+    @include leading(none);
 }
 
 @mixin leading-tight {
-  @include leading(tight);
+    @include leading(tight);
 }
 
 @mixin leading-snug {
-  @include leading(snug);
+    @include leading(snug);
 }
 
 @mixin leading-normal {
-  @include leading(normal);
+    @include leading(normal);
 }
 
 @mixin leading-relaxed {
-  @include leading(relaxed);
+    @include leading(relaxed);
 }
 
 @mixin leading-loose {
-  @include leading(loose);
+    @include leading(loose);
 }
 
 // Text alignment
 @mixin text-left {
-  text-align: left;
+    text-align: left;
 }
 
 @mixin text-center {
-  text-align: center;
+    text-align: center;
 }
 
 @mixin text-right {
-  text-align: right;
+    text-align: right;
 }
 
 @mixin text-justify {
-  text-align: justify;
+    text-align: justify;
 }
 
 // Text transform mixins
 @mixin uppercase {
-  text-transform: uppercase;
+    text-transform: uppercase;
 }
 
 @mixin lowercase {
-  text-transform: lowercase;
+    text-transform: lowercase;
 }
 
 @mixin capitalize {
-  text-transform: capitalize;
+    text-transform: capitalize;
 }
 
 @mixin normal-case {
-  text-transform: none;
+    text-transform: none;
 }
 
 // Font style mixins
 @mixin italic {
-  font-style: italic;
+    font-style: italic;
 }
 
 @mixin not-italic {
-  font-style: normal;
+    font-style: normal;
 }
 
 // Text decoration mixins
 @mixin underline {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 @mixin line-through {
-  text-decoration: line-through;
+    text-decoration: line-through;
 }
 
 @mixin no-underline {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 // Text overflow mixin
 @mixin truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
+// todo: doc missing
 @mixin overflow-label {
-  white-space: nowrap;
-  word-break: break-all;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  min-width: 0;
+    white-space: nowrap;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    min-width: 0;
 }
 
 @mixin truncate-lines($lines: 2) {
-  display: -webkit-box;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 @mixin break-normal {
-  overflow-wrap: normal;
-  word-break: normal;
+    overflow-wrap: normal;
+    word-break: normal;
 }
 
 @mixin break-words {
-  overflow-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 @mixin break-all {
-  word-break: break-all;
+    word-break: break-all;
 }
 
 @mixin whitespace-normal {
-  white-space: normal;
+    white-space: normal;
 }
 
 @mixin whitespace-nowrap {
-  white-space: nowrap;
+    white-space: nowrap;
 }
 
 @mixin whitespace-pre {
-  white-space: pre;
+    white-space: pre;
 }
 
 @mixin whitespace-pre-line {
-  white-space: pre-line;
+    white-space: pre-line;
 }
 
 @mixin whitespace-pre-wrap {
-  white-space: pre-wrap;
+    white-space: pre-wrap;
 }
 
 // Custom letter spacing mixin with value
 @mixin tracking($value) {
-  @if meta.type-of($value) == "number" {
-    letter-spacing: $value;
-  } @else if $value == "tighter" {
-    letter-spacing: -0.05em;
-  } @else if $value == "tight" {
-    letter-spacing: -0.025em;
-  } @else if $value == "normal" {
-    letter-spacing: 0;
-  } @else if $value == "wide" {
-    letter-spacing: 0.025em;
-  } @else if $value == "wider" {
-    letter-spacing: 0.05em;
-  } @else if $value == "widest" {
-    letter-spacing: 0.1em;
-  } @else {
-    letter-spacing: $value;
-  }
+    @if meta.type-of($value) == "number" {
+        letter-spacing: $value;
+    } @else if $value == "tighter" {
+        letter-spacing: -0.05em;
+    } @else if $value == "tight" {
+        letter-spacing: -0.025em;
+    } @else if $value == "normal" {
+        letter-spacing: 0;
+    } @else if $value == "wide" {
+        letter-spacing: 0.025em;
+    } @else if $value == "wider" {
+        letter-spacing: 0.05em;
+    } @else if $value == "widest" {
+        letter-spacing: 0.1em;
+    } @else {
+        letter-spacing: $value;
+    }
 }
 
 @mixin tracking-tighter {
-  @include tracking(tighter);
+    @include tracking(tighter);
 }
 
 @mixin tracking-tight {
-  @include tracking(tight);
+    @include tracking(tight);
 }
 
 @mixin tracking-normal {
-  @include tracking(normal);
+    @include tracking(normal);
 }
 
 @mixin tracking-wide {
-  @include tracking(wide);
+    @include tracking(wide);
 }
 
 @mixin tracking-wider {
-  @include tracking(wider);
+    @include tracking(wider);
 }
 
 @mixin tracking-widest {
-  @include tracking(widest);
+    @include tracking(widest);
 }
 
-@mixin responsive-typography($breakpoint: null) {
-  $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+@mixin responsive-config-typo($breakpoint: null) {
+    $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
 
-  @each $size, $val in VAR.$font-sizes {
-    #{VAR.$parent-selector} .text-#{$size}#{$suffix} {
-      @include text-size($size);
+    @each $size, $val in config-typo.$font-sizes {
+        #{config-flags.$parent-selector} .text-#{$size}#{$suffix} {
+            @include text-size($size);
+        }
     }
-  }
 
-  // Generate font weight utilities
-  @each $size, $val in VAR.$font-weights {
-    #{VAR.$parent-selector} .font-#{$size}#{$suffix} {
-      @include font($size);
+    // Generate font weight utilities
+    @each $size, $val in config-typo.$font-weights {
+        #{config-flags.$parent-selector} .font-#{$size}#{$suffix} {
+            @include font($size);
+        }
     }
-  }
 
-  // Generate line height utilities
-  #{VAR.$parent-selector} .leading-none#{$suffix} {
-    @include leading-none;
-  }
+    // Generate line height utilities
+    #{config-flags.$parent-selector} .leading-none#{$suffix} {
+        @include leading-none;
+    }
 
-  #{VAR.$parent-selector} .leading-tight#{$suffix} {
-    @include leading-tight;
-  }
+    #{config-flags.$parent-selector} .leading-tight#{$suffix} {
+        @include leading-tight;
+    }
 
-  #{VAR.$parent-selector} .leading-snug#{$suffix} {
-    @include leading-snug;
-  }
+    #{config-flags.$parent-selector} .leading-snug#{$suffix} {
+        @include leading-snug;
+    }
 
-  #{VAR.$parent-selector} .leading-normal#{$suffix} {
-    @include leading-normal;
-  }
+    #{config-flags.$parent-selector} .leading-normal#{$suffix} {
+        @include leading-normal;
+    }
 
-  #{VAR.$parent-selector} .leading-relaxed#{$suffix} {
-    @include leading-relaxed;
-  }
+    #{config-flags.$parent-selector} .leading-relaxed#{$suffix} {
+        @include leading-relaxed;
+    }
 
-  #{VAR.$parent-selector} .leading-loose#{$suffix} {
-    @include leading-loose;
-  }
+    #{config-flags.$parent-selector} .leading-loose#{$suffix} {
+        @include leading-loose;
+    }
 
-  // Generate text alignment utilities
-  #{VAR.$parent-selector} .text-left#{$suffix} {
-    @include text-left;
-  }
+    // Generate text alignment utilities
+    #{config-flags.$parent-selector} .text-left#{$suffix} {
+        @include text-left;
+    }
 
-  #{VAR.$parent-selector} .text-center#{$suffix} {
-    @include text-center;
-  }
+    #{config-flags.$parent-selector} .text-center#{$suffix} {
+        @include text-center;
+    }
 
-  #{VAR.$parent-selector} .text-right#{$suffix} {
-    @include text-right;
-  }
+    #{config-flags.$parent-selector} .text-right#{$suffix} {
+        @include text-right;
+    }
 
-  #{VAR.$parent-selector} .text-justify#{$suffix} {
-    @include text-justify;
-  }
+    #{config-flags.$parent-selector} .text-justify#{$suffix} {
+        @include text-justify;
+    }
 
-  // Classes using mixins
-  #{VAR.$parent-selector} .uppercase#{$suffix} {
-    @include uppercase;
-  }
+    // Classes using mixins
+    #{config-flags.$parent-selector} .uppercase#{$suffix} {
+        @include uppercase;
+    }
 
-  #{VAR.$parent-selector} .lowercase#{$suffix} {
-    @include lowercase;
-  }
+    #{config-flags.$parent-selector} .lowercase#{$suffix} {
+        @include lowercase;
+    }
 
-  #{VAR.$parent-selector} .capitalize#{$suffix} {
-    @include capitalize;
-  }
+    #{config-flags.$parent-selector} .capitalize#{$suffix} {
+        @include capitalize;
+    }
 
-  #{VAR.$parent-selector} .normal-case#{$suffix} {
-    @include normal-case;
-  }
+    #{config-flags.$parent-selector} .normal-case#{$suffix} {
+        @include normal-case;
+    }
 
-  #{VAR.$parent-selector} .italic#{$suffix} {
-    @include italic;
-  }
+    #{config-flags.$parent-selector} .italic#{$suffix} {
+        @include italic;
+    }
 
-  #{VAR.$parent-selector} .not-italic#{$suffix} {
-    @include not-italic;
-  }
+    #{config-flags.$parent-selector} .not-italic#{$suffix} {
+        @include not-italic;
+    }
 
-  #{VAR.$parent-selector} .underline#{$suffix} {
-    @include underline;
-  }
+    #{config-flags.$parent-selector} .underline#{$suffix} {
+        @include underline;
+    }
 
-  #{VAR.$parent-selector} .line-through#{$suffix} {
-    @include line-through;
-  }
+    #{config-flags.$parent-selector} .line-through#{$suffix} {
+        @include line-through;
+    }
 
-  #{VAR.$parent-selector} .no-underline#{$suffix} {
-    @include no-underline;
-  }
+    #{config-flags.$parent-selector} .no-underline#{$suffix} {
+        @include no-underline;
+    }
 
-  #{VAR.$parent-selector} .truncate#{$suffix} {
-    @include truncate;
-  }
+    #{config-flags.$parent-selector} .truncate#{$suffix} {
+        @include truncate;
+    }
 
-  #{VAR.$parent-selector} .truncate-2#{$suffix} {
-    @include truncate-lines(2);
-  }
+    #{config-flags.$parent-selector} .truncate-2#{$suffix} {
+        @include truncate-lines(2);
+    }
 
-  #{VAR.$parent-selector} .truncate-3#{$suffix} {
-    @include truncate-lines(3);
-  }
+    #{config-flags.$parent-selector} .truncate-3#{$suffix} {
+        @include truncate-lines(3);
+    }
 
-  #{VAR.$parent-selector} .truncate-4#{$suffix} {
-    @include truncate-lines(4);
-  }
+    #{config-flags.$parent-selector} .truncate-4#{$suffix} {
+        @include truncate-lines(4);
+    }
 
-  #{VAR.$parent-selector} .truncate-5#{$suffix} {
-    @include truncate-lines(5);
-  }
+    #{config-flags.$parent-selector} .truncate-5#{$suffix} {
+        @include truncate-lines(5);
+    }
 
-  #{VAR.$parent-selector} .tracking-tighter#{$suffix} {
-    @include tracking(tighter);
-  }
+    #{config-flags.$parent-selector} .tracking-tighter#{$suffix} {
+        @include tracking(tighter);
+    }
 
-  #{VAR.$parent-selector} .tracking-tight#{$suffix} {
-    @include tracking(tight);
-  }
+    #{config-flags.$parent-selector} .tracking-tight#{$suffix} {
+        @include tracking(tight);
+    }
 
-  #{VAR.$parent-selector} .tracking-normal#{$suffix} {
-    @include tracking(normal);
-  }
+    #{config-flags.$parent-selector} .tracking-normal#{$suffix} {
+        @include tracking(normal);
+    }
 
-  #{VAR.$parent-selector} .tracking-wide#{$suffix} {
-    @include tracking(wide);
-  }
+    #{config-flags.$parent-selector} .tracking-wide#{$suffix} {
+        @include tracking(wide);
+    }
 
-  #{VAR.$parent-selector} .tracking-wider#{$suffix} {
-    @include tracking(wider);
-  }
+    #{config-flags.$parent-selector} .tracking-wider#{$suffix} {
+        @include tracking(wider);
+    }
 
-  #{VAR.$parent-selector} .tracking-widest#{$suffix} {
-    @include tracking(widest);
-  }
+    #{config-flags.$parent-selector} .tracking-widest#{$suffix} {
+        @include tracking(widest);
+    }
 
-  #{VAR.$parent-selector} .overflow-label#{$suffix} {
-    @include overflow-label;
-  }
+    #{config-flags.$parent-selector} .overflow-label#{$suffix} {
+        @include overflow-label;
+    }
 }
 
-@if FN.feature-enabled("typography") {
-  @include responsive-typography;
+@if fn-flags.feature-enabled("config-typo") {
+    @include responsive-config-typo;
 
-  #{VAR.$parent-selector} .break-normal {
-    @include break-normal;
-  }
+    #{config-flags.$parent-selector} .break-normal {
+        @include break-normal;
+    }
 
-  #{VAR.$parent-selector} .break-words {
-    @include break-words;
-  }
+    #{config-flags.$parent-selector} .break-words {
+        @include break-words;
+    }
 
-  #{VAR.$parent-selector} .break-all {
-    @include break-all;
-  }
+    #{config-flags.$parent-selector} .break-all {
+        @include break-all;
+    }
 
-  #{VAR.$parent-selector} .whitespace-normal {
-    @include whitespace-normal;
-  }
+    #{config-flags.$parent-selector} .whitespace-normal {
+        @include whitespace-normal;
+    }
 
-  #{VAR.$parent-selector} .whitespace-nowrap {
-    @include whitespace-nowrap;
-  }
+    #{config-flags.$parent-selector} .whitespace-nowrap {
+        @include whitespace-nowrap;
+    }
 
-  #{VAR.$parent-selector} .whitespace-pre {
-    @include whitespace-pre;
-  }
+    #{config-flags.$parent-selector} .whitespace-pre {
+        @include whitespace-pre;
+    }
 
-  #{VAR.$parent-selector} .whitespace-pre-line {
-    @include whitespace-pre-line;
-  }
+    #{config-flags.$parent-selector} .whitespace-pre-line {
+        @include whitespace-pre-line;
+    }
 
-  #{VAR.$parent-selector} .whitespace-pre-wrap {
-    @include whitespace-pre-wrap;
-  }
+    #{config-flags.$parent-selector} .whitespace-pre-wrap {
+        @include whitespace-pre-wrap;
+    }
 
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      @each $size, $val in VAR.$font-sizes {
-        #{VAR.$parent-selector} .text-#{$size}\@#{$breakpoint} {
-          @include text-size($size);
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        @media (min-width: #{$width}) {
+            @each $size, $val in config-typo.$font-sizes {
+                #{config-flags.$parent-selector} .text-#{$size}\@#{$breakpoint} {
+                    @include text-size($size);
+                }
+            }
+            @include responsive-config-typo($breakpoint);
         }
-      }
-      @include responsive-typography($breakpoint);
     }
-  }
 }