summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 17:14:45 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 17:14:45 +0200
commitc41e16f6044548e27fbf8e4ef65ed3067278c80b (patch)
tree90033bba112417a1b7fa833f6a307df56b9799dd /src
parentUpdate (diff)
downloadiro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.tar.gz
iro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.tar.bz2
iro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_config.scss214
-rw-r--r--src/_core.scss4
-rw-r--r--src/_core.vars.scss12
-rw-r--r--src/_functions.scss4
-rw-r--r--src/_iro-design.scss9
-rw-r--r--src/_props.scss6
-rw-r--r--src/_themes.scss283
-rw-r--r--src/_utils.scss251
-rw-r--r--src/objects/_action-button.vars.scss3
-rw-r--r--src/objects/_badge.vars.scss3
-rw-r--r--src/objects/_button.vars.scss3
-rw-r--r--src/objects/_divider.vars.scss7
-rw-r--r--src/objects/_heading.vars.scss12
-rw-r--r--src/objects/_lightbox.vars.scss3
-rw-r--r--src/objects/_palette.scss14
-rw-r--r--src/objects/_status-indicator.vars.scss4
-rw-r--r--src/objects/_switch.scss139
-rw-r--r--src/objects/_switch.vars.scss37
-rw-r--r--src/objects/_table.scss88
-rw-r--r--src/objects/_table.vars.scss25
-rw-r--r--src/objects/_text-field.scss139
-rw-r--r--src/objects/_text-field.vars.scss38
-rw-r--r--src/scopes/_headings.scss22
-rw-r--r--src/scopes/_implicit.scss15
-rw-r--r--src/scopes/_implicit.vars.scss8
-rw-r--r--src/scopes/_links.vars.scss3
-rw-r--r--src/scopes/_tables.scss57
-rw-r--r--src/scopes/_tables.vars.scss24
28 files changed, 871 insertions, 556 deletions
diff --git a/src/_config.scss b/src/_config.scss
new file mode 100644
index 0000000..ced2aa5
--- /dev/null
+++ b/src/_config.scss
@@ -0,0 +1,214 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:math';
4@use 'iro-sass/src/easing' as easing;
5@use 'include-media/dist/include-media' as media;
6
7$palette-chroma-easing: 'ease' !default;
8
9$static-colors-override: () !default;
10$static-colors: map.deep-merge((
11 --base: hsl(0, 0%, 98%),
12
13 --contrasts: (
14 --100: math.div(0, 12) * 110 - 10,
15 --200: math.div(1, 12) * 110 - 10,
16 --300: math.div(2, 12) * 110 - 10,
17 --400: math.div(3, 12) * 110 - 10,
18 --500: math.div(4, 12) * 110 - 10,
19 --600: math.div(5, 12) * 110 - 10,
20 --700: math.div(6, 12) * 110 - 10,
21 --800: math.div(7, 12) * 110 - 10,
22 --900: math.div(8, 12) * 110 - 10,
23 --1000: math.div(9, 12) * 110 - 10,
24 --1100: math.div(10, 12) * 110 - 10,
25 --1200: math.div(11, 12) * 110 - 10,
26 --1300: math.div(12, 12) * 110 - 10,
27 ),
28
29 --palettes: (
30 --blue: oklch(56% .14 275.25),
31 --purple: oklch(56% .14 305.58),
32 --red: oklch(56% .14 14.69),
33 --green: oklch(56% .14 150.48),
34 --yellow: oklch(56% .14 84.08),
35 ),
36
37 --transparents: (
38 --100: 0,
39 --200: .1,
40 --300: .25,
41 --400: .4,
42 --500: .55,
43 --600: .7,
44 --700: .8,
45 --800: .9,
46 --900: 1,
47 ),
48), $static-colors-override) !default;
49
50$semantic-colors-common-override: () !default;
51$semantic-colors-common: map.deep-merge((
52 --accent: --theme --blue,
53 --accent-static: --static --blue,
54 --positive: --theme --green,
55 --positive-static: --static --green,
56 --negative: --theme --red,
57 --negative-static: --static --red,
58 --warning: --theme --yellow,
59 --warning-static: --static --yellow,
60
61 --focus-raw: --theme --accent,
62 --focus-static: --theme --accent-static,
63
64 --border-mute: --theme --base --200,
65 --border: --theme --base --300,
66 --border-strong: --theme --base --400,
67
68 --text-disabled: --theme --base --500,
69 --text-mute-more: --theme --base --600,
70 --text-mute: --theme --base --700,
71 --text: --theme --base --800,
72 --heading: --theme --base --900,
73
74 --focus: (
75 --outline: --theme --focus-raw --400,
76 --border-mute: --theme --focus-raw --900,
77 --border: --theme --focus-raw --1000,
78 --border-text: --theme --focus-raw --1000-text,
79 --border-strong: --theme --focus-raw --1100,
80 --text: --theme --focus-raw --1100,
81 ),
82), $semantic-colors-common-override) !default;
83
84$theme-light-override: () !default;
85$theme-light: map.deep-merge((
86 --contrasts: (
87 --grays: (
88 --50: -8,
89 --75: -4,
90 --100: 0,
91
92 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
93 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
94 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
95
96 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
97 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
98 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
99 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
100 --900: 106,
101 ),
102
103 --colors: (
104 --100: math.div(0, 12) * 96 + 5,
105 --200: math.div(1, 12) * 96 + 5,
106 --300: math.div(2, 12) * 96 + 5,
107 --400: math.div(3, 12) * 96 + 5,
108 --500: math.div(4, 12) * 96 + 5,
109 --600: math.div(5, 12) * 96 + 5,
110 --700: math.div(6, 12) * 96 + 5,
111 --800: math.div(7, 12) * 96 + 5,
112 --900: math.div(8, 12) * 96 + 5,
113 --1000: math.div(9, 12) * 96 + 5,
114 --1100: math.div(10, 12) * 96 + 5,
115 --1200: math.div(11, 12) * 96 + 5,
116 --1300: math.div(12, 12) * 96 + 5,
117 ),
118 ),
119
120 --ranges: (
121 --full: .3,
122 --muted: .1,
123 ),
124
125 --palettes: (
126 --base: hsl(260, 90%, 98%) --grays --full,
127 --blue: oklch(56% .16 275.25) --colors --muted,
128 --purple: oklch(56% .16 305.58) --colors --muted,
129 --red: oklch(56% .16 14.69) --colors --muted,
130 --green: oklch(56% .16 150.48) --colors --muted,
131 --yellow: oklch(56% .16 84.08) --colors --muted,
132 ),
133
134 --semantic: map.merge($semantic-colors-common, (
135 --bg-l2: --theme --base --50,
136 --bg-l1: --theme --base --100,
137 --bg-base: --theme --base --200,
138 )),
139
140 --constants: (
141 --shadow: rgba(#000, .15),
142 ),
143), $theme-light-override) !default;
144
145$theme-dark-override: () !default;
146$theme-dark: map.deep-merge((
147 --contrasts: (
148 --grays: (
149 --50: 4.4,
150 --75: 2.2,
151 --100: 0,
152
153 --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
154 --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
155 --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
156
157 --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
158 --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
159 --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
160 --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
161 --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
162 ),
163
164 --colors: (
165 --100: math.div(0, 12) * -100 - 5,
166 --200: math.div(1, 12) * -100 - 5,
167 --300: math.div(2, 12) * -100 - 5,
168 --400: math.div(3, 12) * -100 - 5,
169 --500: math.div(4, 12) * -100 - 5,
170 --600: math.div(5, 12) * -100 - 5,
171 --700: math.div(6, 12) * -100 - 5,
172 --800: math.div(7, 12) * -100 - 5,
173 --900: math.div(8, 12) * -100 - 5,
174 --1000: math.div(9, 12) * -100 - 5,
175 --1100: math.div(10, 12) * -100 - 5,
176 --1200: math.div(11, 12) * -100 - 5,
177 --1300: math.div(12, 12) * -100 - 5,
178 ),
179 ),
180
181 --ranges: (
182 --full: 1,
183 --muted: .3,
184 ),
185
186 --palettes: (
187 --base: hsl(257, 7%, 19%) --grays --full,
188 --blue: oklch(56% .16 275.25) --colors --muted,
189 --purple: oklch(56% .16 305.58) --colors --muted,
190 --red: oklch(56% .16 14.69) --colors --muted,
191 --green: oklch(56% .16 150.48) --colors --muted,
192 --yellow: oklch(56% .16 84.08) --colors --muted,
193 ),
194
195 --semantic: map.merge($semantic-colors-common, (
196 --bg-base: --theme --base --50,
197 --bg-l1: --theme --base --75,
198 --bg-l2: --theme --base --100,
199 )),
200
201 --constants: (
202 --shadow: rgba(#000, .5),
203 ),
204), $theme-dark-override) !default;
205
206$themes-override: () !default;
207$themes: map.deep-merge((
208 --main: (
209 light: $theme-light,
210 dark: $theme-dark,
211 )
212), $themes-override) !default;
213
214$theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src/_core.scss b/src/_core.scss
index e1205c4..ea84f6c 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -1,14 +1,14 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta'; 2@use 'sass:meta';
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use 'themes'; 4@use 'config';
5 5
6@use 'core.vars' as vars; 6@use 'core.vars' as vars;
7@forward 'core.vars'; 7@forward 'core.vars';
8 8
9@mixin styles { 9@mixin styles {
10 @each $theme-name, $theme in vars.$themes { 10 @each $theme-name, $theme in vars.$themes {
11 @if $theme-name == themes.$theme-default { 11 @if $theme-name == config.$theme-default {
12 :root { 12 :root {
13 @include props.materialize(map.values(meta.module-variables('vars'))); 13 @include props.materialize(map.values(meta.module-variables('vars')));
14 14
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index abaf879..3b23c32 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -3,7 +3,7 @@
3@use 'sass:list'; 3@use 'sass:list';
4@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/iro-sass' as iro;
5@use 'functions' as fn; 5@use 'functions' as fn;
6@use 'themes'; 6@use 'config';
7@use 'props'; 7@use 'props';
8 8
9$size--0: props.def(--size--0, 0) !default; 9$size--0: props.def(--size--0, 0) !default;
@@ -104,8 +104,8 @@ $list--compact-indent: props.def(--list--indent, props.get($size--250)) !default
104 104
105$static-colors: props.def(--static-colors); 105$static-colors: props.def(--static-colors);
106 106
107@each $palette-name, $palette in map.get(themes.$static-colors, --palettes) { 107@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
108 $palette: fn.palette($palette, map.get(themes.$static-colors, --contrasts), 1, map.get(themes.$static-colors, --base)); 108 $palette: fn.palette($palette, map.get(config.$static-colors, --contrasts), 1, map.get(config.$static-colors, --base));
109 $static-colors: props.merge($static-colors, ( $palette-name: $palette )); 109 $static-colors: props.merge($static-colors, ( $palette-name: $palette ));
110} 110}
111 111
@@ -117,7 +117,7 @@ $transparent-colors: props.def(--transparent-colors);
117 $color: list.nth($palette, 1); 117 $color: list.nth($palette, 1);
118 $text: list.nth($palette, 2); 118 $text: list.nth($palette, 2);
119 119
120 $palette: fn.transparent-palette($color, $text, map.get(themes.$static-colors, --transparents)); 120 $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
121 $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette )); 121 $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
122} 122}
123 123
@@ -125,7 +125,7 @@ $transparent-colors: props.def(--transparent-colors);
125 125
126$themes: (); 126$themes: ();
127 127
128@each $theme-name, $theme in themes.$themes { 128@each $theme-name, $theme in config.$themes {
129 @each $variant-name, $variant in $theme { 129 @each $variant-name, $variant in $theme {
130 $compiled: props.def(--colors); 130 $compiled: props.def(--colors);
131 131
@@ -182,4 +182,4 @@ $themes: ();
182 } 182 }
183} 183}
184 184
185$theme: map.get($themes, themes.$theme-default, light) !default; 185$theme: map.get($themes, config.$theme-default, light) !default;
diff --git a/src/_functions.scss b/src/_functions.scss
index ad45975..a3a9386 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -7,7 +7,7 @@
7@use 'iro-sass/src/iro-sass' as iro; 7@use 'iro-sass/src/iro-sass' as iro;
8@use 'iro-sass/src/easing'; 8@use 'iro-sass/src/easing';
9@use 'apca'; 9@use 'apca';
10@use 'themes'; 10@use 'config';
11 11
12@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { 12@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) {
13 $base-lch: color.to-space($base-color, oklch); 13 $base-lch: color.to-space($base-color, oklch);
@@ -27,7 +27,7 @@
27 $chroma-inv: true; 27 $chroma-inv: true;
28 $chroma-range: -1 * $chroma-range; 28 $chroma-range: -1 * $chroma-range;
29 } 29 }
30 $chroma-easing: meta.get-function(themes.$palette-chroma-easing, $module: easing); 30 $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
31 31
32 $palette: (); 32 $palette: ();
33 33
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index eac485d..64b2ec9 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -35,7 +35,7 @@ $breakpoints: (
35@forward 'scopes/headings' as s-headings--*; 35@forward 'scopes/headings' as s-headings--*;
36@forward 'scopes/links' as s-links--*; 36@forward 'scopes/links' as s-links--*;
37@forward 'scopes/lists' as s-lists--*; 37@forward 'scopes/lists' as s-lists--*;
38//@use 'scopes/tables' as s-tables--*; 38@forward 'scopes/tables' as s-tables--*;
39 39
40@forward 'objects/action-button' as o-action-button--*; 40@forward 'objects/action-button' as o-action-button--*;
41@forward 'objects/alert' as o-alert--*; 41@forward 'objects/alert' as o-alert--*;
@@ -57,3 +57,10 @@ $breakpoints: (
57@forward 'objects/radio' as o-radio--*; 57@forward 'objects/radio' as o-radio--*;
58@forward 'objects/side-nav' as o-side-nav--*; 58@forward 'objects/side-nav' as o-side-nav--*;
59@forward 'objects/status-indicator' as o-status-indicator--*; 59@forward 'objects/status-indicator' as o-status-indicator--*;
60@forward 'objects/switch' as o-switch--*;
61@forward 'objects/table' as o-table--*;
62@forward 'objects/text-field' as o-text-field--*;
63
64@forward 'utils' as utils--*;
65
66@forward 'themes' as themes--*;
diff --git a/src/_props.scss b/src/_props.scss
index 1a0f7d0..09082a3 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -1,7 +1,7 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:meta'; 3@use 'sass:meta';
4@use 'themes'; 4@use 'config';
5@use 'include-media/dist/include-media' as media; 5@use 'include-media/dist/include-media' as media;
6@use 'iro-sass/src/iro-sass' as iro; 6@use 'iro-sass/src/iro-sass' as iro;
7 7
@@ -26,8 +26,8 @@
26 } 26 }
27 } 27 }
28 28
29 @each $theme-name in map.keys(themes.$themes) { 29 @each $theme-name in map.keys(config.$themes) {
30 @if $theme-name != themes.$theme-default { 30 @if $theme-name != config.$theme-default {
31 @include iro.bem-theme($theme-name) { 31 @include iro.bem-theme($theme-name) {
32 @include iro.props-materialize($ref, null); 32 @include iro.props-materialize($ref, null);
33 33
diff --git a/src/_themes.scss b/src/_themes.scss
index ced2aa5..b460baf 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,214 +1,73 @@
1@use 'sass:list';
2@use 'sass:map'; 1@use 'sass:map';
3@use 'sass:math'; 2@use 'iro-sass/src/iro-sass' as iro;
4@use 'iro-sass/src/easing' as easing;
5@use 'include-media/dist/include-media' as media; 3@use 'include-media/dist/include-media' as media;
6 4@use 'props';
7$palette-chroma-easing: 'ease' !default; 5
8 6@use 'core.vars' as vars;
9$static-colors-override: () !default; 7@forward 'core.vars';
10$static-colors: map.deep-merge(( 8
11 --base: hsl(0, 0%, 98%), 9@mixin styles {
12 10 @include iro.bem-theme('base') {
13 --contrasts: ( 11 background-color: props.get(vars.$theme, --bg-base);
14 --100: math.div(0, 12) * 110 - 10, 12
15 --200: math.div(1, 12) * 110 - 10, 13 @include iro.bem-suffix('light') {
16 --300: math.div(2, 12) * 110 - 10, 14 @media (prefers-color-scheme: light) {
17 --400: math.div(3, 12) * 110 - 10, 15 background-color: props.get(vars.$theme, --bg-base);
18 --500: math.div(4, 12) * 110 - 10, 16 }
19 --600: math.div(5, 12) * 110 - 10, 17 }
20 --700: math.div(6, 12) * 110 - 10, 18
21 --800: math.div(7, 12) * 110 - 10, 19 @include iro.bem-suffix('dark') {
22 --900: math.div(8, 12) * 110 - 10, 20 @media (prefers-color-scheme: dark) {
23 --1000: math.div(9, 12) * 110 - 10, 21 background-color: props.get(vars.$theme, --bg-base);
24 --1100: math.div(10, 12) * 110 - 10, 22 }
25 --1200: math.div(11, 12) * 110 - 10, 23 }
26 --1300: math.div(12, 12) * 110 - 10, 24 }
27 ), 25
28 26 @include iro.bem-theme('l1') {
29 --palettes: ( 27 background-color: props.get(vars.$theme, --bg-l1);
30 --blue: oklch(56% .14 275.25), 28
31 --purple: oklch(56% .14 305.58), 29 @include iro.bem-suffix('light') {
32 --red: oklch(56% .14 14.69), 30 @media (prefers-color-scheme: light) {
33 --green: oklch(56% .14 150.48), 31 background-color: props.get(vars.$theme, --bg-l1);
34 --yellow: oklch(56% .14 84.08), 32 }
35 ), 33 }
36 34
37 --transparents: ( 35 @include iro.bem-suffix('dark') {
38 --100: 0, 36 @media (prefers-color-scheme: dark) {
39 --200: .1, 37 background-color: props.get(vars.$theme, --bg-l1);
40 --300: .25, 38 }
41 --400: .4, 39 }
42 --500: .55, 40 }
43 --600: .7, 41
44 --700: .8, 42 @include iro.bem-theme('l2') {
45 --800: .9, 43 background-color: props.get(vars.$theme, --bg-l2);
46 --900: 1, 44
47 ), 45 @include iro.bem-suffix('light') {
48), $static-colors-override) !default; 46 @media (prefers-color-scheme: light) {
49 47 background-color: props.get(vars.$theme, --bg-l2);
50$semantic-colors-common-override: () !default; 48 }
51$semantic-colors-common: map.deep-merge(( 49 }
52 --accent: --theme --blue, 50
53 --accent-static: --static --blue, 51 @include iro.bem-suffix('dark') {
54 --positive: --theme --green, 52 @media (prefers-color-scheme: dark) {
55 --positive-static: --static --green, 53 background-color: props.get(vars.$theme, --bg-l2);
56 --negative: --theme --red, 54 }
57 --negative-static: --static --red, 55 }
58 --warning: --theme --yellow, 56 }
59 --warning-static: --static --yellow, 57
60 58 @include iro.bem-theme('50') {
61 --focus-raw: --theme --accent, 59 background-color: props.get(vars.$theme, --base --50);
62 --focus-static: --theme --accent-static, 60
63 61 @include iro.bem-suffix('light') {
64 --border-mute: --theme --base --200, 62 @media (prefers-color-scheme: light) {
65 --border: --theme --base --300, 63 background-color: props.get(vars.$theme, --base --50);
66 --border-strong: --theme --base --400, 64 }
67 65 }
68 --text-disabled: --theme --base --500, 66
69 --text-mute-more: --theme --base --600, 67 @include iro.bem-suffix('dark') {
70 --text-mute: --theme --base --700, 68 @media (prefers-color-scheme: dark) {
71 --text: --theme --base --800, 69 background-color: props.get(vars.$theme, --base --50);
72 --heading: --theme --base --900, 70 }
73 71 }
74 --focus: ( 72 }
75 --outline: --theme --focus-raw --400, 73}
76 --border-mute: --theme --focus-raw --900,
77 --border: --theme --focus-raw --1000,
78 --border-text: --theme --focus-raw --1000-text,
79 --border-strong: --theme --focus-raw --1100,
80 --text: --theme --focus-raw --1100,
81 ),
82), $semantic-colors-common-override) !default;
83
84$theme-light-override: () !default;
85$theme-light: map.deep-merge((
86 --contrasts: (
87 --grays: (
88 --50: -8,
89 --75: -4,
90 --100: 0,
91
92 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
93 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
94 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
95
96 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
97 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
98 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
99 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
100 --900: 106,
101 ),
102
103 --colors: (
104 --100: math.div(0, 12) * 96 + 5,
105 --200: math.div(1, 12) * 96 + 5,
106 --300: math.div(2, 12) * 96 + 5,
107 --400: math.div(3, 12) * 96 + 5,
108 --500: math.div(4, 12) * 96 + 5,
109 --600: math.div(5, 12) * 96 + 5,
110 --700: math.div(6, 12) * 96 + 5,
111 --800: math.div(7, 12) * 96 + 5,
112 --900: math.div(8, 12) * 96 + 5,
113 --1000: math.div(9, 12) * 96 + 5,
114 --1100: math.div(10, 12) * 96 + 5,
115 --1200: math.div(11, 12) * 96 + 5,
116 --1300: math.div(12, 12) * 96 + 5,
117 ),
118 ),
119
120 --ranges: (
121 --full: .3,
122 --muted: .1,
123 ),
124
125 --palettes: (
126 --base: hsl(260, 90%, 98%) --grays --full,
127 --blue: oklch(56% .16 275.25) --colors --muted,
128 --purple: oklch(56% .16 305.58) --colors --muted,
129 --red: oklch(56% .16 14.69) --colors --muted,
130 --green: oklch(56% .16 150.48) --colors --muted,
131 --yellow: oklch(56% .16 84.08) --colors --muted,
132 ),
133
134 --semantic: map.merge($semantic-colors-common, (
135 --bg-l2: --theme --base --50,
136 --bg-l1: --theme --base --100,
137 --bg-base: --theme --base --200,
138 )),
139
140 --constants: (
141 --shadow: rgba(#000, .15),
142 ),
143), $theme-light-override) !default;
144
145$theme-dark-override: () !default;
146$theme-dark: map.deep-merge((
147 --contrasts: (
148 --grays: (
149 --50: 4.4,
150 --75: 2.2,
151 --100: 0,
152
153 --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
154 --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
155 --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
156
157 --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
158 --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
159 --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
160 --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
161 --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
162 ),
163
164 --colors: (
165 --100: math.div(0, 12) * -100 - 5,
166 --200: math.div(1, 12) * -100 - 5,
167 --300: math.div(2, 12) * -100 - 5,
168 --400: math.div(3, 12) * -100 - 5,
169 --500: math.div(4, 12) * -100 - 5,
170 --600: math.div(5, 12) * -100 - 5,
171 --700: math.div(6, 12) * -100 - 5,
172 --800: math.div(7, 12) * -100 - 5,
173 --900: math.div(8, 12) * -100 - 5,
174 --1000: math.div(9, 12) * -100 - 5,
175 --1100: math.div(10, 12) * -100 - 5,
176 --1200: math.div(11, 12) * -100 - 5,
177 --1300: math.div(12, 12) * -100 - 5,
178 ),
179 ),
180
181 --ranges: (
182 --full: 1,
183 --muted: .3,
184 ),
185
186 --palettes: (
187 --base: hsl(257, 7%, 19%) --grays --full,
188 --blue: oklch(56% .16 275.25) --colors --muted,
189 --purple: oklch(56% .16 305.58) --colors --muted,
190 --red: oklch(56% .16 14.69) --colors --muted,
191 --green: oklch(56% .16 150.48) --colors --muted,
192 --yellow: oklch(56% .16 84.08) --colors --muted,
193 ),
194
195 --semantic: map.merge($semantic-colors-common, (
196 --bg-base: --theme --base --50,
197 --bg-l1: --theme --base --75,
198 --bg-l2: --theme --base --100,
199 )),
200
201 --constants: (
202 --shadow: rgba(#000, .5),
203 ),
204), $theme-dark-override) !default;
205
206$themes-override: () !default;
207$themes: map.deep-merge((
208 --main: (
209 light: $theme-light,
210 dark: $theme-dark,
211 )
212), $themes-override) !default;
213
214$theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src/_utils.scss b/src/_utils.scss
new file mode 100644
index 0000000..fdec622
--- /dev/null
+++ b/src/_utils.scss
@@ -0,0 +1,251 @@
1@use 'sass:map';
2@use 'iro-sass/src/iro-sass' as iro;
3@use 'include-media/dist/include-media' as media;
4@use 'props';
5
6@use 'core.vars' as vars;
7@forward 'core.vars';
8
9/* stylelint-disable-next-line scss/dollar-variable-pattern */
10$-dirs: (
11 '': '',
12 'bs': '-block-start',
13 'be': '-block-end',
14 'b': '-block',
15 'is': '-inline-start',
16 'ie': '-inline-end',
17 'i': '-inline',
18) !default;
19
20/* stylelint-disable-next-line scss/dollar-variable-pattern */
21$-sizes: (
22 0: vars.$size--0,
23 10: vars.$size--10,
24 50: vars.$size--50,
25 75: vars.$size--75,
26 100: vars.$size--100,
27 125: vars.$size--125,
28 200: vars.$size--200,
29 400: vars.$size--400,
30 700: vars.$size--700,
31 800: vars.$size--800,
32) !default;
33
34@mixin styles {
35 @include iro.bem-utility('d-block') {
36 display: block;
37 }
38
39 @include iro.bem-utility('d-inline-block') {
40 display: inline-block;
41 }
42
43 @include iro.bem-utility('d-contents') {
44 display: contents;
45 }
46
47 @include iro.bem-utility('td-none') {
48 text-decoration: none;
49 }
50
51 @include iro.bem-utility('d-none') {
52 display: none;
53
54 @each $breakpoint in map.keys(media.$breakpoints) {
55 @include media.media('<=#{$breakpoint}') {
56 @include iro.bem-suffix('#{$breakpoint}-lo') {
57 display: none;
58 }
59 }
60
61 @include media.media('>#{$breakpoint}') {
62 @include iro.bem-suffix('#{$breakpoint}-hi') {
63 display: none;
64 }
65 }
66 }
67
68 @include iro.bem-at-theme('js') {
69 @include iro.bem-suffix('js') {
70 display: none;
71 }
72 }
73
74 @include iro.bem-at-theme('no-js') {
75 @include iro.bem-suffix('no-js') {
76 display: none;
77 }
78 }
79
80 @include iro.bem-suffix('empty') {
81 &:empty {
82 display: none;
83 }
84 }
85 }
86
87 @include iro.bem-utility('ta-start') {
88 text-align: start;
89 }
90
91 @include iro.bem-utility('ta-end') {
92 text-align: end;
93 }
94
95 @include iro.bem-utility('ta-center') {
96 text-align: center;
97 }
98
99 @include iro.bem-utility('fw-normal') {
100 font-weight: normal;
101 }
102
103 @include iro.bem-utility('ai-center') {
104 align-items: center;
105 }
106
107 @include iro.bem-utility('ai-start') {
108 align-items: flex-start;
109 }
110
111 @include iro.bem-utility('ai-end') {
112 align-items: flex-end;
113 }
114
115 @include iro.bem-utility('jc-center') {
116 justify-content: center;
117 }
118
119 @include iro.bem-utility('jc-start') {
120 justify-content: flex-start;
121 }
122
123 @include iro.bem-utility('jc-end') {
124 justify-content: flex-end;
125 }
126
127 @include iro.bem-utility('c-heading') {
128 color: props.get(vars.$theme, --heading);
129 }
130
131 @include iro.bem-utility('c-text') {
132 color: props.get(vars.$theme, --text);
133 }
134
135 @include iro.bem-utility('c-mute') {
136 color: props.get(vars.$theme, --text-mute);
137 }
138
139 @include iro.bem-utility('c-mute-more') {
140 color: props.get(vars.$theme, --text-mute-more);
141 }
142
143 @each $dir, $prop in (is: inline-size, bs: block-size) {
144 @include iro.bem-utility('#{$dir}-100') {
145 #{$prop}: 100%;
146 }
147
148 @include iro.bem-utility('#{$dir}-75') {
149 #{$prop}: 75%;
150 }
151
152 @include iro.bem-utility('#{$dir}-50') {
153 #{$prop}: 50%;
154 }
155
156 @include iro.bem-utility('#{$dir}-25') {
157 #{$prop}: 25%;
158 }
159
160 @include iro.bem-utility('#{$dir}-1px') {
161 #{$prop}: 1px;
162 }
163
164 @include iro.bem-utility('#{$dir}-0') {
165 #{$prop}: 0;
166 }
167 }
168
169 @include iro.bem-utility('elp') {
170 overflow: hidden;
171 text-overflow: ellipsis;
172 white-space: nowrap;
173 }
174
175 @include iro.bem-utility('p-static') {
176 position: static;
177 }
178
179 @include iro.bem-utility('p-relative') {
180 position: relative;
181 }
182
183 @include iro.bem-utility('p-fixed') {
184 position: fixed;
185 }
186
187 @include iro.bem-utility('p-sticky-bs') {
188 position: sticky;
189 inset-block-start: 0;
190 }
191
192 @each $dir, $suffix in $-dirs {
193 @include iro.bem-utility('m#{$dir}-auto') {
194 margin#{$suffix}: auto;
195 }
196
197 @include iro.bem-utility('p#{$dir}-auto') {
198 padding#{$suffix}: auto;
199 }
200
201 @each $mod, $size in $-sizes {
202 @include iro.bem-utility('m#{$dir}-#{$mod}') {
203 margin#{$suffix}: props.get($size);
204 }
205
206 @include iro.bem-utility('p#{$dir}-#{$mod}') {
207 padding#{$suffix}: props.get($size);
208 }
209 }
210
211 @include iro.bem-utility('b#{$dir}-0') {
212 border#{$suffix}: 0;
213
214 @include iro.bem-suffix('light') {
215 @media (prefers-color-scheme: light) {
216 border#{$suffix}: 0;
217 }
218 }
219
220 @include iro.bem-suffix('dark') {
221 @media (prefers-color-scheme: dark) {
222 border#{$suffix}: 0;
223 }
224 }
225 }
226
227 @include iro.bem-utility('b#{$dir}-1') {
228 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
229
230 @include iro.bem-suffix('light') {
231 @media (prefers-color-scheme: light) {
232 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
233 }
234 }
235
236 @include iro.bem-suffix('dark') {
237 @media (prefers-color-scheme: dark) {
238 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
239 }
240 }
241 }
242 }
243
244 @include iro.bem-utility('mbs-neutralize') {
245 &::before {
246 display: block;
247 margin-block: -100em 100em;
248 content: '';
249 }
250 }
251}
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 4c9603c..9049a8f 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -111,7 +112,7 @@ $default-theme: map.deep-merge((
111$default-theme: props.def(--o-action-button, $default-theme); 112$default-theme: props.def(--o-action-button, $default-theme);
112 113
113@each $theme in map.keys(props.get(core.$transparent-colors)) { 114@each $theme in map.keys(props.get(core.$transparent-colors)) {
114 $button-theme: #{$theme}-static; 115 $button-theme: --static-#{string.slice($theme, 3)};
115 116
116 $themes: props.merge($themes, ( 117 $themes: props.merge($themes, (
117 $button-theme: ( 118 $button-theme: (
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index 9254c83..f9a4ed5 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -76,7 +77,7 @@ $default-theme: props.merge($default-theme, $default-theme-override);
76$static-themes: props.def(--o-badge); 77$static-themes: props.def(--o-badge);
77 78
78@each $theme in map.keys(props.get(core.$transparent-colors)) { 79@each $theme in map.keys(props.get(core.$transparent-colors)) {
79 $badge-theme: #{$theme}-static; 80 $badge-theme: --static-#{string.slice($theme, 3)};
80 81
81 $static-themes: props.merge($static-themes, ( 82 $static-themes: props.merge($static-themes, (
82 $badge-theme: ( 83 $badge-theme: (
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 237cb79..7640e57 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -86,7 +87,7 @@ $default-theme: props.merge($default-theme, $default-theme-override);
86$static-themes: props.def(--o-button); 87$static-themes: props.def(--o-button);
87 88
88@each $theme in map.keys(props.get(core.$transparent-colors)) { 89@each $theme in map.keys(props.get(core.$transparent-colors)) {
89 $button-theme: #{$theme}-static; 90 $button-theme: --static-#{string.slice($theme, 3)};
90 91
91 $static-themes: props.merge($static-themes, ( 92 $static-themes: props.merge($static-themes, (
92 $button-theme: ( 93 $button-theme: (
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 09e734f..01c4b92 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -25,7 +26,7 @@ $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$
25$static-themes: props.def(--o-divider); 26$static-themes: props.def(--o-divider);
26 27
27@each $theme in map.keys(props.get(core.$transparent-colors)) { 28@each $theme in map.keys(props.get(core.$transparent-colors)) {
28 $button-theme: #{$theme}-static; 29 $button-theme: --static-#{string.slice($theme, 3)};
29 30
30 $static-themes: props.merge($static-themes, ( 31 $static-themes: props.merge($static-themes, (
31 $button-theme: ( 32 $button-theme: (
@@ -52,8 +53,8 @@ $themes: props.def(--o-divider);
52@each $theme in $themes-config { 53@each $theme in $themes-config {
53 $themes: props.merge($themes, ( 54 $themes: props.merge($themes, (
54 $theme: ( 55 $theme: (
55 --bg: props.get(core.$static-colors, $theme, --800), 56 --bg: props.get(core.$theme, $theme, --800),
56 --label: props.get(core.$static-colors, $theme, --1000), 57 --label: props.get(core.$theme, $theme, --1000),
57 ) 58 )
58 )); 59 ));
59} 60}
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 31a2406..58b4d74 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -27,28 +27,28 @@ $letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
27$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 27$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
28 28
29$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; 29$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
30$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; 30$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--headline--line-height)) !default;
31$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; 31$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
32$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; 32$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
33$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; 33$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
34$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 34$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
35 35
36$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; 36$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
37$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; 37$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--headline--line-height)) !default;
38$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; 38$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
39$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; 39$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
40$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; 40$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
41$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 41$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
42 42
43$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; 43$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
44$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; 44$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--headline--line-height)) !default;
45$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; 45$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
46$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; 46$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default;
47$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; 47$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default;
48$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 48$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
49 49
50$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; 50$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
51$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; 51$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--headline--line-height)) !default;
52$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; 52$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
53$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; 53$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default;
54$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; 54$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
@@ -92,14 +92,14 @@ $display--letter-spacing--md: props.def(--o-heading--display--md--letter-spaci
92$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 92$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
93 93
94$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; 94$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
95$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; 95$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--headline--line-height)) !default;
96$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; 96$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
97$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; 97$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
98$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; 98$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
99$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 99$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
100 100
101$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; 101$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
102$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; 102$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--headline--line-height)) !default;
103$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; 103$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
104$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; 104$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default;
105$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; 105$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 32324a4..3906716 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -37,7 +38,7 @@ $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, pr
37$static-themes: props.def(--o-lightbox); 38$static-themes: props.def(--o-lightbox);
38 39
39@each $theme in map.keys(props.get(core.$transparent-colors)) { 40@each $theme in map.keys(props.get(core.$transparent-colors)) {
40 $lightbox-theme: #{$theme}-static; 41 $lightbox-theme: --static-#{string.slice($theme, 3)};
41 42
42 $static-themes: props.merge($static-themes, ( 43 $static-themes: props.merge($static-themes, (
43 $lightbox-theme: ( 44 $lightbox-theme: (
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index c4f8e96..d83b297 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -2,7 +2,7 @@
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:string'; 3@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/iro-sass' as iro;
5@use '../themes'; 5@use '../config';
6@use '../props'; 6@use '../props';
7@use '../core.vars' as core; 7@use '../core.vars' as core;
8 8
@@ -14,8 +14,8 @@
14 @include iro.bem-elem('item') { 14 @include iro.bem-elem('item') {
15 flex: 1 1 auto; 15 flex: 1 1 auto;
16 16
17 $palette: map.get(themes.$themes, themes.$theme-default, light, --palettes, --base); 17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
18 $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); 18 $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
19 19
20 @for $i from 1 through list.length($contrasts) { 20 @for $i from 1 through list.length($contrasts) {
21 $key: list.nth(map.keys($contrasts), $i); 21 $key: list.nth(map.keys($contrasts), $i);
@@ -26,8 +26,8 @@
26 } 26 }
27 } 27 }
28 28
29 @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) { 29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
30 $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); 30 $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
31 31
32 @include iro.bem-modifier(string.slice($palette-name, 3)) { 32 @include iro.bem-modifier(string.slice($palette-name, 3)) {
33 @include iro.bem-elem('item') { 33 @include iro.bem-elem('item') {
@@ -43,8 +43,8 @@
43 } 43 }
44 44
45 @include iro.bem-modifier('static') { 45 @include iro.bem-modifier('static') {
46 @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) { 46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
47 $contrasts: map.get(themes.$static-colors, --contrasts); 47 $contrasts: map.get(config.$static-colors, --contrasts);
48 48
49 @include iro.bem-modifier(string.slice($palette-name, 3)) { 49 @include iro.bem-modifier(string.slice($palette-name, 3)) {
50 @include iro.bem-elem('item') { 50 @include iro.bem-elem('item') {
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index 1d0a06a..d83194f 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use '../props'; 2@use '../props';
3@use '../themes' as themes; 3@use '../config';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; 6$size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default;
@@ -8,7 +8,7 @@ $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !defaul
8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; 8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default;
9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; 9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default;
10 10
11$themes-config: map.keys(map.get(themes.$themes, themes.$theme-default, light, --palettes)) !default; 11$themes-config: map.keys(map.get(config.$themes, config.$theme-default, light, --palettes)) !default;
12 12
13$themes: props.def(--o-status-indicator); 13$themes: props.def(--o-status-indicator);
14 14
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index fa903b1..5383432 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,90 +1,50 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
4@use '../core.vars' as core;
3 5
4@include iro.props-namespace('switch') { 6@forward 'switch.vars';
5 @include iro.props-store(( 7@use 'switch.vars' as vars;
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 8
16 --key-focus: ( 9@mixin styles {
17 --border: fn.global-dim(--key-focus --border), 10 @include props.materialize(meta.module-variables('vars'));
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 11
52 @include iro.bem-object(iro.props-namespace()) { 12 @include iro.bem-object('switch') {
53 position: relative; 13 position: relative;
54 display: inline-block; 14 display: inline-block;
55 padding-block: fn.dim(--pad-b); 15 padding-block: props.get(vars.$pad-b);
56 padding-inline: fn.dim(--pad-i); 16 padding-inline: props.get(vars.$pad-i);
57 margin-inline: 17 margin-inline:
58 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) 18 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
59 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); 19 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
60 20
61 @include iro.bem-elem('indicator') { 21 @include iro.bem-elem('indicator') {
62 display: inline-block; 22 display: inline-block;
63 flex: 0 0 auto; 23 flex: 0 0 auto;
64 inline-size: fn.dim(--width); 24 inline-size: props.get(vars.$inline-size);
65 block-size: fn.dim(--height); 25 block-size: props.get(vars.$block-size);
66 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset)); 26 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
67 vertical-align: top; 27 vertical-align: top;
68 background-color: fn.color(--track-bg); 28 background-color: props.get(vars.$track-bg-color);
69 background-clip: padding-box; 29 background-clip: padding-box;
70 border: fn.dim(--key-focus --border-offset) solid transparent; 30 border: props.get(vars.$key-focus--border-offset) solid transparent;
71 border-radius: 2em; 31 border-radius: 2em;
72 transition: background-color .2s ease; 32 transition: background-color .2s ease;
73 33
74 &::after { 34 &::after {
75 display: block; 35 display: block;
76 inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); 36 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
77 block-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); 37 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
78 content: ''; 38 content: '';
79 background-color: fn.color(--handle-bg); 39 background-color: props.get(vars.$handle-bg-color);
80 border: fn.dim(--border) solid fn.color(--handle-border); 40 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
81 border-radius: fn.dim(--width); 41 border-radius: props.get(vars.$inline-size);
82 transition: transform .2s ease; 42 transition: transform .2s ease;
83 } 43 }
84 } 44 }
85 45
86 @include iro.bem-elem('label') { 46 @include iro.bem-elem('label') {
87 margin-inline-start: fn.dim(--label-gap); 47 margin-inline-start: props.get(vars.$label-gap);
88 } 48 }
89 49
90 @include iro.bem-elem('native') { 50 @include iro.bem-elem('native') {
@@ -98,38 +58,38 @@
98 margin: 0; 58 margin: 0;
99 overflow: hidden; 59 overflow: hidden;
100 appearance: none; 60 appearance: none;
101 border-radius: fn.dim(--rounding); 61 border-radius: props.get(vars.$rounding);
102 62
103 &:hover, 63 &:hover,
104 &:focus-visible { 64 &:focus-visible {
105 @include iro.bem-sibling-elem('label') { 65 @include iro.bem-sibling-elem('label') {
106 color: fn.color(--hover --label); 66 color: props.get(vars.$hover--label-color);
107 } 67 }
108 68
109 @include iro.bem-sibling-elem('indicator') { 69 @include iro.bem-sibling-elem('indicator') {
110 &::after { 70 &::after {
111 border-color: fn.color(--hover --handle-border); 71 border-color: props.get(vars.$hover--handle-border-color);
112 } 72 }
113 } 73 }
114 } 74 }
115 75
116 &:checked { 76 &:checked {
117 @include iro.bem-sibling-elem('indicator') { 77 @include iro.bem-sibling-elem('indicator') {
118 background-color: fn.color(--handle-border); 78 background-color: props.get(vars.$handle-border-color);
119 79
120 &::after { 80 &::after {
121 border-color: fn.color(--handle-border); 81 border-color: props.get(vars.$handle-border-color);
122 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); 82 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
123 } 83 }
124 } 84 }
125 85
126 &:hover, 86 &:hover,
127 &:focus-visible { 87 &:focus-visible {
128 @include iro.bem-sibling-elem('indicator') { 88 @include iro.bem-sibling-elem('indicator') {
129 background-color: fn.color(--hover --handle-border); 89 background-color: props.get(vars.$hover--handle-border-color);
130 90
131 &::after { 91 &::after {
132 border-color: fn.color(--hover --handle-border); 92 border-color: props.get(vars.$hover--handle-border-color);
133 } 93 }
134 } 94 }
135 } 95 }
@@ -137,24 +97,24 @@
137 97
138 &:disabled { 98 &:disabled {
139 @include iro.bem-sibling-elem('label') { 99 @include iro.bem-sibling-elem('label') {
140 color: fn.color(--disabled --label); 100 color: props.get(vars.$disabled--label-color);
141 } 101 }
142 102
143 @include iro.bem-sibling-elem('indicator') { 103 @include iro.bem-sibling-elem('indicator') {
144 background-color: fn.color(--disabled --track-bg); 104 background-color: props.get(vars.$disabled--track-bg-color);
145 105
146 &::after { 106 &::after {
147 background-color: fn.color(--disabled --handle-bg); 107 background-color: props.get(vars.$disabled--handle-bg-color);
148 border-color: fn.color(--disabled --handle-border); 108 border-color: props.get(vars.$disabled--handle-border-color);
149 } 109 }
150 } 110 }
151 111
152 &:checked { 112 &:checked {
153 @include iro.bem-sibling-elem('indicator') { 113 @include iro.bem-sibling-elem('indicator') {
154 background-color: fn.color(--disabled --handle-border); 114 background-color: props.get(vars.$disabled--handle-border-color);
155 115
156 &::after { 116 &::after {
157 border-color: fn.color(--disabled --handle-border); 117 border-color: props.get(vars.$disabled--handle-border-color);
158 } 118 }
159 } 119 }
160 } 120 }
@@ -162,12 +122,17 @@
162 122
163 &:focus-visible { 123 &:focus-visible {
164 @include iro.bem-sibling-elem('label') { 124 @include iro.bem-sibling-elem('label') {
165 color: fn.color(--key-focus --label); 125 color: props.get(vars.$key-focus--label-color);
166 } 126 }
167 127
168 @include iro.bem-sibling-elem('indicator') { 128 @include iro.bem-sibling-elem('indicator') {
169 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 129 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
170 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 130 box-shadow:
131 0
132 0
133 0
134 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
135 props.get(vars.$key-focus--outline-color);
171 } 136 }
172 } 137 }
173 } 138 }
@@ -182,20 +147,20 @@
182 @include iro.bem-elem('native') { 147 @include iro.bem-elem('native') {
183 &:checked { 148 &:checked {
184 @include iro.bem-sibling-elem('indicator') { 149 @include iro.bem-sibling-elem('indicator') {
185 background-color: fn.color(--accent --handle-border); 150 background-color: props.get(vars.$accent--handle-border-color);
186 151
187 &::after { 152 &::after {
188 border-color: fn.color(--accent --handle-border); 153 border-color: props.get(vars.$accent--handle-border-color);
189 } 154 }
190 } 155 }
191 156
192 &:hover, 157 &:hover,
193 &:focus-visible { 158 &:focus-visible {
194 @include iro.bem-sibling-elem('indicator') { 159 @include iro.bem-sibling-elem('indicator') {
195 background-color: fn.color(--accent --hover --handle-border); 160 background-color: props.get(vars.$accent--hover--handle-border-color);
196 161
197 &::after { 162 &::after {
198 border-color: fn.color(--accent --hover --handle-border); 163 border-color: props.get(vars.$accent--hover--handle-border-color);
199 } 164 }
200 } 165 }
201 } 166 }
@@ -203,15 +168,15 @@
203 168
204 &:disabled { 169 &:disabled {
205 @include iro.bem-sibling-elem('label') { 170 @include iro.bem-sibling-elem('label') {
206 color: fn.color(--disabled --label); 171 color: props.get(vars.$disabled--label-color);
207 } 172 }
208 173
209 &:checked { 174 &:checked {
210 @include iro.bem-sibling-elem('indicator') { 175 @include iro.bem-sibling-elem('indicator') {
211 background-color: fn.color(--disabled --handle-border); 176 background-color: props.get(vars.$disabled--handle-border-color);
212 177
213 &::after { 178 &::after {
214 border-color: fn.color(--disabled --handle-border); 179 border-color: props.get(vars.$disabled--handle-border-color);
215 } 180 }
216 } 181 }
217 } 182 }
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
new file mode 100644
index 0000000..118291d
--- /dev/null
+++ b/src/objects/_switch.vars.scss
@@ -0,0 +1,37 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
6$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default;
7$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default;
8$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
9$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
10$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
11$rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default;
12$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
13
14$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
15$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
16$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
17
18$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border)) !default;
19$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more)) !default;
20$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50)) !default;
21
22$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading)) !default;
23$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute)) !default;
24
25$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900)) !default;
26
27$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000)) !default;
28
29$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled)) !default;
30$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border)) !default;
31$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong)) !default;
32$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50)) !default;
33
34$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
35$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
36$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
37
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 5b16d66..d5b5545 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,33 +1,14 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
3@use '../mixins' as mx;
4 4
5@include iro.props-namespace('table') { 5@forward 'table.vars';
6 @include iro.props-store(( 6@use 'table.vars' as vars;
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 7
13 --sm: ( 8@mixin styles {
14 --pad-b: fn.global-dim(--size --75), 9 @include props.materialize(meta.module-variables('vars'));
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 10
30 @include iro.bem-object(iro.props-namespace()) { 11 @include iro.bem-object('table') {
31 border-spacing: 0; 12 border-spacing: 0;
32 border-collapse: separate; 13 border-collapse: separate;
33 14
@@ -36,37 +17,34 @@
36 } 17 }
37 18
38 @include iro.bem-elem('head-cell') { 19 @include iro.bem-elem('head-cell') {
39 @include mx.set-font(--standard, ( 20 padding-block: props.get(vars.$pad-b);
40 --line-height: null, 21 padding-inline: props.get(vars.$pad-i);
41 --size: fn.global-dim(--font-size --50), 22 font-family: props.get(vars.$heading--font-family);
42 --weight: bold, 23 font-size: props.get(vars.$heading--font-size);
43 --transform: uppercase, 24 font-weight: props.get(vars.$heading--font-weight);
44 --spacing: .5px 25 color: props.get(vars.$heading-color);
45 ));
46 padding-block: fn.dim(--pad-b);
47
48 padding-inline: fn.dim(--pad-i);
49 color: fn.color(--heading);
50 text-align: start; 26 text-align: start;
27 text-transform: props.get(vars.$heading--text-transform);
28 letter-spacing: props.get(vars.$heading--letter-spacing);
51 } 29 }
52 30
53 @include iro.bem-elem('cell') { 31 @include iro.bem-elem('cell') {
54 padding-block: fn.dim(--pad-b); 32 padding-block: props.get(vars.$pad-b);
55 padding-inline: fn.dim(--pad-i); 33 padding-inline: props.get(vars.$pad-i);
56 border-color: fn.color(--border); 34 border-color: props.get(vars.$border-color);
57 border-style: solid; 35 border-style: solid;
58 border-width: 0; 36 border-width: 0;
59 border-block-start-width: fn.dim(--border); 37 border-block-start-width: props.get(vars.$border-width);
60 38
61 @include iro.bem-modifier('divider') { 39 @include iro.bem-modifier('divider') {
62 border-inline-end-width: fn.dim(--border); 40 border-inline-end-width: props.get(vars.$border-width);
63 } 41 }
64 } 42 }
65 43
66 @include iro.bem-elem('row') { 44 @include iro.bem-elem('row') {
67 &:last-child { 45 &:last-child {
68 @include iro.bem-elem('cell') { 46 @include iro.bem-elem('cell') {
69 border-block-end-width: fn.dim(--border); 47 border-block-end-width: props.get(vars.$border-width);
70 } 48 }
71 } 49 }
72 } 50 }
@@ -85,14 +63,14 @@
85 63
86 @include iro.bem-modifier('box') { 64 @include iro.bem-modifier('box') {
87 @include iro.bem-elem('cell') { 65 @include iro.bem-elem('cell') {
88 background-color: fn.color(--box --bg); 66 background-color: props.get(vars.$box--bg-color);
89 67
90 &:first-child { 68 &:first-child {
91 border-inline-start-width: fn.dim(--border); 69 border-inline-start-width: props.get(vars.$border-width);
92 } 70 }
93 71
94 &:last-child { 72 &:last-child {
95 border-inline-end-width: fn.dim(--border); 73 border-inline-end-width: props.get(vars.$border-width);
96 } 74 }
97 } 75 }
98 76
@@ -100,11 +78,11 @@
100 &:first-child { 78 &:first-child {
101 @include iro.bem-elem('cell') { 79 @include iro.bem-elem('cell') {
102 &:first-child { 80 &:first-child {
103 border-start-start-radius: fn.dim(--rounding); 81 border-start-start-radius: props.get(vars.$rounding);
104 } 82 }
105 83
106 &:last-child { 84 &:last-child {
107 border-start-end-radius: fn.dim(--rounding); 85 border-start-end-radius: props.get(vars.$rounding);
108 } 86 }
109 } 87 }
110 } 88 }
@@ -112,11 +90,11 @@
112 &:last-child { 90 &:last-child {
113 @include iro.bem-elem('cell') { 91 @include iro.bem-elem('cell') {
114 &:first-child { 92 &:first-child {
115 border-end-start-radius: fn.dim(--rounding); 93 border-end-start-radius: props.get(vars.$rounding);
116 } 94 }
117 95
118 &:last-child { 96 &:last-child {
119 border-end-end-radius: fn.dim(--rounding); 97 border-end-end-radius: props.get(vars.$rounding);
120 } 98 }
121 } 99 }
122 } 100 }
@@ -131,13 +109,13 @@
131 109
132 &:hover { 110 &:hover {
133 @include iro.bem-elem('cell') { 111 @include iro.bem-elem('cell') {
134 background-color: fn.color(--hover); 112 background-color: props.get(vars.$hover--bg-color);
135 } 113 }
136 } 114 }
137 115
138 &:active { 116 &:active {
139 @include iro.bem-elem('cell') { 117 @include iro.bem-elem('cell') {
140 background-color: fn.color(--active); 118 background-color: props.get(vars.$active--bg-color);
141 } 119 }
142 } 120 }
143 } 121 }
@@ -146,13 +124,13 @@
146 @include iro.bem-elem('row') { 124 @include iro.bem-elem('row') {
147 &:hover { 125 &:hover {
148 @include iro.bem-elem('cell') { 126 @include iro.bem-elem('cell') {
149 background-color: fn.color(--box --hover); 127 background-color: props.get(vars.$box--hover--bg-color);
150 } 128 }
151 } 129 }
152 130
153 &:active { 131 &:active {
154 @include iro.bem-elem('cell') { 132 @include iro.bem-elem('cell') {
155 background-color: fn.color(--box --active); 133 background-color: props.get(vars.$box--active--bg-color);
156 } 134 }
157 } 135 }
158 } 136 }
@@ -161,7 +139,7 @@
161 139
162 @include iro.bem-modifier('sm') { 140 @include iro.bem-modifier('sm') {
163 @include iro.bem-elem('head-cell', 'cell') { 141 @include iro.bem-elem('head-cell', 'cell') {
164 padding-block: fn.dim(--sm --pad-b); 142 padding-block: props.get(vars.$pad-b--sm);
165 } 143 }
166 } 144 }
167 } 145 }
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
new file mode 100644
index 0000000..df97e17
--- /dev/null
+++ b/src/objects/_table.vars.scss
@@ -0,0 +1,25 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
6$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
7$rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default;
8$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
9
10$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
11$heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default;
12$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default;
13$heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default;
14$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default;
15
16$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default;
17
18$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border)) !default;
19$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading)) !default;
20$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute)) !default;
21$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border)) !default;
22
23$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50)) !default;
24$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base)) !default;
25$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute)) !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index cfb5a6d..793d23a 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,100 +1,51 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
3 4
4@mixin invalid { 5@forward 'text-field.vars';
5 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); 6@use 'text-field.vars' as vars;
7
8@mixin -invalid {
9 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
6 10
7 @include iro.bem-sibling-elem('bg') { 11 @include iro.bem-sibling-elem('bg') {
8 inset-block: $focus-border-offset; 12 inset-block: $focus-border-offset;
9 inset-inline: $focus-border-offset; 13 inset-inline: $focus-border-offset;
10 border: fn.dim(--focus --border) solid fn.color(--error --border); 14 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
11 border-radius: calc(fn.dim(--rounding) - $focus-border-offset); 15 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
12 } 16 }
13 17
14 &:hover { 18 &:hover {
15 @include iro.bem-sibling-elem('bg') { 19 @include iro.bem-sibling-elem('bg') {
16 border-color: fn.color(--error --hover --border); 20 border-color: props.get(vars.$error--hover--border-color);
17 } 21 }
18 } 22 }
19 23
20 &:focus { 24 &:focus {
21 @include iro.bem-sibling-elem('bg') { 25 @include iro.bem-sibling-elem('bg') {
22 border-color: fn.color(--error --focus --border); 26 border-color: props.get(vars.$error--focus--border-color);
23 } 27 }
24 } 28 }
25} 29}
26 30
27@mixin keyboard-focus { 31@mixin -keyboard-focus {
28 @include iro.bem-sibling-elem('bg') { 32 @include iro.bem-sibling-elem('bg') {
29 border-color: fn.color(--key-focus --border); 33 border-color: props.get(vars.$key-focus--border-color);
30 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border); 34 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
31 //outline-offset: fn.dim(--focus --border); 35 //outline-offset: props.get(vars.$focus --border);
32 } 36 }
33} 37}
34 38
35@include iro.props-namespace('text-field') { 39@mixin styles {
36 @include iro.props-store(( 40 @include props.materialize(meta.module-variables('vars'));
37 --dims: ( 41
38 --line-height: 1.4, 42 @include iro.bem-object('text-field') {
39 --pad-i: fn.global-dim(--size --125), 43 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
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 44
94 position: relative; 45 position: relative;
95 min-inline-size: 0; 46 min-inline-size: 0;
96 background-color: fn.color(--bg); 47 background-color: props.get(vars.$bg-color);
97 border-radius: fn.dim(--rounding); 48 border-radius: props.get(vars.$rounding);
98 49
99 @include iro.bem-elem('bg') { 50 @include iro.bem-elem('bg') {
100 position: absolute; 51 position: absolute;
@@ -102,18 +53,18 @@
102 inset-inline: 0; 53 inset-inline: 0;
103 display: block; 54 display: block;
104 pointer-events: none; 55 pointer-events: none;
105 border: fn.dim(--border) solid fn.color(--border); 56 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
106 border-radius: fn.dim(--rounding); 57 border-radius: props.get(vars.$rounding);
107 } 58 }
108 59
109 @include iro.bem-elem('native') { 60 @include iro.bem-elem('native') {
110 box-sizing: border-box; 61 box-sizing: border-box;
111 inline-size: 100%; 62 inline-size: 100%;
112 padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); 63 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
113 padding-inline: fn.dim(--pad-i); 64 padding-inline: props.get(vars.$pad-i);
114 font: inherit; 65 font: inherit;
115 line-height: fn.dim(--line-height); 66 line-height: props.get(vars.$line-height);
116 color: fn.color(--text); 67 color: props.get(vars.$text-color);
117 appearance: none; 68 appearance: none;
118 resize: none; 69 resize: none;
119 background-color: transparent; 70 background-color: transparent;
@@ -121,13 +72,13 @@
121 72
122 &::placeholder { 73 &::placeholder {
123 font-style: italic; 74 font-style: italic;
124 color: fn.color(--placeholder); 75 color: props.get(vars.$placeholder-color);
125 opacity: 1; 76 opacity: 1;
126 } 77 }
127 78
128 &:hover { 79 &:hover {
129 @include iro.bem-sibling-elem('bg') { 80 @include iro.bem-sibling-elem('bg') {
130 border-color: fn.color(--hover --border); 81 border-color: props.get(vars.$hover--border-color);
131 } 82 }
132 } 83 }
133 84
@@ -137,32 +88,32 @@
137 @include iro.bem-sibling-elem('bg') { 88 @include iro.bem-sibling-elem('bg') {
138 inset-block: $focus-border-offset; 89 inset-block: $focus-border-offset;
139 inset-inline: $focus-border-offset; 90 inset-inline: $focus-border-offset;
140 border: fn.dim(--focus --border) solid fn.color(--focus --border); 91 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
141 border-radius: calc(fn.dim(--rounding) - $focus-border-offset); 92 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
142 } 93 }
143 } 94 }
144 95
145 &:invalid { 96 &:invalid {
146 @include invalid; 97 @include -invalid;
147 } 98 }
148 99
149 &:focus-visible, 100 &:focus-visible,
150 &:invalid:focus-visible { 101 &:invalid:focus-visible {
151 @include keyboard-focus; 102 @include -keyboard-focus;
152 } 103 }
153 } 104 }
154 105
155 @include iro.bem-modifier('extended') { 106 @include iro.bem-modifier('extended') {
156 padding: fn.dim(--extended --pad); 107 padding: props.get(vars.$extended--pad);
157 108
158 @include iro.bem-multi('&', 'elem' 'bg') { 109 @include iro.bem-multi('&', 'elem' 'bg') {
159 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); 110 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
160 } 111 }
161 112
162 @include iro.bem-elem('native') { 113 @include iro.bem-elem('native') {
163 &:focus { 114 &:focus {
164 @include iro.bem-sibling-elem('bg') { 115 @include iro.bem-sibling-elem('bg') {
165 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); 116 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
166 } 117 }
167 } 118 }
168 } 119 }
@@ -170,33 +121,33 @@
170 121
171 @include iro.bem-is('invalid') { 122 @include iro.bem-is('invalid') {
172 @include iro.bem-elem('native') { 123 @include iro.bem-elem('native') {
173 @include invalid; 124 @include -invalid;
174 125
175 &:focus-visible { 126 &:focus-visible {
176 @include keyboard-focus; 127 @include -keyboard-focus;
177 } 128 }
178 } 129 }
179 } 130 }
180 131
181 @include iro.bem-is('disabled') { 132 @include iro.bem-is('disabled') {
182 background-color: fn.color(--disabled --bg); 133 background-color: props.get(vars.$disabled--bg-color);
183 134
184 @include iro.bem-elem('native') { 135 @include iro.bem-elem('native') {
185 color: fn.color(--disabled --text); 136 color: props.get(vars.$disabled--text-color);
186 137
187 &::placeholder { 138 &::placeholder {
188 color: fn.color(--disabled --placeholder); 139 color: props.get(vars.$disabled--placeholder-color);
189 } 140 }
190 } 141 }
191 142
192 @include iro.bem-elem('bg') { 143 @include iro.bem-elem('bg') {
193 border-color: fn.color(--disabled --border); 144 border-color: props.get(vars.$disabled--border-color);
194 } 145 }
195 146
196 @include iro.bem-is('invalid') { 147 @include iro.bem-is('invalid') {
197 @include iro.bem-elem('native') { 148 @include iro.bem-elem('native') {
198 @include iro.bem-sibling-elem('bg') { 149 @include iro.bem-sibling-elem('bg') {
199 border-color: fn.color(--disabled --border); 150 border-color: props.get(vars.$disabled--border-color);
200 } 151 }
201 } 152 }
202 } 153 }
@@ -204,7 +155,7 @@
204 @include iro.bem-elem('native') { 155 @include iro.bem-elem('native') {
205 &:invalid { 156 &:invalid {
206 @include iro.bem-sibling-elem('bg') { 157 @include iro.bem-sibling-elem('bg') {
207 border-color: fn.color(--disabled --border); 158 border-color: props.get(vars.$disabled--border-color);
208 } 159 }
209 } 160 }
210 } 161 }
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
new file mode 100644
index 0000000..3d0ef2d
--- /dev/null
+++ b/src/objects/_text-field.vars.scss
@@ -0,0 +1,38 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$line-height: props.def(--o-text-field--line-height, 1.4) !default;
6$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
7$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
8$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
9$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default;
10
11$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
12
13$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
14
15$key-focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$key-focus--outline-width)) !default;
16
17$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --bg)) !default;
18$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more)) !default;
19$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text)) !default;
20$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong)) !default;
21
22$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more)) !default;
23
24$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border)) !default;
25
26$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
27$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
28
29$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700)) !default;
30
31$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900)) !default;
32
33$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900)) !default;
34
35$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute)) !default;
36$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled)) !default;
37$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled)) !default;
38$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute)) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 2bf7b08..f6f62c3 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,7 +1,7 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
3@use '../props'; 3@use '../props';
4@use '../objects/heading.vars' as headings; 4@use '../objects/heading.vars' as heading;
5 5
6@mixin styles { 6@mixin styles {
7 /* stylelint-disable-next-line scss/dollar-variable-pattern */ 7 /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -22,25 +22,25 @@
22 h5, 22 h5,
23 h6 { 23 h6 {
24 display: block; 24 display: block;
25 margin-block-start: props.get(headings.$margin-bs); 25 margin-block-start: props.get(heading.$margin-bs);
26 font-family: props.get(headings.$font-family); 26 font-family: props.get(heading.$font-family);
27 font-weight: props.get(headings.$font-weight); 27 font-weight: props.get(heading.$font-weight);
28 font-feature-settings: props.get(headings.$feature-settings); 28 font-feature-settings: props.get(heading.$feature-settings);
29 line-height: props.get(headings.$line-height); 29 line-height: props.get(heading.$line-height);
30 text-transform: none; 30 text-transform: none;
31 letter-spacing: normal; 31 letter-spacing: normal;
32 transform: translateX(props.get(headings.$offset)); 32 transform: translateX(props.get(heading.$offset));
33 } 33 }
34 34
35 @include iro.bem-elem('highlight') { 35 @include iro.bem-elem('highlight') {
36 background-image: linear-gradient(to top, 36 background-image: linear-gradient(to top,
37 transparent .15em, 37 transparent .15em,
38 props.get(headings.$bg-color) .15em, 38 props.get(heading.$bg-color) .15em,
39 props.get(headings.$bg-color) .6em, 39 props.get(heading.$bg-color) .6em,
40 transparent .6em); 40 transparent .6em);
41 } 41 }
42 42
43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes { 43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
44 #{map.get($-size-map, $mod)} { 44 #{map.get($-size-map, $mod)} {
45 font-family: props.get($font-family); 45 font-family: props.get($font-family);
46 font-size: props.get($font-size); 46 font-size: props.get($font-size);
@@ -52,7 +52,7 @@
52 } 52 }
53 53
54 @include iro.bem-modifier('display') { 54 @include iro.bem-modifier('display') {
55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes { 55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
56 #{map.get($-size-map, $mod)} { 56 #{map.get($-size-map, $mod)} {
57 font-family: props.get($font-family); 57 font-family: props.get($font-family);
58 font-size: props.get($font-size); 58 font-size: props.get($font-size);
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 7909943..4bb3482 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -21,12 +21,14 @@
21 } 21 }
22 22
23 body { 23 body {
24 //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); 24 padding: 0;
25 25 margin: 0;
26 padding: 0; 26 font-family: props.get(vars.$body--font-family);
27 margin: 0; 27 font-size: props.get(vars.$body--font-size);
28 color: props.get(core.$theme, --text); 28 font-feature-settings: props.get(vars.$body--feature-settings);
29 background-color: props.get(core.$theme, --bg-base); 29 line-height: props.get(vars.$body--line-height);
30 color: props.get(core.$theme, --text);
31 background-color: props.get(core.$theme, --bg-base);
30 } 32 }
31 33
32 pre, 34 pre,
@@ -55,6 +57,7 @@
55 h6 { 57 h6 {
56 margin-block: props.get(vars.$heading--margin-bs) 0; 58 margin-block: props.get(vars.$heading--margin-bs) 0;
57 font-family: props.get(vars.$heading--font-family); 59 font-family: props.get(vars.$heading--font-family);
60 font-size: props.get(vars.$heading--font-size);
58 font-weight: props.get(vars.$heading--font-weight); 61 font-weight: props.get(vars.$heading--font-weight);
59 font-feature-settings: props.get(vars.$heading--feature-settings); 62 font-feature-settings: props.get(vars.$heading--feature-settings);
60 line-height: props.get(vars.$heading--line-height); 63 line-height: props.get(vars.$heading--line-height);
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 80e2f67..f0eb45d 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -5,6 +5,11 @@ $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(c
5 5
6$small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default; 6$small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default;
7 7
8$body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default;
9$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default;
10$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100));
11$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
12
8$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default; 13$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default;
9$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default; 14$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default;
10$code--font-size: props.def(--s-implicit--code--font-size, .93em); 15$code--font-size: props.def(--s-implicit--code--font-size, .93em);
@@ -13,6 +18,7 @@ $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.g
13$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; 18$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
14$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; 19$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
15$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default; 20$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default;
16$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--headline--line-height)) !default; 21$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default;
17$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; 22$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default;
23$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
18$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 24$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index 4bf80c0..4c6cc5d 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -26,7 +27,7 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.
26 27
27$static-themes: props.def(--s-links); 28$static-themes: props.def(--s-links);
28@each $theme in map.keys(props.get(core.$transparent-colors)) { 29@each $theme in map.keys(props.get(core.$transparent-colors)) {
29 $link-theme: #{$theme}-static; 30 $link-theme: --static-#{string.slice($theme, 3)};
30 31
31 $static-themes: props.merge($static-themes, ( 32 $static-themes: props.merge($static-themes, (
32 $link-theme: ( 33 $link-theme: (
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index f722864..f285207 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,49 +1,44 @@
1@use 'sass:meta'; 1@use 'sass:map';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
3@use '../functions' as fn; 3@use '../props';
4@use '../mixins' as mx; 4@use '../objects/table.vars' as table;
5 5
6@forward 'lists.vars'; 6@forward 'tables.vars';
7@use 'lists.vars' as vars; 7@use 'tables.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include props.materialize(meta.module-variables('vars'));
11
12 @include iro.bem-scope('tables') { 10 @include iro.bem-scope('tables') {
13 table { 11 table {
14 margin-block-start: fn.dim(--margin-bs); 12 margin-block-start: props.get(vars.$margin-bs);
15 border-spacing: 0; 13 border-spacing: 0;
16 border-collapse: separate; 14 border-collapse: separate;
17 } 15 }
18 16
19 th { 17 th {
20 @include mx.set-font(--standard, ( 18 padding-block: props.get(table.$pad-b);
21 --line-height: null, 19 padding-inline: props.get(table.$pad-i);
22 --size: fn.global-dim(--font-size --50), 20 font-family: props.get(table.$heading--font-family);
23 --weight: bold, 21 font-size: props.get(table.$heading--font-size);
24 --transform: uppercase, 22 font-weight: props.get(table.$heading--font-weight);
25 --spacing: .5px 23 color: props.get(table.$heading-color);
26 ));
27
28 padding-block: fn.dim(--pad-b);
29 padding-inline: fn.dim(--pad-i);
30 color: fn.color(--heading);
31 text-align: start; 24 text-align: start;
25 text-transform: props.get(table.$heading--text-transform);
26 letter-spacing: props.get(table.$heading--letter-spacing);
32 } 27 }
33 28
34 td { 29 td {
35 padding-block: fn.dim(--pad-b); 30 padding-block: props.get(table.$pad-b);
36 padding-inline: fn.dim(--pad-i); 31 padding-inline: props.get(table.$pad-i);
37 border-color: fn.color(--border); 32 border-color: props.get(table.$border-color);
38 border-style: solid; 33 border-style: solid;
39 border-width: 0; 34 border-width: 0;
40 border-block-start-width: fn.dim(--border); 35 border-block-start-width: props.get(table.$border-width);
41 } 36 }
42 37
43 tr { 38 tr {
44 &:last-child { 39 &:last-child {
45 td { 40 td {
46 border-block-end-width: fn.dim(--border); 41 border-block-end-width: props.get(table.$border-width);
47 } 42 }
48 } 43 }
49 } 44 }
@@ -63,14 +58,14 @@
63 58
64 @include iro.bem-modifier('box') { 59 @include iro.bem-modifier('box') {
65 td { 60 td {
66 background-color: fn.color(--box --bg); 61 background-color: props.get(table.$box--bg-color);
67 62
68 &:first-child { 63 &:first-child {
69 border-inline-start-width: fn.dim(--border); 64 border-inline-start-width: props.get(table.$border-width);
70 } 65 }
71 66
72 &:last-child { 67 &:last-child {
73 border-inline-end-width: fn.dim(--border); 68 border-inline-end-width: props.get(table.$border-width);
74 } 69 }
75 } 70 }
76 71
@@ -78,11 +73,11 @@
78 &:first-child { 73 &:first-child {
79 td { 74 td {
80 &:first-child { 75 &:first-child {
81 border-start-start-radius: fn.dim(--rounding); 76 border-start-start-radius: props.get(table.$rounding);
82 } 77 }
83 78
84 &:last-child { 79 &:last-child {
85 border-start-end-radius: fn.dim(--rounding); 80 border-start-end-radius: props.get(table.$rounding);
86 } 81 }
87 } 82 }
88 } 83 }
@@ -90,11 +85,11 @@
90 &:last-child { 85 &:last-child {
91 td { 86 td {
92 &:first-child { 87 &:first-child {
93 border-end-start-radius: fn.dim(--rounding); 88 border-end-start-radius: props.get(table.$rounding);
94 } 89 }
95 90
96 &:last-child { 91 &:last-child {
97 border-end-end-radius: fn.dim(--rounding); 92 border-end-end-radius: props.get(table.$rounding);
98 } 93 }
99 } 94 }
100 } 95 }
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index cdaca64..17c9eb4 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,24 +1,4 @@
1@use '../props'; 1@use '../props';
2@use '../core.vars' as core; 2@use 'implicit.vars' as implicit;
3 3
4$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; 4$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
5$margin-bs: props.def(--s-lists--margin-bs, props.get(core.$paragraph--margin-bs)) !default;
6
7$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default;
8
9@include iro.props-store((
10 --dims: (
11 --pad-i: fn.foreign-dim(--table, --pad-i),
12 --pad-b: fn.foreign-dim(--table, --pad-b),
13 --rounding: fn.foreign-dim(--table, --rounding),
14 --border: fn.foreign-dim(--table, --border),
15 --margin-bs: fn.global-dim(--paragraph --margin-bs),
16 ),
17 --colors: (
18 --border: fn.foreign-color(--table, --border),
19 --heading: fn.foreign-color(--table, --heading),
20 --box: (
21 --bg: fn.foreign-color(--table, --box --bg),
22 )
23 )
24));