path: root/src/_core.vars.scss

@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;

@function light-bezier($x) {
    @return easing.cubic-bezier(.3, .1, .7, 1, $x);
}

@function classic-bezier($x) {
    @return easing.cubic-bezier(.3, .1, .8, 1, $x);
}

@function dark-bezier($x) {
    @return easing.cubic-bezier(.3, .1, .7, 1, $x);
}

$themes-spec: (
    --light: (
        --levels: (
            --grays: (
                --50:  #fff,
                --75:  -16 .3 0,
                --100:   0 .5 0,
            
                --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: (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)),
                --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)),
            ),
        ),

        --palettes: (
            --base:   #edddc4                     --grays,
            --red:    oklch(36.32% 0.1402 53.73)  --colors,
            --blue:   oklch(36.32% 0.1402 273.58) --colors,
            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
        ),

        --semantic: (
            --bg-l2:         --base --50,
            --bg-l1:         --base --75,
            --bg-base:       --base --100,
            --bg-sidebar:    --base --75,
            --bg-nav:        --base --100,
            --bg-footer-box: --base --100,
            --bg-footer:     --base --700,

            --link: (
                --fg:         --red --1100,
                --underline:  --red --500,
                --fg-inv:     --red --1100-text,
                --active:     --red --1300,
                --active-inv: --red --1300-text,
            )
        ),
    ),

    --classic: (
        --levels: (
            --grays: (
                --50:  -25 .1 0,
                --75:  -14 .6 0,
                --100:  -1  1 0,
            
                --200: (light-bezier(math.div(1, 7)) * 87) (1.2 + 0.8 * math.div(0, 6)) (-30 * math.div(1, 7)),
                --300: (light-bezier(math.div(2, 7)) * 87) (1.2 + 0.8 * math.div(1, 6)) (-30 * math.div(2, 7)),
                --400: (light-bezier(math.div(3, 7)) * 87) (1.2 + 0.8 * math.div(2, 6)) (-30 * math.div(3, 7)),
            
                --500: (light-bezier(math.div(4, 7)) * 87) (1.2 + 0.8 * math.div(3, 6)) (-30 * math.div(4, 7)),
                --600: (light-bezier(math.div(5, 7)) * 87) (1.2 + 0.8 * math.div(4, 6)) (-30 * math.div(5, 7)),
                --700: (light-bezier(math.div(6, 7)) * 87) (1.2 + 0.8 * math.div(5, 6)) (-30 * math.div(6, 7)),
                --800: (light-bezier(math.div(7, 7)) * 87) (1.2 + 0.8 * 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)),
                --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)),
            ),
        ),

        --palettes: (
            --base:   #edddc4                     --grays,
            --red:    oklch(36.32% 0.1402 53.73)  --colors,
            --blue:   oklch(36.32% 0.1402 273.58) --colors,
            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
        ),

        --semantic: (
            --bg-l2:         --base --100,
            --bg-l1:         --base --300,
            --bg-base:       --base --75,
            --bg-sidebar:    --base --100,
            --bg-nav:        --base --75,
            --bg-footer-box: --base --100,
            --bg-footer:     --base --600,

            --link: (
                --fg:         --red --1200,
                --underline:  --red --600,
                --fg-inv:     --red --1200-text,
                --active:     --red --1300,
                --active-inv: --red --1300-text,
            )
        ),
    ),

    --dark: (
        --levels: (
            --grays: (
                --50:  1.2 .1 0,
                --75:  0.7 .2 0,
                --100: 0   .4 0,
            
                --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 + .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)  (.6 + .6 * math.div(0, 12))  (-30 + 10 * math.div(0, 12)),
                --200:  (math.div(1, 12) * -104 + 2)  (.6 + .6 * math.div(1, 12))  (-30 + 10 * math.div(1, 12)),
                --300:  (math.div(2, 12) * -104 + 2)  (.6 + .6 * math.div(2, 12))  (-30 + 10 * math.div(2, 12)),
                --400:  (math.div(3, 12) * -104 + 2)  (.6 + .6 * math.div(3, 12))  (-30 + 10 * math.div(3, 12)),
                --500:  (math.div(4, 12) * -104 + 2)  (.6 + .6 * math.div(4, 12))  (-30 + 10 * math.div(4, 12)),
                --600:  (math.div(5, 12) * -104 + 2)  (.6 + .6 * math.div(5, 12))  (-30 + 10 * math.div(5, 12)),
                --700:  (math.div(6, 12) * -104 + 2)  (.6 + .6 * math.div(6, 12))  (-30 + 10 * math.div(6, 12)),
                --800:  (math.div(7, 12) * -104 + 2)  (.6 + .6 * math.div(7, 12))  (-30 + 10 * math.div(7, 12)),
                --900:  (math.div(8, 12) * -104 + 2)  (.6 + .6 * math.div(8, 12))  (-30 + 10 * math.div(8, 12)),
                --1000: (math.div(9, 12) * -104 + 2)  (.6 + .6 * math.div(9, 12))  (-30 + 10 * math.div(9, 12)),
                --1100: (math.div(10, 12) * -104 + 2) (.6 + .6 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)),
                --1200: (math.div(11, 12) * -104 + 2) (.6 + .6 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)),
                --1300: (math.div(12, 12) * -104 + 2) (.6 + .6 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)),
            ),
        ),

        --palettes: (
            --base:   #351c0e                     --grays,
            --red:    oklch(36.32% 0.1402 53.73)  --colors,
            --blue:   oklch(36.32% 0.1402 273.58) --colors,
            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
        ),

        --semantic: (
            --bg-base:       --base --75,
            --bg-l1:         --base --100,
            --bg-l2:         --base --200,
            --bg-sidebar:    --base --100,
            --bg-nav:        --base --75,
            --bg-footer-box: --base --75,
            --bg-footer:     --base --75,
        ),
    )
);

$themes: ();

@each $theme-name, $theme in $themes-spec {
    $compiled: props.def(--colors, (), 'color');

    @each $palette-name, $palette in map.get($theme, --palettes) {
        $base-color: list.nth($palette, 1);
        $levels:     list.nth($palette, 2);

        $palette: fn.palette($base-color, map.get($theme, --levels, $levels), list.nth(map.get($theme, --palettes, --base), 1));
        $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-nav));
$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(#000, .7));
$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7));
$wcfContentHeadlineText: props.def(--wcfContentHeadlineText, props.get($theme, --base, --900));

$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-footer-box));
$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxHeadlineText, props.get($theme, --base, --900));
$wcfFooterBoxHeadlineLink: props.def(--wcfFooterBoxHeadlineLink, props.get($theme, --base, --900));
$wcfFooterBoxHeadlineLinkActive: props.def(--wcfFooterBoxHeadlineLinkActive, props.get($theme, --base, --900));

$wcfFooterBackground: props.def(--wcfFooterBackground, props.get($theme, --bg-footer));
$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);
$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));
$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(--wcfButtonPrimaryText, props.get($theme, --red, --900-text));
$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200));
$wcfButtonPrimaryTextActive: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text));

$wcfInputBorderActive: props.def(--wcfInputBorderActive, props.get($theme, --red, --900));

$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);

$wcfContentContainerBackground: props.def(--wcfContentContainerBackground, props.get($theme, --bg-l2));
$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));
$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));

$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));

$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100));
$wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300));
$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800));

//

$wcfContentBackgroundClassic: props.def(--wcfContentBackground, props.get($theme, --base, --75), 'classic');
$wcfContentBorderInnerClassic: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'classic');
$wcfContentHeadlineTextClassic: props.def(--wcfContentHeadlineText, props.get($theme, --base, --900), 'classic');
$wcfContentDimmedTextClassic: props.def(--wcfContentDimmedText, props.get($theme, --base, --700), 'classic');
$wcfContentDimmedLinkClassic: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'classic');
$wcfContentTextClassic: props.def(--wcfContentText, props.get($theme, --base, --800), 'classic');

$wcfSidebarBackgroundClassic: props.def(--wcfSidebarBackground, props.get($theme, --base, --75), 'classic');

$wcfTabularBoxBackgroundActiveClassic: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --75), 'classic');

$wcfButtonBackgroundClassic: props.def(--wcfButtonBackground, props.get($theme, --base, --50), 'classic');
$wcfButtonTextClassic: props.def(--wcfButtonText, props.get($theme, --base, --50-text), 'classic');
$wcfButtonBackgroundActiveClassic: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700), 'classic');
$wcfButtonTextActiveClassic: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text), 'classic');

$wcfButtonPrimaryBackgroundClassic: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --1000), 'classic');
$wcfButtonPrimaryTextClassic: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --1000-text), 'classic');
$wcfButtonPrimaryBackgroundActiveClassic: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'classic');
$wcfButtonPrimaryTextActiveClassic: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'classic');

//

$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, 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');

$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');

$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');

$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');