From c41e16f6044548e27fbf8e4ef65ed3067278c80b Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 19 Oct 2024 17:14:45 +0200
Subject: Update

---
 src/_themes.scss | 283 ++++++++++++++-----------------------------------------
 1 file changed, 71 insertions(+), 212 deletions(-)

(limited to 'src/_themes.scss')

diff --git a/src/_themes.scss b/src/_themes.scss
index ced2aa5..b460baf 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,214 +1,73 @@
-@use 'sass:list';
 @use 'sass:map';
-@use 'sass:math';
-@use 'iro-sass/src/easing' as easing;
+@use 'iro-sass/src/iro-sass' as iro;
 @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;
+@use 'props';
+
+@use 'core.vars' as vars;
+@forward 'core.vars';
+
+@mixin styles {
+    @include iro.bem-theme('base') {
+        background-color: props.get(vars.$theme, --bg-base);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-base);
+            }
+        }
+
+        @include iro.bem-suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-base);
+            }
+        }
+    }
+
+    @include iro.bem-theme('l1') {
+        background-color: props.get(vars.$theme, --bg-l1);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-l1);
+            }
+        }
+
+        @include iro.bem-suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-l1);
+            }
+        }
+    }
+
+    @include iro.bem-theme('l2') {
+        background-color: props.get(vars.$theme, --bg-l2);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-l2);
+            }
+        }
+
+        @include iro.bem-suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-l2);
+            }
+        }
+    }
+
+    @include iro.bem-theme('50') {
+        background-color: props.get(vars.$theme, --base --50);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --base --50);
+            }
+        }
+
+        @include iro.bem-suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --base --50);
+            }
+        }
+    }
+}
-- 
cgit v1.3.1