summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 14:46:06 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 14:46:06 +0200
commit3799950b0a869aee0e2725a8aafbb53c26723942 (patch)
tree9d8ee6ee3e9f963358d6463aa6114d4020a90a39 /src
parentUpdate (diff)
downloadiro-design-3799950b0a869aee0e2725a8aafbb53c26723942.tar.gz
iro-design-3799950b0a869aee0e2725a8aafbb53c26723942.tar.bz2
iro-design-3799950b0a869aee0e2725a8aafbb53c26723942.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_iro-design.scss7
-rw-r--r--src/objects/_checkbox.vars.scss6
-rw-r--r--src/objects/_field-label.scss1
-rw-r--r--src/objects/_lightbox.scss104
-rw-r--r--src/objects/_lightbox.vars.scss57
-rw-r--r--src/objects/_menu.scss122
-rw-r--r--src/objects/_menu.vars.scss29
-rw-r--r--src/objects/_palette.scss29
-rw-r--r--src/objects/_popover.scss45
-rw-r--r--src/objects/_popover.vars.scss14
-rw-r--r--src/objects/_radio.scss118
-rw-r--r--src/objects/_radio.vars.scss33
-rw-r--r--src/objects/_side-nav.scss103
-rw-r--r--src/objects/_side-nav.vars.scss28
-rw-r--r--src/objects/_status-indicator.scss42
-rw-r--r--src/objects/_status-indicator.vars.scss21
16 files changed, 384 insertions, 375 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 3abe3fa..eac485d 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -50,3 +50,10 @@ $breakpoints: (
50@forward 'objects/field-label' as o-field-label--*; 50@forward 'objects/field-label' as o-field-label--*;
51@forward 'objects/heading' as o-heading--*; 51@forward 'objects/heading' as o-heading--*;
52@forward 'objects/icon' as o-icon--*; 52@forward 'objects/icon' as o-icon--*;
53@forward 'objects/lightbox' as o-lightbox--*;
54@forward 'objects/menu' as o-menu--*;
55@forward 'objects/palette' as o-palette--*;
56@forward 'objects/popover' as o-popover--*;
57@forward 'objects/radio' as o-radio--*;
58@forward 'objects/side-nav' as o-side-nav--*;
59@forward 'objects/status-indicator' as o-status-indicator--*;
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}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 05:40:38 +0000