responsive-scale-mixins 1.1.1 → 2.0.0

package/README.md

@@ -2,8 +2,55 @@
 
 A powerful SCSS mixin system for creating perfectly responsive designs that maintain Figma proportions across all screen sizes.
 
-[![npm version](https://badge.fury.io/js/responsive-scale-mixins.svg)](https://badge.fury.io/js/responsive-scale-mixins)
+[![npm version](https://badge.fury.io/js/responsive-scale-mixins.svg)](https://www.npmjs.com/package/responsive-scale-mixins)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm](https://img.shields.io/npm/v/responsive-scale-mixins)](https://www.npmjs.com/package/responsive-scale-mixins)
+[![npm](https://img.shields.io/npm/dm/responsive-scale-mixins)](https://www.npmjs.com/package/responsive-scale-mixins)
+
+## ⚠️ Breaking Changes in v2.0.0
+
+**Pure CSS implementations are affected by this breaking change.**
+
+- **CSS Variables**: Variable names changed from `--computed-scale-factor-px`/`--computed-scale-factor-rem` to generic `--computed-scale-factor`
+- **Calc Expressions**: Units are now appended to multipliers (e.g., `* 2rem` instead of `* 2`)
+- **SCSS Usage**: Unchanged - existing SCSS mixin calls continue to work
+
+**SCSS implementations are NOT affected** - existing `@include responsive-scale()` calls work unchanged.
+
+### Migration Guide (Pure CSS Users)
+
+**Update your CSS variable definitions:**
+
+```css
+/* OLD (v1.x) */
+:root {
+  --computed-scale-factor-px: calc(100vw / 1440);
+  --computed-scale-factor-rem: calc(100vw / 1440 / 16);
+  --computed-tablet-scale-factor-px: calc(100vw / 768);
+  --computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
+  --computed-mobile-scale-factor-px: calc(100vw / 375);
+  --computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+/* NEW (v2.0) */
+:root {
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+```
+
+**Update your calc expressions to include units:**
+
+```css
+/* OLD (v1.x) */
+font-size: calc(var(--computed-scale-factor-px) * 40);
+
+/* NEW (v2.0) */
+font-size: calc(var(--computed-scale-factor) * 40px);
+```
 
 ## ✨ Features
 
@@ -13,6 +60,7 @@ A powerful SCSS mixin system for creating perfectly responsive designs that main
 - **CSS Custom Properties**: Uses modern CSS variables for optimal performance
 - **Framework Agnostic**: Works with any CSS framework or vanilla CSS
 - **TypeScript Ready**: Compatible with CSS Modules and CSS-in-JS solutions
+- **Universal Unit Support**: Handles all CSS units including absolute (px, pt, cm, mm, in, pc) and relative (%, em, rem, vw, vh, vmin, vmax) units
 
 ## 🚀 Quick Start
 
@@ -45,6 +93,9 @@ pnpm add responsive-scale-mixins
 @import "~responsive-scale-mixins";
 
 :root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   // Define CSS variables globally (required)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
@@ -61,6 +112,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Define CSS variables globally (required)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -82,6 +137,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Define CSS variables globally (required)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -103,6 +162,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Define CSS variables globally (required)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -124,6 +187,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Define CSS variables globally (required)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -145,6 +212,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Customize for your design system (optional)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -158,6 +229,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Customize for your design system (optional)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -171,6 +246,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Customize for your design system (optional)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -184,6 +263,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Customize for your design system (optional)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -197,6 +280,10 @@ pnpm add responsive-scale-mixins
 
 :root {
   // Customize for your design system (optional)
+
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
   // Or use defaults: @include responsive-scale-variables();
 }
@@ -211,12 +298,12 @@ pnpm add responsive-scale-mixins
 // Variables must be in global scope
 // In your main CSS file:
 :root {
-  --computed-scale-factor-px: calc(100vw / 1920);
-  --computed-scale-factor-rem: calc(100vw / 1920 / 16);
-  --computed-tablet-scale-factor-px: calc(100vw / 768);
-  --computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
-  --computed-mobile-scale-factor-px: calc(100vw / 390);
-  --computed-mobile-scale-factor-rem: calc(100vw / 390 / 16);
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1920);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 390);
   --tablet-proportion-scale-factor: calc((100vw - 390px) / (1920px - 390px));
 }
 
@@ -375,8 +462,13 @@ Easily customize the design widths to match your project's breakpoints:
 
 ```scss
 :root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+
   // Custom design widths (desktop, tablet, mobile)
   @include responsive-scale-variables(1440px, 768px, 375px);
+  // Or use defaults: @include responsive-scale-variables();
 }
 ```
 
@@ -386,11 +478,56 @@ Easily customize the design widths to match your project's breakpoints:
 - Tablet: 768px
 - Mobile: 390px
 
-### REM Units
+### REM and EM Units
+
+```scss
+.element {
+  @include responsive-scale(
+    font-size,
+    3,
+    2,
+    rem
+  ); // 3rem / 2rem - uses rem scale factor
+  @include responsive-scale(
+    font-size,
+    2,
+    1.5,
+    em
+  ); // 2em / 1.5em - uses rem scale factor
+}
+```
+
+**Universal Unit Support:**
+
+The mixin supports **all CSS units** with a single generic scale factor:
+
+**Absolute Units:**
+
+- `@include responsive-scale(property, value, mobile-value, px)` → `* valuepx`
+- `@include responsive-scale(property, value, mobile-value, pt)` → `* valuept`
+- `@include responsive-scale(property, value, mobile-value, cm)` → `* valuecm`
+- `@include responsive-scale(property, value, mobile-value, mm)` → `* valuemm`
+- `@include responsive-scale(property, value, mobile-value, in)` → `* valuein`
+- `@include responsive-scale(property, value, mobile-value, pc)` → `* valuepc`
+
+**Relative Units:**
+
+- `@include responsive-scale(property, value, mobile-value, em)` → `* valueem`
+- `@include responsive-scale(property, value, mobile-value, rem)` → `* valuerem`
+- `@include responsive-scale(property, value, mobile-value, %)` → `* value%`
+- `@include responsive-scale(property, value, mobile-value, vw)` → `* valuevw`
+- `@include responsive-scale(property, value, mobile-value, vh)` → `* valuevh`
+- `@include responsive-scale(property, value, mobile-value, vmin)` → `* valuevmin`
+- `@include responsive-scale(property, value, mobile-value, vmax)` → `* valuevmax`
+
+**Example Usage:**
 
 ```scss
 .element {
-  @include responsive-scale(font-size, 3, 2, rem); // 3rem / 2rem
+  @include responsive-scale(margin, 2, 1, cm); // centimeters
+  @include responsive-scale(width, 50, 30, vw); // viewport width
+  @include responsive-scale(height, 80, 60, vh); // viewport height
+  @include responsive-scale(font-size, 1.5, 1, em); // em units
 }
 ```
 
@@ -400,16 +537,275 @@ If you prefer manual control, you can set the CSS variables directly:
 
 ```scss
 :root {
-  --computed-scale-factor-px: calc(100vw / 1440); // Your desktop width
-  --computed-scale-factor-rem: calc(100vw / 1440 / 16);
-  --computed-tablet-scale-factor-px: calc(100vw / 768); // Your tablet width
-  --computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
-  --computed-mobile-scale-factor-px: calc(100vw / 375); // Your mobile width
-  --computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440); // Your desktop width
+  --computed-tablet-scale-factor: calc(100vw / 768); // Your tablet width
+  --computed-mobile-scale-factor: calc(100vw / 375); // Your mobile width
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+```
+
+## 🔧 Troubleshooting
+
+If the `@include responsive-scale-variables()` mixin doesn't work in your setup (e.g., due to SCSS compilation issues), use the manual CSS variables approach. Below are manual setups for each framework:
+
+### Why the Manual Approach Works
+
+The `@include responsive-scale-variables()` mixin may fail in certain SCSS compilation environments (like some Next.js setups) because the imported mixins aren't processed correctly. The manual CSS variables approach bypasses this by directly defining the required `--computed-scale-factor-*` variables in `:root`.
+
+### Next.js (App Router) - Manual Setup
+
+```scss
+// app/globals.css or app/styles/globals.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440); // Your design desktop width
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In component files
+@import "responsive-scale-mixins";
+.my-element {
+  @include responsive-scale(font-size, 24, 16);
+}
+```
+
+### Next.js (Pages Router) - Manual Setup
+
+```scss
+// styles/globals.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In component files
+@import "responsive-scale-mixins";
+```
+
+### Create React App - Manual Setup
+
+```scss
+// src/index.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In component files
+@import "responsive-scale-mixins";
+```
+
+### Vue.js - Manual Setup
+
+```scss
+// src/assets/styles/main.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In component styles
+@import "responsive-scale-mixins";
+```
+
+### Angular - Manual Setup
+
+```scss
+// src/styles.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
   --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
 }
+
+// In component styles
+@import "responsive-scale-mixins";
 ```
 
+### Vite + Vue/React - Manual Setup
+
+```scss
+// src/styles/main.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In components
+@import "responsive-scale-mixins";
+```
+
+### Gatsby - Manual Setup
+
+```scss
+// src/styles/global.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In components
+@import "responsive-scale-mixins";
+```
+
+### Nuxt.js - Manual Setup
+
+```scss
+// assets/styles/main.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In components
+@import "responsive-scale-mixins";
+```
+
+### SvelteKit - Manual Setup
+
+```scss
+// src/app.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In components
+@import "responsive-scale-mixins";
+```
+
+### Astro - Manual Setup
+
+```scss
+// src/styles/global.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In components
+@import "responsive-scale-mixins";
+```
+
+### CSS Modules - Manual Setup
+
+```scss
+// In your global CSS file (e.g., globals.scss)
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1920);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 390);
+  --tablet-proportion-scale-factor: calc((100vw - 390px) / (1920px - 390px));
+}
+
+// In your module files
+@import "responsive-scale-mixins";
+.myClass {
+  @include responsive-scale(font-size, 24, 16);
+}
+```
+
+### Tailwind CSS - Manual Setup
+
+```scss
+// styles/main.scss
+:root {
+  // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In components
+@import "responsive-scale-mixins";
+.custom-element {
+  @include responsive-scale(padding, 20 40, 10 20);
+  @apply bg-blue-500 text-white;
+}
+```
+
+### Styled Components - Manual Setup
+
+```scss
+// In your global styles
+:root {
+   // Replace 1440 with your design width or leave default (desktop)
+  // Replace 768 with your design width or leave default (tablet)
+  // Replace 375 with your design width or leave default (mobile)
+  --computed-scale-factor: calc(100vw / 1440);
+  --computed-tablet-scale-factor: calc(100vw / 768);
+  --computed-mobile-scale-factor: calc(100vw / 375);
+  --tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
+}
+
+// In styled components with SCSS preprocessing
+import styled from 'styled-components';
+import './styles/responsive-mixins.scss';
+
+const StyledComponent = styled.div`
+  ${props => props.theme.responsiveScale('font-size', 24, 16)}
+`;
+```
+
+**Note:** Replace `1440`, `768`, `375` with your actual design widths. The manual approach ensures compatibility across all build tools and frameworks.
+
 ## 📱 Breakpoints
 
 - **Desktop**: ≥992px (scales from desktop design width)
@@ -449,11 +845,38 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - Built for modern web development workflows
 - Compatible with CSS Modules, Styled Components, and traditional CSS
 
-## 📞 Support
+## 🧪 Testing
+
+The library includes a comprehensive test suite located in the `test/` directory:
+
+```bash
+# Run the test suite
+cd test && ./test.sh  # Unix/Linux/macOS
+cd test && test.bat   # Windows
+```
+
+See [`test/TEST_README.md`](test/TEST_README.md) for detailed testing instructions.
+
+<!-- ## � Linking NPM Package to GitHub Packages
+
+To connect your published NPM package to GitHub Packages:
+
+1. **Go to your GitHub repository** → **Settings** → **Packages**
+2. **Click "Connect repository"** or **"Link to repository"**
+3. **Search for and select** your NPM package: `responsive-scale-mixins`
+4. **Confirm the connection**
+
+This will display your NPM package statistics and information in the GitHub Packages section of your repository.
+
+**Note:** The package will automatically appear in GitHub Packages once published to NPM, as long as the repository URL in `package.json` matches your GitHub repository. -->
+
+## �📞 Support
 
 - 📧 Email: saheedodulaja@gmail.com
 - 🐛 Issues: [GitHub Issues](https://github.com/Sidodus/responsive-scale-mixins/issues)
 - 📖 Docs: [Full Documentation](https://github.com/Sidodus/responsive-scale-mixins#readme)
+- 📦 NPM: [https://www.npmjs.com/package/responsive-scale-mixins](https://www.npmjs.com/package/responsive-scale-mixins)
+- 👤 NPM Profile: [https://www.npmjs.com/~sidodus](https://www.npmjs.com/~sidodus)
 
 ---
 

package/index.scss

@@ -1,8 +1,6 @@
 // Responsive Scale Mixins
 // A powerful SCSS mixin system for creating perfectly responsive designs
 
-// Import the variables mixin (must be included in your root element)
-@import "scss/variables";
-
-// Import the responsive scale mixin
-@import "scss/mixins";
+// Forward all mixins and functions from modules
+@forward "scss/variables";
+@forward "scss/mixins";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "responsive-scale-mixins",
-  "version": "1.1.1",
-  "description": "Powerful SCSS mixins for responsive design with Figma proportions. Automatically scales typography, spacing, and dimensions across desktop, tablet, and mobile breakpoints.",
+  "version": "2.0.0",
+  "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. Framework-agnostic, modern CSS variables, works everywhere.",
   "main": "index.scss",
   "style": "index.scss",
   "scripts": {
@@ -13,6 +13,14 @@
     "responsive",
     "mixins",
     "figma",
+    "sketch",
+    "adobe-xd",
+    "invision",
+    "framer",
+    "zeplin",
+    "ui-design",
+    "ux-design",
+    "design-systems",
     "typography",
     "spacing",
     "dimensions",
@@ -32,7 +40,10 @@
     "mobile-first",
     "responsive-design",
     "css-variables",
-    "custom-properties"
+    "custom-properties",
+    "pixel-perfect",
+    "fluid-typography",
+    "responsive-scaling"
   ],
   "author": "Saheed Odulaja",
   "license": "MIT",

package/scss/_mixins.scss

@@ -24,7 +24,22 @@
 // Media queries: Desktop (default), Tablet (768-991px), Mobile (≤767px). */
 
 @function scaled-value($val, $scale-var, $unit: px) {
-  @return calc(var(#{$scale-var}) * #{$val});
+  @return calc(var(#{$scale-var}) * #{$val}#{$unit});
+}
+
+@function get-scale-factor($unit) {
+  // Use generic scale factor - unit is appended in calc expressions
+  @return unquote("--computed-scale-factor");
+}
+
+@function get-tablet-scale-factor($unit) {
+  // Use generic scale factor - unit is appended in calc expressions
+  @return unquote("--computed-tablet-scale-factor");
+}
+
+@function get-mobile-scale-factor($unit) {
+  // Use generic scale factor - unit is appended in calc expressions
+  @return unquote("--computed-mobile-scale-factor");
 }
 
 @mixin responsive-scale(
@@ -37,27 +52,21 @@
   $mobile-relative: null,
   $important: null
 ) {
-  $scale-factor: if(
-    $unit == px,
-    unquote("--computed-scale-factor-px"),
-    unquote("--computed-scale-factor-rem")
-  );
+  $scale-factor: get-scale-factor($unit);
 
   // If it's a percentage-based value (like letter-spacing), scale it based on the relative property
   @if $is-percentage == true {
     @if $desktop-relative != null {
       $calc-value: calc(
-        #{$desktop-value} / 100 * (var(#{$scale-factor}) * #{$desktop-relative})
+        #{$desktop-value} /
+          100 *
+          (var(#{$scale-factor}) * #{$desktop-relative}#{$unit})
       );
       #{$property}: #{$calc-value}#{$important};
     }
 
     @media screen and (min-width: 768px) and (max-width: 991px) {
-      $tablet-scale-factor: if(
-        $unit == px,
-        unquote("--computed-tablet-scale-factor-px"),
-        unquote("--computed-tablet-scale-factor-rem")
-      );
+      $tablet-scale-factor: get-tablet-scale-factor($unit);
       @if $desktop-relative != null and $mobile-relative != null {
         $calc-value: calc(
           #{$mobile-value} /
@@ -65,9 +74,9 @@
             (
               var(#{$tablet-scale-factor}) *
                 (
-                  #{$mobile-relative} +
+                  #{$mobile-relative}#{$unit} +
                     var(--tablet-proportion-scale-factor) *
-                    (#{$desktop-relative} - #{$mobile-relative})
+                    (#{$desktop-relative}#{$unit} - #{$mobile-relative}#{$unit})
                 )
             )
         );
@@ -76,16 +85,12 @@
     }
 
     @media screen and (max-width: 767px) {
-      $mobile-scale-factor: if(
-        $unit == px,
-        unquote("--computed-mobile-scale-factor-px"),
-        unquote("--computed-mobile-scale-factor-rem")
-      );
+      $mobile-scale-factor: get-mobile-scale-factor($unit);
       @if $mobile-relative != null {
         $calc-value: calc(
           #{$mobile-value} /
             100 *
-            (var(#{$mobile-scale-factor}) * #{$mobile-relative})
+            (var(#{$mobile-scale-factor}) * #{$mobile-relative}#{$unit})
         );
         #{$property}: #{$calc-value}#{$important};
       }
@@ -107,11 +112,7 @@
     }
 
     @media screen and (min-width: 768px) and (max-width: 991px) {
-      $tablet-scale-factor: if(
-        $unit == px,
-        unquote("--computed-tablet-scale-factor-px"),
-        unquote("--computed-tablet-scale-factor-rem")
-      );
+      $tablet-scale-factor: get-tablet-scale-factor($unit);
       @if type-of($desktop-value) == list {
         $tablet-scaled: ();
         @for $i from 1 through length($desktop-value) {
@@ -122,9 +123,9 @@
             calc(
               var(#{$tablet-scale-factor}) *
                 (
-                  #{$m-val} +
+                  #{$m-val}#{$unit} +
                     var(--tablet-proportion-scale-factor) *
-                    (#{$d-val} - #{$m-val})
+                    (#{$d-val}#{$unit} - #{$m-val}#{$unit})
                 )
             )
           );
@@ -134,9 +135,9 @@
         $calc-value: calc(
           var(#{$tablet-scale-factor}) *
             (
-              #{$mobile-value} +
+              #{$mobile-value}#{$unit} +
                 var(--tablet-proportion-scale-factor) *
-                (#{$desktop-value} - #{$mobile-value})
+                (#{$desktop-value}#{$unit} - #{$mobile-value}#{$unit})
             )
         );
         #{$property}: #{$calc-value}#{$important};
@@ -144,11 +145,7 @@
     }
 
     @media screen and (max-width: 767px) {
-      $mobile-scale-factor: if(
-        $unit == px,
-        unquote("--computed-mobile-scale-factor-px"),
-        unquote("--computed-mobile-scale-factor-rem")
-      );
+      $mobile-scale-factor: get-mobile-scale-factor($unit);
       @if type-of($mobile-value) == list {
         $mobile-scaled: ();
         @each $val in $mobile-value {

package/scss/_variables.scss

@@ -8,17 +8,14 @@
   $tablet-width: 768px,
   $mobile-width: 390px
 ) {
-  // Desktop scale factor
-  --computed-scale-factor-px: calc(100vw / #{$desktop-width});
-  --computed-scale-factor-rem: calc(100vw / #{$desktop-width} / 16);
+  // Desktop scale factor (generic - unit is appended in calc expressions)
+  --computed-scale-factor: calc(100vw / #{$desktop-width});
 
-  // Tablet scale factor
-  --computed-tablet-scale-factor-px: calc(100vw / #{$tablet-width});
-  --computed-tablet-scale-factor-rem: calc(100vw / #{$tablet-width} / 16);
+  // Tablet scale factor (generic - unit is appended in calc expressions)
+  --computed-tablet-scale-factor: calc(100vw / #{$tablet-width});
 
-  // Mobile scale factor
-  --computed-mobile-scale-factor-px: calc(100vw / #{$mobile-width});
-  --computed-mobile-scale-factor-rem: calc(100vw / #{$mobile-width} / 16);
+  // Mobile scale factor (generic - unit is appended in calc expressions)
+  --computed-mobile-scale-factor: calc(100vw / #{$mobile-width});
 
   // Tablet proportion scale factor for interpolation between mobile and desktop values
   --tablet-proportion-scale-factor: calc(