summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-18 23:40:20 +0200
committerVolpeon <git@volpeon.ink>2024-10-18 23:40:20 +0200
commitdc2a4ea99b535b97bfbf5b6b8d69ec8dab023b10 (patch)
tree47d4d85bc7033bb0f13e8b355f67a7d7f04d74b6 /src/objects/_button.scss
parentUpdate (diff)
downloadiro-design-dc2a4ea99b535b97bfbf5b6b8d69ec8dab023b10.tar.gz
iro-design-dc2a4ea99b535b97bfbf5b6b8d69ec8dab023b10.tar.bz2
iro-design-dc2a4ea99b535b97bfbf5b6b8d69ec8dab023b10.zip
Update
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss260
1 files changed, 58 insertions, 202 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 097bc21..854e1e3 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,17 +1,20 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
4@use 'sass:string';
2@use 'iro-sass/src/iro-sass' as iro; 5@use 'iro-sass/src/iro-sass' as iro;
3@use '../functions' as fn; 6@use '../props';
7@use '../core.vars' as core;
4 8
5$sizes: 'sm' 'lg' 'xl' !default; 9@forward 'button.vars';
6$themes: 'accent' 'negative' !default; 10@use 'button.vars' as vars;
7$static-themes: 'black' 'white' !default;
8 11
9@mixin theme($theme: ()) { 12@mixin -apply-theme($theme, $key: ()) {
10 &:link, 13 &:link,
11 &:visited, 14 &:visited,
12 &:enabled { 15 &:enabled {
13 color: fn.color(list.join($theme, --label)); 16 color: props.get($theme, list.join($key, --label)...);
14 background-color: fn.color(list.join($theme, --bg)); 17 background-color: props.get($theme, list.join($key, --bg)...);
15 border-color: transparent; 18 border-color: transparent;
16 } 19 }
17 20
@@ -19,9 +22,9 @@ $static-themes: 'black' 'white' !default;
19 &:link, 22 &:link,
20 &:visited, 23 &:visited,
21 &:enabled { 24 &:enabled {
22 color: fn.color(list.join($theme, --outline-label)); 25 color: props.get($theme, list.join($key, --outline-label));
23 background-color: transparent; 26 background-color: transparent;
24 border-color: fn.color(list.join($theme, --outline-border)); 27 border-color: props.get($theme, list.join($key, --outline-border));
25 } 28 }
26 } 29 }
27 30
@@ -30,217 +33,71 @@ $static-themes: 'black' 'white' !default;
30 &:enabled { 33 &:enabled {
31 &:hover, 34 &:hover,
32 &:focus-visible { 35 &:focus-visible {
33 color: fn.color(list.join($theme, --hover --label)); 36 color: props.get($theme, list.join($key, --hover --label));
34 background-color: fn.color(list.join($theme, --hover --bg)); 37 background-color: props.get($theme, list.join($key, --hover --bg));
35 border-color: transparent; 38 border-color: transparent;
36 } 39 }
37 40
38 &:active { 41 &:active {
39 color: fn.color(list.join($theme, --active --label)); 42 color: props.get($theme, list.join($key, --active --label));
40 background-color: fn.color(list.join($theme, --active --bg)); 43 background-color: props.get($theme, list.join($key, --active --bg));
41 border-color: transparent; 44 border-color: transparent;
42 } 45 }
43 } 46 }
44} 47}
45 48
46@mixin static-theme($theme: ()) { 49@mixin -apply-static-theme($theme, $key: ()) {
47 color: fn.color(list.join($theme, --disabled --label)); 50 color: props.get($theme, list.join($key, --disabled --label));
48 background-color: fn.color(list.join($theme, --disabled --bg)); 51 background-color: props.get($theme, list.join($key, --disabled --bg));
49 border-color: transparent; 52 border-color: transparent;
50 53
51 &::after { 54 &::after {
52 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); 55 outline: props.get($theme, list.join($key, --key-focus --border)) solid props.get(vars.$key-focus--border-width);
53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); 56 box-shadow:
57 0
58 0
59 0
60 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
61 props.get($theme, list.join($key, --key-focus --outline));
54 } 62 }
55 63
56 @include iro.bem-modifier('outline') { 64 @include iro.bem-modifier('outline') {
57 background-color: transparent; 65 background-color: transparent;
58 border-color: fn.color(list.join($theme, --disabled --outline-border)); 66 border-color: props.get($theme, list.join($key, --disabled --outline-border));
59 } 67 }
60 68
61 @include theme($theme); 69 @include -apply-theme($theme, $key);
62 70
63 @include iro.bem-modifier('primary') { 71 @include iro.bem-modifier('primary') {
64 @include theme(list.join($theme, --primary)); 72 @include -apply-theme($theme, list.join($key, --primary));
65 } 73 }
66} 74}
67 75
68@include iro.props-namespace('button') { 76@mixin styles {
69 @include iro.props-store(( 77 @include props.materialize(meta.module-variables('vars'));
70 --dims: (
71 --line-height: 1.4,
72 --pad-i: fn.global-dim(--size --200),
73 --pad-i-label: fn.global-dim(--size --75),
74 --pad-b: fn.global-dim(--size --65),
75 --border: fn.global-dim(--border --medium),
76 --rounding: 10em,
77 --font-size: fn.global-dim(--font-size --100),
78 78
79 --sm: ( 79 @include iro.bem-object('button') {
80 --pad-i: fn.global-dim(--size --150),
81 --pad-i-label: fn.global-dim(--size --50),
82 --pad-b: fn.global-dim(--size --25),
83 --font-size: fn.global-dim(--font-size --75),
84 ),
85 --lg: (
86 --pad-i: fn.global-dim(--size --250),
87 --pad-i-label: fn.global-dim(--size --100),
88 --pad-b: fn.global-dim(--size --100),
89 --font-size: fn.global-dim(--font-size --150),
90 ),
91 --xl: (
92 --pad-i: fn.global-dim(--size --300),
93 --pad-i-label: fn.global-dim(--size --150),
94 --pad-b: fn.global-dim(--size --150),
95 --font-size: fn.global-dim(--font-size --200),
96 ),
97
98 --key-focus: (
99 --border: fn.global-dim(--key-focus --border),
100 --border-offset: fn.global-dim(--key-focus --border-offset),
101 --outline: fn.global-dim(--key-focus --outline),
102 ),
103 ),
104 --colors: (
105 --bg: fn.global-color(--border-mute),
106 --label: fn.global-color(--text),
107 --outline-border: fn.global-color(--border),
108 --outline-label: fn.global-color(--text),
109
110 --hover: (
111 --bg: fn.global-color(--border),
112 --label: fn.global-color(--heading),
113 ),
114 --active: (
115 --bg: fn.global-color(--border-strong),
116 --label: fn.global-color(--heading),
117 ),
118 --disabled: (
119 --bg: fn.global-color(--border-mute),
120 --outline-border: fn.global-color(--border),
121 --label: fn.global-color(--text-disabled),
122 ),
123 --key-focus: (
124 --label: fn.global-color(--focus --text),
125 --border: fn.global-color(--focus --border),
126 --outline: fn.global-color(--focus --outline),
127 ),
128
129 --primary: (
130 --bg: fn.global-color(--base --800),
131 --label: fn.global-color(--base --800-text),
132 --outline-border: fn.global-color(--base --800),
133 --outline-label: fn.global-color(--text),
134
135 --hover: (
136 --bg: fn.global-color(--base --900),
137 --label: fn.global-color(--base --900-text),
138 ),
139 --active: (
140 --bg: fn.global-color(--base --900),
141 --label: fn.global-color(--base --900-text),
142 ),
143 ),
144 ),
145 ));
146
147 @each $theme in $themes {
148 @include iro.props-store((
149 --colors: (
150 --#{$theme}: (
151 --bg: fn.global-color(--#{$theme}-static --900),
152 --label: fn.global-color(--#{$theme}-static --900-text),
153 --outline-border: fn.global-color(--#{$theme} --900),
154 --outline-label: fn.global-color(--#{$theme} --1000),
155
156 --hover: (
157 --bg: fn.global-color(--#{$theme}-static --1000),
158 --label: fn.global-color(--#{$theme}-static --1000-text),
159 ),
160 --active: (
161 --bg: fn.global-color(--#{$theme}-static --1100),
162 --label: fn.global-color(--#{$theme}-static --1100-text),
163 ),
164 ),
165 ),
166 ));
167 }
168
169 @each $theme in $static-themes {
170 @include iro.props-store((
171 --colors: (
172 --static-#{$theme}: (
173 --bg: fn.global-color(--#{$theme}-transparent --200),
174 --label: fn.global-color(--#{$theme}-transparent --900),
175 --outline-border: fn.global-color(--#{$theme}-transparent --300),
176 --outline-label: fn.global-color(--#{$theme}-transparent --900),
177
178 --hover: (
179 --bg: fn.global-color(--#{$theme}-transparent --300),
180 --label: fn.global-color(--#{$theme}-transparent --900),
181 ),
182 --active: (
183 --bg: fn.global-color(--#{$theme}-transparent --400),
184 --label: fn.global-color(--#{$theme}-transparent --900),
185 ),
186 --disabled: (
187 --bg: fn.global-color(--#{$theme}-transparent --200),
188 --outline-border: fn.global-color(--#{$theme}-transparent --300),
189 --label: fn.global-color(--#{$theme}-transparent --500),
190 ),
191 --key-focus: (
192 --bg: fn.global-color(--#{$theme}-transparent --100),
193 --label: fn.global-color(--#{$theme}-transparent --900),
194 --border: fn.global-color(--#{$theme}-transparent --900),
195 --outline: fn.global-color(--#{$theme}-transparent --300),
196 ),
197
198 --primary: (
199 --bg: fn.global-color(--#{$theme}-transparent --800),
200 --label: fn.global-color(--#{$theme}-transparent --text),
201 --outline-border: fn.global-color(--#{$theme}-transparent --800),
202 --outline-label: fn.global-color(--#{$theme}-transparent --900),
203
204 --hover: (
205 --bg: fn.global-color(--#{$theme}-transparent --900),
206 --label: fn.global-color(--#{$theme}-transparent --text),
207 ),
208 --active: (
209 --bg: fn.global-color(--#{$theme}-transparent --900),
210 --label: fn.global-color(--#{$theme}-transparent --text),
211 ),
212 ),
213 ),
214 ),
215 ));
216 }
217
218 @include iro.bem-object(iro.props-namespace()) {
219 position: relative; 80 position: relative;
220 display: inline-block; 81 display: inline-block;
221 padding-block: fn.dim(--pad-b); 82 padding-block: props.get(vars.$pad-b);
222 padding-inline: fn.dim(--pad-i); 83 padding-inline: props.get(vars.$pad-i);
223 font-size: fn.dim(--font-size); 84 font-size: props.get(vars.$font-size);
224 font-weight: 500; 85 font-weight: 500;
225 line-height: fn.dim(--line-height); 86 line-height: props.get(vars.$line-height);
226 color: fn.color(--disabled --label);
227 text-align: center; 87 text-align: center;
228 text-decoration: none; 88 text-decoration: none;
229 background-color: fn.color(--disabled --bg); 89 border: props.get(vars.$border-width) solid transparent;
230 border: fn.dim(--border) solid transparent; 90 border-radius: props.get(vars.$rounding);
231 border-color: fn.color(--disabled --bg);
232 border-radius: fn.dim(--rounding);
233 91
234 &::after { 92 &::after {
235 position: absolute; 93 position: absolute;
236 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); 94 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
237 z-index: 1; 95 z-index: 1;
238 display: none; 96 display: none;
239 pointer-events: none; 97 pointer-events: none;
240 content: ''; 98 content: '';
241 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
242 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 100 outline: transparent solid props.get(vars.$key-focus--border-width);
243 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
244 } 101 }
245 102
246 &:link, 103 &:link,
@@ -254,7 +111,7 @@ $static-themes: 'black' 'white' !default;
254 } 111 }
255 112
256 @include iro.bem-elem('label') { 113 @include iro.bem-elem('label') {
257 margin-inline: fn.dim(--pad-i-label); 114 margin-inline: props.get(vars.$pad-i-label);
258 } 115 }
259 116
260 @include iro.bem-modifier('block') { 117 @include iro.bem-modifier('block') {
@@ -263,37 +120,36 @@ $static-themes: 'black' 'white' !default;
263 120
264 @include iro.bem-modifier('outline') { 121 @include iro.bem-modifier('outline') {
265 background-color: transparent; 122 background-color: transparent;
266 border-color: fn.color(--disabled --outline-border);
267 } 123 }
268 124
269 @each $size in $sizes { 125 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes {
270 @include iro.bem-modifier($size) { 126 @include iro.bem-modifier($mod) {
271 padding-block: fn.dim(--#{$size} --pad-b); 127 padding-block: props.get($pad-b);
272 padding-inline: fn.dim(--#{$size} --pad-i); 128 padding-inline: props.get($pad-i);
273 font-size: fn.dim(--#{$size} --font-size); 129 font-size: props.get($font-size);
274 130
275 @include iro.bem-elem('label') { 131 @include iro.bem-elem('label') {
276 margin-inline: fn.dim(--#{$size} --pad-i-label); 132 margin-inline: props.get($pad-i-label);
277 } 133 }
278 } 134 }
279 } 135 }
280 136
281 @include static-theme; 137 @include -apply-static-theme(vars.$default-theme);
282 138
283 @each $theme in $themes { 139 @each $theme in map.keys(props.get(vars.$themes)) {
284 @include iro.bem-modifier($theme) { 140 @include iro.bem-modifier(string.slice($theme, 3)) {
285 @include theme(--#{$theme}); 141 @include -apply-theme(vars.$themes, $theme);
286 } 142 }
287 } 143 }
288 144
289 @each $theme in $static-themes { 145 @each $theme in map.keys(props.get(vars.$static-themes)) {
290 @include iro.bem-modifier(static-#{$theme}) { 146 @include iro.bem-modifier(string.slice($theme, 3)) {
291 @include static-theme(--static-#{$theme}); 147 @include -apply-static-theme(vars.$static-themes, $theme);
292 } 148 }
293 } 149 }
294 150
295 @include iro.bem-modifier('round') { 151 @include iro.bem-modifier('round') {
296 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); 152 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
297 padding-inline: 0; 153 padding-inline: 0;
298 border-radius: 100em; 154 border-radius: 100em;
299 } 155 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 07:43:39 +0000