summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_button.vars.scss')
-rw-r--r--src/objects/_button.vars.scss168
1 files changed, 168 insertions, 0 deletions
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
new file mode 100644
index 0000000..4f7b552
--- /dev/null
+++ b/src/objects/_button.vars.scss
@@ -0,0 +1,168 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$line-height: props.def(--o-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default;
8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
9$pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
10$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
11$rounding: props.def(--o-button--rounding, 10em) !default;
12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
13
14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default;
15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
18
19$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default;
20$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default;
21$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default;
22$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
23
24$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default;
25$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default;
26$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
27$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
28
29$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
31$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
32
33$sizes: (
34 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm,
35 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg,
36 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl,
37) !default;
38
39$default-theme-override: () !default;
40$default-theme: props.def(--o-button, (
41 --bg: props.get(core.$theme, --border-mute),
42 --label: props.get(core.$theme, --text),
43 --outline-border: props.get(core.$theme, --border),
44 --outline-label: props.get(core.$theme, --text),
45
46 --hover: (
47 --bg: props.get(core.$theme, --border),
48 --label: props.get(core.$theme, --heading),
49 ),
50
51 --active: (
52 --bg: props.get(core.$theme, --border-strong),
53 --label: props.get(core.$theme, --heading),
54 ),
55
56 --disabled: (
57 --bg: props.get(core.$theme, --border-mute),
58 --outline-border: props.get(core.$theme, --border),
59 --label: props.get(core.$theme, --text-disabled),
60 ),
61
62 --key-focus: (
63 --label: props.get(core.$theme, --focus, --text),
64 --border: props.get(core.$theme, --focus, --border),
65 --outline: props.get(core.$theme, --focus, --outline),
66 ),
67
68 --primary: (
69 --bg: props.get(core.$theme, --base, --900),
70 --label: props.get(core.$theme, --base, --900-text),
71 --outline-border: props.get(core.$theme, --base, --900),
72 --outline-label: props.get(core.$theme, --text),
73
74 --hover: (
75 --bg: props.get(core.$theme, --base, --800),
76 --label: props.get(core.$theme, --base, --800-text),
77 ),
78
79 --active: (
80 --bg: props.get(core.$theme, --base, --700),
81 --label: props.get(core.$theme, --base, --700-text),
82 ),
83 ),
84), 'color') !default;
85$default-theme: props.merge($default-theme, $default-theme-override);
86
87$static-themes: props.def(--o-button, (), 'color');
88
89@each $theme in map.keys(props.get(core.$transparent-colors)) {
90 $button-theme: --static-#{string.slice($theme, 3)};
91
92 $static-themes: props.merge($static-themes, (
93 $button-theme: (
94 --bg: props.get(core.$transparent-colors, $theme, --200),
95 --label: props.get(core.$transparent-colors, $theme, --900),
96 --outline-border: props.get(core.$transparent-colors, $theme, --300),
97 --outline-label: props.get(core.$transparent-colors, $theme, --900),
98
99 --hover: (
100 --bg: props.get(core.$transparent-colors, $theme, --300),
101 --label: props.get(core.$transparent-colors, $theme, --900),
102 ),
103
104 --active: (
105 --bg: props.get(core.$transparent-colors, $theme, --400),
106 --label: props.get(core.$transparent-colors, $theme, --900),
107 ),
108
109 --disabled: (
110 --bg: props.get(core.$transparent-colors, $theme, --200),
111 --outline-border: props.get(core.$transparent-colors, $theme, --300),
112 --label: props.get(core.$transparent-colors, $theme, --500),
113 ),
114
115 --key-focus: (
116 --bg: props.get(core.$transparent-colors, $theme, --100),
117 --label: props.get(core.$transparent-colors, $theme, --900),
118 --border: props.get(core.$transparent-colors, $theme, --900),
119 --outline: props.get(core.$transparent-colors, $theme, --300),
120 ),
121
122 --primary: (
123 --bg: props.get(core.$transparent-colors, $theme, --800),
124 --label: props.get(core.$transparent-colors, $theme, --text),
125 --outline-border: props.get(core.$transparent-colors, $theme, --800),
126 --outline-label: props.get(core.$transparent-colors, $theme, --900),
127
128 --hover: (
129 --bg: props.get(core.$transparent-colors, $theme, --900),
130 --label: props.get(core.$transparent-colors, $theme, --text),
131 ),
132
133 --active: (
134 --bg: props.get(core.$transparent-colors, $theme, --900),
135 --label: props.get(core.$transparent-colors, $theme, --text),
136 ),
137 )
138 )
139 ));
140}
141
142$themes-config: (
143 accent: --accent,
144 negative: --negative,
145) !default;
146
147$themes: props.def(--o-button, (), 'color');
148
149@each $theme, $key in $themes-config {
150 $themes: props.merge($themes, (
151 --#{$theme}: (
152 --bg: props.get(core.$theme, #{$key}-static, --900),
153 --label: props.get(core.$theme, #{$key}-static, --900-text),
154 --outline-border: props.get(core.$theme, $key, --900),
155 --outline-label: props.get(core.$theme, $key, --1000),
156
157 --hover: (
158 --bg: props.get(core.$theme, #{$key}-static, --1000),
159 --label: props.get(core.$theme, #{$key}-static, --1000-text),
160 ),
161
162 --active: (
163 --bg: props.get(core.$theme, #{$key}-static, --1100),
164 --label: props.get(core.$theme, #{$key}-static, --1100-text),
165 ),
166 )
167 ));
168}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-01 07:31:54 +0000