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.scss | 281 ++++++++++++++++++++++++++---------------------
 1 file changed, 156 insertions(+), 125 deletions(-)

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

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index a3c8187..8adc0f7 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,115 +1,119 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'button.vars';
-@use 'button.vars' as vars;
+@forward "button.vars";
+@use "button.vars" as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-	color:            props.get($theme, list.join($key, --disabled --label-color)...);
+	color: props.get($theme, list.join($key, --disabled --label-color)...);
 	background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
-	border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
+	border-color: props.get($theme, list.join($key, --disabled --border-color)...);
 
 	&::after {
 		outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
-		box-shadow:
-			0
-			0
-			0
-			calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+		box-shadow: 0 0 0
+			calc(
+				props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)
+			)
 			props.get($theme, list.join($key, --key-focus --outline-color)...);
 	}
 
 	&:link,
 	&:visited,
 	&:enabled {
-		color:            props.get($theme, list.join($key, --label-color)...);
+		color: props.get($theme, list.join($key, --label-color)...);
 		background-color: props.get($theme, list.join($key, --bg-color)...);
-		border-color:     props.get($theme, list.join($key, --border-color)...);
-		box-shadow:
-			props.get(vars.$shadow-x)
-			props.get(vars.$shadow-y)
-			props.get(vars.$shadow-blur)
-			props.get(vars.$shadow-grow)
-			props.get($theme, list.join($key, --shadow-color)...);
+		border-color: props.get($theme, list.join($key, --border-color)...);
+		box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
+			props.get(vars.$shadow-grow) props.get($theme, list.join($key, --shadow-color)...);
 
 		&:hover,
 		&:focus-visible {
-			color:            props.get($theme, list.join($key, --hover --label-color)...);
+			color: props.get($theme, list.join($key, --hover --label-color)...);
 			background-color: props.get($theme, list.join($key, --hover --bg-color)...);
-			border-color:     props.get($theme, list.join($key, --hover --border-color)...);
+			border-color: props.get($theme, list.join($key, --hover --border-color)...);
 		}
 
 		&:active {
-			color:            props.get($theme, list.join($key, --active --label-color)...);
+			color: props.get($theme, list.join($key, --active --label-color)...);
 			background-color: props.get($theme, list.join($key, --active --bg-color)...);
-			border-color:     props.get($theme, list.join($key, --active --border-color)...);
-			box-shadow:       none;
+			border-color: props.get($theme, list.join($key, --active --border-color)...);
+			box-shadow: none;
 		}
 	}
 
-	@include bem.modifier('badge') {
-		color:            props.get($theme, list.join($key, --badge --label-color)...);
+	@include bem.modifier("badge") {
+		color: props.get($theme, list.join($key, --badge --label-color)...);
 		background-color: props.get($theme, list.join($key, --badge --bg-color)...);
-		border-color:     props.get($theme, list.join($key, --badge --border-color)...);
-		box-shadow:       none;
+		border-color: props.get($theme, list.join($key, --badge --border-color)...);
+		box-shadow: none;
 
 		&:link,
 		&:visited,
 		&:enabled {
-			color:            props.get($theme, list.join($key, --badge --label-color)...);
+			color: props.get($theme, list.join($key, --badge --label-color)...);
 			background-color: props.get($theme, list.join($key, --badge --bg-color)...);
-			border-color:     props.get($theme, list.join($key, --badge --border-color)...);
-			box-shadow:       none;
+			border-color: props.get($theme, list.join($key, --badge --border-color)...);
+			box-shadow: none;
 
 			&:hover,
 			&:focus-visible {
-				color:            props.get($theme, list.join($key, --badge --hover --label-color)...);
+				color: props.get($theme, list.join($key, --badge --hover --label-color)...);
 				background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
-				border-color:     props.get($theme, list.join($key, --badge --hover --border-color)...);
+				border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
 			}
 
 			&:active {
-				color:            props.get($theme, list.join($key, --badge --active --label-color)...);
-				background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
-				border-color:     props.get($theme, list.join($key, --badge --active --border-color)...);
+				color: props.get($theme, list.join($key, --badge --active --label-color)...);
+				background-color: props.get(
+					$theme,
+					list.join($key, --badge --active --bg-color)...
+				);
+				border-color: props.get(
+					$theme,
+					list.join($key, --badge --active --border-color)...
+				);
 			}
 		}
 	}
 
-	@include bem.modifier('quiet') {
-		color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
+	@include bem.modifier("quiet") {
+		color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
 		background-color: transparent;
-		border-color:     transparent;
+		border-color: transparent;
 
 		&:link,
 		&:visited,
 		&:enabled {
-			color:            props.get($theme, list.join($key, --quiet --label-color)...);
+			color: props.get($theme, list.join($key, --quiet --label-color)...);
 			background-color: transparent;
-			border-color:     transparent;
-			box-shadow:       none;
+			border-color: transparent;
+			box-shadow: none;
 
 			&:hover,
 			&:focus-visible {
-				color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
+				color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
 				background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
-				border-color:     transparent;
+				border-color: transparent;
 			}
 
 			&:active {
-				color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
-				background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
-				border-color:     transparent;
+				color: props.get($theme, list.join($key, --quiet --active --label-color)...);
+				background-color: props.get(
+					$theme,
+					list.join($key, --quiet --active --bg-color)...
+				);
+				border-color: transparent;
 			}
 		}
 	}
 
-	@include bem.is('highlighted') {
+	@include bem.is("highlighted") {
 		&:link,
 		&:visited,
 		&:enabled {
@@ -121,32 +125,27 @@
 
 			box-shadow:
 				0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
-				props.get(vars.$shadow-x)
-				props.get(vars.$shadow-y)
-				props.get(vars.$shadow-blur)
-				props.get(vars.$shadow-grow)
-				props.get($theme, list.join($key, --highlighted --shadow-color)...);
+				props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
+					props.get(vars.$shadow-grow)
+					props.get($theme, list.join($key, --highlighted --shadow-color)...);
 
 			&:focus-visible {
-				box-shadow:
-					props.get(vars.$shadow-x)
-					props.get(vars.$shadow-y)
-					props.get(vars.$shadow-blur)
-					props.get(vars.$shadow-grow)
+				box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
+					props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
 					props.get($theme, list.join($key, --shadow-color)...);
 			}
 		}
 	}
 
-	@include bem.is('selected') {
-		color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
+	@include bem.is("selected") {
+		color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
 		background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
-		border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
+		border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
 
-		@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
-			color:            props.get($theme, list.join($key, --selected --label-color)...);
+		@include bem.multi("&:link, &:visited, &:enabled", "modifier" "badge") {
+			color: props.get($theme, list.join($key, --selected --label-color)...);
 			background-color: props.get($theme, list.join($key, --selected --bg-color)...);
-			border-color:     props.get($theme, list.join($key, --selected --border-color)...);
+			border-color: props.get($theme, list.join($key, --selected --border-color)...);
 		}
 
 		&:link,
@@ -154,47 +153,67 @@
 		&:enabled {
 			&:hover,
 			&:focus-visible {
-				color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
-				background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
-				border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
+				color: props.get($theme, list.join($key, --selected --hover --label-color)...);
+				background-color: props.get(
+					$theme,
+					list.join($key, --selected --hover --bg-color)...
+				);
+				border-color: props.get(
+					$theme,
+					list.join($key, --selected --hover --border-color)...
+				);
 			}
 
 			&:active {
-				color:            props.get($theme, list.join($key, --selected --active --label-color)...);
-				background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
-				border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
+				color: props.get($theme, list.join($key, --selected --active --label-color)...);
+				background-color: props.get(
+					$theme,
+					list.join($key, --selected --active --bg-color)...
+				);
+				border-color: props.get(
+					$theme,
+					list.join($key, --selected --active --border-color)...
+				);
 			}
 		}
 	}
 }
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
-
-	@include bem.object('button') {
-		position:         relative;
-		display:          inline-block;
-		padding-block:    props.get(vars.$pad-b);
-		padding-inline:   props.get(vars.$pad-i);
-		text-overflow:    ellipsis;
-		font-size:        props.get(vars.$font-size);
-		line-height:      props.get(vars.$line-height);
-		text-align:       center;
-		white-space:      nowrap;
-		text-decoration:  none;
-		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;
+	@include materialize-at-root(meta.module-variables("vars"));
+
+	@include bem.object("button") {
+		position: relative;
+		display: inline-block;
+		padding-block: props.get(vars.$pad-b);
+		padding-inline: props.get(vars.$pad-i);
+		text-overflow: ellipsis;
+		font-size: props.get(vars.$font-size);
+		line-height: props.get(vars.$line-height);
+		text-align: center;
+		white-space: nowrap;
+		text-decoration: none;
+		border: props.get(vars.$border-width) solid transparent;
+		border-radius: props.get(vars.$rounding);
+		transition:
+			color 0.1s,
+			background-color 0.1s,
+			border-color 0.1s,
+			box-shadow 0.1s;
 
 		&::after {
-			position:       absolute;
-			inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
-			z-index:        1;
-			display:        none;
+			position: absolute;
+			inset: calc(
+				-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)
+			);
+			z-index: 1;
+			display: none;
 			pointer-events: none;
-			outline:        transparent solid props.get(vars.$key-focus--border-width);
-			content:        '';
-			border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+			outline: transparent solid props.get(vars.$key-focus--border-width);
+			content: "";
+			border-radius: calc(
+				props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
+			);
 		}
 
 		&:link,
@@ -209,7 +228,7 @@
 			}
 		}
 
-		@include bem.elem('label') {
+		@include bem.elem("label") {
 			display: inline-block;
 			margin-inline: props.get(vars.$pad-i-label);
 		}
@@ -222,79 +241,91 @@
 			}
 		}
 
-		@include bem.modifier('pill') {
+		@include bem.modifier("pill") {
 			padding-inline: props.get(vars.$pad-i-pill);
-			border-radius:  100em;
+			border-radius: 100em;
 
 			&::after {
-				border-radius:  100em;
+				border-radius: 100em;
 			}
 		}
 
-		@include bem.modifier('icon') {
-			inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+		@include bem.modifier("icon") {
+			inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
 			padding-inline: 0;
 		}
 
-		@include bem.modifier('wide') {
-			@include bem.elem('label') {
+		@include bem.modifier("wide") {
+			@include bem.elem("label") {
 				margin-inline: props.get(vars.$pad-i-wide);
 			}
 		}
 
-		@include bem.modifier('justify') {
+		@include bem.modifier("justify") {
 			text-align: justify;
 			text-align-last: justify;
 		}
 
-		@each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+		@each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b,
+			$font-size in vars.$fixed-sizes
+		{
 			@include bem.modifier($mod) {
-				padding-block:  props.get($pad-b);
+				padding-block: props.get($pad-b);
 				padding-inline: props.get($pad-i);
-				font-size:      props.get($font-size);
+				font-size: props.get($font-size);
 
-				@include bem.elem('label') {
+				@include bem.elem("label") {
 					margin-inline: props.get($pad-i-label);
 				}
 
-				@include bem.modifier('pill') {
+				@include bem.modifier("pill") {
 					padding-inline: props.get($pad-i-pill);
 				}
 
-				@include bem.modifier('icon') {
-					inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+				@include bem.modifier("icon") {
+					inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
 					padding-inline: 0;
 				}
 
-				@include bem.modifier('wide') {
-					@include bem.elem('label') {
+				@include bem.modifier("wide") {
+					@include bem.elem("label") {
 						margin-inline: props.get($pad-i-wide);
 					}
 				}
 			}
 		}
 
-		@include bem.modifier('align-block') {
+		@include bem.modifier("align-block") {
 			margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
 
-			@include bem.modifier('pill') {
-				margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
+			@include bem.modifier("pill") {
+				margin-inline: calc(
+					-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)
+				);
 			}
 
-			@include bem.modifier('icon') {
-				margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+			@include bem.modifier("icon") {
+				margin-inline: calc(
+					-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - 0.5em *
+						(props.get(vars.$line-height) - 1)
+				);
 			}
 
 			@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
 				@include bem.modifier($mod) {
 					margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
 
-					@include bem.modifier('pill') {
-						margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
+					@include bem.modifier("pill") {
+						margin-inline: calc(
+							-1 * props.get($pad-i-pill) - props.get(vars.$border-width)
+						);
 					}
 
-					@include bem.modifier('icon') {
-						margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+					@include bem.modifier("icon") {
+						margin-inline: calc(
+							-1 * props.get($pad-b) - props.get(vars.$border-width) - 0.5em *
+								(props.get(vars.$line-height) - 1)
+						);
 					}
 				}
 			}
-- 
cgit v1.3.1