WIP: New color calculations

1 files changed, 18 insertions, 14 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 23ae305..6001564 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -6,29 +6,33 @@ $themes: accent positive negative warning;
 @include iro.props-namespace('badge') {
     @include iro.props-store((
         --dims: (
-            --pad-b:      fn.global-dim(--size --100),
+            --pad-b:      fn.global-dim(--size --50),
             --pad-i:      fn.global-dim(--size --150),
             --pad-i-pill: fn.global-dim(--size --200),
             --rounding:   fn.global-dim(--rounding),
-            --font-size:  fn.global-dim(--font-size --100),
+            --font-size:  fn.global-dim(--font-size --75),
 
             --sm: (
-                --pad-b:      fn.global-dim(--size --50),
+                --pad-b:      fn.global-dim(--size --25),
                 --pad-i:      fn.global-dim(--size --115),
                 --pad-i-pill: fn.global-dim(--size --150),
-                --font-size:  fn.global-dim(--font-size --75),
+                --font-size:  fn.global-dim(--font-size --50),
             ),
             --lg: (
-                --pad-b:      fn.global-dim(--size --125),
+                --pad-b:      fn.global-dim(--size --75),
                 --pad-i:      fn.global-dim(--size --175),
                 --pad-i-pill: fn.global-dim(--size --225),
-                --font-size:  fn.global-dim(--font-size --150),
+                --font-size:  fn.global-dim(--font-size --100),
             ),
             --xl: (
-                --pad-b:      fn.global-dim(--size --160),
+                --pad-b:      fn.global-dim(--size --100),
                 --pad-i:      fn.global-dim(--size --225),
                 --pad-i-pill: fn.global-dim(--size --300),
-                --font-size:  fn.global-dim(--font-size --200),
+                --font-size:  fn.global-dim(--font-size --150),
+            ),
+            
+            --key-focus: (
+                --border: fn.global-dim(--key-focus --border),
             ),
         ),
         --colors: (
@@ -43,7 +47,7 @@ $themes: accent positive negative warning;
             --key-focus: (
                 --bg:     fn.global-color(--base --50),
                 --label:  fn.global-color(--heading),
-                --border: fn.global-color(--yellow-static --400),
+                --border: fn.global-color(--focus-static --400),
             ),
 
             --quiet: (
@@ -63,13 +67,13 @@ $themes: accent positive negative warning;
         @include iro.props-store((
             --colors: (
                 --#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme} --800),
-                    --label: fn.global-color(--#{$theme} --800-text),
+                    --bg:    fn.global-color(--#{$theme}-static --800),
+                    --label: fn.global-color(--#{$theme}-static --800-text),
                     --hover: (
-                        --bg: fn.global-color(--#{$theme} --900),
+                        --bg: fn.global-color(--#{$theme}-static --900),
                     ),
                     --active: (
-                        --bg: fn.global-color(--#{$theme} --900),
+                        --bg: fn.global-color(--#{$theme}-static --900),
                     ),
                 ),
 
@@ -169,7 +173,7 @@ $themes: accent positive negative warning;
         &:enabled {
             &:focus-visible {
                 background-color: fn.color(--key-focus --bg);
-                box-shadow:       0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border);
+                box-shadow:       0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border);
                 color:            fn.color(--key-focus --label);
             }
         }