@vialiq/flux-ui 0.20.0 → 0.21.0

package/styles/_index.scss

@@ -1,5 +1,6 @@
 // Forwards all global style modules in cascade order.
 // Usage: @use '@vialiq/flux-ui/styles';
+@forward 'functions';
 @forward 'root';
 @forward 'reset';
 @forward 'theme';

package/styles/_layout.scss

@@ -193,6 +193,7 @@
 
   .min-h-screen {
     min-height: 100vh;
+    min-height: 100dvh;
   }
 
   .max-w-container {

package/styles/_utilities.scss

@@ -238,7 +238,7 @@
   }
 
   .rounded-full {
-    border-radius: 9999px;
+    border-radius: #{$border-radius-full};
   }
 
   // ============================================================================

package/styles/_variables.scss

@@ -13,6 +13,9 @@
  * are not supported inside @media queries or as integer math operands.
  */
 
+@use 'sass:math';
+@use './functions' as *;
+
 // Declare CSS layer order up-front so cascade is predictable regardless of
 // import order. Between layers, later ones win. Within a layer, normal selector
 // specificity still applies. Order: reset (lowest) → components → utilities (highest)
@@ -83,26 +86,17 @@ $color-blue-700: var(--vi-color-blue-700, #3676d0); // Deep azure (target)
 $color-blue-800: var(--vi-color-blue-800, #2d5fa8);
 $color-blue-900: var(--vi-color-blue-900, #254882); // Deep rich navy
 
-// -- Palette: Purple  (Vibrant Violet) ---------------------------------------
-
-$color-purple-100: var(--vi-color-purple-100, #f3e8ff);
-$color-purple-200: var(--vi-color-purple-200, #e9d5ff);
-$color-purple-300: var(--vi-color-purple-300, #d8b4fe);
-$color-purple-400: var(--vi-color-purple-400, #c084fc);
-$color-purple-500: var(--vi-color-purple-500, #a855f7);
-$color-purple-600: var(--vi-color-purple-600, #9333ea);
-$color-purple-700: var(--vi-color-purple-700, #7e22ce);
-$color-purple-800: var(--vi-color-purple-800, #6b21a8);
-$color-purple-900: var(--vi-color-purple-900, #581c87);
-$color-purple-100: var(--vi-color-purple-100, #f0e5f9); // Soft pastel purple (target)
+// -- Palette: Purple  (Vibrant Violet) ----------------------------------------
+// Custom curated violet scale. Goes from soft pastel to deep violet/navy.
+$color-purple-100: var(--vi-color-purple-100, #f0e5f9); // Soft pastel purple
 $color-purple-200: var(--vi-color-purple-200, #dbbdf2);
 $color-purple-300: var(--vi-color-purple-300, #c18eeb);
 $color-purple-400: var(--vi-color-purple-400, #a454e2);
-$color-purple-500: var(--vi-color-purple-500, #7609d0); // Vibrant purple (target)
+$color-purple-500: var(--vi-color-purple-500, #7609d0); // Vibrant purple
 $color-purple-600: var(--vi-color-purple-600, #6507c9);
 $color-purple-700: var(--vi-color-purple-700, #5505c2);
 $color-purple-800: var(--vi-color-purple-800, #4403bb);
-$color-purple-900: var(--vi-color-purple-900, #3400b4); // Deep violet/navy (target)
+$color-purple-900: var(--vi-color-purple-900, #3400b4); // Deep violet/navy
 
 // -- Semantic colors (brand + status) ----------------------------------------
 // These map named design intents onto palette values.
@@ -120,7 +114,7 @@ $color-info:      var(--vi-color-info,      #3676d0);   // blue-700
 $typeahead-highlight-bg:     var(--vi-typeahead-highlight-bg,    #ebf5ff); // blue-100
 $typeahead-highlight-color:  var(--vi-typeahead-highlight-color, #3676d0); // primary / blue-700
 
-// -- Functional colors -------------------------------------------------------
+// -- Semantic SASS Tokens -------------------------------------------------------
 
 $color-background: var(--vi-color-background, #ffffff);
 $color-foreground: var(--vi-color-foreground, #111827);  // grey-900
@@ -181,27 +175,28 @@ $focus-ring-error-glow: var(--vi-color-red-100, #ffccce); // alias for $color-re
 $focus-ring-success-glow: var(--vi-color-green-100, #e6f0eb); // alias for $color-green-100
 // -- Primitive: Spacing ------------------------------------------------------
 
-$spacing-unit: var(--vi-spacing-unit, 8px);
-$spacing-xs:   var(--vi-spacing-xs,   8px);
-$spacing-sm:   var(--vi-spacing-sm,   16px);
-$spacing-md:   var(--vi-spacing-md,   24px);
-$spacing-lg:   var(--vi-spacing-lg,   32px);
-$spacing-xl:   var(--vi-spacing-xl,   40px);
-$spacing-2xl:  var(--vi-spacing-2xl,  48px);
-$spacing-3xl:  var(--vi-spacing-3xl,  56px);
+$spacing-unit: var(--vi-spacing-unit, to-rem(4px));
+$spacing-xs:   var(--vi-spacing-xs,   to-rem(8px));
+$spacing-sm:   var(--vi-spacing-sm,   to-rem(12px));
+$spacing-md:   var(--vi-spacing-md,   to-rem(16px));
+$spacing-lg:   var(--vi-spacing-lg,   to-rem(24px));
+$spacing-xl:   var(--vi-spacing-xl,   to-rem(32px));
+$spacing-2xl:  var(--vi-spacing-2xl,  to-rem(48px));
+$spacing-3xl:  var(--vi-spacing-3xl,  to-rem(64px));
 
 // -- Primitive: Typography ---------------------------------------------------
 
 $font-family-base: var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
 $font-family-mono: var(--vi-font-family-mono, 'Menlo', 'Monaco', 'Courier New', monospace);
 
-$font-size-xs:   var(--vi-font-size-xs,   12px);
-$font-size-sm:   var(--vi-font-size-sm,   14px);
-$font-size-base: var(--vi-font-size-base, 16px);
-$font-size-lg:   var(--vi-font-size-lg,   18px);
-$font-size-xl:   var(--vi-font-size-xl,   20px);
-$font-size-2xl:  var(--vi-font-size-2xl,  24px);
-$font-size-3xl:  var(--vi-font-size-3xl,  30px);
+// Typography scale: xs=12, sm=13, base=14, lg=16, xl=20
+$font-size-xs:   var(--vi-font-size-xs,   to-rem(12px)); // Compact labels, captions
+$font-size-sm:   var(--vi-font-size-sm,   to-rem(13px)); // Sub-labels, secondary text
+$font-size-base: var(--vi-font-size-base, to-rem(14px)); // Standard body text
+$font-size-lg:   var(--vi-font-size-lg,   to-rem(16px)); // Large text, subheadings
+$font-size-xl:   var(--vi-font-size-xl,   to-rem(20px)); // Display, section headings
+$font-size-2xl:  var(--vi-font-size-2xl,  to-rem(24px));
+$font-size-3xl:  var(--vi-font-size-3xl,  to-rem(30px));
 
 $font-weight-light:    var(--vi-font-weight-light,    300);
 $font-weight-normal:   var(--vi-font-weight-normal,   400);
@@ -210,7 +205,7 @@ $font-weight-semibold: var(--vi-font-weight-semibold, 600);
 $font-weight-bold:     var(--vi-font-weight-bold,     700);
 
 $line-height-tight:   var(--vi-line-height-tight,   1.2);
-$line-height-normal:  var(--vi-line-height-normal,  1.5);
+$line-height-normal:  var(--vi-line-height-normal,  1.5715);
 $line-height-relaxed: var(--vi-line-height-relaxed, 1.75);
 
 // -- Primitive: Letter Spacing -----------------------------------------------
@@ -232,8 +227,8 @@ $shadow-xl: var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
 
 // -- Primitive: Border radius ------------------------------------------------
 
-$border-radius-sm: var(--vi-border-radius-sm, 2px);
-$border-radius-md: var(--vi-border-radius-md, 4px);
+$border-radius-sm: var(--vi-border-radius-sm, 4px);
+$border-radius-md: var(--vi-border-radius-md, 6px);
 $border-radius-lg: var(--vi-border-radius-lg, 8px);
 $border-radius-xl: var(--vi-border-radius-xl, 12px);
 $border-radius-full: var(--vi-border-radius-full, 9999px);
@@ -345,6 +340,7 @@ $color-map: (
 );
 
 $spacing-map: (
+  'unit': $spacing-unit,
   'xs':  $spacing-xs,
   'sm':  $spacing-sm,
   'md':  $spacing-md,
@@ -408,9 +404,9 @@ $z-index-map: (
 $modal-bg:                     var(--vi-modal-bg,                     $color-background);
 $modal-border-radius:          var(--vi-modal-border-radius,          $border-radius-lg);
 $modal-shadow:                 var(--vi-modal-shadow,                 $shadow-xl);
-$modal-header-padding:         var(--vi-modal-header-padding,         20px 24px);
-$modal-body-padding:           var(--vi-modal-body-padding,           24px);
-$modal-footer-padding:         var(--vi-modal-footer-padding,         16px 24px);
+$modal-header-padding:         var(--vi-modal-header-padding,         #{$spacing-md} #{$spacing-lg});
+$modal-body-padding:           var(--vi-modal-body-padding,           #{$spacing-lg});
+$modal-footer-padding:         var(--vi-modal-footer-padding,         #{$spacing-xs} #{$spacing-md});
 $modal-footer-bg:              var(--vi-modal-footer-bg,              $layer-02);
 $modal-footer-border-color:    var(--vi-modal-footer-border-color,    $border-02);
 $modal-backdrop-bg:            var(--vi-modal-backdrop-bg,            rgba(0, 0, 0, 0.5));
@@ -422,7 +418,7 @@ $modal-animation-duration:     var(--vi-modal-animation-duration,     200ms);
 
 $modal-max-width-xs:           var(--vi-modal-max-width-xs,           320px);
 $modal-max-width-sm:           var(--vi-modal-max-width-sm,           480px);
-$modal-max-width-md:           var(--vi-modal-max-width-md,           640px);
+$modal-max-width-md:           var(--vi-modal-max-width-md,           520px);
 $modal-max-width-lg:           var(--vi-modal-max-width-lg,           800px);
 $modal-max-width-xl:           var(--vi-modal-max-width-xl,           960px);