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