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.scss296
1 files changed, 70 insertions, 226 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 4e1662f..9f3e307 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,298 +1,142 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
1@use 'sass:string'; 4@use 'sass:string';
2@use 'iro-sass/src/index' as iro; 5@use 'iro-sass/src/bem';
3@use '../functions' as fn; 6@use 'iro-sass/src/props';
7@use '../props' as *;
8@use '../core.vars' as core;
4 9
5$sizes: 'sm' 'lg' 'xl' !default; 10@forward 'badge.vars';
6$themes: 'accent' 'positive' 'negative' 'warning' !default; 11@use 'badge.vars' as vars;
7$static-themes: 'black' 'white' !default;
8 12
9@mixin theme($theme) { 13@mixin -apply-theme($theme, $key: (), $static: false) {
10 background-color: fn.color(--#{$theme} --bg); 14 color: props.get($theme, list.join($key, --label)...);
11 color: fn.color(--#{$theme} --label); 15 background-color: props.get($theme, list.join($key, --bg)...);
12 16
13 &:link, 17 &:link,
14 &:visited, 18 &:visited,
15 &:enabled { 19 &:enabled {
16 &:hover, 20 &:hover,
17 &:focus-visible { 21 &:focus-visible {
18 background-color: fn.color(--#{$theme} --hover --bg); 22 color: props.get($theme, list.join($key, --hover --label)...);
19 color: fn.color(--#{$theme} --hover --label); 23 background-color: props.get($theme, list.join($key, --hover --bg)...);
20 } 24 }
21 25
22 &:active { 26 &:active {
23 background-color: fn.color(--#{$theme} --active --bg); 27 color: props.get($theme, list.join($key, --active --label)...);
24 color: fn.color(--#{$theme} --active --label); 28 background-color: props.get($theme, list.join($key, --active --bg)...);
25 } 29 }
26 } 30 }
27 31
28 @include iro.bem-modifier('quiet') { 32 @include bem.modifier('quiet') {
29 background-color: fn.color(--#{$theme}-quiet --bg); 33 color: props.get($theme, list.join($key, --quiet --label)...);
30 color: fn.color(--#{$theme}-quiet --label); 34 background-color: props.get($theme, list.join($key, --quiet --bg)...);
31 35
32 &:link, 36 &:link,
33 &:visited, 37 &:visited,
34 &:enabled { 38 &:enabled {
35 &:hover, 39 &:hover,
36 &:focus-visible { 40 &:focus-visible {
37 background-color: fn.color(--#{$theme}-quiet --hover --bg); 41 color: props.get($theme, list.join($key, --quiet --hover --label)...);
38 color: fn.color(--#{$theme}-quiet --hover --label); 42 background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
39 } 43 }
40 44
41 &:active { 45 &:active {
42 background-color: fn.color(--#{$theme}-quiet --active --bg); 46 color: props.get($theme, list.join($key, --quiet --active --label)...);
43 color: fn.color(--#{$theme}-quiet --active --label); 47 background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
44 } 48 }
45 } 49 }
46 } 50 }
47 51
48 @if string.slice($theme, 1, 7) == 'static-' { 52 @if $static {
49 &::after { 53 &::after {
50 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); 54 outline-color: props.get($theme, list.join($key, --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); 55 box-shadow:
56 0
57 0
58 0
59 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
60 props.get($theme, list.join($key, --key-focus --outline)...);
52 } 61 }
53 } 62 }
54} 63}
55 64
56@include iro.props-namespace('badge') { 65@mixin styles {
57 @include iro.props-store(( 66 @include materialize-at-root(meta.module-variables('vars'));
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 67
66 --sm: ( 68 @include bem.object('badge') {
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 display: inline-block;
194 position: relative; 69 position: relative;
195 padding-block: fn.dim(--pad-b); 70 display: inline-block;
196 padding-inline: fn.dim(--pad-i); 71 padding-block: props.get(vars.$pad-b);
197 border-radius: fn.dim(--rounding); 72 padding-inline: props.get(vars.$pad-i);
198 background-color: fn.color(--bg); 73 font-size: props.get(vars.$font-size);
199 background-clip: padding-box; 74 line-height: props.get(core.$font--standard--line-height);
200 color: fn.color(--label);
201 font-size: fn.dim(--font-size);
202 line-height: fn.global-dim(--font --standard --line-height);
203 text-align: center; 75 text-align: center;
204 text-decoration: none; 76 text-decoration: none;
77 background-clip: padding-box;
78 border-radius: props.get(vars.$rounding);
205 79
206 &::after { 80 &::after {
207 content: '';
208 display: none;
209 position: absolute; 81 position: absolute;
82 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
210 z-index: 1; 83 z-index: 1;
211 inset: calc(-1 * fn.dim(--key-focus --border-offset)); 84 display: none;
212 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
213 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
214 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
215 pointer-events: none; 85 pointer-events: none;
86 content: '';
87 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
88 outline: transparent solid props.get(vars.$key-focus--border-width);
216 } 89 }
217 90
218 &:link, 91 &:link,
219 &:visited, 92 &:visited,
220 &:enabled { 93 &:enabled {
221 &:hover,
222 &:focus-visible { 94 &:focus-visible {
223 background-color: fn.color(--hover --bg); 95 &::after {
224 } 96 display: block;
225 97 }
226 &:active {
227 background-color: fn.color(--active --bg);
228 } 98 }
229 } 99 }
230 100
231 @include iro.bem-elem('label') { 101 @include bem.elem('label') {
232 margin-inline: fn.dim(--pad-i-label); 102 margin-inline: props.get(vars.$pad-i-label);
233 } 103 }
234 104
235 @include iro.bem-modifier('quiet') { 105 @include -apply-theme(vars.$default-theme, $static: true);
236 background-color: fn.color(--quiet --bg);
237 color: fn.color(--quiet --label);
238 106
239 &:link, 107 @each $theme in map.keys(props.get(vars.$themes)) {
240 &:visited, 108 @include bem.modifier(string.slice($theme, 3)) {
241 &:enabled { 109 @include -apply-theme(vars.$themes, $theme);
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 } 110 }
257 } 111 }
258 112
259 &:link, 113 @each $theme in map.keys(props.get(vars.$static-themes)) {
260 &:visited, 114 @include bem.modifier(string.slice($theme, 3)) {
261 &:enabled { 115 @include -apply-theme(vars.$static-themes, $theme, true);
262 &:focus-visible {
263 &::after {
264 display: block;
265 }
266 } 116 }
267 } 117 }
268 118
269 @each $theme in $static-themes { 119 @include bem.modifier('pill') {
270 @include iro.bem-modifier(static-#{$theme}) { 120 padding-inline: props.get(vars.$pad-i-pill);
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; 121 border-radius: 10em;
278 122
279 &::after { 123 &::after {
280 border-radius: 10em; 124 border-radius: 10em;
281 } 125 }
282 } 126 }
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 127
290 @include iro.bem-elem('label') { 128 @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
291 margin-inline: fn.dim(--#{$size} --pad-i-label); 129 @include bem.modifier($mod) {
130 padding-block: props.get($pad-b);
131 padding-inline: props.get($pad-i);
132 font-size: props.get($font-size);
133
134 @include bem.elem('label') {
135 margin-inline: props.get($pad-i-label);
292 } 136 }
293 137
294 @include iro.bem-modifier('pill') { 138 @include bem.modifier('pill') {
295 padding-inline: fn.dim(--#{$size} --pad-i-pill); 139 padding-inline: props.get($pad-i-pill);
296 } 140 }
297 } 141 }
298 } 142 }
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-01 07:40:10 +0000