summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-23 08:34:23 +0200
committerVolpeon <git@volpeon.ink>2025-07-23 08:34:23 +0200
commit5c878876d3bdd2c7cd094871fa0644f3310bcec8 (patch)
tree0a41059f6983040f429d786ab0ad0dbf89764e96
parentFixed divider (diff)
downloadiro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.tar.gz
iro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.tar.bz2
iro-design-5c878876d3bdd2c7cd094871fa0644f3310bcec8.zip
Commit merge of button and badge into action-button (and rename it to button)
Diffstat
-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.scss226
-rw-r--r--src/objects/_button.vars.scss353
-rw-r--r--src_demo/index.scss2
-rw-r--r--tpl/index.pug6
-rw-r--r--tpl/objects/action-button.pug36
-rw-r--r--tpl/objects/badge.pug37
-rw-r--r--tpl/objects/button.pug56
-rw-r--r--tpl/objects/dialog.pug6
-rw-r--r--tpl/objects/icon-nav.pug8
-rw-r--r--tpl/objects/lightbox.pug6
-rw-r--r--tpl/objects/menu.pug2
-rw-r--r--tpl/objects/navbar.pug2
-rw-r--r--tpl/objects/side-nav.pug2
-rw-r--r--tpl/views/action-button.pug182
-rw-r--r--tpl/views/badge.pug69
-rw-r--r--tpl/views/button.pug203
-rw-r--r--tpl/views/card.pug8
-rw-r--r--tpl/views/dialog.pug4
-rw-r--r--tpl/views/emoji.pug8
-rw-r--r--tpl/views/form.pug2
-rw-r--r--tpl/views/menu.pug2
-rw-r--r--tpl/views/popover.pug2
-rw-r--r--tpl/views/text-field.pug6
29 files changed, 657 insertions, 1509 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..0467f24 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -5,72 +5,141 @@
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('static') {
51 color: props.get($theme, list.join($key, --disabled --label)...); 56 color: props.get($theme, list.join($key, --static --label-color)...);
52 background-color: props.get($theme, list.join($key, --disabled --bg)...); 57 background-color: props.get($theme, list.join($key, --static --bg-color)...);
53 border-color: transparent; 58 border-color: props.get($theme, list.join($key, --static --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, --static --label-color)...);
59 0 65 background-color: props.get($theme, list.join($key, --static --bg-color)...);
60 0 66 border-color: props.get($theme, list.join($key, --static --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, --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 }
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)...);
71 116
72 @include bem.modifier('primary') { 117 @include bem.modifier('static') {
73 @include -apply-theme($theme, list.join($key, --primary)); 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 }
74 } 143 }
75} 144}
76 145
@@ -82,11 +151,11 @@
82 display: inline-block; 151 display: inline-block;
83 padding-block: props.get(vars.$pad-b); 152 padding-block: props.get(vars.$pad-b);
84 padding-inline: props.get(vars.$pad-i); 153 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); 154 line-height: props.get(vars.$line-height);
88 text-align: center; 155 text-align: center;
89 text-decoration: none; 156 text-decoration: none;
157 text-overflow: ellipsis;
158 white-space: nowrap;
90 border: props.get(vars.$border-width) solid transparent; 159 border: props.get(vars.$border-width) solid transparent;
91 border-radius: props.get(vars.$rounding); 160 border-radius: props.get(vars.$rounding);
92 161
@@ -114,16 +183,30 @@
114 @include bem.elem('label') { 183 @include bem.elem('label') {
115 margin-inline: props.get(vars.$pad-i-label); 184 margin-inline: props.get(vars.$pad-i-label);
116 } 185 }
117 186
118 @include bem.modifier('block') { 187 @include -apply-theme(vars.$default-theme);
119 display: block; 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 }
120 } 193 }
121 194
122 @include bem.modifier('outline') { 195 @include bem.modifier('pill') {
123 background-color: transparent; 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;
124 } 207 }
125 208
126 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { 209 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
127 @include bem.modifier($mod) { 210 @include bem.modifier($mod) {
128 padding-block: props.get($pad-b); 211 padding-block: props.get($pad-b);
129 padding-inline: props.get($pad-i); 212 padding-inline: props.get($pad-i);
@@ -132,27 +215,42 @@
132 @include bem.elem('label') { 215 @include bem.elem('label') {
133 margin-inline: props.get($pad-i-label); 216 margin-inline: props.get($pad-i-label);
134 } 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 }
135 } 227 }
136 } 228 }
137 229
138 @include -apply-static-theme(vars.$default-theme); 230 @include bem.modifier('align-block') {
231 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
139 232
140 @each $theme in map.keys(props.get(vars.$themes)) { 233 @include bem.modifier('pill') {
141 @include bem.modifier(string.slice($theme, 3)) { 234 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
142 @include -apply-theme(vars.$themes, $theme);
143 } 235 }
144 }
145 236
146 @each $theme in map.keys(props.get(vars.$static-themes)) { 237 @include bem.modifier('icon') {
147 @include bem.modifier(string.slice($theme, 3)) { 238 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 } 239 }
150 } 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));
151 244
152 @include bem.modifier('round') { 245 @include bem.modifier('pill') {
153 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 246 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
154 padding-inline: 0; 247 }
155 border-radius: 100em; 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 }
156 } 254 }
157 } 255 }
158} 256}
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 4f7b552..1ab7e5a 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 --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 ),
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 --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,
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, --200),
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, --300),
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, --400),
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 --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 ),
165 ), 356 ),
166 ) 357 )
167 )); 358 ));
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 5251a05..5614bc4 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -23,11 +23,9 @@
23@include iro.l-split-view--styles; 23@include iro.l-split-view--styles;
24 24
25@include iro.o-icon--styles; 25@include iro.o-icon--styles;
26@include iro.o-action-button--styles;
27@include iro.o-alert--styles; 26@include iro.o-alert--styles;
28@include iro.o-avatar--styles; 27@include iro.o-avatar--styles;
29@include iro.o-backdrop--styles; 28@include iro.o-backdrop--styles;
30@include iro.o-badge--styles;
31@include iro.o-button--styles; 29@include iro.o-button--styles;
32@include iro.o-card--styles; 30@include iro.o-card--styles;
33@include iro.o-checkbox--styles; 31@include iro.o-checkbox--styles;
diff --git a/tpl/index.pug b/tpl/index.pug
index 7d73c75..0f1b5b0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -9,7 +9,6 @@ include layouts/container.pug
9include objects/palette.pug 9include objects/palette.pug
10include objects/heading.pug 10include objects/heading.pug
11include objects/divider.pug 11include objects/divider.pug
12include objects/badge.pug
13include objects/button.pug 12include objects/button.pug
14include objects/text-field.pug 13include objects/text-field.pug
15include objects/field-label.pug 14include objects/field-label.pug
@@ -17,7 +16,6 @@ include objects/radio.pug
17include objects/checkbox.pug 16include objects/checkbox.pug
18include objects/switch.pug 17include objects/switch.pug
19include objects/form.pug 18include objects/form.pug
20include objects/action-button.pug
21include objects/overflow-button.pug 19include objects/overflow-button.pug
22include objects/status-indicator.pug 20include objects/status-indicator.pug
23include objects/avatar.pug 21include objects/avatar.pug
@@ -62,7 +60,6 @@ include views/links.pug
62include views/code.pug 60include views/code.pug
63include views/blockquote.pug 61include views/blockquote.pug
64include views/list.pug 62include views/list.pug
65include views/badge.pug
66include views/button.pug 63include views/button.pug
67include views/text-field.pug 64include views/text-field.pug
68include views/field-label.pug 65include views/field-label.pug
@@ -70,7 +67,6 @@ include views/radio.pug
70include views/checkbox.pug 67include views/checkbox.pug
71include views/switch.pug 68include views/switch.pug
72include views/form.pug 69include views/form.pug
73include views/action-button.pug
74include views/overflow-button.pug 70include views/overflow-button.pug
75include views/status-indicator.pug 71include views/status-indicator.pug
76include views/avatar.pug 72include views/avatar.pug
@@ -110,7 +106,6 @@ html
110 +view-blockquote 106 +view-blockquote
111 +view-list 107 +view-list
112 +view-emoji 108 +view-emoji
113 +view-badge
114 +view-button 109 +view-button
115 +view-text-field 110 +view-text-field
116 +view-field-label 111 +view-field-label
@@ -118,7 +113,6 @@ html
118 +view-checkbox 113 +view-checkbox
119 +view-switch 114 +view-switch
120 +view-form 115 +view-form
121 +view-action-button
122 //+view-overflow-button 116 //+view-overflow-button
123 +view-status-indicator 117 +view-status-indicator
124 +view-avatar 118 +view-avatar
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
deleted file mode 100644
index 0e77e58..0000000
--- a/tpl/objects/action-button.pug
+++ /dev/null
@@ -1,36 +0,0 @@
1include icon.pug
2
3mixin action-button
4 -
5 let classes = {
6 'o-action-button': true,
7 'u-d-block': attributes.block,
8 'o-action-button--secondary': attributes.secondary,
9 'o-action-button--quiet': attributes.quiet,
10 'o-action-button--pill': attributes.pill,
11 'o-action-button--static': attributes.static,
12 'o-action-button--icon': !!attributes.icon && !block,
13 'is-selected': attributes.selected,
14 }
15 if (attributes.theme) {
16 classes['o-action-button--' + attributes.theme] = true
17 }
18 if (attributes.size) {
19 classes['o-action-button--' + attributes.size] = true
20 }
21 if (attributes.class) {
22 classes[attributes.class] = true;
23 }
24
25 let href = attributes.disabled ? null : '#';
26
27 a(class=classes href=href)
28 if attributes.icon
29 +icon(attributes.icon)
30 = ' '
31 if block
32 span.o-action-button__label
33 block
34 if attributes.postIcon
35 = ' '
36 +icon(attributes.postIcon)
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
deleted file mode 100644
index 48e4029..0000000
--- a/tpl/objects/badge.pug
+++ /dev/null
@@ -1,37 +0,0 @@
1mixin badge(variant)
2 -
3 let classes = {
4 'o-badge': true,
5 'o-badge--pill': !!attributes.pill,
6 'o-badge--quiet': !!attributes.quiet,
7 'o-menu__badge': !!attributes.menu,
8 }
9 if (attributes.size) {
10 classes['o-badge--' + attributes.size] = true
11 }
12 if (variant) {
13 classes['o-badge--' + variant] = true
14 }
15
16 if attributes.href
17 a(href=attributes.href class=classes)
18 if attributes.icon
19 +icon(attributes.icon)
20 = ' '
21 if block
22 span.o-badge__label
23 block
24 if attributes.postIcon
25 = ' '
26 +icon(attributes.postIcon)
27 else
28 span(class=classes)
29 if attributes.icon
30 +icon(attributes.icon)
31 = ' '
32 if block
33 span.o-badge__label
34 block
35 if attributes.postIcon
36 = ' '
37 +icon(attributes.postIcon)
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 0884c8d..b9b4cbd 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -1,28 +1,48 @@
1mixin a-button 1include icon.pug
2
3mixin button
2 - 4 -
3 let classes = { 5 let classes = {
4 'o-button': true, 6 'o-button': true,
5 'o-button--block': attributes.block, 7 'u-d-block': attributes.block,
6 'o-button--primary': attributes.primary, 8 'o-button--secondary': attributes.secondary,
7 'o-button--outline': attributes.outline, 9 'o-button--quiet': attributes.quiet,
8 'o-button--round': !!attributes.icon && !block 10 'o-button--pill': attributes.pill,
11 'o-button--static': attributes.static,
12 'o-button--icon': !!attributes.icon && !block,
13 'is-selected': attributes.selected,
9 } 14 }
10 if (attributes.variant) { 15 if (attributes.theme) {
11 classes['o-button--' + attributes.variant] = true 16 classes['o-button--' + attributes.theme] = true
12 } 17 }
13 if (attributes.size) { 18 if (attributes.size) {
14 classes['o-button--' + attributes.size] = true 19 classes['o-button--' + attributes.size] = true
15 } 20 }
21 if (attributes.class) {
22 classes[attributes.class] = true;
23 }
16 24
17 let href = attributes.disabled ? null : '#'; 25 let href = attributes.disabled ? null : '#';
18 26
19 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) 27 if attributes.badge
20 if attributes.icon 28 span(class=classes href=href)
21 +icon(attributes.icon) 29 if attributes.icon
22 = ' ' 30 +icon(attributes.icon)
23 if block 31 = ' '
24 span.o-button__label 32 if block
25 block 33 span.o-button__label
26 if attributes.postIcon 34 block
27 = ' ' 35 if attributes.postIcon
28 +icon(attributes.postIcon) 36 = ' '
37 +icon(attributes.postIcon)
38 else
39 a(class=classes href=href)
40 if attributes.icon
41 +icon(attributes.icon)
42 = ' '
43 if block
44 span.o-button__label
45 block
46 if attributes.postIcon
47 = ' '
48 +icon(attributes.postIcon)
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 3ceae69..1a2f061 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -54,13 +54,13 @@ mixin dialog(title)
54 else 54 else
55 if title 55 if title
56 +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title 56 +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title
57 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') 57 +button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')
58 58
59 section(class=bodyClass) 59 section(class=bodyClass)
60 if slots.body 60 if slots.body
61 - slots.body() 61 - slots.body()
62 62
63 footer.o-dialog__footer.l-button-group 63 footer.o-dialog__footer.l-button-group
64 +a-button(outline=true)= 'Cancel' 64 +button(outline=true)= 'Cancel'
65 = ' ' 65 = ' '
66 +a-button(variant='accent')= 'Continue' 66 +button(variant='accent')= 'Continue'
diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug
index f1c7d8a..afdf2db 100644
--- a/tpl/objects/icon-nav.pug
+++ b/tpl/objects/icon-nav.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin icon-nav 5mixin icon-nav
6 - 6 -
@@ -19,9 +19,9 @@ mixin icon-nav-item(icon)
19 - 19 -
20 let classes = { 20 let classes = {
21 'o-icon-nav__item': true, 21 'o-icon-nav__item': true,
22 'o-action-button': true, 22 'o-button': true,
23 'o-action-button--round': true, 23 'o-button--round': true,
24 'o-action-button--quiet': true, 24 'o-button--quiet': true,
25 'is-selected': attributes.selected, 25 'is-selected': attributes.selected,
26 } 26 }
27 if (attributes.class) { 27 if (attributes.class) {
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 842d44a..2d520b5 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -23,14 +23,14 @@ mixin lightbox(images)
23 header.o-lightbox__header 23 header.o-lightbox__header
24 div(class=linksClasses) 24 div(class=linksClasses)
25 block 25 block
26 +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') 26 +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
27 27
28 each img, i in images 28 each img, i in images
29 img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) 29 img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
30 30
31 if images.length > 1 31 if images.length > 1
32 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 32 +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
33 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 33 +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
34 34
35 .o-lightbox__thumbnails 35 .o-lightbox__thumbnails
36 each img, i in images 36 each img, i in images
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 578f9bc..802f9bd 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin menu 5mixin menu
6 - 6 -
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
index 5c7642c..14ec9d3 100644
--- a/tpl/objects/navbar.pug
+++ b/tpl/objects/navbar.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin navbar 5mixin navbar
6 - 6 -
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
index ccd24e4..2dcbd84 100644
--- a/tpl/objects/side-nav.pug
+++ b/tpl/objects/side-nav.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin side-nav 5mixin side-nav
6 - 6 -
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
deleted file mode 100644
index 4d2ffb6..0000000
--- a/tpl/views/action-button.pug
+++ /dev/null
@@ -1,182 +0,0 @@
1mixin view-action-button
2 +view('action-button', 'Action button')
3 .c-box
4 +action-button(size='sm')= 'Idle'
5 = ' '
6 +action-button= 'Idle'
7 = ' '
8 +action-button(size='lg')= 'Idle'
9 = ' '
10 +action-button(size='xl')= 'Idle'
11 br
12 br
13 +action-button(icon='trash' size='sm')
14 = ' '
15 +action-button(icon='trash')
16 = ' '
17 +action-button(icon='trash' size='lg')
18 = ' '
19 +action-button(icon='trash' size='xl')
20 br
21 br
22 +action-button(icon='user' size='sm')= 'Idle'
23 = ' '
24 +action-button(icon='user')= 'Idle'
25 = ' '
26 +action-button(icon='user' size='lg')= 'Idle'
27 = ' '
28 +action-button(icon='user' size='xl')= 'Idle'
29
30 .c-box
31 +action-button(pill=true size='sm')= 'Idle'
32 = ' '
33 +action-button(pill=true)= 'Idle'
34 = ' '
35 +action-button(pill=true size='lg')= 'Idle'
36 = ' '
37 +action-button(pill=true size='xl')= 'Idle'
38 br
39 br
40 +action-button(pill=true icon='trash' size='sm')
41 = ' '
42 +action-button(pill=true icon='trash')
43 = ' '
44 +action-button(pill=true icon='trash' size='lg')
45 = ' '
46 +action-button(pill=true icon='trash' size='xl')
47 br
48 br
49 +action-button(pill=true icon='user' size='sm')= 'Idle'
50 = ' '
51 +action-button(pill=true icon='user')= 'Idle'
52 = ' '
53 +action-button(pill=true icon='user' size='lg')= 'Idle'
54 = ' '
55 +action-button(pill=true icon='user' size='xl')= 'Idle'
56
57 .c-box
58 +action-button= 'Label'
59 = ' '
60 +action-button(icon='trash')= 'Label'
61 = ' '
62 +action-button(icon='trash')
63 br
64 br
65 +action-button(quiet=true)= 'Label'
66 = ' '
67 +action-button(quiet=true icon='trash')= 'Label'
68 = ' '
69 +action-button(quiet=true icon='trash')
70
71 .c-box
72 +action-button= 'Idle'
73 = ' '
74 +action-button(selected=true)= 'Selected'
75 = ' '
76 +action-button(disabled=true)= 'Disabled'
77 = ' '
78 +action-button(selected=true disabled=true)= 'Selected + disabled'
79 br
80 br
81 +action-button(static=true )= 'Idle'
82 = ' '
83 +action-button(static=true selected=true)= 'Selected'
84 = ' '
85 +action-button(static=true disabled=true)= 'Disabled'
86 = ' '
87 +action-button(static=true selected=true disabled=true)= 'Selected + disabled'
88 br
89 br
90 +action-button(quiet=true )= 'Idle'
91 = ' '
92 +action-button(quiet=true selected=true)= 'Selected'
93 = ' '
94 +action-button(quiet=true disabled=true)= 'Disabled'
95 = ' '
96 +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
97
98 .c-box
99 +action-button(pill=true)= 'Idle'
100 = ' '
101 +action-button(pill=true selected=true)= 'Selected'
102 = ' '
103 +action-button(pill=true disabled=true)= 'Disabled'
104 = ' '
105 +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
106 br
107 br
108 +action-button(pill=true static=true)= 'Idle'
109 = ' '
110 +action-button(pill=true static=true selected=true)= 'Selected'
111 = ' '
112 +action-button(pill=true static=true disabled=true)= 'Disabled'
113 = ' '
114 +action-button(pill=true static=true selected=true disabled=true)= 'Selected + disabled'
115 br
116 br
117 +action-button(pill=true quiet=true)= 'Idle'
118 = ' '
119 +action-button(pill=true quiet=true selected=true)= 'Selected'
120 = ' '
121 +action-button(pill=true quiet=true disabled=true)= 'Disabled'
122 = ' '
123 +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
124
125 each theme, i in ['accent', 'positive', 'negative', 'warning']
126 .c-box
127 +action-button(theme=theme)= 'Idle'
128 = ' '
129 +action-button(theme=theme selected=true)= 'Selected'
130 = ' '
131 +action-button(theme=theme disabled=true)= 'Disabled'
132 = ' '
133 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
134 br
135 br
136 +action-button(theme=theme static=true)= 'Idle'
137 = ' '
138 +action-button(theme=theme static=true selected=true)= 'Selected'
139 = ' '
140 +action-button(theme=theme static=true disabled=true)= 'Disabled'
141 = ' '
142 +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
143 br
144 br
145 +action-button(theme=theme quiet=true)= 'Idle'
146 = ' '
147 +action-button(theme=theme quiet=true selected=true)= 'Selected'
148 = ' '
149 +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
150 = ' '
151 +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
152
153 each theme in ['static-black', 'static-white']
154 -
155 const bg = theme.startsWith('static-black') ? 500 : 1000;
156
157 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
158 +action-button(theme=theme)= 'Idle'
159 = ' '
160 +action-button(theme=theme selected=true)= 'Selected'
161 = ' '
162 +action-button(theme=theme disabled=true)= 'Disabled'
163 = ' '
164 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
165 br
166 br
167 +action-button(theme=theme static=true)= 'Idle'
168 = ' '
169 +action-button(theme=theme static=true selected=true)= 'Selected'
170 = ' '
171 +action-button(theme=theme static=true disabled=true)= 'Disabled'
172 = ' '
173 +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
174 br
175 br
176 +action-button(theme=theme quiet=true)= 'Idle'
177 = ' '
178 +action-button(theme=theme quiet=true selected=true)= 'Selected'
179 = ' '
180 +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
181 = ' '
182 +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
deleted file mode 100644
index cc1f346..0000000
--- a/tpl/views/badge.pug
+++ /dev/null
@@ -1,69 +0,0 @@
1mixin view-badge
2 +view('badge', 'Badge')
3 .c-box
4 +badge(size='sm' href='#')= '50'
5 = ' '
6 +badge(href='#')= '100'
7 = ' '
8 +badge(size='lg' href='#')= '200'
9 = ' '
10 +badge(size='xl' href='#')= '300'
11
12 .c-box
13 +badge(pill=true size='sm' href='#')= '50'
14 = ' '
15 +badge(pill=true href='#')= '100'
16 = ' '
17 +badge(pill=true size='lg' href='#')= '200'
18 = ' '
19 +badge(pill=true size='xl' href='#')= '300'
20
21 .c-box
22 +badge(icon='image' size='sm' href='#')= '50'
23 = ' '
24 +badge(icon='image' href='#')= '100'
25 = ' '
26 +badge(icon='image' size='lg' href='#')= '200'
27 = ' '
28 +badge(icon='image' size='xl' href='#')= '300'
29
30 .c-box
31 +badge(pill=true icon='image' size='sm' href='#')= '50'
32 = ' '
33 +badge(pill=true icon='image' href='#')= '100'
34 = ' '
35 +badge(pill=true icon='image' size='lg' href='#')= '200'
36 = ' '
37 +badge(pill=true icon='image' size='xl' href='#')= '300'
38
39 .c-box
40 +badge(href='#')= '100'
41 = ' '
42 +badge(quiet=true href='#')= '100'
43 = ' '
44 +badge(pill=true href='#')= '100'
45 = ' '
46 +badge(quiet=true pill=true href='#')= '100'
47
48 each theme in ['accent', 'positive', 'negative', 'warning']
49 .c-box
50 +badge(theme)(href='#')= 'new'
51 = ' '
52 +badge(theme)(quiet=true href='#')= 'new'
53 = ' '
54 +badge(theme)(pill=true href='#')= 'new'
55 = ' '
56 +badge(theme)(quiet=true pill=true href='#')= 'new'
57
58 each theme in ['static-black', 'static-white']
59 -
60 const bg = theme.startsWith('static-black') ? 500 : 1000;
61
62 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
63 +badge(theme)(href='#')= 'new'
64 = ' '
65 +badge(theme)(quiet=true href='#')= 'new'
66 = ' '
67 +badge(theme)(pill=true href='#')= 'new'
68 = ' '
69 +badge(theme)(quiet=true pill=true href='#')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index da7531b..7e03e04 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,89 +1,182 @@
1mixin view-button 1mixin view-button
2 +view('button', 'Button') 2 +view('button', 'Button')
3 .c-box 3 .c-box
4 +a-button(size='sm')= 'Button' 4 +button(size='sm')= 'Idle'
5 = ' ' 5 = ' '
6 +a-button= 'Button' 6 +button= 'Idle'
7 = ' ' 7 = ' '
8 +a-button(size='lg')= 'Button' 8 +button(size='lg')= 'Idle'
9 = ' ' 9 = ' '
10 +a-button(size='xl')= 'Button' 10 +button(size='xl')= 'Idle'
11 br
12 br
13 +button(icon='trash' size='sm')
14 = ' '
15 +button(icon='trash')
16 = ' '
17 +button(icon='trash' size='lg')
18 = ' '
19 +button(icon='trash' size='xl')
20 br
21 br
22 +button(icon='user' size='sm')= 'Idle'
23 = ' '
24 +button(icon='user')= 'Idle'
25 = ' '
26 +button(icon='user' size='lg')= 'Idle'
27 = ' '
28 +button(icon='user' size='xl')= 'Idle'
11 29
12 .c-box 30 .c-box
13 +a-button(size='sm' outline=true)= 'Button' 31 +button(pill=true size='sm')= 'Idle'
32 = ' '
33 +button(pill=true)= 'Idle'
14 = ' ' 34 = ' '
15 +a-button(outline=true)= 'Button' 35 +button(pill=true size='lg')= 'Idle'
36 = ' '
37 +button(pill=true size='xl')= 'Idle'
38 br
39 br
40 +button(pill=true icon='trash' size='sm')
16 = ' ' 41 = ' '
17 +a-button(size='lg' outline=true)= 'Button' 42 +button(pill=true icon='trash')
18 = ' ' 43 = ' '
19 +a-button(size='xl' outline=true)= 'Button' 44 +button(pill=true icon='trash' size='lg')
45 = ' '
46 +button(pill=true icon='trash' size='xl')
47 br
48 br
49 +button(pill=true icon='user' size='sm')= 'Idle'
50 = ' '
51 +button(pill=true icon='user')= 'Idle'
52 = ' '
53 +button(pill=true icon='user' size='lg')= 'Idle'
54 = ' '
55 +button(pill=true icon='user' size='xl')= 'Idle'
20 56
21 .c-box 57 .c-box
22 +a-button(postIcon='arrow-right' size='sm')= 'Button' 58 +button= 'Label'
23 = ' ' 59 = ' '
24 +a-button(postIcon='arrow-right')= 'Button' 60 +button(icon='trash')= 'Label'
25 = ' ' 61 = ' '
26 +a-button(postIcon='arrow-right' size='lg')= 'Button' 62 +button(icon='trash')
63 br
64 br
65 +button(quiet=true)= 'Label'
66 = ' '
67 +button(quiet=true icon='trash')= 'Label'
27 = ' ' 68 = ' '
28 +a-button(postIcon='arrow-right' size='xl')= 'Button' 69 +button(quiet=true icon='trash')
29 70
30 .c-box 71 .c-box
31 .l-button-group 72 +button= 'Idle'
32 +a-button= 'Button' 73 = ' '
33 +a-button(disabled=true)= 'Button' 74 +button(selected=true)= 'Selected'
34 +a-button(outline=true)= 'Button' 75 = ' '
35 +a-button(outline=true disabled=true)= 'Button' 76 +button(disabled=true)= 'Disabled'
77 = ' '
78 +button(selected=true disabled=true)= 'Selected + disabled'
36 br 79 br
37 br 80 br
38 .l-button-group 81 +button(static=true )= 'Idle'
39 +a-button(icon='trash') 82 = ' '
40 +a-button(disabled=true icon='trash') 83 +button(static=true selected=true)= 'Selected'
41 +a-button(outline=true icon='trash') 84 = ' '
42 +a-button(outline=true disabled=true icon='trash') 85 +button(static=true disabled=true)= 'Disabled'
86 = ' '
87 +button(static=true selected=true disabled=true)= 'Selected + disabled'
88 br
89 br
90 +button(quiet=true )= 'Idle'
91 = ' '
92 +button(quiet=true selected=true)= 'Selected'
93 = ' '
94 +button(quiet=true disabled=true)= 'Disabled'
95 = ' '
96 +button(quiet=true selected=true disabled=true)= 'Selected + disabled'
97
98 .c-box
99 +button(pill=true)= 'Idle'
100 = ' '
101 +button(pill=true selected=true)= 'Selected'
102 = ' '
103 +button(pill=true disabled=true)= 'Disabled'
104 = ' '
105 +button(pill=true selected=true disabled=true)= 'Selected + disabled'
106 br
107 br
108 +button(pill=true static=true)= 'Idle'
109 = ' '
110 +button(pill=true static=true selected=true)= 'Selected'
111 = ' '
112 +button(pill=true static=true disabled=true)= 'Disabled'
113 = ' '
114 +button(pill=true static=true selected=true disabled=true)= 'Selected + disabled'
115 br
116 br
117 +button(pill=true quiet=true)= 'Idle'
118 = ' '
119 +button(pill=true quiet=true selected=true)= 'Selected'
120 = ' '
121 +button(pill=true quiet=true disabled=true)= 'Disabled'
122 = ' '
123 +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
43 124
44 each theme in ['primary', 'accent', 'negative'] 125 each theme, i in ['accent', 'positive', 'negative', 'warning']
45 .c-box 126 .c-box
46 .l-button-group 127 +button(theme=theme)= 'Idle'
47 +a-button(variant=theme)= 'Button' 128 = ' '
48 +a-button(variant=theme disabled=true)= 'Button' 129 +button(theme=theme selected=true)= 'Selected'
49 +a-button(variant=theme outline=true)= 'Button' 130 = ' '
50 +a-button(variant=theme outline=true disabled=true)= 'Button' 131 +button(theme=theme disabled=true)= 'Disabled'
132 = ' '
133 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
134 br
51 br 135 br
136 +button(theme=theme static=true)= 'Idle'
137 = ' '
138 +button(theme=theme static=true selected=true)= 'Selected'
139 = ' '
140 +button(theme=theme static=true disabled=true)= 'Disabled'
141 = ' '
142 +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
52 br 143 br
53 .l-button-group 144 br
54 +a-button(variant=theme icon='trash') 145 +button(theme=theme quiet=true)= 'Idle'
55 +a-button(variant=theme disabled=true icon='trash') 146 = ' '
56 +a-button(variant=theme outline=true icon='trash') 147 +button(theme=theme quiet=true selected=true)= 'Selected'
57 +a-button(variant=theme outline=true disabled=true icon='trash') 148 = ' '
149 +button(theme=theme quiet=true disabled=true)= 'Disabled'
150 = ' '
151 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
58 152
59 each theme in ['static-black', 'static-white'] 153 each theme in ['static-black', 'static-white']
60 - 154 -
61 const bg = theme.startsWith('static-black') ? 500 : 1000; 155 const bg = theme.startsWith('static-black') ? 500 : 1000;
62 156
63 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 157 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
64 .l-button-group 158 +button(theme=theme)= 'Idle'
65 +a-button(variant=theme)= 'Button' 159 = ' '
66 +a-button(variant=theme disabled=true)= 'Button' 160 +button(theme=theme selected=true)= 'Selected'
67 +a-button(variant=theme outline=true)= 'Button' 161 = ' '
68 +a-button(variant=theme outline=true disabled=true)= 'Button' 162 +button(theme=theme disabled=true)= 'Disabled'
163 = ' '
164 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
69 br 165 br
70 br 166 br
71 .l-button-group 167 +button(theme=theme static=true)= 'Idle'
72 +a-button(variant=theme icon='trash') 168 = ' '
73 +a-button(variant=theme disabled=true icon='trash') 169 +button(theme=theme static=true selected=true)= 'Selected'
74 +a-button(variant=theme outline=true icon='trash') 170 = ' '
75 +a-button(variant=theme outline=true disabled=true icon='trash') 171 +button(theme=theme static=true disabled=true)= 'Disabled'
76 172 = ' '
77 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 173 +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
78 .l-button-group
79 +a-button(variant=theme primary=true)= 'Button'
80 +a-button(variant=theme primary=true disabled=true)= 'Button'
81 +a-button(variant=theme primary=true outline=true)= 'Button'
82 +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
83 br 174 br
84 br 175 br
85 .l-button-group 176 +button(theme=theme quiet=true)= 'Idle'
86 +a-button(variant=theme primary=true icon='trash') 177 = ' '
87 +a-button(variant=theme primary=true disabled=true icon='trash') 178 +button(theme=theme quiet=true selected=true)= 'Selected'
88 +a-button(variant=theme primary=true outline=true icon='trash') 179 = ' '
89 +a-button(variant=theme primary=true outline=true disabled=true icon='trash') 180 +button(theme=theme quiet=true disabled=true)= 'Disabled'
181 = ' '
182 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 9a35b37..f030abf 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -83,17 +83,17 @@ mixin view-card
83 +card-body 83 +card-body
84 .l-media 84 .l-media
85 .l-media__block 85 .l-media__block
86 +badge('positive')(quiet=true icon='repeat' href='#') 86 +button(theme='positive' static=true pill=true size='sm' icon='repeat' href='#')
87 strong= '12' 87 strong= '12'
88 .l-media__block 88 .l-media__block
89 +badge('warning')(quiet=true icon='star' href='#') 89 +button(theme='warning' static=true pill=true size='sm' icon='star' href='#')
90 strong= '34' 90 strong= '34'
91 .l-media__block.u-mis-auto 91 .l-media__block.u-mis-auto
92 +a-button(primary=true)= 'Reply' 92 +button(selected=true)= 'Reply'
93 93
94 +card(quiet=true href='#' class='l-card-list__card') 94 +card(quiet=true href='#' class='l-card-list__card')
95 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 95 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
96 +badge= 'Drawings' 96 +button(badge=true static=true selected=true)= 'Drawings'
97 +card-body 97 +card-body
98 +card-title= 'XS Heading' 98 +card-title= 'XS Heading'
99 +card-content 99 +card-content
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 5a659dd..9c2e520 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -53,8 +53,8 @@ mixin view-dialog
53 +dialog 53 +dialog
54 +slot('header') 54 +slot('header')
55 .l-media__block.l-flex 55 .l-media__block.l-flex
56 +action-button(quiet=true icon='chevron-left') 56 +button(quiet=true icon='chevron-left')
57 +action-button(quiet=true icon='chevron-right') 57 +button(quiet=true icon='chevron-right')
58 .l-media__block.l-media__block--main 58 .l-media__block.l-media__block--main
59 +div-heading('xl')(class="u-mt-0")= 'Tags' 59 +div-heading('xl')(class="u-mt-0")= 'Tags'
60 +slot('sidebar') 60 +slot('sidebar')
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
index 3d01ca7..d6e2b56 100644
--- a/tpl/views/emoji.pug
+++ b/tpl/views/emoji.pug
@@ -1,14 +1,14 @@
1mixin view-emoji 1mixin view-emoji
2 +view('emoji', 'Emoji') 2 +view('emoji', 'Emoji')
3 .c-box 3 .c-box
4 +action-button(icon='trash') 4 +button(icon='trash')
5 = ' ' 5 = ' '
6 +action-button 6 +button
7 +emoji('drgn')(size='icon') 7 +emoji('drgn')(size='icon')
8 = ' ' 8 = ' '
9 +action-button(icon='trash' quiet=true) 9 +button(icon='trash' quiet=true)
10 = ' ' 10 = ' '
11 +action-button(quiet=true) 11 +button(quiet=true)
12 +emoji('drgn')(size='icon') 12 +emoji('drgn')(size='icon')
13 13
14 .c-box 14 .c-box
diff --git a/tpl/views/form.pug b/tpl/views/form.pug
index 5b24757..ca9e224 100644
--- a/tpl/views/form.pug
+++ b/tpl/views/form.pug
@@ -27,4 +27,4 @@ mixin view-form
27 +checkbox= 'I\'ve read and accept the terms and conditions' 27 +checkbox= 'I\'ve read and accept the terms and conditions'
28 28
29 +form-item('') 29 +form-item('')
30 +a-button(variant='primary')= 'Register' 30 +button(variant='primary')= 'Register'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 7c5df03..682f8bb 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -2,7 +2,7 @@ mixin view-menu
2 +view('menu', 'Menu') 2 +view('menu', 'Menu')
3 .c-box 3 .c-box
4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) 4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
5 +action-button(quiet=true selected=true)= 'Menu' 5 +button(quiet=true selected=true)= 'Menu'
6 +popover 6 +popover
7 +menu 7 +menu
8 +menu-slot(class='l-media') 8 +menu-slot(class='l-media')
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug
index b269596..bd78471 100644
--- a/tpl/views/popover.pug
+++ b/tpl/views/popover.pug
@@ -1,6 +1,6 @@
1mixin view-popover 1mixin view-popover
2 +view('popover', 'Popover') 2 +view('popover', 'Popover')
3 .c-box 3 .c-box
4 +action-button(quiet=true selected=true)= 'Popover' 4 +button(quiet=true selected=true)= 'Popover'
5 +popover 5 +popover
6 = loremIpsum 6 = loremIpsum
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 165e2ce..4309ff6 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -16,8 +16,8 @@ mixin view-text-field
16 div 16 div
17 +text-field(placeholder='Just landed in L.A.' class="u-p-50") 17 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
18 +slot('pre') 18 +slot('pre')
19 +action-button(quiet=true class='l-media__block')= 'Volpeon' 19 +button(quiet=true class='l-media__block')= 'Volpeon'
20 +divider('vertical')(class='u-mis-50') 20 +divider('vertical')(class='u-mis-50')
21 +slot('post') 21 +slot('post')
22 +action-button(quiet=true icon='smile' class='l-media__block') 22 +button(quiet=true icon='smile' class='l-media__block')
23 +action-button(quiet=true icon='send' class='l-media__block') 23 +button(quiet=true icon='send' class='l-media__block')
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-25 14:12:32 +0000