7 files changed, 28 insertions, 8 deletions

diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 19ebce2..8c0b74f 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -99,7 +99,7 @@ $shadow--l2--y:    props.def(--shadow--l2--y, 5px) !default;
 $shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default;
 $shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default;
 
-$rounding:     props.def(--rounding, 8px) !default;
+$rounding:     props.def(--rounding, 12px) !default;
 $rounding--sm: props.def(--rounding--sm, 4px) !default;
 
 $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
diff --git a/src/_utils.scss b/src/_utils.scss
index 1311d32..371a357 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -32,6 +32,15 @@ $-sizes: (
     800: vars.$size--800,
 ) !default;
 
+$-font-sizes: (
+    50: vars.$font-size--50,
+    75: vars.$font-size--75,
+    100: vars.$font-size--100,
+    150: vars.$font-size--150,
+    200: vars.$font-size--200,
+    300: vars.$font-size--300,
+) !default;
+
 @mixin styles {
     @include bem.utility('d-block') {
         display: block;
@@ -205,6 +214,12 @@ $-sizes: (
         }
     }
 
+    @each $mod, $size in $-font-sizes {
+        @include bem.utility('fs-#{$mod}') {
+            font-size: props.get($size);
+        }
+    }
+
     @each $dir, $prop in (is: inline-size, bs: block-size) {
         @include bem.utility('#{$dir}-100') {
             #{$prop}: 100%;
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index c4ecd87..e75e156 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -183,6 +183,7 @@
         white-space:      nowrap;
         border:           props.get(vars.$border-width) solid transparent;
         border-radius:    props.get(vars.$rounding);
+        transition:       color .1s, background-color .1s, border-color .1s, box-shadow .1s;
 
         &::after {
             position:       absolute;
@@ -199,6 +200,8 @@
         &:visited,
         &:enabled {
             &:focus-visible {
+                transition: none;
+
                 &::after {
                     display: block;
                 }
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index cc7b7d5..00a11c3 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -56,21 +56,21 @@ $default-theme: map.deep-merge((
     --shadow-color:         props.get(core.$theme, --shadow),
 
     --hover: (
-        --bg-color:     props.get(core.$theme, --border-mute),
+        --bg-color:     props.get(core.$theme, --bg-l1),
         --label-color:  props.get(core.$theme, --heading),
-        --border-color: props.get(core.$theme, --border-strong),
+        --border-color: props.get(core.$theme, --border),
     ),
 
     --active: (
-        --bg-color:     props.get(core.$theme, --border),
+        --bg-color:     props.get(core.$theme, --border-mute),
         --label-color:  props.get(core.$theme, --heading),
-        --border-color: props.get(core.$theme, --text-mute-more),
+        --border-color: props.get(core.$theme, --border-strong),
     ),
 
     --disabled: (
         --bg-color:     transparent,
         --label-color:  props.get(core.$theme, --border-strong),
-        --border-color: props.get(core.$theme, --border),
+        --border-color: props.get(core.$theme, --text-disabled),
     ),
 
     --key-focus: (
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index e80df2c..4bd6a59 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -32,6 +32,7 @@
 
             &:focus-visible {
                 margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                transition:    transform .2s;
                 border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
                 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
                 outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4092633..4ff242c 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -18,7 +18,7 @@
             text-decoration:           underline;
             text-decoration-thickness: props.get(vars.$underline-width);
             text-decoration-color:     props.get(vars.$underline-color);
-            border-radius:             props.get(vars.$rounding);
+            border-radius:             props.get(vars.$rounding-sm);
             box-decoration-break:      clone;
 
             &:hover {
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index b976100..ac7815a 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -3,7 +3,8 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$rounding:               props.def(--s-links--rounding, props.get(core.$rounding--sm)) !default;
+$rounding:               props.def(--s-links--rounding, props.get(core.$rounding)) !default;
+$rounding-sm:            props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default;
 $underline-width:        props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
 $hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;