From fd251784b38c9cab32906e8eeb8e63222573b86a Mon Sep 17 00:00:00 2001
From: Schalk Neethling <schalkneethling@Schalks-MacBook-Pro.local>
Date: Tue, 24 Dec 2024 00:32:27 +0200
Subject: [PATCH] enhancement: switch to calc based on typescale

Font sizes for desktop and mobile are now calculated based on two typescales:

`--minimalist-typography-scale-mobile`
`--minimalist-typography-scale-desktop`
---
 package.json                                |  2 +-
 src/minimalist/tokens/custom-properties.css | 64 ++++++++++++++++-----
 2 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index dfb29cb..8ac9ff3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-minimalist",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A minimal pure CSS starter library for most web projects.",
   "type": "module",
   "exports": "./src/index.js",
diff --git a/src/minimalist/tokens/custom-properties.css b/src/minimalist/tokens/custom-properties.css
index 03b88e8..c1cd4b7 100644
--- a/src/minimalist/tokens/custom-properties.css
+++ b/src/minimalist/tokens/custom-properties.css
@@ -153,15 +153,35 @@
   --typography-code-family: menlo, consolas, monaco, liberation mono,
     lucida console, monospace;
 
-  --typography-size-display: 3.815rem; /* 61px */
-  --typography-size-xxl: 3.052rem; /* 49px */
-  --typography-size-xl: 2.441rem; /* 39px */
-  --typography-size-large: 1.953rem; /* 31px */
-  --typography-size-medium: 1.563rem; /* 25px */
-  --typography-size-small-medium: 1.25rem; /* 20px */
+  --minimalist-typography-scale-mobile: 1.25;
+
   --typography-size-default: 1rem; /* 16px */
-  --typography-size-small: 0.75rem; /* 12px */
-  --typography-size-tiny: 0.563rem; /* 9px */
+
+  --typography-size-small-medium: calc(
+    var(--typography-size-default) * var(--minimalist-typography-scale-mobile)
+  ); /* 20px */
+  --typography-size-medium: calc(
+    var(--typography-size-small-medium) *
+      var(--minimalist-typography-scale-mobile)
+  ); /* 25px */
+  --typography-size-large: calc(
+    var(--typography-size-medium) * var(--minimalist-typography-scale-mobile)
+  ); /* 31px */
+  --typography-size-xl: calc(
+    var(--typography-size-large) * var(--minimalist-typography-scale-mobile)
+  ); /* 39px */
+  --typography-size-xxl: calc(
+    var(--typography-size-xl) * var(--minimalist-typography-scale-mobile)
+  ); /* 49px */
+  --typography-size-display: calc(
+    var(--typography-size-xxl) * var(--minimalist-typography-scale-mobile)
+  ); /* 61px */
+  --typography-size-small: calc(
+    var(--typography-size-default) / var(--minimalist-typography-scale-mobile)
+  ); /* 12px */
+  --typography-size-tiny: calc(
+    var(--typography-size-small) / var(--minimalist-typography-scale-mobile)
+  ); /* 9px */
 
   --typography-document-line-height: 1.75;
   --typography-code-example-line-height: 1.4;
@@ -180,11 +200,27 @@
 
 @media only screen and (width >= 63.9375rem) {
   :root {
-    --typography-size-display: 5.61rem; /* 90px */
-    --typography-size-xxl: 4.209rem; /* 67px */
-    --typography-size-xl: 3.157rem; /* 50px */
-    --typography-size-large: 2.369rem; /* 38px */
-    --typography-size-medium: 1.777rem; /* 28px */
-    --typography-size-small-medium: 1.333rem; /* 21px */
+    --minimalist-typography-scale-desktop: 1.33;
+
+    --typography-size-small-medium: calc(
+      var(--typography-size-default) *
+        var(--minimalist-typography-scale-desktop)
+    ); /* 21px */
+    --typography-size-medium: calc(
+      var(--typography-size-small-medium) *
+        var(--minimalist-typography-scale-desktop)
+    ); /* 28px */
+    --typography-size-large: calc(
+      var(--typography-size-medium) * var(--minimalist-typography-scale-desktop)
+    ); /* 38px */
+    --typography-size-xl: calc(
+      var(--typography-size-large) * var(--minimalist-typography-scale-desktop)
+    ); /* 50px */
+    --typography-size-xxl: calc(
+      var(--typography-size-xl) * var(--minimalist-typography-scale-desktop)
+    ); /* 67px */
+    --typography-size-display: calc(
+      var(--typography-size-xxl) * var(--minimalist-typography-scale-desktop)
+    ); /* 90px */
   }
 }