New variable organizing

7 files changed, 202 insertions, 201 deletions

diff --git a/src/_board.scss b/src/_board.scss
index eb221d2..994aba6 100644
--- a/src/_board.scss
+++ b/src/_board.scss
@@ -67,7 +67,7 @@
     .messageGroupList {
         a {
             &:hover {
-                text-decoration: underline;
+                text-decoration-line: underline;
             }
         }
     }
diff --git a/src/_core.scss b/src/_core.scss
index cfa1e00..c212ee0 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -14,16 +14,14 @@
 
 @mixin styles--classic {
     :root {
+        @include props.materialize(map.get(vars.$themes, --light));
         @include props.materialize(map.get(vars.$themes, --classic));
-        @include props.materialize(map.values(meta.module-variables('vars')), null);
-        @include props.materialize(map.values(meta.module-variables('vars')), 'classic');
     }
 }
 
 @mixin styles--dark {
     :root {
+        @include props.materialize(map.get(vars.$themes, --light));
         @include props.materialize(map.get(vars.$themes, --dark));
-        @include props.materialize(map.values(meta.module-variables('vars')), null);
-        @include props.materialize(map.values(meta.module-variables('vars')), 'dark');
     }
 }
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 43896f8..5bbe9fb 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -80,21 +80,105 @@ $themes-spec: (
         ),
 
         --semantic: (
-            --bg-l2:         --base --50,
+            --bg-content:    --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,
+                --fg:         --red --1000,
                 --underline:  --red --500,
-                --fg-inv:     --red --1100-text,
+                --fg-inv:     --red --1000-text,
                 --active:     --red --1300,
                 --active-inv: --red --1300-text,
-            )
+            ),
+            
+            --wcfHeaderBackground:                   --base --700,
+            --wcfHeaderMenuBackground:               --base --800,
+            --wcfHeaderMenuLinkBackground:           --base --800,
+            --wcfHeaderMenuLinkBackgroundActive:     --base --700,
+            --wcfHeaderMenuLink:                     --base --50,
+            --wcfHeaderMenuDropdownBackground:       --base --800,
+            --wcfHeaderMenuDropdownBorder:           --base --800,
+            --wcfHeaderMenuDropdownBackgroundActive: --base --700,
+
+            --wcfNavigationBackground: --base --100,
+            --wcfNavigationText:       --base --500,
+            --wcfNavigationLink:       --base --800,
+            --wcfNavigationLinkActive: --base --800,
+
+            --wcfHeaderSearchBoxBackground:       --base --700,
+            --wcfHeaderSearchBoxBackgroundActive: --base --700,
+
+            --wcfContentBackground:   rgb(242, 242, 242),
+            --wcfContentBorderInner:  rgb(224, 224, 224),
+            --wcfContentBorder:       rgb(224, 224, 224),
+            --wcfContentDimmedText:   rgba(#000, .7),
+            --wcfContentDimmedLink:   rgba(#000, .7),
+            --wcfContentHeadlineText: --base --900,
+
+            --wcfFooterBoxBackground:         --base --100,
+            --wcfFooterBoxText:               --base --800,
+            --wcfFooterBoxHeadlineText:       --base --900,
+            --wcfFooterBoxHeadlineLink:       --base --900,
+            --wcfFooterBoxHeadlineLinkActive: --base --900,
+
+            --wcfFooterBackground: --base --700,
+            --wcfFooterText:       --base --100,
+            --wcfFooterLink:       --base --75,
+            --wcfFooterLinkActive: --base --75,
+
+            --wcfFooterCopyrightBackground: --base --800,
+            --wcfFooterCopyrightText:       --base --75,
+            --wcfFooterCopyrightLink:       --base --50,
+            --wcfFooterCopyrightLinkActive: --base --50,
+
+            --wcfSidebarBackground:   --wcfContentBackground,
+            --wcfSidebarBorder:       transparent,
+            --wcfSidebarHeadlineText: --wcfContentHeadlineText,
+            --wcfSidebarText:         --wcfContentText,
+            --wcfSidebarDimmedText:   --wcfContentDimmedText,
+
+            --wcfButtonBackground:       --base --100,
+            --wcfButtonText:             --base --100-text,
+            --wcfButtonBackgroundActive: --base --700,
+            --wcfButtonTextActive:       --base --700-text,
+
+            --wcfButtonPrimaryBackground:       --red --900,
+            --wcfButtonPrimaryText:             --red --900-text,
+            --wcfButtonPrimaryBackgroundActive: --red --1200,
+            --wcfButtonPrimaryTextActive:       --red --1200-text,
+
+            --wcfInputBorderActive: --red --900,
+
+            --wcfBoxShadowCard: none,
+
+            --wcfContentContainerBackground: --bg-content,
+            --wcfContentContainerBorder:     --wcfContentContainerBackground,
+
+            --wcfContentLink:       --link --fg,
+            --wcfContentLinkActive: --link --active,
+
+            --wcfSidebarLink:             --link --fg,
+            --wcfSidebarLinkActive:       --link --active,
+            --wcfSidebarDimmedLink:       --wcfSidebarDimmedText,
+            --wcfSidebarDimmedLinkActive: --wcfSidebarDimmedText,
+
+            --wcfFooterBoxLink:       --link --fg,
+            --wcfFooterBoxLinkActive: --link --active,
+
+            --wcfTabularBoxHeadline:       --link --fg,
+            --wcfTabularBoxHeadlineActive: --link --active,
+
+            --wcfStatusInfoBackground: --base --100,
+            --wcfStatusInfoBorder:     --base --300,
+            --wcfStatusInfoText:       --base --800,
+
+            --wcfStatusSuccessBackground: --green --100,
+            --wcfStatusSuccessBorder:     --green --300,
+            --wcfStatusSuccessText:       --green --1100,
         ),
     ),
 
@@ -158,7 +242,7 @@ $themes-spec: (
         ),
 
         --semantic: (
-            --bg-l2:         --base --100,
+            --bg-content:    --base --100,
             --bg-l1:         --base --300,
             --bg-base:       --base --75,
             --bg-sidebar:    --base --100,
@@ -168,11 +252,37 @@ $themes-spec: (
 
             --link: (
                 --fg:         --red --1200,
-                --underline:  --red --600,
+                --underline:  --red --700,
                 --fg-inv:     --red --1200-text,
                 --active:     --red --1300,
                 --active-inv: --red --1300-text,
-            )
+            ),
+
+            --wcfContentBackground:   --base --75,
+            --wcfContentBorderInner:  --base --300,
+            --wcfContentBorder:       --base --300,
+            --wcfContentHeadlineText: --base --900,
+            --wcfContentDimmedText:   --base --700,
+            --wcfContentDimmedLink:   --base --900,
+            --wcfContentText:         --base --800,
+
+            --wcfSidebarBackground: --base --75,
+
+            --wcfTabularBoxBackgroundActive: --base --75,
+
+            --wcfButtonBackground:       --base --50,
+            --wcfButtonText:             --base --50-text,
+            --wcfButtonBackgroundActive: --base --700,
+            --wcfButtonTextActive:       --base --700-text,
+
+            --wcfButtonPrimaryBackground:       --red --1000,
+            --wcfButtonPrimaryText:             --red --1000-text,
+            --wcfButtonPrimaryBackgroundActive: --red --1200,
+            --wcfButtonPrimaryTextActive:       --red --1200-text,
+
+            --wcfStatusSuccessBackground: --green --1000,
+            --wcfStatusSuccessBorder:     --green --1000,
+            --wcfStatusSuccessText:       --green --100,
         ),
     ),
 
@@ -222,11 +332,68 @@ $themes-spec: (
         --semantic: (
             --bg-base:       --base --75,
             --bg-l1:         --base --100,
-            --bg-l2:         --base --200,
+            --bg-content:    --base --200,
             --bg-sidebar:    --base --100,
             --bg-nav:        --base --75,
             --bg-footer-box: --base --75,
             --bg-footer:     --base --75,
+
+            --wcfHeaderBackground:                   --bg-base,
+            --wcfHeaderMenuBackground:               --base --50,
+            --wcfHeaderMenuLinkBackground:           --base --50,
+            --wcfHeaderMenuLinkBackgroundActive:     --base --200,
+            --wcfHeaderMenuLink:                     --base --900,
+            --wcfHeaderMenuDropdownBackground:       --base --50,
+            --wcfHeaderMenuDropdownBorder:           --base --50,
+            --wcfHeaderMenuDropdownBackgroundActive: --base --200,
+
+            --wcfNavigationBackground: --bg-base,
+            --wcfNavigationText:       --base --500,
+            --wcfNavigationLink:       --base --800,
+            --wcfNavigationLinkActive: --base --800,
+
+            --wcfContentBackground:  --base --100,
+            --wcfContentBorderInner: --base --300,
+            --wcfContentBorder:      --wcfContentBorderInnerDark,
+            --wcfContentDimmedText:  --base --600,
+            --wcfContentDimmedLink:  --base --900,
+            --wcfContentText:        --base --800,
+
+            --wcfFooterText:       --base --500,
+            --wcfFooterLink:       --base --700,
+            --wcfFooterLinkActive: --base --700,
+
+            --wcfFooterCopyrightBackground: --base --50,
+            --wcfFooterCopyrightText:       --base --500,
+            --wcfFooterCopyrightLink:       --base --700,
+            --wcfFooterCopyrightLinkActive: --base --700,
+
+            --wcfButtonBackground:       --base --300,
+            --wcfButtonText:             --base --300-text,
+            --wcfButtonBackgroundActive: --base --700,
+            --wcfButtonTextActive:       --base --700-text,
+
+            --wcfButtonPrimaryBackground:       --red --900,
+            --wcfButtonPrimaryText:             --red --900-text,
+            --wcfButtonPrimaryBackgroundActive: --red --1200,
+            --wcfButtonPrimaryTextActive:       --red --1200-text,
+
+            --wcfContentContainerBackground: --base --200,
+            --wcfContentContainerBorder:     --wcfContentContainerBackgroundDark,
+
+            --wcfSidebarBackground:       --wcfContentBackground,
+            --wcfSidebarBorder:           transparent,
+            --wcfSidebarLink:             --link --fg,
+            --wcfSidebarLinkActive:       --link --active,
+            --wcfSidebarText:             --wcfContentTextDark,
+            --wcfSidebarDimmedLink:       --wcfSidebarDimmedText,
+            --wcfSidebarDimmedLinkActive: --wcfSidebarDimmedText,
+
+            --wcfTabularBoxBackgroundActive: --base --100,
+
+            --wcfStatusInfoBackground: --base --100,
+            --wcfStatusInfoBorder:     --base --300,
+            --wcfStatusInfoText:       --base --800,
         ),
     )
 );
@@ -234,7 +401,7 @@ $themes-spec: (
 $themes: ();
 
 @each $theme-name, $theme in $themes-spec {
-    $compiled: props.def(--colors, (), 'color');
+    $compiled: props.def('', (), 'color');
 
     @each $palette-name, $palette in map.get($theme, --palettes) {
         $base-color: list.nth($palette, 1);
@@ -251,12 +418,22 @@ $themes: ();
             @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...)));
+
+                @if meta.type-of($re1) == 'color' {
+                    $res: map.merge($res, ($key: $re1));
+                } @else {
+                    $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...);
+
+            @if meta.type-of($ref1) == 'color' {
+                $res: $ref1;
+            } @else {
+                $res: props.get($compiled, $ref1, $ref2...);
+            }
         }
 
         $compiled: props.merge($compiled, ( $color: $res ));
@@ -266,178 +443,3 @@ $themes: ();
 }
 
 $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));
-
-$wcfStatusSuccessBackground: props.def(--wcfStatusSuccessBackground, props.get($theme, --green, --100));
-$wcfStatusSuccessBorder: props.def(--wcfStatusSuccessBorder, props.get($theme, --green, --300));
-$wcfStatusSuccessText: props.def(--wcfStatusSuccessText, props.get($theme, --green, --1100));
-
-//
-
-$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');
-
-$wcfStatusSuccessBackgroundClassic: props.def(--wcfStatusSuccessBackground, props.get($theme, --green, --1000), 'classic');
-$wcfStatusSuccessBorderClassic: props.def(--wcfStatusSuccessBorder, props.get($theme, --green, --1000), 'classic');
-$wcfStatusSuccessTextClassic: props.def(--wcfStatusSuccessText, props.get($theme, --green, --100), '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');
diff --git a/src/_footer.scss b/src/_footer.scss
index 54a0500..77a3e7b 100644
--- a/src/_footer.scss
+++ b/src/_footer.scss
@@ -2,7 +2,7 @@
     .boxesFooterBoxes {
         a {
             &:hover {
-                text-decoration: underline;
+                text-decoration-line: underline;
             }
         }
     }
diff --git a/src/_reaction.scss b/src/_reaction.scss
index ecf88ad..56d719e 100644
--- a/src/_reaction.scss
+++ b/src/_reaction.scss
@@ -5,8 +5,8 @@
 @mixin styles {
     .messageFooter {
         .reactionType {
-            inline-size: props.get(core.$vlpnSmileySize);
-            block-size: props.get(core.$vlpnSmileySize);
+            inline-size: 28px;
+            block-size: 28px;
         }
     }
 
diff --git a/src/_sidebar.scss b/src/_sidebar.scss
index 8c74988..5ddb188 100644
--- a/src/_sidebar.scss
+++ b/src/_sidebar.scss
@@ -28,7 +28,7 @@
 
         a {
             &:hover {
-                text-decoration: underline;
+                text-decoration-line: underline;
             }
         }
     }
diff --git a/src/_thread.scss b/src/_thread.scss
index c602a87..e4feb1c 100644
--- a/src/_thread.scss
+++ b/src/_thread.scss
@@ -10,7 +10,7 @@
 
     .messageSidebar {
         a:hover {
-            text-decoration: underline;
+            text-decoration-line: underline;
         }
 
         .username {
@@ -21,17 +21,18 @@
     .messageText,
     .messageSignature {
         a {
-            text-decoration: underline;
-            text-decoration-color: props.get(core.$vlpnLinkUnderline);
+            text-decoration-line: underline;
+            text-decoration-thickness: 1px;
+            text-decoration-color: props.get(core.$theme, --link, --underline);
         }
 
         a:hover {
-            text-decoration: underline;
+            text-decoration-line: underline;
             text-decoration-color: currentColor;
         }
     }
 
     .quoteBoxTitle a {
-        text-decoration: none;
+        text-decoration-line: none;
     }
 }