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