summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_config.defaults.scss8
-rw-r--r--src/_core.vars.scss6
-rw-r--r--src/_iro-design.scss2
-rw-r--r--src/_utils.scss4
-rw-r--r--src/layouts/_button-group.scss16
-rw-r--r--src/layouts/_card-list.scss62
-rw-r--r--src/layouts/_card-list.vars.scss23
-rw-r--r--src/objects/_action-button.scss256
-rw-r--r--src/objects/_action-button.vars.scss305
-rw-r--r--src/objects/_badge.scss144
-rw-r--r--src/objects/_badge.vars.scss161
-rw-r--r--src/objects/_button.scss222
-rw-r--r--src/objects/_button.vars.scss353
-rw-r--r--src/objects/_card.scss46
-rw-r--r--src/objects/_card.vars.scss8
-rw-r--r--src/objects/_checkbox.vars.scss2
-rw-r--r--src/objects/_divider.scss35
-rw-r--r--src/objects/_divider.vars.scss20
-rw-r--r--src/objects/_emoji.vars.scss2
-rw-r--r--src/objects/_popover.vars.scss9
-rw-r--r--src/objects/_radio.vars.scss2
-rw-r--r--src/objects/_side-nav.vars.scss2
-rw-r--r--src/objects/_switch.vars.scss2
-rw-r--r--src/objects/_tabbar.vars.scss2
-rw-r--r--src/objects/_table.vars.scss2
-rw-r--r--src/objects/_thumbnail.vars.scss2
-rw-r--r--src/scopes/_code.vars.scss4
-rw-r--r--src/scopes/_links.vars.scss2
28 files changed, 630 insertions, 1072 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index c328355..799ee47 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -126,7 +126,8 @@ $theme-light: (
126 --bg-base: --base --200, 126 --bg-base: --base --200,
127 127
128 --box: ( 128 --box: (
129 --border: --base --200, 129 --border: --base --200,
130 --border-strong: --base --300,
130 ), 131 ),
131 )), 132 )),
132 133
@@ -185,11 +186,12 @@ $theme-dark: (
185 --bg-l2: --base --100, 186 --bg-l2: --base --100,
186 187
187 --box: ( 188 --box: (
188 --border: --base --75, 189 --border: --base --100,
190 --border-strong: --base --100,
189 ), 191 ),
190 )), 192 )),
191 193
192 --constants: ( 194 --constants: (
193 --shadow: rgba(#000, .1), 195 --shadow: rgba(#000, .35),
194 ), 196 ),
195); 197);
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 7c546d7..19ebce2 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -95,9 +95,9 @@ $shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default;
95$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default; 95$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default;
96 96
97$shadow--l2--x: props.def(--shadow--l2--x, 0) !default; 97$shadow--l2--x: props.def(--shadow--l2--x, 0) !default;
98$shadow--l2--y: props.def(--shadow--l2--y, 4px) !default; 98$shadow--l2--y: props.def(--shadow--l2--y, 5px) !default;
99$shadow--l2--blur: props.def(--shadow--l2--blur, 8px) !default; 99$shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default;
100$shadow--l2--grow: props.def(--shadow--l2--grow, -3px) !default; 100$shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default;
101 101
102$rounding: props.def(--rounding, 8px) !default; 102$rounding: props.def(--rounding, 8px) !default;
103$rounding--sm: props.def(--rounding--sm, 4px) !default; 103$rounding--sm: props.def(--rounding--sm, 4px) !default;
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/_utils.scss b/src/_utils.scss
index 445e5c6..1311d32 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -271,6 +271,10 @@ $-sizes: (
271 border-radius: props.get(vars.$rounding); 271 border-radius: props.get(vars.$rounding);
272 } 272 }
273 273
274 @include bem.utility('br-round-sm') {
275 border-radius: props.get(vars.$rounding--sm);
276 }
277
274 @each $dir, $suffix in $-dirs { 278 @each $dir, $suffix in $-dirs {
275 @include bem.utility('m#{$dir}-auto') { 279 @include bem.utility('m#{$dir}-auto') {
276 margin#{$suffix}: auto; 280 margin#{$suffix}: auto;
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/layouts/_card-list.scss b/src/layouts/_card-list.scss
index a1655be..cca6e72 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -6,7 +6,6 @@
6 6
7@forward 'card-list.vars'; 7@forward 'card-list.vars';
8@use 'card-list.vars' as vars; 8@use 'card-list.vars' as vars;
9@use '../objects/card.vars' as card;
10 9
11@mixin styles { 10@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
@@ -17,22 +16,33 @@
17 gap: props.get(vars.$row-gap); 16 gap: props.get(vars.$row-gap);
18 17
19 @include bem.modifier('merge') { 18 @include bem.modifier('merge') {
20 position: relative; 19 position: relative;
21 gap: 0; 20 gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
21 padding: props.get(vars.$merge-padding);
22 background-color: props.get(vars.$card-bg-color);
23 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
24 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
22 25
23 @include bem.elem('card') { 26 @include bem.elem('card') {
24 transition: none;
25
26 &:not(:last-child) { 27 &:not(:last-child) {
27 margin-bottom: calc(-1 * props.get(card.$border-width)); 28 position: relative;
28 border-end-start-radius: 0; 29 border-end-start-radius: 0;
29 border-end-end-radius: 0; 30 border-end-end-radius: 0;
31
32 &::after {
33 position: absolute;
34 inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
35 inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
36 content: '';
37 display: block;
38 block-size: props.get(vars.$border-width);
39 background-color: props.get(vars.$border-color);
40 }
30 } 41 }
31 42
32 &:hover, 43 &:hover,
33 &:active, 44 &:active,
34 &:focus-visible { 45 &:focus-visible {
35 z-index: 10;
36 transform: none; 46 transform: none;
37 } 47 }
38 48
@@ -41,6 +51,27 @@
41 border-start-end-radius: 0; 51 border-start-end-radius: 0;
42 } 52 }
43 } 53 }
54
55 @include bem.modifier('borderless') {
56 border-color: props.get(vars.$card-bg-color);
57
58 @include bem.elem('card') {
59 &:not(:last-child) {
60 &::after {
61 inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
62 }
63 }
64 }
65 }
66
67 @include bem.modifier('shadow') {
68 box-shadow:
69 props.get(vars.$shadow-x)
70 props.get(vars.$shadow-y)
71 props.get(vars.$shadow-blur)
72 props.get(vars.$shadow-grow)
73 props.get(vars.$shadow-color);
74 }
44 } 75 }
45 76
46 @include bem.modifier('quiet') { 77 @include bem.modifier('quiet') {
@@ -57,6 +88,23 @@
57 } 88 }
58 } 89 }
59 90
91 @include bem.modifier('grid-sm') {
92 display: grid;
93 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
94 gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
95
96 @include bem.modifier("grid-sm") {
97 @include media.media("<=md") {
98 display: flex;
99 gap: props.get(vars.$row-gap);
100 }
101 }
102
103 @include bem.modifier('quiet') {
104 row-gap: props.get(vars.$grid-sm--quiet--row-gap);
105 }
106 }
107
60 @include bem.modifier('masonry') { 108 @include bem.modifier('masonry') {
61 display: block; 109 display: block;
62 columns: auto props.get(vars.$masonry--col-width); 110 columns: auto props.get(vars.$masonry--col-width);
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index b489596..75e72cc 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,7 +1,12 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3@use '../objects/card' as card;
3 4
4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--50)) !default; 5$border-width: props.def(--l-card-list--border-width, props.get(card.$border-width)) !default;
6$merge-padding: props.def(--l-card-list--merge-padding, props.get(core.$border-width--thick)) !default;
7$rounding: props.def(--l-card-list--rounding, props.get(card.$rounding)) !default;
8
9$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
5$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; 10$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
6 11
7$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default; 12$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
@@ -9,6 +14,11 @@ $grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$s
9$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; 14$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
10$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default; 15$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
11 16
17$grid-sm--row-gap: props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--200)) !default;
18$grid-sm--col-gap: props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--200)) !default;
19$grid-sm--col-width: props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default;
20$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
21
12$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default; 22$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
13$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; 23$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
14$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default; 24$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
@@ -19,4 +29,13 @@ $masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.g
19$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; 29$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
20$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; 30$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
21 31
22$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default; 32$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
33$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
34$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
35$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
36
37$card-bg-color: props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default;
38$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
39$shadow-color: props.def(--l-card-list--shadow-color, props.get(card.$shadow-color), 'color') !default;
40
41$border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --bg-l1), 'dark') !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
deleted file mode 100644
index f4a9a46..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, --quiet --hover --label-color)...);
57 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
58 border-color: transparent;
59 box-shadow: none;
60
61 &:link,
62 &:visited,
63 &:enabled {
64 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
65 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
66 border-color: transparent;
67 box-shadow: none;
68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
72 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
73 border-color: transparent;
74 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
79 border-color: transparent;
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 72dc4a1..0000000
--- a/src/objects/_action-button.vars.scss
+++ /dev/null
@@ -1,305 +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--10)) !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, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border),
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 --quiet: (
106 --label-color: props.get(core.$theme, --text),
107
108 --hover: (
109 --bg-color: props.get(core.$theme, --border-mute),
110 --label-color: props.get(core.$theme, --heading),
111 ),
112
113 --active: (
114 --bg-color: props.get(core.$theme, --border),
115 --label-color: props.get(core.$theme, --heading),
116 ),
117
118 --disabled: (
119 --label-color: props.get(core.$theme, --border-strong),
120 ),
121 ),
122), $default-theme-override) !default;
123$default-theme: props.def(--o-action-button, $default-theme, 'color');
124
125$default-theme-dark-override: () !default;
126$default-theme-dark: map.deep-merge((
127 --bg-color: props.get(core.$theme, --border-mute),
128 --border-color: props.get(core.$theme, --border-mute),
129
130 --hover: (
131 --bg-color: props.get(core.$theme, --border),
132 --border-color: props.get(core.$theme, --border),
133 ),
134
135 --active: (
136 --bg-color: props.get(core.$theme, --border-strong),
137 --border-color: props.get(core.$theme, --border-strong),
138 ),
139
140 --selected: (
141 --border-color: props.get(core.$theme, --text),
142 ),
143), $default-theme-override) !default;
144$default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark');
145
146@each $theme in map.keys(props.get(core.$transparent-colors)) {
147 $button-theme: --static-#{string.slice($theme, 3)};
148
149 $themes: props.merge($themes, (
150 $button-theme: (
151 --bg-color: props.get(core.$transparent-colors, $theme, --200),
152 --label-color: props.get(core.$transparent-colors, $theme, --900),
153 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
154 --shadow-color: props.get(core.$transparent-colors, --black, --200),
155
156 --hover: (
157 --bg-color: props.get(core.$transparent-colors, $theme, --300),
158 --label-color: props.get(core.$transparent-colors, $theme, --900),
159 --border-color: props.get(core.$transparent-colors, $theme, --400),
160 ),
161
162 --active: (
163 --bg-color: props.get(core.$transparent-colors, $theme, --400),
164 --label-color: props.get(core.$transparent-colors, $theme, --900),
165 --border-color: props.get(core.$transparent-colors, $theme, --500),
166 ),
167
168 --disabled: (
169 --bg-color: props.get(core.$transparent-colors, $theme, --100),
170 --label-color: props.get(core.$transparent-colors, $theme, --500),
171 --border-color: props.get(core.$transparent-colors, $theme, --300),
172 ),
173
174 --key-focus: (
175 --border-color: props.get(core.$transparent-colors, $theme, --900),
176 --outline-color: props.get(core.$transparent-colors, $theme, --300),
177 ),
178
179 --selected: (
180 --bg-color: props.get(core.$transparent-colors, $theme, --800),
181 --label-color: props.get(core.$transparent-colors, $theme, --text),
182 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
183
184 --hover: (
185 --bg-color: props.get(core.$transparent-colors, $theme, --900),
186 --label-color: props.get(core.$transparent-colors, $theme, --text),
187 --border-color: props.get(core.$transparent-colors, $theme, --100),
188 ),
189
190 --active: (
191 --bg-color: props.get(core.$transparent-colors, $theme, --900),
192 --label-color: props.get(core.$transparent-colors, $theme, --text),
193 --border-color: props.get(core.$transparent-colors, $theme, --100),
194 ),
195
196 --disabled: (
197 --bg-color: props.get(core.$transparent-colors, $theme, --200),
198 --label-color: props.get(core.$transparent-colors, $theme, --500),
199 --border-color: props.get(core.$transparent-colors, $theme, --100),
200 ),
201 ),
202
203 --quiet: (
204 --label-color: props.get(core.$transparent-colors, $theme, --900),
205
206 --hover: (
207 --bg-color: props.get(core.$transparent-colors, $theme, --200),
208 --label-color: props.get(core.$transparent-colors, $theme, --900),
209 ),
210
211 --active: (
212 --bg-color: props.get(core.$transparent-colors, $theme, --300),
213 --label-color: props.get(core.$transparent-colors, $theme, --900),
214 ),
215
216 --disabled: (
217 --label-color: props.get(core.$transparent-colors, $theme, --500),
218 ),
219 ),
220 )
221 ));
222}
223
224$themes-config: (
225 accent: --accent,
226 positive: --positive,
227 negative: --negative,
228 warning: --warning,
229) !default;
230
231@each $theme, $key in $themes-config {
232 $themes: props.merge($themes, (
233 --#{$theme}: (
234 --bg-color: props.get(core.$theme, $key, --200),
235 --label-color: props.get(core.$theme, $key, --1100),
236 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
237 --shadow-color: props.get(core.$theme, $key, --200),
238
239 --hover: (
240 --bg-color: props.get(core.$theme, $key, --300),
241 --label-color: props.get(core.$theme, $key, --1200),
242 --border-color: props.get(core.$theme, $key, --600),
243 ),
244
245 --active: (
246 --bg-color: props.get(core.$theme, $key, --400),
247 --label-color: props.get(core.$theme, $key, --1300),
248 --border-color: props.get(core.$theme, $key, --800),
249 ),
250
251 --disabled: (
252 --bg-color: props.get(core.$theme, --bg-l1),
253 --label-color: props.get(core.$theme, --border-strong),
254 --border-color: props.get(core.$theme, --border),
255 ),
256
257 --key-focus: (
258 --border-color: props.get(core.$theme, --focus, --border),
259 --outline-color: props.get(core.$theme, --focus, --outline),
260 ),
261
262 --selected: (
263 --bg-color: props.get(core.$theme, #{$key}-static, --900),
264 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
265 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
266
267 --hover: (
268 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
269 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
270 --border-color: props.get(core.$theme, #{$key}-static, --1000),
271 ),
272
273 --active: (
274 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
275 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
276 --border-color: props.get(core.$theme, #{$key}-static, --1100),
277 ),
278
279 --disabled: (
280 --bg-color: props.get(core.$theme, --border-mute),
281 --label-color: props.get(core.$theme, --border-strong),
282 --border-color: props.get(core.$theme, --border-mute),
283 ),
284 ),
285
286 --quiet: (
287 --label-color: props.get(core.$theme, $key, --1100),
288
289 --hover: (
290 --bg-color: props.get(core.$theme, $key, --200),
291 --label-color: props.get(core.$theme, $key, --1200),
292 ),
293
294 --active: (
295 --bg-color: props.get(core.$theme, $key, --300),
296 --label-color: props.get(core.$theme, $key, --1300),
297 ),
298
299 --disabled: (
300 --label-color: props.get(core.$theme, --border-strong),
301 ),
302 ),
303 )
304 ));
305}
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
deleted file mode 100644
index 9f3e307..0000000
--- a/src/objects/_badge.scss
+++ /dev/null
@@ -1,144 +0,0 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
4@use 'sass:string';
5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props';
7@use '../props' as *;
8@use '../core.vars' as core;
9
10@forward 'badge.vars';
11@use 'badge.vars' as vars;
12
13@mixin -apply-theme($theme, $key: (), $static: false) {
14 color: props.get($theme, list.join($key, --label)...);
15 background-color: props.get($theme, list.join($key, --bg)...);
16
17 &:link,
18 &:visited,
19 &:enabled {
20 &:hover,
21 &:focus-visible {
22 color: props.get($theme, list.join($key, --hover --label)...);
23 background-color: props.get($theme, list.join($key, --hover --bg)...);
24 }
25
26 &:active {
27 color: props.get($theme, list.join($key, --active --label)...);
28 background-color: props.get($theme, list.join($key, --active --bg)...);
29 }
30 }
31
32 @include bem.modifier('quiet') {
33 color: props.get($theme, list.join($key, --quiet --label)...);
34 background-color: props.get($theme, list.join($key, --quiet --bg)...);
35
36 &:link,
37 &:visited,
38 &:enabled {
39 &:hover,
40 &:focus-visible {
41 color: props.get($theme, list.join($key, --quiet --hover --label)...);
42 background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
43 }
44
45 &:active {
46 color: props.get($theme, list.join($key, --quiet --active --label)...);
47 background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
48 }
49 }
50 }
51
52 @if $static {
53 &::after {
54 outline-color: props.get($theme, list.join($key, --key-focus --border)...);
55 box-shadow:
56 0
57 0
58 0
59 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
60 props.get($theme, list.join($key, --key-focus --outline)...);
61 }
62 }
63}
64
65@mixin styles {
66 @include materialize-at-root(meta.module-variables('vars'));
67
68 @include bem.object('badge') {
69 position: relative;
70 display: inline-block;
71 padding-block: props.get(vars.$pad-b);
72 padding-inline: props.get(vars.$pad-i);
73 font-size: props.get(vars.$font-size);
74 line-height: props.get(core.$font--standard--line-height);
75 text-align: center;
76 text-decoration: none;
77 background-clip: padding-box;
78 border-radius: props.get(vars.$rounding);
79
80 &::after {
81 position: absolute;
82 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
83 z-index: 1;
84 display: none;
85 pointer-events: none;
86 content: '';
87 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
88 outline: transparent solid props.get(vars.$key-focus--border-width);
89 }
90
91 &:link,
92 &:visited,
93 &:enabled {
94 &:focus-visible {
95 &::after {
96 display: block;
97 }
98 }
99 }
100
101 @include bem.elem('label') {
102 margin-inline: props.get(vars.$pad-i-label);
103 }
104
105 @include -apply-theme(vars.$default-theme, $static: true);
106
107 @each $theme in map.keys(props.get(vars.$themes)) {
108 @include bem.modifier(string.slice($theme, 3)) {
109 @include -apply-theme(vars.$themes, $theme);
110 }
111 }
112
113 @each $theme in map.keys(props.get(vars.$static-themes)) {
114 @include bem.modifier(string.slice($theme, 3)) {
115 @include -apply-theme(vars.$static-themes, $theme, true);
116 }
117 }
118
119 @include bem.modifier('pill') {
120 padding-inline: props.get(vars.$pad-i-pill);
121 border-radius: 10em;
122
123 &::after {
124 border-radius: 10em;
125 }
126 }
127
128 @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
129 @include bem.modifier($mod) {
130 padding-block: props.get($pad-b);
131 padding-inline: props.get($pad-i);
132 font-size: props.get($font-size);
133
134 @include bem.elem('label') {
135 margin-inline: props.get($pad-i-label);
136 }
137
138 @include bem.modifier('pill') {
139 padding-inline: props.get($pad-i-pill);
140 }
141 }
142 }
143 }
144}
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
deleted file mode 100644
index ff07148..0000000
--- a/src/objects/_badge.vars.scss
+++ /dev/null
@@ -1,161 +0,0 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
7$pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
8$pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
9$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
10$rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
11$font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
12
13$pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
14$pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
15$pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
16$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
17$font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
18
19$pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
20$pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
21$pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
22$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
23$font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
24
25$pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
26$pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
27$pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
28$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
29$font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
30
31$key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
32$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
33$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
34
35$sizes: (
36 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
37 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
38 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
39) !default;
40
41$default-theme-override: () !default;
42$default-theme: props.def(--o-badge, (
43 --bg: props.get(core.$theme, --heading),
44 --label: props.get(core.$theme, --bg-l2),
45
46 --hover: (
47 --bg: props.get(core.$theme, --text),
48 --label: props.get(core.$theme, --bg-l2),
49 ),
50
51 --active: (
52 --bg: props.get(core.$theme, --text-mute),
53 --label: props.get(core.$theme, --bg-l2),
54 ),
55
56 --key-focus: (
57 --label: props.get(core.$theme, --focus, --text),
58 --border: props.get(core.$theme, --focus, --border),
59 --outline: props.get(core.$theme, --focus, --outline),
60 ),
61
62 --quiet: (
63 --bg: props.get(core.$theme, --border-mute),
64 --label: props.get(core.$theme, --heading),
65
66 --hover: (
67 --bg: props.get(core.$theme, --border),
68 --label: props.get(core.$theme, --heading),
69 ),
70
71 --active: (
72 --bg: props.get(core.$theme, --border-strong),
73 --label: props.get(core.$theme, --heading),
74 ),
75 )
76), 'color') !default;
77$default-theme: props.merge($default-theme, $default-theme-override);
78
79$static-themes: props.def(--o-badge, (), 'color');
80
81@each $theme in map.keys(props.get(core.$transparent-colors)) {
82 $badge-theme: --static-#{string.slice($theme, 3)};
83
84 $static-themes: props.merge($static-themes, (
85 $badge-theme: (
86 --bg: props.get(core.$transparent-colors, $theme, --800),
87 --label: props.get(core.$transparent-colors, $theme, --text),
88
89 --hover: (
90 --bg: props.get(core.$transparent-colors, $theme, --900),
91 --label: props.get(core.$transparent-colors, $theme, --text),
92 ),
93
94 --active: (
95 --bg: props.get(core.$transparent-colors, $theme, --900),
96 --label: props.get(core.$transparent-colors, $theme, --text),
97 ),
98
99 --key-focus: (
100 --bg: props.get(core.$transparent-colors, $theme, --100),
101 --label: props.get(core.$transparent-colors, $theme, --900),
102 --border: props.get(core.$transparent-colors, $theme, --900),
103 --outline: props.get(core.$transparent-colors, $theme, --300),
104 ),
105
106 --quiet: (
107 --bg: props.get(core.$transparent-colors, $theme, --200),
108 --label: props.get(core.$transparent-colors, $theme, --900),
109 --hover: (
110 --bg: props.get(core.$transparent-colors, $theme, --300),
111 --label: props.get(core.$transparent-colors, $theme, --900),
112 ),
113 --active: (
114 --bg: props.get(core.$transparent-colors, $theme, --400),
115 --label: props.get(core.$transparent-colors, $theme, --900),
116 ),
117 )
118 )
119 ));
120}
121
122$themes-config: (
123 accent: --accent,
124 positive: --positive,
125 negative: --negative,
126 warning: --warning,
127) !default;
128
129$themes: props.def(--o-badge, (), 'color');
130
131@each $theme, $key in $themes-config {
132 $themes: props.merge($themes, (
133 --#{$theme}: (
134 --bg: props.get(core.$theme, #{$key}-static, --900),
135 --label: props.get(core.$theme, #{$key}-static, --900-text),
136
137 --hover: (
138 --bg: props.get(core.$theme, #{$key}-static, --1000),
139 --label: props.get(core.$theme, #{$key}-static, --1000-text),
140 ),
141
142 --active: (
143 --bg: props.get(core.$theme, #{$key}-static, --1100),
144 --label: props.get(core.$theme, #{$key}-static, --1000-text),
145 ),
146
147 --quiet: (
148 --bg: props.get(core.$theme, $key, --200),
149 --label: props.get(core.$theme, $key, --1100),
150 --hover: (
151 --bg: props.get(core.$theme, $key, --300),
152 --label: props.get(core.$theme, $key, --1200),
153 ),
154 --active: (
155 --bg: props.get(core.$theme, $key, --400),
156 --label: props.get(core.$theme, $key, --1300),
157 ),
158 )
159 )
160 ));
161}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index aaf55b5..8fbec78 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -5,72 +5,137 @@
5@use 'iro-sass/src/bem'; 5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8@use '../core.vars' as core;
9 8
10@forward 'button.vars'; 9@forward 'button.vars';
11@use 'button.vars' as vars; 10@use 'button.vars' as vars;
12 11
13@mixin -apply-theme($theme, $key: ()) { 12@mixin -apply-theme($theme, $key: ()) {
14 &:link, 13 color: props.get($theme, list.join($key, --disabled --label-color)...);
15 &:visited, 14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
16 &:enabled { 15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
17 color: props.get($theme, list.join($key, --label)...); 16
18 background-color: props.get($theme, list.join($key, --bg)...); 17 &::after {
19 border-color: transparent; 18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
20 } 19 box-shadow:
21 20 0
22 @include bem.modifier('outline') { 21 0
23 &:link, 22 0
24 &:visited, 23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
25 &:enabled { 24 props.get($theme, list.join($key, --key-focus --outline-color)...);
26 color: props.get($theme, list.join($key, --outline-label)...);
27 background-color: transparent;
28 border-color: props.get($theme, list.join($key, --outline-border)...);
29 }
30 } 25 }
31 26
32 &:link, 27 &:link,
33 &:visited, 28 &:visited,
34 &:enabled { 29 &:enabled {
30 color: props.get($theme, list.join($key, --label-color)...);
31 background-color: props.get($theme, list.join($key, --bg-color)...);
32 border-color: props.get($theme, list.join($key, --border-color)...);
33 box-shadow:
34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...);
39
35 &:hover, 40 &:hover,
36 &:focus-visible { 41 &:focus-visible {
37 color: props.get($theme, list.join($key, --hover --label)...); 42 color: props.get($theme, list.join($key, --hover --label-color)...);
38 background-color: props.get($theme, list.join($key, --hover --bg)...); 43 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
39 border-color: transparent; 44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
40 } 45 }
41 46
42 &:active { 47 &:active {
43 color: props.get($theme, list.join($key, --active --label)...); 48 color: props.get($theme, list.join($key, --active --label-color)...);
44 background-color: props.get($theme, list.join($key, --active --bg)...); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
45 border-color: transparent; 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none;
46 } 52 }
47 } 53 }
48}
49 54
50@mixin -apply-static-theme($theme, $key: ()) { 55 @include bem.modifier('badge') {
51 color: props.get($theme, list.join($key, --disabled --label)...); 56 color: props.get($theme, list.join($key, --badge --label-color)...);
52 background-color: props.get($theme, list.join($key, --disabled --bg)...); 57 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
53 border-color: transparent; 58 border-color: props.get($theme, list.join($key, --badge --border-color)...);
59 box-shadow: none;
54 60
55 &::after { 61 &:link,
56 outline-color: props.get($theme, list.join($key, --key-focus --border)...); 62 &:visited,
57 box-shadow: 63 &:enabled {
58 0 64 color: props.get($theme, list.join($key, --badge --label-color)...);
59 0 65 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
60 0 66 border-color: props.get($theme, list.join($key, --badge --border-color)...);
61 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 67 box-shadow: none;
62 props.get($theme, list.join($key, --key-focus --outline)...); 68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --badge --hover --label-color)...);
72 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
73 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
74 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --badge --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...);
80 }
81 }
63 } 82 }
64 83
65 @include bem.modifier('outline') { 84 @include bem.modifier('quiet') {
85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
66 background-color: transparent; 86 background-color: transparent;
67 border-color: props.get($theme, list.join($key, --disabled --outline-border)...); 87 border-color: transparent;
88
89 &:link,
90 &:visited,
91 &:enabled {
92 color: props.get($theme, list.join($key, --quiet --label-color)...);
93 background-color: transparent;
94 border-color: transparent;
95 box-shadow: none;
96
97 &:hover,
98 &:focus-visible {
99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
101 border-color: transparent;
102 }
103
104 &:active {
105 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
107 border-color: transparent;
108 }
109 }
68 } 110 }
69 111
70 @include -apply-theme($theme, $key); 112 @include bem.is('selected') {
113 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
116
117 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
118 color: props.get($theme, list.join($key, --selected --label-color)...);
119 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
120 border-color: props.get($theme, list.join($key, --selected --border-color)...);
121 }
71 122
72 @include bem.modifier('primary') { 123 &:link,
73 @include -apply-theme($theme, list.join($key, --primary)); 124 &:visited,
125 &:enabled {
126 &:hover,
127 &:focus-visible {
128 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
129 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
130 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
131 }
132
133 &:active {
134 color: props.get($theme, list.join($key, --selected --active --label-color)...);
135 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
136 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
137 }
138 }
74 } 139 }
75} 140}
76 141
@@ -82,11 +147,11 @@
82 display: inline-block; 147 display: inline-block;
83 padding-block: props.get(vars.$pad-b); 148 padding-block: props.get(vars.$pad-b);
84 padding-inline: props.get(vars.$pad-i); 149 padding-inline: props.get(vars.$pad-i);
85 font-size: props.get(vars.$font-size);
86 font-weight: 500;
87 line-height: props.get(vars.$line-height); 150 line-height: props.get(vars.$line-height);
88 text-align: center; 151 text-align: center;
89 text-decoration: none; 152 text-decoration: none;
153 text-overflow: ellipsis;
154 white-space: nowrap;
90 border: props.get(vars.$border-width) solid transparent; 155 border: props.get(vars.$border-width) solid transparent;
91 border-radius: props.get(vars.$rounding); 156 border-radius: props.get(vars.$rounding);
92 157
@@ -114,16 +179,30 @@
114 @include bem.elem('label') { 179 @include bem.elem('label') {
115 margin-inline: props.get(vars.$pad-i-label); 180 margin-inline: props.get(vars.$pad-i-label);
116 } 181 }
117 182
118 @include bem.modifier('block') { 183 @include -apply-theme(vars.$default-theme);
119 display: block; 184
185 @each $theme in map.keys(props.get(vars.$themes)) {
186 @include bem.modifier(string.slice($theme, 3)) {
187 @include -apply-theme(vars.$themes, $theme);
188 }
120 } 189 }
121 190
122 @include bem.modifier('outline') { 191 @include bem.modifier('pill') {
123 background-color: transparent; 192 padding-inline: props.get(vars.$pad-i-pill);
193 border-radius: 100em;
194
195 &::after {
196 border-radius: 100em;
197 }
198 }
199
200 @include bem.modifier('icon') {
201 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
202 padding-inline: 0;
124 } 203 }
125 204
126 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { 205 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
127 @include bem.modifier($mod) { 206 @include bem.modifier($mod) {
128 padding-block: props.get($pad-b); 207 padding-block: props.get($pad-b);
129 padding-inline: props.get($pad-i); 208 padding-inline: props.get($pad-i);
@@ -132,27 +211,42 @@
132 @include bem.elem('label') { 211 @include bem.elem('label') {
133 margin-inline: props.get($pad-i-label); 212 margin-inline: props.get($pad-i-label);
134 } 213 }
214
215 @include bem.modifier('pill') {
216 padding-inline: props.get($pad-i-pill);
217 }
218
219 @include bem.modifier('icon') {
220 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
221 padding-inline: 0;
222 }
135 } 223 }
136 } 224 }
137 225
138 @include -apply-static-theme(vars.$default-theme); 226 @include bem.modifier('align-block') {
227 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
139 228
140 @each $theme in map.keys(props.get(vars.$themes)) { 229 @include bem.modifier('pill') {
141 @include bem.modifier(string.slice($theme, 3)) { 230 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
142 @include -apply-theme(vars.$themes, $theme);
143 } 231 }
144 }
145 232
146 @each $theme in map.keys(props.get(vars.$static-themes)) { 233 @include bem.modifier('icon') {
147 @include bem.modifier(string.slice($theme, 3)) { 234 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
148 @include -apply-static-theme(vars.$static-themes, $theme);
149 } 235 }
150 } 236
237 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
238 @include bem.modifier($mod) {
239 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
151 240
152 @include bem.modifier('round') { 241 @include bem.modifier('pill') {
153 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 242 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
154 padding-inline: 0; 243 }
155 border-radius: 100em; 244
245 @include bem.modifier('icon') {
246 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
247 }
248 }
249 }
156 } 250 }
157 } 251 }
158} 252}
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 4f7b552..7b4670f 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -4,164 +4,355 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$line-height: props.def(--o-button--line-height, 1.4) !default; 6$line-height: props.def(--o-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; 7$border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; 8$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
9$pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
10$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
11$rounding: props.def(--o-button--rounding, 10em) !default;
12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
13 9
14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; 10$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default;
15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; 11$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; 12$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
13$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default;
17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; 14$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
18 15
19$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; 16$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
20$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; 17$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default;
21$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; 18$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !default;
19$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
20$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
21
22$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
23$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
24$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
25$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
22$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; 26$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
23 27
24$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; 28$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
25$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; 29$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
30$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
26$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; 31$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
27$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; 32$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
28 33
34$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
35$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
36$shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
37$shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
38
29$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 39$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 40$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
31$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 41$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
32 42
33$sizes: ( 43$fixed-sizes: (
34 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, 44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
35 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, 45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
36 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, 46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
37) !default; 47) !default;
38 48
49$themes: props.def(--o-button, (), 'color');
50
39$default-theme-override: () !default; 51$default-theme-override: () !default;
40$default-theme: props.def(--o-button, ( 52$default-theme: map.deep-merge((
41 --bg: props.get(core.$theme, --border-mute), 53 --bg-color: props.get(core.$theme, --bg-l2),
42 --label: props.get(core.$theme, --text), 54 --label-color: props.get(core.$theme, --text),
43 --outline-border: props.get(core.$theme, --border), 55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
44 --outline-label: props.get(core.$theme, --text), 56 --shadow-color: props.get(core.$theme, --shadow),
45 57
46 --hover: ( 58 --hover: (
47 --bg: props.get(core.$theme, --border), 59 --bg-color: props.get(core.$theme, --border-mute),
48 --label: props.get(core.$theme, --heading), 60 --label-color: props.get(core.$theme, --heading),
61 --border-color: props.get(core.$theme, --border-strong),
49 ), 62 ),
50 63
51 --active: ( 64 --active: (
52 --bg: props.get(core.$theme, --border-strong), 65 --bg-color: props.get(core.$theme, --border),
53 --label: props.get(core.$theme, --heading), 66 --label-color: props.get(core.$theme, --heading),
67 --border-color: props.get(core.$theme, --text-mute-more),
54 ), 68 ),
55 69
56 --disabled: ( 70 --disabled: (
57 --bg: props.get(core.$theme, --border-mute), 71 --bg-color: transparent,
58 --outline-border: props.get(core.$theme, --border), 72 --label-color: props.get(core.$theme, --border-strong),
59 --label: props.get(core.$theme, --text-disabled), 73 --border-color: props.get(core.$theme, --border),
60 ), 74 ),
61 75
62 --key-focus: ( 76 --key-focus: (
63 --label: props.get(core.$theme, --focus, --text), 77 --border-color: props.get(core.$theme, --focus, --border),
64 --border: props.get(core.$theme, --focus, --border), 78 --outline-color: props.get(core.$theme, --focus, --outline),
65 --outline: props.get(core.$theme, --focus, --outline), 79 ),
80
81 --selected: (
82 --bg-color: props.get(core.$theme, --text),
83 --label-color: props.get(core.$theme, --base, --50),
84 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
85
86 --hover: (
87 --bg-color: props.get(core.$theme, --heading),
88 --label-color: props.get(core.$theme, --base, --50),
89 --border-color: props.get(core.$theme, --heading),
90 ),
91
92 --active: (
93 --bg-color: props.get(core.$theme, --heading),
94 --label-color: props.get(core.$theme, --base, --50),
95 --border-color: props.get(core.$theme, --heading),
96 ),
97
98 --disabled: (
99 --bg-color: props.get(core.$theme, --border-mute),
100 --label-color: props.get(core.$theme, --border-strong),
101 --border-color: props.get(core.$theme, --border-mute),
102 ),
103 ),
104
105 --badge: (
106 --bg-color: props.get(core.$theme, --border-mute),
107 --label-color: props.get(core.$theme, --heading),
108 --border-color: props.get(core.$theme, --border-mute),
109
110 --hover: (
111 --bg-color: props.get(core.$theme, --border),
112 --label-color: props.get(core.$theme, --heading),
113 --border-color: props.get(core.$theme, --border),
114 ),
115
116 --active: (
117 --bg-color: props.get(core.$theme, --border-strong),
118 --label-color: props.get(core.$theme, --heading),
119 --border-color: props.get(core.$theme, --border-strong),
120 ),
66 ), 121 ),
67 122
68 --primary: ( 123 --quiet: (
69 --bg: props.get(core.$theme, --base, --900), 124 --label-color: props.get(core.$theme, --text),
70 --label: props.get(core.$theme, --base, --900-text),
71 --outline-border: props.get(core.$theme, --base, --900),
72 --outline-label: props.get(core.$theme, --text),
73 125
74 --hover: ( 126 --hover: (
75 --bg: props.get(core.$theme, --base, --800), 127 --bg-color: props.get(core.$theme, --border-mute),
76 --label: props.get(core.$theme, --base, --800-text), 128 --label-color: props.get(core.$theme, --heading),
77 ), 129 ),
78 130
79 --active: ( 131 --active: (
80 --bg: props.get(core.$theme, --base, --700), 132 --bg-color: props.get(core.$theme, --border),
81 --label: props.get(core.$theme, --base, --700-text), 133 --label-color: props.get(core.$theme, --heading),
134 ),
135
136 --disabled: (
137 --label-color: props.get(core.$theme, --border-strong),
82 ), 138 ),
83 ), 139 ),
84), 'color') !default; 140), $default-theme-override) !default;
85$default-theme: props.merge($default-theme, $default-theme-override); 141$default-theme: props.def(--o-button, $default-theme, 'color');
142
143$default-theme-dark-override: () !default;
144$default-theme-dark: map.deep-merge((
145 --bg-color: props.get(core.$theme, --border-mute),
146 --border-color: props.get(core.$theme, --border-mute),
86 147
87$static-themes: props.def(--o-button, (), 'color'); 148 --hover: (
149 --bg-color: props.get(core.$theme, --border),
150 --border-color: props.get(core.$theme, --border),
151 ),
152
153 --active: (
154 --bg-color: props.get(core.$theme, --border-strong),
155 --border-color: props.get(core.$theme, --border-strong),
156 ),
157
158 --selected: (
159 --border-color: props.get(core.$theme, --text),
160 ),
161), $default-theme-override) !default;
162$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
88 163
89@each $theme in map.keys(props.get(core.$transparent-colors)) { 164@each $theme in map.keys(props.get(core.$transparent-colors)) {
90 $button-theme: --static-#{string.slice($theme, 3)}; 165 $button-theme: --static-#{string.slice($theme, 3)};
91 166
92 $static-themes: props.merge($static-themes, ( 167 $themes: props.merge($themes, (
93 $button-theme: ( 168 $button-theme: (
94 --bg: props.get(core.$transparent-colors, $theme, --200), 169 --bg-color: props.get(core.$transparent-colors, $theme, --200),
95 --label: props.get(core.$transparent-colors, $theme, --900), 170 --label-color: props.get(core.$transparent-colors, $theme, --900),
96 --outline-border: props.get(core.$transparent-colors, $theme, --300), 171 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
97 --outline-label: props.get(core.$transparent-colors, $theme, --900), 172 --shadow-color: props.get(core.$transparent-colors, --black, --200),
98 173
99 --hover: ( 174 --hover: (
100 --bg: props.get(core.$transparent-colors, $theme, --300), 175 --bg-color: props.get(core.$transparent-colors, $theme, --300),
101 --label: props.get(core.$transparent-colors, $theme, --900), 176 --label-color: props.get(core.$transparent-colors, $theme, --900),
177 --border-color: props.get(core.$transparent-colors, $theme, --400),
102 ), 178 ),
103 179
104 --active: ( 180 --active: (
105 --bg: props.get(core.$transparent-colors, $theme, --400), 181 --bg-color: props.get(core.$transparent-colors, $theme, --400),
106 --label: props.get(core.$transparent-colors, $theme, --900), 182 --label-color: props.get(core.$transparent-colors, $theme, --900),
183 --border-color: props.get(core.$transparent-colors, $theme, --500),
107 ), 184 ),
108 185
109 --disabled: ( 186 --disabled: (
110 --bg: props.get(core.$transparent-colors, $theme, --200), 187 --bg-color: props.get(core.$transparent-colors, $theme, --100),
111 --outline-border: props.get(core.$transparent-colors, $theme, --300), 188 --label-color: props.get(core.$transparent-colors, $theme, --500),
112 --label: props.get(core.$transparent-colors, $theme, --500), 189 --border-color: props.get(core.$transparent-colors, $theme, --300),
113 ), 190 ),
114 191
115 --key-focus: ( 192 --key-focus: (
116 --bg: props.get(core.$transparent-colors, $theme, --100), 193 --border-color: props.get(core.$transparent-colors, $theme, --900),
117 --label: props.get(core.$transparent-colors, $theme, --900), 194 --outline-color: props.get(core.$transparent-colors, $theme, --300),
118 --border: props.get(core.$transparent-colors, $theme, --900),
119 --outline: props.get(core.$transparent-colors, $theme, --300),
120 ), 195 ),
121 196
122 --primary: ( 197 --selected: (
123 --bg: props.get(core.$transparent-colors, $theme, --800), 198 --bg-color: props.get(core.$transparent-colors, $theme, --800),
124 --label: props.get(core.$transparent-colors, $theme, --text), 199 --label-color: props.get(core.$transparent-colors, $theme, --text),
125 --outline-border: props.get(core.$transparent-colors, $theme, --800), 200 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
126 --outline-label: props.get(core.$transparent-colors, $theme, --900), 201
127
128 --hover: ( 202 --hover: (
129 --bg: props.get(core.$transparent-colors, $theme, --900), 203 --bg-color: props.get(core.$transparent-colors, $theme, --900),
130 --label: props.get(core.$transparent-colors, $theme, --text), 204 --label-color: props.get(core.$transparent-colors, $theme, --text),
205 --border-color: props.get(core.$transparent-colors, $theme, --100),
131 ), 206 ),
132 207
133 --active: ( 208 --active: (
134 --bg: props.get(core.$transparent-colors, $theme, --900), 209 --bg-color: props.get(core.$transparent-colors, $theme, --900),
135 --label: props.get(core.$transparent-colors, $theme, --text), 210 --label-color: props.get(core.$transparent-colors, $theme, --text),
211 --border-color: props.get(core.$transparent-colors, $theme, --100),
212 ),
213
214 --disabled: (
215 --bg-color: props.get(core.$transparent-colors, $theme, --200),
216 --label-color: props.get(core.$transparent-colors, $theme, --500),
217 --border-color: props.get(core.$transparent-colors, $theme, --100),
218 ),
219 ),
220
221 --badge: (
222 --bg-color: props.get(core.$transparent-colors, $theme, --200),
223 --label-color: props.get(core.$transparent-colors, $theme, --900),
224 --border-color: transparent,
225
226 --hover: (
227 --bg-color: props.get(core.$transparent-colors, $theme, --300),
228 --label-color: props.get(core.$transparent-colors, $theme, --900),
229 --border-color: transparent,
136 ), 230 ),
137 ) 231
232 --active: (
233 --bg-color: props.get(core.$transparent-colors, $theme, --400),
234 --label-color: props.get(core.$transparent-colors, $theme, --900),
235 --border-color: transparent,
236 ),
237 ),
238
239 --quiet: (
240 --label-color: props.get(core.$transparent-colors, $theme, --900),
241
242 --hover: (
243 --bg-color: props.get(core.$transparent-colors, $theme, --200),
244 --label-color: props.get(core.$transparent-colors, $theme, --900),
245 ),
246
247 --active: (
248 --bg-color: props.get(core.$transparent-colors, $theme, --300),
249 --label-color: props.get(core.$transparent-colors, $theme, --900),
250 ),
251
252 --disabled: (
253 --label-color: props.get(core.$transparent-colors, $theme, --500),
254 ),
255 ),
138 ) 256 )
139 )); 257 ));
140} 258}
141 259
142$themes-config: ( 260$themes-config: (
143 accent: --accent, 261 accent: --accent,
262 positive: --positive,
144 negative: --negative, 263 negative: --negative,
264 warning: --warning,
145) !default; 265) !default;
146 266
147$themes: props.def(--o-button, (), 'color');
148
149@each $theme, $key in $themes-config { 267@each $theme, $key in $themes-config {
150 $themes: props.merge($themes, ( 268 $themes: props.merge($themes, (
151 --#{$theme}: ( 269 --#{$theme}: (
152 --bg: props.get(core.$theme, #{$key}-static, --900), 270 --bg-color: props.get(core.$theme, $key, --100),
153 --label: props.get(core.$theme, #{$key}-static, --900-text), 271 --label-color: props.get(core.$theme, $key, --1100),
154 --outline-border: props.get(core.$theme, $key, --900), 272 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
155 --outline-label: props.get(core.$theme, $key, --1000), 273 --shadow-color: props.get(core.$theme, $key, --200),
156 274
157 --hover: ( 275 --hover: (
158 --bg: props.get(core.$theme, #{$key}-static, --1000), 276 --bg-color: props.get(core.$theme, $key, --200),
159 --label: props.get(core.$theme, #{$key}-static, --1000-text), 277 --label-color: props.get(core.$theme, $key, --1200),
278 --border-color: props.get(core.$theme, $key, --600),
160 ), 279 ),
161 280
162 --active: ( 281 --active: (
163 --bg: props.get(core.$theme, #{$key}-static, --1100), 282 --bg-color: props.get(core.$theme, $key, --300),
164 --label: props.get(core.$theme, #{$key}-static, --1100-text), 283 --label-color: props.get(core.$theme, $key, --1300),
284 --border-color: props.get(core.$theme, $key, --800),
285 ),
286
287 --disabled: (
288 --bg-color: props.get(core.$theme, --bg-l1),
289 --label-color: props.get(core.$theme, --border-strong),
290 --border-color: props.get(core.$theme, --border),
291 ),
292
293 --key-focus: (
294 --border-color: props.get(core.$theme, --focus, --border),
295 --outline-color: props.get(core.$theme, --focus, --outline),
296 ),
297
298 --selected: (
299 --bg-color: props.get(core.$theme, #{$key}-static, --900),
300 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
301 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
302
303 --hover: (
304 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
305 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
306 --border-color: props.get(core.$theme, #{$key}-static, --1000),
307 ),
308
309 --active: (
310 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
311 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
312 --border-color: props.get(core.$theme, #{$key}-static, --1100),
313 ),
314
315 --disabled: (
316 --bg-color: props.get(core.$theme, --border-mute),
317 --label-color: props.get(core.$theme, --border-strong),
318 --border-color: props.get(core.$theme, --border-mute),
319 ),
320 ),
321
322 --badge: (
323 --bg-color: props.get(core.$theme, $key, --100),
324 --label-color: props.get(core.$theme, $key, --1100),
325 --border-color: props.get(core.$theme, $key, --300),
326
327 --hover: (
328 --bg-color: props.get(core.$theme, $key, --200),
329 --label-color: props.get(core.$theme, $key, --1200),
330 --border-color: props.get(core.$theme, $key, --400),
331 ),
332
333 --active: (
334 --bg-color: props.get(core.$theme, $key, --300),
335 --label-color: props.get(core.$theme, $key, --1300),
336 --border-color: props.get(core.$theme, $key, --500),
337 ),
338 ),
339
340 --quiet: (
341 --label-color: props.get(core.$theme, $key, --1100),
342
343 --hover: (
344 --bg-color: props.get(core.$theme, $key, --200),
345 --label-color: props.get(core.$theme, $key, --1200),
346 ),
347
348 --active: (
349 --bg-color: props.get(core.$theme, $key, --300),
350 --label-color: props.get(core.$theme, $key, --1300),
351 ),
352
353 --disabled: (
354 --label-color: props.get(core.$theme, --border-strong),
355 ),
165 ), 356 ),
166 ) 357 )
167 )); 358 ));
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index d5d300d..e80df2c 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -18,7 +18,7 @@
18 border: props.get(vars.$border-width) solid transparent; 18 border: props.get(vars.$border-width) solid transparent;
19 border-color: props.get(vars.$border-color); 19 border-color: props.get(vars.$border-color);
20 border-radius: props.get(vars.$rounding); 20 border-radius: props.get(vars.$rounding);
21 transition: transform .2s, background-color .2s, border-color .2s; 21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
22 22
23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
24 &:hover, 24 &:hover,
@@ -27,6 +27,7 @@
27 transform: translateY(props.get(vars.$hover--offset-b)); 27 transform: translateY(props.get(vars.$hover--offset-b));
28 background-color: props.get(vars.$hover--bg-color); 28 background-color: props.get(vars.$hover--bg-color);
29 border-color: props.get(vars.$hover--border-color); 29 border-color: props.get(vars.$hover--border-color);
30 box-shadow: none;
30 } 31 }
31 32
32 &:focus-visible { 33 &:focus-visible {
@@ -41,19 +42,44 @@
41 } 42 }
42 } 43 }
43 44
45 @include bem.modifier('borderless') {
46 border-color: props.get(vars.$bg-color);
47 }
48
49 @include bem.modifier('shadow') {
50 box-shadow:
51 props.get(vars.$shadow-x)
52 props.get(vars.$shadow-y)
53 props.get(vars.$shadow-blur)
54 props.get(vars.$shadow-grow)
55 props.get(vars.$shadow-color);
56
57 @include bem.modifier('quiet') {
58 @include bem.elem('image') {
59 box-shadow:
60 props.get(vars.$shadow-x)
61 props.get(vars.$shadow-y)
62 props.get(vars.$shadow-blur)
63 props.get(vars.$shadow-grow)
64 props.get(vars.$shadow-color);
65 }
66 }
67 }
68
44 @include bem.elem('avatar') { 69 @include bem.elem('avatar') {
45 margin-block-start: props.get(vars.$pad-b); 70 margin-block-start: props.get(vars.$pad-b);
46 margin-inline-start: props.get(vars.$pad-i); 71 margin-inline-start: props.get(vars.$pad-i);
47 } 72 }
48 73
49 @include bem.elem('image') { 74 @include bem.elem('image') {
50 position: relative; 75 position: relative;
51 display: block; 76 display: block;
52 flex: 0 0 auto; 77 flex: 0 0 auto;
53 inline-size: 100%; 78 inline-size: calc(100% + 2 * props.get(vars.$border-width));
54 overflow: hidden; 79 margin: calc(-1 * props.get(vars.$border-width));
55 object-fit: cover; 80 overflow: hidden;
56 transition: background-color .2s, transform .2s, opacity .2s; 81 object-fit: cover;
82 transition: background-color .2s, transform .2s, opacity .2s;
57 83
58 &:first-child { 84 &:first-child {
59 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 85 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
@@ -178,8 +204,6 @@
178 204
179 @include bem.modifier('thumbnail') { 205 @include bem.modifier('thumbnail') {
180 @include bem.elem('image') { 206 @include bem.elem('image') {
181 inline-size: calc(100% + 2 * props.get(vars.$border-width));
182 margin: calc(-1 * props.get(vars.$border-width));
183 border-radius: props.get(vars.$rounding); 207 border-radius: props.get(vars.$rounding);
184 } 208 }
185 209
@@ -189,7 +213,7 @@
189 inset-inline: calc(-1 * props.get(vars.$border-width)); 213 inset-inline: calc(-1 * props.get(vars.$border-width));
190 z-index: 10; 214 z-index: 10;
191 visibility: hidden; 215 visibility: hidden;
192 background-color: props.get(vars.$bg-color); 216 background-color: props.get(vars.$hover--bg-color);
193 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); 217 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
194 border-color: transparent; 218 border-color: transparent;
195 border-style: solid; 219 border-style: solid;
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 9810239..ebfba10 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -14,15 +14,21 @@ $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-
14 14
15$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; 15$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
16 16
17$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default;
18$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default;
19$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
20$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
21
17$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 22$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
18$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 23$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
19$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 24$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
20 25
26$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
21$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 27$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
22$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; 28$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
23$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; 29$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
24 30
25$hover--bg-color: props.def(--o-card--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 31$hover--bg-color: props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;
26$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default; 32$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default;
27 33
28$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; 34$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
index aee26e6..25a0d3d 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -7,7 +7,7 @@ $label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125))
7$border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; 7$border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default;
8$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; 8$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default;
9$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; 9$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default;
10$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; 10$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default;
11$spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; 11$spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default;
12 12
13$key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 13$key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 4ed8092..9b58e77 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -91,6 +91,26 @@
91 } 91 }
92 } 92 }
93 93
94 @include bem.modifier('quiet') {
95 font-size: props.get(vars.$quiet--label-font-size);
96 font-weight: 500;
97 color: props.get(vars.$quiet--label-color);
98
99 &::before,
100 &::after {
101 block-size: props.get(vars.$quiet--border-width);
102 background-color: props.get(vars.$quiet--bg-color);
103 }
104
105 @include bem.modifier('vertical') {
106 background-color: props.get(vars.$vertical--quiet--bg-color);
107 }
108
109 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--quiet--bg-color);
111 }
112 }
113
94 @include bem.modifier('faint') { 114 @include bem.modifier('faint') {
95 font-size: props.get(vars.$faint--label-font-size); 115 font-size: props.get(vars.$faint--label-font-size);
96 font-weight: 500; 116 font-weight: 500;
@@ -103,11 +123,11 @@
103 } 123 }
104 124
105 @include bem.modifier('vertical') { 125 @include bem.modifier('vertical') {
106 background-color: props.get(vars.$vertical--faint--bg-color); 126 background-color: props.get(vars.$vertical--quiet--bg-color);
107 } 127 }
108 128
109 @include bem.modifier('dot') { 129 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--faint--bg-color); 130 background-color: props.get(vars.$dot--quiet--bg-color);
111 } 131 }
112 } 132 }
113 133
@@ -157,6 +177,17 @@
157 } 177 }
158 } 178 }
159 179
180 @include bem.modifier('quiet') {
181 &::before,
182 &::after {
183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
184 }
185
186 @include bem.elem('label') {
187 color: props.get(vars.$static-themes, $theme, --quiet, --label);
188 }
189 }
190
160 @include bem.modifier('faint') { 191 @include bem.modifier('faint') {
161 &::before, 192 &::before,
162 &::after { 193 &::after {
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 5cd68c1..5a5639b 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -13,6 +13,9 @@ $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.
13$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; 13$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
14$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; 14$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
15 15
16$quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default;
17$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default;
18
16$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; 19$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
17$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; 20$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
18 21
@@ -22,12 +25,15 @@ $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core
22$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; 25$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
23$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; 26$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
24 27
25$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; 28$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
26$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; 29$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
30
31$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
32$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
27 33
28$vertical--faint--bg-color: props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 34$vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
29 35
30$dot--faint--bg-color: props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 36$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
31 37
32$static-themes: props.def(--o-divider, (), 'color'); 38$static-themes: props.def(--o-divider, (), 'color');
33 39
@@ -44,10 +50,14 @@ $static-themes: props.def(--o-divider, (), 'color');
44 --bg: props.get(core.$transparent-colors, $theme, --300), 50 --bg: props.get(core.$transparent-colors, $theme, --300),
45 --label: props.get(core.$transparent-colors, $theme, --500), 51 --label: props.get(core.$transparent-colors, $theme, --500),
46 ), 52 ),
47 --faint: ( 53 --quiet: (
48 --bg: props.get(core.$transparent-colors, $theme, --300), 54 --bg: props.get(core.$transparent-colors, $theme, --300),
49 --label: props.get(core.$transparent-colors, $theme, --500), 55 --label: props.get(core.$transparent-colors, $theme, --500),
50 ), 56 ),
57 --faint: (
58 --bg: props.get(core.$transparent-colors, $theme, --200),
59 --label: props.get(core.$transparent-colors, $theme, --400),
60 ),
51 ) 61 )
52 )); 62 ));
53} 63}
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
index fbfb935..073f88b 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -4,7 +4,7 @@
4 4
5$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; 5$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
6$pad: props.def(--o-emoji--pad, .3em) !default; 6$pad: props.def(--o-emoji--pad, .3em) !default;
7$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default; 7$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default;
8$zoom: props.def(--o-emoji--zoom, 3) !default; 8$zoom: props.def(--o-emoji--zoom, 3) !default;
9$valign: props.def(--o-emoji--valign, -.25em) !default; 9$valign: props.def(--o-emoji--valign, -.25em) !default;
10 10
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
index 451cc18..e560d1b 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -14,9 +14,6 @@ $shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !
14$shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default; 14$shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
15$shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default; 15$shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
16 16
17$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 17$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
18$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border-mute) props.get(core.$theme, --border-mute) props.get(core.$theme, --border), 'color') !default; 18$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default;
19 19$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
20$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default;
21
22$border-color-dark: props.def(--o-popover--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss
index 51ea581..b18ae2b 100644
--- a/src/objects/_radio.vars.scss
+++ b/src/objects/_radio.vars.scss
@@ -7,7 +7,7 @@ $label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !
7$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; 7$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default;
8$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; 8$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default;
9$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; 9$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default;
10$rounding: props.def(--o-radio--rounding, props.get(core.$rounding)) !default; 10$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default;
11$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; 11$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default;
12 12
13$key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 13$key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index 122dba6..711b2a7 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -8,7 +8,7 @@ $separator: props.def(--o-side-nav--separator, props.get(core.$size--200
8 8
9$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; 9$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; 10$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default;
11$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default; 11$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default;
12 12
13$item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 13$item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 14$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
index 85596af..10489a5 100644
--- a/src/objects/_switch.vars.scss
+++ b/src/objects/_switch.vars.scss
@@ -8,7 +8,7 @@ $label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !
8$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; 8$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
9$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; 9$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
10$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; 10$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
11$rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default; 11$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default;
12$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; 12$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
13 13
14$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 14$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
index f4486d6..4095629 100644
--- a/src/objects/_tabbar.vars.scss
+++ b/src/objects/_tabbar.vars.scss
@@ -4,7 +4,7 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; 6$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
7$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default; 7$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default;
8$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; 8$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
9$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; 9$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
10 10
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
index d1d53d7..b8d8093 100644
--- a/src/objects/_table.vars.scss
+++ b/src/objects/_table.vars.scss
@@ -4,7 +4,7 @@
4 4
5$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; 5$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
6$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; 6$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
7$rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default; 7$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default;
8$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; 8$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
9 9
10$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; 10$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index ba8cebe..60bf2e9 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -4,7 +4,7 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; 6$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default; 7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
8$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; 8$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
9$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; 9$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
10 10
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index 8a040c2..08472f2 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -4,12 +4,12 @@
4 4
5$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; 5$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
6$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; 6$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
7$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding)) !default; 7$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default;
8 8
9$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; 9$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default;
10$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; 10$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default;
11$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; 11$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
12$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding)) !default; 12$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
13 13
14$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default; 14$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default;
15$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default; 15$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index b9bf4d1..b976100 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -3,7 +3,7 @@
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; 6$rounding: props.def(--s-links--rounding, props.get(core.$rounding--sm)) !default;
7$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default; 7$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
8$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default; 8$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;
9 9
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-25 18:25:45 +0000