1 files changed, 214 insertions, 0 deletions

diff --git a/src/_themes.scss b/src/_themes.scss
new file mode 100644
index 0000000..a90d049
--- /dev/null
+++ b/src/_themes.scss
@@ -0,0 +1,214 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'iro-sass/src/easing' as easing;
+@use 'include-media/dist/include-media' as media;
+
+$palette-chroma-easing: 'ease' !default;
+
+$static-colors-override: () !default;
+$static-colors: map.deep-merge((
+    --base: hsl(0, 0%, 98%),
+
+    --contrasts: (
+        --100:  math.div(0, 12) * 110 - 10,
+        --200:  math.div(1, 12) * 110 - 10,
+        --300:  math.div(2, 12) * 110 - 10,
+        --400:  math.div(3, 12) * 110 - 10,
+        --500:  math.div(4, 12) * 110 - 10,
+        --600:  math.div(5, 12) * 110 - 10,
+        --700:  math.div(6, 12) * 110 - 10,
+        --800:  math.div(7, 12) * 110 - 10,
+        --900:  math.div(8, 12) * 110 - 10,
+        --1000: math.div(9, 12) * 110 - 10,
+        --1100: math.div(10, 12) * 110 - 10,
+        --1200: math.div(11, 12) * 110 - 10,
+        --1300: math.div(12, 12) * 110 - 10,
+    ),
+
+    --palettes: (
+        --blue:   oklch(56% .14 275.25),
+        --purple: oklch(56% .14 305.58),
+        --red:    oklch(56% .14 14.69),
+        --green:  oklch(56% .14 150.48),
+        --yellow: oklch(56% .14 84.08),
+    ),
+
+    --transparents: (
+        --100: 0,
+        --200: .1,
+        --300: .25,
+        --400: .4,
+        --500: .55,
+        --600: .7,
+        --700: .8,
+        --800: .9,
+        --900: 1,
+    ),
+), $static-colors-override) !default;
+
+$semantic-colors-common-override: () !default;
+$semantic-colors-common: map.deep-merge((
+    --accent:          --theme  --blue,
+    --accent-static:   --static --blue,
+    --positive:        --theme  --green,
+    --positive-static: --static --green,
+    --negative:        --theme  --red,
+    --negative-static: --static --red,
+    --warning:         --theme  --yellow,
+    --warning-static:  --static --yellow,
+
+    --focus-raw:       --theme  --accent,
+    --focus-static:    --theme  --accent-static,
+
+    --border-mute:     --theme --base --200,
+    --border:          --theme --base --300,
+    --border-strong:   --theme --base --400,
+
+    --text-disabled:   --theme --base --500,
+    --text-mute-more:  --theme --base --600,
+    --text-mute:       --theme --base --700,
+    --text:            --theme --base --800,
+    --heading:         --theme --base --900,
+
+    --focus: (
+        --outline:       --theme --focus-raw --400,
+        --border-mute:   --theme --focus-raw --900,
+        --border:        --theme --focus-raw --1000,
+        --border-text:   --theme --focus-raw --1000-text,
+        --border-strong: --theme --focus-raw --1100,
+        --text:          --theme --focus-raw --1100,
+    ),
+), $semantic-colors-common-override) !default;
+
+$theme-light-override: () !default;
+$theme-light: map.deep-merge((
+    --contrasts: (
+        --grays: (
+            --50:  -8,
+            --75:  -4,
+            --100: 0,
+        
+            --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
+            --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
+            --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
+        
+            --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
+            --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
+            --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
+            --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
+            --900: 106,
+        ),
+
+        --colors: (
+            --100:  math.div(0, 12) * 96 + 5,
+            --200:  math.div(1, 12) * 96 + 5,
+            --300:  math.div(2, 12) * 96 + 5,
+            --400:  math.div(3, 12) * 96 + 5,
+            --500:  math.div(4, 12) * 96 + 5,
+            --600:  math.div(5, 12) * 96 + 5,
+            --700:  math.div(6, 12) * 96 + 5,
+            --800:  math.div(7, 12) * 96 + 5,
+            --900:  math.div(8, 12) * 96 + 5,
+            --1000: math.div(9, 12) * 96 + 5,
+            --1100: math.div(10, 12) * 96 + 5,
+            --1200: math.div(11, 12) * 96 + 5,
+            --1300: math.div(12, 12) * 96 + 5,
+        ),
+    ),
+
+    --ranges: (
+        --full:  .3,
+        --muted: .1,
+    ),
+    
+    --palettes: (
+        --base:  hsl(260, 90%, 98%)       --grays --full,
+        --blue:   oklch(56% .16 275.25) --colors --muted,
+        --purple: oklch(56% .16 305.58) --colors --muted,
+        --red:    oklch(56% .16 14.69)  --colors --muted,
+        --green:  oklch(56% .16 150.48) --colors --muted,
+        --yellow: oklch(56% .16 84.08)  --colors --muted,
+    ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-l2:   --theme --base --50,
+        --bg-l1:   --theme --base --100,
+        --bg-base: --theme --base --200,
+    )),
+
+    --constants: (
+        --shadow: rgba(#000, .15),
+    ),
+), $theme-light-override) !default;
+
+$theme-dark-override: () !default;
+$theme-dark: map.deep-merge((
+    --contrasts: (
+        --grays: (
+            --50:  4.4,
+            --75:  2.2,
+            --100: 0,
+        
+            --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
+            --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
+            --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
+        
+            --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
+            --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
+            --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
+            --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
+            --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
+        ),
+
+        --colors: (
+            --100:  math.div(0, 12) * -100 - 5,
+            --200:  math.div(1, 12) * -100 - 5,
+            --300:  math.div(2, 12) * -100 - 5,
+            --400:  math.div(3, 12) * -100 - 5,
+            --500:  math.div(4, 12) * -100 - 5,
+            --600:  math.div(5, 12) * -100 - 5,
+            --700:  math.div(6, 12) * -100 - 5,
+            --800:  math.div(7, 12) * -100 - 5,
+            --900:  math.div(8, 12) * -100 - 5,
+            --1000: math.div(9, 12) * -100 - 5,
+            --1100: math.div(10, 12) * -100 - 5,
+            --1200: math.div(11, 12) * -100 - 5,
+            --1300: math.div(12, 12) * -100 - 5,
+        ),
+    ),
+
+    --ranges: (
+        --full:  1,
+        --muted: .3,
+    ),
+    
+    --palettes: (
+        --base:  hsl(257, 7%, 19%)       --grays --full,
+        --blue:   oklch(56% .16 275.25) --colors --muted,
+        --purple: oklch(56% .16 305.58) --colors --muted,
+        --red:    oklch(56% .16 14.69)  --colors --muted,
+        --green:  oklch(56% .16 150.48) --colors --muted,
+        --yellow: oklch(56% .16 84.08)  --colors --muted,
+    ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-base: --theme --base --50,
+        --bg-l1:   --theme --base --75,
+        --bg-l2:   --theme --base --100,
+    )),
+
+    --constants: (
+        --shadow: rgba(#000, .5),
+    ),
+), $theme-dark-override) !default;
+
+$themes-override: () !default;
+$themes: map.deep-merge((
+    main: (
+        light: $theme-light,
+        dark:  $theme-dark,
+    )
+), $themes-override) !default;
+
+$theme-default: list.nth(map.keys($themes), 1) !default;