1 files changed, 95 insertions, 26 deletions
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index ef06822..9a2a16a 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -1,39 +1,108 @@
-@use 'sass:map';
+@use "sass:map";
-@use 'pkg:iro-sass/src/props';
+@use "pkg:iro-sass/props";
-@use '../core.vars' as core;
+@use "../core.vars" as core;
-$line-height:  props.def(--o-text-field--line-height, 1.4) !default;
+$line-height: props.def(--o-text-field--line-height, 1.4) !default;
-$pad-i:        props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
+$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
-$pad-i-pill:   props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
+$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
-$pad-b:        props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
+$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
-$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
+$border-width: props.def(
-$rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
+        --o-text-field--border-width,
+        props.get(core.$border-width--thin)
+) !default;
+$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
 $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
-$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
+$focus--border-width: props.def(
+        --o-text-field--focus--border-width,
+        props.get(core.$border-width--medium)
+) !default;
-$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-text-field--key-focus--border-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
-$bg-color:          props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+$bg-color: props.def(
-$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+        --o-text-field--bg-color,
-$text-color:        props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default;
+        props.get(core.$theme, --base, --50),
-$border-color:      props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default;
+        "color"
+) !default;
+$placeholder-color: props.def(
+        --o-text-field--placeholder-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
+$text-color: props.def(
+        --o-text-field--text-color,
+        props.get(core.$theme, --text),
+        "color"
+) !default;
+$border-color: props.def(
+        --o-text-field--border-color,
+        props.get(core.$theme, --border-strong),
+        "color"
+) !default;
-$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$hover--border-color: props.def(
+        --o-text-field--hover--border-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
-$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$focus--border-color: props.def(
+        --o-text-field--focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
-$key-focus--border-color:  props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--border-color: props.def(
-$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+        --o-text-field--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-text-field--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
-$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default;
+$error--border-color: props.def(
+        --o-text-field--error--border-color,
+        props.get(core.$theme, --negative, --700),
+        "color"
+) !default;
-$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
+$error--hover--border-color: props.def(
+        --o-text-field--error--hover--border-color,
+        props.get(core.$theme, --negative, --900),
+        "color"
+) !default;
-$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
+$error--focus--border-color: props.def(
+        --o-text-field--error--focus--border-color,
+        props.get(core.$theme, --negative, --900),
+        "color"
+) !default;
-$disabled--bg-color:          props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$disabled--bg-color: props.def(
-$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default;
+        --o-text-field--disabled--bg-color,
-$disabled--text-color:        props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default;
+        props.get(core.$theme, --border-mute),
-$disabled--border-color:      props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default;
+        "color"
+) !default;
+$disabled--placeholder-color: props.def(
+        --o-text-field--disabled--placeholder-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
+$disabled--text-color: props.def(
+        --o-text-field--disabled--text-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
+$disabled--border-color: props.def(
+        --o-text-field--disabled--border-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;

diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss index ef06822..9a2a16a 100644 --- a/src/objects/_text-field.vars.scss +++ b/src/objects/_text-field.vars.scss
@@ -1,39 +1,108 @@
1	@use 'sass:map';	1	@use "sass:map";
2	@use 'pkg:iro-sass/src/props';	2	@use "pkg:iro-sass/props";
3	@use '../core.vars' as core;	3	@use "../core.vars" as core;
4		4
5	$line-height: props.def(--o-text-field--line-height, 1.4) !default;	5	$line-height: props.def(--o-text-field--line-height, 1.4) !default;
6	$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;	6	$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
7	$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;	7	$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
8	$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;	8	$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
9	$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;	9	$border-width: props.def(
10	$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;	10	--o-text-field--border-width,
		11	props.get(core.$border-width--thin)
		12	) !default;
		13	$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
11		14
12	$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;	15	$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
13		16
14	$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;	17	$focus--border-width: props.def(
		18	--o-text-field--focus--border-width,
		19	props.get(core.$border-width--medium)
		20	) !default;
15		21
16	$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default;	22	$key-focus--border-width: props.def(
		23	--o-text-field--key-focus--border-width,
		24	props.get(core.$key-focus--outline-width)
		25	) !default;
17		26
18	$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default;	27	$bg-color: props.def(
19	$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default;	28	--o-text-field--bg-color,
20	$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default;	29	props.get(core.$theme, --base, --50),
21	$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default;	30	"color"
		31	) !default;
		32	$placeholder-color: props.def(
		33	--o-text-field--placeholder-color,
		34	props.get(core.$theme, --text-mute-more),
		35	"color"
		36	) !default;
		37	$text-color: props.def(
		38	--o-text-field--text-color,
		39	props.get(core.$theme, --text),
		40	"color"
		41	) !default;
		42	$border-color: props.def(
		43	--o-text-field--border-color,
		44	props.get(core.$theme, --border-strong),
		45	"color"
		46	) !default;
22		47
23	$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;	48	$hover--border-color: props.def(
		49	--o-text-field--hover--border-color,
		50	props.get(core.$theme, --text-mute-more),
		51	"color"
		52	) !default;
24		53
25	$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;	54	$focus--border-color: props.def(
		55	--o-text-field--focus--border-color,
		56	props.get(core.$theme, --focus, --border),
		57	"color"
		58	) !default;
26		59
27	$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;	60	$key-focus--border-color: props.def(
28	$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;	61	--o-text-field--key-focus--border-color,
		62	props.get(core.$theme, --focus, --border),
		63	"color"
		64	) !default;
		65	$key-focus--outline-color: props.def(
		66	--o-text-field--key-focus--outline-color,
		67	props.get(core.$theme, --focus, --outline),
		68	"color"
		69	) !default;
29		70
30	$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default;	71	$error--border-color: props.def(
		72	--o-text-field--error--border-color,
		73	props.get(core.$theme, --negative, --700),
		74	"color"
		75	) !default;
31		76
32	$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default;	77	$error--hover--border-color: props.def(
		78	--o-text-field--error--hover--border-color,
		79	props.get(core.$theme, --negative, --900),
		80	"color"
		81	) !default;
33		82
34	$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default;	83	$error--focus--border-color: props.def(
		84	--o-text-field--error--focus--border-color,
		85	props.get(core.$theme, --negative, --900),
		86	"color"
		87	) !default;
35		88
36	$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default;	89	$disabled--bg-color: props.def(
37	$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default;	90	--o-text-field--disabled--bg-color,
38	$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default;	91	props.get(core.$theme, --border-mute),
39	$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default;	92	"color"
		93	) !default;
		94	$disabled--placeholder-color: props.def(
		95	--o-text-field--disabled--placeholder-color,
		96	props.get(core.$theme, --text-disabled),
		97	"color"
		98	) !default;
		99	$disabled--text-color: props.def(
		100	--o-text-field--disabled--text-color,
		101	props.get(core.$theme, --text-disabled),
		102	"color"
		103	) !default;
		104	$disabled--border-color: props.def(
		105	--o-text-field--disabled--border-color,
		106	props.get(core.$theme, --border-mute),
		107	"color"
		108	) !default;