From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 12:27:09 +0200
Subject: Paths

---
 src/objects/_button.vars.scss | 708 +++++++++++++++++++++++-------------------
 1 file changed, 389 insertions(+), 319 deletions(-)

(limited to 'src/objects/_button.vars.scss')

diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 3f835ae..a137d6d 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -1,386 +1,456 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$line-height:  props.def(--o-button--line-height, 1.4) !default;
+$line-height: props.def(--o-button--line-height, 1.4) !default;
 $border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
-$rounding:     props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
+$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
 
-$pad-i--xs:       props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default;
+$pad-i--xs: props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default;
 $pad-i-label--xs: props.def(--o-button--xs--pad-i-label, props.get(core.$size--40)) !default;
-$pad-i-wide--xs:  props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default;
-$pad-i-pill--xs:  props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default;
-$pad-b--xs:       props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default;
-$font-size--xs:   props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default;
+$pad-i-wide--xs: props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default;
+$pad-i-pill--xs: props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default;
+$pad-b--xs: props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default;
+$font-size--xs: props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default;
 
-$pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default;
+$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default;
 $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default;
-$pad-i-wide--sm:  props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default;
-$pad-i-pill--sm:  props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default;
-$pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default;
-$font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default;
-
-$pad-i:        props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
-$pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
-$pad-i-wide:   props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default;
-$pad-i-pill:   props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default;
-$pad-b:        props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
-$font-size:    props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
-
-$pad-i--lg:       props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
+$pad-i-wide--sm: props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default;
+$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default;
+$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default;
+$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default;
+
+$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
+$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
+$pad-i-wide: props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default;
+$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default;
+$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
+$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
+
+$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
 $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
-$pad-i-wide--lg:  props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default;
-$pad-i-pill--lg:  props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
-$pad-b--lg:       props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
-$font-size--lg:   props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
+$pad-i-wide--lg: props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default;
+$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
+$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
+$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
 
-$pad-i--xl:       props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
+$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
 $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
-$pad-i-wide--xl:  props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default;
-$pad-i-pill--xl:  props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
-$pad-b--xl:       props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
-$font-size--xl:   props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
+$pad-i-wide--xl: props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default;
+$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
+$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
+$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
 
-$shadow-x:    props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
-$shadow-y:    props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
+$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
+$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
 $shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
 $shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
 
-$key-focus--border-width:  props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+	--o-button--key-focus--border-width,
+	props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+	--o-button--key-focus--border-offset,
+	props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+	--o-button--key-focus--outline-width,
+	props.get(core.$key-focus--outline-width)
+) !default;
 
 $fixed-sizes: (
-	'xs' $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs,
-	'sm' $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
-	'lg' $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
-	'xl' $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
+	"xs" $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs,
+	"sm" $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
+	"lg" $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
+	"xl" $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl
 ) !default;
 
-$themes: props.def(--o-button, (), 'color');
+$themes: props.def(--o-button, (), "color");
 
 $default-theme-override: () !default;
-$default-theme: map.deep-merge((
-	--bg-color:             props.get(core.$theme, --bg-l2),
-	--label-color:          props.get(core.$theme, --text),
-	--border-color:         props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
-	--shadow-color:         props.get(core.$theme, --shadow),
-
-	--hover: (
-		--bg-color:     props.get(core.$theme, --bg-l1),
-		--label-color:  props.get(core.$theme, --heading),
-		--border-color: props.get(core.$theme, --border),
-	),
-
-	--active: (
-		--bg-color:     props.get(core.$theme, --border-mute),
-		--label-color:  props.get(core.$theme, --heading),
-		--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, --text-disabled),
-	),
-
-	--key-focus: (
-		--border-color:  props.get(core.$theme, --focus, --border),
-		--outline-color: props.get(core.$theme, --focus, --outline),
-	),
-
-	--highlighted: (
-		--border-color: props.get(core.$theme, --focus, --border),
-		--shadow-color: props.get(core.$theme, --focus, --outline),
-	),
-
-	--selected: (
-		--bg-color:     props.get(core.$theme, --heading),
-		--label-color:  props.get(core.$theme, --base, --50),
-		--border-color: props.get(core.$theme, --heading),
-
-		--hover: (
-			--bg-color:     props.get(core.$theme, --text),
-			--label-color:  props.get(core.$theme, --base, --50),
-			--border-color: props.get(core.$theme, --text),
-		),
-
-		--active: (
-			--bg-color:     props.get(core.$theme, --text-mute),
-			--label-color:  props.get(core.$theme, --base, --50),
-			--border-color: props.get(core.$theme, --text-mute),
-		),
-
-		--disabled: (
-			--bg-color:     props.get(core.$theme, --border-mute),
-			--label-color:  props.get(core.$theme, --border-strong),
-			--border-color: props.get(core.$theme, --border-mute),
-		),
-	),
-
-	--badge: (
-		--bg-color:     props.get(core.$theme, --border-mute),
-		--label-color:  props.get(core.$theme, --heading),
-		--border-color: props.get(core.$theme, --border-mute),
-
-		--hover: (
-			--bg-color:     props.get(core.$theme, --border),
-			--label-color:  props.get(core.$theme, --heading),
-			--border-color: props.get(core.$theme, --border),
-		),
-
-		--active: (
-			--bg-color:     props.get(core.$theme, --border-strong),
-			--label-color:  props.get(core.$theme, --heading),
-			--border-color: props.get(core.$theme, --border-strong),
-		),
-	),
-
-	--quiet: (
-		--label-color:  props.get(core.$theme, --text),
-
+$default-theme: map.deep-merge(
+	(
+		--bg-color: props.get(core.$theme, --bg-l2),
+		--label-color: props.get(core.$theme, --text),
+		--border-color: props.get(core.$theme, --box, --border)
+			props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
+		--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),
 		),
 
 		--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, --border-strong),
 		),
 
 		--disabled: (
+			--bg-color: transparent,
 			--label-color: props.get(core.$theme, --border-strong),
+			--border-color: props.get(core.$theme, --text-disabled),
 		),
-	),
-), $default-theme-override) !default;
-$default-theme: props.def(--o-button, $default-theme, 'color');
 
-$default-theme-dark-override: () !default;
-$default-theme-dark: map.deep-merge((
-	--bg-color:             props.get(core.$theme, --border-mute),
-	--border-color:         props.get(core.$theme, --border-mute),
-
-	--hover: (
-		--bg-color:     props.get(core.$theme, --border),
-		--border-color: props.get(core.$theme, --border),
-	),
-
-	--active: (
-		--bg-color:     props.get(core.$theme, --border-strong),
-		--border-color: props.get(core.$theme, --border-strong),
-	),
-
-	--selected: (
-		--border-color: props.get(core.$theme, --text),
-	),
-), $default-theme-override) !default;
-$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
-
-@each $theme in map.keys(props.get(core.$transparent-colors)) {
-	$button-theme: --static-#{string.slice($theme, 3)};
+		--key-focus: (
+			--border-color: props.get(core.$theme, --focus, --border),
+			--outline-color: props.get(core.$theme, --focus, --outline),
+		),
 
-	$themes: props.merge($themes, (
-		$button-theme: (
-			--bg-color:     props.get(core.$transparent-colors, $theme, --200),
-			--label-color:  props.get(core.$transparent-colors, $theme, --900),
-			--border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
-			--shadow-color: props.get(core.$transparent-colors, --black, --200),
+		--highlighted: (
+			--border-color: props.get(core.$theme, --focus, --border),
+			--shadow-color: props.get(core.$theme, --focus, --outline),
+		),
 
+		--selected: (
+			--bg-color: props.get(core.$theme, --heading),
+			--label-color: props.get(core.$theme, --base, --50),
+			--border-color: props.get(core.$theme, --heading),
 			--hover: (
-				--bg-color:     props.get(core.$transparent-colors, $theme, --300),
-				--label-color:  props.get(core.$transparent-colors, $theme, --900),
-				--border-color: props.get(core.$transparent-colors, $theme, --400),
+				--bg-color: props.get(core.$theme, --text),
+				--label-color: props.get(core.$theme, --base, --50),
+				--border-color: props.get(core.$theme, --text),
 			),
 
 			--active: (
-				--bg-color:     props.get(core.$transparent-colors, $theme, --400),
-				--label-color:  props.get(core.$transparent-colors, $theme, --900),
-				--border-color: props.get(core.$transparent-colors, $theme, --500),
+				--bg-color: props.get(core.$theme, --text-mute),
+				--label-color: props.get(core.$theme, --base, --50),
+				--border-color: props.get(core.$theme, --text-mute),
 			),
 
 			--disabled: (
-				--bg-color:     props.get(core.$transparent-colors, $theme, --100),
-				--label-color:  props.get(core.$transparent-colors, $theme, --500),
-				--border-color: props.get(core.$transparent-colors, $theme, --300),
+				--bg-color: props.get(core.$theme, --border-mute),
+				--label-color: props.get(core.$theme, --border-strong),
+				--border-color: props.get(core.$theme, --border-mute),
 			),
+		),
 
-			--key-focus: (
-				--border-color:  props.get(core.$transparent-colors, $theme, --900),
-				--outline-color: props.get(core.$transparent-colors, $theme, --300),
+		--badge: (
+			--bg-color: props.get(core.$theme, --border-mute),
+			--label-color: props.get(core.$theme, --heading),
+			--border-color: props.get(core.$theme, --border-mute),
+			--hover: (
+				--bg-color: props.get(core.$theme, --border),
+				--label-color: props.get(core.$theme, --heading),
+				--border-color: props.get(core.$theme, --border),
 			),
 
-			--highlighted: (
-				--border-color: props.get(core.$transparent-colors, $theme, --900),
-				--shadow-color: props.get(core.$transparent-colors, --black, --200),
+			--active: (
+				--bg-color: props.get(core.$theme, --border-strong),
+				--label-color: props.get(core.$theme, --heading),
+				--border-color: props.get(core.$theme, --border-strong),
 			),
+		),
 
-			--selected: (
-				--bg-color:     props.get(core.$transparent-colors, $theme, --900),
-				--label-color:  props.get(core.$transparent-colors, $theme, --text),
-				--border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
-
-				--hover: (
-					--bg-color:     props.get(core.$transparent-colors, $theme, --800),
-					--label-color:  props.get(core.$transparent-colors, $theme, --text),
-					--border-color: props.get(core.$transparent-colors, $theme, --100),
-				),
-
-				--active: (
-					--bg-color:     props.get(core.$transparent-colors, $theme, --800),
-					--label-color:  props.get(core.$transparent-colors, $theme, --text),
-					--border-color: props.get(core.$transparent-colors, $theme, --100),
-				),
+		--quiet: (
+			--label-color: props.get(core.$theme, --text),
+			--hover: (
+				--bg-color: props.get(core.$theme, --border-mute),
+				--label-color: props.get(core.$theme, --heading),
+			),
 
-				--disabled: (
-					--bg-color:     props.get(core.$transparent-colors, $theme, --200),
-					--label-color:  props.get(core.$transparent-colors, $theme, --500),
-					--border-color: props.get(core.$transparent-colors, $theme, --100),
-				),
+			--active: (
+				--bg-color: props.get(core.$theme, --border),
+				--label-color: props.get(core.$theme, --heading),
 			),
 
-			--badge: (
-				--bg-color:     props.get(core.$transparent-colors, $theme, --200),
-				--label-color:  props.get(core.$transparent-colors, $theme, --900),
-				--border-color: transparent,
+			--disabled: (
+				--label-color: props.get(core.$theme, --border-strong),
+			),
+		),
+	),
+	$default-theme-override
+) !default;
+$default-theme: props.def(--o-button, $default-theme, "color");
 
-				--hover: (
-					--bg-color:     props.get(core.$transparent-colors, $theme, --300),
-					--label-color:  props.get(core.$transparent-colors, $theme, --900),
-					--border-color: transparent,
-				),
+$default-theme-dark-override: () !default;
+$default-theme-dark: map.deep-merge(
+	(
+		--bg-color: props.get(core.$theme, --border-mute),
+		--border-color: props.get(core.$theme, --border-mute),
+		--hover: (
+			--bg-color: props.get(core.$theme, --border),
+			--border-color: props.get(core.$theme, --border),
+		),
 
-				--active: (
-					--bg-color:     props.get(core.$transparent-colors, $theme, --400),
-					--label-color:  props.get(core.$transparent-colors, $theme, --900),
-					--border-color: transparent,
-				),
-			),
+		--active: (
+			--bg-color: props.get(core.$theme, --border-strong),
+			--border-color: props.get(core.$theme, --border-strong),
+		),
 
-			--quiet: (
-				--label-color:  props.get(core.$transparent-colors, $theme, --900),
+		--selected: (
+			--border-color: props.get(core.$theme, --text),
+		),
+	),
+	$default-theme-override
+) !default;
+$default-theme-dark: props.def(--o-button, $default-theme-dark, "dark");
 
-				--hover: (
-					--bg-color:    props.get(core.$transparent-colors, $theme, --200),
-					--label-color: props.get(core.$transparent-colors, $theme, --900),
-				),
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+	$button-theme: --static-#{string.slice($theme, 3)};
 
-				--active: (
-					--bg-color:    props.get(core.$transparent-colors, $theme, --300),
+	$themes: props.merge(
+		$themes,
+		(
+			$button-theme: (
+					--bg-color: props.get(core.$transparent-colors, $theme, --200),
 					--label-color: props.get(core.$transparent-colors, $theme, --900),
+					--border-color: props.get(core.$transparent-colors, $theme, --300)
+						props.get(core.$transparent-colors, $theme, --300)
+						props.get(core.$transparent-colors, $theme, --400),
+					--shadow-color: props.get(core.$transparent-colors, --black, --200),
+					--hover: (
+							--bg-color: props.get(core.$transparent-colors, $theme, --300),
+							--label-color: props.get(core.$transparent-colors, $theme, --900),
+							--border-color: props.get(core.$transparent-colors, $theme, --400),
+						),
+
+					--active: (
+							--bg-color: props.get(core.$transparent-colors, $theme, --400),
+							--label-color: props.get(core.$transparent-colors, $theme, --900),
+							--border-color: props.get(core.$transparent-colors, $theme, --500),
+						),
+
+					--disabled: (
+							--bg-color: props.get(core.$transparent-colors, $theme, --100),
+							--label-color: props.get(core.$transparent-colors, $theme, --500),
+							--border-color: props.get(core.$transparent-colors, $theme, --300),
+						),
+
+					--key-focus: (
+							--border-color: props.get(core.$transparent-colors, $theme, --900),
+							--outline-color: props.get(core.$transparent-colors, $theme, --300),
+						),
+
+					--highlighted: (
+							--border-color: props.get(core.$transparent-colors, $theme, --900),
+							--shadow-color: props.get(core.$transparent-colors, --black, --200),
+						),
+
+					--selected: (
+							--bg-color: props.get(core.$transparent-colors, $theme, --900),
+							--label-color: props.get(core.$transparent-colors, $theme, --text),
+							--border-color: props.get(core.$transparent-colors, $theme, --100)
+								props.get(core.$transparent-colors, $theme, --100)
+								props.get(core.$transparent-colors, $theme, --200),
+							--hover: (
+									--bg-color: props.get(core.$transparent-colors, $theme, --800),
+									--label-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--text
+										),
+									--border-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--100
+										),
+								),
+
+							--active: (
+									--bg-color: props.get(core.$transparent-colors, $theme, --800),
+									--label-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--text
+										),
+									--border-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--100
+										),
+								),
+
+							--disabled: (
+									--bg-color: props.get(core.$transparent-colors, $theme, --200),
+									--label-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--500
+										),
+									--border-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--100
+										),
+								),
+						),
+
+					--badge: (
+							--bg-color: props.get(core.$transparent-colors, $theme, --200),
+							--label-color: props.get(core.$transparent-colors, $theme, --900),
+							--border-color: transparent,
+
+							--hover: (
+									--bg-color: props.get(core.$transparent-colors, $theme, --300),
+									--label-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--900
+										),
+									--border-color: transparent,
+								),
+
+							--active: (
+									--bg-color: props.get(core.$transparent-colors, $theme, --400),
+									--label-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--900
+										),
+									--border-color: transparent,
+								),
+						),
+
+					--quiet: (
+							--label-color: props.get(core.$transparent-colors, $theme, --900),
+							--hover: (
+									--bg-color: props.get(core.$transparent-colors, $theme, --200),
+									--label-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--900
+										),
+								),
+
+							--active: (
+									--bg-color: props.get(core.$transparent-colors, $theme, --300),
+									--label-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--900
+										),
+								),
+
+							--disabled: (
+									--label-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--500
+										),
+								),
+						),
 				),
-
-				--disabled: (
-					--label-color: props.get(core.$transparent-colors, $theme, --500),
-				),
-			),
 		)
-	));
+	);
 }
 
 $themes-config: (
-	accent:   --accent,
+	accent: --accent,
 	positive: --positive,
 	negative: --negative,
-	warning:  --warning,
+	warning: --warning,
 ) !default;
 
 @each $theme, $key in $themes-config {
-	$themes: props.merge($themes, (
-		--#{$theme}: (
-			--bg-color:     props.get(core.$theme, $key, --100),
-			--label-color:  props.get(core.$theme, $key, --1100),
-			--border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
-			--shadow-color: props.get(core.$theme, $key, --200),
-
-			--hover: (
-				--bg-color:     props.get(core.$theme, $key, --200),
-				--label-color:  props.get(core.$theme, $key, --1200),
-				--border-color: props.get(core.$theme, $key, --600),
-			),
-
-			--active: (
-				--bg-color:     props.get(core.$theme, $key, --300),
-				--label-color:  props.get(core.$theme, $key, --1300),
-				--border-color: props.get(core.$theme, $key, --800),
-			),
-
-			--disabled: (
-				--bg-color:     props.get(core.$theme, --bg-l1),
-				--label-color:  props.get(core.$theme, --border-strong),
-				--border-color: props.get(core.$theme, --border),
-			),
-
-			--key-focus: (
-				--border-color:  props.get(core.$theme, --focus, --border),
-				--outline-color: props.get(core.$theme, --focus, --outline),
-			),
-
-			--highlighted: (
-				--border-color: props.get(core.$theme, $key, --900),
-				--shadow-color: props.get(core.$theme, $key, --200),
-			),
-
-			--selected: (
-				--bg-color:     props.get(core.$theme, #{$key}-static, --900),
-				--label-color:  props.get(core.$theme, #{$key}-static, --900-text),
-				--border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
-
-				--hover: (
-					--bg-color:     props.get(core.$theme, #{$key}-static, --1000),
-					--label-color:  props.get(core.$theme, #{$key}-static, --1000-text),
-					--border-color: props.get(core.$theme, #{$key}-static, --1000),
-				),
-
-				--active: (
-					--bg-color:     props.get(core.$theme, #{$key}-static, --1100),
-					--label-color:  props.get(core.$theme, #{$key}-static, --1100-text),
-					--border-color: props.get(core.$theme, #{$key}-static, --1100),
-				),
-
-				--disabled: (
-					--bg-color:     props.get(core.$theme, --border-mute),
-					--label-color:  props.get(core.$theme, --border-strong),
-					--border-color: props.get(core.$theme, --border-mute),
-				),
-			),
-
-			--badge: (
-				--bg-color:     props.get(core.$theme, $key, --100),
-				--label-color:  props.get(core.$theme, $key, --1100),
-				--border-color: props.get(core.$theme, $key, --300),
-
-				--hover: (
-					--bg-color:     props.get(core.$theme, $key, --200),
-					--label-color:  props.get(core.$theme, $key, --1200),
-					--border-color: props.get(core.$theme, $key, --400),
-				),
-
-				--active: (
-					--bg-color:     props.get(core.$theme, $key, --300),
-					--label-color:  props.get(core.$theme, $key, --1300),
-					--border-color: props.get(core.$theme, $key, --500),
-				),
-			),
-
-			--quiet: (
-				--label-color:  props.get(core.$theme, $key, --1100),
-
-				--hover: (
-					--bg-color:    props.get(core.$theme, $key, --200),
-					--label-color: props.get(core.$theme, $key, --1200),
-				),
-
-				--active: (
-					--bg-color:    props.get(core.$theme, $key, --300),
-					--label-color: props.get(core.$theme, $key, --1300),
-				),
-
-				--disabled: (
-					--label-color: props.get(core.$theme, --border-strong),
-				),
-			),
+	$themes: props.merge(
+		$themes,
+		(
+			--#{$theme}: (
+					--bg-color: props.get(core.$theme, $key, --100),
+					--label-color: props.get(core.$theme, $key, --1100),
+					--border-color: props.get(core.$theme, $key, --500)
+						props.get(core.$theme, $key, --500)
+						props.get(core.$theme, $key, --600),
+					--shadow-color: props.get(core.$theme, $key, --200),
+					--hover: (
+							--bg-color: props.get(core.$theme, $key, --200),
+							--label-color: props.get(core.$theme, $key, --1200),
+							--border-color: props.get(core.$theme, $key, --600),
+						),
+
+					--active: (
+							--bg-color: props.get(core.$theme, $key, --300),
+							--label-color: props.get(core.$theme, $key, --1300),
+							--border-color: props.get(core.$theme, $key, --800),
+						),
+
+					--disabled: (
+							--bg-color: props.get(core.$theme, --bg-l1),
+							--label-color: props.get(core.$theme, --border-strong),
+							--border-color: props.get(core.$theme, --border),
+						),
+
+					--key-focus: (
+							--border-color: props.get(core.$theme, --focus, --border),
+							--outline-color: props.get(core.$theme, --focus, --outline),
+						),
+
+					--highlighted: (
+							--border-color: props.get(core.$theme, $key, --900),
+							--shadow-color: props.get(core.$theme, $key, --200),
+						),
+
+					--selected: (
+							--bg-color: props.get(core.$theme, #{$key}-static, --900),
+							--label-color: props.get(core.$theme, #{$key}-static, --900-text),
+							--border-color: props.get(core.$theme, #{$key}-static, --900)
+								props.get(core.$theme, #{$key}-static, --900)
+								props.get(core.$theme, #{$key}-static, --1000),
+							--hover: (
+									--bg-color: props.get(core.$theme, #{$key}-static, --1000),
+									--label-color: props.get(
+											core.$theme,
+											#{$key}-static,
+											--1000-text
+										),
+									--border-color: props.get(core.$theme, #{$key}-static, --1000),
+								),
+
+							--active: (
+									--bg-color: props.get(core.$theme, #{$key}-static, --1100),
+									--label-color: props.get(
+											core.$theme,
+											#{$key}-static,
+											--1100-text
+										),
+									--border-color: props.get(core.$theme, #{$key}-static, --1100),
+								),
+
+							--disabled: (
+									--bg-color: props.get(core.$theme, --border-mute),
+									--label-color: props.get(core.$theme, --border-strong),
+									--border-color: props.get(core.$theme, --border-mute),
+								),
+						),
+
+					--badge: (
+							--bg-color: props.get(core.$theme, $key, --100),
+							--label-color: props.get(core.$theme, $key, --1100),
+							--border-color: props.get(core.$theme, $key, --300),
+							--hover: (
+									--bg-color: props.get(core.$theme, $key, --200),
+									--label-color: props.get(core.$theme, $key, --1200),
+									--border-color: props.get(core.$theme, $key, --400),
+								),
+
+							--active: (
+									--bg-color: props.get(core.$theme, $key, --300),
+									--label-color: props.get(core.$theme, $key, --1300),
+									--border-color: props.get(core.$theme, $key, --500),
+								),
+						),
+
+					--quiet: (
+							--label-color: props.get(core.$theme, $key, --1100),
+							--hover: (
+									--bg-color: props.get(core.$theme, $key, --200),
+									--label-color: props.get(core.$theme, $key, --1200),
+								),
+
+							--active: (
+									--bg-color: props.get(core.$theme, $key, --300),
+									--label-color: props.get(core.$theme, $key, --1300),
+								),
+
+							--disabled: (
+									--label-color: props.get(core.$theme, --border-strong),
+								),
+						),
+				)
 		)
-	));
+	);
 }
-- 
cgit v1.3.1