summaryrefslogtreecommitdiffstats
path: root/src/objects/_badge.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_badge.scss')
-rw-r--r--src/objects/_badge.scss300
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}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 06:04:34 +0000