Update

author: Volpeon <git@volpeon.ink> 2024-12-10 19:22:42 +0100
committer: Volpeon <git@volpeon.ink> 2024-12-10 19:22:42 +0100
commit: eaf0b317218dcebdd5139e6ff4a93d44f3212141 (patch)
tree: 70f0bbb778d6916f5931b22be9f09b31fd038126 /src/_core.vars.scss
parent: Dark mode mainly (diff)
download: furbase-design-2024-eaf0b317218dcebdd5139e6ff4a93d44f3212141.tar.gz
furbase-design-2024-eaf0b317218dcebdd5139e6ff4a93d44f3212141.tar.bz2
furbase-design-2024-eaf0b317218dcebdd5139e6ff4a93d44f3212141.zip
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)),
+                --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 * easing.ease(math.div(1, 12)))  (-30 * math.div(1, 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 * easing.ease(math.div(2, 12)))  (-30 * math.div(2, 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 * easing.ease(math.div(3, 12)))  (-30 * math.div(3, 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 * easing.ease(math.div(4, 12)))  (-30 * math.div(4, 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 * easing.ease(math.div(5, 12)))  (-30 * math.div(5, 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 * easing.ease(math.div(6, 12)))  (-30 * math.div(6, 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 * easing.ease(math.div(7, 12)))  (-30 * math.div(7, 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 * easing.ease(math.div(8, 12)))  (-30 * math.div(8, 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 * easing.ease(math.div(9, 12)))  (-30 * math.div(9, 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 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 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 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 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 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 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)),
+                --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 + .4 * math.div(1, 6)) (30 * math.div(2, 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 + .4 * math.div(2, 6)) (30 * math.div(3, 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)),
+                --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 + .4 * math.div(4, 6)) (30 * math.div(5, 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 + .4 * math.div(5, 6)) (30 * math.div(6, 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 + .4 * math.div(6, 6)) (30 * math.div(7, 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)),
+                --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 - .7 * easing.ease(math.div(1, 12)))  (-30 * math.div(1, 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 - .7 * easing.ease(math.div(2, 12)))  (-30 * math.div(2, 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 - .7 * easing.ease(math.div(3, 12)))  (-30 * math.div(3, 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 - .7 * easing.ease(math.div(4, 12)))  (-30 * math.div(4, 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 - .7 * easing.ease(math.div(5, 12)))  (-30 * math.div(5, 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 - .7 * easing.ease(math.div(6, 12)))  (-30 * math.div(6, 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 - .7 * easing.ease(math.div(7, 12)))  (-30 * math.div(7, 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 - .7 * easing.ease(math.div(8, 12)))  (-30 * math.div(8, 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 - .7 * easing.ease(math.div(9, 12)))  (-30 * math.div(9, 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 - .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 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 - .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 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 - .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 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');
+$wcfContentBackgroundDark: props.def(--wcfContentBackground, props.get($theme, --base, --100), 'dark');
-$wcfContentBorderDark: props.def(--wcfContentBorder, var(--wcfContentBorderInner), 'dark');
+$wcfContentBorderInnerDark: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'dark');
-$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, rgba(#fff, .7), 'dark');
+$wcfContentBorderDark: props.def(--wcfContentBorder, props.get($wcfContentBorderInnerDark), 'dark');
-$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, rgba(#fff, .7), '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');
+$wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), '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');
author	Volpeon <git@volpeon.ink>	2024-12-10 19:22:42 +0100
committer	Volpeon <git@volpeon.ink>	2024-12-10 19:22:42 +0100
commit	eaf0b317218dcebdd5139e6ff4a93d44f3212141 (patch)
tree	70f0bbb778d6916f5931b22be9f09b31fd038126 /src/_core.vars.scss
parent	Dark mode mainly (diff)
download	furbase-design-2024-eaf0b317218dcebdd5139e6ff4a93d44f3212141.tar.gz furbase-design-2024-eaf0b317218dcebdd5139e6ff4a93d44f3212141.tar.bz2 furbase-design-2024-eaf0b317218dcebdd5139e6ff4a93d44f3212141.zip

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: (
35	),	35	),
36		36
37	--colors: (	37	--colors: (
38	--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),	38	--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * math.div(0, 12)) (-30 * math.div(0, 12)),
39	--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),	39	--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * math.div(1, 12)) (-30 * math.div(1, 12)),
40	--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),	40	--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * math.div(2, 12)) (-30 * math.div(2, 12)),
41	--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),	41	--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * math.div(3, 12)) (-30 * math.div(3, 12)),
42	--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),	42	--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * math.div(4, 12)) (-30 * math.div(4, 12)),
43	--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),	43	--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * math.div(5, 12)) (-30 * math.div(5, 12)),
44	--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),	44	--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * math.div(6, 12)) (-30 * math.div(6, 12)),
45	--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),	45	--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * math.div(7, 12)) (-30 * math.div(7, 12)),
46	--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),	46	--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * math.div(8, 12)) (-30 * math.div(8, 12)),
47	--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),	47	--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * math.div(9, 12)) (-30 * math.div(9, 12)),
48	--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),	48	--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * math.div(10, 12)) (-30 * math.div(10, 12)),
49	--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),	49	--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * math.div(11, 12)) (-30 * math.div(11, 12)),
50	--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),	50	--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * math.div(12, 12)) (-30 * math.div(12, 12)),
51	),	51	),
52	),	52	),
53		53
@@ -65,7 +65,7 @@ $themes-spec: (
65		65
66	--link: (	66	--link: (
67	--fg: --red --1000,	67	--fg: --red --1000,
68	--underline: --red --400,	68	--underline: --red --500,
69	--fg-inv: --red --1000-text,	69	--fg-inv: --red --1000-text,
70	--active: --red --1300,	70	--active: --red --1300,
71	--active-inv: --red --1300-text,	71	--active-inv: --red --1300-text,
@@ -80,31 +80,31 @@ $themes-spec: (
80	--75: 0.7 .2 0,	80	--75: 0.7 .2 0,
81	--100: 0 .4 0,	81	--100: 0 .4 0,
82		82
83	--200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .4 * math.div(0, 6)) (30 * math.div(1, 7)),	83	--200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .2 * math.div(0, 6)) (30 * math.div(1, 7)),
84	--300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .4 * math.div(1, 6)) (30 * math.div(2, 7)),	84	--300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .2 * math.div(1, 6)) (30 * math.div(2, 7)),
85	--400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .4 * math.div(2, 6)) (30 * math.div(3, 7)),	85	--400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .2 * math.div(2, 6)) (30 * math.div(3, 7)),
86		86
87	--500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .4 * math.div(3, 6)) (30 * math.div(4, 7)),	87	--500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .2 * math.div(3, 6)) (30 * math.div(4, 7)),
88	--600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .4 * math.div(4, 6)) (30 * math.div(5, 7)),	88	--600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .2 * math.div(4, 6)) (30 * math.div(5, 7)),
89	--700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .4 * math.div(5, 6)) (30 * math.div(6, 7)),	89	--700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .2 * math.div(5, 6)) (30 * math.div(6, 7)),
90	--800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .4 * math.div(6, 6)) (30 * math.div(7, 7)),	90	--800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .2 * math.div(6, 6)) (30 * math.div(7, 7)),
91	--900: #fff	91	--900: #fff
92	),	92	),
93		93
94	--colors: (	94	--colors: (
95	--100: (math.div(0, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),	95	--100: (math.div(0, 12) * -104 + 2) (1 - .5 * math.div(0, 12)) (-30 + 10 * math.div(0, 12)),
96	--200: (math.div(1, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),	96	--200: (math.div(1, 12) * -104 + 2) (1 - .5 * math.div(1, 12)) (-30 + 10 * math.div(1, 12)),
97	--300: (math.div(2, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),	97	--300: (math.div(2, 12) * -104 + 2) (1 - .5 * math.div(2, 12)) (-30 + 10 * math.div(2, 12)),
98	--400: (math.div(3, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),	98	--400: (math.div(3, 12) * -104 + 2) (1 - .5 * math.div(3, 12)) (-30 + 10 * math.div(3, 12)),
99	--500: (math.div(4, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),	99	--500: (math.div(4, 12) * -104 + 2) (1 - .5 * math.div(4, 12)) (-30 + 10 * math.div(4, 12)),
100	--600: (math.div(5, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),	100	--600: (math.div(5, 12) * -104 + 2) (1 - .5 * math.div(5, 12)) (-30 + 10 * math.div(5, 12)),
101	--700: (math.div(6, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),	101	--700: (math.div(6, 12) * -104 + 2) (1 - .5 * math.div(6, 12)) (-30 + 10 * math.div(6, 12)),
102	--800: (math.div(7, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),	102	--800: (math.div(7, 12) * -104 + 2) (1 - .5 * math.div(7, 12)) (-30 + 10 * math.div(7, 12)),
103	--900: (math.div(8, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),	103	--900: (math.div(8, 12) * -104 + 2) (1 - .5 * math.div(8, 12)) (-30 + 10 * math.div(8, 12)),
104	--1000: (math.div(9, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),	104	--1000: (math.div(9, 12) * -104 + 2) (1 - .5 * math.div(9, 12)) (-30 + 10 * math.div(9, 12)),
105	--1100: (math.div(10, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),	105	--1100: (math.div(10, 12) * -104 + 2) (1 - .5 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)),
106	--1200: (math.div(11, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),	106	--1200: (math.div(11, 12) * -104 + 2) (1 - .5 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)),
107	--1300: (math.div(12, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),	107	--1300: (math.div(12, 12) * -104 + 2) (1 - .5 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)),
108	),	108	),
109	),	109	),
110		110
@@ -119,14 +119,6 @@ $themes-spec: (
119	--bg-base: --base --75,	119	--bg-base: --base --75,
120	--bg-l1: --base --100,	120	--bg-l1: --base --100,
121	--bg-l2: --base --200,	121	--bg-l2: --base --200,
122
123	--link: (
124	--fg: --yellow --1000,
125	--underline: --yellow --400,
126	--fg-inv: --yellow --1000-text,
127	--active: --yellow --1300,
128	--active-inv: --yellow --1300-text,
129	)
130	),	122	),
131	)	123	)
132	);	124	);
@@ -261,10 +253,12 @@ $wcfNavigationTextDark: props.def(--wcfNavigationText, props.get($theme, --base,
261	$wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark');	253	$wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark');
262	$wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark');	254	$wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark');
263		255
264	$wcfContentBackgroundDark: props.def(--wcfContentBackground, rgb(242, 242, 242), 'dark');	256	$wcfContentBackgroundDark: props.def(--wcfContentBackground, props.get($theme, --base, --100), 'dark');
265	$wcfContentBorderDark: props.def(--wcfContentBorder, var(--wcfContentBorderInner), 'dark');	257	$wcfContentBorderInnerDark: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'dark');
266	$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, rgba(#fff, .7), 'dark');	258	$wcfContentBorderDark: props.def(--wcfContentBorder, props.get($wcfContentBorderInnerDark), 'dark');
267	$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, rgba(#fff, .7), 'dark');	259	$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, props.get($theme, --base, --600), 'dark');
		260	$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'dark');
		261	$wcfContentTextDark: props.def(--wcfContentText, props.get($theme, --base, --800), 'dark');
268		262
269	$wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark');	263	$wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark');
270	$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark');	264	$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark');
@@ -289,13 +283,11 @@ $wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.g
289	$wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark');	283	$wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark');
290	$wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark');	284	$wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark');
291		285
292	$wcfSidebarBorderDark: props.def(--wcfSidebarBackground, transparent, 'dark');	286	$wcfSidebarBackgroundDark: props.def(--wcfSidebarBackground, $wcfContentBackground, 'dark');
		287	$wcfSidebarBorderDark: props.def(--wcfSidebarBorder, transparent, 'dark');
293	$wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark');	288	$wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark');
294	$wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark');	289	$wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark');
295	$wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');	290	$wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
296	$wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');	291	$wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
297		292
298	$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --yellow, --900), 'dark');	293	$wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark');
299	$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --yellow, --900-text), 'dark');
300	$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --yellow, --1200), 'dark');
301	$wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --yellow, --1200-text), 'dark');