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); | ||
