1 files changed, 43 insertions, 51 deletions

diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index c188e8f..0c69713 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -35,19 +35,19 @@ $themes-spec: (
             ),
 
             --colors: (
-                --100:  (math.div(0, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(0, 12)))  (-30 * math.div(0, 12)),
-                --200:  (math.div(1, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(1, 12)))  (-30 * math.div(1, 12)),
-                --300:  (math.div(2, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(2, 12)))  (-30 * math.div(2, 12)),
-                --400:  (math.div(3, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(3, 12)))  (-30 * math.div(3, 12)),
-                --500:  (math.div(4, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(4, 12)))  (-30 * math.div(4, 12)),
-                --600:  (math.div(5, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(5, 12)))  (-30 * math.div(5, 12)),
-                --700:  (math.div(6, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(6, 12)))  (-30 * math.div(6, 12)),
-                --800:  (math.div(7, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(7, 12)))  (-30 * math.div(7, 12)),
-                --900:  (math.div(8, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(8, 12)))  (-30 * math.div(8, 12)),
-                --1000: (math.div(9, 12) * 97 - 10)  (.3 + .7 * easing.ease(math.div(9, 12)))  (-30 * math.div(9, 12)),
-                --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
-                --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
-                --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
+                --100:  (math.div(0, 12) * 97 - 10)  (.3 + .7 * math.div(0, 12))  (-30 * math.div(0, 12)),
+                --200:  (math.div(1, 12) * 97 - 10)  (.3 + .7 * math.div(1, 12))  (-30 * math.div(1, 12)),
+                --300:  (math.div(2, 12) * 97 - 10)  (.3 + .7 * math.div(2, 12))  (-30 * math.div(2, 12)),
+                --400:  (math.div(3, 12) * 97 - 10)  (.3 + .7 * math.div(3, 12))  (-30 * math.div(3, 12)),
+                --500:  (math.div(4, 12) * 97 - 10)  (.3 + .7 * math.div(4, 12))  (-30 * math.div(4, 12)),
+                --600:  (math.div(5, 12) * 97 - 10)  (.3 + .7 * math.div(5, 12))  (-30 * math.div(5, 12)),
+                --700:  (math.div(6, 12) * 97 - 10)  (.3 + .7 * math.div(6, 12))  (-30 * math.div(6, 12)),
+                --800:  (math.div(7, 12) * 97 - 10)  (.3 + .7 * math.div(7, 12))  (-30 * math.div(7, 12)),
+                --900:  (math.div(8, 12) * 97 - 10)  (.3 + .7 * math.div(8, 12))  (-30 * math.div(8, 12)),
+                --1000: (math.div(9, 12) * 97 - 10)  (.3 + .7 * math.div(9, 12))  (-30 * math.div(9, 12)),
+                --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * math.div(10, 12)) (-30 * math.div(10, 12)),
+                --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * math.div(11, 12)) (-30 * math.div(11, 12)),
+                --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * math.div(12, 12)) (-30 * math.div(12, 12)),
             ),
         ),
 
@@ -65,7 +65,7 @@ $themes-spec: (
 
             --link: (
                 --fg:         --red --1000,
-                --underline:  --red --400,
+                --underline:  --red --500,
                 --fg-inv:     --red --1000-text,
                 --active:     --red --1300,
                 --active-inv: --red --1300-text,
@@ -80,31 +80,31 @@ $themes-spec: (
                 --75:  0.7 .2 0,
                 --100: 0   .4 0,
             
-                --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .4 * math.div(0, 6)) (30 * math.div(1, 7)),
-                --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .4 * math.div(1, 6)) (30 * math.div(2, 7)),
-                --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .4 * math.div(2, 6)) (30 * math.div(3, 7)),
+                --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .2 * math.div(0, 6)) (30 * math.div(1, 7)),
+                --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .2 * math.div(1, 6)) (30 * math.div(2, 7)),
+                --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .2 * math.div(2, 6)) (30 * math.div(3, 7)),
             
-                --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .4 * math.div(3, 6)) (30 * math.div(4, 7)),
-                --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .4 * math.div(4, 6)) (30 * math.div(5, 7)),
-                --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .4 * math.div(5, 6)) (30 * math.div(6, 7)),
-                --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .4 * math.div(6, 6)) (30 * math.div(7, 7)),
+                --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .2 * math.div(3, 6)) (30 * math.div(4, 7)),
+                --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .2 * math.div(4, 6)) (30 * math.div(5, 7)),
+                --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .2 * math.div(5, 6)) (30 * math.div(6, 7)),
+                --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .2 * math.div(6, 6)) (30 * math.div(7, 7)),
                 --900: #fff
             ),
             
             --colors: (
-                --100:  (math.div(0, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(0, 12)))  (-30 * math.div(0, 12)),
-                --200:  (math.div(1, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(1, 12)))  (-30 * math.div(1, 12)),
-                --300:  (math.div(2, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(2, 12)))  (-30 * math.div(2, 12)),
-                --400:  (math.div(3, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(3, 12)))  (-30 * math.div(3, 12)),
-                --500:  (math.div(4, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(4, 12)))  (-30 * math.div(4, 12)),
-                --600:  (math.div(5, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(5, 12)))  (-30 * math.div(5, 12)),
-                --700:  (math.div(6, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(6, 12)))  (-30 * math.div(6, 12)),
-                --800:  (math.div(7, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(7, 12)))  (-30 * math.div(7, 12)),
-                --900:  (math.div(8, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(8, 12)))  (-30 * math.div(8, 12)),
-                --1000: (math.div(9, 12) * -104 + 2)  (1 - .7 * easing.ease(math.div(9, 12)))  (-30 * math.div(9, 12)),
-                --1100: (math.div(10, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
-                --1200: (math.div(11, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
-                --1300: (math.div(12, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
+                --100:  (math.div(0, 12) * -104 + 2)  (1 - .5 * math.div(0, 12))  (-30 + 10 * math.div(0, 12)),
+                --200:  (math.div(1, 12) * -104 + 2)  (1 - .5 * math.div(1, 12))  (-30 + 10 * math.div(1, 12)),
+                --300:  (math.div(2, 12) * -104 + 2)  (1 - .5 * math.div(2, 12))  (-30 + 10 * math.div(2, 12)),
+                --400:  (math.div(3, 12) * -104 + 2)  (1 - .5 * math.div(3, 12))  (-30 + 10 * math.div(3, 12)),
+                --500:  (math.div(4, 12) * -104 + 2)  (1 - .5 * math.div(4, 12))  (-30 + 10 * math.div(4, 12)),
+                --600:  (math.div(5, 12) * -104 + 2)  (1 - .5 * math.div(5, 12))  (-30 + 10 * math.div(5, 12)),
+                --700:  (math.div(6, 12) * -104 + 2)  (1 - .5 * math.div(6, 12))  (-30 + 10 * math.div(6, 12)),
+                --800:  (math.div(7, 12) * -104 + 2)  (1 - .5 * math.div(7, 12))  (-30 + 10 * math.div(7, 12)),
+                --900:  (math.div(8, 12) * -104 + 2)  (1 - .5 * math.div(8, 12))  (-30 + 10 * math.div(8, 12)),
+                --1000: (math.div(9, 12) * -104 + 2)  (1 - .5 * math.div(9, 12))  (-30 + 10 * math.div(9, 12)),
+                --1100: (math.div(10, 12) * -104 + 2) (1 - .5 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)),
+                --1200: (math.div(11, 12) * -104 + 2) (1 - .5 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)),
+                --1300: (math.div(12, 12) * -104 + 2) (1 - .5 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)),
             ),
         ),
 
@@ -119,14 +119,6 @@ $themes-spec: (
             --bg-base: --base --75,
             --bg-l1:   --base --100,
             --bg-l2:   --base --200,
-
-            --link: (
-                --fg:         --yellow --1000,
-                --underline:  --yellow --400,
-                --fg-inv:     --yellow --1000-text,
-                --active:     --yellow --1300,
-                --active-inv: --yellow --1300-text,
-            )
         ),
     )
 );
@@ -261,10 +253,12 @@ $wcfNavigationTextDark: props.def(--wcfNavigationText, props.get($theme, --base,
 $wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark');
 $wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark');
 
-$wcfContentBackgroundDark: props.def(--wcfContentBackground, rgb(242, 242, 242), 'dark');
-$wcfContentBorderDark: props.def(--wcfContentBorder, var(--wcfContentBorderInner), 'dark');
-$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, rgba(#fff, .7), 'dark');
-$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, rgba(#fff, .7), 'dark');
+$wcfContentBackgroundDark: props.def(--wcfContentBackground, props.get($theme, --base, --100), 'dark');
+$wcfContentBorderInnerDark: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'dark');
+$wcfContentBorderDark: props.def(--wcfContentBorder, props.get($wcfContentBorderInnerDark), 'dark');
+$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, props.get($theme, --base, --600), 'dark');
+$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'dark');
+$wcfContentTextDark: props.def(--wcfContentText, props.get($theme, --base, --800), 'dark');
 
 $wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark');
 $wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark');
@@ -289,13 +283,11 @@ $wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.g
 $wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark');
 $wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark');
 
-$wcfSidebarBorderDark: props.def(--wcfSidebarBackground, transparent, 'dark');
+$wcfSidebarBackgroundDark: props.def(--wcfSidebarBackground, $wcfContentBackground, 'dark');
+$wcfSidebarBorderDark: props.def(--wcfSidebarBorder, transparent, 'dark');
 $wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark');
 $wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark');
 $wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
 $wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
 
-$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --yellow, --900), 'dark');
-$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --yellow, --900-text), 'dark');
-$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --yellow, --1200), 'dark');
-$wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --yellow, --1200-text), 'dark');
+$wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark');