summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_config.scss3
-rw-r--r--src/objects/_action-button.scss69
-rw-r--r--src/objects/_button.scss5
3 files changed, 62 insertions, 15 deletions
diff --git a/src/_config.scss b/src/_config.scss
index 56a74e1..f4f43fd 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -82,6 +82,9 @@ $semantic-colors-common: (
82 --focus-raw: --accent, 82 --focus-raw: --accent,
83 --focus-static: --accent-static, 83 --focus-static: --accent-static,
84 84
85 --light: --white-transparent,
86 --shadow: --black-transparent,
87
85 --border-mute: --base --200, 88 --border-mute: --base --200,
86 --border: --base --300, 89 --border: --base --300,
87 --border-strong: --base --400, 90 --border-strong: --base --400,
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 6286f4e..6dbdc2f 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -1,14 +1,37 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4$sizes: 'sm' 'lg' 'xl' !default;
5
4@include iro.props-namespace('action-button') { 6@include iro.props-namespace('action-button') {
5 @include iro.props-store(( 7 @include iro.props-store((
6 --dims: ( 8 --dims: (
7 --line-height: 1.4, 9 --line-height: 1.4,
8 --pad-i: fn.global-dim(--size --100), 10 --pad-i: fn.global-dim(--size --150),
11 --pad-i-pill: fn.global-dim(--size --200),
9 --pad-b: fn.global-dim(--size --85), 12 --pad-b: fn.global-dim(--size --85),
10 --border: fn.global-dim(--border --thin), 13 --border: fn.global-dim(--border --thin),
11 --rounding: fn.global-dim(--rounding), 14 --rounding: fn.global-dim(--rounding),
15 --font-size: fn.global-dim(--font-size --100),
16
17 --sm: (
18 --pad-i: fn.global-dim(--size --100),
19 --pad-i-pill: fn.global-dim(--size --150),
20 --pad-b: fn.global-dim(--size --40),
21 --font-size: fn.global-dim(--font-size --75),
22 ),
23 --lg: (
24 --pad-i: fn.global-dim(--size --175),
25 --pad-i-pill: fn.global-dim(--size --225),
26 --pad-b: fn.global-dim(--size --115),
27 --font-size: fn.global-dim(--font-size --150),
28 ),
29 --xl: (
30 --pad-i: fn.global-dim(--size --225),
31 --pad-i-pill: fn.global-dim(--size --300),
32 --pad-b: fn.global-dim(--size --150),
33 --font-size: fn.global-dim(--font-size --200),
34 ),
12 35
13 --key-focus: ( 36 --key-focus: (
14 --border: fn.global-dim(--key-focus --border), 37 --border: fn.global-dim(--key-focus --border),
@@ -27,14 +50,14 @@
27 --border: fn.global-color(--text-mute-more), 50 --border: fn.global-color(--text-mute-more),
28 ), 51 ),
29 --active: ( 52 --active: (
30 --bg: fn.global-color(--border-mute), 53 --bg: fn.global-color(--border),
31 --label: fn.global-color(--heading), 54 --label: fn.global-color(--heading),
32 --border: fn.global-color(--text-mute-more), 55 --border: fn.global-color(--text-mute),
33 ), 56 ),
34 --disabled: ( 57 --disabled: (
35 --bg: fn.global-color(--bg-l1), 58 --bg: fn.global-color(--bg-l1),
36 --label: fn.global-color(--border-strong), 59 --label: fn.global-color(--border-strong),
37 --border: fn.global-color(--border-mute), 60 --border: fn.global-color(--border),
38 ), 61 ),
39 --selected: ( 62 --selected: (
40 --bg: fn.global-color(--text-mute), 63 --bg: fn.global-color(--text-mute),
@@ -73,7 +96,7 @@
73 --label: fn.global-color(--heading), 96 --label: fn.global-color(--heading),
74 ), 97 ),
75 --disabled: ( 98 --disabled: (
76 --label: fn.global-color(--text-disabled), 99 --label: fn.global-color(--border-strong),
77 ), 100 ),
78 ), 101 ),
79 ), 102 ),
@@ -92,7 +115,6 @@
92 text-align: center; 115 text-align: center;
93 text-decoration: none; 116 text-decoration: none;
94 text-overflow: ellipsis; 117 text-overflow: ellipsis;
95 vertical-align: top;
96 white-space: nowrap; 118 white-space: nowrap;
97 119
98 &::after { 120 &::after {
@@ -137,7 +159,6 @@
137 @include iro.bem-modifier('quiet') { 159 @include iro.bem-modifier('quiet') {
138 border-color: transparent; 160 border-color: transparent;
139 background-color: transparent; 161 background-color: transparent;
140 box-shadow: none;
141 color: fn.color(--quiet --disabled --label); 162 color: fn.color(--quiet --disabled --label);
142 163
143 &:link, 164 &:link,
@@ -145,21 +166,18 @@
145 &:enabled { 166 &:enabled {
146 border-color: transparent; 167 border-color: transparent;
147 background-color: transparent; 168 background-color: transparent;
148 box-shadow: none;
149 color: fn.color(--quiet --label); 169 color: fn.color(--quiet --label);
150 170
151 &:hover, 171 &:hover,
152 &:focus-visible { 172 &:focus-visible {
153 border-color: transparent; 173 border-color: transparent;
154 background-color: fn.color(--quiet --hover --bg); 174 background-color: fn.color(--quiet --hover --bg);
155 box-shadow: none;
156 color: fn.color(--quiet --hover --label); 175 color: fn.color(--quiet --hover --label);
157 } 176 }
158 177
159 &:active { 178 &:active {
160 border-color: transparent; 179 border-color: transparent;
161 background-color: fn.color(--quiet --active --bg); 180 background-color: fn.color(--quiet --active --bg);
162 box-shadow: none;
163 color: fn.color(--quiet --active --label); 181 color: fn.color(--quiet --active --label);
164 } 182 }
165 } 183 }
@@ -192,10 +210,37 @@
192 } 210 }
193 } 211 }
194 212
195 @include iro.bem-modifier('round') { 213 @include iro.bem-modifier('pill') {
214 padding-inline: fn.dim(--pad-i-pill);
215 border-radius: 100em;
216
217 &::after {
218 border-radius: 100em;
219 }
220 }
221
222 @each $size in $sizes {
223 @include iro.bem-modifier($size) {
224 padding-block: fn.dim(--#{$size} --pad-b);
225 padding-inline: fn.dim(--#{$size} --pad-i);
226 font-size: fn.dim(--#{$size} --font-size);
227
228 @include iro.bem-modifier('pill') {
229 padding-inline: fn.dim(--#{$size} --pad-i-pill);
230 }
231 }
232 }
233
234 @include iro.bem-modifier('icon') {
196 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); 235 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
197 padding-inline: 0; 236 padding-inline: 0;
198 border-radius: 100em; 237
238 @each $size in $sizes {
239 @include iro.bem-modifier($size) {
240 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b));
241 padding-inline: 0;
242 }
243 }
199 } 244 }
200 } 245 }
201} 246}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 1c907c0..27d3726 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,6 +2,7 @@
2@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn; 3@use '../functions' as fn;
4 4
5$sizes: 'sm' 'lg' 'xl' !default;
5$themes: 'accent' 'negative' !default; 6$themes: 'accent' 'negative' !default;
6$static-themes: 'black' 'white' !default; 7$static-themes: 'black' 'white' !default;
7 8
@@ -54,7 +55,6 @@ $static-themes: 'black' 'white' !default;
54 @include iro.bem-modifier('outline') { 55 @include iro.bem-modifier('outline') {
55 border-color: fn.color(list.join($key, --disabled --outline-border)); 56 border-color: fn.color(list.join($key, --disabled --outline-border));
56 background-color: transparent; 57 background-color: transparent;
57 box-shadow: none;
58 } 58 }
59 59
60 @include theme(static-#{$theme}); 60 @include theme(static-#{$theme});
@@ -255,10 +255,9 @@ $static-themes: 'black' 'white' !default;
255 @include iro.bem-modifier('outline') { 255 @include iro.bem-modifier('outline') {
256 border-color: fn.color(--disabled --outline-border); 256 border-color: fn.color(--disabled --outline-border);
257 background-color: transparent; 257 background-color: transparent;
258 box-shadow: none;
259 } 258 }
260 259
261 @each $size in sm lg xl { 260 @each $size in $sizes {
262 @include iro.bem-modifier($size) { 261 @include iro.bem-modifier($size) {
263 padding-block: fn.dim(--#{$size} --pad-b); 262 padding-block: fn.dim(--#{$size} --pad-b);
264 padding-inline: fn.dim(--#{$size} --pad-i); 263 padding-inline: fn.dim(--#{$size} --pad-i);