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.scss165
1 files changed, 120 insertions, 45 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 6a984bf..b9020b6 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,7 +1,60 @@
1@use 'sass:string';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 3@use '../functions' as fn;
3 4
4$themes: accent positive negative warning; 5$themes: 'accent' 'positive' 'negative' 'warning' !default;
6$static-themes: 'black' 'white' !default;
7
8@mixin theme($theme) {
9 background-color: fn.color(--#{$theme} --bg);
10 color: fn.color(--#{$theme} --label);
11
12 &:link,
13 &:visited,
14 &:enabled {
15 &:hover {
16 background-color: fn.color(--#{$theme} --hover --bg);
17 color: fn.color(--#{$theme} --hover --label);
18 }
19
20 &:active {
21 background-color: fn.color(--#{$theme} --active --bg);
22 color: fn.color(--#{$theme} --active --label);
23 }
24 }
25
26 @include iro.bem-modifier('quiet') {
27 background-color: fn.color(--#{$theme}-quiet --bg);
28 color: fn.color(--#{$theme}-quiet --label);
29
30 &:link,
31 &:visited,
32 &:enabled {
33 &:hover {
34 background-color: fn.color(--#{$theme}-quiet --hover --bg);
35 color: fn.color(--#{$theme}-quiet --hover --label);
36 }
37
38 &:active {
39 background-color: fn.color(--#{$theme}-quiet --active --bg);
40 color: fn.color(--#{$theme}-quiet --active --label);
41 }
42 }
43 }
44
45 @if string.slice($theme, 1, 7) == 'static-' {
46 &:link,
47 &:visited,
48 &:enabled {
49 &:focus-visible {
50 border-color: fn.color(--#{$theme} --key-focus --border);
51 outline: fn.color(--#{$theme} --key-focus --outline) solid fn.dim(--key-focus --outline);
52 background-color: fn.color(--#{$theme} --key-focus --bg);
53 color: fn.color(--#{$theme} --key-focus --label);
54 }
55 }
56 }
57}
5 58
6@include iro.props-namespace('badge') { 59@include iro.props-namespace('badge') {
7 @include iro.props-store(( 60 @include iro.props-store((
@@ -32,7 +85,8 @@ $themes: accent positive negative warning;
32 ), 85 ),
33 86
34 --key-focus: ( 87 --key-focus: (
35 --border: fn.global-dim(--key-focus --border), 88 --border: fn.global-dim(--border --medium),
89 --outline: fn.global-dim(--key-focus --border),
36 ), 90 ),
37 ), 91 ),
38 --colors: ( 92 --colors: (
@@ -45,9 +99,10 @@ $themes: accent positive negative warning;
45 --bg: fn.global-color(--heading), 99 --bg: fn.global-color(--heading),
46 ), 100 ),
47 --key-focus: ( 101 --key-focus: (
48 --bg: fn.global-color(--base --50), 102 --bg: fn.global-color(--base --50),
49 --label: fn.global-color(--heading), 103 --label: fn.global-color(--heading),
50 --border: fn.global-color(--focus-static --400), 104 --border: fn.global-color(--focus --1100),
105 --outline: fn.global-color(--focus --400),
51 ), 106 ),
52 107
53 --quiet: ( 108 --quiet: (
@@ -70,10 +125,12 @@ $themes: accent positive negative warning;
70 --bg: fn.global-color(--#{$theme}-static --900), 125 --bg: fn.global-color(--#{$theme}-static --900),
71 --label: fn.global-color(--#{$theme}-static --900-text), 126 --label: fn.global-color(--#{$theme}-static --900-text),
72 --hover: ( 127 --hover: (
73 --bg: fn.global-color(--#{$theme}-static --1000), 128 --bg: fn.global-color(--#{$theme}-static --1000),
129 --label: fn.global-color(--#{$theme}-static --1000-text),
74 ), 130 ),
75 --active: ( 131 --active: (
76 --bg: fn.global-color(--#{$theme}-static --1100), 132 --bg: fn.global-color(--#{$theme}-static --1100),
133 --label: fn.global-color(--#{$theme}-static --1000-text),
77 ), 134 ),
78 ), 135 ),
79 136
@@ -81,20 +138,61 @@ $themes: accent positive negative warning;
81 --bg: fn.global-color(--#{$theme} --200), 138 --bg: fn.global-color(--#{$theme} --200),
82 --label: fn.global-color(--#{$theme} --1100), 139 --label: fn.global-color(--#{$theme} --1100),
83 --hover: ( 140 --hover: (
84 --bg: fn.global-color(--#{$theme} --300), 141 --bg: fn.global-color(--#{$theme} --300),
142 --label: fn.global-color(--#{$theme} --1200),
85 ), 143 ),
86 --active: ( 144 --active: (
87 --bg: fn.global-color(--#{$theme} --400), 145 --bg: fn.global-color(--#{$theme} --400),
146 --label: fn.global-color(--#{$theme} --1300),
88 ), 147 ),
89 ) 148 )
90 ), 149 ),
91 )); 150 ));
92 } 151 }
93 152
153 @each $theme in $static-themes {
154 @include iro.props-store((
155 --colors: (
156 --static-#{$theme}: (
157 --bg: fn.global-color(--#{$theme}-transparent --800),
158 --label: fn.global-color(--#{$theme}-transparent --text),
159 --hover: (
160 --bg: fn.global-color(--#{$theme}-transparent --900),
161 --label: fn.global-color(--#{$theme}-transparent --text),
162 ),
163 --active: (
164 --bg: fn.global-color(--#{$theme}-transparent --900),
165 --label: fn.global-color(--#{$theme}-transparent --text),
166 ),
167 --key-focus: (
168 --bg: fn.global-color(--#{$theme}-transparent --100),
169 --label: fn.global-color(--#{$theme}-transparent --900),
170 --border: fn.global-color(--#{$theme}-transparent --900),
171 --outline: fn.global-color(--#{$theme}-transparent --300),
172 ),
173 ),
174
175 --static-#{$theme}-quiet: (
176 --bg: fn.global-color(--#{$theme}-transparent --200),
177 --label: fn.global-color(--#{$theme}-transparent --900),
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 )
187 )
188 ));
189 }
190
94 @include iro.bem-object(iro.props-namespace()) { 191 @include iro.bem-object(iro.props-namespace()) {
95 display: inline-block; 192 display: inline-block;
96 padding-block: fn.dim(--pad-b); 193 padding-block: calc(fn.dim(--pad-b) - fn.dim(--key-focus --border));
97 padding-inline: fn.dim(--pad-i); 194 padding-inline: calc(fn.dim(--pad-i) - fn.dim(--key-focus --border));
195 border: fn.dim(--key-focus --border) solid transparent;
98 border-radius: fn.dim(--rounding); 196 border-radius: fn.dim(--rounding);
99 background-color: fn.color(--bg); 197 background-color: fn.color(--bg);
100 color: fn.color(--label); 198 color: fn.color(--label);
@@ -134,37 +232,7 @@ $themes: accent positive negative warning;
134 232
135 @each $theme in $themes { 233 @each $theme in $themes {
136 @include iro.bem-modifier($theme) { 234 @include iro.bem-modifier($theme) {
137 background-color: fn.color(--#{$theme} --bg); 235 @include theme($theme);
138 color: fn.color(--#{$theme} --label);
139
140 &:link,
141 &:visited,
142 &:enabled {
143 &:hover {
144 background-color: fn.color(--#{$theme} --hover --bg);
145 }
146
147 &:active {
148 background-color: fn.color(--#{$theme} --active --bg);
149 }
150 }
151
152 @include iro.bem-modifier('quiet') {
153 background-color: fn.color(--#{$theme}-quiet --bg);
154 color: fn.color(--#{$theme}-quiet --label);
155
156 &:link,
157 &:visited,
158 &:enabled {
159 &:hover {
160 background-color: fn.color(--#{$theme}-quiet --hover --bg);
161 }
162
163 &:active {
164 background-color: fn.color(--#{$theme}-quiet --active --bg);
165 }
166 }
167 }
168 } 236 }
169 } 237 }
170 238
@@ -172,12 +240,19 @@ $themes: accent positive negative warning;
172 &:visited, 240 &:visited,
173 &:enabled { 241 &:enabled {
174 &:focus-visible { 242 &:focus-visible {
243 border-color: fn.color(--key-focus --border);
244 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline);
175 background-color: fn.color(--key-focus --bg); 245 background-color: fn.color(--key-focus --bg);
176 box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border);
177 color: fn.color(--key-focus --label); 246 color: fn.color(--key-focus --label);
178 } 247 }
179 } 248 }
180 249
250 @each $theme in $static-themes {
251 @include iro.bem-modifier(static-#{$theme}) {
252 @include theme(static-#{$theme});
253 }
254 }
255
181 @include iro.bem-modifier('pill') { 256 @include iro.bem-modifier('pill') {
182 padding-inline: fn.dim(--pad-i-pill); 257 padding-inline: fn.dim(--pad-i-pill);
183 border-radius: 10em; 258 border-radius: 10em;
@@ -185,8 +260,8 @@ $themes: accent positive negative warning;
185 260
186 @each $size in sm lg xl { 261 @each $size in sm lg xl {
187 @include iro.bem-modifier($size) { 262 @include iro.bem-modifier($size) {
188 padding-block: fn.dim(--#{$size} --pad-b); 263 padding-block: calc(fn.dim(--#{$size} --pad-b) - fn.dim(--key-focus --border));
189 padding-inline: fn.dim(--#{$size} --pad-i); 264 padding-inline: calc(fn.dim(--#{$size} --pad-i) - fn.dim(--key-focus --border));
190 font-size: fn.dim(--#{$size} --font-size); 265 font-size: fn.dim(--#{$size} --font-size);
191 266
192 @include iro.bem-modifier('pill') { 267 @include iro.bem-modifier('pill') {
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 02:32:08 +0000