diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_checkbox.vars.scss | 6 | ||||
-rw-r--r-- | src/objects/_field-label.scss | 1 | ||||
-rw-r--r-- | src/objects/_lightbox.scss | 104 | ||||
-rw-r--r-- | src/objects/_lightbox.vars.scss | 57 | ||||
-rw-r--r-- | src/objects/_menu.scss | 122 | ||||
-rw-r--r-- | src/objects/_menu.vars.scss | 29 | ||||
-rw-r--r-- | src/objects/_palette.scss | 29 | ||||
-rw-r--r-- | src/objects/_popover.scss | 45 | ||||
-rw-r--r-- | src/objects/_popover.vars.scss | 14 | ||||
-rw-r--r-- | src/objects/_radio.scss | 118 | ||||
-rw-r--r-- | src/objects/_radio.vars.scss | 33 | ||||
-rw-r--r-- | src/objects/_side-nav.scss | 103 | ||||
-rw-r--r-- | src/objects/_side-nav.vars.scss | 28 | ||||
-rw-r--r-- | src/objects/_status-indicator.scss | 42 | ||||
-rw-r--r-- | src/objects/_status-indicator.vars.scss | 21 |
15 files changed, 377 insertions, 375 deletions
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss index d0785d7..cba736e 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss | |||
@@ -10,9 +10,9 @@ $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !def | |||
10 | $rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; | 10 | $rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !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-card--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; |
14 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | 14 | $key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; |
15 | $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | 15 | $key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; |
16 | 16 | ||
17 | $box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default; | 17 | $box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default; |
18 | $box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default; | 18 | $box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default; |
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 467d30a..4ffe8f0 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
@@ -1,7 +1,6 @@ | |||
1 | @use 'sass:meta'; | 1 | @use 'sass:meta'; |
2 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
3 | @use '../props'; | 3 | @use '../props'; |
4 | @use 'icon.vars' as icon; | ||
5 | 4 | ||
6 | @forward 'field-label.vars'; | 5 | @forward 'field-label.vars'; |
7 | @use 'field-label.vars' as vars; | 6 | @use 'field-label.vars' as vars; |
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 740f4e5..66faab5 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
@@ -1,14 +1,16 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:meta'; | ||
3 | @use 'sass:string'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 4 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 5 | @use '../props'; |
3 | 6 | ||
4 | @use 'action-button'; | 7 | @forward 'lightbox.vars'; |
8 | @use 'lightbox.vars' as vars; | ||
5 | 9 | ||
6 | $static-themes: 'black' 'white' !default; | 10 | @mixin styles { |
11 | @include props.materialize(meta.module-variables('vars')); | ||
7 | 12 | ||
8 | @include iro.props-namespace('lightbox') { | 13 | @include iro.bem-object('lightbox') { |
9 | |||
10 | |||
11 | @include iro.bem-object(iro.props-namespace()) { | ||
12 | box-sizing: border-box; | 14 | box-sizing: border-box; |
13 | display: grid; | 15 | display: grid; |
14 | flex: 1 1 auto; | 16 | flex: 1 1 auto; |
@@ -25,8 +27,8 @@ $static-themes: 'black' 'white' !default; | |||
25 | display: flex; | 27 | display: flex; |
26 | grid-area: header; | 28 | grid-area: header; |
27 | align-items: flex-start; | 29 | align-items: flex-start; |
28 | padding-block-start: fn.dim(--pad); | 30 | padding-block-start: props.get(vars.$pad); |
29 | padding-inline: fn.dim(--pad); | 31 | padding-inline: props.get(vars.$pad); |
30 | } | 32 | } |
31 | 33 | ||
32 | @include iro.bem-elem('img') { | 34 | @include iro.bem-elem('img') { |
@@ -36,7 +38,7 @@ $static-themes: 'black' 'white' !default; | |||
36 | place-self: center; | 38 | place-self: center; |
37 | max-inline-size: 100%; | 39 | max-inline-size: 100%; |
38 | max-block-size: 100%; | 40 | max-block-size: 100%; |
39 | padding: fn.dim(--pad); | 41 | padding: props.get(vars.$pad); |
40 | 42 | ||
41 | @include iro.bem-sibling-elem('img') { | 43 | @include iro.bem-sibling-elem('img') { |
42 | @include iro.bem-modifier('default') { | 44 | @include iro.bem-modifier('default') { |
@@ -82,9 +84,9 @@ $static-themes: 'black' 'white' !default; | |||
82 | @include iro.bem-elem('thumbnails') { | 84 | @include iro.bem-elem('thumbnails') { |
83 | display: flex; | 85 | display: flex; |
84 | grid-area: thumbnails; | 86 | grid-area: thumbnails; |
85 | gap: fn.dim(--thumbnail --spacing); | 87 | gap: props.get(vars.$thumbnail--spacing); |
86 | padding: fn.dim(--pad); | 88 | padding: props.get(vars.$pad); |
87 | margin-block-start: calc(-1 * fn.dim(--pad)); | 89 | margin-block-start: calc(-1 * props.get(vars.$pad)); |
88 | overflow: auto; | 90 | overflow: auto; |
89 | } | 91 | } |
90 | 92 | ||
@@ -92,47 +94,52 @@ $static-themes: 'black' 'white' !default; | |||
92 | display: flex; | 94 | display: flex; |
93 | grid-area: footer; | 95 | grid-area: footer; |
94 | align-items: flex-start; | 96 | align-items: flex-start; |
95 | padding-block: 0 fn.dim(--pad); | 97 | padding-block: 0 props.get(vars.$pad); |
96 | padding-inline: fn.dim(--pad); | 98 | padding-inline: props.get(vars.$pad); |
97 | } | 99 | } |
98 | 100 | ||
99 | @include iro.bem-elem('thumbnail') { | 101 | @include iro.bem-elem('thumbnail') { |
100 | position: relative; | 102 | position: relative; |
101 | flex: 0 0 auto; | 103 | flex: 0 0 auto; |
102 | inline-size: fn.dim(--thumbnail --size); | 104 | inline-size: props.get(vars.$thumbnail--size); |
103 | block-size: fn.dim(--thumbnail --size); | 105 | block-size: props.get(vars.$thumbnail--size); |
104 | overflow: hidden; | 106 | overflow: hidden; |
105 | border-radius: fn.dim(--thumbnail --rounding); | 107 | border-radius: props.get(vars.$thumbnail--rounding); |
106 | outline: fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border); | 108 | outline: props.get(vars.$thumbnail--border-color) solid props.get(vars.$thumbnail--border-width); |
107 | outline-offset: calc(-1 * fn.dim(--thumbnail --border)); | 109 | outline-offset: calc(-1 * props.get(vars.$thumbnail--border-width)); |
108 | opacity: .75; | 110 | opacity: .75; |
109 | 111 | ||
110 | &:hover, | 112 | &:hover, |
111 | &:active, | 113 | &:active, |
112 | &:focus-visible { | 114 | &:focus-visible { |
113 | outline-color: fn.color(--thumbnail --hover --border); | 115 | outline-color: props.get(vars.$thumbnail--hover--border-color); |
114 | opacity: 1; | 116 | opacity: 1; |
115 | } | 117 | } |
116 | 118 | ||
117 | @include iro.bem-is('selected') { | 119 | @include iro.bem-is('selected') { |
118 | $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border)); | 120 | $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width)); |
119 | 121 | ||
120 | margin: $focus-border-offset; | 122 | margin: $focus-border-offset; |
121 | border: fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border); | 123 | border: props.get(vars.$thumbnail--selected--border-width) solid props.get(vars.$thumbnail--selected--border-color); |
122 | border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); | 124 | border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset); |
123 | outline: none; | 125 | outline: none; |
124 | opacity: 1; | 126 | opacity: 1; |
125 | } | 127 | } |
126 | 128 | ||
127 | &:focus-visible { | 129 | &:focus-visible { |
128 | $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset)); | 130 | $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--key-focus--border-offset)); |
129 | 131 | ||
130 | margin: $focus-border-offset; | 132 | margin: $focus-border-offset; |
131 | border: fn.dim(--thumbnail --key-focus --border-offset) solid transparent; | 133 | border: props.get(vars.$thumbnail--key-focus--border-offset) solid transparent; |
132 | border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); | 134 | border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset); |
133 | outline: fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border); | 135 | outline: props.get(vars.$thumbnail--key-focus--border-color) solid props.get(vars.$thumbnail--key-focus--border-width); |
134 | outline-offset: 0; | 136 | outline-offset: 0; |
135 | box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline); | 137 | box-shadow: |
138 | 0 | ||
139 | 0 | ||
140 | 0 | ||
141 | calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width)) | ||
142 | props.get(vars.$thumbnail--key-focus--outline-color); | ||
136 | } | 143 | } |
137 | } | 144 | } |
138 | 145 | ||
@@ -156,9 +163,9 @@ $static-themes: 'black' 'white' !default; | |||
156 | 163 | ||
157 | @include iro.bem-elem('close-btn') { | 164 | @include iro.bem-elem('close-btn') { |
158 | flex: 0 0 auto; | 165 | flex: 0 0 auto; |
159 | margin-block-start: calc(-.5 * fn.dim(--pad)); | 166 | margin-block-start: calc(-.5 * props.get(vars.$pad)); |
160 | margin-inline: auto calc(-.5 * fn.dim(--pad)); | 167 | margin-inline: auto calc(-.5 * props.get(vars.$pad)); |
161 | font-size: fn.dim(--close-button --font-size); | 168 | font-size: props.get(vars.$close-button--font-size); |
162 | } | 169 | } |
163 | 170 | ||
164 | @include iro.bem-elem('nav-btn') { | 171 | @include iro.bem-elem('nav-btn') { |
@@ -166,21 +173,21 @@ $static-themes: 'black' 'white' !default; | |||
166 | display: none; | 173 | display: none; |
167 | align-self: center; | 174 | align-self: center; |
168 | overflow: visible; | 175 | overflow: visible; |
169 | font-size: fn.dim(--nav-button --font-size); | 176 | font-size: props.get(vars.$nav-button--font-size); |
170 | 177 | ||
171 | &::before { | 178 | &::before { |
172 | position: absolute; | 179 | position: absolute; |
173 | inset-block-start: 50%; | 180 | inset-block-start: 50%; |
174 | display: block; | 181 | display: block; |
175 | inline-size: fn.dim(--nav-button --width); | 182 | inline-size: props.get(vars.$nav-button--inline-size); |
176 | block-size: fn.dim(--nav-button --height); | 183 | block-size: props.get(vars.$nav-button--block-size); |
177 | content: ''; | 184 | content: ''; |
178 | transform: translateY(-50%); | 185 | transform: translateY(-50%); |
179 | } | 186 | } |
180 | 187 | ||
181 | @include iro.bem-modifier('prev') { | 188 | @include iro.bem-modifier('prev') { |
182 | grid-area: prev; | 189 | grid-area: prev; |
183 | margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad)); | 190 | margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); |
184 | 191 | ||
185 | &::before { | 192 | &::before { |
186 | inset-inline-start: 0; | 193 | inset-inline-start: 0; |
@@ -189,35 +196,40 @@ $static-themes: 'black' 'white' !default; | |||
189 | 196 | ||
190 | @include iro.bem-modifier('next') { | 197 | @include iro.bem-modifier('next') { |
191 | grid-area: next; | 198 | grid-area: next; |
192 | margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad)); | 199 | margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); |
193 | 200 | ||
194 | &::before { | 201 | &::before { |
195 | inset-inline-end: 0; | 202 | inset-inline-end: 0; |
196 | } | 203 | } |
197 | } | 204 | } |
198 | } | 205 | } |
199 | 206 | ||
200 | @each $theme in $static-themes { | 207 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
201 | @include iro.bem-modifier(static-#{$theme}) { | 208 | @include iro.bem-modifier(string.slice($theme, 3)) { |
202 | color: fn.color(--static-#{$theme} --text); | 209 | color: props.get(vars.$static-themes, $theme, --text); |
203 | 210 | ||
204 | @include iro.bem-elem('thumbnail') { | 211 | @include iro.bem-elem('thumbnail') { |
205 | outline-color: fn.color(--static-#{$theme} --thumbnail --border); | 212 | outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border); |
206 | 213 | ||
207 | &:hover, | 214 | &:hover, |
208 | &:active, | 215 | &:active, |
209 | &:focus-visible { | 216 | &:focus-visible { |
210 | outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border); | 217 | outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border); |
211 | } | 218 | } |
212 | 219 | ||
213 | @include iro.bem-is('selected') { | 220 | @include iro.bem-is('selected') { |
214 | border-color: fn.color(--static-#{$theme} --thumbnail --selected --border); | 221 | border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border); |
215 | } | 222 | } |
216 | 223 | ||
217 | &:focus-visible { | 224 | &:focus-visible { |
218 | border-color: transparent; | 225 | border-color: transparent; |
219 | outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border); | 226 | outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --border); |
220 | box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline); | 227 | box-shadow: |
228 | 0 | ||
229 | 0 | ||
230 | 0 | ||
231 | calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width)) | ||
232 | props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --outline); | ||
221 | } | 233 | } |
222 | } | 234 | } |
223 | } | 235 | } |
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index 1538cae..32324a4 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss | |||
@@ -1,3 +1,4 @@ | |||
1 | @use 'sass:map'; | ||
1 | @use '../props'; | 2 | @use '../props'; |
2 | @use '../core.vars' as core; | 3 | @use '../core.vars' as core; |
3 | 4 | ||
@@ -29,42 +30,34 @@ $thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected- | |||
29 | $thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | 30 | $thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; |
30 | $thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | 31 | $thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; |
31 | 32 | ||
33 | $thumbnail--size--md: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default; | ||
34 | $nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default; | ||
35 | $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default; | ||
32 | 36 | ||
37 | $static-themes: props.def(--o-lightbox); | ||
33 | 38 | ||
34 | @each $theme in $static-themes { | 39 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
35 | @include iro.props-store(( | 40 | $lightbox-theme: #{$theme}-static; |
36 | --colors: ( | ||
37 | --static-#{$theme}: ( | ||
38 | --text: fn.global-color(--white-transparent --800), | ||
39 | --thumbnail: ( | ||
40 | --border: fn.global-color(--white-transparent --400), | ||
41 | |||
42 | --hover: ( | ||
43 | --border: fn.global-color(--white-transparent --500), | ||
44 | ), | ||
45 | |||
46 | --selected: ( | ||
47 | --border: fn.global-color(--white-transparent --900), | ||
48 | ), | ||
49 | 41 | ||
50 | --key-focus: ( | 42 | $static-themes: props.merge($static-themes, ( |
51 | --border: fn.global-color(--#{$theme}-transparent --900), | 43 | $lightbox-theme: ( |
52 | --outline: fn.global-color(--#{$theme}-transparent --300), | 44 | --text: props.get(core.$transparent-colors, $theme, --800), |
53 | ), | 45 | --thumbnail: ( |
46 | --border: props.get(core.$transparent-colors, $theme, --400), | ||
47 | |||
48 | --hover: ( | ||
49 | --border: props.get(core.$transparent-colors, $theme, --500), | ||
54 | ), | 50 | ), |
55 | ) | 51 | |
52 | --selected: ( | ||
53 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
54 | ), | ||
55 | |||
56 | --key-focus: ( | ||
57 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
58 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
59 | ), | ||
60 | ), | ||
56 | ) | 61 | ) |
57 | )); | 62 | )); |
58 | } | 63 | } |
59 | |||
60 | @include iro.props-store(( | ||
61 | --dims: ( | ||
62 | --thumbnail: ( | ||
63 | --size: fn.global-dim(--size --600), | ||
64 | ), | ||
65 | --nav-button: ( | ||
66 | --width: fn.global-dim(--size --2500), | ||
67 | --height: fn.global-dim(--size --2500), | ||
68 | ), | ||
69 | ), | ||
70 | ), 'md'); | ||
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 12e9755..f9453ce 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
@@ -1,82 +1,41 @@ | |||
1 | /* stylelint-disable length-zero-no-unit */ | 1 | @use 'sass:meta'; |
2 | |||
3 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
4 | @use '../functions' as fn; | 3 | @use '../props'; |
5 | 4 | @use 'icon.vars' as icon; | |
6 | @use './icon'; | 5 | |
7 | 6 | @forward 'menu.vars'; | |
8 | @include iro.props-namespace('menu') { | 7 | @use 'menu.vars' as vars; |
9 | @include iro.props-store(( | 8 | |
10 | --dims: ( | 9 | @mixin styles { |
11 | --spacing: 0em, | 10 | @include props.materialize(meta.module-variables('vars')); |
12 | --header: ( | 11 | |
13 | --font-size: fn.global-dim(--font-size --50), | 12 | @include iro.bem-object('menu') { |
14 | ), | ||
15 | --separator: fn.global-dim(--size --100), | ||
16 | --item: ( | ||
17 | --pad-i: fn.global-dim(--size --150), | ||
18 | --pad-b: fn.global-dim(--size --100), | ||
19 | --rounding: 0em, | ||
20 | |||
21 | --key-focus: ( | ||
22 | --border: fn.global-dim(--key-focus --border), | ||
23 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
24 | --outline: fn.global-dim(--key-focus --outline), | ||
25 | ), | ||
26 | ), | ||
27 | ), | ||
28 | --colors: ( | ||
29 | --separator: fn.global-color(--border), | ||
30 | --header: ( | ||
31 | --label: fn.global-color(--heading), | ||
32 | ), | ||
33 | --item: ( | ||
34 | --hover: ( | ||
35 | --bg: fn.global-color(--border-mute), | ||
36 | --label: fn.global-color(--heading), | ||
37 | ), | ||
38 | --active: ( | ||
39 | --bg: fn.global-color(--border), | ||
40 | --label: fn.global-color(--heading), | ||
41 | ), | ||
42 | --disabled: ( | ||
43 | --label: fn.global-color(--text-disabled), | ||
44 | ), | ||
45 | --key-focus: ( | ||
46 | --border: fn.global-color(--focus --border), | ||
47 | --outline: fn.global-color(--focus --outline), | ||
48 | ), | ||
49 | ), | ||
50 | ), | ||
51 | )); | ||
52 | |||
53 | @include iro.bem-object(iro.props-namespace()) { | ||
54 | display: flex; | 13 | display: flex; |
55 | flex-direction: column; | 14 | flex-direction: column; |
56 | gap: fn.dim(--spacing); | 15 | gap: props.get(vars.$spacing); |
57 | 16 | ||
58 | @include iro.bem-elem('header') { | 17 | @include iro.bem-elem('header') { |
59 | padding-block: fn.dim(--item --pad-b); | 18 | padding-block: props.get(vars.$item--pad-b); |
60 | padding-inline: fn.dim(--item --pad-i); | 19 | padding-inline: props.get(vars.$item--pad-i); |
61 | font-size: fn.dim(--header --font-size); | 20 | font-size: props.get(vars.$header--font-size); |
62 | font-weight: 500; | 21 | font-weight: 500; |
63 | color: fn.color(--header --label); | 22 | color: props.get(vars.$header--label-color); |
64 | text-transform: uppercase; | 23 | text-transform: uppercase; |
65 | letter-spacing: .5px; | 24 | letter-spacing: .5px; |
66 | 25 | ||
67 | @include iro.bem-next-twin-elem { | 26 | @include iro.bem-next-twin-elem { |
68 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 27 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); |
69 | } | 28 | } |
70 | } | 29 | } |
71 | 30 | ||
72 | @include iro.bem-elem('item') { | 31 | @include iro.bem-elem('item') { |
73 | padding-block: fn.dim(--item --pad-b); | 32 | padding-block: props.get(vars.$item--pad-b); |
74 | padding-inline: fn.dim(--item --pad-i); | 33 | padding-inline: props.get(vars.$item--pad-i); |
75 | margin: calc(-1 * fn.dim(--item --key-focus --outline)); | 34 | margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); |
76 | color: fn.color(--item --disabled --label); | 35 | color: props.get(vars.$item--disabled--label-color); |
77 | background-clip: padding-box; | 36 | background-clip: padding-box; |
78 | border: fn.dim(--item --key-focus --outline) solid transparent; | 37 | border: props.get(vars.$item--key-focus--outline-width) solid transparent; |
79 | border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline)); | 38 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); |
80 | 39 | ||
81 | &:link, | 40 | &:link, |
82 | &:visited, | 41 | &:visited, |
@@ -84,23 +43,28 @@ | |||
84 | color: currentColor; | 43 | color: currentColor; |
85 | 44 | ||
86 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { | 45 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { |
87 | color: fn.color(--item --hover --label); | 46 | color: props.get(vars.$item--hover--label-color); |
88 | background-color: fn.color(--item --hover --bg); | 47 | background-color: props.get(vars.$item--hover--bg-color); |
89 | } | 48 | } |
90 | 49 | ||
91 | &:active { | 50 | &:active { |
92 | color: fn.color(--item --active --label); | 51 | color: props.get(vars.$item--active--label-color); |
93 | background-color: fn.color(--item --active --bg); | 52 | background-color: props.get(vars.$item--active--bg-color); |
94 | } | 53 | } |
95 | 54 | ||
96 | &:focus-visible { | 55 | &:focus-visible { |
97 | outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); | 56 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
98 | box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); | 57 | box-shadow: |
58 | 0 | ||
59 | 0 | ||
60 | 0 | ||
61 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | ||
62 | props.get(vars.$item--key-focus--outline-color); | ||
99 | } | 63 | } |
100 | } | 64 | } |
101 | 65 | ||
102 | @include iro.bem-next-elem('header') { | 66 | @include iro.bem-next-elem('header') { |
103 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 67 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); |
104 | } | 68 | } |
105 | } | 69 | } |
106 | 70 | ||
@@ -108,30 +72,30 @@ | |||
108 | &:link, | 72 | &:link, |
109 | &:visited, | 73 | &:visited, |
110 | &:enabled { | 74 | &:enabled { |
111 | color: fn.color(--header --label); | 75 | color: props.get(vars.$header--label-color); |
112 | } | 76 | } |
113 | } | 77 | } |
114 | 78 | ||
115 | @include iro.bem-elem('separator') { | 79 | @include iro.bem-elem('separator') { |
116 | block-size: 1px; | 80 | block-size: 1px; |
117 | margin-block: fn.dim(--separator); | 81 | margin-block: props.get(vars.$separator-width); |
118 | margin-inline: fn.dim(--item --pad-i); | 82 | margin-inline: props.get(vars.$item--pad-i); |
119 | background-color: fn.color(--separator); | 83 | background-color: props.get(vars.$separator-color); |
120 | } | 84 | } |
121 | 85 | ||
122 | @include iro.bem-elem('slot') { | 86 | @include iro.bem-elem('slot') { |
123 | padding-block: fn.dim(--item --pad-b); | 87 | padding-block: props.get(vars.$item--pad-b); |
124 | padding-inline: fn.dim(--item --pad-i); | 88 | padding-inline: props.get(vars.$item--pad-i); |
125 | } | 89 | } |
126 | 90 | ||
127 | @include iro.bem-elem('icon-slot') { | 91 | @include iro.bem-elem('icon-slot') { |
128 | display: flex; | 92 | display: flex; |
129 | justify-content: center; | 93 | justify-content: center; |
130 | inline-size: fn.foreign-dim(--icon, --size); | 94 | inline-size: props.get(icon.$size); |
131 | } | 95 | } |
132 | 96 | ||
133 | @include iro.bem-modifier('pull') { | 97 | @include iro.bem-modifier('pull') { |
134 | margin: calc(-1 * fn.dim(--item --pad-i)); | 98 | margin: calc(-1 * props.get(vars.$item--pad-i)); |
135 | } | 99 | } |
136 | } | 100 | } |
137 | } | 101 | } |
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss new file mode 100644 index 0000000..74a9f8a --- /dev/null +++ b/src/objects/_menu.vars.scss | |||
@@ -0,0 +1,29 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $spacing: props.def(--o-menu--spacing, 0em) !default; | ||
6 | $header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default; | ||
7 | $separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default; | ||
8 | |||
9 | $item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; | ||
10 | $item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; | ||
11 | $item--rounding: props.def(--o-menu--item--pad-b, props.get(core.$rounding)) !default; | ||
12 | |||
13 | $item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border)) !default; | ||
18 | $header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading)) !default; | ||
19 | |||
20 | $item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default; | ||
21 | $item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading)) !default; | ||
22 | |||
23 | $item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border)) !default; | ||
24 | $item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading)) !default; | ||
25 | |||
26 | $item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; | ||
27 | |||
28 | $item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | ||
29 | $item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | ||
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index 8291750..c4f8e96 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss | |||
@@ -1,32 +1,33 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:list'; | 1 | @use 'sass:list'; |
2 | @use 'sass:map'; | ||
3 | @use 'sass:string'; | 3 | @use 'sass:string'; |
4 | @use 'iro-sass/src/iro-sass' as iro; | 4 | @use 'iro-sass/src/iro-sass' as iro; |
5 | @use '../functions' as fn; | 5 | @use '../themes'; |
6 | @use '../config'; | 6 | @use '../props'; |
7 | @use '../core.vars' as core; | ||
7 | 8 | ||
8 | @include iro.props-namespace('palette') { | 9 | @mixin styles { |
9 | @include iro.bem-object(iro.props-namespace()) { | 10 | @include iro.bem-object('palette') { |
10 | display: flex; | 11 | display: flex; |
11 | block-size: 3em; | 12 | block-size: 3em; |
12 | 13 | ||
13 | @include iro.bem-elem('item') { | 14 | @include iro.bem-elem('item') { |
14 | flex: 1 1 auto; | 15 | flex: 1 1 auto; |
15 | 16 | ||
16 | $palette: map.get(config.$themes, config.$theme-default, --palettes, --base); | 17 | $palette: map.get(themes.$themes, themes.$theme-default, light, --palettes, --base); |
17 | $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); | 18 | $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); |
18 | 19 | ||
19 | @for $i from 1 through list.length($contrasts) { | 20 | @for $i from 1 through list.length($contrasts) { |
20 | $key: list.nth(map.keys($contrasts), $i); | 21 | $key: list.nth(map.keys($contrasts), $i); |
21 | 22 | ||
22 | &:nth-child(#{$i}) { | 23 | &:nth-child(#{$i}) { |
23 | background-color: fn.global-color(--base $key); | 24 | background-color: props.get(core.$theme, --base, $key); |
24 | } | 25 | } |
25 | } | 26 | } |
26 | } | 27 | } |
27 | 28 | ||
28 | @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) { | 29 | @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) { |
29 | $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); | 30 | $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); |
30 | 31 | ||
31 | @include iro.bem-modifier(string.slice($palette-name, 3)) { | 32 | @include iro.bem-modifier(string.slice($palette-name, 3)) { |
32 | @include iro.bem-elem('item') { | 33 | @include iro.bem-elem('item') { |
@@ -34,7 +35,7 @@ | |||
34 | $key: list.nth(map.keys($contrasts), $i); | 35 | $key: list.nth(map.keys($contrasts), $i); |
35 | 36 | ||
36 | &:nth-child(#{$i}) { | 37 | &:nth-child(#{$i}) { |
37 | background-color: fn.global-color($palette-name $key); | 38 | background-color: props.get(core.$theme, $palette-name, $key); |
38 | } | 39 | } |
39 | } | 40 | } |
40 | } | 41 | } |
@@ -42,8 +43,8 @@ | |||
42 | } | 43 | } |
43 | 44 | ||
44 | @include iro.bem-modifier('static') { | 45 | @include iro.bem-modifier('static') { |
45 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { | 46 | @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) { |
46 | $contrasts: map.get(config.$static-colors, --contrasts); | 47 | $contrasts: map.get(themes.$static-colors, --contrasts); |
47 | 48 | ||
48 | @include iro.bem-modifier(string.slice($palette-name, 3)) { | 49 | @include iro.bem-modifier(string.slice($palette-name, 3)) { |
49 | @include iro.bem-elem('item') { | 50 | @include iro.bem-elem('item') { |
@@ -51,7 +52,7 @@ | |||
51 | $key: list.nth(map.keys($contrasts), $i); | 52 | $key: list.nth(map.keys($contrasts), $i); |
52 | 53 | ||
53 | &:nth-child(#{$i}) { | 54 | &:nth-child(#{$i}) { |
54 | background-color: fn.global-color(#{$palette-name}-static $key); | 55 | background-color: props.get(core.$static-colors, $palette-name, $key); |
55 | } | 56 | } |
56 | } | 57 | } |
57 | } | 58 | } |
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 13550eb..f539da5 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss | |||
@@ -1,39 +1,24 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
3 | 4 | ||
4 | @include iro.props-namespace('popover') { | 5 | @forward 'popover.vars'; |
5 | @include iro.props-store(( | 6 | @use 'popover.vars' as vars; |
6 | --dims: ( | ||
7 | --z-index: 10000, | ||
8 | --pad-i: 0, | ||
9 | --pad-b: fn.global-dim(--size --85), | ||
10 | --separator: fn.global-dim(--size --85), | ||
11 | --rounding: fn.global-dim(--rounding), | ||
12 | --border: fn.global-dim(--border --thin), | ||
13 | ), | ||
14 | --colors: ( | ||
15 | --bg: fn.global-color(--bg-l2), | ||
16 | --border: fn.global-color(--border), | ||
17 | --filter: drop-shadow( | ||
18 | fn.global-dim(--shadow --x) | ||
19 | fn.global-dim(--shadow --y) | ||
20 | fn.global-dim(--shadow --blur) | ||
21 | fn.global-color(--shadow) | ||
22 | ), | ||
23 | ), | ||
24 | )); | ||
25 | 7 | ||
26 | @include iro.bem-object(iro.props-namespace()) { | 8 | @mixin styles { |
9 | @include props.materialize(meta.module-variables('vars')); | ||
10 | |||
11 | @include iro.bem-object('popover') { | ||
27 | position: absolute; | 12 | position: absolute; |
28 | inset-block-start: 0; | 13 | inset-block-start: 0; |
29 | inset-inline-start: 0; | 14 | inset-inline-start: 0; |
30 | z-index: fn.dim(--z-index); | 15 | z-index: props.get(vars.$z-index); |
31 | padding-block: fn.dim(--pad-b); | 16 | padding-block: props.get(vars.$pad-b); |
32 | padding-inline: fn.dim(--pad-i); | 17 | padding-inline: props.get(vars.$pad-i); |
33 | background-color: fn.color(--bg); | 18 | background-color: props.get(vars.$bg-color); |
34 | filter: fn.color(--filter); | 19 | filter: props.get(vars.$filter); |
35 | border: fn.dim(--border) solid fn.color(--border); | 20 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); |
36 | border-radius: fn.dim(--rounding); | 21 | border-radius: props.get(vars.$rounding); |
37 | transform: translate(var(--x), var(--y)); | 22 | transform: translate(var(--x), var(--y)); |
38 | 23 | ||
39 | @include iro.bem-modifier('up-left') { | 24 | @include iro.bem-modifier('up-left') { |
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss new file mode 100644 index 0000000..0d776ed --- /dev/null +++ b/src/objects/_popover.vars.scss | |||
@@ -0,0 +1,14 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $z-index: props.def(--o-popover--z-index, 11000) !default; | ||
6 | $pad-i: props.def(--o-popover--pad-i, 0) !default; | ||
7 | $pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default; | ||
8 | $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default; | ||
9 | $rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; | ||
10 | $border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; | ||
11 | |||
12 | $bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2)) !default; | ||
13 | $border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border)) !default; | ||
14 | $filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow))) !default; | ||
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index ad3e8d4..c1182d0 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
@@ -1,88 +1,51 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
4 | @use '../core.vars' as core; | ||
3 | 5 | ||
4 | @include iro.props-namespace('radio') { | 6 | @forward 'radio.vars'; |
5 | @include iro.props-store(( | 7 | @use 'radio.vars' as vars; |
6 | --dims: ( | ||
7 | --diameter: fn.global-dim(--size --200), | ||
8 | --label-gap: fn.global-dim(--size --125), | ||
9 | --border: fn.global-dim(--border --medium), | ||
10 | --pad-i: fn.global-dim(--size --65), | ||
11 | --pad-b: fn.global-dim(--size --65), | ||
12 | --rounding: fn.global-dim(--rounding), | ||
13 | --spacing-sibling: fn.global-dim(--size --300), | ||
14 | 8 | ||
15 | --key-focus: ( | 9 | @mixin styles { |
16 | --border: fn.global-dim(--key-focus --border), | 10 | @include props.materialize(meta.module-variables('vars')); |
17 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
18 | --outline: fn.global-dim(--key-focus --outline), | ||
19 | ), | ||
20 | ), | ||
21 | --colors: ( | ||
22 | --circle-border: fn.global-color(--text-mute-more), | ||
23 | --circle-bg: fn.global-color(--base --75), | ||
24 | |||
25 | --hover: ( | ||
26 | --label: fn.global-color(--heading), | ||
27 | --circle-border: fn.global-color(--text-mute), | ||
28 | ), | ||
29 | --accent: ( | ||
30 | --circle-border: fn.global-color(--accent --900), | ||
31 | |||
32 | --hover: ( | ||
33 | --circle-border: fn.global-color(--accent --1000), | ||
34 | ), | ||
35 | ), | ||
36 | --disabled: ( | ||
37 | --label: fn.global-color(--text-disabled), | ||
38 | --circle-border: fn.global-color(--border-strong), | ||
39 | --circle-bg: fn.global-color(--base --75), | ||
40 | ), | ||
41 | --key-focus: ( | ||
42 | --label: fn.global-color(--focus --text), | ||
43 | --border: fn.global-color(--focus --border), | ||
44 | --outline: fn.global-color(--focus --outline), | ||
45 | ), | ||
46 | ), | ||
47 | )); | ||
48 | 11 | ||
49 | @include iro.bem-object(iro.props-namespace()) { | 12 | @include iro.bem-object('radio') { |
50 | position: relative; | 13 | position: relative; |
51 | display: inline-block; | 14 | display: inline-block; |
52 | padding-block: fn.dim(--pad-b); | 15 | padding-block: props.get(vars.$pad-b); |
53 | padding-inline: fn.dim(--pad-i); | 16 | padding-inline: props.get(vars.$pad-i); |
54 | margin-inline: | 17 | margin-inline: |
55 | calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) | 18 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
56 | calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); | 19 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); |
57 | 20 | ||
58 | @include iro.bem-elem('circle') { | 21 | @include iro.bem-elem('circle') { |
59 | display: inline-block; | 22 | display: inline-block; |
60 | flex: 0 0 auto; | 23 | flex: 0 0 auto; |
61 | inline-size: fn.dim(--diameter); | 24 | inline-size: props.get(vars.$diameter); |
62 | block-size: fn.dim(--diameter); | 25 | block-size: props.get(vars.$diameter); |
63 | margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset)); | 26 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); |
64 | vertical-align: top; | 27 | vertical-align: top; |
65 | background-color: fn.color(--circle-border); | 28 | background-color: props.get(vars.$circle-border-color); |
66 | background-clip: padding-box; | 29 | background-clip: padding-box; |
67 | border: fn.dim(--key-focus --border-offset) solid transparent; | 30 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
68 | border-radius: 2em; | 31 | border-radius: 2em; |
69 | 32 | ||
70 | &::after { | 33 | &::after { |
71 | position: relative; | 34 | position: relative; |
72 | inset-block-start: fn.dim(--border); | 35 | inset-block-start: props.get(vars.$border-width); |
73 | inset-inline-start: fn.dim(--border); | 36 | inset-inline-start: props.get(vars.$border-width); |
74 | display: block; | 37 | display: block; |
75 | inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); | 38 | inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); |
76 | block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); | 39 | block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); |
77 | content: ''; | 40 | content: ''; |
78 | background-color: fn.color(--circle-bg); | 41 | background-color: props.get(vars.$circle-bg-color); |
79 | border-radius: fn.dim(--diameter); | 42 | border-radius: props.get(vars.$diameter); |
80 | transition: transform .2s ease; | 43 | transition: transform .2s ease; |
81 | } | 44 | } |
82 | } | 45 | } |
83 | 46 | ||
84 | @include iro.bem-elem('label') { | 47 | @include iro.bem-elem('label') { |
85 | margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); | 48 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); |
86 | } | 49 | } |
87 | 50 | ||
88 | @include iro.bem-elem('native') { | 51 | @include iro.bem-elem('native') { |
@@ -96,16 +59,16 @@ | |||
96 | margin: 0; | 59 | margin: 0; |
97 | overflow: hidden; | 60 | overflow: hidden; |
98 | appearance: none; | 61 | appearance: none; |
99 | border-radius: fn.dim(--rounding); | 62 | border-radius: props.get(vars.$rounding); |
100 | 63 | ||
101 | &:hover, | 64 | &:hover, |
102 | &:focus-visible { | 65 | &:focus-visible { |
103 | @include iro.bem-sibling-elem('label') { | 66 | @include iro.bem-sibling-elem('label') { |
104 | color: fn.color(--hover --label); | 67 | color: props.get(vars.$hover--label-color); |
105 | } | 68 | } |
106 | 69 | ||
107 | @include iro.bem-sibling-elem('circle') { | 70 | @include iro.bem-sibling-elem('circle') { |
108 | background-color: fn.color(--hover --circle-border); | 71 | background-color: props.get(vars.$hover--circle-border-color); |
109 | } | 72 | } |
110 | } | 73 | } |
111 | 74 | ||
@@ -119,26 +82,31 @@ | |||
119 | 82 | ||
120 | &:disabled { | 83 | &:disabled { |
121 | @include iro.bem-sibling-elem('label') { | 84 | @include iro.bem-sibling-elem('label') { |
122 | color: fn.color(--disabled --label); | 85 | color: props.get(vars.$disabled--label-color); |
123 | } | 86 | } |
124 | 87 | ||
125 | @include iro.bem-sibling-elem('circle') { | 88 | @include iro.bem-sibling-elem('circle') { |
126 | background-color: fn.color(--disabled --circle-border); | 89 | background-color: props.get(vars.$disabled--circle-border-color); |
127 | 90 | ||
128 | &::after { | 91 | &::after { |
129 | background-color: fn.color(--disabled --circle-bg); | 92 | background-color: props.get(vars.$disabled--circle-bg-color); |
130 | } | 93 | } |
131 | } | 94 | } |
132 | } | 95 | } |
133 | 96 | ||
134 | &:focus-visible { | 97 | &:focus-visible { |
135 | @include iro.bem-sibling-elem('label') { | 98 | @include iro.bem-sibling-elem('label') { |
136 | color: fn.color(--key-focus --label); | 99 | color: props.get(vars.$key-focus--label-color); |
137 | } | 100 | } |
138 | 101 | ||
139 | @include iro.bem-sibling-elem('circle') { | 102 | @include iro.bem-sibling-elem('circle') { |
140 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 103 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
141 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 104 | box-shadow: |
105 | 0 | ||
106 | 0 | ||
107 | 0 | ||
108 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
109 | props.get(vars.$key-focus--outline-color); | ||
142 | } | 110 | } |
143 | } | 111 | } |
144 | } | 112 | } |
@@ -153,29 +121,29 @@ | |||
153 | @include iro.bem-elem('native') { | 121 | @include iro.bem-elem('native') { |
154 | &:checked { | 122 | &:checked { |
155 | @include iro.bem-sibling-elem('circle') { | 123 | @include iro.bem-sibling-elem('circle') { |
156 | background-color: fn.color(--accent --circle-border); | 124 | background-color: props.get(vars.$accent--circle-border-color); |
157 | } | 125 | } |
158 | 126 | ||
159 | &:hover, | 127 | &:hover, |
160 | &:focus-visible { | 128 | &:focus-visible { |
161 | @include iro.bem-sibling-elem('circle') { | 129 | @include iro.bem-sibling-elem('circle') { |
162 | background-color: fn.color(--accent --hover --circle-border); | 130 | background-color: props.get(vars.$accent--hover--circle-border-color); |
163 | } | 131 | } |
164 | } | 132 | } |
165 | } | 133 | } |
166 | 134 | ||
167 | &:disabled { | 135 | &:disabled { |
168 | @include iro.bem-sibling-elem('circle') { | 136 | @include iro.bem-sibling-elem('circle') { |
169 | background-color: fn.color(--disabled --circle-border); | 137 | background-color: props.get(vars.$disabled--circle-border-color); |
170 | 138 | ||
171 | &::after { | 139 | &::after { |
172 | background-color: fn.color(--disabled --circle-bg); | 140 | background-color: props.get(vars.$disabled--circle-bg-color); |
173 | } | 141 | } |
174 | } | 142 | } |
175 | 143 | ||
176 | &:checked { | 144 | &:checked { |
177 | @include iro.bem-sibling-elem('circle') { | 145 | @include iro.bem-sibling-elem('circle') { |
178 | background-color: fn.color(--disabled --circle-border); | 146 | background-color: props.get(vars.$disabled--circle-border-color); |
179 | } | 147 | } |
180 | } | 148 | } |
181 | } | 149 | } |
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss new file mode 100644 index 0000000..b776dd4 --- /dev/null +++ b/src/objects/_radio.vars.scss | |||
@@ -0,0 +1,33 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; | ||
6 | $label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !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; | ||
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; | ||
11 | $spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; | ||
12 | |||
13 | $key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more)) !default; | ||
18 | $circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75)) !default; | ||
19 | |||
20 | $hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading)) !default; | ||
21 | $hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute)) !default; | ||
22 | |||
23 | $accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900)) !default; | ||
24 | |||
25 | $accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000)) !default; | ||
26 | |||
27 | $disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; | ||
28 | $disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong)) !default; | ||
29 | $disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75)) !default; | ||
30 | |||
31 | $key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; | ||
32 | $key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | ||
33 | $key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | ||
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 237b5aa..3a85560 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss | |||
@@ -1,79 +1,41 @@ | |||
1 | @use 'sass:meta'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 3 | @use '../props'; |
4 | @use 'icon.vars' as icon; | ||
3 | 5 | ||
4 | @use './icon'; | 6 | @forward 'side-nav.vars'; |
7 | @use 'side-nav.vars' as vars; | ||
5 | 8 | ||
6 | @include iro.props-namespace('side-nav') { | 9 | @mixin styles { |
7 | @include iro.props-store(( | 10 | @include props.materialize(meta.module-variables('vars')); |
8 | --dims: ( | ||
9 | --spacing: fn.global-dim(--size --50), | ||
10 | --header: ( | ||
11 | --font-size: fn.global-dim(--font-size --50), | ||
12 | ), | ||
13 | --separator: fn.global-dim(--size --200), | ||
14 | --item: ( | ||
15 | --pad-i: fn.global-dim(--size --150), | ||
16 | --pad-b: fn.global-dim(--size --100), | ||
17 | --rounding: fn.global-dim(--rounding), | ||
18 | |||
19 | --key-focus: ( | ||
20 | --border: fn.global-dim(--key-focus --border), | ||
21 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
22 | --outline: fn.global-dim(--key-focus --outline), | ||
23 | ), | ||
24 | ), | ||
25 | ), | ||
26 | --colors: ( | ||
27 | --header: ( | ||
28 | --label: fn.global-color(--text-mute-more), | ||
29 | ), | ||
30 | --item: ( | ||
31 | --hover: ( | ||
32 | --bg: fn.global-color(--border-mute), | ||
33 | --label: fn.global-color(--heading), | ||
34 | ), | ||
35 | --active: ( | ||
36 | --bg: fn.global-color(--border), | ||
37 | --label: fn.global-color(--heading), | ||
38 | ), | ||
39 | --disabled: ( | ||
40 | --label: fn.global-color(--text-disabled), | ||
41 | ), | ||
42 | --key-focus: ( | ||
43 | --border: fn.global-color(--focus --border), | ||
44 | --outline: fn.global-color(--focus --outline), | ||
45 | ), | ||
46 | ), | ||
47 | ), | ||
48 | )); | ||
49 | 11 | ||
50 | @include iro.bem-object(iro.props-namespace()) { | 12 | @include iro.bem-object('side-nav') { |
51 | display: flex; | 13 | display: flex; |
52 | flex-direction: column; | 14 | flex-direction: column; |
53 | gap: fn.dim(--spacing); | 15 | gap: props.get(vars.$spacing); |
54 | 16 | ||
55 | @include iro.bem-elem('header') { | 17 | @include iro.bem-elem('header') { |
56 | padding-block: fn.dim(--item --pad-b); | 18 | padding-block: props.get(vars.$item--pad-b); |
57 | padding-inline: fn.dim(--item --pad-i); | 19 | padding-inline: props.get(vars.$item--pad-i); |
58 | font-size: fn.dim(--header --font-size); | 20 | font-size: props.get(vars.$header--font-size); |
59 | font-weight: 500; | 21 | font-weight: 500; |
60 | color: fn.color(--header --label); | 22 | color: props.get(vars.$header--label-color); |
61 | text-transform: uppercase; | 23 | text-transform: uppercase; |
62 | letter-spacing: .5px; | 24 | letter-spacing: .5px; |
63 | 25 | ||
64 | @include iro.bem-next-twin-elem { | 26 | @include iro.bem-next-twin-elem { |
65 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 27 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
66 | } | 28 | } |
67 | } | 29 | } |
68 | 30 | ||
69 | @include iro.bem-elem('item') { | 31 | @include iro.bem-elem('item') { |
70 | padding-block: fn.dim(--item --pad-b); | 32 | padding-block: props.get(vars.$item--pad-b); |
71 | padding-inline: fn.dim(--item --pad-i); | 33 | padding-inline: props.get(vars.$item--pad-i); |
72 | margin: calc(-1 * fn.dim(--item --key-focus --border-offset)); | 34 | margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); |
73 | color: fn.color(--item --disabled --label); | 35 | color: props.get(vars.$item--disabled--label-color); |
74 | background-clip: padding-box; | 36 | background-clip: padding-box; |
75 | border: fn.dim(--item --key-focus --border-offset) solid transparent; | 37 | border: props.get(vars.$item--key-focus--border-offset) solid transparent; |
76 | border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset)); | 38 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); |
77 | 39 | ||
78 | &:link, | 40 | &:link, |
79 | &:visited, | 41 | &:visited, |
@@ -81,23 +43,28 @@ | |||
81 | color: currentColor; | 43 | color: currentColor; |
82 | 44 | ||
83 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { | 45 | @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { |
84 | color: fn.color(--item --hover --label); | 46 | color: props.get(vars.$item--hover--label-color); |
85 | background-color: fn.color(--item --hover --bg); | 47 | background-color: props.get(vars.$item--hover--bg-color); |
86 | } | 48 | } |
87 | 49 | ||
88 | &:active { | 50 | &:active { |
89 | color: fn.color(--item --active --label); | 51 | color: props.get(vars.$item--active--label-color); |
90 | background-color: fn.color(--item --active --bg); | 52 | background-color: props.get(vars.$item--active--bg-color); |
91 | } | 53 | } |
92 | 54 | ||
93 | &:focus-visible { | 55 | &:focus-visible { |
94 | outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); | 56 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
95 | box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); | 57 | box-shadow: |
58 | 0 | ||
59 | 0 | ||
60 | 0 | ||
61 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | ||
62 | props.get(vars.$item--key-focus--outline-color); | ||
96 | } | 63 | } |
97 | } | 64 | } |
98 | 65 | ||
99 | @include iro.bem-next-elem('header') { | 66 | @include iro.bem-next-elem('header') { |
100 | margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); | 67 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
101 | } | 68 | } |
102 | } | 69 | } |
103 | 70 | ||
@@ -105,18 +72,18 @@ | |||
105 | &:link, | 72 | &:link, |
106 | &:visited, | 73 | &:visited, |
107 | &:enabled { | 74 | &:enabled { |
108 | color: fn.color(--header --label); | 75 | color: props.get(vars.$header--label-color); |
109 | } | 76 | } |
110 | } | 77 | } |
111 | 78 | ||
112 | @include iro.bem-elem('separator') { | 79 | @include iro.bem-elem('separator') { |
113 | block-size: fn.dim(--separator); | 80 | block-size: props.get(vars.$separator); |
114 | } | 81 | } |
115 | 82 | ||
116 | @include iro.bem-elem('icon-slot') { | 83 | @include iro.bem-elem('icon-slot') { |
117 | display: flex; | 84 | display: flex; |
118 | justify-content: center; | 85 | justify-content: center; |
119 | inline-size: fn.foreign-dim(--icon, --size); | 86 | inline-size: props.get(icon.$size); |
120 | } | 87 | } |
121 | } | 88 | } |
122 | } | 89 | } |
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss new file mode 100644 index 0000000..08516a6 --- /dev/null +++ b/src/objects/_side-nav.vars.scss | |||
@@ -0,0 +1,28 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../core.vars' as core; | ||
4 | |||
5 | $spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; | ||
6 | $header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$size--50)) !default; | ||
7 | $separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; | ||
8 | |||
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; | ||
11 | $item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default; | ||
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; | ||
14 | $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more)) !default; | ||
18 | |||
19 | $item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default; | ||
20 | $item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading)) !default; | ||
21 | |||
22 | $item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border)) !default; | ||
23 | $item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading)) !default; | ||
24 | |||
25 | $item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; | ||
26 | |||
27 | $item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; | ||
28 | $item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; | ||
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index ce1794a..2555894 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss | |||
@@ -1,38 +1,26 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:meta'; | ||
3 | @use 'sass:string'; | ||
1 | @use 'iro-sass/src/iro-sass' as iro; | 4 | @use 'iro-sass/src/iro-sass' as iro; |
2 | @use '../functions' as fn; | 5 | @use '../props'; |
3 | 6 | ||
4 | $themes: 'accent' 'positive' 'negative' 'warning' !default; | 7 | @forward 'status-indicator.vars'; |
8 | @use 'status-indicator.vars' as vars; | ||
5 | 9 | ||
6 | @include iro.props-namespace('status-indicator') { | 10 | @mixin styles { |
7 | @include iro.props-store(( | 11 | @include props.materialize(meta.module-variables('vars')); |
8 | --dims: ( | ||
9 | --size: fn.global-dim(--size --125), | ||
10 | ), | ||
11 | --colors: ( | ||
12 | --default: fn.global-color(--border-strong), | ||
13 | --primary: fn.global-color(--text), | ||
14 | ), | ||
15 | )); | ||
16 | 12 | ||
17 | @each $theme in $themes { | 13 | @include iro.bem-object('status-indicator') { |
18 | @include iro.props-store(( | ||
19 | --colors: ( | ||
20 | --#{$theme}: fn.global-color(--#{$theme} --700), | ||
21 | ), | ||
22 | )); | ||
23 | } | ||
24 | |||
25 | @include iro.bem-object(iro.props-namespace()) { | ||
26 | display: inline-block; | 14 | display: inline-block; |
27 | inline-size: fn.dim(--size); | 15 | inline-size: props.get(vars.$size); |
28 | block-size: fn.dim(--size); | 16 | block-size: props.get(vars.$size); |
29 | vertical-align: middle; | 17 | vertical-align: middle; |
30 | background-color: fn.color(--default); | 18 | background-color: props.get(vars.$default); |
31 | border-radius: 10em; | 19 | border-radius: 10em; |
32 | 20 | ||
33 | @each $theme in $themes { | 21 | @each $theme in map.keys(props.get(vars.$themes)) { |
34 | @include iro.bem-is($theme) { | 22 | @include iro.bem-is(string.slice($theme, 3)) { |
35 | background-color: fn.color(--#{$theme}); | 23 | background-color: props.get(vars.$themes, $theme); |
36 | } | 24 | } |
37 | } | 25 | } |
38 | } | 26 | } |
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss new file mode 100644 index 0000000..1d0a06a --- /dev/null +++ b/src/objects/_status-indicator.vars.scss | |||
@@ -0,0 +1,21 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use '../props'; | ||
3 | @use '../themes' as themes; | ||
4 | @use '../core.vars' as core; | ||
5 | |||
6 | $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; | ||
7 | |||
8 | $default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; | ||
9 | $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; | ||
10 | |||
11 | $themes-config: map.keys(map.get(themes.$themes, themes.$theme-default, light, --palettes)) !default; | ||
12 | |||
13 | $themes: props.def(--o-status-indicator); | ||
14 | |||
15 | @each $theme in $themes-config { | ||
16 | @if $theme != --base { | ||
17 | $themes: props.merge($themes, ( | ||
18 | $theme: props.get(core.$theme, $theme, --700), | ||
19 | )); | ||
20 | } | ||
21 | } | ||