summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-18 23:40:20 +0200
committerVolpeon <git@volpeon.ink>2024-10-18 23:40:20 +0200
commitdc2a4ea99b535b97bfbf5b6b8d69ec8dab023b10 (patch)
tree47d4d85bc7033bb0f13e8b355f67a7d7f04d74b6 /src/objects
parentUpdate (diff)
downloadiro-design-dc2a4ea99b535b97bfbf5b6b8d69ec8dab023b10.tar.gz
iro-design-dc2a4ea99b535b97bfbf5b6b8d69ec8dab023b10.tar.bz2
iro-design-dc2a4ea99b535b97bfbf5b6b8d69ec8dab023b10.zip
Update
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.scss3
-rw-r--r--src/objects/_badge.scss5
-rw-r--r--src/objects/_badge.vars.scss61
-rw-r--r--src/objects/_button.scss260
-rw-r--r--src/objects/_button.vars.scss163
5 files changed, 254 insertions, 238 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 129e681..48149b1 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -1,6 +1,7 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:meta'; 3@use 'sass:meta';
4@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 5@use 'iro-sass/src/iro-sass' as iro;
5@use '../props'; 6@use '../props';
6 7
@@ -138,7 +139,7 @@
138 @include -apply-theme(vars.$default-theme); 139 @include -apply-theme(vars.$default-theme);
139 140
140 @each $theme in map.keys(props.get(vars.$themes)) { 141 @each $theme in map.keys(props.get(vars.$themes)) {
141 @include iro.bem-modifier($theme) { 142 @include iro.bem-modifier(string.slice($theme, 3)) {
142 @include -apply-theme(vars.$themes, $theme); 143 @include -apply-theme(vars.$themes, $theme);
143 } 144 }
144 } 145 }
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 3f68873..5a07630 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,6 +1,7 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:meta'; 3@use 'sass:meta';
4@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 5@use 'iro-sass/src/iro-sass' as iro;
5@use '../props'; 6@use '../props';
6@use '../core.vars' as core; 7@use '../core.vars' as core;
@@ -103,13 +104,13 @@
103 @include -apply-theme(vars.$default-theme); 104 @include -apply-theme(vars.$default-theme);
104 105
105 @each $theme in map.keys(props.get(vars.$themes)) { 106 @each $theme in map.keys(props.get(vars.$themes)) {
106 @include iro.bem-modifier($theme) { 107 @include iro.bem-modifier(string.slice($theme, 3)) {
107 @include -apply-theme(vars.$themes, $theme); 108 @include -apply-theme(vars.$themes, $theme);
108 } 109 }
109 } 110 }
110 111
111 @each $theme in map.keys(props.get(vars.$static-themes)) { 112 @each $theme in map.keys(props.get(vars.$static-themes)) {
112 @include iro.bem-modifier($theme) { 113 @include iro.bem-modifier(string.slice($theme, 3)) {
113 @include -apply-theme(vars.$static-themes, $theme, true); 114 @include -apply-theme(vars.$static-themes, $theme, true);
114 } 115 }
115 } 116 }
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index 6a3dd15..c49474b 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -43,35 +43,35 @@ $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props
43 43
44$default-theme-override: () !default; 44$default-theme-override: () !default;
45$default-theme: props.def(--o-badge, ( 45$default-theme: props.def(--o-badge, (
46 --bg: props.def(--o-badge--bg-color, props.get(core.$theme, --text-mute)), 46 --bg: props.get(core.$theme, --text-mute),
47 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), 47 --label: props.get(core.$theme, --bg-l2),
48 48
49 --hover: ( 49 --hover: (
50 --bg: props.def(--o-badge--hover--bg-color, props.get(core.$theme, --text)), 50 --bg: props.get(core.$theme, --text),
51 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), 51 --label: props.get(core.$theme, --bg-l2),
52 ), 52 ),
53 53
54 --active: ( 54 --active: (
55 --bg: props.def(--o-badge--active--bg-color, props.get(core.$theme, --heading)), 55 --bg: props.get(core.$theme, --heading),
56 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)), 56 --label: props.get(core.$theme, --bg-l2),
57 ), 57 ),
58 58
59 --quiet: ( 59 --quiet: (
60 --bg: props.def(--o-badge--quiet--bg-color, props.get(core.$theme, --border-mute)), 60 --bg: props.get(core.$theme, --border-mute),
61 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), 61 --label: props.get(core.$theme, --heading),
62 62
63 --hover: ( 63 --hover: (
64 --bg: props.def(--o-badge--quiet--hover--bg-color, props.get(core.$theme, --border)), 64 --bg: props.get(core.$theme, --border),
65 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), 65 --label: props.get(core.$theme, --heading),
66 ), 66 ),
67 67
68 --active: ( 68 --active: (
69 --bg: props.def(--o-badge--quiet--active--bg-color, props.get(core.$theme, --border-strong)), 69 --bg: props.get(core.$theme, --border-strong),
70 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)), 70 --label: props.get(core.$theme, --heading),
71 ), 71 ),
72 ) 72 )
73)); 73));
74$default-theme: props.merge(--o-badge, $default-theme-override); 74$default-theme: props.merge($default-theme, $default-theme-override);
75 75
76$static-themes: props.def(--o-badge); 76$static-themes: props.def(--o-badge);
77 77
@@ -116,41 +116,36 @@ $static-themes: props.def(--o-badge);
116 )); 116 ));
117} 117}
118 118
119$themes-config: ( 119$themes-config: --accent --positive --negative --warning !default;
120 accent: --accent,
121 positive: --positive,
122 negative: --negative,
123 warning: --warning,
124) !default;
125 120
126$themes: props.def(--o-badge); 121$themes: props.def(--o-badge);
127 122
128@each $theme, $key in $themes-config { 123@each $theme in $themes-config {
129 $themes: props.merge($themes, ( 124 $themes: props.merge($themes, (
130 $key: ( 125 $theme: (
131 --bg: props.get(core.$static-colors, $key, --900), 126 --bg: props.get(core.$static-colors, $theme, --900),
132 --label: props.get(core.$static-colors, $key, --900-text), 127 --label: props.get(core.$static-colors, $theme, --900-text),
133 128
134 --hover: ( 129 --hover: (
135 --bg: props.get(core.$static-colors, $key, --1000), 130 --bg: props.get(core.$static-colors, $theme, --1000),
136 --label: props.get(core.$static-colors, $key, --1000-text), 131 --label: props.get(core.$static-colors, $theme, --1000-text),
137 ), 132 ),
138 133
139 --active: ( 134 --active: (
140 --bg: props.get(core.$static-colors, $key, --1100), 135 --bg: props.get(core.$static-colors, $theme, --1100),
141 --label: props.get(core.$static-colors, $key, --1000-text), 136 --label: props.get(core.$static-colors, $theme, --1000-text),
142 ), 137 ),
143 138
144 --quiet: ( 139 --quiet: (
145 --bg: props.get(core.$theme, $key, --200), 140 --bg: props.get(core.$theme, $theme, --200),
146 --label: props.get(core.$theme, $key, --1100), 141 --label: props.get(core.$theme, $theme, --1100),
147 --hover: ( 142 --hover: (
148 --bg: props.get(core.$theme, $key, --300), 143 --bg: props.get(core.$theme, $theme, --300),
149 --label: props.get(core.$theme, $key, --1200), 144 --label: props.get(core.$theme, $theme, --1200),
150 ), 145 ),
151 --active: ( 146 --active: (
152 --bg: props.get(core.$theme, $key, --400), 147 --bg: props.get(core.$theme, $theme, --400),
153 --label: props.get(core.$theme, $key, --1300), 148 --label: props.get(core.$theme, $theme, --1300),
154 ), 149 ),
155 ) 150 )
156 ) 151 )
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 097bc21..854e1e3 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,17 +1,20 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
4@use 'sass:string';
2@use 'iro-sass/src/iro-sass' as iro; 5@use 'iro-sass/src/iro-sass' as iro;
3@use '../functions' as fn; 6@use '../props';
7@use '../core.vars' as core;
4 8
5$sizes: 'sm' 'lg' 'xl' !default; 9@forward 'button.vars';
6$themes: 'accent' 'negative' !default; 10@use 'button.vars' as vars;
7$static-themes: 'black' 'white' !default;
8 11
9@mixin theme($theme: ()) { 12@mixin -apply-theme($theme, $key: ()) {
10 &:link, 13 &:link,
11 &:visited, 14 &:visited,
12 &:enabled { 15 &:enabled {
13 color: fn.color(list.join($theme, --label)); 16 color: props.get($theme, list.join($key, --label)...);
14 background-color: fn.color(list.join($theme, --bg)); 17 background-color: props.get($theme, list.join($key, --bg)...);
15 border-color: transparent; 18 border-color: transparent;
16 } 19 }
17 20
@@ -19,9 +22,9 @@ $static-themes: 'black' 'white' !default;
19 &:link, 22 &:link,
20 &:visited, 23 &:visited,
21 &:enabled { 24 &:enabled {
22 color: fn.color(list.join($theme, --outline-label)); 25 color: props.get($theme, list.join($key, --outline-label));
23 background-color: transparent; 26 background-color: transparent;
24 border-color: fn.color(list.join($theme, --outline-border)); 27 border-color: props.get($theme, list.join($key, --outline-border));
25 } 28 }
26 } 29 }
27 30
@@ -30,217 +33,71 @@ $static-themes: 'black' 'white' !default;
30 &:enabled { 33 &:enabled {
31 &:hover, 34 &:hover,
32 &:focus-visible { 35 &:focus-visible {
33 color: fn.color(list.join($theme, --hover --label)); 36 color: props.get($theme, list.join($key, --hover --label));
34 background-color: fn.color(list.join($theme, --hover --bg)); 37 background-color: props.get($theme, list.join($key, --hover --bg));
35 border-color: transparent; 38 border-color: transparent;
36 } 39 }
37 40
38 &:active { 41 &:active {
39 color: fn.color(list.join($theme, --active --label)); 42 color: props.get($theme, list.join($key, --active --label));
40 background-color: fn.color(list.join($theme, --active --bg)); 43 background-color: props.get($theme, list.join($key, --active --bg));
41 border-color: transparent; 44 border-color: transparent;
42 } 45 }
43 } 46 }
44} 47}
45 48
46@mixin static-theme($theme: ()) { 49@mixin -apply-static-theme($theme, $key: ()) {
47 color: fn.color(list.join($theme, --disabled --label)); 50 color: props.get($theme, list.join($key, --disabled --label));
48 background-color: fn.color(list.join($theme, --disabled --bg)); 51 background-color: props.get($theme, list.join($key, --disabled --bg));
49 border-color: transparent; 52 border-color: transparent;
50 53
51 &::after { 54 &::after {
52 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); 55 outline: props.get($theme, list.join($key, --key-focus --border)) solid props.get(vars.$key-focus--border-width);
53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); 56 box-shadow:
57 0
58 0
59 0
60 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
61 props.get($theme, list.join($key, --key-focus --outline));
54 } 62 }
55 63
56 @include iro.bem-modifier('outline') { 64 @include iro.bem-modifier('outline') {
57 background-color: transparent; 65 background-color: transparent;
58 border-color: fn.color(list.join($theme, --disabled --outline-border)); 66 border-color: props.get($theme, list.join($key, --disabled --outline-border));
59 } 67 }
60 68
61 @include theme($theme); 69 @include -apply-theme($theme, $key);
62 70
63 @include iro.bem-modifier('primary') { 71 @include iro.bem-modifier('primary') {
64 @include theme(list.join($theme, --primary)); 72 @include -apply-theme($theme, list.join($key, --primary));
65 } 73 }
66} 74}
67 75
68@include iro.props-namespace('button') { 76@mixin styles {
69 @include iro.props-store(( 77 @include props.materialize(meta.module-variables('vars'));
70 --dims: (
71 --line-height: 1.4,
72 --pad-i: fn.global-dim(--size --200),
73 --pad-i-label: fn.global-dim(--size --75),
74 --pad-b: fn.global-dim(--size --65),
75 --border: fn.global-dim(--border --medium),
76 --rounding: 10em,
77 --font-size: fn.global-dim(--font-size --100),
78 78
79 --sm: ( 79 @include iro.bem-object('button') {
80 --pad-i: fn.global-dim(--size --150),
81 --pad-i-label: fn.global-dim(--size --50),
82 --pad-b: fn.global-dim(--size --25),
83 --font-size: fn.global-dim(--font-size --75),
84 ),
85 --lg: (
86 --pad-i: fn.global-dim(--size --250),
87 --pad-i-label: fn.global-dim(--size --100),
88 --pad-b: fn.global-dim(--size --100),
89 --font-size: fn.global-dim(--font-size --150),
90 ),
91 --xl: (
92 --pad-i: fn.global-dim(--size --300),
93 --pad-i-label: fn.global-dim(--size --150),
94 --pad-b: fn.global-dim(--size --150),
95 --font-size: fn.global-dim(--font-size --200),
96 ),
97
98 --key-focus: (
99 --border: fn.global-dim(--key-focus --border),
100 --border-offset: fn.global-dim(--key-focus --border-offset),
101 --outline: fn.global-dim(--key-focus --outline),
102 ),
103 ),
104 --colors: (
105 --bg: fn.global-color(--border-mute),
106 --label: fn.global-color(--text),
107 --outline-border: fn.global-color(--border),
108 --outline-label: fn.global-color(--text),
109
110 --hover: (
111 --bg: fn.global-color(--border),
112 --label: fn.global-color(--heading),
113 ),
114 --active: (
115 --bg: fn.global-color(--border-strong),
116 --label: fn.global-color(--heading),
117 ),
118 --disabled: (
119 --bg: fn.global-color(--border-mute),
120 --outline-border: fn.global-color(--border),
121 --label: fn.global-color(--text-disabled),
122 ),
123 --key-focus: (
124 --label: fn.global-color(--focus --text),
125 --border: fn.global-color(--focus --border),
126 --outline: fn.global-color(--focus --outline),
127 ),
128
129 --primary: (
130 --bg: fn.global-color(--base --800),
131 --label: fn.global-color(--base --800-text),
132 --outline-border: fn.global-color(--base --800),
133 --outline-label: fn.global-color(--text),
134
135 --hover: (
136 --bg: fn.global-color(--base --900),
137 --label: fn.global-color(--base --900-text),
138 ),
139 --active: (
140 --bg: fn.global-color(--base --900),
141 --label: fn.global-color(--base --900-text),
142 ),
143 ),
144 ),
145 ));
146
147 @each $theme in $themes {
148 @include iro.props-store((
149 --colors: (
150 --#{$theme}: (
151 --bg: fn.global-color(--#{$theme}-static --900),
152 --label: fn.global-color(--#{$theme}-static --900-text),
153 --outline-border: fn.global-color(--#{$theme} --900),
154 --outline-label: fn.global-color(--#{$theme} --1000),
155
156 --hover: (
157 --bg: fn.global-color(--#{$theme}-static --1000),
158 --label: fn.global-color(--#{$theme}-static --1000-text),
159 ),
160 --active: (
161 --bg: fn.global-color(--#{$theme}-static --1100),
162 --label: fn.global-color(--#{$theme}-static --1100-text),
163 ),
164 ),
165 ),
166 ));
167 }
168
169 @each $theme in $static-themes {
170 @include iro.props-store((
171 --colors: (
172 --static-#{$theme}: (
173 --bg: fn.global-color(--#{$theme}-transparent --200),
174 --label: fn.global-color(--#{$theme}-transparent --900),
175 --outline-border: fn.global-color(--#{$theme}-transparent --300),
176 --outline-label: fn.global-color(--#{$theme}-transparent --900),
177
178 --hover: (
179 --bg: fn.global-color(--#{$theme}-transparent --300),
180 --label: fn.global-color(--#{$theme}-transparent --900),
181 ),
182 --active: (
183 --bg: fn.global-color(--#{$theme}-transparent --400),
184 --label: fn.global-color(--#{$theme}-transparent --900),
185 ),
186 --disabled: (
187 --bg: fn.global-color(--#{$theme}-transparent --200),
188 --outline-border: fn.global-color(--#{$theme}-transparent --300),
189 --label: fn.global-color(--#{$theme}-transparent --500),
190 ),
191 --key-focus: (
192 --bg: fn.global-color(--#{$theme}-transparent --100),
193 --label: fn.global-color(--#{$theme}-transparent --900),
194 --border: fn.global-color(--#{$theme}-transparent --900),
195 --outline: fn.global-color(--#{$theme}-transparent --300),
196 ),
197
198 --primary: (
199 --bg: fn.global-color(--#{$theme}-transparent --800),
200 --label: fn.global-color(--#{$theme}-transparent --text),
201 --outline-border: fn.global-color(--#{$theme}-transparent --800),
202 --outline-label: fn.global-color(--#{$theme}-transparent --900),
203
204 --hover: (
205 --bg: fn.global-color(--#{$theme}-transparent --900),
206 --label: fn.global-color(--#{$theme}-transparent --text),
207 ),
208 --active: (
209 --bg: fn.global-color(--#{$theme}-transparent --900),
210 --label: fn.global-color(--#{$theme}-transparent --text),
211 ),
212 ),
213 ),
214 ),
215 ));
216 }
217
218 @include iro.bem-object(iro.props-namespace()) {
219 position: relative; 80 position: relative;
220 display: inline-block; 81 display: inline-block;
221 padding-block: fn.dim(--pad-b); 82 padding-block: props.get(vars.$pad-b);
222 padding-inline: fn.dim(--pad-i); 83 padding-inline: props.get(vars.$pad-i);
223 font-size: fn.dim(--font-size); 84 font-size: props.get(vars.$font-size);
224 font-weight: 500; 85 font-weight: 500;
225 line-height: fn.dim(--line-height); 86 line-height: props.get(vars.$line-height);
226 color: fn.color(--disabled --label);
227 text-align: center; 87 text-align: center;
228 text-decoration: none; 88 text-decoration: none;
229 background-color: fn.color(--disabled --bg); 89 border: props.get(vars.$border-width) solid transparent;
230 border: fn.dim(--border) solid transparent; 90 border-radius: props.get(vars.$rounding);
231 border-color: fn.color(--disabled --bg);
232 border-radius: fn.dim(--rounding);
233 91
234 &::after { 92 &::after {
235 position: absolute; 93 position: absolute;
236 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); 94 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
237 z-index: 1; 95 z-index: 1;
238 display: none; 96 display: none;
239 pointer-events: none; 97 pointer-events: none;
240 content: ''; 98 content: '';
241 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
242 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 100 outline: transparent solid props.get(vars.$key-focus--border-width);
243 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
244 } 101 }
245 102
246 &:link, 103 &:link,
@@ -254,7 +111,7 @@ $static-themes: 'black' 'white' !default;
254 } 111 }
255 112
256 @include iro.bem-elem('label') { 113 @include iro.bem-elem('label') {
257 margin-inline: fn.dim(--pad-i-label); 114 margin-inline: props.get(vars.$pad-i-label);
258 } 115 }
259 116
260 @include iro.bem-modifier('block') { 117 @include iro.bem-modifier('block') {
@@ -263,37 +120,36 @@ $static-themes: 'black' 'white' !default;
263 120
264 @include iro.bem-modifier('outline') { 121 @include iro.bem-modifier('outline') {
265 background-color: transparent; 122 background-color: transparent;
266 border-color: fn.color(--disabled --outline-border);
267 } 123 }
268 124
269 @each $size in $sizes { 125 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes {
270 @include iro.bem-modifier($size) { 126 @include iro.bem-modifier($mod) {
271 padding-block: fn.dim(--#{$size} --pad-b); 127 padding-block: props.get($pad-b);
272 padding-inline: fn.dim(--#{$size} --pad-i); 128 padding-inline: props.get($pad-i);
273 font-size: fn.dim(--#{$size} --font-size); 129 font-size: props.get($font-size);
274 130
275 @include iro.bem-elem('label') { 131 @include iro.bem-elem('label') {
276 margin-inline: fn.dim(--#{$size} --pad-i-label); 132 margin-inline: props.get($pad-i-label);
277 } 133 }
278 } 134 }
279 } 135 }
280 136
281 @include static-theme; 137 @include -apply-static-theme(vars.$default-theme);
282 138
283 @each $theme in $themes { 139 @each $theme in map.keys(props.get(vars.$themes)) {
284 @include iro.bem-modifier($theme) { 140 @include iro.bem-modifier(string.slice($theme, 3)) {
285 @include theme(--#{$theme}); 141 @include -apply-theme(vars.$themes, $theme);
286 } 142 }
287 } 143 }
288 144
289 @each $theme in $static-themes { 145 @each $theme in map.keys(props.get(vars.$static-themes)) {
290 @include iro.bem-modifier(static-#{$theme}) { 146 @include iro.bem-modifier(string.slice($theme, 3)) {
291 @include static-theme(--static-#{$theme}); 147 @include -apply-static-theme(vars.$static-themes, $theme);
292 } 148 }
293 } 149 }
294 150
295 @include iro.bem-modifier('round') { 151 @include iro.bem-modifier('round') {
296 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); 152 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
297 padding-inline: 0; 153 padding-inline: 0;
298 border-radius: 100em; 154 border-radius: 100em;
299 } 155 }
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
new file mode 100644
index 0000000..80d9274
--- /dev/null
+++ b/src/objects/_button.vars.scss
@@ -0,0 +1,163 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$line-height: props.def(--o-button--line-height, 1.4) !default;
6$pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default;
7$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--75)) !default;
8$pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
9$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
10$rounding: props.def(--o-button--rounding, 10em) !default;
11$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
12
13$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default;
14$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default;
15$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
16$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
17
18$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default;
19$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default;
20$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default;
21$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
22
23$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default;
24$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default;
25$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
26$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
27
28$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
29$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
30$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
31
32$sizes: (
33 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm,
34 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg,
35 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl,
36) !default;
37
38$default-theme-override: () !default;
39$default-theme: props.def(--o-button, (
40 --default: (
41 --bg: props.get(core.$theme, --border-mute),
42 --label: props.get(core.$theme, --text),
43 --outline-border: props.get(core.$theme, --border),
44 --outline-label: props.get(core.$theme, --text),
45
46 --hover: (
47 --bg: props.get(core.$theme, --border),
48 --label: props.get(core.$theme, --heading),
49 ),
50 --active: (
51 --bg: props.get(core.$theme, --border-strong),
52 --label: props.get(core.$theme, --heading),
53 ),
54 --disabled: (
55 --bg: props.get(core.$theme, --border-mute),
56 --outline-border: props.get(core.$theme, --border),
57 --label: props.get(core.$theme, --text-disabled),
58 ),
59 --key-focus: (
60 --label: props.get(core.$theme, --focus --text),
61 --border: props.get(core.$theme, --focus --border),
62 --outline: props.get(core.$theme, --focus --outline),
63 ),
64 ),
65));
66$default-theme: props.merge($default-theme, $default-theme-override);
67
68$static-themes: props.def(--o-button);
69
70@each $theme in map.keys(props.get(core.$transparent-colors)) {
71 $button-theme: #{$theme}-static;
72
73 $static-themes: props.merge($static-themes, (
74 $button-theme: (
75 --bg: props.get(core.$transparent-colors, $theme, --200),
76 --label: props.get(core.$transparent-colors, $theme, --900),
77 --outline-border: props.get(core.$transparent-colors, $theme, --300),
78 --outline-label: props.get(core.$transparent-colors, $theme, --900),
79
80 --hover: (
81 --bg: props.get(core.$transparent-colors, $theme, --300),
82 --label: props.get(core.$transparent-colors, $theme, --900),
83 ),
84
85 --active: (
86 --bg: props.get(core.$transparent-colors, $theme, --400),
87 --label: props.get(core.$transparent-colors, $theme, --900),
88 ),
89
90 --disabled: (
91 --bg: props.get(core.$transparent-colors, $theme, --200),
92 --outline-border: props.get(core.$transparent-colors, $theme, --300),
93 --label: props.get(core.$transparent-colors, $theme, --500),
94 ),
95
96 --key-focus: (
97 --bg: props.get(core.$transparent-colors, $theme, --100),
98 --label: props.get(core.$transparent-colors, $theme, --900),
99 --border: props.get(core.$transparent-colors, $theme, --900),
100 --outline: props.get(core.$transparent-colors, $theme, --300),
101 ),
102
103 --primary: (
104 --bg: props.get(core.$transparent-colors, $theme, --800),
105 --label: props.get(core.$transparent-colors, $theme, --text),
106 --outline-border: props.get(core.$transparent-colors, $theme, --800),
107 --outline-label: props.get(core.$transparent-colors, $theme, --900),
108
109 --hover: (
110 --bg: props.get(core.$transparent-colors, $theme, --900),
111 --label: props.get(core.$transparent-colors, $theme, --text),
112 ),
113
114 --active: (
115 --bg: props.get(core.$transparent-colors, $theme, --900),
116 --label: props.get(core.$transparent-colors, $theme, --text),
117 ),
118 )
119 )
120 ));
121}
122
123$themes-config: --accent --negative !default;
124
125$themes: props.def(--o-button, (
126 --primary: (
127 --bg: props.get(core.$theme, --base, --800),
128 --label: props.get(core.$theme, --base, --800-text),
129 --outline-border: props.get(core.$theme, --base, --800),
130 --outline-label: props.get(core.$theme, --text),
131
132 --hover: (
133 --bg: props.get(core.$theme, --base, --900),
134 --label: props.get(core.$theme, --base, --900-text),
135 ),
136
137 --active: (
138 --bg: props.get(core.$theme, --base, --900),
139 --label: props.get(core.$theme, --base, --900-text),
140 ),
141 ),
142));
143
144@each $theme in $themes-config {
145 $themes: props.merge($themes, (
146 $theme: (
147 --bg: props.get(core.$static-colors, $theme, --900),
148 --label: props.get(core.$static-colors, $theme, --900-text),
149 --outline-border: props.get(core.$theme, $theme, --900),
150 --outline-label: props.get(core.$theme, $theme, --1000),
151
152 --hover: (
153 --bg: props.get(core.$static-colors, $theme, --1000),
154 --label: props.get(core.$static-colors, $theme, --1000-text),
155 ),
156
157 --active: (
158 --bg: props.get(core.$static-colors, $theme, --1100),
159 --label: props.get(core.$static-colors, $theme, --1100-text),
160 ),
161 )
162 ));
163}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 07:08:21 +0000