Update

author: Volpeon <git@volpeon.ink> 2024-12-11 18:58:06 +0100
committer: Volpeon <git@volpeon.ink> 2024-12-11 18:58:06 +0100
commit: 84e98b9bf792194056a9f6975059c2c78a0c3c2a (patch)
tree: 3074613b6d41df07f9fd758709ff9a3ba6335b8f /src/_core.vars.scss
parent: Fix (diff)
download: furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.tar.gz
furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.tar.bz2
furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.zip
1 files changed, 46 insertions, 40 deletions
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 2911562..d062bd0 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -23,7 +23,7 @@ $themes-spec: (
    --light: (
        --levels: (
            --grays: (
-                --50:  -25 .1 0,
+                --50:  #fff,
                --75:  -16 .3 0,
                --100:   0 .5 0,
            
@@ -39,27 +39,27 @@ $themes-spec: (
            ),
            --colors: (
-                --100:  (math.div(0,  12) * 97 - 10) (.3 + .7 * math.div(0, 12))  (-30 * math.div(0, 12)),
+                --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 * math.div(1, 12))  (-30 * math.div(1, 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 * math.div(2, 12))  (-30 * math.div(2, 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 * math.div(3, 12))  (-30 * math.div(3, 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 * math.div(4, 12))  (-30 * math.div(4, 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 * math.div(5, 12))  (-30 * math.div(5, 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 * math.div(6, 12))  (-30 * math.div(6, 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 * math.div(7, 12))  (-30 * math.div(7, 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 * math.div(8, 12))  (-30 * math.div(8, 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 * math.div(9, 12))  (-30 * math.div(9, 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 * math.div(10, 12)) (-30 * math.div(10, 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 * math.div(11, 12)) (-30 * math.div(11, 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 * math.div(12, 12)) (-30 * math.div(12, 12)),
+                --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
            ),
        ),
        --palettes: (
            --base:   #edddc4                     --grays,
-            --red:    oklch(36.32% 0.1302 53.73)  --colors,
+            --red:    oklch(36.32% 0.1402 53.73)  --colors,
-            --blue:   oklch(36.32% 0.1302 273.58) --colors,
+            --blue:   oklch(36.32% 0.1402 273.58) --colors,
-            --yellow: oklch(36.32% 0.1302 92.94)  --colors,
+            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
        ),
        --semantic: (
@@ -72,9 +72,9 @@ $themes-spec: (
            --bg-footer:     --base --700,
            --link: (
-                --fg:         --red --1000,
+                --fg:         --red --1100,
                --underline:  --red --500,
-                --fg-inv:     --red --1000-text,
+                --fg-inv:     --red --1100-text,
                --active:     --red --1300,
                --active-inv: --red --1300-text,
            )
@@ -100,27 +100,27 @@ $themes-spec: (
            ),
            --colors: (
-                --100:  (math.div(0,  12) * 97 - 10) (.3 + .7 * math.div(0, 12))  (-30 * math.div(0, 12)),
+                --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 * math.div(1, 12))  (-30 * math.div(1, 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 * math.div(2, 12))  (-30 * math.div(2, 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 * math.div(3, 12))  (-30 * math.div(3, 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 * math.div(4, 12))  (-30 * math.div(4, 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 * math.div(5, 12))  (-30 * math.div(5, 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 * math.div(6, 12))  (-30 * math.div(6, 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 * math.div(7, 12))  (-30 * math.div(7, 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 * math.div(8, 12))  (-30 * math.div(8, 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 * math.div(9, 12))  (-30 * math.div(9, 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 * math.div(10, 12)) (-30 * math.div(10, 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 * math.div(11, 12)) (-30 * math.div(11, 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 * math.div(12, 12)) (-30 * math.div(12, 12)),
+                --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
            ),
        ),
        --palettes: (
            --base:   #edddc4                     --grays,
-            --red:    oklch(36.32% 0.1302 53.73)  --colors,
+            --red:    oklch(36.32% 0.1402 53.73)  --colors,
-            --blue:   oklch(36.32% 0.1302 273.58) --colors,
+            --blue:   oklch(36.32% 0.1402 273.58) --colors,
-            --yellow: oklch(36.32% 0.1302 92.94)  --colors,
+            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
        ),
        --semantic: (
@@ -179,9 +179,9 @@ $themes-spec: (
        --palettes: (
            --base:   #351c0e                     --grays,
-            --red:    oklch(36.32% 0.1302 53.73)  --colors,
+            --red:    oklch(36.32% 0.1402 53.73)  --colors,
-            --blue:   oklch(36.32% 0.1302 273.58) --colors,
+            --blue:   oklch(36.32% 0.1402 273.58) --colors,
-            --yellow: oklch(36.32% 0.1302 92.94)  --colors,
+            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
        ),
        --semantic: (
@@ -281,6 +281,7 @@ $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.g
 $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
 $wcfSidebarBorder: props.def(--wcfSidebarBorder, transparent);
+$wcfSidebarHeadlineText: props.def(--wcfSidebarHeadlineText, props.get($wcfContentHeadlineText));
 $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
 $wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));
@@ -314,8 +315,9 @@ $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLink
 $wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
 $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
-$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200));
+$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100));
-$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200));
+$wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300));
+$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800));
 //
@@ -392,3 +394,7 @@ $wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSideb
 $wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
 $wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark');
+$wcfStatusInfoBackgroundDark: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100), 'dark');
+$wcfStatusInfoBorderDark: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300), 'dark');
+$wcfStatusInfoTextDark: props.def(--wcfStatusInfoText, props.get($theme, --base, --800), 'dark');
author	Volpeon <git@volpeon.ink>	2024-12-11 18:58:06 +0100
committer	Volpeon <git@volpeon.ink>	2024-12-11 18:58:06 +0100
commit	84e98b9bf792194056a9f6975059c2c78a0c3c2a (patch)
tree	3074613b6d41df07f9fd758709ff9a3ba6335b8f /src/_core.vars.scss
parent	Fix (diff)
download	furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.tar.gz furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.tar.bz2 furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.zip

diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 2911562..d062bd0 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss
@@ -23,7 +23,7 @@ $themes-spec: (
23	--light: (	23	--light: (
24	--levels: (	24	--levels: (
25	--grays: (	25	--grays: (
26	--50: -25 .1 0,	26	--50: #fff,
27	--75: -16 .3 0,	27	--75: -16 .3 0,
28	--100: 0 .5 0,	28	--100: 0 .5 0,
29		29
@@ -39,27 +39,27 @@ $themes-spec: (
39	),	39	),
40		40
41	--colors: (	41	--colors: (
42	--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * math.div(0, 12)) (-30 * math.div(0, 12)),	42	--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
43	--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * math.div(1, 12)) (-30 * math.div(1, 12)),	43	--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
44	--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * math.div(2, 12)) (-30 * math.div(2, 12)),	44	--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
45	--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * math.div(3, 12)) (-30 * math.div(3, 12)),	45	--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
46	--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * math.div(4, 12)) (-30 * math.div(4, 12)),	46	--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
47	--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * math.div(5, 12)) (-30 * math.div(5, 12)),	47	--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
48	--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * math.div(6, 12)) (-30 * math.div(6, 12)),	48	--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
49	--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * math.div(7, 12)) (-30 * math.div(7, 12)),	49	--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
50	--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * math.div(8, 12)) (-30 * math.div(8, 12)),	50	--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
51	--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * math.div(9, 12)) (-30 * math.div(9, 12)),	51	--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
52	--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * math.div(10, 12)) (-30 * math.div(10, 12)),	52	--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
53	--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * math.div(11, 12)) (-30 * math.div(11, 12)),	53	--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
54	--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * math.div(12, 12)) (-30 * math.div(12, 12)),	54	--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
55	),	55	),
56	),	56	),
57		57
58	--palettes: (	58	--palettes: (
59	--base: #edddc4 --grays,	59	--base: #edddc4 --grays,
60	--red: oklch(36.32% 0.1302 53.73) --colors,	60	--red: oklch(36.32% 0.1402 53.73) --colors,
61	--blue: oklch(36.32% 0.1302 273.58) --colors,	61	--blue: oklch(36.32% 0.1402 273.58) --colors,
62	--yellow: oklch(36.32% 0.1302 92.94) --colors,	62	--yellow: oklch(36.32% 0.1402 92.94) --colors,
63	),	63	),
64		64
65	--semantic: (	65	--semantic: (
@@ -72,9 +72,9 @@ $themes-spec: (
72	--bg-footer: --base --700,	72	--bg-footer: --base --700,
73		73
74	--link: (	74	--link: (
75	--fg: --red --1000,	75	--fg: --red --1100,
76	--underline: --red --500,	76	--underline: --red --500,
77	--fg-inv: --red --1000-text,	77	--fg-inv: --red --1100-text,
78	--active: --red --1300,	78	--active: --red --1300,
79	--active-inv: --red --1300-text,	79	--active-inv: --red --1300-text,
80	)	80	)
@@ -100,27 +100,27 @@ $themes-spec: (
100	),	100	),
101		101
102	--colors: (	102	--colors: (
103	--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * math.div(0, 12)) (-30 * math.div(0, 12)),	103	--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
104	--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * math.div(1, 12)) (-30 * math.div(1, 12)),	104	--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
105	--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * math.div(2, 12)) (-30 * math.div(2, 12)),	105	--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
106	--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * math.div(3, 12)) (-30 * math.div(3, 12)),	106	--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
107	--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * math.div(4, 12)) (-30 * math.div(4, 12)),	107	--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
108	--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * math.div(5, 12)) (-30 * math.div(5, 12)),	108	--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
109	--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * math.div(6, 12)) (-30 * math.div(6, 12)),	109	--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
110	--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * math.div(7, 12)) (-30 * math.div(7, 12)),	110	--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
111	--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * math.div(8, 12)) (-30 * math.div(8, 12)),	111	--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
112	--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * math.div(9, 12)) (-30 * math.div(9, 12)),	112	--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
113	--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * math.div(10, 12)) (-30 * math.div(10, 12)),	113	--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
114	--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * math.div(11, 12)) (-30 * math.div(11, 12)),	114	--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
115	--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * math.div(12, 12)) (-30 * math.div(12, 12)),	115	--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
116	),	116	),
117	),	117	),
118		118
119	--palettes: (	119	--palettes: (
120	--base: #edddc4 --grays,	120	--base: #edddc4 --grays,
121	--red: oklch(36.32% 0.1302 53.73) --colors,	121	--red: oklch(36.32% 0.1402 53.73) --colors,
122	--blue: oklch(36.32% 0.1302 273.58) --colors,	122	--blue: oklch(36.32% 0.1402 273.58) --colors,
123	--yellow: oklch(36.32% 0.1302 92.94) --colors,	123	--yellow: oklch(36.32% 0.1402 92.94) --colors,
124	),	124	),
125		125
126	--semantic: (	126	--semantic: (
@@ -179,9 +179,9 @@ $themes-spec: (
179		179
180	--palettes: (	180	--palettes: (
181	--base: #351c0e --grays,	181	--base: #351c0e --grays,
182	--red: oklch(36.32% 0.1302 53.73) --colors,	182	--red: oklch(36.32% 0.1402 53.73) --colors,
183	--blue: oklch(36.32% 0.1302 273.58) --colors,	183	--blue: oklch(36.32% 0.1402 273.58) --colors,
184	--yellow: oklch(36.32% 0.1302 92.94) --colors,	184	--yellow: oklch(36.32% 0.1402 92.94) --colors,
185	),	185	),
186		186
187	--semantic: (	187	--semantic: (
@@ -281,6 +281,7 @@ $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.g
281		281
282	$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);	282	$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
283	$wcfSidebarBorder: props.def(--wcfSidebarBorder, transparent);	283	$wcfSidebarBorder: props.def(--wcfSidebarBorder, transparent);
		284	$wcfSidebarHeadlineText: props.def(--wcfSidebarHeadlineText, props.get($wcfContentHeadlineText));
284	$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));	285	$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
285		286
286	$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));	287	$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));
@@ -314,8 +315,9 @@ $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLink
314	$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));	315	$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
315	$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));	316	$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
316		317
317	$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200));	318	$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100));
318	$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200));	319	$wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300));
		320	$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800));
319		321
320	//	322	//
321		323
@@ -392,3 +394,7 @@ $wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSideb
392	$wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');	394	$wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark');
393		395
394	$wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark');	396	$wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark');
		397
		398	$wcfStatusInfoBackgroundDark: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100), 'dark');
		399	$wcfStatusInfoBorderDark: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300), 'dark');
		400	$wcfStatusInfoTextDark: props.def(--wcfStatusInfoText, props.get($theme, --base, --800), 'dark');