diff options
Diffstat (limited to 'src/_core.vars.scss')
-rw-r--r-- | src/_core.vars.scss | 50 |
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); | ||