summaryrefslogtreecommitdiffstats
path: root/src/_core.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_core.vars.scss')
-rw-r--r--src/_core.vars.scss50
1 files changed, 50 insertions, 0 deletions
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
new file mode 100644
index 0000000..65ebb65
--- /dev/null
+++ b/src/_core.vars.scss
@@ -0,0 +1,50 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:math';
4@use 'iro-sass/src/props';
5@use 'iro-sass/src/easing';
6@use 'iro-design/src/functions' as fn;
7
8$themes-spec: (
9 --light: (
10 --levels: (
11 --grays: (
12 --50: (-16) .8 0,
13 --75: (-8) .9 0,
14 --100: (0) 1 0,
15
16 --200: (easing.cubic-bezier(.2, .1, .7, 1, math.div(1, 7)) * 87) (1 + 1 * math.div(1, 7)) (-30 * math.div(1, 7)),
17 --300: (easing.cubic-bezier(.2, .1, .7, 1, math.div(2, 7)) * 87) (1 + 1 * math.div(2, 7)) (-30 * math.div(2, 7)),
18 --400: (easing.cubic-bezier(.2, .1, .7, 1, math.div(3, 7)) * 87) (1 + 1 * math.div(3, 7)) (-30 * math.div(3, 7)),
19
20 --500: (easing.cubic-bezier(.2, .1, .7, 1, math.div(4, 7)) * 87) (1 + 1 * math.div(4, 7)) (-30 * math.div(4, 7)),
21 --600: (easing.cubic-bezier(.2, .1, .7, 1, math.div(5, 7)) * 87) (1 + 1 * math.div(5, 7)) (-30 * math.div(5, 7)),
22 --700: (easing.cubic-bezier(.2, .1, .7, 1, math.div(6, 7)) * 87) (1 + 1 * math.div(6, 7)) (-30 * math.div(6, 7)),
23 --800: (easing.cubic-bezier(.2, .1, .7, 1, math.div(7, 7)) * 87) (1 + 1 * math.div(7, 7)) (-30 * math.div(7, 7)),
24 --900: #000
25 ),
26 ),
27
28 --palettes: (
29 --base: #edddc4 --grays,
30 ),
31 ),
32);
33
34$themes: ();
35
36@each $theme-name, $theme in $themes-spec {
37 $compiled: props.def(--colors, (), 'color');
38
39 @each $palette-name, $palette in map.get($theme, --palettes) {
40 $base-color: list.nth($palette, 1);
41 $levels: list.nth($palette, 2);
42
43 $palette: fn.palette($base-color, map.get($theme, --levels, $levels), list.nth(map.get($theme, --palettes, --base), 1));
44 $compiled: props.merge($compiled, ( $palette-name: $palette ));
45 }
46
47 $themes: map.set($themes, $theme-name, $compiled);
48}
49
50$theme: map.get($themes, --light);