summaryrefslogtreecommitdiffstats
path: root/src/objects/_text-field.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_text-field.vars.scss')
-rw-r--r--src/objects/_text-field.vars.scss121
1 files changed, 26 insertions, 95 deletions
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 9a2a16a..ef06822 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -1,108 +1,39 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "pkg:iro-sass/props"; 2@use 'pkg:iro-sass/src/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( 9$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
10 --o-text-field--border-width, 10$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
11 props.get(core.$border-width--thin)
12) !default;
13$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
14 11
15$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; 12$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
16 13
17$focus--border-width: props.def( 14$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
18 --o-text-field--focus--border-width,
19 props.get(core.$border-width--medium)
20) !default;
21 15
22$key-focus--border-width: props.def( 16$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default;
23 --o-text-field--key-focus--border-width,
24 props.get(core.$key-focus--outline-width)
25) !default;
26 17
27$bg-color: props.def( 18$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
28 --o-text-field--bg-color, 19$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default;
29 props.get(core.$theme, --base, --50), 20$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default;
30 "color" 21$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default;
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;
47 22
48$hover--border-color: props.def( 23$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
49 --o-text-field--hover--border-color,
50 props.get(core.$theme, --text-mute-more),
51 "color"
52) !default;
53 24
54$focus--border-color: props.def( 25$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
55 --o-text-field--focus--border-color,
56 props.get(core.$theme, --focus, --border),
57 "color"
58) !default;
59 26
60$key-focus--border-color: props.def( 27$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
61 --o-text-field--key-focus--border-color, 28$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
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;
70 29
71$error--border-color: props.def( 30$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default;
72 --o-text-field--error--border-color,
73 props.get(core.$theme, --negative, --700),
74 "color"
75) !default;
76 31
77$error--hover--border-color: props.def( 32$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
78 --o-text-field--error--hover--border-color,
79 props.get(core.$theme, --negative, --900),
80 "color"
81) !default;
82 33
83$error--focus--border-color: props.def( 34$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
84 --o-text-field--error--focus--border-color,
85 props.get(core.$theme, --negative, --900),
86 "color"
87) !default;
88 35
89$disabled--bg-color: props.def( 36$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
90 --o-text-field--disabled--bg-color, 37$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default;
91 props.get(core.$theme, --border-mute), 38$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default;
92 "color" 39$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default;
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;