6 files changed, 143 insertions, 10 deletions

diff --git a/src/_avatar.scss b/src/_avatar.scss
new file mode 100644
index 0000000..767ca38
--- /dev/null
+++ b/src/_avatar.scss
@@ -0,0 +1,5 @@
+@mixin styles {
+    .userAvatarImage {
+        border-radius: 20%;
+    }
+}
diff --git a/src/_board.scss b/src/_board.scss
new file mode 100644
index 0000000..6a4244e
--- /dev/null
+++ b/src/_board.scss
@@ -0,0 +1,21 @@
+@mixin styles {
+    .wbbBoardNode__unreadIcon {
+        background-image: url(../images/style-6/custom/boardNewM.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+
+        fa-icon {
+            visibility: hidden;
+        }
+    }
+
+    .wbbBoardNode__defaultIcon {
+        background-image: url(../images/style-6/custom/boardM.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+
+        fa-icon {
+            visibility: hidden;
+        }
+    }
+}
diff --git a/src/_common.vars.scss b/src/_common.vars.scss
index 36008f9..47c32d5 100644
--- a/src/_common.vars.scss
+++ b/src/_common.vars.scss
@@ -2,7 +2,59 @@
 
 @use 'core';
 
+$vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000));
+$vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300));
+
 $wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --600));
 $wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800));
 $wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get(core.$theme, --base, --800));
 $wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get(core.$theme, --base, --700));
+$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get(core.$theme, --base, --800));
+$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get(core.$theme, --base, --800));
+$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get(core.$theme, --base, --700));
+
+$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get(core.$theme, --base, --100));
+$wcfNavigationText: props.def(--wcfNavigationText, props.get(core.$theme, --base, --500));
+$wcfNavigationLink: props.def(--wcfNavigationLink, props.get(core.$theme, --base, --800));
+$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800));
+
+$wcfContentBackground: props.def(--wcfContentBackground, props.get(core.$theme, --base, --75));
+
+$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100));
+$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800));
+
+$wcfFooterBackground: props.def(--wcfFooterBackground, props.get(core.$theme, --base, --700));
+$wcfFooterText: props.def(--wcfFooterText, props.get(core.$theme, --base, --100));
+$wcfFooterLink: props.def(--wcfFooterLink, props.get(core.$theme, --base, --75));
+$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get(core.$theme, --base, --75));
+
+$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get(core.$theme, --base, --800));
+$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get(core.$theme, --base, --75));
+$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get(core.$theme, --base, --50));
+$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get(core.$theme, --base, --50));
+
+$wcfSidebarBackground: props.def(--wcfSidebarBackground, transparent);
+
+$wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --200));
+$wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --200-text));
+$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get(core.$theme, --base, --500));
+$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get(core.$theme, --base, --500-text));
+
+$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --base, --500));
+$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --base, --500-text));
+$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --base, --800));
+$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --base, --800-text));
+
+$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
+
+$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));
+
+$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));
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 65ebb65..40f98b0 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -9,24 +9,41 @@ $themes-spec: (
     --light: (
         --levels: (
             --grays: (
-                --50:  (-16) .8 0,
-                --75:  (-8) .9 0,
-                --100: (0) 1 0,
+                --50:  (-30) .1 0,
+                --75:  (-16) .3 0,
+                --100: (0) .5 0,
             
-                --200: (easing.cubic-bezier(.2, .1, .7, 1, math.div(1, 7)) * 87) (1 + 1 * math.div(1, 7)) (-30 * math.div(1, 7)),
-                --300: (easing.cubic-bezier(.2, .1, .7, 1, math.div(2, 7)) * 87) (1 + 1 * math.div(2, 7)) (-30 * math.div(2, 7)),
-                --400: (easing.cubic-bezier(.2, .1, .7, 1, math.div(3, 7)) * 87) (1 + 1 * math.div(3, 7)) (-30 * math.div(3, 7)),
+                --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)),
             
-                --500: (easing.cubic-bezier(.2, .1, .7, 1, math.div(4, 7)) * 87) (1 + 1 * math.div(4, 7)) (-30 * math.div(4, 7)),
-                --600: (easing.cubic-bezier(.2, .1, .7, 1, math.div(5, 7)) * 87) (1 + 1 * math.div(5, 7)) (-30 * math.div(5, 7)),
-                --700: (easing.cubic-bezier(.2, .1, .7, 1, math.div(6, 7)) * 87) (1 + 1 * math.div(6, 7)) (-30 * math.div(6, 7)),
-                --800: (easing.cubic-bezier(.2, .1, .7, 1, math.div(7, 7)) * 87) (1 + 1 * math.div(7, 7)) (-30 * math.div(7, 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)),
                 --900: #000
             ),
+
+            --colors: (
+                --100:  (math.div(0, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
+                --200:  (math.div(1, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
+                --300:  (math.div(2, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
+                --400:  (math.div(3, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
+                --500:  (math.div(4, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
+                --600:  (math.div(5, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
+                --700:  (math.div(6, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
+                --800:  (math.div(7, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
+                --900:  (math.div(8, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
+                --1000: (math.div(9, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
+                --1100: (math.div(10, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
+                --1200: (math.div(11, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
+                --1300: (math.div(12, 12) * 80 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
+            ),
         ),
 
         --palettes: (
             --base: #edddc4 --grays,
+            --red:  #731601 --colors,
         ),
     ),
 );
diff --git a/src/_sidebar.scss b/src/_sidebar.scss
new file mode 100644
index 0000000..d220678
--- /dev/null
+++ b/src/_sidebar.scss
@@ -0,0 +1,32 @@
+@use 'iro-sass/src/props';
+
+@use 'core';
+
+@mixin styles {
+    .boxesSidebarLeft{
+        margin-inline-end: 30px;
+    }
+
+    .boxesSidebarRight {
+        margin-inline-start: 30px;
+    }
+
+    .boxesSidebarLeft, .boxesSidebarRight {
+        .box {
+            border-radius: 0;
+
+            &:not(:first-child) {
+                margin-block-start: 0;
+                padding-block-start: 10px;
+
+                &::before {
+                    content: "";
+                    display: block;
+                    block-size: 1px;
+                    margin-block-end: 30px;
+                    background-color: props.get(core.$theme, --base, --200);
+                }
+            }
+        }
+    }
+}
diff --git a/src/light.scss b/src/light.scss
index 2f9abdc..4ab586a 100644
--- a/src/light.scss
+++ b/src/light.scss
@@ -5,8 +5,14 @@
 @use 'common';
 
 @use 'header';
+@use 'sidebar';
+@use 'board';
+@use 'avatar';
 
 @include core.styles--light;
 @include common.styles;
 
 @include header.styles;
+@include sidebar.styles;
+@include board.styles;
+@include avatar.styles;