1 files changed, 124 insertions, 59 deletions

diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index c9117b5..c188e8f 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -7,36 +7,44 @@
 @use 'iro-sass/src/functions';
 @use 'iro-design/src/functions' as fn;
 
+@function light-bezier($x) {
+    @return easing.cubic-bezier(.3, .1, .7, 1, $x);
+}
+
+@function dark-bezier($x) {
+    @return easing.cubic-bezier(.3, .1, .7, 1, $x);
+}
+
 $themes-spec: (
     --light: (
         --levels: (
             --grays: (
-                --50:  (-30) .1 0,
-                --75:  (-16) .3 0,
-                --100: (0) .5 0,
+                --50:  -30 .1 0,
+                --75:  -16 .3 0,
+                --100:   0 .5 0,
             
-                --200: (easing.cubic-bezier(.3, .1, .7, 1, math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)),
-                --300: (easing.cubic-bezier(.3, .1, .7, 1, math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 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)),
+                --200: (light-bezier(math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)),
+                --300: (light-bezier(math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)),
+                --400: (light-bezier(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(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)),
-                --600: (easing.cubic-bezier(.3, .1, .7, 1, math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)),
-                --700: (easing.cubic-bezier(.3, .1, .7, 1, math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)),
-                --800: (easing.cubic-bezier(.3, .1, .7, 1, math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)),
+                --500: (light-bezier(math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)),
+                --600: (light-bezier(math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)),
+                --700: (light-bezier(math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)),
+                --800: (light-bezier(math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)),
                 --900: #000
             ),
 
             --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)),
+                --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)),
@@ -68,56 +76,56 @@ $themes-spec: (
     --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,
+                --50:  1.2 .1 0,
+                --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)),
+            
+                --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)),
+                --900: #fff
             ),
             
             --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)),
+                --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)),
             ),
         ),
 
         --palettes: (
-            --base:   #edddc4                     --grays,
+            --base:   #351c0e                     --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,
+            --bg-base: --base --75,
+            --bg-l1:   --base --100,
+            --bg-l2:   --base --200,
 
             --link: (
-                --fg:         --red --1000,
-                --underline:  --red --400,
-                --fg-inv:     --red --1000-text,
-                --active:     --red --1300,
-                --active-inv: --red --1300-text,
+                --fg:         --yellow --1000,
+                --underline:  --yellow --400,
+                --fg-inv:     --yellow --1000-text,
+                --active:     --yellow --1300,
+                --active-inv: --yellow --1300-text,
             )
         ),
     )
@@ -186,8 +194,8 @@ $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme,
 
 $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));
+$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(#000, .7));
+$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7));
 
 $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base));
 $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
@@ -204,6 +212,7 @@ $wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, -
 $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50));
 
 $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
+$wcfSidebarBorder: props.def(--wcfSidebarBackground, transparent);
 $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
 
 $wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));
@@ -212,9 +221,9 @@ $wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($th
 $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));
+$wcfButtonPrimaryText: props.def(--wcfButtonPrimaryText, 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));
+$wcfButtonPrimaryTextActive: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text));
 
 $wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
 
@@ -225,6 +234,8 @@ $wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActi
 
 $wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
 $wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
+$wcfSidebarDimmedLink: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText));
+$wcfSidebarDimmedLinkActive: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText));
 
 $wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
 $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
@@ -234,3 +245,57 @@ $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get
 
 $wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200));
 $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200));
+
+//
+
+$wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark');
+$wcfHeaderMenuBackgroundDark: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --50), 'dark');
+$wcfHeaderMenuLinkBackgroundDark: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --50), 'dark');
+$wcfHeaderMenuLinkBackgroundActiveDark: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --200), 'dark');
+$wcfHeaderMenuDropdownBackgroundDark: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --50), 'dark');
+$wcfHeaderMenuDropdownBorderDark: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --50), 'dark');
+$wcfHeaderMenuDropdownBackgroundActiveDark: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --200), 'dark');
+
+$wcfNavigationBackgroundDark: props.def(--wcfNavigationBackground, props.get($theme, --bg-base), 'dark');
+$wcfNavigationTextDark: props.def(--wcfNavigationText, props.get($theme, --base, --500), 'dark');
+$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');
+
+$wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark');
+$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark');
+$wcfFooterLinkDark: props.def(--wcfFooterLink, props.get($theme, --base, --700), 'dark');
+$wcfFooterLinkActiveDark: props.def(--wcfFooterLinkActive, props.get($theme, --base, --700), 'dark');
+
+$wcfFooterCopyrightBackgroundDark: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --50), 'dark');
+$wcfFooterCopyrightTextDark: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --500), 'dark');
+$wcfFooterCopyrightLinkDark: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --700), 'dark');
+$wcfFooterCopyrightLinkActiveDark: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --700), 'dark');
+
+$wcfButtonBackgroundDark: props.def(--wcfButtonBackground, props.get($theme, --base, --300), 'dark');
+$wcfButtonTextDark: props.def(--wcfButtonText, props.get($theme, --base, --300-text), 'dark');
+$wcfButtonBackgroundActiveDark: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700), 'dark');
+$wcfButtonTextActiveDark: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text), 'dark');
+
+$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900), 'dark');
+$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --900-text), 'dark');
+$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'dark');
+$wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'dark');
+
+$wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark');
+$wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark');
+
+$wcfSidebarBorderDark: props.def(--wcfSidebarBackground, 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');