@nuvoui/core 1.1.7 → 1.2.0

package/src/styles/utilities/_typography.scss

@@ -4,16 +4,39 @@
 @use 'sass:map';
 
 // Import variables
-@use '../utilities/variables' as *;
+@use '../abstracts'  as VAR;
+
+
+/**
+ * Typography Utilities
+ * 
+ * Classes:
+ * - Font Size: .text-xs, .text-sm, .text-base, etc.
+ * - Font Weight: .font-thin, .font-normal, .font-bold, etc.
+ * - Line Height: .leading-none, .leading-tight, .leading-normal, etc.
+ * - Text Align: .text-left, .text-center, .text-right, .text-justify
+ * - Text Transform: .uppercase, .lowercase, .capitalize, .normal-case
+ * - Text Style: .italic, .not-italic
+ * - Text Decoration: .underline, .line-through, .no-underline
+ * - Text Overflow: .truncate
+ * 
+ * All utilities support responsive variants with @breakpoint suffix:
+ * - .text-lg@md, .font-bold@lg, etc.
+ */
 
 // Utilities for text sizes
 
 /**
 * Text size utility
 * @param {string} $size - The size of the text.
-*/
+*/ 
 @mixin text-size($size) {
-  font-size: map.get($font-sizes, $size);
+  @if map.has-key(VAR.$font-sizes, $size) {
+    font-size: map.get(VAR.$font-sizes, $size);
+  } @else {
+    font-size: $size;
+  }
+  
 }
 
 // Font weights
@@ -60,98 +83,99 @@
 // Text overflow mixin
 @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;
+}
+
+
+@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 responsive-typography($breakpoint: null) {
+  $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+
+  @each $size, $val in VAR.$font-sizes {
+    .text-#{$size}#{$suffix} { @include text-size($size); }
+  }
+
+  // Generate font weight utilities
+  .font-thin#{$suffix} { @include font-thin; }
+  .font-extralight#{$suffix} { @include font-extralight; }
+  .font-light#{$suffix} { @include font-light; }
+  .font-normal#{$suffix} { @include font-normal; }
+  .font-medium#{$suffix} { @include font-medium; }
+  .font-semibold#{$suffix} { @include font-semibold; }
+  .font-bold#{$suffix} { @include font-bold; }
+  .font-extrabold#{$suffix} { @include font-extrabold; }
+  .font-black#{$suffix} { @include font-black; }
+
+  // Generate line height utilities
+  .leading-none#{$suffix} { @include leading-none; }
+  .leading-tight#{$suffix} { @include leading-tight; }
+  .leading-snug#{$suffix} { @include leading-snug; }
+  .leading-normal#{$suffix} { @include leading-normal; }
+  .leading-relaxed#{$suffix} { @include leading-relaxed; }
+  .leading-loose#{$suffix} { @include leading-loose; }
+
+  // Generate text alignment utilities
+  .text-left#{$suffix} { @include text-left; }
+  .text-center#{$suffix} { @include text-center; }
+  .text-right#{$suffix} { @include text-right; }
+  .text-justify#{$suffix} { @include text-justify; }
+
+  // Classes using mixins
+  .uppercase#{$suffix} { @include uppercase; }
+  .lowercase#{$suffix} { @include lowercase; }
+  .capitalize#{$suffix} { @include capitalize; }
+  .normal-case#{$suffix} { @include normal-case; }
+
+  .italic#{$suffix} { @include italic; }
+  .not-italic#{$suffix} { @include not-italic; }
+
+  .underline#{$suffix} { @include underline; }
+  .line-through#{$suffix} { @include line-through; }
+  .no-underline#{$suffix} { @include no-underline; }
+
+  .truncate#{$suffix} { @include truncate; }
+
+  .truncate-2#{$suffix} { @include truncate-lines(2); }
+  .truncate-3#{$suffix} { @include truncate-lines(3); }
+  .truncate-4#{$suffix} { @include truncate-lines(4); }
+  .truncate-5#{$suffix} { @include truncate-lines(5); }
 
-@each $size, $val in $font-sizes {
-  .text-#{$size} { @include text-size($size); }
 }
 
-// Generate font weight utilities
-.font-thin { @include font-thin; }
-.font-extralight { @include font-extralight; }
-.font-light { @include font-light; }
-.font-normal { @include font-normal; }
-.font-medium { @include font-medium; }
-.font-semibold { @include font-semibold; }
-.font-bold { @include font-bold; }
-.font-extrabold { @include font-extrabold; }
-.font-black { @include font-black; }
-
-// Generate line height utilities
-.leading-none { @include leading-none; }
-.leading-tight { @include leading-tight; }
-.leading-snug { @include leading-snug; }
-.leading-normal { @include leading-normal; }
-.leading-relaxed { @include leading-relaxed; }
-.leading-loose { @include leading-loose; }
-
-// Generate text alignment utilities
-.text-left { @include text-left; }
-.text-center { @include text-center; }
-.text-right { @include text-right; }
-.text-justify { @include text-justify; }
-
-// Classes using mixins
-.uppercase { @include uppercase; }
-.lowercase { @include lowercase; }
-.capitalize { @include capitalize; }
-.normal-case { @include normal-case; }
-
-.italic { @include italic; }
-.not-italic { @include not-italic; }
-
-.underline { @include underline; }
-.line-through { @include line-through; }
-.no-underline { @include no-underline; }
-
-.truncate { @include truncate; }
-
-
-@each $breakpoint, $width in $breakpoints {
+@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 $font-sizes {
-            // .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
+        @each $size, $val in VAR.$font-sizes {
             .text-#{$size}\@#{$breakpoint} { @include text-size($size); }
         }
-        
-        // Generate font weight utilities
-        .font-thin\@#{$breakpoint} { @include font-thin; }
-        .font-extralight\@#{$breakpoint} { @include font-extralight; }
-        .font-light\@#{$breakpoint} { @include font-light; }
-        .font-normal\@#{$breakpoint} { @include font-normal; }
-        .font-medium\@#{$breakpoint} { @include font-medium; }
-        .font-semibold\@#{$breakpoint} { @include font-semibold; }
-        .font-bold\@#{$breakpoint} { @include font-bold; }
-        .font-extrabold\@#{$breakpoint} { @include font-extrabold; }
-        .font-black\@#{$breakpoint} { @include font-black; }
-        
-        // Generate line height utilities
-        .leading-none\@#{$breakpoint} { @include leading-none; }
-        .leading-tight\@#{$breakpoint} { @include leading-tight; }
-        .leading-snug\@#{$breakpoint} { @include leading-snug; }
-        .leading-normal\@#{$breakpoint} { @include leading-normal; }
-        .leading-relaxed\@#{$breakpoint} { @include leading-relaxed; }
-        .leading-loose\@#{$breakpoint} { @include leading-loose; }
-        
-        // Generate text alignment utilities
-        .text-left\@#{$breakpoint} { @include text-left; }
-        .text-center\@#{$breakpoint} { @include text-center; }
-        .text-right\@#{$breakpoint} { @include text-right; }
-        .text-justify\@#{$breakpoint} { @include text-justify; }
-        
-        // Classes using mixins
-        .uppercase\@#{$breakpoint} { @include uppercase; }
-        .lowercase\@#{$breakpoint} { @include lowercase; }
-        .capitalize\@#{$breakpoint} { @include capitalize; }
-        .normal-case\@#{$breakpoint} { @include normal-case; }
-        
-        .italic\@#{$breakpoint} { @include italic; }
-        .not-italic\@#{$breakpoint} { @include not-italic; }
-        
-        .underline\@#{$breakpoint} { @include underline; }
-        .line-through\@#{$breakpoint} { @include line-through; }
-        .no-underline\@#{$breakpoint} { @include no-underline; }
-        
-        .truncate\@#{$breakpoint} { @include truncate; }
+        @include responsive-typography($breakpoint);
     }
 }
 

package/src/styles/utilities/_functions.scss

@@ -1,84 +0,0 @@
-@use 'sass:string';
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:meta';
-@use 'variables' as *;
-
-@function str-replace($string, $search, $replace: " ") {
-    $index: string.index($string, $search);
-    @if $index {
-      @return string.slice($string, 1, $index - 1)
-        + $replace
-        + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
-    }
-    @return $string;
-  }
-
-@function get-breakpoint-value($bp) {
-    @if map.has-key($breakpoints, $bp) {
-        @return map.get($breakpoints, $bp);
-    } @else if meta.type-of($bp) == number {
-        @return $bp;
-    } @else {
-        @warn 'Invalid breakpoint: #{$bp}';
-        @return null;
-    }
-}
-
-@function strip-unit($value) {
-  @return math.div($value, ($value * 0 + 1));
-}
-
-@function safe-unit-name($unit) {
-  
-  @if $unit == '%' {
-      @return 'per';
-  } @else if $unit == '.' {
-      @return 'dot';
-  } @else {
-      @return $unit;
-  }
-}
-
-@function get-unit($value) {
-  $value-str: #{$value};
-  
-  // Relative length units
-  @if string.index($value-str, 'em') {
-      @return 'em';
-  } @else if string.index($value-str, 'rem') {
-      @return 'rem';
-  } @else if string.index($value-str, '%') {
-      @return '%';
-  }
-  
-  // Viewport units
-  @else if string.index($value-str, 'vw') {
-      @return 'vw';
-  } @else if string.index($value-str, 'vh') {
-      @return 'vh';
-  } @else if string.index($value-str, 'vmin') {
-      @return 'vmin';
-  } @else if string.index($value-str, 'vmax') {
-      @return 'vmax';
-  }
-  
-  // Absolute length units
-  @else if string.index($value-str, 'px') {
-      @return 'px';
-  } @else if string.index($value-str, 'cm') {
-      @return 'cm';
-  } @else if string.index($value-str, 'mm') {
-      @return 'mm';
-  } @else if string.index($value-str, 'in') {
-      @return 'in';
-  } @else if string.index($value-str, 'pt') {
-      @return 'pt';
-  } @else if string.index($value-str, 'pc') {
-    @return 'pc';
-  }
-  
-  // Return empty string if no unit found
-  @return '';
-}

package/src/styles/utilities/_variables.scss

@@ -1,98 +0,0 @@
-@use 'sass:map';
-
-// Global variables that might be used across different modules
-$enable-debuger: false !default;
-$enable-dark-mode: true !default;
-$enable-rtl: true !default;;
-$enable-reduced-motion: true !default;
-$column-count: 12 !default;
-
-$default-container-name: nuvoui-container !default;
-$nuvoui-container-queries: false !default;
-
-$primary: #007bff !default;
-$secondary: #6c757d !default;
-$success: #28a745 !default;
-$danger: #dc3545 !default;
-$warning: #ffc107 !default;
-$info: #17a2b8 !default;
-
-$color-primitives: (
-  'gray': #6b7280,
-  'red': #ef4444,
-  'blue': #3b82f6,
-  'green': #22c55e,
-  'yellow': #eab308,
-  'purple': #a855f7,
-  'pink': #ec4899
-) !default;
-
-
-$theme-tokens: (
-  'background',
-  'foreground',
-  'surface',
-  'border',
-  'text-primary',
-  'text-secondary'
-) !default;
-
-// Default theme config (can be overridden)
-$light-theme: (
-  'background': #fff,
-  'foreground': #000,
-  'surface': #fff,
-  'border': #e5e7eb,
-  'text-primary': #000,
-  'text-secondary': #4b5563
-) !default;
-
-$dark-theme: (
-  'background': #000,
-  'foreground': #fff,
-  'surface': #1a1a1a,
-  'border': #2e2e2e,
-  'text-primary': #fff,
-  'text-secondary': #a3a3a3
-) !default;
-
-
-// Breakpoints
-$breakpoints: (
-  'xs': 480px,
-  'sm': 640px,
-  'md': 768px,
-  'lg': 1024px,
-  'xl': 1280px,
-  '2xl': 1536px, 
-) !default;
-
-// Container max-widths
-$container-max-widths: (
-  'xs': 450px,
-  'sm': 540px,
-  'md': 720px,
-  'lg': 960px,
-  'xl': 1140px,
-  '2xl': 1320px,
-) !default;
-
-// _variables.scss
-$font-sizes: (
-  'xs': 0.75rem,  // 12px
-  'sm': 0.875rem, // 14px
-  'md': 1rem,     // 16px
-  'lg': 1.25rem,  // 20px
-  'xl': 1.5rem,   // 24px
-  '2xl': 1.75rem, // 28px
-  '3xl': 2rem,    // 32px
-  '4xl': 2.5rem   // 40px
-) !default;
-
-$spacings: (
-  0,1,2,3,4,5,10,15,20,25,30,35,40,45,50,60,70,80,90,100,150,200,250,300,350,400,450,500
-) !default;
-
-$percentages: (
-  0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100
-) !default;