summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_iro-design.scss2
-rw-r--r--src/layouts/_button-group.scss16
-rw-r--r--src/objects/_action-button.scss256
-rw-r--r--src/objects/_action-button.vars.scss359
-rw-r--r--src/objects/_badge.scss144
-rw-r--r--src/objects/_badge.vars.scss161
-rw-r--r--src/objects/_button.scss222
-rw-r--r--src/objects/_button.vars.scss353
-rw-r--r--src/objects/_divider.scss35
-rw-r--r--src/objects/_divider.vars.scss20
10 files changed, 486 insertions, 1082 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index bad29c5..ede8d34 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -44,11 +44,9 @@ $breakpoints: (
44@forward 'scopes/lists' as s-lists--*; 44@forward 'scopes/lists' as s-lists--*;
45@forward 'scopes/tables' as s-tables--*; 45@forward 'scopes/tables' as s-tables--*;
46 46
47@forward 'objects/action-button' as o-action-button--*;
48@forward 'objects/alert' as o-alert--*; 47@forward 'objects/alert' as o-alert--*;
49@forward 'objects/avatar' as o-avatar--*; 48@forward 'objects/avatar' as o-avatar--*;
50@forward 'objects/backdrop' as o-backdrop--*; 49@forward 'objects/backdrop' as o-backdrop--*;
51@forward 'objects/badge' as o-badge--*;
52@forward 'objects/button' as o-button--*; 50@forward 'objects/button' as o-button--*;
53@forward 'objects/card' as o-card--*; 51@forward 'objects/card' as o-card--*;
54@forward 'objects/checkbox' as o-checkbox--*; 52@forward 'objects/checkbox' as o-checkbox--*;
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index b0a3c8e..6c874e1 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -5,7 +5,7 @@
5 5
6@forward 'button-group.vars'; 6@forward 'button-group.vars';
7@use 'button-group.vars' as vars; 7@use 'button-group.vars' as vars;
8@use '../objects/action-button.vars' as action-button; 8@use '../objects/button.vars' as button;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
@@ -22,26 +22,26 @@
22 } 22 }
23 23
24 @include bem.modifier('align-block') { 24 @include bem.modifier('align-block') {
25 margin-inline: calc(-1 * props.get(action-button.$pad-i) - props.get(action-button.$border-width)); 25 margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
26 26
27 @include bem.modifier('pill') { 27 @include bem.modifier('pill') {
28 margin-inline: calc(-1 * props.get(action-button.$pad-i-pill) - props.get(action-button.$border-width)); 28 margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
29 } 29 }
30 30
31 @include bem.modifier('icon') { 31 @include bem.modifier('icon') {
32 margin-inline: calc(-1 * props.get(action-button.$pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1)); 32 margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
33 } 33 }
34 34
35 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in action-button.$fixed-sizes { 35 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
36 @include bem.modifier('action-#{$mod}') { 36 @include bem.modifier('action-#{$mod}') {
37 margin-inline: calc(-1 * props.get($pad-i) - props.get(action-button.$border-width)); 37 margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
38 38
39 @include bem.modifier('pill') { 39 @include bem.modifier('pill') {
40 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(action-button.$border-width)); 40 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
41 } 41 }
42 42
43 @include bem.modifier('icon') { 43 @include bem.modifier('icon') {
44 margin-inline: calc(-1 * props.get($pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1)); 44 margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
45 } 45 }
46 } 46 }
47 } 47 }
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
deleted file mode 100644
index c997679..0000000
--- a/src/objects/_action-button.scss
+++ /dev/null
@@ -1,256 +0,0 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
4@use 'sass:string';
5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props';
7@use '../props' as *;
8
9@forward 'action-button.vars';
10@use 'action-button.vars' as vars;
11
12@mixin -apply-theme($theme, $key: ()) {
13 color: props.get($theme, list.join($key, --disabled --label-color)...);
14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
16
17 &::after {
18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
19 box-shadow:
20 0
21 0
22 0
23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
24 props.get($theme, list.join($key, --key-focus --outline-color)...);
25 }
26
27 &:link,
28 &:visited,
29 &:enabled {
30 color: props.get($theme, list.join($key, --label-color)...);
31 background-color: props.get($theme, list.join($key, --bg-color)...);
32 border-color: props.get($theme, list.join($key, --border-color)...);
33 box-shadow:
34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...);
39
40 &:hover,
41 &:focus-visible {
42 color: props.get($theme, list.join($key, --hover --label-color)...);
43 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
45 }
46
47 &:active {
48 color: props.get($theme, list.join($key, --active --label-color)...);
49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none;
52 }
53 }
54
55 @include bem.modifier('static') {
56 color: props.get($theme, list.join($key, --static --label-color)...);
57 background-color: props.get($theme, list.join($key, --static --bg-color)...);
58 border-color: props.get($theme, list.join($key, --static --border-color)...);
59 box-shadow: none;
60
61 &:link,
62 &:visited,
63 &:enabled {
64 color: props.get($theme, list.join($key, --static --label-color)...);
65 background-color: props.get($theme, list.join($key, --static --bg-color)...);
66 border-color: props.get($theme, list.join($key, --static --border-color)...);
67 box-shadow: none;
68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --static --hover --label-color)...);
72 background-color: props.get($theme, list.join($key, --static --hover --bg-color)...);
73 border-color: props.get($theme, list.join($key, --static --hover --border-color)...);
74 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --static --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --static --active --bg-color)...);
79 border-color: props.get($theme, list.join($key, --static --active --border-color)...);
80 }
81 }
82 }
83
84 @include bem.modifier('quiet') {
85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
86 background-color: transparent;
87 border-color: transparent;
88
89 &:link,
90 &:visited,
91 &:enabled {
92 color: props.get($theme, list.join($key, --quiet --label-color)...);
93 background-color: transparent;
94 border-color: transparent;
95 box-shadow: none;
96
97 &:hover,
98 &:focus-visible {
99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
101 border-color: transparent;
102 }
103
104 &:active {
105 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
107 border-color: transparent;
108 }
109 }
110 }
111
112 @include bem.is('selected') {
113 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
116
117 @include bem.modifier('static') {
118 color: props.get($theme, list.join($key, --selected --label-color)...);
119 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
120 border-color: props.get($theme, list.join($key, --selected --border-color)...);
121 }
122
123 &:link,
124 &:visited,
125 &:enabled {
126 color: props.get($theme, list.join($key, --selected --label-color)...);
127 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
128 border-color: props.get($theme, list.join($key, --selected --border-color)...);
129
130 &:hover,
131 &:focus-visible {
132 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
133 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
134 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
135 }
136
137 &:active {
138 color: props.get($theme, list.join($key, --selected --active --label-color)...);
139 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
140 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
141 }
142 }
143 }
144}
145
146@mixin styles {
147 @include materialize-at-root(meta.module-variables('vars'));
148
149 @include bem.object('action-button') {
150 position: relative;
151 display: inline-block;
152 padding-block: props.get(vars.$pad-b);
153 padding-inline: props.get(vars.$pad-i);
154 line-height: props.get(vars.$line-height);
155 text-align: center;
156 text-decoration: none;
157 text-overflow: ellipsis;
158 white-space: nowrap;
159 border: props.get(vars.$border-width) solid transparent;
160 border-radius: props.get(vars.$rounding);
161
162 &::after {
163 position: absolute;
164 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
165 z-index: 1;
166 display: none;
167 pointer-events: none;
168 content: '';
169 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
170 outline: transparent solid props.get(vars.$key-focus--border-width);
171 }
172
173 &:link,
174 &:visited,
175 &:enabled {
176 &:focus-visible {
177 &::after {
178 display: block;
179 }
180 }
181 }
182
183 @include bem.elem('label') {
184 margin-inline: props.get(vars.$pad-i-label);
185 }
186
187 @include -apply-theme(vars.$default-theme);
188
189 @each $theme in map.keys(props.get(vars.$themes)) {
190 @include bem.modifier(string.slice($theme, 3)) {
191 @include -apply-theme(vars.$themes, $theme);
192 }
193 }
194
195 @include bem.modifier('pill') {
196 padding-inline: props.get(vars.$pad-i-pill);
197 border-radius: 100em;
198
199 &::after {
200 border-radius: 100em;
201 }
202 }
203
204 @include bem.modifier('icon') {
205 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
206 padding-inline: 0;
207 }
208
209 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
210 @include bem.modifier($mod) {
211 padding-block: props.get($pad-b);
212 padding-inline: props.get($pad-i);
213 font-size: props.get($font-size);
214
215 @include bem.elem('label') {
216 margin-inline: props.get($pad-i-label);
217 }
218
219 @include bem.modifier('pill') {
220 padding-inline: props.get($pad-i-pill);
221 }
222
223 @include bem.modifier('icon') {
224 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
225 padding-inline: 0;
226 }
227 }
228 }
229
230 @include bem.modifier('align-block') {
231 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
232
233 @include bem.modifier('pill') {
234 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
235 }
236
237 @include bem.modifier('icon') {
238 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
239 }
240
241 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
242 @include bem.modifier($mod) {
243 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
244
245 @include bem.modifier('pill') {
246 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
247 }
248
249 @include bem.modifier('icon') {
250 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
251 }
252 }
253 }
254 }
255 }
256}
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
deleted file mode 100644
index 6693b61..0000000
--- a/src/objects/_action-button.vars.scss
+++ /dev/null
@@ -1,359 +0,0 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$line-height: props.def(--o-action-button--line-height, 1.4) !default;
7$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
8$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding--sm)) !default;
9
10$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default;
11$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
12$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
13$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
14$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
15
16$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--115)) !default;
17$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--40)) !default;
18$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default;
19$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
20$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
21
22$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--160)) !default;
23$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--65)) !default;
24$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
25$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
26$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
27
28$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--200)) !default;
29$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--85)) !default;
30$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
31$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
32$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
33
34$shadow-x: props.def(--o-action-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
35$shadow-y: props.def(--o-action-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
36$shadow-blur: props.def(--o-action-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
37$shadow-grow: props.def(--o-action-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
38
39$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
40$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
41$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
42
43$fixed-sizes: (
44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
47) !default;
48
49$themes: props.def(--o-action-button, (), 'color');
50
51$default-theme-override: () !default;
52$default-theme: map.deep-merge((
53 --bg-color: props.get(core.$theme, --bg-l2),
54 --label-color: props.get(core.$theme, --text),
55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
56 --shadow-color: props.get(core.$theme, --shadow),
57
58 --hover: (
59 --bg-color: props.get(core.$theme, --border-mute),
60 --label-color: props.get(core.$theme, --heading),
61 --border-color: props.get(core.$theme, --border-strong),
62 ),
63
64 --active: (
65 --bg-color: props.get(core.$theme, --border),
66 --label-color: props.get(core.$theme, --heading),
67 --border-color: props.get(core.$theme, --text-mute-more),
68 ),
69
70 --disabled: (
71 --bg-color: transparent,
72 --label-color: props.get(core.$theme, --border-strong),
73 --border-color: props.get(core.$theme, --border),
74 ),
75
76 --key-focus: (
77 --border-color: props.get(core.$theme, --focus, --border),
78 --outline-color: props.get(core.$theme, --focus, --outline),
79 ),
80
81 --selected: (
82 --bg-color: props.get(core.$theme, --text),
83 --label-color: props.get(core.$theme, --base, --50),
84 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
85
86 --hover: (
87 --bg-color: props.get(core.$theme, --heading),
88 --label-color: props.get(core.$theme, --base, --50),
89 --border-color: props.get(core.$theme, --heading),
90 ),
91
92 --active: (
93 --bg-color: props.get(core.$theme, --heading),
94 --label-color: props.get(core.$theme, --base, --50),
95 --border-color: props.get(core.$theme, --heading),
96 ),
97
98 --disabled: (
99 --bg-color: props.get(core.$theme, --border-mute),
100 --label-color: props.get(core.$theme, --border-strong),
101 --border-color: props.get(core.$theme, --border-mute),
102 ),
103 ),
104
105 --static: (
106 --bg-color: props.get(core.$theme, --border-mute),
107 --label-color: props.get(core.$theme, --heading),
108 --border-color: props.get(core.$theme, --border-mute),
109
110 --hover: (
111 --bg-color: props.get(core.$theme, --border),
112 --label-color: props.get(core.$theme, --heading),
113 --border-color: props.get(core.$theme, --border),
114 ),
115
116 --active: (
117 --bg-color: props.get(core.$theme, --border-strong),
118 --label-color: props.get(core.$theme, --heading),
119 --border-color: props.get(core.$theme, --border-strong),
120 ),
121 ),
122
123 --quiet: (
124 --label-color: props.get(core.$theme, --text),
125
126 --hover: (
127 --bg-color: props.get(core.$theme, --border-mute),
128 --label-color: props.get(core.$theme, --heading),
129 ),
130
131 --active: (
132 --bg-color: props.get(core.$theme, --border),
133 --label-color: props.get(core.$theme, --heading),
134 ),
135
136 --disabled: (
137 --label-color: props.get(core.$theme, --border-strong),
138 ),
139 ),
140), $default-theme-override) !default;
141$default-theme: props.def(--o-action-button, $default-theme, 'color');
142
143$default-theme-dark-override: () !default;
144$default-theme-dark: map.deep-merge((
145 --bg-color: props.get(core.$theme, --border-mute),
146 --border-color: props.get(core.$theme, --border-mute),
147
148 --hover: (
149 --bg-color: props.get(core.$theme, --border),
150 --border-color: props.get(core.$theme, --border),
151 ),
152
153 --active: (
154 --bg-color: props.get(core.$theme, --border-strong),
155 --border-color: props.get(core.$theme, --border-strong),
156 ),
157
158 --selected: (
159 --border-color: props.get(core.$theme, --text),
160 ),
161), $default-theme-override) !default;
162$default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark');
163
164@each $theme in map.keys(props.get(core.$transparent-colors)) {
165 $button-theme: --static-#{string.slice($theme, 3)};
166
167 $themes: props.merge($themes, (
168 $button-theme: (
169 --bg-color: props.get(core.$transparent-colors, $theme, --200),
170 --label-color: props.get(core.$transparent-colors, $theme, --900),
171 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
172 --shadow-color: props.get(core.$transparent-colors, --black, --200),
173
174 --hover: (
175 --bg-color: props.get(core.$transparent-colors, $theme, --300),
176 --label-color: props.get(core.$transparent-colors, $theme, --900),
177 --border-color: props.get(core.$transparent-colors, $theme, --400),
178 ),
179
180 --active: (
181 --bg-color: props.get(core.$transparent-colors, $theme, --400),
182 --label-color: props.get(core.$transparent-colors, $theme, --900),
183 --border-color: props.get(core.$transparent-colors, $theme, --500),
184 ),
185
186 --disabled: (
187 --bg-color: props.get(core.$transparent-colors, $theme, --100),
188 --label-color: props.get(core.$transparent-colors, $theme, --500),
189 --border-color: props.get(core.$transparent-colors, $theme, --300),
190 ),
191
192 --key-focus: (
193 --border-color: props.get(core.$transparent-colors, $theme, --900),
194 --outline-color: props.get(core.$transparent-colors, $theme, --300),
195 ),
196
197 --selected: (
198 --bg-color: props.get(core.$transparent-colors, $theme, --800),
199 --label-color: props.get(core.$transparent-colors, $theme, --text),
200 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
201
202 --hover: (
203 --bg-color: props.get(core.$transparent-colors, $theme, --900),
204 --label-color: props.get(core.$transparent-colors, $theme, --text),
205 --border-color: props.get(core.$transparent-colors, $theme, --100),
206 ),
207
208 --active: (
209 --bg-color: props.get(core.$transparent-colors, $theme, --900),
210 --label-color: props.get(core.$transparent-colors, $theme, --text),
211 --border-color: props.get(core.$transparent-colors, $theme, --100),
212 ),
213
214 --disabled: (
215 --bg-color: props.get(core.$transparent-colors, $theme, --200),
216 --label-color: props.get(core.$transparent-colors, $theme, --500),
217 --border-color: props.get(core.$transparent-colors, $theme, --100),
218 ),
219 ),
220
221 --static: (
222 --bg-color: props.get(core.$transparent-colors, $theme, --200),
223 --label-color: props.get(core.$transparent-colors, $theme, --900),
224 --border-color: transparent,
225
226 --hover: (
227 --bg-color: props.get(core.$transparent-colors, $theme, --300),
228 --label-color: props.get(core.$transparent-colors, $theme, --900),
229 --border-color: transparent,
230 ),
231
232 --active: (
233 --bg-color: props.get(core.$transparent-colors, $theme, --400),
234 --label-color: props.get(core.$transparent-colors, $theme, --900),
235 --border-color: transparent,
236 ),
237 ),
238
239 --quiet: (
240 --label-color: props.get(core.$transparent-colors, $theme, --900),
241
242 --hover: (
243 --bg-color: props.get(core.$transparent-colors, $theme, --200),
244 --label-color: props.get(core.$transparent-colors, $theme, --900),
245 ),
246
247 --active: (
248 --bg-color: props.get(core.$transparent-colors, $theme, --300),
249 --label-color: props.get(core.$transparent-colors, $theme, --900),
250 ),
251
252 --disabled: (
253 --label-color: props.get(core.$transparent-colors, $theme, --500),
254 ),
255 ),
256 )
257 ));
258}
259
260$themes-config: (
261 accent: --accent,
262 positive: --positive,
263 negative: --negative,
264 warning: --warning,
265) !default;
266
267@each $theme, $key in $themes-config {
268 $themes: props.merge($themes, (
269 --#{$theme}: (
270 --bg-color: props.get(core.$theme, $key, --200),
271 --label-color: props.get(core.$theme, $key, --1100),
272 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
273 --shadow-color: props.get(core.$theme, $key, --200),
274
275 --hover: (
276 --bg-color: props.get(core.$theme, $key, --300),
277 --label-color: props.get(core.$theme, $key, --1200),
278 --border-color: props.get(core.$theme, $key, --600),
279 ),
280
281 --active: (
282 --bg-color: props.get(core.$theme, $key, --400),
283 --label-color: props.get(core.$theme, $key, --1300),
284 --border-color: props.get(core.$theme, $key, --800),
285 ),
286
287 --disabled: (
288 --bg-color: props.get(core.$theme, --bg-l1),
289 --label-color: props.get(core.$theme, --border-strong),
290 --border-color: props.get(core.$theme, --border),
291 ),
292
293 --key-focus: (
294 --border-color: props.get(core.$theme, --focus, --border),
295 --outline-color: props.get(core.$theme, --focus, --outline),
296 ),
297
298 --selected: (
299 --bg-color: props.get(core.$theme, #{$key}-static, --900),
300 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
301 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
302
303 --hover: (
304 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
305 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
306 --border-color: props.get(core.$theme, #{$key}-static, --1000),
307 ),
308
309 --active: (
310 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
311 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
312 --border-color: props.get(core.$theme, #{$key}-static, --1100),
313 ),
314
315 --disabled: (
316 --bg-color: props.get(core.$theme, --border-mute),
317 --label-color: props.get(core.$theme, --border-strong),
318 --border-color: props.get(core.$theme, --border-mute),
319 ),
320 ),
321
322 --static: (
323 --bg-color: props.get(core.$theme, $key, --100),
324 --label-color: props.get(core.$theme, $key, --1100),
325 --border-color: props.get(core.$theme, $key, --300),
326
327 --hover: (
328 --bg-color: props.get(core.$theme, $key, --200),
329 --label-color: props.get(core.$theme, $key, --1200),
330 --border-color: props.get(core.$theme, $key, --400),
331 ),
332
333 --active: (
334 --bg-color: props.get(core.$theme, $key, --300),
335 --label-color: props.get(core.$theme, $key, --1300),
336 --border-color: props.get(core.$theme, $key, --500),
337 ),
338 ),
339
340 --quiet: (
341 --label-color: props.get(core.$theme, $key, --1100),
342
343 --hover: (
344 --bg-color: props.get(core.$theme, $key, --200),
345 --label-color: props.get(core.$theme, $key, --1200),
346 ),
347
348 --active: (
349 --bg-color: props.get(core.$theme, $key, --300),
350 --label-color: props.get(core.$theme, $key, --1300),
351 ),
352
353 --disabled: (
354 --label-color: props.get(core.$theme, --border-strong),
355 ),
356 ),
357 )
358 ));
359}
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
deleted file mode 100644
index 9f3e307..0000000
--- a/src/objects/_badge.scss
+++ /dev/null
@@ -1,144 +0,0 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
4@use 'sass:string';
5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props';
7@use '../props' as *;
8@use '../core.vars' as core;
9
10@forward 'badge.vars';
11@use 'badge.vars' as vars;
12
13@mixin -apply-theme($theme, $key: (), $static: false) {
14 color: props.get($theme, list.join($key, --label)...);
15 background-color: props.get($theme, list.join($key, --bg)...);
16
17 &:link,
18 &:visited,
19 &:enabled {
20 &:hover,
21 &:focus-visible {
22 color: props.get($theme, list.join($key, --hover --label)...);
23 background-color: props.get($theme, list.join($key, --hover --bg)...);
24 }
25
26 &:active {
27 color: props.get($theme, list.join($key, --active --label)...);
28 background-color: props.get($theme, list.join($key, --active --bg)...);
29 }
30 }
31
32 @include bem.modifier('quiet') {
33 color: props.get($theme, list.join($key, --quiet --label)...);
34 background-color: props.get($theme, list.join($key, --quiet --bg)...);
35
36 &:link,
37 &:visited,
38 &:enabled {
39 &:hover,
40 &:focus-visible {
41 color: props.get($theme, list.join($key, --quiet --hover --label)...);
42 background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
43 }
44
45 &:active {
46 color: props.get($theme, list.join($key, --quiet --active --label)...);
47 background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
48 }
49 }
50 }
51
52 @if $static {
53 &::after {
54 outline-color: props.get($theme, list.join($key, --key-focus --border)...);
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)...);
61 }
62 }
63}
64
65@mixin styles {
66 @include materialize-at-root(meta.module-variables('vars'));
67
68 @include bem.object('badge') {
69 position: relative;
70 display: inline-block;
71 padding-block: props.get(vars.$pad-b);
72 padding-inline: props.get(vars.$pad-i);
73 font-size: props.get(vars.$font-size);
74 line-height: props.get(core.$font--standard--line-height);
75 text-align: center;
76 text-decoration: none;
77 background-clip: padding-box;
78 border-radius: props.get(vars.$rounding);
79
80 &::after {
81 position: absolute;
82 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
83 z-index: 1;
84 display: 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);
89 }
90
91 &:link,
92 &:visited,
93 &:enabled {
94 &:focus-visible {
95 &::after {
96 display: block;
97 }
98 }
99 }
100
101 @include bem.elem('label') {
102 margin-inline: props.get(vars.$pad-i-label);
103 }
104
105 @include -apply-theme(vars.$default-theme, $static: true);
106
107 @each $theme in map.keys(props.get(vars.$themes)) {
108 @include bem.modifier(string.slice($theme, 3)) {
109 @include -apply-theme(vars.$themes, $theme);
110 }
111 }
112
113 @each $theme in map.keys(props.get(vars.$static-themes)) {
114 @include bem.modifier(string.slice($theme, 3)) {
115 @include -apply-theme(vars.$static-themes, $theme, true);
116 }
117 }
118
119 @include bem.modifier('pill') {
120 padding-inline: props.get(vars.$pad-i-pill);
121 border-radius: 10em;
122
123 &::after {
124 border-radius: 10em;
125 }
126 }
127
128 @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
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);
136 }
137
138 @include bem.modifier('pill') {
139 padding-inline: props.get($pad-i-pill);
140 }
141 }
142 }
143 }
144}
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
deleted file mode 100644
index ff07148..0000000
--- a/src/objects/_badge.vars.scss
+++ /dev/null
@@ -1,161 +0,0 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
7$pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
8$pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
9$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
10$rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
11$font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
12
13$pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
14$pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
15$pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
16$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
17$font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
18
19$pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
20$pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
21$pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
22$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
23$font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
24
25$pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
26$pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
27$pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
28$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
29$font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
30
31$key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
32$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
33$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
34
35$sizes: (
36 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
37 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
38 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
39) !default;
40
41$default-theme-override: () !default;
42$default-theme: props.def(--o-badge, (
43 --bg: props.get(core.$theme, --heading),
44 --label: props.get(core.$theme, --bg-l2),
45
46 --hover: (
47 --bg: props.get(core.$theme, --text),
48 --label: props.get(core.$theme, --bg-l2),
49 ),
50
51 --active: (
52 --bg: props.get(core.$theme, --text-mute),
53 --label: props.get(core.$theme, --bg-l2),
54 ),
55
56 --key-focus: (
57 --label: props.get(core.$theme, --focus, --text),
58 --border: props.get(core.$theme, --focus, --border),
59 --outline: props.get(core.$theme, --focus, --outline),
60 ),
61
62 --quiet: (
63 --bg: props.get(core.$theme, --border-mute),
64 --label: props.get(core.$theme, --heading),
65
66 --hover: (
67 --bg: props.get(core.$theme, --border),
68 --label: props.get(core.$theme, --heading),
69 ),
70
71 --active: (
72 --bg: props.get(core.$theme, --border-strong),
73 --label: props.get(core.$theme, --heading),
74 ),
75 )
76), 'color') !default;
77$default-theme: props.merge($default-theme, $default-theme-override);
78
79$static-themes: props.def(--o-badge, (), 'color');
80
81@each $theme in map.keys(props.get(core.$transparent-colors)) {
82 $badge-theme: --static-#{string.slice($theme, 3)};
83
84 $static-themes: props.merge($static-themes, (
85 $badge-theme: (
86 --bg: props.get(core.$transparent-colors, $theme, --800),
87 --label: props.get(core.$transparent-colors, $theme, --text),
88
89 --hover: (
90 --bg: props.get(core.$transparent-colors, $theme, --900),
91 --label: props.get(core.$transparent-colors, $theme, --text),
92 ),
93
94 --active: (
95 --bg: props.get(core.$transparent-colors, $theme, --900),
96 --label: props.get(core.$transparent-colors, $theme, --text),
97 ),
98
99 --key-focus: (
100 --bg: props.get(core.$transparent-colors, $theme, --100),
101 --label: props.get(core.$transparent-colors, $theme, --900),
102 --border: props.get(core.$transparent-colors, $theme, --900),
103 --outline: props.get(core.$transparent-colors, $theme, --300),
104 ),
105
106 --quiet: (
107 --bg: props.get(core.$transparent-colors, $theme, --200),
108 --label: props.get(core.$transparent-colors, $theme, --900),
109 --hover: (
110 --bg: props.get(core.$transparent-colors, $theme, --300),
111 --label: props.get(core.$transparent-colors, $theme, --900),
112 ),
113 --active: (
114 --bg: props.get(core.$transparent-colors, $theme, --400),
115 --label: props.get(core.$transparent-colors, $theme, --900),
116 ),
117 )
118 )
119 ));
120}
121
122$themes-config: (
123 accent: --accent,
124 positive: --positive,
125 negative: --negative,
126 warning: --warning,
127) !default;
128
129$themes: props.def(--o-badge, (), 'color');
130
131@each $theme, $key in $themes-config {
132 $themes: props.merge($themes, (
133 --#{$theme}: (
134 --bg: props.get(core.$theme, #{$key}-static, --900),
135 --label: props.get(core.$theme, #{$key}-static, --900-text),
136
137 --hover: (
138 --bg: props.get(core.$theme, #{$key}-static, --1000),
139 --label: props.get(core.$theme, #{$key}-static, --1000-text),
140 ),
141
142 --active: (
143 --bg: props.get(core.$theme, #{$key}-static, --1100),
144 --label: props.get(core.$theme, #{$key}-static, --1000-text),
145 ),
146
147 --quiet: (
148 --bg: props.get(core.$theme, $key, --200),
149 --label: props.get(core.$theme, $key, --1100),
150 --hover: (
151 --bg: props.get(core.$theme, $key, --300),
152 --label: props.get(core.$theme, $key, --1200),
153 ),
154 --active: (
155 --bg: props.get(core.$theme, $key, --400),
156 --label: props.get(core.$theme, $key, --1300),
157 ),
158 )
159 )
160 ));
161}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index aaf55b5..8fbec78 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -5,72 +5,137 @@
5@use 'iro-sass/src/bem'; 5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8@use '../core.vars' as core;
9 8
10@forward 'button.vars'; 9@forward 'button.vars';
11@use 'button.vars' as vars; 10@use 'button.vars' as vars;
12 11
13@mixin -apply-theme($theme, $key: ()) { 12@mixin -apply-theme($theme, $key: ()) {
14 &:link, 13 color: props.get($theme, list.join($key, --disabled --label-color)...);
15 &:visited, 14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
16 &:enabled { 15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
17 color: props.get($theme, list.join($key, --label)...); 16
18 background-color: props.get($theme, list.join($key, --bg)...); 17 &::after {
19 border-color: transparent; 18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
20 } 19 box-shadow:
21 20 0
22 @include bem.modifier('outline') { 21 0
23 &:link, 22 0
24 &:visited, 23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
25 &:enabled { 24 props.get($theme, list.join($key, --key-focus --outline-color)...);
26 color: props.get($theme, list.join($key, --outline-label)...);
27 background-color: transparent;
28 border-color: props.get($theme, list.join($key, --outline-border)...);
29 }
30 } 25 }
31 26
32 &:link, 27 &:link,
33 &:visited, 28 &:visited,
34 &:enabled { 29 &:enabled {
30 color: props.get($theme, list.join($key, --label-color)...);
31 background-color: props.get($theme, list.join($key, --bg-color)...);
32 border-color: props.get($theme, list.join($key, --border-color)...);
33 box-shadow:
34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...);
39
35 &:hover, 40 &:hover,
36 &:focus-visible { 41 &:focus-visible {
37 color: props.get($theme, list.join($key, --hover --label)...); 42 color: props.get($theme, list.join($key, --hover --label-color)...);
38 background-color: props.get($theme, list.join($key, --hover --bg)...); 43 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
39 border-color: transparent; 44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
40 } 45 }
41 46
42 &:active { 47 &:active {
43 color: props.get($theme, list.join($key, --active --label)...); 48 color: props.get($theme, list.join($key, --active --label-color)...);
44 background-color: props.get($theme, list.join($key, --active --bg)...); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
45 border-color: transparent; 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none;
46 } 52 }
47 } 53 }
48}
49 54
50@mixin -apply-static-theme($theme, $key: ()) { 55 @include bem.modifier('badge') {
51 color: props.get($theme, list.join($key, --disabled --label)...); 56 color: props.get($theme, list.join($key, --badge --label-color)...);
52 background-color: props.get($theme, list.join($key, --disabled --bg)...); 57 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
53 border-color: transparent; 58 border-color: props.get($theme, list.join($key, --badge --border-color)...);
59 box-shadow: none;
54 60
55 &::after { 61 &:link,
56 outline-color: props.get($theme, list.join($key, --key-focus --border)...); 62 &:visited,
57 box-shadow: 63 &:enabled {
58 0 64 color: props.get($theme, list.join($key, --badge --label-color)...);
59 0 65 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
60 0 66 border-color: props.get($theme, list.join($key, --badge --border-color)...);
61 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 67 box-shadow: none;
62 props.get($theme, list.join($key, --key-focus --outline)...); 68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --badge --hover --label-color)...);
72 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
73 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
74 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --badge --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...);
80 }
81 }
63 } 82 }
64 83
65 @include bem.modifier('outline') { 84 @include bem.modifier('quiet') {
85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
66 background-color: transparent; 86 background-color: transparent;
67 border-color: props.get($theme, list.join($key, --disabled --outline-border)...); 87 border-color: transparent;
88
89 &:link,
90 &:visited,
91 &:enabled {
92 color: props.get($theme, list.join($key, --quiet --label-color)...);
93 background-color: transparent;
94 border-color: transparent;
95 box-shadow: none;
96
97 &:hover,
98 &:focus-visible {
99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
101 border-color: transparent;
102 }
103
104 &:active {
105 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
107 border-color: transparent;
108 }
109 }
68 } 110 }
69 111
70 @include -apply-theme($theme, $key); 112 @include bem.is('selected') {
113 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
116
117 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
118 color: props.get($theme, list.join($key, --selected --label-color)...);
119 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
120 border-color: props.get($theme, list.join($key, --selected --border-color)...);
121 }
71 122
72 @include bem.modifier('primary') { 123 &:link,
73 @include -apply-theme($theme, list.join($key, --primary)); 124 &:visited,
125 &:enabled {
126 &:hover,
127 &:focus-visible {
128 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
129 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
130 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
131 }
132
133 &:active {
134 color: props.get($theme, list.join($key, --selected --active --label-color)...);
135 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
136 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
137 }
138 }
74 } 139 }
75} 140}
76 141
@@ -82,11 +147,11 @@
82 display: inline-block; 147 display: inline-block;
83 padding-block: props.get(vars.$pad-b); 148 padding-block: props.get(vars.$pad-b);
84 padding-inline: props.get(vars.$pad-i); 149 padding-inline: props.get(vars.$pad-i);
85 font-size: props.get(vars.$font-size);
86 font-weight: 500;
87 line-height: props.get(vars.$line-height); 150 line-height: props.get(vars.$line-height);
88 text-align: center; 151 text-align: center;
89 text-decoration: none; 152 text-decoration: none;
153 text-overflow: ellipsis;
154 white-space: nowrap;
90 border: props.get(vars.$border-width) solid transparent; 155 border: props.get(vars.$border-width) solid transparent;
91 border-radius: props.get(vars.$rounding); 156 border-radius: props.get(vars.$rounding);
92 157
@@ -114,16 +179,30 @@
114 @include bem.elem('label') { 179 @include bem.elem('label') {
115 margin-inline: props.get(vars.$pad-i-label); 180 margin-inline: props.get(vars.$pad-i-label);
116 } 181 }
117 182
118 @include bem.modifier('block') { 183 @include -apply-theme(vars.$default-theme);
119 display: block; 184
185 @each $theme in map.keys(props.get(vars.$themes)) {
186 @include bem.modifier(string.slice($theme, 3)) {
187 @include -apply-theme(vars.$themes, $theme);
188 }
120 } 189 }
121 190
122 @include bem.modifier('outline') { 191 @include bem.modifier('pill') {
123 background-color: transparent; 192 padding-inline: props.get(vars.$pad-i-pill);
193 border-radius: 100em;
194
195 &::after {
196 border-radius: 100em;
197 }
198 }
199
200 @include bem.modifier('icon') {
201 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
202 padding-inline: 0;
124 } 203 }
125 204
126 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { 205 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
127 @include bem.modifier($mod) { 206 @include bem.modifier($mod) {
128 padding-block: props.get($pad-b); 207 padding-block: props.get($pad-b);
129 padding-inline: props.get($pad-i); 208 padding-inline: props.get($pad-i);
@@ -132,27 +211,42 @@
132 @include bem.elem('label') { 211 @include bem.elem('label') {
133 margin-inline: props.get($pad-i-label); 212 margin-inline: props.get($pad-i-label);
134 } 213 }
214
215 @include bem.modifier('pill') {
216 padding-inline: props.get($pad-i-pill);
217 }
218
219 @include bem.modifier('icon') {
220 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
221 padding-inline: 0;
222 }
135 } 223 }
136 } 224 }
137 225
138 @include -apply-static-theme(vars.$default-theme); 226 @include bem.modifier('align-block') {
227 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
139 228
140 @each $theme in map.keys(props.get(vars.$themes)) { 229 @include bem.modifier('pill') {
141 @include bem.modifier(string.slice($theme, 3)) { 230 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
142 @include -apply-theme(vars.$themes, $theme);
143 } 231 }
144 }
145 232
146 @each $theme in map.keys(props.get(vars.$static-themes)) { 233 @include bem.modifier('icon') {
147 @include bem.modifier(string.slice($theme, 3)) { 234 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
148 @include -apply-static-theme(vars.$static-themes, $theme);
149 } 235 }
150 } 236
237 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
238 @include bem.modifier($mod) {
239 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
151 240
152 @include bem.modifier('round') { 241 @include bem.modifier('pill') {
153 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 242 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
154 padding-inline: 0; 243 }
155 border-radius: 100em; 244
245 @include bem.modifier('icon') {
246 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
247 }
248 }
249 }
156 } 250 }
157 } 251 }
158} 252}
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 4f7b552..7b4670f 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -4,164 +4,355 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$line-height: props.def(--o-button--line-height, 1.4) !default; 6$line-height: props.def(--o-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; 7$border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; 8$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
9$pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
10$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
11$rounding: props.def(--o-button--rounding, 10em) !default;
12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
13 9
14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; 10$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default;
15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; 11$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; 12$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
13$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default;
17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; 14$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
18 15
19$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; 16$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
20$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; 17$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default;
21$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; 18$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !default;
19$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
20$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
21
22$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
23$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
24$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
25$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
22$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; 26$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
23 27
24$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; 28$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
25$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; 29$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
30$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
26$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; 31$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
27$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; 32$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
28 33
34$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
35$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
36$shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
37$shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
38
29$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 39$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 40$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
31$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 41$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
32 42
33$sizes: ( 43$fixed-sizes: (
34 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, 44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
35 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, 45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
36 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, 46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
37) !default; 47) !default;
38 48
49$themes: props.def(--o-button, (), 'color');
50
39$default-theme-override: () !default; 51$default-theme-override: () !default;
40$default-theme: props.def(--o-button, ( 52$default-theme: map.deep-merge((
41 --bg: props.get(core.$theme, --border-mute), 53 --bg-color: props.get(core.$theme, --bg-l2),
42 --label: props.get(core.$theme, --text), 54 --label-color: props.get(core.$theme, --text),
43 --outline-border: props.get(core.$theme, --border), 55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
44 --outline-label: props.get(core.$theme, --text), 56 --shadow-color: props.get(core.$theme, --shadow),
45 57
46 --hover: ( 58 --hover: (
47 --bg: props.get(core.$theme, --border), 59 --bg-color: props.get(core.$theme, --border-mute),
48 --label: props.get(core.$theme, --heading), 60 --label-color: props.get(core.$theme, --heading),
61 --border-color: props.get(core.$theme, --border-strong),
49 ), 62 ),
50 63
51 --active: ( 64 --active: (
52 --bg: props.get(core.$theme, --border-strong), 65 --bg-color: props.get(core.$theme, --border),
53 --label: props.get(core.$theme, --heading), 66 --label-color: props.get(core.$theme, --heading),
67 --border-color: props.get(core.$theme, --text-mute-more),
54 ), 68 ),
55 69
56 --disabled: ( 70 --disabled: (
57 --bg: props.get(core.$theme, --border-mute), 71 --bg-color: transparent,
58 --outline-border: props.get(core.$theme, --border), 72 --label-color: props.get(core.$theme, --border-strong),
59 --label: props.get(core.$theme, --text-disabled), 73 --border-color: props.get(core.$theme, --border),
60 ), 74 ),
61 75
62 --key-focus: ( 76 --key-focus: (
63 --label: props.get(core.$theme, --focus, --text), 77 --border-color: props.get(core.$theme, --focus, --border),
64 --border: props.get(core.$theme, --focus, --border), 78 --outline-color: props.get(core.$theme, --focus, --outline),
65 --outline: props.get(core.$theme, --focus, --outline), 79 ),
80
81 --selected: (
82 --bg-color: props.get(core.$theme, --text),
83 --label-color: props.get(core.$theme, --base, --50),
84 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
85
86 --hover: (
87 --bg-color: props.get(core.$theme, --heading),
88 --label-color: props.get(core.$theme, --base, --50),
89 --border-color: props.get(core.$theme, --heading),
90 ),
91
92 --active: (
93 --bg-color: props.get(core.$theme, --heading),
94 --label-color: props.get(core.$theme, --base, --50),
95 --border-color: props.get(core.$theme, --heading),
96 ),
97
98 --disabled: (
99 --bg-color: props.get(core.$theme, --border-mute),
100 --label-color: props.get(core.$theme, --border-strong),
101 --border-color: props.get(core.$theme, --border-mute),
102 ),
103 ),
104
105 --badge: (
106 --bg-color: props.get(core.$theme, --border-mute),
107 --label-color: props.get(core.$theme, --heading),
108 --border-color: props.get(core.$theme, --border-mute),
109
110 --hover: (
111 --bg-color: props.get(core.$theme, --border),
112 --label-color: props.get(core.$theme, --heading),
113 --border-color: props.get(core.$theme, --border),
114 ),
115
116 --active: (
117 --bg-color: props.get(core.$theme, --border-strong),
118 --label-color: props.get(core.$theme, --heading),
119 --border-color: props.get(core.$theme, --border-strong),
120 ),
66 ), 121 ),
67 122
68 --primary: ( 123 --quiet: (
69 --bg: props.get(core.$theme, --base, --900), 124 --label-color: props.get(core.$theme, --text),
70 --label: props.get(core.$theme, --base, --900-text),
71 --outline-border: props.get(core.$theme, --base, --900),
72 --outline-label: props.get(core.$theme, --text),
73 125
74 --hover: ( 126 --hover: (
75 --bg: props.get(core.$theme, --base, --800), 127 --bg-color: props.get(core.$theme, --border-mute),
76 --label: props.get(core.$theme, --base, --800-text), 128 --label-color: props.get(core.$theme, --heading),
77 ), 129 ),
78 130
79 --active: ( 131 --active: (
80 --bg: props.get(core.$theme, --base, --700), 132 --bg-color: props.get(core.$theme, --border),
81 --label: props.get(core.$theme, --base, --700-text), 133 --label-color: props.get(core.$theme, --heading),
134 ),
135
136 --disabled: (
137 --label-color: props.get(core.$theme, --border-strong),
82 ), 138 ),
83 ), 139 ),
84), 'color') !default; 140), $default-theme-override) !default;
85$default-theme: props.merge($default-theme, $default-theme-override); 141$default-theme: props.def(--o-button, $default-theme, 'color');
142
143$default-theme-dark-override: () !default;
144$default-theme-dark: map.deep-merge((
145 --bg-color: props.get(core.$theme, --border-mute),
146 --border-color: props.get(core.$theme, --border-mute),
86 147
87$static-themes: props.def(--o-button, (), 'color'); 148 --hover: (
149 --bg-color: props.get(core.$theme, --border),
150 --border-color: props.get(core.$theme, --border),
151 ),
152
153 --active: (
154 --bg-color: props.get(core.$theme, --border-strong),
155 --border-color: props.get(core.$theme, --border-strong),
156 ),
157
158 --selected: (
159 --border-color: props.get(core.$theme, --text),
160 ),
161), $default-theme-override) !default;
162$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
88 163
89@each $theme in map.keys(props.get(core.$transparent-colors)) { 164@each $theme in map.keys(props.get(core.$transparent-colors)) {
90 $button-theme: --static-#{string.slice($theme, 3)}; 165 $button-theme: --static-#{string.slice($theme, 3)};
91 166
92 $static-themes: props.merge($static-themes, ( 167 $themes: props.merge($themes, (
93 $button-theme: ( 168 $button-theme: (
94 --bg: props.get(core.$transparent-colors, $theme, --200), 169 --bg-color: props.get(core.$transparent-colors, $theme, --200),
95 --label: props.get(core.$transparent-colors, $theme, --900), 170 --label-color: props.get(core.$transparent-colors, $theme, --900),
96 --outline-border: props.get(core.$transparent-colors, $theme, --300), 171 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
97 --outline-label: props.get(core.$transparent-colors, $theme, --900), 172 --shadow-color: props.get(core.$transparent-colors, --black, --200),
98 173
99 --hover: ( 174 --hover: (
100 --bg: props.get(core.$transparent-colors, $theme, --300), 175 --bg-color: props.get(core.$transparent-colors, $theme, --300),
101 --label: props.get(core.$transparent-colors, $theme, --900), 176 --label-color: props.get(core.$transparent-colors, $theme, --900),
177 --border-color: props.get(core.$transparent-colors, $theme, --400),
102 ), 178 ),
103 179
104 --active: ( 180 --active: (
105 --bg: props.get(core.$transparent-colors, $theme, --400), 181 --bg-color: props.get(core.$transparent-colors, $theme, --400),
106 --label: props.get(core.$transparent-colors, $theme, --900), 182 --label-color: props.get(core.$transparent-colors, $theme, --900),
183 --border-color: props.get(core.$transparent-colors, $theme, --500),
107 ), 184 ),
108 185
109 --disabled: ( 186 --disabled: (
110 --bg: props.get(core.$transparent-colors, $theme, --200), 187 --bg-color: props.get(core.$transparent-colors, $theme, --100),
111 --outline-border: props.get(core.$transparent-colors, $theme, --300), 188 --label-color: props.get(core.$transparent-colors, $theme, --500),
112 --label: props.get(core.$transparent-colors, $theme, --500), 189 --border-color: props.get(core.$transparent-colors, $theme, --300),
113 ), 190 ),
114 191
115 --key-focus: ( 192 --key-focus: (
116 --bg: props.get(core.$transparent-colors, $theme, --100), 193 --border-color: props.get(core.$transparent-colors, $theme, --900),
117 --label: props.get(core.$transparent-colors, $theme, --900), 194 --outline-color: props.get(core.$transparent-colors, $theme, --300),
118 --border: props.get(core.$transparent-colors, $theme, --900),
119 --outline: props.get(core.$transparent-colors, $theme, --300),
120 ), 195 ),
121 196
122 --primary: ( 197 --selected: (
123 --bg: props.get(core.$transparent-colors, $theme, --800), 198 --bg-color: props.get(core.$transparent-colors, $theme, --800),
124 --label: props.get(core.$transparent-colors, $theme, --text), 199 --label-color: props.get(core.$transparent-colors, $theme, --text),
125 --outline-border: props.get(core.$transparent-colors, $theme, --800), 200 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
126 --outline-label: props.get(core.$transparent-colors, $theme, --900), 201
127
128 --hover: ( 202 --hover: (
129 --bg: props.get(core.$transparent-colors, $theme, --900), 203 --bg-color: props.get(core.$transparent-colors, $theme, --900),
130 --label: props.get(core.$transparent-colors, $theme, --text), 204 --label-color: props.get(core.$transparent-colors, $theme, --text),
205 --border-color: props.get(core.$transparent-colors, $theme, --100),
131 ), 206 ),
132 207
133 --active: ( 208 --active: (
134 --bg: props.get(core.$transparent-colors, $theme, --900), 209 --bg-color: props.get(core.$transparent-colors, $theme, --900),
135 --label: props.get(core.$transparent-colors, $theme, --text), 210 --label-color: props.get(core.$transparent-colors, $theme, --text),
211 --border-color: props.get(core.$transparent-colors, $theme, --100),
212 ),
213
214 --disabled: (
215 --bg-color: props.get(core.$transparent-colors, $theme, --200),
216 --label-color: props.get(core.$transparent-colors, $theme, --500),
217 --border-color: props.get(core.$transparent-colors, $theme, --100),
218 ),
219 ),
220
221 --badge: (
222 --bg-color: props.get(core.$transparent-colors, $theme, --200),
223 --label-color: props.get(core.$transparent-colors, $theme, --900),
224 --border-color: transparent,
225
226 --hover: (
227 --bg-color: props.get(core.$transparent-colors, $theme, --300),
228 --label-color: props.get(core.$transparent-colors, $theme, --900),
229 --border-color: transparent,
136 ), 230 ),
137 ) 231
232 --active: (
233 --bg-color: props.get(core.$transparent-colors, $theme, --400),
234 --label-color: props.get(core.$transparent-colors, $theme, --900),
235 --border-color: transparent,
236 ),
237 ),
238
239 --quiet: (
240 --label-color: props.get(core.$transparent-colors, $theme, --900),
241
242 --hover: (
243 --bg-color: props.get(core.$transparent-colors, $theme, --200),
244 --label-color: props.get(core.$transparent-colors, $theme, --900),
245 ),
246
247 --active: (
248 --bg-color: props.get(core.$transparent-colors, $theme, --300),
249 --label-color: props.get(core.$transparent-colors, $theme, --900),
250 ),
251
252 --disabled: (
253 --label-color: props.get(core.$transparent-colors, $theme, --500),
254 ),
255 ),
138 ) 256 )
139 )); 257 ));
140} 258}
141 259
142$themes-config: ( 260$themes-config: (
143 accent: --accent, 261 accent: --accent,
262 positive: --positive,
144 negative: --negative, 263 negative: --negative,
264 warning: --warning,
145) !default; 265) !default;
146 266
147$themes: props.def(--o-button, (), 'color');
148
149@each $theme, $key in $themes-config { 267@each $theme, $key in $themes-config {
150 $themes: props.merge($themes, ( 268 $themes: props.merge($themes, (
151 --#{$theme}: ( 269 --#{$theme}: (
152 --bg: props.get(core.$theme, #{$key}-static, --900), 270 --bg-color: props.get(core.$theme, $key, --100),
153 --label: props.get(core.$theme, #{$key}-static, --900-text), 271 --label-color: props.get(core.$theme, $key, --1100),
154 --outline-border: props.get(core.$theme, $key, --900), 272 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
155 --outline-label: props.get(core.$theme, $key, --1000), 273 --shadow-color: props.get(core.$theme, $key, --200),
156 274
157 --hover: ( 275 --hover: (
158 --bg: props.get(core.$theme, #{$key}-static, --1000), 276 --bg-color: props.get(core.$theme, $key, --200),
159 --label: props.get(core.$theme, #{$key}-static, --1000-text), 277 --label-color: props.get(core.$theme, $key, --1200),
278 --border-color: props.get(core.$theme, $key, --600),
160 ), 279 ),
161 280
162 --active: ( 281 --active: (
163 --bg: props.get(core.$theme, #{$key}-static, --1100), 282 --bg-color: props.get(core.$theme, $key, --300),
164 --label: props.get(core.$theme, #{$key}-static, --1100-text), 283 --label-color: props.get(core.$theme, $key, --1300),
284 --border-color: props.get(core.$theme, $key, --800),
285 ),
286
287 --disabled: (
288 --bg-color: props.get(core.$theme, --bg-l1),
289 --label-color: props.get(core.$theme, --border-strong),
290 --border-color: props.get(core.$theme, --border),
291 ),
292
293 --key-focus: (
294 --border-color: props.get(core.$theme, --focus, --border),
295 --outline-color: props.get(core.$theme, --focus, --outline),
296 ),
297
298 --selected: (
299 --bg-color: props.get(core.$theme, #{$key}-static, --900),
300 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
301 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
302
303 --hover: (
304 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
305 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
306 --border-color: props.get(core.$theme, #{$key}-static, --1000),
307 ),
308
309 --active: (
310 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
311 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
312 --border-color: props.get(core.$theme, #{$key}-static, --1100),
313 ),
314
315 --disabled: (
316 --bg-color: props.get(core.$theme, --border-mute),
317 --label-color: props.get(core.$theme, --border-strong),
318 --border-color: props.get(core.$theme, --border-mute),
319 ),
320 ),
321
322 --badge: (
323 --bg-color: props.get(core.$theme, $key, --100),
324 --label-color: props.get(core.$theme, $key, --1100),
325 --border-color: props.get(core.$theme, $key, --300),
326
327 --hover: (
328 --bg-color: props.get(core.$theme, $key, --200),
329 --label-color: props.get(core.$theme, $key, --1200),
330 --border-color: props.get(core.$theme, $key, --400),
331 ),
332
333 --active: (
334 --bg-color: props.get(core.$theme, $key, --300),
335 --label-color: props.get(core.$theme, $key, --1300),
336 --border-color: props.get(core.$theme, $key, --500),
337 ),
338 ),
339
340 --quiet: (
341 --label-color: props.get(core.$theme, $key, --1100),
342
343 --hover: (
344 --bg-color: props.get(core.$theme, $key, --200),
345 --label-color: props.get(core.$theme, $key, --1200),
346 ),
347
348 --active: (
349 --bg-color: props.get(core.$theme, $key, --300),
350 --label-color: props.get(core.$theme, $key, --1300),
351 ),
352
353 --disabled: (
354 --label-color: props.get(core.$theme, --border-strong),
355 ),
165 ), 356 ),
166 ) 357 )
167 )); 358 ));
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 4ed8092..9b58e77 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -91,6 +91,26 @@
91 } 91 }
92 } 92 }
93 93
94 @include bem.modifier('quiet') {
95 font-size: props.get(vars.$quiet--label-font-size);
96 font-weight: 500;
97 color: props.get(vars.$quiet--label-color);
98
99 &::before,
100 &::after {
101 block-size: props.get(vars.$quiet--border-width);
102 background-color: props.get(vars.$quiet--bg-color);
103 }
104
105 @include bem.modifier('vertical') {
106 background-color: props.get(vars.$vertical--quiet--bg-color);
107 }
108
109 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--quiet--bg-color);
111 }
112 }
113
94 @include bem.modifier('faint') { 114 @include bem.modifier('faint') {
95 font-size: props.get(vars.$faint--label-font-size); 115 font-size: props.get(vars.$faint--label-font-size);
96 font-weight: 500; 116 font-weight: 500;
@@ -103,11 +123,11 @@
103 } 123 }
104 124
105 @include bem.modifier('vertical') { 125 @include bem.modifier('vertical') {
106 background-color: props.get(vars.$vertical--faint--bg-color); 126 background-color: props.get(vars.$vertical--quiet--bg-color);
107 } 127 }
108 128
109 @include bem.modifier('dot') { 129 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--faint--bg-color); 130 background-color: props.get(vars.$dot--quiet--bg-color);
111 } 131 }
112 } 132 }
113 133
@@ -157,6 +177,17 @@
157 } 177 }
158 } 178 }
159 179
180 @include bem.modifier('quiet') {
181 &::before,
182 &::after {
183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
184 }
185
186 @include bem.elem('label') {
187 color: props.get(vars.$static-themes, $theme, --quiet, --label);
188 }
189 }
190
160 @include bem.modifier('faint') { 191 @include bem.modifier('faint') {
161 &::before, 192 &::before,
162 &::after { 193 &::after {
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 5cd68c1..5a5639b 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -13,6 +13,9 @@ $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.
13$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; 13$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
14$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; 14$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
15 15
16$quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default;
17$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default;
18
16$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; 19$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
17$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; 20$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
18 21
@@ -22,12 +25,15 @@ $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core
22$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; 25$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
23$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; 26$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
24 27
25$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; 28$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
26$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; 29$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
30
31$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
32$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
27 33
28$vertical--faint--bg-color: props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 34$vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
29 35
30$dot--faint--bg-color: props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 36$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
31 37
32$static-themes: props.def(--o-divider, (), 'color'); 38$static-themes: props.def(--o-divider, (), 'color');
33 39
@@ -44,10 +50,14 @@ $static-themes: props.def(--o-divider, (), 'color');
44 --bg: props.get(core.$transparent-colors, $theme, --300), 50 --bg: props.get(core.$transparent-colors, $theme, --300),
45 --label: props.get(core.$transparent-colors, $theme, --500), 51 --label: props.get(core.$transparent-colors, $theme, --500),
46 ), 52 ),
47 --faint: ( 53 --quiet: (
48 --bg: props.get(core.$transparent-colors, $theme, --300), 54 --bg: props.get(core.$transparent-colors, $theme, --300),
49 --label: props.get(core.$transparent-colors, $theme, --500), 55 --label: props.get(core.$transparent-colors, $theme, --500),
50 ), 56 ),
57 --faint: (
58 --bg: props.get(core.$transparent-colors, $theme, --200),
59 --label: props.get(core.$transparent-colors, $theme, --400),
60 ),
51 ) 61 )
52 )); 62 ));
53} 63}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-23 19:39:52 +0000