From cad79b949b060cd360582c2d208b37a51578e778 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 7 Feb 2022 10:56:11 +0100
Subject: Improved font handling

---
 src/_functions.scss             | 122 ++++++++++++++++++++++++++++++++++++++--
 src/_general.scss               |  10 ++--
 src/_vars.scss                  |  27 ++++-----
 src/mixins/_typography.scss     |  63 ---------------------
 src/objects/_action-button.scss |   1 +
 src/objects/_avatar.scss        |   2 +
 src/objects/_button.scss        |   5 +-
 src/objects/_checkbox.scss      |   4 +-
 src/objects/_heading.scss       |   8 +--
 src/objects/_radio.scss         |   8 +--
 src/objects/_switch.scss        |   4 +-
 src/objects/_text-field.scss    |   4 --
 12 files changed, 147 insertions(+), 111 deletions(-)
 delete mode 100644 src/mixins/_typography.scss

(limited to 'src')

diff --git a/src/_functions.scss b/src/_functions.scss
index a11d5f4..9f6a789 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -10,9 +10,7 @@
 }
 
 @function foreign-color($foreign-key, $key, $tree: 'colors', $default: null, $global: true) {
-    $key: iro.fn-list-prepend($key, --colors);
-    $key: iro.fn-list-prepend($key, $foreign-key);
-    @return iro.props-get($key, $tree, $default, $global);
+    @return iro.props-get(join($foreign-key --colors, $key), $tree, $default, $global);
 }
 
 @function dim($key, $tree: 'dims', $default: null, $global: false) {
@@ -25,7 +23,119 @@
 }
 
 @function foreign-dim($foreign-key, $key, $tree: 'dims', $default: null, $global: true) {
-    $key: iro.fn-list-prepend($key, --dims);
-    $key: iro.fn-list-prepend($key, $foreign-key);
-    @return iro.props-get($key, $tree, $default, $global);
+    @return iro.props-get(join($foreign-key --dims, $key), $tree, $default, $global);
+}
+
+@function set-font($key, $overrides: ()) {
+    $font: iro.props-get-static(join(--dims --font, $key), 'dims', $global: true);
+
+    $map: ();
+
+    @if (map-has-key($overrides, --family)) {
+        $map: map-merge(
+            $map, (
+                font-family: map-get($overrides, --family)
+            )
+        );
+    } @else if (map-has-key($font, --family)) {
+        $map: map-merge(
+            $map, (
+                font-family: global-dim(--font $key --family)
+            )
+        );
+    }
+
+    @if (map-has-key($overrides, --size)) {
+        $map: map-merge(
+            $map, (
+                font-size: map-get($overrides, --size)
+            )
+        );
+    } @else if (map-has-key($font, --size)) {
+        $map: map-merge(
+            $map, (
+                font-size: global-dim(--font $key --size)
+            )
+        );
+    }
+
+    @if (map-has-key($overrides, --weight)) {
+        $map: map-merge(
+            $map, (
+                font-weight: map-get($overrides, --weight)
+            )
+        );
+    } @else if (map-has-key($font, --weight)) {
+        $map: map-merge(
+            $map, (
+                font-weight: global-dim(--font $key --weight)
+            )
+        );
+    }
+
+    @if (map-has-key($overrides, --style)) {
+        $map: map-merge(
+            $map, (
+                font-style: map-get($overrides, --style)
+            )
+        );
+    } @else if (map-has-key($font, --style)) {
+        $map: map-merge(
+            $map, (
+                font-style: global-dim(--font $key --style)
+            )
+        );
+    }
+
+    @if (map-has-key($overrides, --line-height)) {
+        $map: map-merge(
+            $map, (
+                line-height: map-get($overrides, --line-height)
+            )
+        );
+    } @else if (map-has-key($font, --line-height)) {
+        $map: map-merge(
+            $map, (
+                line-height: global-dim(--font $key --line-height)
+            )
+        );
+    }
+
+    @if (map-has-key($overrides, --transform)) {
+        $map: map-merge(
+            $map, (
+                text-transform: map-get($overrides, --transform)
+            )
+        );
+    } @else if (map-has-key($font, --transform)) {
+        $map: map-merge(
+            $map, (
+                text-transform: global-dim(--font $key --transform)
+            )
+        );
+    }
+
+    @if (map-has-key($overrides, --variant-alternates)) {
+        $map: map-merge(
+            $map, (
+                font-variant-alternates: map-get($overrides, --variant-alternates)
+            )
+        );
+    } @else if (map-has-key($font, --variant-alternates)) {
+        $map: map-merge(
+            $map, (
+                font-variant-alternates: global-dim(--font $key --variant-alternates)
+            )
+        );
+    }
+
+    @return $map;
+}
+
+@mixin set-font($basis, $values: ()) {
+    $values: set-font($basis, $values);
+
+    @each $prop, $value in $values {
+        #{$prop}: $value;
+    }
 }
diff --git a/src/_general.scss b/src/_general.scss
index 1e7c180..54df879 100644
--- a/src/_general.scss
+++ b/src/_general.scss
@@ -1,7 +1,5 @@
 @use 'iro-sass/src/index' as iro;
-@use 'mixins/typography';
 @use 'functions' as fn;
-@use 'vars';
 
 html,
 body {
@@ -9,7 +7,7 @@ body {
 }
 
 body {
-    @include typography.set-font(vars.$font--main, (size: fn.dim(--font-size --md)));
+    @include fn.set-font(--standard, (--size: fn.dim(--font-size --md)));
 
     margin:           0;
     padding:          0;
@@ -23,9 +21,9 @@ h3,
 h4,
 h5,
 h6 {
-    @include typography.set-font(vars.$font--main, (size: fn.dim(--font-size --md), weight: 400));
-
-    margin: 0;
+    margin:      0;
+    font-size:   fn.dim(--font-size --md);
+    font-weight: normal;
 }
 
 p {
diff --git a/src/_vars.scss b/src/_vars.scss
index c79b917..825ec9c 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -18,21 +18,6 @@ media.$unit-intervals: (
 
 //
 
-$font--main: (
-    family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
-    line-height: 1.5
-);
-
-$font--headline: (
-    family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
-    line-height: 1.2,
-    weight:      700,
-);
-
-$line-height: map-get($font--main, line-height);
-
-//
-
 @include iro.props-store((
     --dims: (
         --spacing: (
@@ -58,6 +43,18 @@ $line-height: map-get($font--main, line-height);
             ),
         ),
 
+        --font: (
+            --standard: (
+                --family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
+                --line-height: 1.5,
+            ),
+            --headline: (
+                --family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
+                --line-height: 1.2,
+                --weight:      700,
+            )
+        ),
+
         --font-size: (
             --xs:   iro.fn-px-to-rem(11px),
             --sm:   iro.fn-px-to-rem(13px),
diff --git a/src/mixins/_typography.scss b/src/mixins/_typography.scss
deleted file mode 100644
index 31e39f0..0000000
--- a/src/mixins/_typography.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@function set-font($basis, $values: ()) {
-    $font: map-merge($basis, $values);
-
-    $map: (font-family: map-get($font, 'family'));
-
-    @if (map-has-key($font, 'size')) {
-        $map: map-merge(
-            $map, (
-                font-size: map-get($font, 'size')
-            )
-        );
-    }
-
-    @if (map-has-key($font, 'weight')) {
-        $map: map-merge(
-            $map, (
-                font-weight: map-get($font, 'weight')
-            )
-        );
-    }
-
-    @if (map-has-key($font, 'style')) {
-        $map: map-merge(
-            $map, (
-                font-style: map-get($font, 'style')
-            )
-        );
-    }
-
-    @if (map-has-key($font, 'line-height')) {
-        $map: map-merge(
-            $map, (
-                line-height: map-get($font, 'line-height')
-            )
-        );
-    }
-
-    @if (map-has-key($font, 'transform')) {
-        $map: map-merge(
-            $map, (
-                text-transform: map-get($font, 'transform')
-            )
-        );
-    }
-
-    @if (map-has-key($font, 'variant-alternates')) {
-        $map: map-merge(
-            $map, (
-                font-variant-alternates: map-get($font, 'variant-alternates')
-            )
-        );
-    }
-
-    @return $map;
-}
-
-@mixin set-font($basis, $values: ()) {
-    $values: set-font($basis, $values);
-
-    @each $prop, $value in $values {
-        #{$prop}: $value;
-    }
-}
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 86c7089..19cf37b 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -94,6 +94,7 @@
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+        overflow:         hidden;
         border:           1px solid fn.color(--border);
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 3bdfddc..ca0d373 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -52,6 +52,8 @@
             color:            #fff;
             line-height:      fn.dim(--size);
             text-align:       center;
+            object-fit:       cover;
+            object-position:  center center;
         }
 
         @include iro.bem-modifier('circle') {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index f158176..6f69ee8 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,7 +1,5 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
-@use '../vars';
-@use '../mixins/typography';
 
 @mixin button-variant($variant) {
     border-color:     fn.color(--#{$variant} --bg);
@@ -111,12 +109,11 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        @include typography.set-font(vars.$font--main, (weight: 500));
-
         display:         inline-block;
         padding:         fn.dim(--pad-y) fn.dim(--pad-x);
         border:          2px solid transparent;
         border-radius:   fn.dim(--rounding);
+        font-weight:     500;
         line-height:     1;
         text-align:      center;
         text-decoration: none;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 3bda5e7..5ea2e4a 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,7 +4,7 @@
 @include iro.props-namespace('checkbox') {
     @include iro.props-store((
         --dims: (
-            --size:         iro.fn-px-to-rem(14px),
+            --size:         iro.fn-px-to-rem(13px),
             --label-gap:    .6rem,
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        .3rem,
@@ -56,7 +56,7 @@
             flex:             0 0 auto;
             width:            fn.dim(--size);
             height:           fn.dim(--size);
-            margin-top:       calc(.5 * ($line-height * 1em - fn.dim(--size)));
+            margin-top:       calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
             border-radius:    fn.dim(--border-width);
             background-color: fn.color(--box-border);
     
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 7d67a87..2af8e19 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,7 +1,5 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
-@use '../vars';
-@use '../mixins/typography';
 
 @include iro.props-namespace('heading') {
     @include iro.props-store((
@@ -22,7 +20,7 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        @include typography.set-font(vars.$font--headline);
+        @include fn.set-font(--headline);
 
         display:       block;
         margin-top:    fn.dim(--in-page-margin --top);
@@ -53,7 +51,7 @@
         }
 
         @include iro.bem-modifier('sm') {
-            @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
+            @include fn.set-font(--standard, (--line-height: fn.global-dim(--font --headline --line-height)));
 
             color:       fn.color(--strong);
             font-size:   fn.global-dim(--font-size --md);
@@ -61,7 +59,7 @@
         }
 
         @include iro.bem-modifier('xs') {
-            @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
+            @include fn.set-font(--standard, (--line-height: fn.global-dim(--font --headline --line-height)));
 
             color:          fn.color(--light);
             font-size:      fn.global-dim(--font-size --xs);
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 26e8c31..442034b 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,11 +4,11 @@
 @include iro.props-namespace('radio') {
     @include iro.props-store((
         --dims: (
-            --diameter:     iro.fn-px-to-rem(15px),
+            --diameter:     iro.fn-px-to-rem(14px),
             --label-gap:    .6rem,
             --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:    .3rem,
-            --pad-y:    .3rem,
+            --pad-x:        .3rem,
+            --pad-y:        .3rem,
             --margin-right: fn.global-dim(--spacing --x --md),
         ),
     ), 'dims');
@@ -57,7 +57,7 @@
             flex:             0 0 auto;
             width:            fn.dim(--diameter);
             height:           fn.dim(--diameter);
-            margin-top:       calc(.5 * ($line-height * 1em - fn.dim(--diameter)));
+            margin-top:       calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
             border-radius:    2em;
             background-color: fn.color(--circle-border);
     
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 2d70844..9911b73 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -5,7 +5,7 @@
     @include iro.props-store((
         --dims: (
             --width:        iro.fn-px-to-rem(26px),
-            --height:       iro.fn-px-to-rem(15px),
+            --height:       iro.fn-px-to-rem(14px),
             --label-gap:    .6rem,
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        .3rem,
@@ -61,7 +61,7 @@
             flex:             0 0 auto;
             width:            fn.dim(--width);
             height:           fn.dim(--height);
-            margin-top:       calc(.5 * ($line-height * 1em - fn.dim(--height)));
+            margin-top:       calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height)));
             transition:       background-color .2s ease;
             border-radius:    2em;
             background-color: fn.color(--track-bg);
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 90d4b11..b819811 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,7 +1,5 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
-@use '../vars';
-@use '../mixins/typography';
 
 @mixin invalid {
     @include iro.bem-sibling-elem('bg') {
@@ -108,8 +106,6 @@
         }
 
         @include iro.bem-elem('native') {
-            @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
-    
             width:  100%;
             color:  fn.color(--text);
             resize: none;
-- 
cgit v1.2.3-70-g09d2