summaryrefslogtreecommitdiffstats
path: root/src_old
diff options
context:
space:
mode:
Diffstat (limited to 'src_old')
-rw-r--r--src_old/.old/layouts/_message-group.scss139
-rw-r--r--src_old/.old/objects/_dialog.scss152
-rw-r--r--src_old/.old/objects/_icon-nav.scss20
-rw-r--r--src_old/.old/objects/_list-group.scss61
-rw-r--r--src_old/.old/objects/_message.scss51
-rw-r--r--src_old/.old/objects/_overflow-button.scss243
-rw-r--r--src_old/_base.scss145
-rw-r--r--src_old/_config.scss234
-rw-r--r--src_old/_functions.scss135
-rw-r--r--src_old/_layouts.scss8
-rw-r--r--src_old/_mixins.scss38
-rw-r--r--src_old/_objects.scss28
-rw-r--r--src_old/_scopes.scss6
-rw-r--r--src_old/_themes.scss86
-rw-r--r--src_old/_utils.scss233
-rw-r--r--src_old/_vars.scss298
-rw-r--r--src_old/functions/colors/_apca.scss127
-rw-r--r--src_old/functions/colors/_index.scss1
-rw-r--r--src_old/index.scss10
-rw-r--r--src_old/layouts/_button-group.scss16
-rw-r--r--src_old/layouts/_card-list.scss96
-rw-r--r--src_old/layouts/_container.scss45
-rw-r--r--src_old/layouts/_flex.scss27
-rw-r--r--src_old/layouts/_form.scss62
-rw-r--r--src_old/layouts/_media.scss47
-rw-r--r--src_old/layouts/_overflow.scss9
-rw-r--r--src_old/objects/_action-button.scss343
-rw-r--r--src_old/objects/_alert.scss43
-rw-r--r--src_old/objects/_avatar.scss167
-rw-r--r--src_old/objects/_backdrop.scss26
-rw-r--r--src_old/objects/_badge.scss300
-rw-r--r--src_old/objects/_button.scss301
-rw-r--r--src_old/objects/_card.scss170
-rw-r--r--src_old/objects/_checkbox.scss261
-rw-r--r--src_old/objects/_divider.scss203
-rw-r--r--src_old/objects/_emoji.scss73
-rw-r--r--src_old/objects/_field-label.scss86
-rw-r--r--src_old/objects/_heading.scss118
-rw-r--r--src_old/objects/_icon.scss26
-rw-r--r--src_old/objects/_lightbox.scss313
-rw-r--r--src_old/objects/_menu.scss137
-rw-r--r--src_old/objects/_palette.scss62
-rw-r--r--src_old/objects/_popover.scss51
-rw-r--r--src_old/objects/_radio.scss185
-rw-r--r--src_old/objects/_side-nav.scss122
-rw-r--r--src_old/objects/_status-indicator.scss39
-rw-r--r--src_old/objects/_switch.scss222
-rw-r--r--src_old/objects/_table.scss168
-rw-r--r--src_old/objects/_text-field.scss213
-rw-r--r--src_old/scopes/_blockquotes.scss34
-rw-r--r--src_old/scopes/_code.scss59
-rw-r--r--src_old/scopes/_headings.scss116
-rw-r--r--src_old/scopes/_links.scss143
-rw-r--r--src_old/scopes/_lists.scss66
-rw-r--r--src_old/scopes/_tables.scss115
55 files changed, 6479 insertions, 0 deletions
diff --git a/src_old/.old/layouts/_message-group.scss b/src_old/.old/layouts/_message-group.scss
new file mode 100644
index 0000000..235e242
--- /dev/null
+++ b/src_old/.old/layouts/_message-group.scss
@@ -0,0 +1,139 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4// @use '../objects/message';
5
6@include iro.props-namespace('message-group') {
7 @include iro.props-store((
8 --dims: (
9 --spacing-x: fn.global-dim(--size --225),
10 --spacing-y: fn.global-dim(--size --150),
11 --arrow-size: fn.global-dim(--size --100),
12
13 --compact: (
14 --spacing-x: fn.global-dim(--size --225),
15 --spacing-y: fn.global-dim(--size --50),
16 )
17 )
18 ));
19
20 @include iro.bem-layout(iro.props-namespace()) {
21 display: grid;
22 grid-template-columns: auto 1fr;
23 grid-auto-rows: auto;
24 grid-template-areas: 'avatar message' 'avatar .';
25 align-items: flex-start;
26 gap: 0 fn.dim(--spacing-x);
27
28 @include iro.bem-elem('avatar') {
29 grid-area: avatar;
30 block-size: 0;
31 }
32
33 @include iro.bem-elem('message') {
34 grid-column: message;
35 position: relative;
36 box-sizing: border-box;
37 min-inline-size: 0;
38 max-inline-size: 100%;
39
40 &::before {
41 content: '';
42 display: none;
43 position: absolute;
44 top: 0;
45 left: calc(-1 * fn.dim(--arrow-size));
46 border: fn.dim(--arrow-size) solid fn.global-color(--bg-l2);
47 border-bottom-color: transparent;
48 border-left-color: transparent;
49 }
50
51 @include iro.bem-next-twin-elem {
52 margin-top: fn.dim(--spacing-y);
53 }
54 }
55
56 @include iro.bem-modifier('right') {
57 @include iro.bem-elem('message') {
58 &::before {
59 right: calc(-1 * fn.dim(--arrow-size));
60 left: auto;
61 border-right-color: transparent;
62 border-left-color: fn.global-color(--bg-l2);
63 }
64 }
65 }
66
67 @include iro.bem-modifier('compact') {
68 gap: 0 fn.dim(--compact --spacing-x);
69
70 @include iro.bem-modifier('left') {
71 justify-items: start;
72 }
73
74 @include iro.bem-modifier('right') {
75 justify-items: end;
76 }
77
78 @include iro.bem-elem('message') {
79 @include iro.bem-next-twin-elem {
80 margin-top: fn.dim(--compact --spacing-y);
81 }
82 }
83 }
84
85 @include iro.bem-modifier('right') {
86 grid-template-columns: 1fr auto;
87 grid-template-areas: 'message avatar' '. avatar';
88 }
89
90 @include iro.bem-modifier('no-avatar') {
91 grid-template-columns: 1fr;
92 grid-template-areas: 'message';
93
94 @include iro.bem-elem('avatar') {
95 display: none;
96 }
97 }
98
99 @include iro.bem-modifier('arrow') {
100 @include iro.bem-elem('message') {
101 &::before {
102 display: block;
103 }
104
105 @include iro.bem-next-twin-elem {
106 &::before {
107 display: none;
108 }
109 }
110 }
111 }
112
113 & + & {
114 @include iro.bem-modifier('merge') {
115 margin-top: fn.dim(--spacing-y);
116
117 @include iro.bem-elem('avatar') {
118 visibility: hidden;
119 }
120
121 @include iro.bem-modifier('compact') {
122 margin-top: fn.dim(--compact --spacing-y);
123 }
124
125 @include iro.bem-elem('merge-hide') {
126 display: none;
127 }
128
129 @include iro.bem-modifier('arrow') {
130 @include iro.bem-elem('message') {
131 &::before {
132 display: none;
133 }
134 }
135 }
136 }
137 }
138 }
139}
diff --git a/src_old/.old/objects/_dialog.scss b/src_old/.old/objects/_dialog.scss
new file mode 100644
index 0000000..9333ce6
--- /dev/null
+++ b/src_old/.old/objects/_dialog.scss
@@ -0,0 +1,152 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('dialog') {
5 @include iro.props-store((
6 --dims: (
7 --width-sm: iro.fn-px-to-rem(500px),
8 --width-md: iro.fn-px-to-rem(800px),
9 --width-lg: iro.fn-px-to-rem(1100px),
10 --rounding: 4px,
11 --border: 1px,
12
13 --header: (
14 --pad-x: fn.global-dim(--size --75),
15 --pad-y: fn.global-dim(--size --75),
16 ),
17
18 --sidebar: (
19 --pad-x: fn.global-dim(--size --75),
20 --pad-y: fn.global-dim(--size --75),
21 ),
22
23 --body: (
24 --pad-x: fn.global-dim(--size --200),
25 --pad-y: fn.global-dim(--size --200),
26 )
27 ),
28 ), 'dims');
29
30 @include iro.props-store((
31 --dims: (
32 --pad-x: fn.global-dim(--size --300),
33 --pad-y: fn.global-dim(--size --300),
34 ),
35 ), 'md');
36
37 @include iro.props-store((
38 --colors: (
39 --border: fn.global-color(--border --stable),
40 ),
41 ), 'colors');
42
43 @include iro.bem-object(iro.props-namespace()) {
44 display: grid;
45 grid-template-rows: auto auto 1fr auto auto;
46 grid-template-columns: auto 1fr;
47 grid-template-areas:
48 'sidebar-header header'
49 'sidebar top'
50 'sidebar body'
51 'sidebar bottom'
52 'sidebar footer';
53 position: relative;
54 box-sizing: border-box;
55 flex: 0 0 auto;
56 width: 100%;
57 max-width: fn.dim(--width-md);
58 margin: 0 auto;
59 overflow: hidden;
60 border-radius: fn.dim(--rounding);
61 background-clip: padding-box;
62 background-color: fn.global-color(--bg);
63 color: fn.global-color(--fg);
64
65 @include iro.bem-modifier('sm') {
66 max-width: fn.dim(--width-sm);
67 }
68
69 @include iro.bem-modifier('lg') {
70 max-width: fn.dim(--width-lg);
71 }
72
73 @include iro.bem-elem('header') {
74 grid-area: sidebar-header / sidebar-header / header / header;
75 padding: fn.dim(--header --pad-y) fn.dim(--header --pad-x);
76
77 @include iro.bem-modifier('sidebar') {
78 grid-area: sidebar-header;
79 border-right: 1px solid fn.color(--border);
80
81 @include iro.bem-sibling-elem('header') {
82 grid-area: header;
83 }
84 }
85 }
86
87 @include iro.bem-elem('title') {
88 margin-top: 0;
89 padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
90 padding-left: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
91 }
92
93 @include iro.bem-elem('close-btn') {
94 margin-left: auto;
95 }
96
97 @include iro.bem-elem('sidebar') {
98 grid-area: sidebar;
99 padding: fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
100 overflow: auto;
101 border-right: 1px solid fn.color(--border);
102 }
103
104 @include iro.bem-elem('top') {
105 grid-area: top;
106 min-width: 0;
107 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
108
109 @include iro.bem-sibling-elem('body') {
110 padding-top: 0;
111 }
112 }
113
114 @include iro.bem-elem('bottom') {
115 grid-area: bottom;
116 min-width: 0;
117 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
118
119 @include iro.bem-sibling-elem('body') {
120 padding-bottom: 0;
121 }
122 }
123
124 @include iro.bem-elem('body') {
125 grid-area: body;
126 min-width: 0;
127 min-height: 0;
128 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
129 }
130
131 @include iro.bem-elem('footer') {
132 grid-area: footer;
133 justify-content: flex-end;
134 padding: fn.dim(--body --pad-y) fn.dim(--body --pad-x);
135 }
136
137 @include iro.bem-modifier('scrollable') {
138 flex-shrink: 1;
139
140 @include iro.bem-elem('body') {
141 overflow: auto;
142 scrollbar-color: fn.global-color(--obj-lo) transparent;
143 }
144 }
145
146 @include iro.bem-modifier('flat') {
147 @include iro.bem-elem('body') {
148 padding-top: 0;
149 }
150 }
151 }
152}
diff --git a/src_old/.old/objects/_icon-nav.scss b/src_old/.old/objects/_icon-nav.scss
new file mode 100644
index 0000000..d1c6539
--- /dev/null
+++ b/src_old/.old/objects/_icon-nav.scss
@@ -0,0 +1,20 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('icon-nav') {
5 @include iro.props-store((
6 --dims: (
7 --spacing: fn.global-dim(--size --100),
8 )
9 ), 'dims');
10
11 @include iro.bem-object(iro.props-namespace()) {
12 display: flex;
13 align-items: center;
14 gap: fn.dim(--spacing);
15
16 @include iro.bem-modifier('vertical') {
17 flex-direction: column;
18 }
19 }
20}
diff --git a/src_old/.old/objects/_list-group.scss b/src_old/.old/objects/_list-group.scss
new file mode 100644
index 0000000..a346828
--- /dev/null
+++ b/src_old/.old/objects/_list-group.scss
@@ -0,0 +1,61 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('list-group') {
5 @include iro.props-store((
6 --dims: (
7 --pad-i: fn.global-dim(--size --175),
8 --pad-b: fn.global-dim(--size --125),
9 --rounding: fn.global-dim(--rounding),
10 --border: fn.global-dim(--border --thin),
11 ),
12 --colors: (
13 --bg: fn.global-color(--base --75),
14 --border: fn.global-color(--border),
15 --hover: fn.global-color(--border-mute),
16 --active: fn.global-color(--border),
17 )
18 ));
19
20 @include iro.bem-object(iro.props-namespace()) {
21 border: fn.dim(--border) solid fn.color(--border);
22 border-radius: fn.dim(--rounding);
23 background-color: fn.color(--bg);
24
25 @include iro.bem-elem('item') {
26 padding-block: fn.dim(--pad-b);
27 padding-inline: fn.dim(--pad-i);
28
29 @include iro.bem-next-twin-elem {
30 border-width: 0;
31 border-block-start-width: fn.dim(--border);
32 border-style: solid;
33 border-color: fn.color(--border);
34 }
35
36 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
37 &:hover,
38 &:focus-visible {
39 background-color: fn.color(--hover);
40 }
41
42 &:active {
43 background-color: fn.color(--active);
44 }
45 }
46 }
47
48 @include iro.bem-modifier('horizontal') {
49 display: flex;
50
51 @include iro.bem-elem('item') {
52 flex: 1 0 auto;
53
54 @include iro.bem-next-twin-elem {
55 border-block-start-width: 0;
56 border-inline-start-width: fn.dim(--border);
57 }
58 }
59 }
60 }
61}
diff --git a/src_old/.old/objects/_message.scss b/src_old/.old/objects/_message.scss
new file mode 100644
index 0000000..283ce26
--- /dev/null
+++ b/src_old/.old/objects/_message.scss
@@ -0,0 +1,51 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('message') {
5 @include iro.props-store((
6 --dims: (
7 --bubble: (
8 --pad-x: fn.global-dim(--size --200),
9 --pad-y: fn.global-dim(--size --150),
10 --rounding: 0,
11
12 --75: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 ),
16 ),
17 )
18 ), 'dims');
19
20 @include iro.props-store((
21 --colors: (
22 --highlight: fn.global-color(--fg-lo),
23 ),
24 ), 'colors');
25
26 @include iro.bem-object(iro.props-namespace()) {
27 @include iro.bem-elem('suffix') {
28 margin-left: 1em;
29 float: right;
30 }
31
32 @include iro.bem-modifier('bubble') {
33 padding: fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x);
34 border-radius: fn.dim(--bubble --rounding);
35 background-color: fn.global-color(--bg);
36 color: fn.global-color(--fg);
37
38 @include iro.bem-elem('suffix') {
39 transform: translate(.2em, .2em);
40 }
41
42 @include iro.bem-modifier('highlight') {
43 box-shadow: -3px 0 0 0 fn.color(--highlight);
44 }
45
46 @include iro.bem-modifier('75') {
47 padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x);
48 }
49 }
50 }
51}
diff --git a/src_old/.old/objects/_overflow-button.scss b/src_old/.old/objects/_overflow-button.scss
new file mode 100644
index 0000000..b15ea1f
--- /dev/null
+++ b/src_old/.old/objects/_overflow-button.scss
@@ -0,0 +1,243 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('overflow-button') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: calc(fn.global-dim(--size --125) - 1px),
8 --pad-y: calc(fn.global-dim(--size --125) - 1px),
9 --spacing: fn.global-dim(--size --50)
10 ),
11 ), 'dims');
12
13 @include iro.props-store((
14 --colors: (
15 --label: fn.global-color(--fg),
16
17 --hover: (
18 --bg: fn.global-color(--obj-hi),
19 --label: fn.global-color(--fg-lo),
20 ),
21 --active: (
22 --bg: fn.global-color(--obj),
23 --label: fn.global-color(--fg-lo),
24 ),
25 --selected: (
26 --bg: fn.global-color(--obj-hi),
27 --label: fn.global-color(--fg),
28
29 --hover: (
30 --bg: fn.global-color(--obj),
31 --label: fn.global-color(--fg-lo),
32 ),
33 ),
34 --disabled: (
35 --label: fn.global-color(--fg-hi3),
36 ),
37 --key-focus: (
38 --border: fn.global-color(--focus --fill),
39 --shadow: fn.global-color(--focus --shadow),
40 ),
41
42 --red: (
43 --hover: (
44 --bg: fn.global-color(--red --quiet --bg),
45 --label: fn.global-color(--red --quiet --fg),
46 ),
47 --active: (
48 --bg: fn.global-color(--red --quiet --obj),
49 --label: fn.global-color(--red --quiet --fg-lo),
50 ),
51
52 --selected: (
53 --bg: fn.global-color(--red --quiet --bg),
54 --label: fn.global-color(--red --quiet --fg),
55
56 --hover: (
57 --bg: fn.global-color(--red --quiet --obj),
58 --label: fn.global-color(--red --quiet --fg-lo),
59 ),
60 ),
61 ),
62
63 --blue: (
64 --hover: (
65 --bg: fn.global-color(--blue --quiet --bg),
66 --label: fn.global-color(--blue --quiet --fg),
67 ),
68 --active: (
69 --bg: fn.global-color(--blue --quiet --obj),
70 --label: fn.global-color(--blue --quiet --fg-lo),
71 ),
72
73 --selected: (
74 --bg: fn.global-color(--blue --quiet --bg),
75 --label: fn.global-color(--blue --quiet --fg),
76
77 --hover: (
78 --bg: fn.global-color(--blue --quiet --obj),
79 --label: fn.global-color(--blue --quiet --fg-lo),
80 ),
81 ),
82 ),
83
84 --green: (
85 --hover: (
86 --bg: fn.global-color(--green --quiet --bg),
87 --label: fn.global-color(--green --quiet --fg),
88 ),
89 --active: (
90 --bg: fn.global-color(--green --quiet --obj),
91 --label: fn.global-color(--green --quiet --fg-lo),
92 ),
93
94 --selected: (
95 --bg: fn.global-color(--green --quiet --bg),
96 --label: fn.global-color(--green --quiet --fg),
97
98 --hover: (
99 --bg: fn.global-color(--green --quiet --obj),
100 --label: fn.global-color(--green --quiet --fg-lo),
101 ),
102 ),
103 )
104 ),
105 ), 'colors');
106
107 @include iro.bem-object(iro.props-namespace()) {
108 display: inline-block;
109 color: fn.color(--disabled --label);
110
111 @include iro.bem-elem('outside') {
112 display: inline-block;
113 margin-right: fn.dim(--spacing);
114 }
115
116 @include iro.bem-elem('inside') {
117 display: inline-block;
118 padding: fn.dim(--pad-y) fn.dim(--pad-x);
119 border: 2px solid transparent;
120 border-radius: 100em;
121 line-height: 1;
122 text-align: center;
123 text-decoration: none;
124 text-overflow: ellipsis;
125 white-space: nowrap;
126
127 @include iro.bem-next-elem('outside') {
128 margin-right: 0;
129 margin-left: fn.dim(--spacing);
130 }
131 }
132
133 &:link,
134 &:visited,
135 &:enabled {
136 color: fn.color(--label);
137
138 &:hover {
139 @include iro.bem-elem('inside') {
140 background-color: fn.color(--hover --bg);
141 color: fn.color(--hover --label);
142 }
143 }
144
145 &:active {
146 @include iro.bem-elem('inside') {
147 background-color: fn.color(--active --bg);
148 color: fn.color(--active --label);
149 }
150 }
151
152 @include iro.bem-at-theme('keyboard') {
153 &:focus {
154 @include iro.bem-elem('inside') {
155 background-color: fn.color(--hover --bg);
156 color: fn.color(--hover --label);
157 }
158 }
159 }
160 }
161
162 @include iro.bem-is('selected') {
163 @include iro.bem-elem('inside') {
164 background-color: fn.color(--selected --bg);
165 }
166
167 &:link,
168 &:visited,
169 &:enabled {
170 @include iro.bem-elem('inside') {
171 color: fn.color(--selected --label);
172 }
173
174 &:hover,
175 &:active {
176 @include iro.bem-elem('inside') {
177 background-color: fn.color(--selected --hover --bg);
178 color: fn.color(--selected --hover --label);
179 }
180 }
181
182 @include iro.bem-at-theme('keyboard') {
183 &:focus {
184 @include iro.bem-elem('inside') {
185 background-color: fn.color(--selected --bg);
186 color: fn.color(--selected --hover --label);
187 }
188 }
189 }
190 }
191 }
192
193 @each $color in 'red' 'blue' 'green' {
194 @include iro.bem-modifier($color) {
195 &:link,
196 &:visited,
197 &:enabled {
198 &:hover {
199 @include iro.bem-elem('inside') {
200 background-color: fn.color(--#{$color} --hover --bg);
201 color: fn.color(--#{$color} --hover --label);
202 }
203 }
204
205 &:active {
206 @include iro.bem-elem('inside') {
207 background-color: fn.color(--#{$color} --active --bg);
208 color: fn.color(--#{$color} --active --label);
209 }
210 }
211 }
212
213 @include iro.bem-is('selected') {
214 &:link,
215 &:visited,
216 &:enabled {
217 @include iro.bem-elem('inside') {
218 background-color: fn.color(--#{$color} --selected --bg);
219 color: fn.color(--#{$color} --selected --label);
220 }
221
222 &:hover,
223 &:active {
224 @include iro.bem-elem('inside') {
225 background-color: fn.color(--#{$color} --selected --hover --bg);
226 color: fn.color(--#{$color} --selected --hover --label);
227 }
228 }
229 }
230 }
231 }
232 }
233
234 @include iro.bem-at-theme('keyboard') {
235 &:focus {
236 @include iro.bem-elem('inside') {
237 border-color: fn.color(--key-focus --border);
238 box-shadow: fn.color(--key-focus --shadow);
239 }
240 }
241 }
242 }
243}
diff --git a/src_old/_base.scss b/src_old/_base.scss
new file mode 100644
index 0000000..8e4c1d9
--- /dev/null
+++ b/src_old/_base.scss
@@ -0,0 +1,145 @@
1@use 'sass:math';
2@use 'iro-sass/src/index' as iro;
3@use 'functions' as fn;
4@use 'mixins' as mx;
5@use 'config';
6
7html {
8 scrollbar-color: fn.color(--text-disabled) transparent;
9 accent-color: fn.color(--accent --600);
10}
11
12html,
13body {
14 block-size: 100%;
15}
16
17body {
18 @include mx.set-font(--standard, (--size: fn.dim(--font-size --100)));
19
20 margin: 0;
21 padding: 0;
22 background-color: fn.color(--bg-base);
23 color: fn.color(--text);
24}
25
26pre,
27code {
28 font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
29}
30
31pre,
32code {
33 @include mx.set-font(--mono, (--size: .93em));
34}
35
36pre {
37 margin: 0;
38 overflow-x: auto;
39
40 code {
41 color: currentColor;
42 font-size: 1em;
43 }
44}
45
46h1,
47h2,
48h3,
49h4,
50h5,
51h6 {
52 @include mx.heading-medium(--md);
53
54 margin-block: fn.dim(--heading --margin-bs) 0;
55
56 & + & {
57 margin-block-start: fn.dim(--heading --margin-bs-sibling);
58 }
59}
60
61p {
62 margin-block: fn.dim(--paragraph --margin-bs) 0;
63
64 &:empty {
65 display: none;
66 }
67}
68
69strong {
70 font-weight: bold;
71}
72
73small {
74 font-size: fn.dim(--font-size --75);
75}
76
77ul,
78ol {
79 margin: 0;
80 padding: 0;
81 list-style: none;
82}
83
84li {
85 margin: 0;
86 padding: 0;
87}
88
89:focus,
90:focus-visible {
91 outline: 0;
92}
93
94:link,
95:visited {
96 color: currentColor;
97 text-decoration: none;
98}
99
100
101button,
102input,
103textarea {
104 box-sizing: content-box;
105 margin: 0;
106 padding: 0;
107 border: 0;
108 background: none;
109 color: currentColor;
110 font-family: inherit;
111 font-size: 1em;
112 font-style: inherit;
113 font-weight: inherit;
114 line-height: inherit;
115 text-align: inherit;
116 text-transform: inherit;
117 appearance: none;
118
119 &::-moz-focus-inner {
120 border: 0;
121 }
122}
123
124input,
125textarea {
126 &::placeholder {
127 opacity: 1;
128 color: fn.color(--text-mute);
129 }
130
131 &:disabled {
132 color: fn.color(--text-disabled);
133 }
134}
135
136textarea {
137 block-size: calc(1em * fn.dim(--font --standard --line-height));
138}
139
140hr {
141 block-size: fn.dim(--border --thin);
142 margin: 0;
143 border: 0;
144 background-color: fn.color(--border);
145}
diff --git a/src_old/_config.scss b/src_old/_config.scss
new file mode 100644
index 0000000..62a1401
--- /dev/null
+++ b/src_old/_config.scss
@@ -0,0 +1,234 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:math';
4@use 'iro-sass/src/index' as iro;
5@use 'iro-sass/src/responsive' as res;
6@use 'iro-sass/src/easing' as easing;
7@use 'include-media/dist/include-media' as media;
8
9iro.$vars-root-size: 16px;
10
11media.$breakpoints: (
12 lg: 1340px,
13 md: 900px,
14 sm: 620px,
15 xs: 400px,
16);
17
18media.$unit-intervals: (
19 'px': 1,
20 'em': .01,
21 'rem': .01,
22 '': 0
23);
24
25res.$named-viewports: media.$breakpoints;
26
27$palette-precision: .01 !default;
28
29$palette-chroma-easing: 'ease' !default;
30
31$static-colors-override: () !default;
32$static-colors: map.deep-merge((
33 --base: hsl(0, 0%, 98%),
34
35 --contrasts: (
36 --100: math.div(0, 12) * 110 - 10,
37 --200: math.div(1, 12) * 110 - 10,
38 --300: math.div(2, 12) * 110 - 10,
39 --400: math.div(3, 12) * 110 - 10,
40 --500: math.div(4, 12) * 110 - 10,
41 --600: math.div(5, 12) * 110 - 10,
42 --700: math.div(6, 12) * 110 - 10,
43 --800: math.div(7, 12) * 110 - 10,
44 --900: math.div(8, 12) * 110 - 10,
45 --1000: math.div(9, 12) * 110 - 10,
46 --1100: math.div(10, 12) * 110 - 10,
47 --1200: math.div(11, 12) * 110 - 10,
48 --1300: math.div(12, 12) * 110 - 10,
49 ),
50
51 --palettes: (
52 --blue: oklch(56% .14 275.25),
53 --purple: oklch(56% .14 305.58),
54 --red: oklch(56% .14 14.69),
55 --green: oklch(56% .14 150.48),
56 --yellow: oklch(56% .14 84.08),
57 ),
58
59 --transparents: (
60 --100: 0,
61 --200: .1,
62 --300: .25,
63 --400: .4,
64 --500: .55,
65 --600: .7,
66 --700: .8,
67 --800: .9,
68 --900: 1,
69 ),
70), $static-colors-override) !default;
71
72$semantic-colors-common-override: () !default;
73$semantic-colors-common: map.deep-merge((
74 --accent: --blue,
75 --accent-static: --blue-static,
76 --positive: --green,
77 --positive-static: --green-static,
78 --negative: --red,
79 --negative-static: --red-static,
80 --warning: --yellow,
81 --warning-static: --yellow-static,
82
83 --focus-raw: --accent,
84 --focus-static: --accent-static,
85
86 --border-mute: --base --200,
87 --border: --base --300,
88 --border-strong: --base --400,
89
90 --text-disabled: --base --500,
91 --text-mute-more: --base --600,
92 --text-mute: --base --700,
93 --text: --base --800,
94 --heading: --base --900,
95
96 --focus: (
97 --outline: --focus-raw --400,
98 --border-mute: --focus-raw --900,
99 --border: --focus-raw --1000,
100 --border-text: --focus-raw --1000-text,
101 --border-strong: --focus-raw --1100,
102 --text: --focus-raw --1100,
103 ),
104), $semantic-colors-common-override) !default;
105
106$theme-light-override: () !default;
107$theme-light: map.deep-merge((
108 --contrasts: (
109 --grays: (
110 --50: -8,
111 --75: -4,
112 --100: 0,
113
114 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
115 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
116 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
117
118 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
119 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
120 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
121 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
122 --900: 106,
123 ),
124
125 --colors: (
126 --100: math.div(0, 12) * 96 + 5,
127 --200: math.div(1, 12) * 96 + 5,
128 --300: math.div(2, 12) * 96 + 5,
129 --400: math.div(3, 12) * 96 + 5,
130 --500: math.div(4, 12) * 96 + 5,
131 --600: math.div(5, 12) * 96 + 5,
132 --700: math.div(6, 12) * 96 + 5,
133 --800: math.div(7, 12) * 96 + 5,
134 --900: math.div(8, 12) * 96 + 5,
135 --1000: math.div(9, 12) * 96 + 5,
136 --1100: math.div(10, 12) * 96 + 5,
137 --1200: math.div(11, 12) * 96 + 5,
138 --1300: math.div(12, 12) * 96 + 5,
139 ),
140 ),
141
142 --ranges: (
143 --full: .3,
144 --muted: .1,
145 ),
146
147 --palettes: (
148 --base: hsl(260, 90%, 98%) --grays --full,
149 --blue: oklch(56% .16 275.25) --colors --muted,
150 --purple: oklch(56% .16 305.58) --colors --muted,
151 --red: oklch(56% .16 14.69) --colors --muted,
152 --green: oklch(56% .16 150.48) --colors --muted,
153 --yellow: oklch(56% .16 84.08) --colors --muted,
154 ),
155
156 --semantic: map.merge($semantic-colors-common, (
157 --bg-l2: --base --50,
158 --bg-l1: --base --100,
159 --bg-base: --base --200,
160 )),
161
162 --constants: (
163 --shadow: rgba(#000, .15),
164 ),
165), $theme-light-override) !default;
166
167$theme-dark-override: () !default;
168$theme-dark: map.deep-merge((
169 --contrasts: (
170 --grays: (
171 --50: 4.4,
172 --75: 2.2,
173 --100: 0,
174
175 --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
176 --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
177 --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
178
179 --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
180 --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
181 --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
182 --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
183 --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
184 ),
185
186 --colors: (
187 --100: math.div(0, 12) * -100 - 5,
188 --200: math.div(1, 12) * -100 - 5,
189 --300: math.div(2, 12) * -100 - 5,
190 --400: math.div(3, 12) * -100 - 5,
191 --500: math.div(4, 12) * -100 - 5,
192 --600: math.div(5, 12) * -100 - 5,
193 --700: math.div(6, 12) * -100 - 5,
194 --800: math.div(7, 12) * -100 - 5,
195 --900: math.div(8, 12) * -100 - 5,
196 --1000: math.div(9, 12) * -100 - 5,
197 --1100: math.div(10, 12) * -100 - 5,
198 --1200: math.div(11, 12) * -100 - 5,
199 --1300: math.div(12, 12) * -100 - 5,
200 ),
201 ),
202
203 --ranges: (
204 --full: 1,
205 --muted: .3,
206 ),
207
208 --palettes: (
209 --base: hsl(257, 7%, 19%) --grays --full,
210 --blue: oklch(56% .16 275.25) --colors --muted,
211 --purple: oklch(56% .16 305.58) --colors --muted,
212 --red: oklch(56% .16 14.69) --colors --muted,
213 --green: oklch(56% .16 150.48) --colors --muted,
214 --yellow: oklch(56% .16 84.08) --colors --muted,
215 ),
216
217 --semantic: map.merge($semantic-colors-common, (
218 --bg-base: --base --50,
219 --bg-l1: --base --75,
220 --bg-l2: --base --100,
221 )),
222
223 --constants: (
224 --shadow: rgba(#000, .5),
225 ),
226), $theme-dark-override) !default;
227
228$themes-override: () !default;
229$themes: map.deep-merge((
230 light: $theme-light,
231 dark: $theme-dark,
232), $themes-override) !default;
233
234$theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src_old/_functions.scss b/src_old/_functions.scss
new file mode 100644
index 0000000..523aa84
--- /dev/null
+++ b/src_old/_functions.scss
@@ -0,0 +1,135 @@
1@use 'sass:color';
2@use 'sass:math';
3@use 'sass:map';
4@use 'sass:list';
5@use 'sass:meta';
6
7@use 'iro-sass/src/index' as iro;
8@use 'iro-sass/src/easing' as easing;
9@use 'functions/colors' as iro-colors;
10@use 'config';
11
12@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
13 @return iro.props-get(list.join(--colors, $key), $tree, $default, $global);
14}
15
16@function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
17 @return color($key, $tree, $default, $global);
18}
19
20@function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
21 @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global);
22}
23
24@function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
25 @return iro.props-get(list.join(--dims, $key), $tree, $default, $global);
26}
27
28@function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
29 @return dim($key, $tree, $default, $global);
30}
31
32@function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
33 @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global);
34}
35
36@function font-prop($data, $overrides, $key, $prop) {
37 @if (map.has-key($overrides, $prop)) {
38 @return map.get($overrides, $prop);
39 } @else if (map.has-key($data, $prop)) {
40 @return global-dim(--font $key $prop);
41 }
42 @return null;
43}
44
45@function set-font($key, $overrides: ()) {
46 $font: iro.props-get-static(list.join(--dims --font, $key), $global: true);
47
48 $map: (
49 font-family: font-prop($font, $overrides, $key, --family),
50 font-size: font-prop($font, $overrides, $key, --size),
51 font-weight: font-prop($font, $overrides, $key, --weight),
52 font-style: font-prop($font, $overrides, $key, --style),
53 line-height: font-prop($font, $overrides, $key, --line-height),
54 text-transform: font-prop($font, $overrides, $key, --transform),
55 letter-spacing: font-prop($font, $overrides, $key, --spacing),
56 font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates),
57 font-feature-settings: font-prop($font, $overrides, $key, --feature-settings),
58 );
59
60 @return $map;
61}
62
63@function lum($color) {
64 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
65}
66
67@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) {
68 $base-lch: color.to-space($base-color, oklch);
69 $ref-lch: color.to-space($ref-color, oklch);
70
71 $ref-l: color.channel($ref-lch, 'lightness');
72 $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch);
73
74 $cmax: math.max(map.values($contrasts)...);
75 $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
76
77 $black-y: iro-colors.apca_sRGB_to_Y(#000);
78 $white-y: iro-colors.apca_sRGB_to_Y(#fff);
79
80 $chroma-inv: false;
81 @if $chroma-range < 0 {
82 $chroma-inv: true;
83 $chroma-range: -1 * $chroma-range;
84 }
85 $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
86
87 $palette: ();
88
89 @each $key, $contrast in $contrasts {
90 $y: iro-colors.apcaReverse($contrast, $ref-y);
91 $l: color.channel($base-lch, 'lightness');
92 $c: 1;
93
94 @if $y != false {
95 $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch);
96 } @else {
97 $y: $ref-y;
98 }
99
100 @if $chroma-range != 1 {
101 $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0));
102 @if $chroma-inv {
103 $c: 1 - $c;
104 }
105 $c: meta.call($chroma-easing, $c);
106 $c: $chroma-range + (1 - $chroma-range) * $c;
107 }
108
109 $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
110
111 $contrast-black: iro-colors.apcaContrast($black-y, $y);
112 $contrast-white: iro-colors.apcaContrast($white-y, $y);
113
114 $palette: map.set($palette, $key, $color);
115 $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
116 }
117
118 @return $palette;
119}
120
121@function transparent-palette($color, $text, $alphas) {
122 $palette: (
123 --text: $text,
124 );
125
126 @each $key, $alpha in $alphas {
127 $palette: map.set($palette, $key, rgba($color, $alpha));
128 }
129
130 @return $palette;
131}
132
133@function px-to-em($size, $base: iro.$vars-root-size) {
134 @return math.div($size, $base) * 1em;
135}
diff --git a/src_old/_layouts.scss b/src_old/_layouts.scss
new file mode 100644
index 0000000..572308d
--- /dev/null
+++ b/src_old/_layouts.scss
@@ -0,0 +1,8 @@
1@use 'layouts/media';
2@use 'layouts/container';
3@use 'layouts/button-group';
4@use 'layouts/form';
5@use 'layouts/flex';
6@use 'layouts/overflow';
7@use 'layouts/card-list';
8//@use 'layouts/message-group';
diff --git a/src_old/_mixins.scss b/src_old/_mixins.scss
new file mode 100644
index 0000000..dca6831
--- /dev/null
+++ b/src_old/_mixins.scss
@@ -0,0 +1,38 @@
1@use 'sass:list';
2@use 'functions' as fn;
3
4@mixin set-font($basis, $values: ()) {
5 $values: fn.set-font($basis, $values);
6
7 @each $prop, $value in $values {
8 @if $value != null {
9 #{$prop}: $value;
10 }
11 }
12}
13
14@mixin heading-strong($size) {
15 color: fn.global-color(--heading);
16 font-size: fn.global-dim(list.join(--heading, $size));
17}
18
19@mixin heading-medium($size) {
20 @include set-font(--standard, (
21 --line-height: null,
22 --size: fn.global-dim(list.join(--heading, $size)),
23 --weight: bold
24 ));
25
26 color: fn.global-color(--heading);
27}
28
29@mixin heading-faint($size) {
30 @include set-font(--standard, (
31 --line-height: null,
32 --size: fn.global-dim(list.join(--heading, $size)),
33 --weight: 500,
34 --spacing: 1px
35 ));
36
37 color: fn.global-color(--text-mute);
38}
diff --git a/src_old/_objects.scss b/src_old/_objects.scss
new file mode 100644
index 0000000..c5049cd
--- /dev/null
+++ b/src_old/_objects.scss
@@ -0,0 +1,28 @@
1@use 'objects/icon';
2@use 'objects/emoji';
3@use 'objects/heading';
4@use 'objects/divider';
5@use 'objects/badge';
6@use 'objects/button';
7@use 'objects/text-field';
8@use 'objects/field-label';
9@use 'objects/radio';
10@use 'objects/checkbox';
11@use 'objects/switch';
12@use 'objects/action-button';
13// @use 'objects/overflow-button';
14@use 'objects/status-indicator';
15@use 'objects/avatar';
16// @use 'objects/message';
17@use 'objects/side-nav';
18@use 'objects/popover';
19@use 'objects/menu';
20@use 'objects/card';
21// @use 'objects/icon-nav';
22@use 'objects/backdrop';
23// @use 'objects/dialog';
24@use 'objects/lightbox';
25// @use 'objects/list-group';
26@use 'objects/table';
27@use 'objects/alert';
28@use 'objects/palette';
diff --git a/src_old/_scopes.scss b/src_old/_scopes.scss
new file mode 100644
index 0000000..a3aeb6c
--- /dev/null
+++ b/src_old/_scopes.scss
@@ -0,0 +1,6 @@
1@use 'scopes/links';
2@use 'scopes/code';
3@use 'scopes/blockquotes';
4@use 'scopes/lists';
5@use 'scopes/headings';
6@use 'scopes/tables';
diff --git a/src_old/_themes.scss b/src_old/_themes.scss
new file mode 100644
index 0000000..2ca89cb
--- /dev/null
+++ b/src_old/_themes.scss
@@ -0,0 +1,86 @@
1@use 'iro-sass/src/index' as iro;
2@use 'functions' as fn;
3
4$static-themes: 'black' 'white' !default;
5
6@include iro.bem-theme('base') {
7 background-color: fn.global-color(--bg-base);
8
9 @include iro.bem-suffix('light') {
10 @media (prefers-color-scheme: light) {
11 background-color: fn.global-color(--bg-base);
12 }
13 }
14
15 @include iro.bem-suffix('dark') {
16 @media (prefers-color-scheme: dark) {
17 background-color: fn.global-color(--bg-base);
18 }
19 }
20}
21
22@include iro.bem-theme('l1') {
23 background-color: fn.global-color(--bg-l1);
24
25 @include iro.bem-suffix('light') {
26 @media (prefers-color-scheme: light) {
27 background-color: fn.global-color(--bg-l1);
28 }
29 }
30
31 @include iro.bem-suffix('dark') {
32 @media (prefers-color-scheme: dark) {
33 background-color: fn.global-color(--bg-l1);
34 }
35 }
36}
37
38@include iro.bem-theme('l2') {
39 background-color: fn.global-color(--bg-l2);
40
41 @include iro.bem-suffix('light') {
42 @media (prefers-color-scheme: light) {
43 background-color: fn.global-color(--bg-l2);
44 }
45 }
46
47 @include iro.bem-suffix('dark') {
48 @media (prefers-color-scheme: dark) {
49 background-color: fn.global-color(--bg-l2);
50 }
51 }
52}
53
54@include iro.bem-theme('50') {
55 background-color: fn.global-color(--base --50);
56
57 @include iro.bem-suffix('light') {
58 @media (prefers-color-scheme: light) {
59 background-color: fn.global-color(--base --50);
60 }
61 }
62
63 @include iro.bem-suffix('dark') {
64 @media (prefers-color-scheme: dark) {
65 background-color: fn.global-color(--base --50);
66 }
67 }
68}
69
70@each $theme in $static-themes {
71 @include iro.bem-theme(static-#{$theme}) {
72 color: fn.global-color(--#{$theme}-transparent --800);
73
74 @include iro.bem-suffix('light') {
75 @media (prefers-color-scheme: light) {
76 background-color: fn.global-color(--base --50);
77 }
78 }
79
80 @include iro.bem-suffix('dark') {
81 @media (prefers-color-scheme: dark) {
82 background-color: fn.global-color(--base --50);
83 }
84 }
85 }
86}
diff --git a/src_old/_utils.scss b/src_old/_utils.scss
new file mode 100644
index 0000000..c0ce7a3
--- /dev/null
+++ b/src_old/_utils.scss
@@ -0,0 +1,233 @@
1@use 'sass:map';
2@use 'iro-sass/src/index' as iro;
3@use 'functions' as fn;
4@use 'include-media/dist/include-media' as media;
5
6$dirs: (
7 '': '',
8 'bs': '-block-start',
9 'be': '-block-end',
10 'b': '-block',
11 'is': '-inline-start',
12 'ie': '-inline-end',
13 'i': '-inline',
14) !default;
15
16$sizes: 0 10 50 75 100 125 200 400 700 800 !default;
17
18@include iro.bem-utility('d-block') {
19 display: block;
20}
21
22@include iro.bem-utility('d-inline-block') {
23 display: inline-block;
24}
25
26@include iro.bem-utility('d-contents') {
27 display: contents;
28}
29
30@include iro.bem-utility('td-none') {
31 text-decoration: none;
32}
33
34@include iro.bem-utility('d-none') {
35 display: none;
36
37 @each $breakpoint in map.keys(media.$breakpoints) {
38 @include media.media('<=#{$breakpoint}') {
39 @include iro.bem-suffix('#{$breakpoint}-lo') {
40 display: none;
41 }
42 }
43
44 @include media.media('>#{$breakpoint}') {
45 @include iro.bem-suffix('#{$breakpoint}-hi') {
46 display: none;
47 }
48 }
49 }
50
51 @include iro.bem-at-theme('js') {
52 @include iro.bem-suffix('js') {
53 display: none;
54 }
55 }
56
57 @include iro.bem-at-theme('no-js') {
58 @include iro.bem-suffix('no-js') {
59 display: none;
60 }
61 }
62
63 @include iro.bem-suffix('empty') {
64 &:empty {
65 display: none;
66 }
67 }
68}
69
70@include iro.bem-utility('ta-start') {
71 text-align: start;
72}
73
74@include iro.bem-utility('ta-end') {
75 text-align: end;
76}
77
78@include iro.bem-utility('ta-center') {
79 text-align: center;
80}
81
82@include iro.bem-utility('fw-normal') {
83 font-weight: normal;
84}
85
86@include iro.bem-utility('ai-center') {
87 align-items: center;
88}
89
90@include iro.bem-utility('ai-start') {
91 align-items: flex-start;
92}
93
94@include iro.bem-utility('ai-end') {
95 align-items: flex-end;
96}
97
98@include iro.bem-utility('jc-center') {
99 justify-content: center;
100}
101
102@include iro.bem-utility('jc-start') {
103 justify-content: flex-start;
104}
105
106@include iro.bem-utility('jc-end') {
107 justify-content: flex-end;
108}
109
110@include iro.bem-utility('c-heading') {
111 color: fn.color(--heading);
112}
113
114@include iro.bem-utility('c-text') {
115 color: fn.color(--text);
116}
117
118@include iro.bem-utility('c-mute') {
119 color: fn.color(--text-mute);
120}
121
122@include iro.bem-utility('c-mute-more') {
123 color: fn.color(--text-mute-more);
124}
125
126@each $dir, $prop in (is: inline-size, bs: block-size) {
127 @include iro.bem-utility('#{$dir}-100') {
128 #{$prop}: 100%;
129 }
130
131 @include iro.bem-utility('#{$dir}-75') {
132 #{$prop}: 75%;
133 }
134
135 @include iro.bem-utility('#{$dir}-50') {
136 #{$prop}: 50%;
137 }
138
139 @include iro.bem-utility('#{$dir}-25') {
140 #{$prop}: 25%;
141 }
142
143 @include iro.bem-utility('#{$dir}-1px') {
144 #{$prop}: 1px;
145 }
146
147 @include iro.bem-utility('#{$dir}-0') {
148 #{$prop}: 0;
149 }
150}
151
152@include iro.bem-utility('elp') {
153 overflow: hidden;
154 text-overflow: ellipsis;
155 white-space: nowrap;
156}
157
158@include iro.bem-utility('p-static') {
159 position: static;
160}
161
162@include iro.bem-utility('p-relative') {
163 position: relative;
164}
165
166@include iro.bem-utility('p-fixed') {
167 position: fixed;
168}
169
170@include iro.bem-utility('p-sticky-bs') {
171 position: sticky;
172 inset-block-start: 0;
173}
174
175@each $dir, $suffix in $dirs {
176 @include iro.bem-utility('m#{$dir}-auto') {
177 margin#{$suffix}: auto;
178 }
179
180 @include iro.bem-utility('p#{$dir}-auto') {
181 padding#{$suffix}: auto;
182 }
183
184 @each $size in $sizes {
185 @include iro.bem-utility('m#{$dir}-#{$size}') {
186 margin#{$suffix}: fn.global-dim(--size --#{$size});
187 }
188
189 @include iro.bem-utility('p#{$dir}-#{$size}') {
190 padding#{$suffix}: fn.global-dim(--size --#{$size});
191 }
192 }
193
194 @include iro.bem-utility('b#{$dir}-0') {
195 border#{$suffix}: 0;
196
197 @include iro.bem-suffix('light') {
198 @media (prefers-color-scheme: light) {
199 border#{$suffix}: 0;
200 }
201 }
202
203 @include iro.bem-suffix('dark') {
204 @media (prefers-color-scheme: dark) {
205 border#{$suffix}: 0;
206 }
207 }
208 }
209
210 @include iro.bem-utility('b#{$dir}-1') {
211 border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border);
212
213 @include iro.bem-suffix('light') {
214 @media (prefers-color-scheme: light) {
215 border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border);
216 }
217 }
218
219 @include iro.bem-suffix('dark') {
220 @media (prefers-color-scheme: dark) {
221 border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border);
222 }
223 }
224 }
225}
226
227@include iro.bem-utility('mbs-neutralize') {
228 &::before {
229 content: '';
230 display: block;
231 margin-block: -100em 100em;
232 }
233}
diff --git a/src_old/_vars.scss b/src_old/_vars.scss
new file mode 100644
index 0000000..6e2cbfc
--- /dev/null
+++ b/src_old/_vars.scss
@@ -0,0 +1,298 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:list';
4@use 'iro-sass/src/index' as iro;
5@use 'include-media/dist/include-media' as media;
6@use 'functions' as fn;
7@use 'config';
8
9@include iro.props-store((
10 --dims: (
11 --size: (
12 --0: 0,
13 --10: iro.fn-px-to-rem(1px),
14 --25: iro.fn-px-to-rem(2px),
15 --40: iro.fn-px-to-rem(3px),
16 --50: iro.fn-px-to-rem(4px),
17 --65: iro.fn-px-to-rem(5px),
18 --75: iro.fn-px-to-rem(6px),
19 --85: iro.fn-px-to-rem(7px),
20 --100: iro.fn-px-to-rem(8px),
21 --115: iro.fn-px-to-rem(9px),
22 --125: iro.fn-px-to-rem(10px),
23 --130: iro.fn-px-to-rem(11px),
24 --150: iro.fn-px-to-rem(12px),
25 --160: iro.fn-px-to-rem(13px),
26 --175: iro.fn-px-to-rem(14px),
27 --200: iro.fn-px-to-rem(16px),
28 --225: iro.fn-px-to-rem(18px),
29 --250: iro.fn-px-to-rem(20px),
30 --275: iro.fn-px-to-rem(22px),
31 --300: iro.fn-px-to-rem(24px),
32 --325: iro.fn-px-to-rem(26px),
33 --350: iro.fn-px-to-rem(28px),
34 --375: iro.fn-px-to-rem(30px),
35 --400: iro.fn-px-to-rem(32px),
36 --450: iro.fn-px-to-rem(36px),
37 --500: iro.fn-px-to-rem(40px),
38 --550: iro.fn-px-to-rem(44px),
39 --600: iro.fn-px-to-rem(48px),
40 --650: iro.fn-px-to-rem(52px),
41 --700: iro.fn-px-to-rem(56px),
42 --800: iro.fn-px-to-rem(64px),
43 --900: iro.fn-px-to-rem(72px),
44 --1000: iro.fn-px-to-rem(80px),
45 --1200: iro.fn-px-to-rem(96px),
46 --1600: iro.fn-px-to-rem(128px),
47 --2000: iro.fn-px-to-rem(160px),
48 --2400: iro.fn-px-to-rem(192px),
49 --2500: iro.fn-px-to-rem(200px),
50 --2600: iro.fn-px-to-rem(208px),
51 --2800: iro.fn-px-to-rem(224px),
52 --3200: iro.fn-px-to-rem(256px),
53 --3400: iro.fn-px-to-rem(272px),
54 --3500: iro.fn-px-to-rem(280px),
55 --3600: iro.fn-px-to-rem(288px),
56 --3800: iro.fn-px-to-rem(304px),
57 --4600: iro.fn-px-to-rem(368px),
58 --5000: iro.fn-px-to-rem(400px),
59 --6000: iro.fn-px-to-rem(480px),
60 ),
61
62 --font: (
63 --standard: (
64 --family: ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
65 --line-height: 1.5,
66 --feature-settings: ('\'ss01\''),
67 ),
68 --headline: (
69 --family: ('Inter', fn.dim(--font --standard --family, null)),
70 --line-height: 1.3,
71 --weight: 800,
72 --feature-settings: ('\'opsz\'' 32, '\'ss01\'', '\'cv06\''),
73 ),
74 --mono: (
75 --family: ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace),
76 --line-height: 1.4,
77 )
78 ),
79
80 --font-size: (
81 --50: iro.fn-px-to-rem(12px),
82 --75: iro.fn-px-to-rem(13px),
83 --100: iro.fn-px-to-rem(14px),
84 --150: iro.fn-px-to-rem(16px),
85 --200: iro.fn-px-to-rem(18px),
86 --300: iro.fn-px-to-rem(20px),
87 --400: iro.fn-px-to-rem(24px),
88 --500: iro.fn-px-to-rem(28px),
89 --600: iro.fn-px-to-rem(32px),
90 --700: iro.fn-px-to-rem(36px),
91 --800: iro.fn-px-to-rem(40px),
92 --900: iro.fn-px-to-rem(45px),
93 --1000: iro.fn-px-to-rem(50px),
94 --1100: iro.fn-px-to-rem(60px),
95 ),
96
97 --border: (
98 --thick: 4px,
99 --medium: 2px,
100 --thin: 1px,
101 ),
102
103 --shadow: (
104 --x: 0,
105 --y: 1px,
106 --blur: 4px,
107 ),
108
109 --rounding: 4px,
110
111 --key-focus: (
112 --outline: fn.dim(--border --thick, null),
113 --border: fn.dim(--border --medium, null),
114 --border-offset: fn.dim(--border --medium, null),
115 ),
116
117 --paragraph: (
118 --margin-bs: fn.dim(--size --300, null),
119 ),
120
121 --heading: (
122 --margin-bs: fn.dim(--size --700, null),
123 --margin-bs-sibling: fn.dim(--size --325, null),
124
125 --xxl: fn.dim(--font-size --300, null),
126 --xl: fn.dim(--font-size --200, null),
127 --lg: fn.dim(--font-size --150, null),
128 --md: fn.dim(--font-size --100, null),
129 --sm: fn.dim(--font-size --75, null),
130 --xs: fn.dim(--font-size --50, null),
131
132 --display: (
133 --xxl: fn.dim(--font-size --1100, null),
134 --xl: fn.dim(--font-size --700, null),
135 --lg: fn.dim(--font-size --300, null),
136 --md: fn.dim(--font-size --150, null),
137 --sm: fn.dim(--font-size --75, null),
138 --xs: fn.dim(--font-size --50, null),
139 ),
140
141 --display-sm: (
142 --xxl: fn.dim(--font-size --900, null),
143 --xl: fn.dim(--font-size --600, null),
144 --lg: fn.dim(--font-size --200, null),
145 --md: fn.dim(--font-size --100, null),
146 --sm: fn.dim(--font-size --75, null),
147 --xs: fn.dim(--font-size --50, null),
148 )
149 ),
150
151 --list: (
152 --indent: fn.dim(--size --400, null),
153 --compact-indent: fn.dim(--size --250, null),
154 ),
155 ),
156));
157
158@each $breakpoint in map.keys(media.$breakpoints) {
159 @include media.media('<=#{$breakpoint}') {
160 @include iro.props-store((), $breakpoint);
161 }
162}
163
164@include iro.props-store((
165 --dims: (
166 --heading: (
167 --margin-bs: fn.dim(--size --600, null),
168 ),
169
170 --list: (
171 --indent: fn.dim(--size --300),
172 ),
173 )
174), 'sm');
175
176@include iro.props-store((
177 --dims: (
178 --heading: (
179 --margin-bs: fn.dim(--size --500, null),
180 ),
181
182 --list: (
183 --indent: fn.dim(--size --250),
184 ),
185 )
186), 'xs');
187
188//
189
190@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
191 @include iro.props-store((
192 --colors: (
193 #{$palette-name}-static: fn.palette(
194 $palette,
195 map.get(config.$static-colors, --contrasts),
196 1,
197 map.get(config.$static-colors, --base),
198 ),
199 ),
200 ));
201}
202
203@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
204 $color: list.nth($palette, 1);
205 $text: list.nth($palette, 2);
206
207 @include iro.props-store((
208 --colors: (
209 #{$palette-name}-transparent: fn.transparent-palette(
210 $color,
211 $text,
212 map.get(config.$static-colors, --transparents),
213 ),
214 ),
215 ));
216}
217
218@each $theme-name, $theme in config.$themes {
219 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
220
221 @each $palette-name, $palette in map.get($theme, --palettes) {
222 $base-color: list.nth($palette, 1);
223 $contrasts: list.nth($palette, 2);
224 $ranges: list.nth($palette, 3);
225
226 @include iro.props-store((
227 --colors: (
228 $palette-name: fn.palette(
229 $base-color,
230 map.get($theme, --contrasts, $contrasts),
231 map.get($theme, --ranges, $ranges),
232 list.nth(map.get($theme, --palettes, --base), 1),
233 ),
234 ),
235 ), $tree);
236 }
237
238 @each $color, $value in map.get($theme, --constants) {
239 @include iro.props-store((
240 --colors: (
241 $color: $value,
242 ),
243 ), $tree);
244 }
245
246 @each $color, $ref in map.get($theme, --semantic) {
247 $res: ();
248
249 @if meta.type-of($ref) == 'map' {
250 @each $key, $r in $ref {
251 $res: map.set($res, $key, fn.color($r));
252 }
253 } @else {
254 $res: fn.color($ref);
255 }
256
257 @include iro.props-store((
258 --colors: (
259 $color: $res,
260 ),
261 ), $tree);
262 }
263}
264
265@each $theme-name, $theme in config.$themes {
266 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
267
268 @include iro.props-store((
269 --colors: (
270
271 ),
272 ), $tree);
273}
274
275@mixin apply-vars {
276 :root {
277 @include iro.props-assign;
278
279 @each $breakpoint in map.keys(media.$breakpoints) {
280 @include media.media('<=#{$breakpoint}') {
281 @include iro.props-assign($breakpoint);
282 }
283 }
284
285 @media (prefers-color-scheme: dark) {
286 @include iro.props-assign('dark');
287 }
288 }
289
290 @each $theme-name, $theme in config.$themes {
291 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
292
293 @include iro.bem-theme($theme-name) {
294 @include iro.props-assign();
295 @include iro.props-assign($tree, --colors);
296 }
297 }
298}
diff --git a/src_old/functions/colors/_apca.scss b/src_old/functions/colors/_apca.scss
new file mode 100644
index 0000000..0c03529
--- /dev/null
+++ b/src_old/functions/colors/_apca.scss
@@ -0,0 +1,127 @@
1/* stylelint-disable scss/dollar-variable-pattern */
2/* stylelint-disable scss/at-function-pattern */
3
4@use 'sass:color';
5@use 'sass:list';
6@use 'sass:map';
7@use 'sass:math';
8
9$SA98G: (
10 mainTRC: 2.4,
11
12 sRco: .2126729,
13 sGco: .7151522,
14 sBco: .072175,
15
16 normBG: .56,
17 normTXT: .57,
18 revTXT: .62,
19 revBG: .65,
20
21 blkThrs: .022,
22 blkClmp: 1.414,
23 scaleBoW: 1.14,
24 scaleWoB: 1.14,
25 loBoWoffset: .027,
26 loWoBoffset: .027,
27 deltaYmin: .0005,
28 loClip: .0001,
29
30 mFactor: 1.9468554433171,
31 mOffsetIn: .0387393816571401,
32 mExpAdj: .283343396420869,
33 mOffsetOut: .312865795870758,
34);
35
36@function apca_sRGB_to_Y($color) {
37 $rgb: color.to-space($color, rgb);
38
39 @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
40 map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) +
41 map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
42}
43
44@function apca_Y_to_sRGB($y) {
45 $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
46 @return rgb($c, $c, $c);
47}
48
49@function apcaContrast($txtY, $bgY) {
50 /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */
51 $icp: .0 1.1;
52
53 @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
54 @return 0;
55 }
56
57 @if $txtY <= map.get($SA98G, blkThrs) {
58 $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
59 }
60 @if $bgY <= map.get($SA98G, blkThrs) {
61 $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
62 }
63
64 @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
65 @return 0;
66 }
67
68 $outputContrast: 0;
69
70 @if $bgY > $txtY {
71 $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
72
73 @if $SAPC >= map.get($SA98G, loClip) {
74 $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
75 }
76 } @else {
77 $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
78
79 @if $SAPC <= -1 * map.get($SA98G, loClip) {
80 $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
81 }
82 }
83
84 @return $outputContrast * 100;
85}
86
87@function apcaReverse($contrast, $knownY, $knownType: 'bg') {
88 $unknownY: $knownY;
89
90 $knownExp: 0;
91 $unknownExp: 0;
92
93 $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
94 $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
95
96 $contrast: math.div($contrast * .01 + $offset, $scale);
97
98 @if $knownY <= map.get($SA98G, blkThrs) {
99 $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
100 }
101
102 @if $knownType == 'bg' {
103 $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
104 $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
105 $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
106 } @else {
107 $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
108 $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
109 $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
110 }
111
112 @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
113 @return false;
114 }
115
116 @if $unknownY > 1.06 or $unknownY < 0 {
117 @return false;
118 }
119
120 @if $unknownY <= map.get($SA98G, blkThrs) {
121 $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
122 }
123
124 $unknownY: math.max(math.min($unknownY, 1), 0);
125
126 @return $unknownY;
127}
diff --git a/src_old/functions/colors/_index.scss b/src_old/functions/colors/_index.scss
new file mode 100644
index 0000000..9dad0f9
--- /dev/null
+++ b/src_old/functions/colors/_index.scss
@@ -0,0 +1 @@
@forward 'apca';
diff --git a/src_old/index.scss b/src_old/index.scss
new file mode 100644
index 0000000..a8d9c24
--- /dev/null
+++ b/src_old/index.scss
@@ -0,0 +1,10 @@
1@use 'vars' as vars;
2
3@use 'base';
4@use 'layouts';
5@use 'objects';
6@use 'scopes';
7@use 'themes';
8@use 'utils';
9
10@include vars.apply-vars;
diff --git a/src_old/layouts/_button-group.scss b/src_old/layouts/_button-group.scss
new file mode 100644
index 0000000..a70d27a
--- /dev/null
+++ b/src_old/layouts/_button-group.scss
@@ -0,0 +1,16 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('button-group') {
5 @include iro.props-store((
6 --dims: (
7 --spacing: fn.global-dim(--size --150),
8 ),
9 ));
10
11 @include iro.bem-layout(iro.props-namespace()) {
12 display: flex;
13 gap: fn.dim(--spacing);
14 flex-wrap: wrap;
15 }
16}
diff --git a/src_old/layouts/_card-list.scss b/src_old/layouts/_card-list.scss
new file mode 100644
index 0000000..65b6a66
--- /dev/null
+++ b/src_old/layouts/_card-list.scss
@@ -0,0 +1,96 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('card-list') {
6 @include iro.props-store((
7 --dims: (
8 --row-gap: fn.global-dim(--size --800),
9 --col-gap: fn.global-dim(--size --400),
10
11 --grid: (
12 --row-gap: fn.global-dim(--size --800),
13 --col-gap: fn.global-dim(--size --400),
14 --col-width: fn.global-dim(--size --3200),
15 ),
16 --masonry: (
17 --row-gap: fn.global-dim(--size --800),
18 --col-gap: fn.global-dim(--size --400),
19 --col-width: fn.global-dim(--size --3200),
20 ),
21 --masonry-h: (
22 --row-gap: fn.global-dim(--size --800),
23 --col-gap: fn.global-dim(--size --400),
24 --row-height: fn.global-dim(--size --3200),
25 )
26 ),
27 --colors: (
28 --border: fn.global-color(--border),
29 ),
30 ));
31
32 @include iro.bem-layout(iro.props-namespace()) {
33 display: flex;
34 flex-direction: column;
35 gap: fn.dim(--row-gap) fn.dim(--col-gap);
36
37 @include iro.bem-modifier('grid') {
38 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
40 gap: fn.dim(--grid --col-gap);
41
42 @include iro.bem-modifier('quiet') {
43 row-gap: fn.dim(--grid --row-gap);
44 }
45 }
46
47 @include iro.bem-modifier('masonry') {
48 display: block;
49 columns: auto fn.dim(--masonry --col-width);
50 column-gap: fn.dim(--masonry --col-gap);
51
52 @include iro.bem-elem('card') {
53 margin-block-end: fn.dim(--masonry --col-gap);
54 break-inside: avoid;
55 }
56
57 @include iro.bem-modifier('quiet') {
58 @include iro.bem-elem('card') {
59 margin-block-end: fn.dim(--masonry --row-gap);
60 }
61 }
62 }
63
64 @include iro.bem-modifier('masonry-h') {
65 flex-flow: row wrap;
66 gap: fn.dim(--masonry-h --col-gap);
67
68 &::after {
69 content: '';
70 display: block;
71 flex: 1 0 auto;
72 inline-size: fn.dim(--masonry-h --row-height);
73 block-size: 0;
74 }
75
76 @include iro.bem-elem('card') {
77 flex: 1 0 auto;
78 max-inline-size: 100%;
79 }
80
81 @include iro.bem-elem('card-image') {
82 block-size: fn.dim(--masonry-h --row-height);
83 }
84
85 @include iro.bem-modifier('quiet') {
86 row-gap: fn.dim(--masonry-h --row-gap);
87 }
88 }
89
90 @include iro.bem-modifier('aspect-5\\/4') {
91 @include iro.bem-elem('card-image') {
92 aspect-ratio: 5 / 4;
93 }
94 }
95 }
96}
diff --git a/src_old/layouts/_container.scss b/src_old/layouts/_container.scss
new file mode 100644
index 0000000..d13c4f3
--- /dev/null
+++ b/src_old/layouts/_container.scss
@@ -0,0 +1,45 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('container') {
5 @include iro.props-store((
6 --dims: (
7 --narrow-125: iro.fn-px-to-rem(720px),
8 --narrow: iro.fn-px-to-rem(610px),
9 --narrow-75: iro.fn-px-to-rem(500px),
10 --pad-i: fn.global-dim(--size --400),
11 --pad-b: fn.global-dim(--size --800),
12 )
13 ));
14
15 @include iro.props-store((
16 --dims: (
17 --pad-i: fn.global-dim(--size --200),
18 --pad-b: fn.global-dim(--size --600),
19 )
20 ), 'sm');
21
22 @include iro.props-store((
23 --dims: (
24 --pad-i: fn.global-dim(--size --150),
25 --pad-b: fn.global-dim(--size --450),
26 )
27 ), 'xs');
28
29 @include iro.bem-layout(iro.props-namespace()) {
30 @each $size in 'narrow-125' 'narrow' 'narrow-75' {
31 @include iro.bem-modifier($size) {
32 max-inline-size: fn.dim(--#{$size});
33 margin-inline: auto;
34 }
35 }
36
37 @include iro.bem-modifier('pad-i') {
38 padding-inline: fn.dim(--pad-i);
39 }
40
41 @include iro.bem-modifier('pad-b') {
42 padding-block: fn.dim(--pad-b);
43 }
44 }
45}
diff --git a/src_old/layouts/_flex.scss b/src_old/layouts/_flex.scss
new file mode 100644
index 0000000..d3f4f9c
--- /dev/null
+++ b/src_old/layouts/_flex.scss
@@ -0,0 +1,27 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('flex') {
4 @include iro.bem-layout(iro.props-namespace()) {
5 display: flex;
6
7 @include iro.bem-modifier('align-stretch') {
8 align-items: stretch;
9 }
10
11 @include iro.bem-modifier('align-center') {
12 align-items: center;
13 }
14
15 @include iro.bem-modifier('align-start') {
16 align-items: flex-start;
17 }
18
19 @include iro.bem-modifier('align-end') {
20 align-items: flex-end;
21 }
22
23 @include iro.bem-modifier('column') {
24 flex-direction: column;
25 }
26 }
27}
diff --git a/src_old/layouts/_form.scss b/src_old/layouts/_form.scss
new file mode 100644
index 0000000..f6b60ea
--- /dev/null
+++ b/src_old/layouts/_form.scss
@@ -0,0 +1,62 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4// @use '../objects/field-label';
5
6@include iro.props-namespace('form') {
7 @include iro.props-store((
8 --dims: (
9 --item-spacing-b: fn.global-dim(--size --325),
10 --label-spacing-i: fn.global-dim(--size --325),
11 --hint-font-size: fn.global-dim(--font-size --75),
12 ),
13 ));
14
15 @include iro.bem-layout(iro.props-namespace()) {
16 display: flex;
17 flex-direction: column;
18 gap: fn.dim(--item-spacing-b) fn.dim(--label-spacing-i);
19
20 @include iro.bem-elem('item') {
21 display: block;
22 }
23
24 @include iro.bem-elem('item-content') {
25 @include iro.bem-modifier('align-start') {
26 align-self: start;
27 }
28 }
29
30 @include iro.bem-modifier('row') {
31 flex-direction: row;
32 align-items: flex-end;
33 }
34
35 @include iro.bem-modifier('labels-start', 'labels-end') {
36 display: grid;
37 grid-template-columns: auto 1fr;
38 grid-template-rows: auto;
39 align-items: baseline;
40
41 @include iro.bem-elem('item') {
42 display: contents;
43 }
44
45 @include iro.bem-elem('item-label') {
46 grid-column: 1;
47 padding-inline-end: 0;
48 }
49
50 @include iro.bem-elem('item-content') {
51 grid-column: 2;
52 margin-block-start: 0;
53 }
54 }
55
56 @include iro.bem-modifier('labels-end') {
57 @include iro.bem-elem('item-label') {
58 text-align: end;
59 }
60 }
61 }
62}
diff --git a/src_old/layouts/_media.scss b/src_old/layouts/_media.scss
new file mode 100644
index 0000000..c42aa3e
--- /dev/null
+++ b/src_old/layouts/_media.scss
@@ -0,0 +1,47 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$sizes: 'gapless' 'sm' 'lg' 'xl' !default;
5
6@include iro.props-namespace('media') {
7 @include iro.props-store((
8 --dims: (
9 --gap: fn.global-dim(--size --150),
10
11 --gapless: 0,
12 --sm: fn.global-dim(--size --100),
13 --lg: fn.global-dim(--size --300),
14 --xl: fn.global-dim(--size --450),
15 )
16 ));
17
18 @include iro.bem-layout(iro.props-namespace()) {
19 display: flex;
20 align-items: center;
21 gap: fn.dim(--gap);
22 line-height: 1.4;
23
24 @each $size in $sizes {
25 @include iro.bem-modifier($size) {
26 gap: fn.dim(--#{$size});
27 }
28 }
29
30 @include iro.bem-modifier('wrap') {
31 flex-wrap: wrap;
32 }
33
34 @include iro.bem-elem('block') {
35 flex: 0 0 auto;
36
37 @include iro.bem-modifier('shrink', 'main') {
38 flex-shrink: 1;
39 min-inline-size: 0;
40 }
41
42 @include iro.bem-modifier('main') {
43 inline-size: 100%;
44 }
45 }
46 }
47}
diff --git a/src_old/layouts/_overflow.scss b/src_old/layouts/_overflow.scss
new file mode 100644
index 0000000..8643bbf
--- /dev/null
+++ b/src_old/layouts/_overflow.scss
@@ -0,0 +1,9 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('overflow') {
5 @include iro.bem-layout(iro.props-namespace()) {
6 overflow: auto;
7 scrollbar-color: fn.global-color(--text-disabled) transparent;
8 }
9}
diff --git a/src_old/objects/_action-button.scss b/src_old/objects/_action-button.scss
new file mode 100644
index 0000000..7fe9d44
--- /dev/null
+++ b/src_old/objects/_action-button.scss
@@ -0,0 +1,343 @@
1@use 'sass:list';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$sizes: 'sm' 'lg' 'xl' !default;
6$static-themes: 'black' 'white' !default;
7
8@mixin static-theme($theme: ()) {
9 border-color: fn.color(list.join($theme, --disabled --border));
10 background-color: fn.color(list.join($theme, --disabled --bg));
11 color: fn.color(list.join($theme, --disabled --label));
12
13 &::after {
14 outline-color: fn.color(list.join($theme, --key-focus --border));
15 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
16 }
17
18 &:link,
19 &:visited,
20 &:enabled {
21 border-color: fn.color(list.join($theme, --border));
22 background-color: fn.color(list.join($theme, --bg));
23 color: fn.color(list.join($theme, --label));
24
25 &:hover,
26 &:focus-visible {
27 border-color: fn.color(list.join($theme, --hover --border));
28 background-color: fn.color(list.join($theme, --hover --bg));
29 color: fn.color(list.join($theme, --hover --label));
30 }
31
32 &:active {
33 border-color: fn.color(list.join($theme, --active --border));
34 background-color: fn.color(list.join($theme, --active --bg));
35 color: fn.color(list.join($theme, --active --label));
36 }
37 }
38
39 @include iro.bem-modifier('quiet') {
40 border-color: transparent;
41 background-color: transparent;
42 color: fn.color(list.join($theme, --quiet --disabled --label));
43
44 &:link,
45 &:visited,
46 &:enabled {
47 border-color: transparent;
48 background-color: transparent;
49 color: fn.color(list.join($theme, --quiet --label));
50
51 &:hover,
52 &:focus-visible {
53 border-color: transparent;
54 background-color: fn.color(list.join($theme, --quiet --hover --bg));
55 color: fn.color(list.join($theme, --quiet --hover --label));
56 }
57
58 &:active {
59 border-color: transparent;
60 background-color: fn.color(list.join($theme, --quiet --active --bg));
61 color: fn.color(list.join($theme, --quiet --active --label));
62 }
63 }
64 }
65
66 @include iro.bem-is('selected') {
67 border-color: fn.color(list.join($theme, --selected --disabled --border));
68 background-color: fn.color(list.join($theme, --selected --disabled --bg));
69 color: fn.color(list.join($theme, --selected --disabled --label));
70
71 &:link,
72 &:visited,
73 &:enabled {
74 border-color: fn.color(list.join($theme, --selected --border));
75 background-color: fn.color(list.join($theme, --selected --bg));
76 color: fn.color(list.join($theme, --selected --label));
77
78 &:hover,
79 &:focus-visible {
80 border-color: fn.color(list.join($theme, --selected --hover --border));
81 background-color: fn.color(list.join($theme, --selected --hover --bg));
82 color: fn.color(list.join($theme, --selected --hover --label));
83 }
84
85 &:active {
86 border-color: fn.color(list.join($theme, --selected --active --border));
87 background-color: fn.color(list.join($theme, --selected --active --bg));
88 color: fn.color(list.join($theme, --selected --active --label));
89 }
90 }
91 }
92}
93
94@include iro.props-namespace('action-button') {
95 @include iro.props-store((
96 --dims: (
97 --line-height: 1.4,
98 --pad-i: fn.global-dim(--size --150),
99 --pad-i-pill: fn.global-dim(--size --200),
100 --pad-b: fn.global-dim(--size --85),
101 --border: fn.global-dim(--border --thin),
102 --rounding: fn.global-dim(--rounding),
103 --font-size: fn.global-dim(--font-size --100),
104
105 --sm: (
106 --pad-i: fn.global-dim(--size --100),
107 --pad-i-pill: fn.global-dim(--size --150),
108 --pad-b: fn.global-dim(--size --40),
109 --font-size: fn.global-dim(--font-size --75),
110 ),
111 --lg: (
112 --pad-i: fn.global-dim(--size --175),
113 --pad-i-pill: fn.global-dim(--size --225),
114 --pad-b: fn.global-dim(--size --115),
115 --font-size: fn.global-dim(--font-size --150),
116 ),
117 --xl: (
118 --pad-i: fn.global-dim(--size --225),
119 --pad-i-pill: fn.global-dim(--size --300),
120 --pad-b: fn.global-dim(--size --150),
121 --font-size: fn.global-dim(--font-size --200),
122 ),
123
124 --key-focus: (
125 --border: fn.global-dim(--key-focus --border),
126 --border-offset: fn.global-dim(--key-focus --border-offset),
127 --outline: fn.global-dim(--key-focus --outline),
128 ),
129 ),
130 --colors: (
131 --bg: fn.global-color(--base --75),
132 --label: fn.global-color(--text),
133 --border: fn.global-color(--border-strong),
134
135 --hover: (
136 --bg: fn.global-color(--border-mute),
137 --label: fn.global-color(--heading),
138 --border: fn.global-color(--text-mute-more),
139 ),
140 --active: (
141 --bg: fn.global-color(--border),
142 --label: fn.global-color(--heading),
143 --border: fn.global-color(--text-mute),
144 ),
145 --disabled: (
146 --bg: fn.global-color(--bg-l1),
147 --label: fn.global-color(--border-strong),
148 --border: fn.global-color(--border),
149 ),
150 --key-focus: (
151 --border: fn.global-color(--focus --border),
152 --outline: fn.global-color(--focus --outline),
153 ),
154
155 --selected: (
156 --bg: fn.global-color(--text-mute),
157 --label: fn.global-color(--base --50),
158 --border: fn.global-color(--text-mute),
159
160 --hover: (
161 --bg: fn.global-color(--text),
162 --label: fn.global-color(--base --50),
163 --border: fn.global-color(--text),
164 ),
165 --active: (
166 --bg: fn.global-color(--heading),
167 --label: fn.global-color(--base --50),
168 --border: fn.global-color(--heading),
169 ),
170 --disabled: (
171 --bg: fn.global-color(--border-mute),
172 --label: fn.global-color(--border-strong),
173 --border: fn.global-color(--border-mute),
174 ),
175 ),
176
177 --quiet: (
178 --label: fn.global-color(--text),
179
180 --hover: (
181 --bg: fn.global-color(--border-mute),
182 --label: fn.global-color(--heading),
183 ),
184 --active: (
185 --bg: fn.global-color(--border),
186 --label: fn.global-color(--heading),
187 ),
188 --disabled: (
189 --label: fn.global-color(--border-strong),
190 ),
191 ),
192 ),
193 ));
194
195 @each $theme in $static-themes {
196 @include iro.props-store((
197 --colors: (
198 --static-#{$theme}: (
199 --bg: fn.global-color(--#{$theme}-transparent --100),
200 --label: fn.global-color(--#{$theme}-transparent --900),
201 --border: fn.global-color(--#{$theme}-transparent --400),
202
203 --hover: (
204 --bg: fn.global-color(--#{$theme}-transparent --300),
205 --label: fn.global-color(--#{$theme}-transparent --900),
206 --border: fn.global-color(--#{$theme}-transparent --500),
207 ),
208 --active: (
209 --bg: fn.global-color(--#{$theme}-transparent --400),
210 --label: fn.global-color(--#{$theme}-transparent --900),
211 --border: fn.global-color(--#{$theme}-transparent --600),
212 ),
213 --disabled: (
214 --bg: fn.global-color(--#{$theme}-transparent --100),
215 --label: fn.global-color(--#{$theme}-transparent --500),
216 --border: fn.global-color(--#{$theme}-transparent --300),
217 ),
218 --key-focus: (
219 --border: fn.global-color(--#{$theme}-transparent --900),
220 --outline: fn.global-color(--#{$theme}-transparent --300),
221 ),
222
223 --selected: (
224 --bg: fn.global-color(--#{$theme}-transparent --800),
225 --label: fn.global-color(--#{$theme}-transparent --text),
226 --border: fn.global-color(--#{$theme}-transparent --100),
227
228 --hover: (
229 --bg: fn.global-color(--#{$theme}-transparent --900),
230 --label: fn.global-color(--#{$theme}-transparent --text),
231 --border: fn.global-color(--#{$theme}-transparent --100),
232 ),
233 --active: (
234 --bg: fn.global-color(--#{$theme}-transparent --900),
235 --label: fn.global-color(--#{$theme}-transparent --text),
236 --border: fn.global-color(--#{$theme}-transparent --100),
237 ),
238 --disabled: (
239 --bg: fn.global-color(--#{$theme}-transparent --200),
240 --label: fn.global-color(--#{$theme}-transparent --500),
241 --border: fn.global-color(--#{$theme}-transparent --100),
242 ),
243 ),
244
245 --quiet: (
246 --label: fn.global-color(--#{$theme}-transparent --900),
247
248 --hover: (
249 --bg: fn.global-color(--#{$theme}-transparent --300),
250 --label: fn.global-color(--#{$theme}-transparent --900),
251 ),
252 --active: (
253 --bg: fn.global-color(--#{$theme}-transparent --400),
254 --label: fn.global-color(--#{$theme}-transparent --900),
255 ),
256 --disabled: (
257 --label: fn.global-color(--#{$theme}-transparent --500),
258 ),
259 ),
260 ),
261 )
262 ));
263 }
264
265 @include iro.bem-object(iro.props-namespace()) {
266 display: inline-block;
267 position: relative;
268 padding-block: fn.dim(--pad-b);
269 padding-inline: fn.dim(--pad-i);
270 border: fn.dim(--border) solid fn.color(--disabled --border);
271 border-radius: fn.dim(--rounding);
272 background-color: fn.color(--disabled --bg);
273 color: fn.color(--disabled --label);
274 line-height: fn.dim(--line-height);
275 text-align: center;
276 text-decoration: none;
277 text-overflow: ellipsis;
278 white-space: nowrap;
279
280 &::after {
281 content: '';
282 display: none;
283 position: absolute;
284 z-index: 1;
285 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
286 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
287 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
288 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
289 pointer-events: none;
290 }
291
292 &:link,
293 &:visited,
294 &:enabled {
295 &:focus-visible {
296 &::after {
297 display: block;
298 }
299 }
300 }
301
302 @include static-theme;
303
304 @each $theme in $static-themes {
305 @include iro.bem-modifier(static-#{$theme}) {
306 @include static-theme(--static-#{$theme});
307 }
308 }
309
310 @include iro.bem-modifier('pill') {
311 padding-inline: fn.dim(--pad-i-pill);
312 border-radius: 100em;
313
314 &::after {
315 border-radius: 100em;
316 }
317 }
318
319 @each $size in $sizes {
320 @include iro.bem-modifier($size) {
321 padding-block: fn.dim(--#{$size} --pad-b);
322 padding-inline: fn.dim(--#{$size} --pad-i);
323 font-size: fn.dim(--#{$size} --font-size);
324
325 @include iro.bem-modifier('pill') {
326 padding-inline: fn.dim(--#{$size} --pad-i-pill);
327 }
328 }
329 }
330
331 @include iro.bem-modifier('icon') {
332 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
333 padding-inline: 0;
334
335 @each $size in $sizes {
336 @include iro.bem-modifier($size) {
337 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b));
338 padding-inline: 0;
339 }
340 }
341 }
342 }
343}
diff --git a/src_old/objects/_alert.scss b/src_old/objects/_alert.scss
new file mode 100644
index 0000000..067c00c
--- /dev/null
+++ b/src_old/objects/_alert.scss
@@ -0,0 +1,43 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$themes: 'accent' 'positive' 'negative' 'warning' !default;
5
6@include iro.props-namespace('alert') {
7 @include iro.props-store((
8 --dims: (
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --250),
11 --pad-b: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding),
13 ),
14 --colors: (
15 --bg: fn.global-color(--bg-l2),
16 --border: fn.global-color(--text-mute-more),
17 ),
18 ));
19
20 @each $theme in $themes {
21 @include iro.props-store((
22 --colors: (
23 --#{$theme}: (
24 --border: fn.global-color(--#{$theme} --700),
25 ),
26 ),
27 ));
28 }
29
30 @include iro.bem-object(iro.props-namespace()) {
31 padding-block: fn.dim(--pad-b);
32 padding-inline: fn.dim(--pad-i);
33 border: fn.dim(--border) solid fn.color(--border);
34 border-radius: fn.dim(--rounding);
35 background-color: fn.color(--bg);
36
37 @each $theme in $themes {
38 @include iro.bem-modifier($theme) {
39 border-color: fn.color(--#{$theme} --border);
40 }
41 }
42 }
43}
diff --git a/src_old/objects/_avatar.scss b/src_old/objects/_avatar.scss
new file mode 100644
index 0000000..19bff10
--- /dev/null
+++ b/src_old/objects/_avatar.scss
@@ -0,0 +1,167 @@
1@use 'sass:list';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
6
7@mixin status($size: ()) {
8 @include iro.bem-elem('status') {
9 inline-size: fn.dim(list.join($size, --indicator-size));
10 block-size: fn.dim(list.join($size, --indicator-size));
11
12 @include iro.bem-next-elem('content') {
13 mask-image: radial-gradient(
14 circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at
15 calc(100% - .5 * fn.dim(list.join($size, --indicator-size)))
16 calc(100% - .5 * fn.dim(list.join($size, --indicator-size))),
17 transparent 95%,
18 #fff
19 );
20 }
21 }
22}
23
24@include iro.props-namespace('avatar') {
25 @include iro.props-store((
26 --dims: (
27 --size: fn.global-dim(--size --500),
28 --font-size: fn.global-dim(--font-size --100),
29 --indicator-size: fn.global-dim(--size --150),
30 --indicator-spacing: fn.global-dim(--size --40),
31 --rounding: 25%,
32
33 --xxxl: (
34 --size: fn.global-dim(--size --1600),
35 --font-size: fn.global-dim(--font-size --800),
36 --indicator-size: fn.global-dim(--size --400),
37 ),
38 --xxl: (
39 --size: fn.global-dim(--size --1200),
40 --font-size: fn.global-dim(--font-size --600),
41 --indicator-size: fn.global-dim(--size --300),
42 ),
43 --xl: (
44 --size: fn.global-dim(--size --800),
45 --font-size: fn.global-dim(--font-size --300),
46 --indicator-size: fn.global-dim(--size --225),
47 ),
48 --lg: (
49 --size: fn.global-dim(--size --650),
50 --font-size: fn.global-dim(--font-size --200),
51 --indicator-size: fn.global-dim(--size --175),
52 ),
53 --sm: (
54 --size: fn.global-dim(--size --375),
55 --font-size: fn.global-dim(--font-size --75),
56 --indicator-size: fn.global-dim(--size --125),
57 ),
58 --xs: (
59 --size: fn.global-dim(--size --250),
60 --font-size: fn.global-dim(--font-size --50),
61 --indicator-size: fn.global-dim(--size --100),
62 ),
63
64 --key-focus: (
65 --border: fn.global-dim(--key-focus --border),
66 --border-offset: fn.global-dim(--key-focus --border-offset),
67 --outline: fn.global-dim(--key-focus --outline),
68 ),
69 ),
70 --colors: (
71 --h: 354,
72 --s: 44%,
73 --l: 45%,
74
75 --key-focus: (
76 --border: fn.global-color(--focus --border),
77 --outline: fn.global-color(--focus --outline),
78 ),
79 ),
80 ));
81
82 @include iro.bem-object(iro.props-namespace()) {
83 display: inline-block;
84 position: relative;
85 border-radius: fn.dim(--rounding);
86 font-size: fn.dim(--font-size);
87 font-style: normal;
88 vertical-align: .05em;
89
90 &::after {
91 content: '';
92 display: none;
93 position: absolute;
94 z-index: 1;
95 inset: calc(-1 * fn.dim(--key-focus --border-offset));
96 border: fn.dim(--key-focus --border-offset) solid transparent;
97 border-radius: fn.dim(--rounding);
98 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
99 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
100 pointer-events: none;
101 }
102
103 @include iro.bem-elem('status') {
104 position: absolute;
105 inset-inline-end: 0;
106 inset-block-end: 0;
107 }
108
109 @include status;
110
111 @include iro.bem-elem('content') {
112 display: block;
113 inline-size: fn.dim(--size);
114 block-size: fn.dim(--size);
115 border-radius: fn.dim(--rounding);
116 line-height: fn.dim(--size);
117 text-align: center;
118 object-fit: cover;
119 object-position: center center;
120 }
121
122 @include iro.bem-modifier('circle') {
123 border-radius: 100%;
124
125 &::after {
126 border-radius: 100%;
127 }
128
129 @include iro.bem-elem('content') {
130 border-radius: 100%;
131 }
132 }
133
134 @include iro.bem-modifier('placeholder') {
135 @include iro.bem-elem('content') {
136 background-color: hsl(0, 0%, fn.color(--l));
137 }
138 }
139
140 @include iro.bem-modifier('colored') {
141 @include iro.bem-elem('content') {
142 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
143 color: #fff;
144 }
145 }
146
147 @each $size in $sizes {
148 @include iro.bem-modifier($size) {
149 font-size: fn.dim(--#{$size} --font-size);
150
151 @include status(--#{$size});
152
153 @include iro.bem-elem('content') {
154 inline-size: fn.dim(--#{$size} --size);
155 block-size: fn.dim(--#{$size} --size);
156 line-height: fn.dim(--#{$size} --size);
157 }
158 }
159 }
160
161 &:focus-visible {
162 &::after {
163 display: block;
164 }
165 }
166 }
167}
diff --git a/src_old/objects/_backdrop.scss b/src_old/objects/_backdrop.scss
new file mode 100644
index 0000000..d0eaf52
--- /dev/null
+++ b/src_old/objects/_backdrop.scss
@@ -0,0 +1,26 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('backdrop') {
5 @include iro.props-store((
6 --dims: (
7 --z-index: 10000,
8 --blur: 2em,
9 ),
10 --colors: (
11 --bg: rgba(#000, .75),
12 ),
13 ));
14
15 @include iro.bem-object(iro.props-namespace()) {
16 display: flex;
17 position: fixed;
18 z-index: fn.dim(--z-index);
19 inset: 0;
20 box-sizing: border-box;
21 flex-direction: column;
22 overflow: auto;
23 background-color: fn.color(--bg);
24 backdrop-filter: blur(fn.dim(--blur));
25 }
26}
diff --git a/src_old/objects/_badge.scss b/src_old/objects/_badge.scss
new file mode 100644
index 0000000..4e1662f
--- /dev/null
+++ b/src_old/objects/_badge.scss
@@ -0,0 +1,300 @@
1@use 'sass:string';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$sizes: 'sm' 'lg' 'xl' !default;
6$themes: 'accent' 'positive' 'negative' 'warning' !default;
7$static-themes: 'black' 'white' !default;
8
9@mixin theme($theme) {
10 background-color: fn.color(--#{$theme} --bg);
11 color: fn.color(--#{$theme} --label);
12
13 &:link,
14 &:visited,
15 &:enabled {
16 &:hover,
17 &:focus-visible {
18 background-color: fn.color(--#{$theme} --hover --bg);
19 color: fn.color(--#{$theme} --hover --label);
20 }
21
22 &:active {
23 background-color: fn.color(--#{$theme} --active --bg);
24 color: fn.color(--#{$theme} --active --label);
25 }
26 }
27
28 @include iro.bem-modifier('quiet') {
29 background-color: fn.color(--#{$theme}-quiet --bg);
30 color: fn.color(--#{$theme}-quiet --label);
31
32 &:link,
33 &:visited,
34 &:enabled {
35 &:hover,
36 &:focus-visible {
37 background-color: fn.color(--#{$theme}-quiet --hover --bg);
38 color: fn.color(--#{$theme}-quiet --hover --label);
39 }
40
41 &:active {
42 background-color: fn.color(--#{$theme}-quiet --active --bg);
43 color: fn.color(--#{$theme}-quiet --active --label);
44 }
45 }
46 }
47
48 @if string.slice($theme, 1, 7) == 'static-' {
49 &::after {
50 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
51 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
52 }
53 }
54}
55
56@include iro.props-namespace('badge') {
57 @include iro.props-store((
58 --dims: (
59 --pad-b: fn.global-dim(--size --50),
60 --pad-i: fn.global-dim(--size --100),
61 --pad-i-pill: fn.global-dim(--size --150),
62 --pad-i-label: fn.global-dim(--size --50),
63 --rounding: fn.global-dim(--rounding),
64 --font-size: fn.global-dim(--font-size --75),
65
66 --sm: (
67 --pad-b: fn.global-dim(--size --25),
68 --pad-i: fn.global-dim(--size --75),
69 --pad-i-pill: fn.global-dim(--size --125),
70 --pad-i-label: fn.global-dim(--size --25),
71 --font-size: fn.global-dim(--font-size --50),
72 ),
73 --lg: (
74 --pad-b: fn.global-dim(--size --75),
75 --pad-i: fn.global-dim(--size --125),
76 --pad-i-pill: fn.global-dim(--size --175),
77 --pad-i-label: fn.global-dim(--size --50),
78 --font-size: fn.global-dim(--font-size --100),
79 ),
80 --xl: (
81 --pad-b: fn.global-dim(--size --100),
82 --pad-i: fn.global-dim(--size --150),
83 --pad-i-pill: fn.global-dim(--size --225),
84 --pad-i-label: fn.global-dim(--size --75),
85 --font-size: fn.global-dim(--font-size --150),
86 ),
87
88 --key-focus: (
89 --border: fn.global-dim(--key-focus --border),
90 --border-offset: fn.global-dim(--key-focus --border-offset),
91 --outline: fn.global-dim(--key-focus --outline),
92 ),
93 ),
94 --colors: (
95 --bg: fn.global-color(--text-mute),
96 --label: fn.global-color(--bg-l2),
97 --hover: (
98 --bg: fn.global-color(--text),
99 ),
100 --active: (
101 --bg: fn.global-color(--heading),
102 ),
103 --key-focus: (
104 --label: fn.global-color(--focus --text),
105 --border: fn.global-color(--focus --border),
106 --outline: fn.global-color(--focus --outline),
107 ),
108
109 --quiet: (
110 --bg: fn.global-color(--border-mute),
111 --label: fn.global-color(--heading),
112 --hover: (
113 --bg: fn.global-color(--border),
114 ),
115 --active: (
116 --bg: fn.global-color(--border-strong),
117 ),
118 ),
119 ),
120 ));
121
122 @each $theme in $themes {
123 @include iro.props-store((
124 --colors: (
125 --#{$theme}: (
126 --bg: fn.global-color(--#{$theme}-static --900),
127 --label: fn.global-color(--#{$theme}-static --900-text),
128 --hover: (
129 --bg: fn.global-color(--#{$theme}-static --1000),
130 --label: fn.global-color(--#{$theme}-static --1000-text),
131 ),
132 --active: (
133 --bg: fn.global-color(--#{$theme}-static --1100),
134 --label: fn.global-color(--#{$theme}-static --1000-text),
135 ),
136 ),
137
138 --#{$theme}-quiet: (
139 --bg: fn.global-color(--#{$theme} --200),
140 --label: fn.global-color(--#{$theme} --1100),
141 --hover: (
142 --bg: fn.global-color(--#{$theme} --300),
143 --label: fn.global-color(--#{$theme} --1200),
144 ),
145 --active: (
146 --bg: fn.global-color(--#{$theme} --400),
147 --label: fn.global-color(--#{$theme} --1300),
148 ),
149 )
150 ),
151 ));
152 }
153
154 @each $theme in $static-themes {
155 @include iro.props-store((
156 --colors: (
157 --static-#{$theme}: (
158 --bg: fn.global-color(--#{$theme}-transparent --800),
159 --label: fn.global-color(--#{$theme}-transparent --text),
160 --hover: (
161 --bg: fn.global-color(--#{$theme}-transparent --900),
162 --label: fn.global-color(--#{$theme}-transparent --text),
163 ),
164 --active: (
165 --bg: fn.global-color(--#{$theme}-transparent --900),
166 --label: fn.global-color(--#{$theme}-transparent --text),
167 ),
168 --key-focus: (
169 --bg: fn.global-color(--#{$theme}-transparent --100),
170 --label: fn.global-color(--#{$theme}-transparent --900),
171 --border: fn.global-color(--#{$theme}-transparent --900),
172 --outline: fn.global-color(--#{$theme}-transparent --300),
173 ),
174 ),
175
176 --static-#{$theme}-quiet: (
177 --bg: fn.global-color(--#{$theme}-transparent --200),
178 --label: fn.global-color(--#{$theme}-transparent --900),
179 --hover: (
180 --bg: fn.global-color(--#{$theme}-transparent --300),
181 --label: fn.global-color(--#{$theme}-transparent --900),
182 ),
183 --active: (
184 --bg: fn.global-color(--#{$theme}-transparent --400),
185 --label: fn.global-color(--#{$theme}-transparent --900),
186 ),
187 )
188 )
189 ));
190 }
191
192 @include iro.bem-object(iro.props-namespace()) {
193 display: inline-block;
194 position: relative;
195 padding-block: fn.dim(--pad-b);
196 padding-inline: fn.dim(--pad-i);
197 border-radius: fn.dim(--rounding);
198 background-color: fn.color(--bg);
199 background-clip: padding-box;
200 color: fn.color(--label);
201 font-size: fn.dim(--font-size);
202 line-height: fn.global-dim(--font --standard --line-height);
203 text-align: center;
204 text-decoration: none;
205
206 &::after {
207 content: '';
208 display: none;
209 position: absolute;
210 z-index: 1;
211 inset: calc(-1 * fn.dim(--key-focus --border-offset));
212 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
213 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
214 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
215 pointer-events: none;
216 }
217
218 &:link,
219 &:visited,
220 &:enabled {
221 &:hover,
222 &:focus-visible {
223 background-color: fn.color(--hover --bg);
224 }
225
226 &:active {
227 background-color: fn.color(--active --bg);
228 }
229 }
230
231 @include iro.bem-elem('label') {
232 margin-inline: fn.dim(--pad-i-label);
233 }
234
235 @include iro.bem-modifier('quiet') {
236 background-color: fn.color(--quiet --bg);
237 color: fn.color(--quiet --label);
238
239 &:link,
240 &:visited,
241 &:enabled {
242 &:hover,
243 &:focus-visible {
244 background-color: fn.color(--quiet --hover --bg);
245 }
246
247 &:active {
248 background-color: fn.color(--quiet --active --bg);
249 }
250 }
251 }
252
253 @each $theme in $themes {
254 @include iro.bem-modifier($theme) {
255 @include theme($theme);
256 }
257 }
258
259 &:link,
260 &:visited,
261 &:enabled {
262 &:focus-visible {
263 &::after {
264 display: block;
265 }
266 }
267 }
268
269 @each $theme in $static-themes {
270 @include iro.bem-modifier(static-#{$theme}) {
271 @include theme(static-#{$theme});
272 }
273 }
274
275 @include iro.bem-modifier('pill') {
276 padding-inline: fn.dim(--pad-i-pill);
277 border-radius: 10em;
278
279 &::after {
280 border-radius: 10em;
281 }
282 }
283
284 @each $size in $sizes {
285 @include iro.bem-modifier($size) {
286 padding-block: fn.dim(--#{$size} --pad-b);
287 padding-inline: fn.dim(--#{$size} --pad-i);
288 font-size: fn.dim(--#{$size} --font-size);
289
290 @include iro.bem-elem('label') {
291 margin-inline: fn.dim(--#{$size} --pad-i-label);
292 }
293
294 @include iro.bem-modifier('pill') {
295 padding-inline: fn.dim(--#{$size} --pad-i-pill);
296 }
297 }
298 }
299 }
300}
diff --git a/src_old/objects/_button.scss b/src_old/objects/_button.scss
new file mode 100644
index 0000000..3ef4813
--- /dev/null
+++ b/src_old/objects/_button.scss
@@ -0,0 +1,301 @@
1@use 'sass:list';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$sizes: 'sm' 'lg' 'xl' !default;
6$themes: 'accent' 'negative' !default;
7$static-themes: 'black' 'white' !default;
8
9@mixin theme($theme: ()) {
10 &:link,
11 &:visited,
12 &:enabled {
13 border-color: transparent;
14 background-color: fn.color(list.join($theme, --bg));
15 color: fn.color(list.join($theme, --label));
16 }
17
18 @include iro.bem-modifier('outline') {
19 &:link,
20 &:visited,
21 &:enabled {
22 border-color: fn.color(list.join($theme, --outline-border));
23 background-color: transparent;
24 color: fn.color(list.join($theme, --outline-label));
25 }
26 }
27
28 &:link,
29 &:visited,
30 &:enabled {
31 &:hover,
32 &:focus-visible {
33 border-color: transparent;
34 background-color: fn.color(list.join($theme, --hover --bg));
35 color: fn.color(list.join($theme, --hover --label));
36 }
37
38 &:active {
39 border-color: transparent;
40 background-color: fn.color(list.join($theme, --active --bg));
41 color: fn.color(list.join($theme, --active --label));
42 }
43 }
44}
45
46@mixin static-theme($theme: ()) {
47 border-color: transparent;
48 background-color: fn.color(list.join($theme, --disabled --bg));
49 color: fn.color(list.join($theme, --disabled --label));
50
51 &::after {
52 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border);
53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
54 }
55
56 @include iro.bem-modifier('outline') {
57 border-color: fn.color(list.join($theme, --disabled --outline-border));
58 background-color: transparent;
59 }
60
61 @include theme($theme);
62
63 @include iro.bem-modifier('primary') {
64 @include theme(list.join($theme, --primary));
65 }
66}
67
68@include iro.props-namespace('button') {
69 @include iro.props-store((
70 --dims: (
71 --line-height: 1.4,
72 --pad-i: fn.global-dim(--size --200),
73 --pad-i-label: fn.global-dim(--size --75),
74 --pad-b: fn.global-dim(--size --65),
75 --border: fn.global-dim(--border --medium),
76 --rounding: 10em,
77 --font-size: fn.global-dim(--font-size --100),
78
79 --sm: (
80 --pad-i: fn.global-dim(--size --150),
81 --pad-i-label: fn.global-dim(--size --50),
82 --pad-b: fn.global-dim(--size --25),
83 --font-size: fn.global-dim(--font-size --75),
84 ),
85 --lg: (
86 --pad-i: fn.global-dim(--size --250),
87 --pad-i-label: fn.global-dim(--size --100),
88 --pad-b: fn.global-dim(--size --100),
89 --font-size: fn.global-dim(--font-size --150),
90 ),
91 --xl: (
92 --pad-i: fn.global-dim(--size --300),
93 --pad-i-label: fn.global-dim(--size --150),
94 --pad-b: fn.global-dim(--size --150),
95 --font-size: fn.global-dim(--font-size --200),
96 ),
97
98 --key-focus: (
99 --border: fn.global-dim(--key-focus --border),
100 --border-offset: fn.global-dim(--key-focus --border-offset),
101 --outline: fn.global-dim(--key-focus --outline),
102 ),
103 ),
104 --colors: (
105 --bg: fn.global-color(--border-mute),
106 --label: fn.global-color(--text),
107 --outline-border: fn.global-color(--border),
108 --outline-label: fn.global-color(--text),
109
110 --hover: (
111 --bg: fn.global-color(--border),
112 --label: fn.global-color(--heading),
113 ),
114 --active: (
115 --bg: fn.global-color(--border-strong),
116 --label: fn.global-color(--heading),
117 ),
118 --disabled: (
119 --bg: fn.global-color(--border-mute),
120 --outline-border: fn.global-color(--border),
121 --label: fn.global-color(--text-disabled),
122 ),
123 --key-focus: (
124 --label: fn.global-color(--focus --text),
125 --border: fn.global-color(--focus --border),
126 --outline: fn.global-color(--focus --outline),
127 ),
128
129 --primary: (
130 --bg: fn.global-color(--base --800),
131 --label: fn.global-color(--base --800-text),
132 --outline-border: fn.global-color(--base --800),
133 --outline-label: fn.global-color(--text),
134
135 --hover: (
136 --bg: fn.global-color(--base --900),
137 --label: fn.global-color(--base --900-text),
138 ),
139 --active: (
140 --bg: fn.global-color(--base --900),
141 --label: fn.global-color(--base --900-text),
142 ),
143 ),
144 ),
145 ));
146
147 @each $theme in $themes {
148 @include iro.props-store((
149 --colors: (
150 --#{$theme}: (
151 --bg: fn.global-color(--#{$theme}-static --900),
152 --label: fn.global-color(--#{$theme}-static --900-text),
153 --outline-border: fn.global-color(--#{$theme} --900),
154 --outline-label: fn.global-color(--#{$theme} --1000),
155
156 --hover: (
157 --bg: fn.global-color(--#{$theme}-static --1000),
158 --label: fn.global-color(--#{$theme}-static --1000-text),
159 ),
160 --active: (
161 --bg: fn.global-color(--#{$theme}-static --1100),
162 --label: fn.global-color(--#{$theme}-static --1100-text),
163 ),
164 ),
165 ),
166 ));
167 }
168
169 @each $theme in $static-themes {
170 @include iro.props-store((
171 --colors: (
172 --static-#{$theme}: (
173 --bg: fn.global-color(--#{$theme}-transparent --200),
174 --label: fn.global-color(--#{$theme}-transparent --900),
175 --outline-border: fn.global-color(--#{$theme}-transparent --300),
176 --outline-label: fn.global-color(--#{$theme}-transparent --900),
177
178 --hover: (
179 --bg: fn.global-color(--#{$theme}-transparent --300),
180 --label: fn.global-color(--#{$theme}-transparent --900),
181 ),
182 --active: (
183 --bg: fn.global-color(--#{$theme}-transparent --400),
184 --label: fn.global-color(--#{$theme}-transparent --900),
185 ),
186 --disabled: (
187 --bg: fn.global-color(--#{$theme}-transparent --200),
188 --outline-border: fn.global-color(--#{$theme}-transparent --300),
189 --label: fn.global-color(--#{$theme}-transparent --500),
190 ),
191 --key-focus: (
192 --bg: fn.global-color(--#{$theme}-transparent --100),
193 --label: fn.global-color(--#{$theme}-transparent --900),
194 --border: fn.global-color(--#{$theme}-transparent --900),
195 --outline: fn.global-color(--#{$theme}-transparent --300),
196 ),
197
198 --primary: (
199 --bg: fn.global-color(--#{$theme}-transparent --800),
200 --label: fn.global-color(--#{$theme}-transparent --text),
201 --outline-border: fn.global-color(--#{$theme}-transparent --800),
202 --outline-label: fn.global-color(--#{$theme}-transparent --900),
203
204 --hover: (
205 --bg: fn.global-color(--#{$theme}-transparent --900),
206 --label: fn.global-color(--#{$theme}-transparent --text),
207 ),
208 --active: (
209 --bg: fn.global-color(--#{$theme}-transparent --900),
210 --label: fn.global-color(--#{$theme}-transparent --text),
211 ),
212 ),
213 ),
214 ),
215 ));
216 }
217
218 @include iro.bem-object(iro.props-namespace()) {
219 display: inline-block;
220 position: relative;
221 padding-block: fn.dim(--pad-b);
222 padding-inline: fn.dim(--pad-i);
223 border: fn.dim(--border) solid transparent;
224 border-radius: fn.dim(--rounding);
225 border-color: fn.color(--disabled --bg);
226 background-color: fn.color(--disabled --bg);
227 color: fn.color(--disabled --label);
228 font-size: fn.dim(--font-size);
229 font-weight: 500;
230 line-height: fn.dim(--line-height);
231 text-align: center;
232 text-decoration: none;
233
234 &::after {
235 content: '';
236 display: none;
237 position: absolute;
238 z-index: 1;
239 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
240 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
241 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
242 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
243 pointer-events: none;
244 }
245
246 &:link,
247 &:visited,
248 &:enabled {
249 &:focus-visible {
250 &::after {
251 display: block;
252 }
253 }
254 }
255
256 @include iro.bem-elem('label') {
257 margin-inline: fn.dim(--pad-i-label);
258 }
259
260 @include iro.bem-modifier('block') {
261 display: block;
262 }
263
264 @include iro.bem-modifier('outline') {
265 border-color: fn.color(--disabled --outline-border);
266 background-color: transparent;
267 }
268
269 @each $size in $sizes {
270 @include iro.bem-modifier($size) {
271 padding-block: fn.dim(--#{$size} --pad-b);
272 padding-inline: fn.dim(--#{$size} --pad-i);
273 font-size: fn.dim(--#{$size} --font-size);
274
275 @include iro.bem-elem('label') {
276 margin-inline: fn.dim(--#{$size} --pad-i-label);
277 }
278 }
279 }
280
281 @include static-theme;
282
283 @each $theme in $themes {
284 @include iro.bem-modifier($theme) {
285 @include theme(--#{$theme});
286 }
287 }
288
289 @each $theme in $static-themes {
290 @include iro.bem-modifier(static-#{$theme}) {
291 @include static-theme(--static-#{$theme});
292 }
293 }
294
295 @include iro.bem-modifier('round') {
296 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
297 padding-inline: 0;
298 border-radius: 100em;
299 }
300 }
301}
diff --git a/src_old/objects/_card.scss b/src_old/objects/_card.scss
new file mode 100644
index 0000000..650ec3f
--- /dev/null
+++ b/src_old/objects/_card.scss
@@ -0,0 +1,170 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('card') {
5 @include iro.props-store((
6 --dims: (
7 --divider: fn.global-dim(--border --thin),
8 --pad-i: fn.global-dim(--size --300),
9 --pad-b: fn.global-dim(--size --250),
10 --spacing: fn.global-dim(--size --200),
11 --rounding: fn.global-dim(--rounding),
12
13 --hover: (
14 --offset-b: calc(-1 * fn.global-dim(--size --65)),
15 ),
16
17 --key-focus: (
18 --border: fn.global-dim(--key-focus --border),
19 --border-offset: fn.global-dim(--key-focus --border-offset),
20 --outline: fn.global-dim(--key-focus --outline),
21 ),
22 ),
23 --colors: (
24 --bg: fn.global-color(--bg-l2),
25 --divider: fn.global-color(--border-mute),
26
27 --key-focus: (
28 --label: fn.global-color(--focus --text),
29 --border: fn.global-color(--focus --border),
30 --outline: fn.global-color(--focus --outline),
31 ),
32
33 --quiet: (
34 --image: fn.global-color(--bg-base),
35
36 --hover: (
37 --image: fn.global-color(--border),
38 ),
39 )
40 ),
41 ));
42
43 @include iro.bem-object(iro.props-namespace()) {
44 display: block;
45 margin: calc(-1 * fn.dim(--key-focus --border));
46 transition: transform .2s;
47 border: fn.dim(--key-focus --border-offset) solid transparent;
48 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
49 background-color: fn.color(--bg);
50 background-clip: content-box;
51
52 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
53 &:hover,
54 &:active,
55 &:focus-visible {
56 transform: translateY(fn.dim(--hover --offset-b));
57 }
58
59 &:focus-visible {
60 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
61 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
62 }
63 }
64
65 @include iro.bem-elem('avatar') {
66 margin-block-start: fn.dim(--pad-b);
67 margin-inline-start: fn.dim(--pad-i);
68 }
69
70 @include iro.bem-elem('image') {
71 display: block;
72 inline-size: 100%;
73 object-fit: cover;
74 transition: transform .2s, opacity .2s;
75
76 &:first-child {
77 border-start-start-radius: fn.dim(--rounding);
78 border-start-end-radius: fn.dim(--rounding);
79 }
80
81 &:last-child {
82 border-end-start-radius: fn.dim(--rounding);
83 border-end-end-radius: fn.dim(--rounding);
84 }
85
86 @include iro.bem-next-elem('avatar') {
87 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
88 }
89 }
90
91 @include iro.bem-elem('body') {
92 padding-block: fn.dim(--pad-b);
93 padding-inline: fn.dim(--pad-i);
94
95 &::before {
96 content: '';
97 display: block;
98 margin-block: -100em 100em;
99 }
100 }
101
102 @include iro.bem-elem('content') {
103 margin-block-start: fn.dim(--spacing);
104 }
105
106 @include iro.bem-elem('footer') {
107 padding-block: 0 fn.dim(--pad-b);
108 padding-inline: fn.dim(--pad-i);
109 margin-block-start: calc(-1 * fn.dim(--pad-b));
110
111 &::before {
112 content: '';
113 display: block;
114 block-size: fn.dim(--divider);
115 margin-block: fn.dim(--spacing);
116 background-color: fn.color(--divider);
117 }
118 }
119
120 @include iro.bem-modifier('quiet') {
121 position: relative;
122 border: 0;
123 background-color: transparent;
124
125 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
126 &:hover,
127 &:active,
128 &:focus-visible {
129 transform: none;
130
131 @include iro.bem-elem('image') {
132 transform: translateY(fn.dim(--hover --offset-b));
133 opacity: .75;
134 background-color: fn.color(--quiet --hover --image);
135 }
136 }
137
138 &:focus-visible {
139 outline: none;
140 box-shadow: none;
141
142 @include iro.bem-elem('image') {
143 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
144 opacity: 1;
145 background-color: fn.color(--quiet --hover --image);
146 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
147 }
148 }
149 }
150
151 @include iro.bem-elem('image') {
152 position: relative;
153 margin: calc(-1 * fn.dim(--key-focus --border));
154 border: fn.dim(--key-focus --border-offset) solid transparent;
155 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
156 background-color: fn.color(--quiet --image);
157 background-clip: padding-box;
158 }
159
160 @include iro.bem-elem('body') {
161 padding: 0;
162 padding-block-start: fn.dim(--spacing);
163 }
164
165 @include iro.bem-elem('footer') {
166 padding-inline: 0;
167 }
168 }
169 }
170}
diff --git a/src_old/objects/_checkbox.scss b/src_old/objects/_checkbox.scss
new file mode 100644
index 0000000..8527948
--- /dev/null
+++ b/src_old/objects/_checkbox.scss
@@ -0,0 +1,261 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('checkbox') {
5 @include iro.props-store((
6 --dims: (
7 --size: fn.global-dim(--size --175),
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
15 --key-focus: (
16 --border: fn.global-dim(--key-focus --border),
17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --outline),
19 ),
20 ),
21 --colors: (
22 --box-border: fn.global-color(--text-mute-more),
23 --box-bg: fn.global-color(--base --75),
24
25 --hover: (
26 --label: fn.global-color(--heading),
27 --box-border: fn.global-color(--text-mute),
28 ),
29 --accent: (
30 --box-border: fn.global-color(--accent --900),
31
32 --hover: (
33 --box-border: fn.global-color(--accent --1000),
34 ),
35 ),
36 --disabled: (
37 --label: fn.global-color(--text-disabled),
38 --box-border: fn.global-color(--border-strong),
39 --box-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
49 @include iro.bem-object(iro.props-namespace()) {
50 display: inline-block;
51 position: relative;
52 margin-inline:
53 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
54 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset));
55 padding-block: fn.dim(--pad-b);
56 padding-inline: fn.dim(--pad-i);
57
58 @include iro.bem-elem('box') {
59 display: inline-block;
60 position: relative;
61 flex: 0 0 auto;
62 inline-size: fn.dim(--size);
63 block-size: fn.dim(--size);
64 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset));
65 border: fn.dim(--key-focus --border-offset) solid transparent;
66 border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset));
67 background-color: fn.color(--box-border);
68 background-clip: padding-box;
69 vertical-align: top;
70
71 &::before,
72 &::after {
73 content: '';
74 display: block;
75 position: absolute;
76 }
77
78 &::before {
79 z-index: 2;
80 inset-block-start: fn.dim(--border);
81 inset-inline-start: fn.dim(--border);
82 inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border));
83 block-size: calc(fn.dim(--size) - 2 * fn.dim(--border));
84 transition: transform .2s ease;
85 background-color: fn.color(--box-bg);
86 }
87
88 &::after {
89 z-index: 3;
90 inset-block-start: calc(.5 * fn.dim(--size) - 1px);
91 inset-inline-start: calc(1.5 * fn.dim(--border));
92 box-sizing: border-box;
93 inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border));
94 block-size: 0;
95 transform: scale(0);
96 transition: transform .2s ease;
97 border-block-width: 0 2px;
98 border-inline-width: 0 2px;
99 border-style: solid;
100 border-radius: 2px;
101 border-color: fn.color(--box-bg);
102 }
103 }
104
105 @include iro.bem-elem('check-icon') {
106 display: block;
107 position: absolute;
108 z-index: 2;
109 inset-block-start: calc(1 * fn.dim(--border));
110 inset-inline-start: calc(1 * fn.dim(--border));
111 inline-size: calc(100% - 2 * fn.dim(--border));
112 block-size: calc(100% - 2 * fn.dim(--border));
113 margin: 0;
114 transform: scale(0);
115 transform-origin: 40% 90%;
116 transition: transform .2s ease;
117 stroke-width: iro.fn-px-to-rem(3px);
118 color: fn.color(--box-bg);
119 }
120
121 @include iro.bem-elem('label') {
122 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
123 }
124
125 @include iro.bem-elem('native') {
126 appearance: none;
127 position: absolute;
128 z-index: -1;
129 inset-block-start: 0;
130 inset-inline-start: 0;
131 inline-size: 100%;
132 block-size: 100%;
133 margin: 0;
134 padding: 0;
135 overflow: hidden;
136 border-radius: fn.dim(--rounding);
137
138 &:hover,
139 &:focus-visible {
140 @include iro.bem-sibling-elem('label') {
141 color: fn.color(--hover --label);
142 }
143
144 @include iro.bem-sibling-elem('box') {
145 background-color: fn.color(--hover --box-border);
146 }
147 }
148
149 &:checked {
150 @include iro.bem-sibling-elem('box') {
151 &::before {
152 transform: scale(0);
153 }
154
155 @include iro.bem-elem('check-icon') {
156 transform: scale(1);
157 }
158 }
159 }
160
161 &:indeterminate {
162 @include iro.bem-sibling-elem('box') {
163 &::before {
164 transform: scale(0);
165 }
166
167 &::after {
168 transform: scale(1);
169 }
170
171 @include iro.bem-elem('check-icon') {
172 transform: scale(0);
173 }
174 }
175 }
176
177 &:disabled {
178 @include iro.bem-sibling-elem('label') {
179 color: fn.color(--disabled --label);
180 }
181
182 @include iro.bem-sibling-elem('box') {
183 background-color: fn.color(--disabled --box-border);
184
185 &::before {
186 background-color: fn.color(--disabled --box-bg);
187 }
188 }
189 }
190
191 &:focus-visible {
192 @include iro.bem-sibling-elem('label') {
193 color: fn.color(--key-focus --label);
194 }
195
196 @include iro.bem-sibling-elem('box') {
197 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
198 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
199 }
200 }
201 }
202
203 @include iro.bem-modifier('standalone') {
204 @include iro.bem-elem('box') {
205 margin-block-start: 0;
206 }
207 }
208
209 @include iro.bem-modifier('accent') {
210 @include iro.bem-elem('native') {
211 &:checked {
212 @include iro.bem-sibling-elem('box') {
213 background-color: fn.color(--accent --box-border);
214 }
215
216 &:hover,
217 &:focus-visible {
218 @include iro.bem-sibling-elem('box') {
219 background-color: fn.color(--accent --hover --box-border);
220 }
221 }
222 }
223
224 &:indeterminate {
225 @include iro.bem-sibling-elem('box') {
226 background-color: fn.color(--accent --box-border);
227 }
228
229 &:hover,
230 &:focus-visible {
231 @include iro.bem-sibling-elem('box') {
232 background-color: fn.color(--accent --hover --box-border);
233 }
234 }
235 }
236
237 &:disabled {
238 @include iro.bem-sibling-elem('box') {
239 background-color: fn.color(--disabled --box-border);
240
241 &::before {
242 background-color: fn.color(--disabled --box-bg);
243 }
244 }
245
246 &:checked {
247 @include iro.bem-sibling-elem('box') {
248 background-color: fn.color(--disabled --box-border);
249 }
250 }
251
252 &:indeterminate {
253 @include iro.bem-sibling-elem('box') {
254 background-color: fn.color(--disabled --box-border);
255 }
256 }
257 }
258 }
259 }
260 }
261}
diff --git a/src_old/objects/_divider.scss b/src_old/objects/_divider.scss
new file mode 100644
index 0000000..d1e2897
--- /dev/null
+++ b/src_old/objects/_divider.scss
@@ -0,0 +1,203 @@
1@use 'sass:map';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4@use '../config';
5
6$static-themes: 'black' 'white' !default;
7
8@include iro.props-namespace('divider') {
9 @include iro.props-store((
10 --dims: (
11 --margin-b: fn.global-dim(--size --85),
12
13 --strong: (
14 --border: fn.global-dim(--border --thick),
15 --label-font-size: fn.global-dim(--font-size --100),
16 ),
17 --medium: (
18 --border: fn.global-dim(--border --medium),
19 --label-font-size: fn.global-dim(--font-size --75),
20 ),
21 --faint: (
22 --border: fn.global-dim(--border --thin),
23 --label-font-size: fn.global-dim(--font-size --50),
24 ),
25 ),
26 --colors: (
27 --strong: (
28 --bg: fn.global-color(--text),
29 --label: fn.global-color(--text),
30 ),
31 --medium: (
32 --bg: fn.global-color(--border),
33 --label: fn.global-color(--text-mute),
34 ),
35 --faint: (
36 --bg: fn.global-color(--border),
37 --label: fn.global-color(--text-mute-more),
38 ),
39 ),
40 ));
41
42 @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
43 @if $color != '--base' {
44 @include iro.props-store((
45 --colors: (
46 $color: (
47 --bg: fn.global-color($color --800),
48 --label: fn.global-color($color --1000),
49 )
50 ),
51 ));
52 }
53 }
54
55 @each $theme in $static-themes {
56 @include iro.props-store((
57 --colors: (
58 --static-#{$theme}: (
59 --strong: (
60 --bg: fn.global-color(--#{$theme}-transparent --800),
61 --label: fn.global-color(--#{$theme}-transparent --900),
62 ),
63 --medium: (
64 --bg: fn.global-color(--#{$theme}-transparent --300),
65 --label: fn.global-color(--#{$theme}-transparent --500),
66 ),
67 --faint: (
68 --bg: fn.global-color(--#{$theme}-transparent --300),
69 --label: fn.global-color(--#{$theme}-transparent --500),
70 ),
71 )
72 ),
73 ));
74 }
75
76 @include iro.bem-object(iro.props-namespace()) {
77 display: flex;
78 flex: 0 0 auto;
79 flex-direction: row;
80 align-items: center;
81 block-size: 1em;
82 margin-block: fn.dim(--margin-b);
83 color: fn.color(--strong --label);
84 font-size: fn.dim(--strong --label-font-size);
85 font-weight: 700;
86 letter-spacing: .5px;
87 line-height: 1;
88 text-transform: uppercase;
89
90 &::before,
91 &::after {
92 content: '';
93 flex: 1 1 auto;
94 inline-size: 100%;
95 block-size: fn.dim(--strong --border);
96 background-color: fn.color(--strong --bg);
97 }
98
99 &::before {
100 display: block;
101 }
102
103 @include iro.bem-elem('label') {
104 flex: 0 0 auto;
105 }
106
107 @include iro.bem-modifier('vertical') {
108 align-self: stretch;
109 inline-size: 1px;
110 block-size: auto;
111 margin-block: 0;
112 background-color: fn.color(--faint --bg);
113
114 &::before,
115 &::after {
116 display: none;
117 }
118 }
119
120 @include iro.bem-modifier('medium') {
121 color: fn.color(--medium --label);
122 font-size: fn.dim(--medium --label-font-size);
123 font-weight: 500;
124
125 &::before,
126 &::after {
127 block-size: fn.dim(--medium --border);
128 background-color: fn.color(--medium --bg);
129 }
130 }
131
132 @include iro.bem-modifier('faint') {
133 color: fn.color(--faint --label);
134 font-size: fn.dim(--faint --label-font-size);
135 font-weight: 500;
136
137 &::before,
138 &::after {
139 block-size: fn.dim(--faint --border);
140 background-color: fn.color(--faint --bg);
141 }
142 }
143
144 @include iro.bem-modifier('labelled') {
145 &::before {
146 margin-inline-end: 1em;
147 }
148
149 &::after {
150 display: block;
151 margin-inline-start: 1em;
152 }
153 }
154
155 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
156 @include iro.bem-modifier($color) {
157 &::before,
158 &::after {
159 background-color: fn.color(--#{$color} --bg);
160 }
161
162 @include iro.bem-elem('label') {
163 color: fn.color(--#{$color} --label);
164 }
165 }
166 }
167
168 @each $theme in $static-themes {
169 @include iro.bem-modifier(static-#{$theme}) {
170 &::before,
171 &::after {
172 background-color: fn.color(--static-#{$theme} --strong --bg);
173 }
174
175 @include iro.bem-elem('label') {
176 color: fn.color(--static-#{$theme} --strong --label);
177 }
178
179 @include iro.bem-modifier('medium') {
180 &::before,
181 &::after {
182 background-color: fn.color(--static-#{$theme} --medium --bg);
183 }
184
185 @include iro.bem-elem('label') {
186 color: fn.color(--static-#{$theme} --medium --label);
187 }
188 }
189
190 @include iro.bem-modifier('faint') {
191 &::before,
192 &::after {
193 background-color: fn.color(--static-#{$theme} --faint --bg);
194 }
195
196 @include iro.bem-elem('label') {
197 color: fn.color(--static-#{$theme} --faint --label);
198 }
199 }
200 }
201 }
202 }
203}
diff --git a/src_old/objects/_emoji.scss b/src_old/objects/_emoji.scss
new file mode 100644
index 0000000..d8d1289
--- /dev/null
+++ b/src_old/objects/_emoji.scss
@@ -0,0 +1,73 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'sass:math';
4
5@use 'icon';
6
7@include iro.props-namespace('emoji') {
8 @include iro.props-store((
9 --dims: (
10 --size: calc(1 / 14 * 18em),
11 --pad: .3em,
12 --rounding: fn.global-dim(--rounding),
13 --zoom: 3,
14 --valign: -.25em,
15
16 --125: (
17 --size: calc(1 / 14 * 23em),
18 --valign: -.45em,
19 ),
20
21 --150: (
22 --size: calc(1 / 14 * 28em),
23 --valign: -.65em,
24 ),
25
26 --200: (
27 --size: calc(1 / 14 * 38em),
28 --valign: -1em,
29 )
30 ),
31 --colors: (
32 --bg: fn.global-color(--border-mute),
33 )
34 ));
35
36 @include iro.bem-object(iro.props-namespace()) {
37 display: inline-block;
38 position: relative;
39 inline-size: calc(fn.dim(--size));
40 block-size: calc(fn.dim(--size));
41 margin: calc(-1 * fn.dim(--pad));
42 padding: calc(fn.dim(--pad));
43 vertical-align: fn.dim(--valign);
44 object-fit: contain;
45
46 @include iro.bem-modifier('icon') {
47 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
48 vertical-align: fn.foreign-dim(--icon, --valign);
49 }
50
51 @each $size in '125' '150' '200' {
52 @include iro.bem-modifier($size) {
53 inline-size: fn.dim(--#{$size} --size);
54 block-size: fn.dim(--#{$size} --size);
55 vertical-align: fn.dim(--#{$size} --valign);
56
57 @include iro.bem-modifier('icon') {
58 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
59 }
60 }
61 }
62
63 @include iro.bem-modifier('zoomable') {
64 transition: transform .2s ease, background-color .2s ease;
65 border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
66
67 &:hover {
68 transform: scale(fn.dim(--zoom));
69 background-color: fn.color(--bg);
70 }
71 }
72 }
73}
diff --git a/src_old/objects/_field-label.scss b/src_old/objects/_field-label.scss
new file mode 100644
index 0000000..1518ea6
--- /dev/null
+++ b/src_old/objects/_field-label.scss
@@ -0,0 +1,86 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('field-label') {
5 @include iro.props-store((
6 --dims: (
7 --spacing-i: fn.global-dim(--size --150),
8 --spacing-b: fn.global-dim(--size --85),
9 --label-font-size: fn.global-dim(--font-size --75),
10 --hint-font-size: fn.global-dim(--font-size --75),
11 ),
12 --colors: (
13 --label: fn.global-color(--text-mute),
14 --hint: fn.global-color(--text-mute),
15 --error-hint: fn.global-color(--negative --900),
16 --disabled: fn.global-color(--text-disabled),
17 ),
18 ));
19
20 @include iro.bem-object(iro.props-namespace()) {
21 display: block;
22
23 @include iro.bem-elem('label') {
24 display: block;
25 flex: 0 0 auto;
26 padding-inline-end: fn.dim(--spacing-i);
27 color: fn.color(--label);
28 font-size: fn.dim(--label-font-size);
29 font-weight: 400;
30 line-height: 1.3;
31
32 @include iro.bem-next-elem('content') {
33 margin-block-start: fn.dim(--spacing-b);
34 }
35 }
36
37 @include iro.bem-elem('content') {
38 display: block;
39 flex: 1 1 auto;
40 }
41
42 @include iro.bem-elem('hint') {
43 display: block;
44 margin-block-start: fn.dim(--spacing-b);
45 color: fn.color(--hint);
46 font-size: fn.dim(--hint-font-size);
47 }
48
49 @include iro.bem-is('invalid') {
50 @include iro.bem-elem('hint') {
51 color: fn.color(--error-hint);
52 }
53 }
54
55 @include iro.bem-is('disabled') {
56 @include iro.bem-elem('label', 'hint') {
57 color: fn.color(--disabled);
58 }
59 }
60
61 @include iro.bem-modifier('align-start', 'align-end') {
62 display: flex;
63 align-items: baseline;
64
65 @include iro.bem-elem('label') {
66 display: inline-block;
67
68 @include iro.bem-next-elem('content') {
69 margin-block-start: 0;
70 }
71 }
72 }
73
74 @include iro.bem-modifier('align-start') {
75 @include iro.bem-elem('label') {
76 text-align: start;
77 }
78 }
79
80 @include iro.bem-modifier('align-end') {
81 @include iro.bem-elem('label') {
82 text-align: end;
83 }
84 }
85 }
86}
diff --git a/src_old/objects/_heading.scss b/src_old/objects/_heading.scss
new file mode 100644
index 0000000..7990a6b
--- /dev/null
+++ b/src_old/objects/_heading.scss
@@ -0,0 +1,118 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4@use '../config';
5@use 'include-media/dist/include-media' as media;
6
7$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs';
8
9@include iro.props-namespace('heading') {
10 @include iro.props-store((
11 --dims: (
12 --offset: -.02em,
13 ),
14 --colors: (
15 --bg: fn.global-color(--base --50),
16 ),
17 ));
18
19 @include iro.bem-object(iro.props-namespace()) {
20 @include mx.set-font(--headline);
21
22 display: block;
23 margin-block-start: fn.global-dim(--heading --margin-bs);
24 transform: translateX(fn.dim(--offset));
25 letter-spacing: normal;
26 text-transform: none;
27
28 & + & {
29 margin-block-start: fn.global-dim(--heading --margin-bs-sibling);
30 }
31
32 @include iro.bem-elem('highlight') {
33 background-image: linear-gradient(
34 to top,
35 transparent .05em,
36 fn.color(--bg) .05em,
37 fn.color(--bg) .5em,
38 transparent .5em
39 );
40 }
41
42 @include iro.bem-modifier('xxl') {
43 @include mx.heading-strong(--xxl);
44 }
45
46 @include iro.bem-modifier('xl') {
47 @include mx.heading-strong(--xl);
48 }
49
50 @include iro.bem-modifier('lg') {
51 @include mx.heading-medium(--lg);
52 }
53
54 @include iro.bem-modifier('md') {
55 @include mx.heading-medium(--md);
56 }
57
58 @include iro.bem-modifier('sm') {
59 @include mx.heading-faint(--sm);
60 }
61
62 @include iro.bem-modifier('xs') {
63 @include mx.heading-faint(--xs);
64 }
65
66 @include iro.bem-modifier('display') {
67 @include mx.set-font(--headline);
68
69 @include iro.bem-modifier('xxl') {
70 @include mx.heading-strong(--display --xxl);
71
72 @include media.media('<=md') {
73 @include mx.heading-strong(--display-sm --xxl);
74 }
75 }
76
77 @include iro.bem-modifier('xl') {
78 @include mx.heading-strong(--display --xl);
79
80 @include media.media('<=md') {
81 @include mx.heading-strong(--display-sm --xl);
82 }
83 }
84
85 @include iro.bem-modifier('lg') {
86 @include mx.heading-strong(--display --lg);
87
88 @include media.media('<=md') {
89 @include mx.heading-strong(--display-sm --lg);
90 }
91 }
92
93 @include iro.bem-modifier('md') {
94 @include mx.heading-strong(--display --md);
95
96 @include media.media('<=md') {
97 @include mx.heading-strong(--display-sm --md);
98 }
99 }
100
101 @include iro.bem-modifier('sm') {
102 @include mx.heading-medium(--display --sm);
103
104 @include media.media('<=md') {
105 @include mx.heading-medium(--display-sm --sm);
106 }
107 }
108
109 @include iro.bem-modifier('xs') {
110 @include mx.heading-faint(--display --xs);
111
112 @include media.media('<=md') {
113 @include mx.heading-faint(--display-sm --xs);
114 }
115 }
116 }
117 }
118}
diff --git a/src_old/objects/_icon.scss b/src_old/objects/_icon.scss
new file mode 100644
index 0000000..1491dd9
--- /dev/null
+++ b/src_old/objects/_icon.scss
@@ -0,0 +1,26 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('icon') {
5 @include iro.props-store((
6 --dims: (
7 --stroke: 1.5px,
8 --size: calc(1 / 14 * 16em),
9 --valign: -.2em,
10 )
11 ));
12
13 @include iro.bem-object(iro.props-namespace()) {
14 display: inline;
15 inline-size: fn.dim(--size);
16 block-size: fn.dim(--size);
17 stroke-width: fn.dim(--stroke);
18 stroke-linecap: round;
19 stroke-linejoin: round;
20 vertical-align: fn.dim(--valign);
21
22 @include iro.bem-modifier('block') {
23 display: block;
24 }
25 }
26}
diff --git a/src_old/objects/_lightbox.scss b/src_old/objects/_lightbox.scss
new file mode 100644
index 0000000..8ad8584
--- /dev/null
+++ b/src_old/objects/_lightbox.scss
@@ -0,0 +1,313 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use 'action-button';
5
6$static-themes: 'black' 'white' !default;
7
8@include iro.props-namespace('lightbox') {
9 @include iro.props-store((
10 --dims: (
11 --pad: fn.global-dim(--size --150),
12
13 --thumbnail: (
14 --size: fn.global-dim(--size --700),
15 --rounding: fn.global-dim(--rounding),
16 --spacing: fn.global-dim(--size --100),
17 --border: fn.global-dim(--border --thin),
18
19 --selected: (
20 --border: fn.global-dim(--border --medium),
21 ),
22
23 --key-focus: (
24 --border: fn.global-dim(--key-focus --border),
25 --border-offset: fn.global-dim(--key-focus --border-offset),
26 --outline: fn.global-dim(--key-focus --outline),
27 ),
28 ),
29
30 --close-button: (
31 --font-size: fn.global-dim(--font-size --200),
32 ),
33
34 --nav-button: (
35 --width: fn.global-dim(--size --2000),
36 --height: fn.global-dim(--size --3800),
37 --font-size: fn.global-dim(--font-size --200),
38 ),
39 ),
40 --colors: (
41 --thumbnail: (
42 --border: fn.global-color(--border-strong),
43
44 --hover: (
45 --border: fn.global-color(--text-mute-more),
46 ),
47
48 --selected: (
49 --border: fn.global-color(--heading),
50 ),
51
52 --key-focus: (
53 --border: fn.global-color(--focus --border),
54 --outline: fn.global-color(--focus --outline),
55 ),
56 ),
57 ),
58 ));
59
60 @each $theme in $static-themes {
61 @include iro.props-store((
62 --colors: (
63 --static-#{$theme}: (
64 --text: fn.global-color(--white-transparent --800),
65 --thumbnail: (
66 --border: fn.global-color(--white-transparent --400),
67
68 --hover: (
69 --border: fn.global-color(--white-transparent --500),
70 ),
71
72 --selected: (
73 --border: fn.global-color(--white-transparent --900),
74 ),
75
76 --key-focus: (
77 --border: fn.global-color(--#{$theme}-transparent --900),
78 --outline: fn.global-color(--#{$theme}-transparent --300),
79 ),
80 ),
81 )
82 )
83 ));
84 }
85
86 @include iro.props-store((
87 --dims: (
88 --thumbnail: (
89 --size: fn.global-dim(--size --600),
90 ),
91 --nav-button: (
92 --width: fn.global-dim(--size --2500),
93 --height: fn.global-dim(--size --2500),
94 ),
95 ),
96 ), 'md');
97
98 @include iro.bem-object(iro.props-namespace()) {
99 display: grid;
100 grid-template-rows: auto minmax(0, 1fr) auto auto;
101 grid-template-columns: auto minmax(0, 1fr) auto;
102 grid-template-areas:
103 'header header header'
104 'prev content next'
105 'thumbnails thumbnails thumbnails'
106 'footer footer footer';
107 box-sizing: border-box;
108 min-block-size: 0;
109 flex: 1 1 auto;
110
111 @include iro.bem-elem('header') {
112 grid-area: header;
113 display: flex;
114 align-items: flex-start;
115 padding-block-start: fn.dim(--pad);
116 padding-inline: fn.dim(--pad);
117 }
118
119 @include iro.bem-elem('img') {
120 display: none;
121 box-sizing: border-box;
122 grid-area: content;
123 max-inline-size: 100%;
124 max-block-size: 100%;
125 place-self: center;
126 padding: fn.dim(--pad);
127
128 @include iro.bem-sibling-elem('img') {
129 @include iro.bem-modifier('default') {
130 display: block;
131
132 @include iro.bem-next-elem('nav-btn') {
133 display: block;
134
135 @include iro.bem-next-elem('nav-btn') {
136 display: block;
137 }
138 }
139 }
140 }
141
142 @include iro.bem-multi('&:target', 'is' 'visible') {
143 display: block;
144
145 @include iro.bem-next-elem('nav-btn') {
146 display: block;
147
148 @include iro.bem-next-elem('nav-btn') {
149 display: block;
150 }
151 }
152
153 @include iro.bem-sibling-elem('img') {
154 @include iro.bem-modifier('default') {
155 display: none;
156
157 @include iro.bem-next-elem('nav-btn') {
158 display: none;
159
160 @include iro.bem-next-elem('nav-btn') {
161 display: none;
162 }
163 }
164 }
165 }
166 }
167 }
168
169 @include iro.bem-elem('thumbnails') {
170 grid-area: thumbnails;
171 display: flex;
172 gap: fn.dim(--thumbnail --spacing);
173 padding: fn.dim(--pad);
174 margin-block-start: calc(-1 * fn.dim(--pad));
175 overflow: auto;
176 }
177
178 @include iro.bem-elem('footer') {
179 grid-area: footer;
180 display: flex;
181 align-items: flex-start;
182 padding-block: 0 fn.dim(--pad);
183 padding-inline: fn.dim(--pad);
184 }
185
186 @include iro.bem-elem('thumbnail') {
187 position: relative;
188 flex: 0 0 auto;
189 inline-size: fn.dim(--thumbnail --size);
190 block-size: fn.dim(--thumbnail --size);
191 overflow: hidden;
192 border-radius: fn.dim(--thumbnail --rounding);
193 outline: fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border);
194 outline-offset: calc(-1 * fn.dim(--thumbnail --border));
195 opacity: .75;
196
197 &:hover,
198 &:active,
199 &:focus-visible {
200 outline-color: fn.color(--thumbnail --hover --border);
201 opacity: 1;
202 }
203
204 @include iro.bem-is('selected') {
205 $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
206
207 margin: $focus-border-offset;
208 border: fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border);
209 border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
210 outline: none;
211 opacity: 1;
212 }
213
214 &:focus-visible {
215 $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset));
216
217 margin: $focus-border-offset;
218 border: fn.dim(--thumbnail --key-focus --border-offset) solid transparent;
219 border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
220 outline: fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border);
221 outline-offset: 0;
222 box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline);
223 }
224 }
225
226 @include iro.bem-elem('thumbnail-img') {
227 display: block;
228 position: absolute;
229 inset-block-start: 0;
230 inset-inline-start: 0;
231 inline-size: 100%;
232 block-size: 100%;
233 object-fit: cover;
234 object-position: center center;
235 }
236
237 @include iro.bem-elem('thumbnail-icon') {
238 position: absolute;
239 inset-block-start: 50%;
240 inset-inline-start: 50%;
241 transform: translate(-50%, -50%);
242 }
243
244 @include iro.bem-elem('close-btn') {
245 flex: 0 0 auto;
246 margin-block-start: calc(-.5 * fn.dim(--pad));
247 margin-inline: auto calc(-.5 * fn.dim(--pad));
248 font-size: fn.dim(--close-button --font-size);
249 }
250
251 @include iro.bem-elem('nav-btn') {
252 display: none;
253 position: relative;
254 align-self: center;
255 overflow: visible;
256 font-size: fn.dim(--nav-button --font-size);
257
258 &::before {
259 content: '';
260 display: block;
261 position: absolute;
262 inset-block-start: 50%;
263 inline-size: fn.dim(--nav-button --width);
264 block-size: fn.dim(--nav-button --height);
265 transform: translateY(-50%);
266 }
267
268 @include iro.bem-modifier('prev') {
269 grid-area: prev;
270 margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
271
272 &::before {
273 inset-inline-start: 0;
274 }
275 }
276
277 @include iro.bem-modifier('next') {
278 grid-area: next;
279 margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
280
281 &::before {
282 inset-inline-end: 0;
283 }
284 }
285 }
286
287 @each $theme in $static-themes {
288 @include iro.bem-modifier(static-#{$theme}) {
289 color: fn.color(--static-#{$theme} --text);
290
291 @include iro.bem-elem('thumbnail') {
292 outline-color: fn.color(--static-#{$theme} --thumbnail --border);
293
294 &:hover,
295 &:active,
296 &:focus-visible {
297 outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border);
298 }
299
300 @include iro.bem-is('selected') {
301 border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
302 }
303
304 &:focus-visible {
305 border-color: transparent;
306 outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border);
307 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);
308 }
309 }
310 }
311 }
312 }
313}
diff --git a/src_old/objects/_menu.scss b/src_old/objects/_menu.scss
new file mode 100644
index 0000000..0f691a2
--- /dev/null
+++ b/src_old/objects/_menu.scss
@@ -0,0 +1,137 @@
1/* stylelint-disable length-zero-no-unit */
2
3@use 'iro-sass/src/index' as iro;
4@use '../functions' as fn;
5
6@use './icon';
7
8@include iro.props-namespace('menu') {
9 @include iro.props-store((
10 --dims: (
11 --spacing: 0em,
12 --header: (
13 --font-size: fn.global-dim(--font-size --50),
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;
55 flex-direction: column;
56 gap: fn.dim(--spacing);
57
58 @include iro.bem-elem('header') {
59 padding-block: fn.dim(--item --pad-b);
60 padding-inline: fn.dim(--item --pad-i);
61 color: fn.color(--header --label);
62 font-size: fn.dim(--header --font-size);
63 font-weight: 500;
64 letter-spacing: .5px;
65 text-transform: uppercase;
66
67 @include iro.bem-next-twin-elem {
68 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
69 }
70 }
71
72 @include iro.bem-elem('item') {
73 padding-block: fn.dim(--item --pad-b);
74 padding-inline: fn.dim(--item --pad-i);
75 margin: calc(-1 * fn.dim(--item --key-focus --outline));
76 border: fn.dim(--item --key-focus --outline) solid transparent;
77 border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline));
78 color: fn.color(--item --disabled --label);
79 background-clip: padding-box;
80
81 &:link,
82 &:visited,
83 &:enabled {
84 color: currentColor;
85
86 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
87 background-color: fn.color(--item --hover --bg);
88 color: fn.color(--item --hover --label);
89 }
90
91 &:active {
92 background-color: fn.color(--item --active --bg);
93 color: fn.color(--item --active --label);
94 }
95
96 &:focus-visible {
97 outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
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);
99 }
100 }
101
102 @include iro.bem-next-elem('header') {
103 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
104 }
105 }
106
107 @include iro.bem-elem('header') {
108 &:link,
109 &:visited,
110 &:enabled {
111 color: fn.color(--header --label);
112 }
113 }
114
115 @include iro.bem-elem('separator') {
116 block-size: 1px;
117 margin-block: fn.dim(--separator);
118 margin-inline: fn.dim(--item --pad-i);
119 background-color: fn.color(--separator);
120 }
121
122 @include iro.bem-elem('slot') {
123 padding-block: fn.dim(--item --pad-b);
124 padding-inline: fn.dim(--item --pad-i);
125 }
126
127 @include iro.bem-elem('icon-slot') {
128 display: flex;
129 justify-content: center;
130 inline-size: fn.foreign-dim(--icon, --size);
131 }
132
133 @include iro.bem-modifier('pull') {
134 margin: calc(-1 * fn.dim(--item --pad-i));
135 }
136 }
137}
diff --git a/src_old/objects/_palette.scss b/src_old/objects/_palette.scss
new file mode 100644
index 0000000..19f282f
--- /dev/null
+++ b/src_old/objects/_palette.scss
@@ -0,0 +1,62 @@
1@use 'sass:map';
2@use 'sass:list';
3@use 'sass:string';
4@use 'iro-sass/src/index' as iro;
5@use '../functions' as fn;
6@use '../config';
7
8@include iro.props-namespace('palette') {
9 @include iro.bem-object(iro.props-namespace()) {
10 display: flex;
11 block-size: 3em;
12
13 @include iro.bem-elem('item') {
14 flex: 1 1 auto;
15
16 $palette: map.get(config.$themes, config.$theme-default, --palettes, --base);
17 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
18
19 @for $i from 1 through list.length($contrasts) {
20 $key: list.nth(map.keys($contrasts), $i);
21
22 &:nth-child(#{$i}) {
23 background-color: fn.global-color(--base $key);
24 }
25 }
26 }
27
28 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) {
29 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
30
31 @include iro.bem-modifier(string.slice($palette-name, 3)) {
32 @include iro.bem-elem('item') {
33 @for $i from 1 through list.length($contrasts) {
34 $key: list.nth(map.keys($contrasts), $i);
35
36 &:nth-child(#{$i}) {
37 background-color: fn.global-color($palette-name $key);
38 }
39 }
40 }
41 }
42 }
43
44 @include iro.bem-modifier('static') {
45 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
46 $contrasts: map.get(config.$static-colors, --contrasts);
47
48 @include iro.bem-modifier(string.slice($palette-name, 3)) {
49 @include iro.bem-elem('item') {
50 @for $i from 1 through list.length($contrasts) {
51 $key: list.nth(map.keys($contrasts), $i);
52
53 &:nth-child(#{$i}) {
54 background-color: fn.global-color(#{$palette-name}-static $key);
55 }
56 }
57 }
58 }
59 }
60 }
61 }
62}
diff --git a/src_old/objects/_popover.scss b/src_old/objects/_popover.scss
new file mode 100644
index 0000000..5ad58ec
--- /dev/null
+++ b/src_old/objects/_popover.scss
@@ -0,0 +1,51 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('popover') {
5 @include iro.props-store((
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
26 @include iro.bem-object(iro.props-namespace()) {
27 position: absolute;
28 z-index: fn.dim(--z-index);
29 inset-block-start: 0;
30 inset-inline-start: 0;
31 padding-block: fn.dim(--pad-b);
32 padding-inline: fn.dim(--pad-i);
33 transform: translate(var(--x), var(--y));
34 border: fn.dim(--border) solid fn.color(--border);
35 border-radius: fn.dim(--rounding);
36 background-color: fn.color(--bg);
37 filter: fn.color(--filter);
38
39 @include iro.bem-modifier('up-left') {
40 transform: translate(var(--x), calc(var(--y) - 100%));
41 }
42
43 @include iro.bem-modifier('up-right') {
44 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
45 }
46
47 @include iro.bem-modifier('down-right') {
48 transform: translate(calc(var(--x) - 100%), var(--y));
49 }
50 }
51}
diff --git a/src_old/objects/_radio.scss b/src_old/objects/_radio.scss
new file mode 100644
index 0000000..9fa937d
--- /dev/null
+++ b/src_old/objects/_radio.scss
@@ -0,0 +1,185 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('radio') {
5 @include iro.props-store((
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
15 --key-focus: (
16 --border: fn.global-dim(--key-focus --border),
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
49 @include iro.bem-object(iro.props-namespace()) {
50 display: inline-block;
51 position: relative;
52 margin-inline:
53 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
54 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
55 padding-block: fn.dim(--pad-b);
56 padding-inline: fn.dim(--pad-i);
57
58 @include iro.bem-elem('circle') {
59 display: inline-block;
60 flex: 0 0 auto;
61 inline-size: fn.dim(--diameter);
62 block-size: fn.dim(--diameter);
63 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset));
64 border: fn.dim(--key-focus --border-offset) solid transparent;
65 border-radius: 2em;
66 background-color: fn.color(--circle-border);
67 background-clip: padding-box;
68 vertical-align: top;
69
70 &::after {
71 content: '';
72 display: block;
73 position: relative;
74 inset-block-start: fn.dim(--border);
75 inset-inline-start: fn.dim(--border);
76 inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
77 block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
78 transition: transform .2s ease;
79 border-radius: fn.dim(--diameter);
80 background-color: fn.color(--circle-bg);
81 }
82 }
83
84 @include iro.bem-elem('label') {
85 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
86 }
87
88 @include iro.bem-elem('native') {
89 appearance: none;
90 position: absolute;
91 z-index: -1;
92 inset-block-start: 0;
93 inset-inline-start: 0;
94 inline-size: 100%;
95 block-size: 100%;
96 margin: 0;
97 padding: 0;
98 overflow: hidden;
99 border-radius: fn.dim(--rounding);
100
101 &:hover,
102 &:focus-visible {
103 @include iro.bem-sibling-elem('label') {
104 color: fn.color(--hover --label);
105 }
106
107 @include iro.bem-sibling-elem('circle') {
108 background-color: fn.color(--hover --circle-border);
109 }
110 }
111
112 &:checked {
113 @include iro.bem-sibling-elem('circle') {
114 &::after {
115 transform: scale(.44);
116 }
117 }
118 }
119
120 &:disabled {
121 @include iro.bem-sibling-elem('label') {
122 color: fn.color(--disabled --label);
123 }
124
125 @include iro.bem-sibling-elem('circle') {
126 background-color: fn.color(--disabled --circle-border);
127
128 &::after {
129 background-color: fn.color(--disabled --circle-bg);
130 }
131 }
132 }
133
134 &:focus-visible {
135 @include iro.bem-sibling-elem('label') {
136 color: fn.color(--key-focus --label);
137 }
138
139 @include iro.bem-sibling-elem('circle') {
140 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
141 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
142 }
143 }
144 }
145
146 @include iro.bem-modifier('standalone') {
147 @include iro.bem-elem('circle') {
148 margin-block-start: 0;
149 }
150 }
151
152 @include iro.bem-modifier('accent') {
153 @include iro.bem-elem('native') {
154 &:checked {
155 @include iro.bem-sibling-elem('circle') {
156 background-color: fn.color(--accent --circle-border);
157 }
158
159 &:hover,
160 &:focus-visible {
161 @include iro.bem-sibling-elem('circle') {
162 background-color: fn.color(--accent --hover --circle-border);
163 }
164 }
165 }
166
167 &:disabled {
168 @include iro.bem-sibling-elem('circle') {
169 background-color: fn.color(--disabled --circle-border);
170
171 &::after {
172 background-color: fn.color(--disabled --circle-bg);
173 }
174 }
175
176 &:checked {
177 @include iro.bem-sibling-elem('circle') {
178 background-color: fn.color(--disabled --circle-border);
179 }
180 }
181 }
182 }
183 }
184 }
185}
diff --git a/src_old/objects/_side-nav.scss b/src_old/objects/_side-nav.scss
new file mode 100644
index 0000000..8e4e131
--- /dev/null
+++ b/src_old/objects/_side-nav.scss
@@ -0,0 +1,122 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@use './icon';
5
6@include iro.props-namespace('side-nav') {
7 @include iro.props-store((
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
50 @include iro.bem-object(iro.props-namespace()) {
51 display: flex;
52 flex-direction: column;
53 gap: fn.dim(--spacing);
54
55 @include iro.bem-elem('header') {
56 padding-block: fn.dim(--item --pad-b);
57 padding-inline: fn.dim(--item --pad-i);
58 color: fn.color(--header --label);
59 font-size: fn.dim(--header --font-size);
60 font-weight: 500;
61 letter-spacing: .5px;
62 text-transform: uppercase;
63
64 @include iro.bem-next-twin-elem {
65 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
66 }
67 }
68
69 @include iro.bem-elem('item') {
70 padding-block: fn.dim(--item --pad-b);
71 padding-inline: fn.dim(--item --pad-i);
72 margin: calc(-1 * fn.dim(--item --key-focus --border-offset));
73 border: fn.dim(--item --key-focus --border-offset) solid transparent;
74 border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset));
75 color: fn.color(--item --disabled --label);
76 background-clip: padding-box;
77
78 &:link,
79 &:visited,
80 &:enabled {
81 color: currentColor;
82
83 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
84 background-color: fn.color(--item --hover --bg);
85 color: fn.color(--item --hover --label);
86 }
87
88 &:active {
89 background-color: fn.color(--item --active --bg);
90 color: fn.color(--item --active --label);
91 }
92
93 &:focus-visible {
94 outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
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);
96 }
97 }
98
99 @include iro.bem-next-elem('header') {
100 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
101 }
102 }
103
104 @include iro.bem-elem('header') {
105 &:link,
106 &:visited,
107 &:enabled {
108 color: fn.color(--header --label);
109 }
110 }
111
112 @include iro.bem-elem('separator') {
113 block-size: fn.dim(--separator);
114 }
115
116 @include iro.bem-elem('icon-slot') {
117 display: flex;
118 justify-content: center;
119 inline-size: fn.foreign-dim(--icon, --size);
120 }
121 }
122}
diff --git a/src_old/objects/_status-indicator.scss b/src_old/objects/_status-indicator.scss
new file mode 100644
index 0000000..416e65e
--- /dev/null
+++ b/src_old/objects/_status-indicator.scss
@@ -0,0 +1,39 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$themes: 'accent' 'positive' 'negative' 'warning' !default;
5
6@include iro.props-namespace('status-indicator') {
7 @include iro.props-store((
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
17 @each $theme in $themes {
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;
27 inline-size: fn.dim(--size);
28 block-size: fn.dim(--size);
29 border-radius: 10em;
30 background-color: fn.color(--default);
31 vertical-align: middle;
32
33 @each $theme in $themes {
34 @include iro.bem-is($theme) {
35 background-color: fn.color(--#{$theme});
36 }
37 }
38 }
39}
diff --git a/src_old/objects/_switch.scss b/src_old/objects/_switch.scss
new file mode 100644
index 0000000..e1f1132
--- /dev/null
+++ b/src_old/objects/_switch.scss
@@ -0,0 +1,222 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('switch') {
5 @include iro.props-store((
6 --dims: (
7 --width: fn.global-dim(--size --350),
8 --height: fn.global-dim(--size --200),
9 --label-gap: fn.global-dim(--size --125),
10 --border: fn.global-dim(--border --medium),
11 --pad-i: fn.global-dim(--size --65),
12 --pad-b: fn.global-dim(--size --65),
13 --rounding: fn.global-dim(--rounding),
14 --spacing-sibling: fn.global-dim(--size --300),
15
16 --key-focus: (
17 --border: fn.global-dim(--key-focus --border),
18 --border-offset: fn.global-dim(--key-focus --border-offset),
19 --outline: fn.global-dim(--key-focus --outline),
20 ),
21 ),
22 --colors: (
23 --track-bg: fn.global-color(--border),
24 --handle-border: fn.global-color(--text-mute-more),
25 --handle-bg: fn.global-color(--base --50),
26
27 --hover: (
28 --label: fn.global-color(--heading),
29 --handle-border: fn.global-color(--text-mute),
30 ),
31 --accent: (
32 --handle-border: fn.global-color(--accent --900),
33
34 --hover: (
35 --handle-border: fn.global-color(--accent --1000),
36 ),
37 ),
38 --disabled: (
39 --label: fn.global-color(--text-disabled),
40 --track-bg: fn.global-color(--border),
41 --handle-border: fn.global-color(--border-strong),
42 --handle-bg: fn.global-color(--base --50),
43 ),
44 --key-focus: (
45 --label: fn.global-color(--focus --text),
46 --border: fn.global-color(--focus --border),
47 --outline: fn.global-color(--focus --outline),
48 ),
49 ),
50 ));
51
52 @include iro.bem-object(iro.props-namespace()) {
53 display: inline-block;
54 position: relative;
55 margin-inline:
56 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
57 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
58 padding-inline: fn.dim(--pad-i);
59 padding-block: fn.dim(--pad-b);
60
61 @include iro.bem-elem('indicator') {
62 display: inline-block;
63 flex: 0 0 auto;
64 inline-size: fn.dim(--width);
65 block-size: fn.dim(--height);
66 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset));
67 transition: background-color .2s ease;
68 border: fn.dim(--key-focus --border-offset) solid transparent;
69 border-radius: 2em;
70 background-color: fn.color(--track-bg);
71 background-clip: padding-box;
72 vertical-align: top;
73
74 &::after {
75 content: '';
76 display: block;
77 inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
78 block-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
79 transition: transform .2s ease;
80 border: fn.dim(--border) solid fn.color(--handle-border);
81 border-radius: fn.dim(--width);
82 background-color: fn.color(--handle-bg);
83 }
84 }
85
86 @include iro.bem-elem('label') {
87 margin-inline-start: fn.dim(--label-gap);
88 }
89
90 @include iro.bem-elem('native') {
91 appearance: none;
92 position: absolute;
93 z-index: -1;
94 inset-block-start: 0;
95 inset-inline-start: 0;
96 inline-size: 100%;
97 block-size: 100%;
98 margin: 0;
99 padding: 0;
100 overflow: hidden;
101 border-radius: fn.dim(--rounding);
102
103 &:hover,
104 &:focus-visible {
105 @include iro.bem-sibling-elem('label') {
106 color: fn.color(--hover --label);
107 }
108
109 @include iro.bem-sibling-elem('indicator') {
110 &::after {
111 border-color: fn.color(--hover --handle-border);
112 }
113 }
114 }
115
116 &:checked {
117 @include iro.bem-sibling-elem('indicator') {
118 background-color: fn.color(--handle-border);
119
120 &::after {
121 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
122 border-color: fn.color(--handle-border);
123 }
124 }
125
126 &:hover,
127 &:focus-visible {
128 @include iro.bem-sibling-elem('indicator') {
129 background-color: fn.color(--hover --handle-border);
130
131 &::after {
132 border-color: fn.color(--hover --handle-border);
133 }
134 }
135 }
136 }
137
138 &:disabled {
139 @include iro.bem-sibling-elem('label') {
140 color: fn.color(--disabled --label);
141 }
142
143 @include iro.bem-sibling-elem('indicator') {
144 background-color: fn.color(--disabled --track-bg);
145
146 &::after {
147 border-color: fn.color(--disabled --handle-border);
148 background-color: fn.color(--disabled --handle-bg);
149 }
150 }
151
152 &:checked {
153 @include iro.bem-sibling-elem('indicator') {
154 background-color: fn.color(--disabled --handle-border);
155
156 &::after {
157 border-color: fn.color(--disabled --handle-border);
158 }
159 }
160 }
161 }
162
163 &:focus-visible {
164 @include iro.bem-sibling-elem('label') {
165 color: fn.color(--key-focus --label);
166 }
167
168 @include iro.bem-sibling-elem('indicator') {
169 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
170 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
171 }
172 }
173 }
174
175 @include iro.bem-modifier('standalone') {
176 @include iro.bem-elem('indicator') {
177 margin-block-start: 0;
178 }
179 }
180
181 @include iro.bem-modifier('accent') {
182 @include iro.bem-elem('native') {
183 &:checked {
184 @include iro.bem-sibling-elem('indicator') {
185 background-color: fn.color(--accent --handle-border);
186
187 &::after {
188 border-color: fn.color(--accent --handle-border);
189 }
190 }
191
192 &:hover,
193 &:focus-visible {
194 @include iro.bem-sibling-elem('indicator') {
195 background-color: fn.color(--accent --hover --handle-border);
196
197 &::after {
198 border-color: fn.color(--accent --hover --handle-border);
199 }
200 }
201 }
202 }
203
204 &:disabled {
205 @include iro.bem-sibling-elem('label') {
206 color: fn.color(--disabled --label);
207 }
208
209 &:checked {
210 @include iro.bem-sibling-elem('indicator') {
211 background-color: fn.color(--disabled --handle-border);
212
213 &::after {
214 border-color: fn.color(--disabled --handle-border);
215 }
216 }
217 }
218 }
219 }
220 }
221 }
222}
diff --git a/src_old/objects/_table.scss b/src_old/objects/_table.scss
new file mode 100644
index 0000000..2c9f65b
--- /dev/null
+++ b/src_old/objects/_table.scss
@@ -0,0 +1,168 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4
5@include iro.props-namespace('table') {
6 @include iro.props-store((
7 --dims: (
8 --pad-i: fn.global-dim(--size --175),
9 --pad-b: fn.global-dim(--size --125),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12
13 --sm: (
14 --pad-b: fn.global-dim(--size --75),
15 )
16 ),
17 --colors: (
18 --border: fn.global-color(--border),
19 --heading: fn.global-color(--heading),
20 --hover: fn.global-color(--border-mute),
21 --active: fn.global-color(--border),
22 --box: (
23 --bg: fn.global-color(--base --50),
24 --hover: fn.global-color(--bg-base),
25 --active: fn.global-color(--border-mute),
26 )
27 )
28 ));
29
30 @include iro.bem-object(iro.props-namespace()) {
31 border-spacing: 0;
32 border-collapse: separate;
33
34 @include iro.bem-modifier('fixed') {
35 table-layout: fixed;
36 }
37
38 @include iro.bem-elem('head-cell') {
39 @include mx.set-font(--standard, (
40 --line-height: null,
41 --size: fn.global-dim(--font-size --50),
42 --weight: bold,
43 --transform: uppercase,
44 --spacing: .5px
45 ));
46
47 padding-inline: fn.dim(--pad-i);
48 padding-block: fn.dim(--pad-b);
49 color: fn.color(--heading);
50 text-align: start;
51 }
52
53 @include iro.bem-elem('cell') {
54 padding-inline: fn.dim(--pad-i);
55 padding-block: fn.dim(--pad-b);
56 border-width: 0;
57 border-block-start-width: fn.dim(--border);
58 border-style: solid;
59 border-color: fn.color(--border);
60
61 @include iro.bem-modifier('divider') {
62 border-inline-end-width: fn.dim(--border);
63 }
64 }
65
66 @include iro.bem-elem('row') {
67 &:last-child {
68 @include iro.bem-elem('cell') {
69 border-block-end-width: fn.dim(--border);
70 }
71 }
72 }
73
74 @include iro.bem-modifier('flush') {
75 @include iro.bem-elem('head-cell', 'cell') {
76 &:first-child {
77 padding-inline-start: 0;
78 }
79
80 &:last-child {
81 padding-inline-end: 0;
82 }
83 }
84 }
85
86 @include iro.bem-modifier('box') {
87 @include iro.bem-elem('cell') {
88 background-color: fn.color(--box --bg);
89
90 &:first-child {
91 border-inline-start-width: fn.dim(--border);
92 }
93
94 &:last-child {
95 border-inline-end-width: fn.dim(--border);
96 }
97 }
98
99 @include iro.bem-elem('row') {
100 &:first-child {
101 @include iro.bem-elem('cell') {
102 &:first-child {
103 border-start-start-radius: fn.dim(--rounding);
104 }
105
106 &:last-child {
107 border-start-end-radius: fn.dim(--rounding);
108 }
109 }
110 }
111
112 &:last-child {
113 @include iro.bem-elem('cell') {
114 &:first-child {
115 border-end-start-radius: fn.dim(--rounding);
116 }
117
118 &:last-child {
119 border-end-end-radius: fn.dim(--rounding);
120 }
121 }
122 }
123 }
124 }
125
126 @include iro.bem-modifier('interactive') {
127 @include iro.bem-elem('row') {
128 @include iro.bem-elem('cell') {
129 cursor: pointer;
130 }
131
132 &:hover {
133 @include iro.bem-elem('cell') {
134 background-color: fn.color(--hover);
135 }
136 }
137
138 &:active {
139 @include iro.bem-elem('cell') {
140 background-color: fn.color(--active);
141 }
142 }
143 }
144
145 @include iro.bem-modifier('box') {
146 @include iro.bem-elem('row') {
147 &:hover {
148 @include iro.bem-elem('cell') {
149 background-color: fn.color(--box --hover);
150 }
151 }
152
153 &:active {
154 @include iro.bem-elem('cell') {
155 background-color: fn.color(--box --active);
156 }
157 }
158 }
159 }
160 }
161
162 @include iro.bem-modifier('sm') {
163 @include iro.bem-elem('head-cell', 'cell') {
164 padding-block: fn.dim(--sm --pad-b);
165 }
166 }
167 }
168}
diff --git a/src_old/objects/_text-field.scss b/src_old/objects/_text-field.scss
new file mode 100644
index 0000000..6611ea6
--- /dev/null
+++ b/src_old/objects/_text-field.scss
@@ -0,0 +1,213 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin invalid {
5 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
6
7 @include iro.bem-sibling-elem('bg') {
8 inset-block: $focus-border-offset;
9 inset-inline: $focus-border-offset;
10 border: fn.dim(--focus --border) solid fn.color(--error --border);
11 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
12 }
13
14 &:hover {
15 @include iro.bem-sibling-elem('bg') {
16 border-color: fn.color(--error --hover --border);
17 }
18 }
19
20 &:focus {
21 @include iro.bem-sibling-elem('bg') {
22 border-color: fn.color(--error --focus --border);
23 }
24 }
25}
26
27@mixin keyboard-focus {
28 @include iro.bem-sibling-elem('bg') {
29 border-color: fn.color(--key-focus --border);
30 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
31 //outline-offset: fn.dim(--focus --border);
32 }
33}
34
35@include iro.props-namespace('text-field') {
36 @include iro.props-store((
37 --dims: (
38 --line-height: 1.4,
39 --pad-i: fn.global-dim(--size --125),
40 --pad-b: fn.global-dim(--size --125),
41 --border: fn.global-dim(--border --thin),
42 --rounding: fn.global-dim(--rounding),
43
44 --extended: (
45 --pad: fn.global-dim(--size --50),
46 ),
47
48 --focus: (
49 --border: fn.global-dim(--border --medium),
50 ),
51
52 --key-focus: (
53 --border: fn.global-dim(--key-focus --outline),
54 ),
55 ),
56 --colors: (
57 --bg: fn.global-color(--base --50),
58 --placeholder: fn.global-color(--text-mute-more),
59 --text: fn.global-color(--text),
60 --border: fn.global-color(--border-strong),
61
62 --hover: (
63 --border: fn.global-color(--text-mute-more),
64 ),
65 --focus: (
66 --border: fn.global-color(--focus --border),
67 ),
68 --key-focus: (
69 --border: fn.global-color(--focus --border),
70 --outline: fn.global-color(--focus --outline),
71 ),
72 --error: (
73 --border: fn.global-color(--negative --700),
74
75 --hover: (
76 --border: fn.global-color(--negative --900),
77 ),
78 --focus: (
79 --border: fn.global-color(--negative --900),
80 ),
81 ),
82 --disabled: (
83 --bg: fn.global-color(--border-mute),
84 --placeholder: fn.global-color(--text-disabled),
85 --text: fn.global-color(--text-disabled),
86 --border: fn.global-color(--border-mute),
87 ),
88 ),
89 ));
90
91 @include iro.bem-object(iro.props-namespace()) {
92 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
93
94 position: relative;
95 min-inline-size: 0;
96 border-radius: fn.dim(--rounding);
97 background-color: fn.color(--bg);
98
99 @include iro.bem-elem('bg') {
100 display: block;
101 position: absolute;
102 inset-block: 0;
103 inset-inline: 0;
104 border: fn.dim(--border) solid fn.color(--border);
105 border-radius: fn.dim(--rounding);
106 pointer-events: none;
107 }
108
109 @include iro.bem-elem('native') {
110 box-sizing: border-box;
111 inline-size: 100%;
112 padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1));
113 padding-inline: fn.dim(--pad-i);
114 border: 1px solid transparent;
115 background-color: transparent;
116 color: fn.color(--text);
117 font: inherit;
118 line-height: fn.dim(--line-height);
119 resize: none;
120 appearance: none;
121
122 &::placeholder {
123 opacity: 1;
124 color: fn.color(--placeholder);
125 font-style: italic;
126 }
127
128 &:hover {
129 @include iro.bem-sibling-elem('bg') {
130 border-color: fn.color(--hover --border);
131 }
132 }
133
134 &:focus {
135 outline: 0;
136
137 @include iro.bem-sibling-elem('bg') {
138 inset-block: $focus-border-offset;
139 inset-inline: $focus-border-offset;
140 border: fn.dim(--focus --border) solid fn.color(--focus --border);
141 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
142 }
143 }
144
145 &:invalid {
146 @include invalid;
147 }
148
149 &:focus-visible,
150 &:invalid:focus-visible {
151 @include keyboard-focus;
152 }
153 }
154
155 @include iro.bem-modifier('extended') {
156 padding: fn.dim(--extended --pad);
157
158 @include iro.bem-multi('&', 'elem' 'bg') {
159 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
160 }
161
162 @include iro.bem-elem('native') {
163 &:focus {
164 @include iro.bem-sibling-elem('bg') {
165 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset);
166 }
167 }
168 }
169 }
170
171 @include iro.bem-is('invalid') {
172 @include iro.bem-elem('native') {
173 @include invalid;
174
175 &:focus-visible {
176 @include keyboard-focus;
177 }
178 }
179 }
180
181 @include iro.bem-is('disabled') {
182 background-color: fn.color(--disabled --bg);
183
184 @include iro.bem-elem('native') {
185 color: fn.color(--disabled --text);
186
187 &::placeholder {
188 color: fn.color(--disabled --placeholder);
189 }
190 }
191
192 @include iro.bem-elem('bg') {
193 border-color: fn.color(--disabled --border);
194 }
195
196 @include iro.bem-is('invalid') {
197 @include iro.bem-elem('native') {
198 @include iro.bem-sibling-elem('bg') {
199 border-color: fn.color(--disabled --border);
200 }
201 }
202 }
203
204 @include iro.bem-elem('native') {
205 &:invalid {
206 @include iro.bem-sibling-elem('bg') {
207 border-color: fn.color(--disabled --border);
208 }
209 }
210 }
211 }
212 }
213}
diff --git a/src_old/scopes/_blockquotes.scss b/src_old/scopes/_blockquotes.scss
new file mode 100644
index 0000000..f6a13fe
--- /dev/null
+++ b/src_old/scopes/_blockquotes.scss
@@ -0,0 +1,34 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('blockquotes') {
5 @include iro.props-store((
6 --dims: (
7 --indent: fn.global-dim(--list --indent),
8 --margin-bs: fn.global-dim(--paragraph --margin-bs),
9 --border: fn.global-dim(--border --thick),
10
11 --compact: (
12 --indent: fn.global-dim(--list --compact-indent),
13 ),
14 ),
15 --colors: (
16 --border: fn.global-color(--border),
17 )
18 ));
19
20 @include iro.bem-scope(iro.props-namespace()) {
21 blockquote {
22 margin-block: fn.dim(--margin-bs);
23 margin-inline: 1px 0;
24 padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border));
25 border-inline-start: fn.dim(--border) solid fn.color(--border);
26 }
27
28 @include iro.bem-modifier('compact') {
29 blockquote {
30 padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border));
31 }
32 }
33 }
34}
diff --git a/src_old/scopes/_code.scss b/src_old/scopes/_code.scss
new file mode 100644
index 0000000..4df711b
--- /dev/null
+++ b/src_old/scopes/_code.scss
@@ -0,0 +1,59 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('code') {
5 @include iro.props-store((
6 --dims: (
7 --inline: (
8 --pad-i: fn.global-dim(--size --50),
9 --pad-b: fn.global-dim(--size --10),
10 --rounding: fn.global-dim(--rounding),
11 ),
12 --block: (
13 --pad-i: fn.global-dim(--size --150),
14 --pad-b: fn.global-dim(--size --85),
15 --margin-bs: fn.global-dim(--paragraph --margin-bs),
16 --rounding: fn.global-dim(--rounding),
17 )
18 ),
19 --colors: (
20 --inline: (
21 --fg: fn.global-color(--red --1200),
22 --bg: fn.global-color(--red --200),
23 ),
24 --block: (
25 --fg: fn.global-color(--text),
26 --bg: fn.global-color(--base --50),
27 )
28 )
29 ));
30
31 @include iro.bem-scope(iro.props-namespace()) {
32 code {
33 padding-block: fn.dim(--inline --pad-b);
34 padding-inline: fn.dim(--inline --pad-i);
35 border-radius: fn.dim(--inline --rounding);
36 background-color: fn.color(--inline --bg);
37 color: fn.color(--inline --fg);
38 }
39
40 pre {
41 margin-block: fn.dim(--block --margin-bs) 0;
42 margin-inline: 0;
43 padding-block: fn.dim(--block --pad-b);
44 padding-inline: fn.dim(--block --pad-i);
45 border-radius: fn.dim(--block --rounding);
46 background-color: fn.color(--block --bg);
47 color: fn.color(--block --fg);
48
49 code {
50 display: inline-block;
51 margin-inline-end: fn.dim(--block --pad-i);
52 padding: 0;
53 border-radius: 0;
54 background-color: transparent;
55 color: currentColor;
56 }
57 }
58 }
59}
diff --git a/src_old/scopes/_headings.scss b/src_old/scopes/_headings.scss
new file mode 100644
index 0000000..9593792
--- /dev/null
+++ b/src_old/scopes/_headings.scss
@@ -0,0 +1,116 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4@use 'include-media/dist/include-media' as media;
5
6@include iro.props-namespace('headings') {
7 @include iro.bem-scope(iro.props-namespace()) {
8 h1,
9 h2,
10 h3,
11 h4,
12 h5,
13 h6 {
14 @include mx.set-font(--headline);
15
16 display: block;
17 transform: translateX(-.06em);
18 letter-spacing: normal;
19 text-transform: none;
20 }
21
22
23 h1 {
24 @include mx.heading-strong(--xxl);
25 }
26
27 h2 {
28 @include mx.heading-strong(--xl);
29 }
30
31 h3 {
32 @include mx.heading-medium(--lg);
33 }
34
35 h4 {
36 @include mx.heading-medium(--md);
37 }
38
39 h5 {
40 @include mx.heading-faint(--sm);
41 }
42
43 h6 {
44 @include mx.heading-faint(--xs);
45 }
46
47 @include iro.bem-elem('highlight') {
48 background-image: linear-gradient(
49 to top,
50 transparent .15em,
51 fn.foreign-color(--heading, --bg) .15em,
52 fn.foreign-color(--heading, --bg) .6em,
53 transparent .6em
54 );
55 }
56
57 @include iro.bem-modifier('display') {
58 h1,
59 h2,
60 h3,
61 h4,
62 h5,
63 h6 {
64 @include mx.set-font(--headline);
65 }
66
67 h1 {
68 @include mx.heading-strong(--display --xxl);
69
70 @include media.media('<=md') {
71 @include mx.heading-strong(--display-sm --xxl);
72 }
73 }
74
75 h2 {
76 @include mx.heading-strong(--display --xl);
77
78 @include media.media('<=md') {
79 @include mx.heading-strong(--display-sm --xl);
80 }
81 }
82
83 h3 {
84 @include mx.heading-strong(--display --lg);
85
86 @include media.media('<=md') {
87 @include mx.heading-strong(--display-sm --lg);
88 }
89 }
90
91 h4 {
92 @include mx.heading-strong(--display --md);
93
94 @include media.media('<=md') {
95 @include mx.heading-strong(--display-sm --md);
96 }
97 }
98
99 h5 {
100 @include mx.heading-medium(--display --sm);
101
102 @include media.media('<=md') {
103 @include mx.heading-medium(--display-sm --sm);
104 }
105 }
106
107 h6 {
108 @include mx.heading-faint(--display --xs);
109
110 @include media.media('<=md') {
111 @include mx.heading-faint(--display-sm --xs);
112 }
113 }
114 }
115 }
116}
diff --git a/src_old/scopes/_links.scss b/src_old/scopes/_links.scss
new file mode 100644
index 0000000..d47c406
--- /dev/null
+++ b/src_old/scopes/_links.scss
@@ -0,0 +1,143 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$static-themes: 'black' 'white' !default;
5
6@include iro.props-namespace('links') {
7 @include iro.props-store((
8 --dims: (
9 --rounding: fn.global-dim(--rounding),
10 --underline: fn.global-dim(--border --thin),
11
12 --hover: (
13 --underline: fn.global-dim(--border --medium),
14 ),
15
16 --key-focus: (
17 --border: fn.global-dim(--key-focus --border),
18 --border-offset: fn.global-dim(--key-focus --border-offset),
19 --outline: fn.global-dim(--key-focus --border),
20 ),
21 ),
22 --colors: (
23 --underline: fn.global-color(--text-mute-more),
24
25 --colored: (
26 --text: fn.global-color(--accent --1100),
27 --underline: fn.global-color(--accent --600),
28
29 --hover: (
30 --text: fn.global-color(--accent --1300),
31 ),
32
33 --visited: (
34 --text: fn.global-color(--purple --1100),
35 --underline: fn.global-color(--purple --600),
36
37 --hover: (
38 --text: fn.global-color(--purple --1300),
39 ),
40 ),
41 ),
42
43 --key-focus: (
44 --text: fn.global-color(--focus --text),
45 --border: fn.global-color(--focus --border),
46 --outline: fn.global-color(--focus --outline),
47 ),
48 ),
49 ));
50
51 @each $theme in $static-themes {
52 @include iro.props-store((
53 --colors: (
54 --static-#{$theme}: (
55 --text: fn.global-color(--#{$theme}-transparent --800),
56 --underline: fn.global-color(--#{$theme}-transparent --500),
57
58 --hover: (
59 --text: fn.global-color(--#{$theme}-transparent --900),
60 ),
61
62 --key-focus: (
63 --text: fn.global-color(--#{$theme}-transparent --900),
64 --border: fn.global-color(--#{$theme}-transparent --900),
65 --outline: fn.global-color(--#{$theme}-transparent --300),
66 ),
67 )
68 )
69 ));
70 }
71
72 @include iro.bem-scope(iro.props-namespace()) {
73 :link,
74 :visited {
75 border-radius: fn.dim(--rounding);
76 color: currentColor;
77 text-decoration: underline;
78 text-decoration-color: fn.color(--underline);
79 text-decoration-thickness: fn.dim(--underline);
80 box-decoration-break: clone;
81
82 &:hover {
83 text-decoration: underline;
84 text-decoration-thickness: fn.dim(--hover --underline);
85 text-decoration-skip-ink: none;
86 }
87
88 &:focus-visible {
89 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
90 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
91 color: fn.color(--key-focus --text);
92 text-decoration: none;
93 }
94 }
95
96 @include iro.bem-modifier('invisible') {
97 :link,
98 :visited {
99 text-decoration: none;
100 }
101 }
102
103 @include iro.bem-modifier('colored') {
104 :link {
105 color: fn.color(--colored --text);
106 text-decoration-color: fn.color(--colored --underline);
107
108 &:hover {
109 color: fn.color(--colored --hover --text);
110 }
111 }
112
113 :visited {
114 color: fn.color(--colored --visited --text);
115 text-decoration-color: fn.color(--colored --visited --underline);
116
117 &:hover {
118 color: fn.color(--colored --visited --hover --text);
119 }
120 }
121 }
122
123 @each $theme in $static-themes {
124 @include iro.bem-modifier(static-#{$theme}) {
125 :link,
126 :visited {
127 color: fn.color(--static-#{$theme} --text);
128 text-decoration-color: fn.color(--static-#{$theme} --underline);
129
130 &:hover {
131 color: fn.color(--static-#{$theme} --hover --text);
132 }
133
134 &:focus-visible {
135 outline-color: fn.color(--static-#{$theme} --key-focus --border);
136 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline);
137 color: fn.color(--static-#{$theme} --key-focus --text);
138 }
139 }
140 }
141 }
142 }
143}
diff --git a/src_old/scopes/_lists.scss b/src_old/scopes/_lists.scss
new file mode 100644
index 0000000..bad9731
--- /dev/null
+++ b/src_old/scopes/_lists.scss
@@ -0,0 +1,66 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('lists') {
5 @include iro.props-store((
6 --dims: (
7 --indent: calc(fn.global-dim(--list --indent) + 1em),
8 --margin-bs: fn.global-dim(--paragraph --margin-bs),
9
10 --compact: (
11 --indent: fn.global-dim(--list --compact-indent),
12 ),
13 ),
14 --colors: (
15 --border: fn.global-color(--border-mute),
16 )
17 ));
18
19 @include iro.bem-scope(iro.props-namespace()) {
20 ul,
21 ol {
22 margin-block-start: fn.dim(--margin-bs);
23 padding-inline-start: fn.dim(--indent);
24
25 ul,
26 ol {
27 margin-block-start: 0;
28 }
29 }
30
31 ul {
32 list-style: disc;
33 }
34
35 ol {
36 list-style: decimal;
37 }
38
39 dl {
40 margin-block: fn.dim(--margin-bs) 0;
41 margin-inline: 0;
42 padding: 0;
43 }
44
45 dt {
46 color: fn.global-color(--heading);
47 font-weight: bold;
48 }
49
50 dd {
51 margin-block: 0;
52 margin-inline: fn.dim(--indent) 0;
53 }
54
55 @include iro.bem-modifier('compact') {
56 ul,
57 ol {
58 padding-inline-start: calc(fn.dim(--compact --indent) - 3px);
59 }
60
61 dd {
62 margin-inline-start: calc(fn.dim(--compact --indent) - 3px);
63 }
64 }
65 }
66}
diff --git a/src_old/scopes/_tables.scss b/src_old/scopes/_tables.scss
new file mode 100644
index 0000000..9b2124d
--- /dev/null
+++ b/src_old/scopes/_tables.scss
@@ -0,0 +1,115 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4
5@include iro.props-namespace('tables') {
6 @include iro.props-store((
7 --dims: (
8 --pad-i: fn.foreign-dim(--table, --pad-i),
9 --pad-b: fn.foreign-dim(--table, --pad-b),
10 --rounding: fn.foreign-dim(--table, --rounding),
11 --border: fn.foreign-dim(--table, --border),
12 --margin-bs: fn.global-dim(--paragraph --margin-bs),
13 ),
14 --colors: (
15 --border: fn.foreign-color(--table, --border),
16 --heading: fn.foreign-color(--table, --heading),
17 --box: (
18 --bg: fn.foreign-color(--table, --box --bg),
19 )
20 )
21 ));
22
23 @include iro.bem-scope(iro.props-namespace()) {
24 table {
25 margin-block-start: fn.dim(--margin-bs);
26 border-spacing: 0;
27 border-collapse: separate;
28 }
29
30 th {
31 @include mx.set-font(--standard, (
32 --line-height: null,
33 --size: fn.global-dim(--font-size --50),
34 --weight: bold,
35 --transform: uppercase,
36 --spacing: .5px
37 ));
38
39 padding-block: fn.dim(--pad-b);
40 padding-inline: fn.dim(--pad-i);
41 color: fn.color(--heading);
42 text-align: start;
43 }
44
45 td {
46 padding-block: fn.dim(--pad-b);
47 padding-inline: fn.dim(--pad-i);
48 border-width: 0;
49 border-block-start-width: fn.dim(--border);
50 border-style: solid;
51 border-color: fn.color(--border);
52 }
53
54 tr {
55 &:last-child {
56 td {
57 border-block-end-width: fn.dim(--border);
58 }
59 }
60 }
61
62 @include iro.bem-modifier('flush') {
63 th,
64 td {
65 &:first-child {
66 padding-inline-start: 0;
67 }
68
69 &:last-child {
70 padding-inline-end: 0;
71 }
72 }
73 }
74
75 @include iro.bem-modifier('box') {
76 td {
77 background-color: fn.color(--box --bg);
78
79 &:first-child {
80 border-inline-start-width: fn.dim(--border);
81 }
82
83 &:last-child {
84 border-inline-end-width: fn.dim(--border);
85 }
86 }
87
88 tr {
89 &:first-child {
90 td {
91 &:first-child {
92 border-start-start-radius: fn.dim(--rounding);
93 }
94
95 &:last-child {
96 border-start-end-radius: fn.dim(--rounding);
97 }
98 }
99 }
100
101 &:last-child {
102 td {
103 &:first-child {
104 border-end-start-radius: fn.dim(--rounding);
105 }
106
107 &:last-child {
108 border-end-end-radius: fn.dim(--rounding);
109 }
110 }
111 }
112 }
113 }
114 }
115}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 09:36:24 +0000