responsive-scale-mixins 2.0.7 → 2.0.9

package/README.md

@@ -60,6 +60,15 @@ Works with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, and vanilla CSS. Y
 
 **SCSS implementations are NOT affected** - existing `@include responsive-scale()` calls work unchanged.
 
+## ✅ v2.0.9 - Bug Fix (No Breaking Changes)
+
+**This is a bug fix that resolves tablet breakpoint calculation issues. No API changes.**
+
+- **Fixed**: Tablet breakpoint CSS generation was producing invalid `calc()` expressions
+- **Result**: Tablet scaling now works correctly with valid CSS output
+- **Compatibility**: All existing code continues to work unchanged
+- **API**: Zero breaking changes - same function calls, same parameters, same behavior
+
 ### Migration Guide (Pure CSS Users)
 
 **Update your CSS variable definitions:**

package/index.scss

@@ -1,4 +1,4 @@
-// Responsive Scale Mixins v2.0.7
+// Responsive Scale Mixins v2.0.9
 // A powerful SCSS mixin system for creating perfectly responsive designs
 // Single-file distribution for maximum compatibility
 
@@ -85,29 +85,24 @@
       $calc-value: calc(
         #{$desktop-value} /
           100 *
-          100vw /
-          var(--desktop-width) *
-          #{$desktop-relative} *
-          #{$unit}
+          (var(#{$scale-factor}) * #{$desktop-relative}#{$unit})
       );
       #{$property}: #{$calc-value}#{$important};
     }
 
     @media screen and (min-width: 768px) and (max-width: 991px) {
+      $tablet-scale-factor: get-tablet-scale-factor($unit);
       @if $desktop-relative != null and $mobile-relative != null {
         $calc-value: calc(
           #{$mobile-value} /
             100 *
             (
-              100vw /
-                var(--tablet-width) *
+              var(#{$tablet-scale-factor}) *
                 (
-                  #{$mobile-relative} +
-                    (100vw - var(--mobile-width)) /
-                    (var(--desktop-width) - var(--mobile-width)) *
-                    (#{$desktop-relative} - #{$mobile-relative})
-                ) *
-                #{$unit}
+                  #{$mobile-relative}#{$unit} +
+                    var(--tablet-proportion-scale-factor) *
+                    (#{$desktop-relative}#{$unit} - #{$mobile-relative}#{$unit})
+                )
             )
         );
         #{$property}: #{$calc-value}#{$important};
@@ -115,14 +110,12 @@
     }
 
     @media screen and (max-width: 767px) {
+      $mobile-scale-factor: get-mobile-scale-factor($unit);
       @if $mobile-relative != null {
         $calc-value: calc(
           #{$mobile-value} /
             100 *
-            100vw /
-            var(--mobile-width) *
-            #{$mobile-relative} *
-            #{$unit}
+            (var(#{$mobile-scale-factor}) * #{$mobile-relative}#{$unit})
         );
         #{$property}: #{$calc-value}#{$important};
       }
@@ -144,6 +137,7 @@
     }
 
     @media screen and (min-width: 768px) and (max-width: 991px) {
+      $tablet-scale-factor: get-tablet-scale-factor($unit);
       @if meta.type-of($desktop-value) == list {
         $tablet-scaled: ();
         @for $i from 1 through list.length($desktop-value) {
@@ -152,30 +146,24 @@
           $tablet-scaled: list.append(
             $tablet-scaled,
             calc(
-              100vw /
-                var(--tablet-width) *
+              var(#{$tablet-scale-factor}) *
                 (
-                  #{$m-val} +
-                    (100vw - var(--mobile-width)) /
-                    (var(--desktop-width) - var(--mobile-width)) *
-                    (#{$d-val} - #{$m-val})
-                ) *
-                #{$unit}
+                  #{$m-val}#{$unit} +
+                    var(--tablet-proportion-scale-factor) *
+                    (#{$d-val}#{$unit} - #{$m-val}#{$unit})
+                )
             )
           );
         }
         #{$property}: #{$tablet-scaled}#{$important};
       } @else {
         $calc-value: calc(
-          100vw /
-            var(--tablet-width) *
+          var(#{$tablet-scale-factor}) *
             (
-              #{$mobile-value} +
-                (100vw - var(--mobile-width)) /
-                (var(--desktop-width) - var(--mobile-width)) *
-                (#{$desktop-value} - #{$mobile-value})
-            ) *
-            #{$unit}
+              #{$mobile-value}#{$unit} +
+                var(--tablet-proportion-scale-factor) *
+                (#{$desktop-value}#{$unit} - #{$mobile-value}#{$unit})
+            )
         );
         #{$property}: #{$calc-value}#{$important};
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-scale-mixins",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "🎨 Revolutionary SCSS mixins for perfect responsive design. Supports ALL CSS units (px, rem, em, vw, vh, %, etc.) with pixel-perfect scaling. Zero manual calculations - just flawless responsive typography, spacing, and dimensions across desktop, tablet, and mobile. Single-file distribution for maximum compatibility. Framework-agnostic, modern CSS variables, works everywhere.",
   "main": "index.scss",
   "style": "index.scss",