1 files changed, 171 insertions, 4 deletions

diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 3c6aba8..c9117b5 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -1,8 +1,10 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:math';
+@use 'sass:meta';
 @use 'iro-sass/src/props';
 @use 'iro-sass/src/easing';
+@use 'iro-sass/src/functions';
 @use 'iro-design/src/functions' as fn;
 
 $themes-spec: (
@@ -42,12 +44,83 @@ $themes-spec: (
         ),
 
         --palettes: (
-            --base: #edddc4 --grays,
-            --red:  oklch(36.32% 0.1302 53.73) --colors,
-            --blue: oklch(36.4% 0.1302 273.58) --colors,
-            --yellow: oklch(36.32% 0.1302 92.94) --colors,
+            --base:   #edddc4                     --grays,
+            --red:    oklch(36.32% 0.1302 53.73)  --colors,
+            --blue:   oklch(36.32% 0.1302 273.58) --colors,
+            --yellow: oklch(36.32% 0.1302 92.94)  --colors,
+        ),
+
+        --semantic: (
+            --bg-l2:   --base --50,
+            --bg-l1:   --base --75,
+            --bg-base: --base --100,
+
+            --link: (
+                --fg:         --red --1000,
+                --underline:  --red --400,
+                --fg-inv:     --red --1000-text,
+                --active:     --red --1300,
+                --active-inv: --red --1300-text,
+            )
         ),
     ),
+
+    --dark: (
+        --levels: (
+            --grays: (
+                --50: #000,
+                --75: (easing.cubic-bezier(.3, .1, .7, 1, math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)),
+                --100: (easing.cubic-bezier(.3, .1, .7, 1, math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)),
+
+                --200: (easing.cubic-bezier(.3, .1, .7, 1, math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)),
+                --300: (easing.cubic-bezier(.3, .1, .7, 1, math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)),
+                --400: (easing.cubic-bezier(.3, .1, .7, 1, math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)),
+
+                --500: (easing.cubic-bezier(.3, .1, .7, 1, math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)),
+                --600: (easing.cubic-bezier(.3, .1, .7, 1, math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)),
+                --700: (0) .5 0,
+                --800: (-16) .3 0,
+                --900: (-30) .1 0,
+            ),
+            
+            --colors: (
+                --100:  (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
+                --200:  (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
+                --300:  (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
+                --400:  (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
+                --500:  (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
+                --600:  (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
+                --700:  (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
+                --800:  (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
+                --900:  (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
+                --1000: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
+                --1100: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
+                --1200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
+                --1300: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
+            ),
+        ),
+
+        --palettes: (
+            --base:   #edddc4                     --grays,
+            --red:    oklch(36.32% 0.1302 53.73)  --colors,
+            --blue:   oklch(36.32% 0.1302 273.58) --colors,
+            --yellow: oklch(36.32% 0.1302 92.94)  --colors,
+        ),
+
+        --semantic: (
+            --bg-l2:   --base --50,
+            --bg-l1:   --base --75,
+            --bg-base: --base --100,
+
+            --link: (
+                --fg:         --red --1000,
+                --underline:  --red --400,
+                --fg-inv:     --red --1000-text,
+                --active:     --red --1300,
+                --active-inv: --red --1300-text,
+            )
+        ),
+    )
 );
 
 $themes: ();
@@ -63,7 +136,101 @@ $themes: ();
         $compiled: props.merge($compiled, ( $palette-name: $palette ));
     }
 
+    @each $color, $ref in map.get($theme, --semantic) {
+        $res: ();
+
+        @if meta.type-of($ref) == 'map' {
+            @each $key, $r in $ref {
+                $re1: list.nth($r, 1);
+                $re2: functions.list-slice($r, 2);
+                $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
+            }
+        } @else {
+            $ref1: list.nth($ref, 1);
+            $ref2: functions.list-slice($ref, 2);
+            $res:  props.get($compiled, $ref1, $ref2...);
+        }
+
+        $compiled: props.merge($compiled, ( $color: $res ));
+    }
+
     $themes: map.set($themes, $theme-name, $compiled);
 }
 
 $theme: map.get($themes, --light);
+
+//
+
+$vlpnLink: props.def(--vlpnLink, props.get($theme, --link, --fg));
+$vlpnLinkUnderline: props.def(--vlpnLinkUnderline, props.get($theme, --link, --underline));
+$vlpnLinkFg: props.def(--vlpnLinkFg, props.get($theme, --link, --fg-inv));
+$vlpnLinkActive: props.def(--vlpnLinkActive, props.get($theme, --link, --active));
+$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get($theme, --link, --active-inv));
+
+$vlpnSmileySize: props.def(--vlpnSmileySize, 28px);
+
+$wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px);
+
+$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get($theme, --base, --700));
+$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --800));
+$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --800));
+$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --700));
+$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --800));
+$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --800));
+$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --700));
+
+$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get($theme, --bg-base));
+$wcfNavigationText: props.def(--wcfNavigationText, props.get($theme, --base, --500));
+$wcfNavigationLink: props.def(--wcfNavigationLink, props.get($theme, --base, --800));
+$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800));
+
+$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242));
+$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
+$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6));
+$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6));
+
+$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base));
+$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
+$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxText, props.get($theme, --base, --900));
+
+$wcfFooterBackground: props.def(--wcfFooterBackground, props.get($theme, --base, --700));
+$wcfFooterText: props.def(--wcfFooterText, props.get($theme, --base, --100));
+$wcfFooterLink: props.def(--wcfFooterLink, props.get($theme, --base, --75));
+$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get($theme, --base, --75));
+
+$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --800));
+$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --75));
+$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --50));
+$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50));
+
+$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
+$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
+
+$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));
+$wcfButtonText: props.def(--wcfButtonText, props.get($theme, --base, --100-text));
+$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700));
+$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text));
+
+$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900));
+$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get($theme, --red, --900-text));
+$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200));
+$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get($theme, --red, --1200-text));
+
+$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
+
+$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground));
+
+$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
+$wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive));
+
+$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
+$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
+
+$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
+$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
+
+$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
+$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
+
+$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200));
+$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200));