Merge pull request #50 from tklepzig/introduce-scaling

Introduce scaling

Author: tklepzig

.changeset/rude-ligers-matter.md

@@ -0,0 +1,5 @@
+---
+"ada-ui": major
+---
+
+Renamed font-size tokens from `--scale` to `--text`.

.changeset/slow-comics-dress.md

@@ -0,0 +1,11 @@
+---
+"ada-ui": minor
+---
+
+Added possibility to define a scaling factor by setting the CSS class `scaled`
+and the CSS custom property `--scale` to a number. This allows to easily scale
+down or up any part of the UI.
+
+```css
+
+```

index.html

@@ -34,6 +34,7 @@
       <a href="#padding" class="command shade1">Padding</a>
       <a href="#spacing" class="command shade1">Spacing</a>
       <a href="#colors" class="command shade1">Colors</a>
+      <a href="#scaling" class="command shade2">Scaling</a>
       <a href="#page-layout" class="command shade1">Page Layout</a>
       <a
         href="#command"
@@ -68,37 +69,37 @@
           <header><h2 id="typography">Typography</h2></header>
           <article class="typography">
             <p>
-              <code style="font-size: var(--scale-3xl)">--scale-3xl</code>
+              <code style="font-size: var(--text-3xl)">--text-3xl</code>
               <span>1.8rem</span>
               <span>Headline 1, Text in Compound Commands</span>
             </p>
             <p>
-              <code style="font-size: var(--scale-2xl)">--scale-2xl</code>
+              <code style="font-size: var(--text-2xl)">--text-2xl</code>
               <span>1.6rem</span>
               <span>Headline 2</span>
             </p>
             <p>
-              <code style="font-size: var(--scale-xl)">--scale-xl</code>
+              <code style="font-size: var(--text-xl)">--text-xl</code>
               <span>1.4rem</span>
               <span>Headline 3</span>
             </p>
             <p>
-              <code style="font-size: var(--scale-lg)">--scale-lg</code>
+              <code style="font-size: var(--text-lg)">--text-lg</code>
               <span>1.2rem</span>
               <span>Headline 4</span>
             </p>
             <p>
-              <code style="font-size: var(--scale-base)">--scale-base</code>
+              <code style="font-size: var(--text-base)">--text-base</code>
               <span>1rem</span>
               <span>Normal Text, Command Label</span>
             </p>
             <p>
-              <code style="font-size: var(--scale-sm)">--scale-sm</code>
+              <code style="font-size: var(--text-sm)">--text-sm</code>
               <span>0.85rem</span>
               <span>Small Text, Panel Footer</span>
             </p>
             <p>
-              <code style="font-size: var(--scale-xs)">--scale-xs</code>
+              <code style="font-size: var(--text-xs)">--text-xs</code>
               <span>0.75rem</span>
               <span>Tile Footer</span>
             </p>
@@ -122,7 +123,7 @@
             <div class="padding-box lg shade2"></div>
             <p>&rarr; Paddings are responsive (in rem).</p>
             <p>
-              Usage: paddings, anything which should grow/shrink with the
+              Usage: paddings, anything which should grow/shrink with the root
               font-size
             </p>
           </article>
@@ -219,6 +220,24 @@ <h3>Usage</h3>
           </article>
           <footer></footer>
         </div>
+        <div class="panel">
+          <header><h2 id="scaling">Scaling</h2></header>
+          <article style="display: grid; gap: var(--spacing)">
+            <p>
+              By adding the class <code>scaled</code> and setting the CSS custom
+              property <code>--scaled</code> to a number like <code>1.5</code>,
+              every responsive token (sizes, paddings, font-size) is scaled in
+              this scope. See the scaled tile as an example:
+            </p>
+            <div class="tile scaled shade2" style="--scale: 1.5">
+              <header></header>
+              <article>Scaled Tile (factor 1.5)</article>
+              <footer></footer>
+            </div>
+          </article>
+          <footer></footer>
+        </div>
+
         <div class="panel">
           <header><h2 id="page-layout">Page Layout</h2></header>
           <article>

scss/_command.scss

@@ -9,14 +9,14 @@
   border-color: transparent;
   border-width: var(--border-width);
   padding: var(--padding-xs) var(--padding-sm);
-  min-height: 3rem;
-  min-width: 3rem;
+  min-height: var(--command-min-size);
+  min-width: var(--command-min-size);
   border-radius: var(--border-radius);
   overflow: hidden;
   outline: none;
   color: var(--color100);
   font-family: inherit;
-  font-size: var(--scale-base);
+  font-size: var(--text-base);
   cursor: pointer;
   user-select: none;
   vertical-align: middle;
@@ -82,8 +82,8 @@
   > .spacer {
     background-color: var(--color800);
     box-shadow: var(--box-shadow);
-    min-width: 1rem;
-    min-height: 1rem;
+    min-width: var(--compound-spacer-min-size);
+    min-height: var(--compound-spacer-min-size);
 
     &.outline {
       background-color: transparent;
@@ -92,8 +92,8 @@
   }
 
   > .text {
-    font-size: var(--scale-3xl);
-    line-height: var(--scale-3xl);
+    font-size: var(--text-3xl);
+    line-height: var(--text-3xl);
     align-self: center;
     padding: var(--padding-xs);
   }

scss/_global.scss

@@ -1,25 +1,22 @@
+@function scalable($value) {
+  @return calc(#{$value} * var(--scale, 1));
+}
+
 :root {
   --font-family: "Open Sans", sans-serif;
   --font-size: 16px;
-  --scale-xs: 0.75rem;
-  --scale-sm: 0.85rem;
-  --scale-base: 1rem;
-  --scale-lg: 1.2rem;
-  --scale-xl: 1.4rem;
-  --scale-2xl: 1.6rem;
-  --scale-3xl: 1.8rem;
-  --box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
-  --padding-xs: 0.15rem;
-  --padding-sm: 0.4rem;
-  --padding: 0.75rem;
-  --padding-lg: 1rem;
+
   --spacing-xs: 2px;
   --spacing-sm: 6px;
   --spacing: 10px;
   --spacing-lg: 14px;
+
   --border-width-sm: 1px;
   --border-width: 2px;
-  --border-radius: 0.3rem;
+
+  --box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
+
+  @extend .scaled;
 
   @media screen and (min-width: 640px) {
     --font-size: 14px;
@@ -30,6 +27,29 @@
   }
 }
 
+.scaled {
+  --text-xs: #{scalable(0.75rem)};
+  --text-sm: #{scalable(0.85rem)};
+  --text-base: #{scalable(1rem)};
+  --text-lg: #{scalable(1.2rem)};
+  --text-xl: #{scalable(1.4rem)};
+  --text-2xl: #{scalable(1.6rem)};
+  --text-3xl: #{scalable(1.8rem)};
+
+  --padding-xs: #{scalable(0.15rem)};
+  --padding-sm: #{scalable(0.4rem)};
+  --padding: #{scalable(0.75rem)};
+  --padding-lg: #{scalable(1rem)};
+
+  --border-radius: #{scalable(0.3rem)};
+
+  --command-min-size: #{scalable(3rem)};
+  --compound-spacer-min-size: #{scalable(1rem)};
+
+  --corner-size: #{scalable(1rem)};
+  --corner-small-size: #{scalable(0.75rem)};
+}
+
 %scrollbar {
   &::-webkit-scrollbar {
     width: var(--spacing-sm);
@@ -53,7 +73,7 @@ html {
 }
 
 body {
-  font-size: 1rem;
+  font-size: var(--text-base);
   padding: var(--padding);
   background: var(--bg-body);
   color: var(--fg-body);

scss/_input.scss

@@ -8,7 +8,7 @@
   background-color: transparent;
   transition: border-color 0.15s ease-in-out;
   padding: var(--padding);
-  font-size: var(--scale-base);
+  font-size: var(--text-base);
 
   &:focus {
     border: var(--border-width) solid var(--color500);

scss/_panel.scss

@@ -3,15 +3,15 @@
   border-style: solid;
   border-color: var(--color700);
   position: absolute;
-  height: 1rem;
-  width: 1rem;
+  height: var(--corner-size);
+  width: var(--corner-size);
   z-index: 2;
 
   --thickness: var(--border-width);
 
   .tile > & {
-    height: 0.75rem;
-    width: 0.75rem;
+    height: var(--corner-small-size);
+    width: var(--corner-small-size);
     border-color: var(--color600);
 
     --thickness: var(--border-width-sm);
@@ -29,7 +29,7 @@
   > header {
     position: relative;
     @extend %header;
-    font-size: var(--scale-2xl);
+    font-size: var(--text-2xl);
 
     padding: var(--padding-sm) var(--padding);
 
@@ -57,14 +57,15 @@
     z-index: 1;
     padding: var(--padding);
     overflow: auto;
+    font-size: var(--text-base);
 
     @extend %scrollbar;
   }
   > footer {
     position: relative;
 
     padding: var(--padding-sm) var(--padding);
-    font-size: var(--scale-sm);
+    font-size: var(--text-sm);
     text-align: right;
 
     &:empty {
@@ -94,10 +95,10 @@
   background: oklch(var(--800) / 0.75);
 
   > header {
-    font-size: var(--scale-lg);
+    font-size: var(--text-lg);
   }
 
   > footer {
-    font-size: var(--scale-xs);
+    font-size: var(--text-xs);
   }
 }

scss/_typography.scss

@@ -9,17 +9,17 @@ h4,
 }
 
 h1 {
-  font-size: var(--scale-3xl);
+  font-size: var(--text-3xl);
 }
 
 h2 {
-  font-size: var(--scale-2xl);
+  font-size: var(--text-2xl);
 }
 
 h3 {
-  font-size: var(--scale-xl);
+  font-size: var(--text-xl);
 }
 
 h4 {
-  font-size: var(--scale-lg);
+  font-size: var(--text-lg);
 }