Improved font handling

8 files changed, 15 insertions, 21 deletions

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;