/
test-css-variables-theme.scss
39 lines (35 loc) · 1.18 KB
/
test-css-variables-theme.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@use 'sass:map';
@use 'sass:meta';
@use '../all-theme';
@use '../../typography/all-typography';
@use '../palette';
@use '../theming';
@use '../../../legacy-core/theming/all-theme' as legacy-all-theme;
// Recursively replaces all of the values inside a Sass map with a different value.
@function _replace-all-values($palette, $replacement) {
$output: ();
@each $key, $value in $palette {
@if (meta.type-of($value) == 'map') {
$output: map.merge(($key: _replace-all-values($value, $replacement)), $output);
}
@else {
$output: map.merge(($key: $replacement), $output);
}
}
@return $output;
}
// Theme used to test that our themes would compile if the colors were specified as CSS variables.
._demo-css-variables-theme {
$palette: theming.define-palette(palette.$blue-grey-palette);
$theme: theming.define-dark-theme((
color: (
primary: $palette,
accent: $palette,
warn: $palette
),
typography: all-typography.define-typography-config(),
));
$css-var-theme: _replace-all-values($theme, var(--test-var));
@include all-theme.all-component-themes($css-var-theme);
@include legacy-all-theme.all-legacy-component-themes($css-var-theme);
}