responsive-scale-mixins 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Saheed Odulaja
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,276 @@
+# 🎨 Responsive Scale Mixins
+
+A powerful SCSS mixin system for creating perfectly responsive designs that maintain Figma proportions across all screen sizes.
+
+## 🚀 Quick Start
+
+```scss
+@import "./src/styles/mixins";
+
+// Basic usage
+.my-element {
+  @include responsive-scale(font-size, 24, 16);
+  @include responsive-scale(padding, 20 40, 10 20);
+}
+```
+
+## 📋 Table of Contents
+
+- [Setup](#setup)
+- [Basic Usage](#basic-usage)
+- [Advanced Usage](#advanced-usage)
+- [Property Examples](#property-examples)
+- [Percentage Properties](#percentage-properties)
+- [Tips & Best Practices](#tips--best-practices)
+
+## 🔧 Setup
+
+### 1. Import the Mixins
+
+Add this to your SCSS file:
+
+```scss
+@import "../styles/mixins"; // Adjust path as needed
+```
+
+### 2. CSS Variables (Already configured in `global.scss`)
+
+The mixin uses these responsive scale factors:
+
+- `--computed-scale-factor-px` (Desktop: 1913px)
+- `--computed-tablet-scale-factor-px` (Tablet: 768px)
+- `--computed-mobile-scale-factor-px` (Mobile: 390px)
+
+## 🎯 Basic Usage
+
+### Same Value for All Screens
+
+When you want the same value across desktop, tablet, and mobile:
+
+```scss
+// Single parameter - same value for all breakpoints
+.element {
+  @include responsive-scale(border-radius, 10);
+  @include responsive-scale(font-weight, 500);
+}
+```
+
+**Output:**
+
+```css
+.element {
+  border-radius: calc(var(--computed-scale-factor-px) * 10);
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .element {
+    border-radius: calc(var(--computed-tablet-scale-factor-px) * 10);
+  }
+}
+
+@media (max-width: 767px) {
+  .element {
+    border-radius: calc(var(--computed-mobile-scale-factor-px) * 10);
+  }
+}
+```
+
+### Different Values for Desktop & Mobile
+
+When desktop and mobile need different values:
+
+```scss
+// Two parameters - desktop and mobile values
+.element {
+  @include responsive-scale(font-size, 24, 16);
+  @include responsive-scale(height, 60, 40);
+}
+```
+
+**Output:**
+
+```css
+.element {
+  font-size: calc(var(--computed-scale-factor-px) * 24);
+  height: calc(var(--computed-scale-factor-px) * 60);
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .element {
+    font-size: calc(
+      var(--computed-tablet-scale-factor-px) *
+        (16 + var(--tablet-proportion-scale-factor) * (24 - 16))
+    );
+    height: calc(
+      var(--computed-tablet-scale-factor-px) *
+        (40 + var(--tablet-proportion-scale-factor) * (60 - 40))
+    );
+  }
+}
+
+@media (max-width: 767px) {
+  .element {
+    font-size: calc(var(--computed-mobile-scale-factor-px) * 16);
+    height: calc(var(--computed-mobile-scale-factor-px) * 40);
+  }
+}
+```
+
+## ⚡ Advanced Usage
+
+### REM Units
+
+```scss
+.element {
+  @include responsive-scale(font-size, 2, 1.5, rem);
+}
+```
+
+### Multi-Value Properties
+
+```scss
+.element {
+  @include responsive-scale(padding, 20 40 20 40, 10 20 10 20);
+  @include responsive-scale(margin, 0 10, 0 5);
+}
+```
+
+## 📏 Property Examples
+
+### Typography
+
+```scss
+.text {
+  @include responsive-scale(font-size, 24, 16);
+  @include responsive-scale(line-height, 1.5, 1.4);
+  @include responsive-scale(letter-spacing, -0.5, -0.3);
+}
+```
+
+### Spacing
+
+```scss
+.card {
+  @include responsive-scale(padding, 20 30, 15 20);
+  @include responsive-scale(margin, 0 0 20 0, 0 0 15 0);
+}
+```
+
+### Dimensions
+
+```scss
+.button {
+  @include responsive-scale(width, 200, 150);
+  @include responsive-scale(height, 50, 40);
+  @include responsive-scale(border-radius, 8, 6);
+}
+```
+
+### Borders & Shadows
+
+```scss
+.box {
+  @include responsive-scale(border-width, 2, 1);
+  @include responsive-scale(border-radius, 10, 8);
+}
+```
+
+## 📊 Percentage Properties
+
+For properties that are percentages of other values:
+
+```scss
+.element {
+  @include responsive-scale(
+    letter-spacing,
+    -1.5,
+    // Desktop percentage
+    -1.5,
+    // Mobile percentage
+    px,
+    true,
+    // Is percentage-based
+    24,
+    // Desktop base value (font-size)
+    16 // Mobile base value (font-size)
+  );
+}
+```
+
+**Output:**
+
+```css
+.element {
+  letter-spacing: calc(-1.5 / 100 * (var(--computed-scale-factor-px) * 24));
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .element {
+    letter-spacing: calc(
+      -1.5 / 100 *
+        (
+          var(--computed-tablet-scale-factor-px) *
+            (16 + var(--tablet-proportion-scale-factor) * (24 - 16))
+        )
+    );
+  }
+}
+
+@media (max-width: 767px) {
+  .element {
+    letter-spacing: calc(
+      -1.5 / 100 * (var(--computed-mobile-scale-factor-px) * 16)
+    );
+  }
+}
+```
+
+## 💡 Tips & Best Practices
+
+### ✅ Do's
+
+- Use consistent units (px for most cases, rem for typography)
+- Test on multiple screen sizes
+- Use the same base values from your Figma design
+- Combine with your existing CSS variables
+
+### ❌ Don'ts
+
+- Don't mix units in the same property
+- Don't use negative values for dimensions
+- Don't forget to import the mixins
+
+### 🎨 Visual Guide
+
+```
+Desktop (≥992px) → Uses desktop scale factor
+Tablet (768-991px) → Auto-interpolated values
+Mobile (≤767px) → Uses mobile scale factor
+```
+
+### 🔧 Customization
+
+Adjust scale factors in `global.scss`:
+
+```scss
+--scale-factor: calc(100vw / 1920); // Change desktop width
+--mobile-scale-factor: calc(100vw / 375); // Change mobile width
+```
+
+## 📚 Complete Example
+
+```scss
+@import "../styles/mixins";
+
+.hero-button {
+  @include responsive-scale(font-size, 20, 16);
+  @include responsive-scale(padding, 15 30, 12 24);
+  @include responsive-scale(border-radius, 8, 6);
+  @include responsive-scale(height, 50, 44);
+
+  // Percentage-based
+  @include responsive-scale(letter-spacing, -1, -1, px, true, 20, 16);
+}
+```
+
+This creates a perfectly responsive button that scales beautifully across all devices! 🎉

package/index.scss

@@ -0,0 +1,8 @@
+// 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";

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "responsive-scale-mixins",
+  "version": "1.0.0",
+  "description": "Powerful SCSS mixins for responsive design with Figma proportions. Automatically scales typography, spacing, and dimensions across desktop, tablet, and mobile breakpoints.",
+  "main": "index.scss",
+  "style": "index.scss",
+  "scripts": {
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "keywords": [
+    "scss",
+    "sass",
+    "responsive",
+    "mixins",
+    "figma",
+    "typography",
+    "spacing",
+    "dimensions",
+    "breakpoints",
+    "css",
+    "frontend",
+    "design-system",
+    "react",
+    "vue",
+    "angular",
+    "nextjs",
+    "nuxt",
+    "svelte",
+    "astro",
+    "tailwind",
+    "bootstrap",
+    "mobile-first",
+    "responsive-design",
+    "css-variables",
+    "custom-properties"
+  ],
+  "author": "Saheed Odulaja",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Sidodus/responsive-scale-mixins.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Sidodus/responsive-scale-mixins.git/issues"
+  },
+  "homepage": "https://github.com/Sidodus/responsive-scale-mixins.git#readme",
+  "files": [
+    "index.scss",
+    "scss/"
+  ],
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}

package/scss/_mixins.scss

@@ -0,0 +1,159 @@
+/* // ✅ Figma Proportions: Maintains the same proportions as the Figma design.
+
+// // Here’s a SCSS mixin that dynamically calculates font-size, line-height, padding, margins, and other scalable properties across desktop, tablet, and mobile screens.
+// ✅ Consistent Scaling: No need to manually adjust for medium screens.
+// ✅ Reusable: Works for font-size, line-height, margins, paddings, etc.
+// ✅ Automatic Scaling: Dynamically scales values based on the screen size.
+
+// 📌 How to Use It
+// Import the mixins in your SCSS file: @import "../styles/mixins";
+// .title {
+//   @include responsive-scale(font-size, 40, 24);
+//   @include responsive-scale(padding, 20 73, 8 16); // Multi-value
+//   @include responsive-scale(line-height, 65, 40);
+
+//   // Letter-spacing is -1.5% of font-size
+//   @include responsive-scale(letter-spacing, -1.5, -1.5, px, true, 40, 24);
+// }
+
+// Parameters: property, desktop-value, mobile-value, unit (default px), is-percentage (default false), desktop-relative, mobile-relative
+// Pass values as numbers (e.g., 20 for 20px, 20 73 for 20px 73px).
+// Tablet values are automatically interpolated using the tablet-proportion-scale-factor.
+// For percentage-based values, provide the percentage for desktop and mobile, and the base values (e.g., font-size for letter-spacing).
+// Media queries: Desktop (default), Tablet (768-991px), Mobile (≤767px). */
+
+@function scaled-value($val, $scale-var, $unit: px) {
+  @return calc(var(#{$scale-var}) * #{$val});
+}
+
+@mixin responsive-scale(
+  $property,
+  $desktop-value,
+  $mobile-value,
+  $unit: px,
+  $is-percentage: false,
+  $desktop-relative: null,
+  $mobile-relative: null
+) {
+  $scale-factor: if(
+    $unit == px,
+    unquote("--computed-scale-factor-px"),
+    unquote("--computed-scale-factor-rem")
+  );
+
+  // 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 {
+      #{$property}: calc(
+        #{$desktop-value} / 100 * (var(#{$scale-factor}) * #{$desktop-relative})
+      );
+    }
+
+    @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")
+      );
+      @if $desktop-relative != null and $mobile-relative != null {
+        #{$property}: calc(
+          #{$mobile-value} /
+            100 *
+            (
+              var(#{$tablet-scale-factor}) *
+                (
+                  #{$mobile-relative} +
+                    var(--tablet-proportion-scale-factor) *
+                    (#{$desktop-relative} - #{$mobile-relative})
+                )
+            )
+        );
+      }
+    }
+
+    @media screen and (max-width: 767px) {
+      $mobile-scale-factor: if(
+        $unit == px,
+        unquote("--computed-mobile-scale-factor-px"),
+        unquote("--computed-mobile-scale-factor-rem")
+      );
+      @if $mobile-relative != null {
+        #{$property}: calc(
+          #{$mobile-value} /
+            100 *
+            (var(#{$mobile-scale-factor}) * #{$mobile-relative})
+        );
+      }
+    }
+  } @else {
+    // Regular absolute scaling
+    @if type-of($desktop-value) == list {
+      $desktop-scaled: ();
+      @each $val in $desktop-value {
+        $desktop-scaled: append(
+          $desktop-scaled,
+          scaled-value($val, $scale-factor, $unit)
+        );
+      }
+      #{$property}: $desktop-scaled;
+    } @else {
+      #{$property}: scaled-value($desktop-value, $scale-factor, $unit);
+    }
+
+    @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")
+      );
+      @if type-of($desktop-value) == list {
+        $tablet-scaled: ();
+        @for $i from 1 through length($desktop-value) {
+          $d-val: nth($desktop-value, $i);
+          $m-val: nth($mobile-value, $i);
+          $tablet-scaled: append(
+            $tablet-scaled,
+            calc(
+              var(#{$tablet-scale-factor}) *
+                (
+                  #{$m-val} +
+                    var(--tablet-proportion-scale-factor) *
+                    (#{$d-val} - #{$m-val})
+                )
+            )
+          );
+        }
+        #{$property}: $tablet-scaled;
+      } @else {
+        #{$property}: calc(
+          var(#{$tablet-scale-factor}) *
+            (
+              #{$mobile-value} +
+                var(--tablet-proportion-scale-factor) *
+                (#{$desktop-value} - #{$mobile-value})
+            )
+        );
+      }
+    }
+
+    @media screen and (max-width: 767px) {
+      $mobile-scale-factor: if(
+        $unit == px,
+        unquote("--computed-mobile-scale-factor-px"),
+        unquote("--computed-mobile-scale-factor-rem")
+      );
+      @if type-of($mobile-value) == list {
+        $mobile-scaled: ();
+        @each $val in $mobile-value {
+          $mobile-scaled: append(
+            $mobile-scaled,
+            scaled-value($val, $mobile-scale-factor, $unit)
+          );
+        }
+        #{$property}: $mobile-scaled;
+      } @else {
+        #{$property}: scaled-value($mobile-value, $mobile-scale-factor, $unit);
+      }
+    }
+  }
+}

package/scss/_variables.scss

@@ -0,0 +1,27 @@
+/* Responsive Scale Variables Mixin
+ * Include this mixin in your root element to define the scaling factors.
+ * Adjust the design widths to match your design system breakpoints.
+ */
+
+@mixin responsive-scale-variables(
+  $desktop-width: 1920px,
+  $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);
+
+  // Tablet scale factor
+  --computed-tablet-scale-factor-px: calc(100vw / #{$tablet-width});
+  --computed-tablet-scale-factor-rem: calc(100vw / #{$tablet-width} / 16);
+
+  // Mobile scale factor
+  --computed-mobile-scale-factor-px: calc(100vw / #{$mobile-width});
+  --computed-mobile-scale-factor-rem: calc(100vw / #{$mobile-width} / 16);
+
+  // Tablet proportion scale factor for interpolation between mobile and desktop values
+  --tablet-proportion-scale-factor: calc(
+    (100vw - #{$mobile-width}) / (#{$desktop-width} - #{$mobile-width})
+  );
+}