diff options
author | Volpeon <git@volpeon.ink> | 2024-10-19 17:14:45 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-19 17:14:45 +0200 |
commit | c41e16f6044548e27fbf8e4ef65ed3067278c80b (patch) | |
tree | 90033bba112417a1b7fa833f6a307df56b9799dd /src | |
parent | Update (diff) | |
download | iro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.tar.gz iro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.tar.bz2 iro-design-c41e16f6044548e27fbf8e4ef65ed3067278c80b.zip |
Update
Diffstat (limited to 'src')
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 | )); | ||