@nuvoui/core 1.2.0 → 1.2.2

package/src/styles/utilities/_transforms.scss

@@ -0,0 +1,221 @@
+@use '../abstracts' as *;
+@use 'sass:map';
+
+/**
+ * Transform Utilities
+ * 
+ * - Translate (X, Y, Z)
+ * - Scale
+ * - Rotate
+ * - Skew
+ * - Transform origin
+ */
+
+// Translation mixins
+@mixin translate-x($value) {
+  & {
+    --translate-x: #{$value};
+
+    transform: translateX(var(--translate-x)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+@mixin translate-y($value) {
+  & {
+    --translate-y: #{$value};
+
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+@mixin translate-z($value) {
+  & {
+    --translate-z: #{$value};
+
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+@mixin translate($x, $y: null) {
+  & {
+    --translate-x: #{$x};
+
+    @if $y {
+      --translate-y: #{$y};
+    }
+
+    transform: translateX(var(--translate-x)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+// Scale mixins
+@mixin scale-x($value) {
+  & {
+    --scale-x: #{$value};
+
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+@mixin scale-y($value) {
+  & {
+    --scale-y: #{$value};
+
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+@mixin scale($value) {
+  & {
+    --scale-x: #{$value};
+    --scale-y: #{$value};
+
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x)) scaleY(var(--scale-y)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+// Rotation mixins
+@mixin rotate($value) {
+  & {
+    --rotate: #{$value};
+
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+// Skew mixins
+@mixin skew-x($value) {
+  & {
+    --skew-x: #{$value};
+
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+@mixin skew-y($value) {
+  & {
+    --skew-y: #{$value};
+
+    transform: translateX(var(--translate-x, 0)) translateY(var(--translate-y, 0)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1)) scaleZ(var(--scale-z, 1));
+  }
+}
+
+// Transform origin
+@mixin origin($value) {
+  & {
+    transform-origin: $value;
+  }
+}
+
+// Common transform values
+$translate-values: (
+  '0': 0,
+  '1': 0.25rem,
+  '2': 0.5rem,
+  '3': 0.75rem,
+  '4': 1rem,
+  '5': 1.25rem,
+  '6': 1.5rem,
+  '8': 2rem,
+  '10': 2.5rem,
+  '12': 3rem,
+  '16': 4rem,
+  '20': 5rem,
+  '25p': 25%,
+  '33p': 33.333%,
+  '50p': 50%,
+  '66p': 66.667%,
+  '75p': 75%,
+  '100p': 100%,
+  '-1': -0.25rem,
+  '-2': -0.5rem,
+  '-3': -0.75rem,
+  '-4': -1rem,
+  '-5': -1.25rem,
+  '-6': -1.5rem,
+  '-8': -2rem,
+  '-10': -2.5rem,
+  '-12': -3rem,
+  '-16': -4rem,
+  '-20': -5rem,
+  '-25p': 25%,
+  '-33p': 33.333%,
+  '-50p': 50%,
+  '-66p': 66.667%,
+  '-75p': 75%,
+  '-100p': -100%,
+);
+
+// Generate utility classes
+@if $generate-utility-classes {
+  // Translate utilities
+  @each $key, $value in $translate-values {
+    .translate-x-#{$key} { @include translate-x($value); }
+    .translate-y-#{$key} { @include translate-y($value); }
+  }
+  
+  // Scale utilities
+  .scale-0 { @include scale(0); }
+  .scale-50 { @include scale(0.5); }
+  .scale-75 { @include scale(0.75); }
+  .scale-90 { @include scale(0.9); }
+  .scale-95 { @include scale(0.95); }
+  .scale-100 { @include scale(1); }
+  .scale-105 { @include scale(1.05); }
+  .scale-110 { @include scale(1.1); }
+  .scale-125 { @include scale(1.25); }
+  .scale-150 { @include scale(1.5); }
+  
+  // Rotation utilities
+  .rotate-0 { @include rotate(0deg); }
+  .rotate-45 { @include rotate(45deg); }
+  .rotate-90 { @include rotate(90deg); }
+  .rotate-180 { @include rotate(180deg); }
+  .rotate-270 { @include rotate(270deg); }
+  .-rotate-45 { @include rotate(-45deg); }
+  .-rotate-90 { @include rotate(-90deg); }
+  .-rotate-180 { @include rotate(-180deg); }
+  .-rotate-270 { @include rotate(-270deg); }
+  
+  // Origin utilities
+  .origin-center { @include origin(center); }
+  .origin-top { @include origin(top); }
+  .origin-top-right { @include origin(top right); }
+  .origin-right { @include origin(right); }
+  .origin-bottom-right { @include origin(bottom right); }
+  .origin-bottom { @include origin(bottom); }
+  .origin-bottom-left { @include origin(bottom left); }
+  .origin-left { @include origin(left); }
+  .origin-top-left { @include origin(top left); }
+  
+  // Responsive variants
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      @each $key, $value in $translate-values {
+        .translate-x-#{$key}\@#{$breakpoint} { @include translate-x($value); }
+        .translate-y-#{$key}\@#{$breakpoint} { @include translate-y($value); }
+      }
+      
+      // Scale responsive
+      .scale-0\@#{$breakpoint} { @include scale(0); }
+      .scale-50\@#{$breakpoint} { @include scale(0.5); }
+      .scale-75\@#{$breakpoint} { @include scale(0.75); }
+      .scale-90\@#{$breakpoint} { @include scale(0.9); }
+      .scale-95\@#{$breakpoint} { @include scale(0.95); }
+      .scale-100\@#{$breakpoint} { @include scale(1); }
+      .scale-105\@#{$breakpoint} { @include scale(1.05); }
+      .scale-110\@#{$breakpoint} { @include scale(1.1); }
+      .scale-125\@#{$breakpoint} { @include scale(1.25); }
+      .scale-150\@#{$breakpoint} { @include scale(1.5); }
+      
+      // Rotation responsive
+      .rotate-0\@#{$breakpoint} { @include rotate(0deg); }
+      .rotate-45\@#{$breakpoint} { @include rotate(45deg); }
+      .rotate-90\@#{$breakpoint} { @include rotate(90deg); }
+      .rotate-180\@#{$breakpoint} { @include rotate(180deg); }
+      .-rotate-45\@#{$breakpoint} { @include rotate(-45deg); }
+      .-rotate-90\@#{$breakpoint} { @include rotate(-90deg); }
+      .-rotate-180\@#{$breakpoint} { @include rotate(-180deg); }
+    }
+  }
+}

package/src/styles/utilities/_transitions.scss

@@ -13,9 +13,11 @@
 
 // Base transition mixins
 @mixin transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  & {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
 }
 
 // Property-specific transition mixins
@@ -42,18 +44,13 @@
   transition-delay: $time;
 }
 
-// Base transition
-.transition {
-  @include transition;
-}
-
-// Property-specific transitions
-.transition-none { @include transition-none; }
-.transition-all { @include transition-all; }
-.transition-colors { @include transition-colors; }
-.transition-opacity { @include transition-opacity; }
-.transition-shadow { @include transition-shadow; }
-.transition-transform { @include transition-transform; }
+// Timing functions
+$timing-functions: (
+  'linear': linear,
+  'in': cubic-bezier(0.4, 0, 1, 1),
+  'out': cubic-bezier(0, 0, 0.2, 1),
+  'in-out': cubic-bezier(0.4, 0, 0.2, 1),
+);
 
 // Durations
 $durations: (
@@ -68,31 +65,6 @@ $durations: (
   '1000': 1000ms,
 );
 
-@each $name, $value in $durations {
-  .duration-#{$name} {
-    @include duration($value);
-  }
-}
-
-// Timing functions
-$timing-functions: (
-  'linear': linear,
-  'in': cubic-bezier(0.4, 0, 1, 1),
-  'out': cubic-bezier(0, 0, 0.2, 1),
-  'in-out': cubic-bezier(0.4, 0, 0.2, 1),
-);
-
-@each $name, $value in $timing-functions {
-  .ease-#{$name} {
-    transition-timing-function: $value;
-  }
-}
-
-// Specific timing function classes
-.ease-linear { @include ease-linear; }
-.ease-in { @include ease-in; }
-.ease-out { @include ease-out; }
-.ease-in-out { @include ease-in-out; }
 
 // Delays
 $delays: (
@@ -107,45 +79,79 @@ $delays: (
   '1000': 1000ms,
 );
 
-@each $name, $value in $delays {
-  .delay-#{$name} {
-    @include delay($value);
+
+@if $generate-utility-classes {
+  // Base transition
+  .transition {
+    @include transition;
   }
-}
 
-// Responsive variants
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    // Base transition
-    .transition\@#{$breakpoint} {
-      @include transition;
+  // Property-specific transitions
+  .transition-none { @include transition-none; }
+  .transition-all { @include transition-all; }
+  .transition-colors { @include transition-colors; }
+  .transition-opacity { @include transition-opacity; }
+  .transition-shadow { @include transition-shadow; }
+  .transition-transform { @include transition-transform; }
+
+  @each $name, $value in $durations {
+    .duration-#{$name} {
+      @include duration($value);
     }
-    
-    // Property-specific transitions
-    .transition-none\@#{$breakpoint} { @include transition-none; }
-    .transition-all\@#{$breakpoint} { @include transition-all; }
-    .transition-colors\@#{$breakpoint} { @include transition-colors; }
-    .transition-opacity\@#{$breakpoint} { @include transition-opacity; }
-    .transition-shadow\@#{$breakpoint} { @include transition-shadow; }
-    .transition-transform\@#{$breakpoint} { @include transition-transform; }
-    
-    // Duration responsive variants
-    @each $name, $value in $durations {
-      .duration-#{$name}\@#{$breakpoint} {
-        @include duration($value);
-      }
+  }
+
+  @each $name, $value in $timing-functions {
+    .ease-#{$name} {
+      transition-timing-function: $value;
+    }
+  }
+
+  // Specific timing function classes
+  .ease-linear { @include ease-linear; }
+  .ease-in { @include ease-in; }
+  .ease-out { @include ease-out; }
+  .ease-in-out { @include ease-in-out; }
+
+  @each $name, $value in $delays {
+    .delay-#{$name} {
+      @include delay($value);
     }
-    
-    // Timing function responsive variants
-    .ease-linear\@#{$breakpoint} { @include ease-linear; }
-    .ease-in\@#{$breakpoint} { @include ease-in; }
-    .ease-out\@#{$breakpoint} { @include ease-out; }
-    .ease-in-out\@#{$breakpoint} { @include ease-in-out; }
-    
-    // Delay responsive variants
-    @each $name, $value in $delays {
-      .delay-#{$name}\@#{$breakpoint} {
-        @include delay($value);
+  }
+
+  // Responsive variants
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      // Base transition
+      .transition\@#{$breakpoint} {
+        @include transition;
+      }
+      
+      // Property-specific transitions
+      .transition-none\@#{$breakpoint} { @include transition-none; }
+      .transition-all\@#{$breakpoint} { @include transition-all; }
+      .transition-colors\@#{$breakpoint} { @include transition-colors; }
+      .transition-opacity\@#{$breakpoint} { @include transition-opacity; }
+      .transition-shadow\@#{$breakpoint} { @include transition-shadow; }
+      .transition-transform\@#{$breakpoint} { @include transition-transform; }
+      
+      // Duration responsive variants
+      @each $name, $value in $durations {
+        .duration-#{$name}\@#{$breakpoint} {
+          @include duration($value);
+        }
+      }
+      
+      // Timing function responsive variants
+      .ease-linear\@#{$breakpoint} { @include ease-linear; }
+      .ease-in\@#{$breakpoint} { @include ease-in; }
+      .ease-out\@#{$breakpoint} { @include ease-out; }
+      .ease-in-out\@#{$breakpoint} { @include ease-in-out; }
+      
+      // Delay responsive variants
+      @each $name, $value in $delays {
+        .delay-#{$name}\@#{$breakpoint} {
+          @include delay($value);
+        }
       }
     }
   }

package/src/styles/utilities/_typography.scss

@@ -2,6 +2,7 @@
 // Module: Text
 
 @use 'sass:map';
+@use 'sass:meta';
 
 // Import variables
 @use '../abstracts'  as VAR;
@@ -31,79 +32,144 @@
 * @param {string} $size - The size of the text.
 */ 
 @mixin text-size($size) {
-  @if map.has-key(VAR.$font-sizes, $size) {
-    font-size: map.get(VAR.$font-sizes, $size);
-  } @else {
-    font-size: $size;
+  & {
+    @if map.has-key(VAR.$font-sizes, $size) {
+      font-size: map.get(VAR.$font-sizes, $size);
+    } @else {
+      font-size: $size;
+    }
   }
-  
 }
 
 // Font weights
-@mixin font-thin { font-weight: 100; }
-@mixin font-extralight { font-weight: 200; }
-@mixin font-light { font-weight: 300; }
-@mixin font-normal { font-weight: 400; }
-@mixin font-medium { font-weight: 500; }
-@mixin font-semibold { font-weight: 600; }
-@mixin font-bold { font-weight: 700; }
-@mixin font-extrabold { font-weight: 800; }
-@mixin font-black { font-weight: 900; }
+@mixin font-thin { & { font-weight: 100; } }
+@mixin font-extralight { & { font-weight: 200; } }
+@mixin font-light { & { font-weight: 300; } }
+@mixin font-normal { & { font-weight: 400; } }
+@mixin font-medium { & { font-weight: 500; } }
+@mixin font-semibold { & { font-weight: 600; } }
+@mixin font-bold { & { font-weight: 700; } }
+@mixin font-extrabold { & { font-weight: 800; } }
+@mixin font-black { & { font-weight: 900; } }
+
+
+@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;
+    }
+  }
+}
 
 // Line heights
-@mixin leading-none { line-height: 1; }
-@mixin leading-tight { line-height: 1.25; }
-@mixin leading-snug { line-height: 1.375; }
-@mixin leading-normal { line-height: 1.5; }
-@mixin leading-relaxed { line-height: 1.625; }
-@mixin leading-loose { line-height: 2; }
+@mixin leading-none { & { @include leading(none);} }
+@mixin leading-tight { & { @include leading(tight);} }
+@mixin leading-snug { & { @include leading(snug);} }
+@mixin leading-normal { & { @include leading(normal);} }
+@mixin leading-relaxed { & { @include leading(relaxed);} }
+@mixin leading-loose { & { @include leading(loose);} }
 
 // Text alignment
-@mixin text-left { text-align: left; }
-@mixin text-center { text-align: center; }
-@mixin text-right { text-align: right; }
-@mixin text-justify { text-align: justify; }
+@mixin text-left { & { text-align: left; } }
+@mixin text-center { & { text-align: center; } }
+@mixin text-right { & { text-align: right; } }
+@mixin text-justify { & { text-align: justify; } }
 
 
 // Text transform mixins
-@mixin uppercase { text-transform: uppercase; }
-@mixin lowercase { text-transform: lowercase; }
-@mixin capitalize { text-transform: capitalize; }
-@mixin normal-case { text-transform: none; }
+@mixin uppercase { & { text-transform: uppercase; } }
+@mixin lowercase { & { text-transform: lowercase; } }
+@mixin capitalize { & { text-transform: capitalize; } }
+@mixin normal-case { & { text-transform: none; } }
 
 // Font style mixins
-@mixin italic { font-style: italic; }
-@mixin not-italic { font-style: normal; }
+@mixin italic { & { font-style: italic; } }
+@mixin not-italic { & { font-style: normal; } }
 
 // Text decoration mixins
-@mixin underline { text-decoration: underline; }
-@mixin line-through { text-decoration: line-through; }
-@mixin no-underline { text-decoration: none; }
+@mixin underline { & { text-decoration: underline; } }
+@mixin line-through { & { text-decoration: line-through; } }
+@mixin no-underline { & { text-decoration: none; } }
 
 // Text overflow mixin
-@mixin truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@mixin truncate { 
+  & { 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+    white-space: nowrap; 
+  } 
+}
 
 @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; }
-@mixin break-words { overflow-wrap: break-word; }
-@mixin break-all { word-break: break-all; }
-@mixin whitespace-normal { white-space: normal; }
-@mixin whitespace-nowrap { white-space: nowrap; }
-@mixin whitespace-pre { white-space: pre; }
-@mixin whitespace-pre-line { white-space: pre-line; }
-@mixin whitespace-pre-wrap { white-space: pre-wrap; }
-
-
+@mixin break-normal {
+  & {
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+}
 
+@mixin break-words { & {overflow-wrap: break-word; }}
+@mixin break-all { & {word-break: break-all; }}
+@mixin whitespace-normal { & {white-space: normal; }}
+@mixin whitespace-nowrap { & {white-space: nowrap; }}
+@mixin whitespace-pre { & {white-space: pre; }}
+@mixin whitespace-pre-line { & {white-space: pre-line; }}
+@mixin whitespace-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;
+    }
+  }
+}
 
+@mixin tracking-tighter { @include tracking(tighter) };
+@mixin tracking-tight { @include tracking(tight) };
+@mixin tracking-normal { @include tracking(normal) };
+@mixin tracking-wide { @include tracking(wide) };
+@mixin tracking-wider { @include tracking(wider) };
+@mixin tracking-widest { @include tracking(widest) };
 
 
 @mixin responsive-typography($breakpoint: null) {
@@ -158,24 +224,32 @@
   .truncate-4#{$suffix} { @include truncate-lines(4); }
   .truncate-5#{$suffix} { @include truncate-lines(5); }
 
+  .tracking-tighter#{$suffix} { @include tracking(tighter) };
+  .tracking-tight#{$suffix} { @include tracking(tight) };
+  .tracking-normal#{$suffix} { @include tracking(normal) };
+  .tracking-wide#{$suffix} { @include tracking(wide) };
+  .tracking-wider#{$suffix} { @include tracking(wider) };
+  .tracking-widest#{$suffix} { @include tracking(widest) };
 }
 
-@include responsive-typography;
-.break-normal { @include break-normal; }
-.break-words { @include break-words; }
-.break-all { @include break-all; }
-.whitespace-normal { @include whitespace-normal; }
-.whitespace-nowrap { @include whitespace-nowrap; }
-.whitespace-pre { @include whitespace-pre; }
-.whitespace-pre-line { @include whitespace-pre-line; }
-.whitespace-pre-wrap { @include whitespace-pre-wrap; }
-
-@each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-        @each $size, $val in VAR.$font-sizes {
-            .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
-        }
-        @include responsive-typography($breakpoint);
-    }
-}
+@if VAR.$generate-utility-classes {
+  @include responsive-typography;
+  .break-normal { @include break-normal; }
+  .break-words { @include break-words; }
+  .break-all { @include break-all; }
+  .whitespace-normal { @include whitespace-normal; }
+  .whitespace-nowrap { @include whitespace-nowrap; }
+  .whitespace-pre { @include whitespace-pre; }
+  .whitespace-pre-line { @include whitespace-pre-line; }
+  .whitespace-pre-wrap { @include whitespace-pre-wrap; }
+
+  @each $breakpoint, $width in VAR.$breakpoints {
+      @media (min-width: #{$width}) {
+          @each $size, $val in VAR.$font-sizes {
+              .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
+          }
+          @include responsive-typography($breakpoint);
+      }
+  }
 
+}