7 files changed, 153 insertions, 18 deletions

diff --git a/package.json b/package.json
index 41d839e..42e4bc4 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,10 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:design": "sass -I node_modules src/design.scss dist/design.css",
+    "build:light": "sass -I node_modules src/light.scss dist/light.css",
+    "build:classic": "sass -I node_modules src/classic.scss dist/classic.css",
     "build:dark": "sass -I node_modules src/dark.scss dist/dark.css",
-    "build": "pnpm build:design && pnpm build:dark"
+    "build": "pnpm build:light && pnpm build:classic && pnpm build:dark"
   },
   "keywords": [],
   "author": "",
diff --git a/src/_badge.scss b/src/_badge.scss
index 34fc392..c74eb29 100644
--- a/src/_badge.scss
+++ b/src/_badge.scss
@@ -9,8 +9,8 @@
         vertical-align: baseline;
 
         &.badgeUpdate {
-            --background-color: #{props.get(core.$vlpnLink)};
-            --color: #{props.get(core.$vlpnLinkFg)};
+            --background-color: #{props.get(core.$theme, --red, --1000)};
+            --color: #{props.get(core.$theme, --red, --1000-text)};
         }
     
         &.yellow {
diff --git a/src/_core.scss b/src/_core.scss
index e3a2c2e..cfa1e00 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -12,6 +12,14 @@
     }
 }
 
+@mixin styles--classic {
+    :root {
+        @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, --dark));
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index c36e6bc..14f4d31 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -11,6 +11,10 @@
     @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);
 }
@@ -19,7 +23,7 @@ $themes-spec: (
     --light: (
         --levels: (
             --grays: (
-                --50:  -30 .1 0,
+                --50:  -25 .1 0,
                 --75:  -16 .3 0,
                 --100:   0 .5 0,
             
@@ -59,9 +63,13 @@ $themes-spec: (
         ),
 
         --semantic: (
-            --bg-l2:   --base --50,
-            --bg-l1:   --base --75,
-            --bg-base: --base --100,
+            --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 --1000,
@@ -73,6 +81,67 @@ $themes-spec: (
         ),
     ),
 
+    --classic: (
+        --levels: (
+            --grays: (
+                --50:  -25 .1 0,
+                --75:  -16 .3 0,
+                --100:   0  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 * 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)),
+                --300:  (math.div(2, 12) * 97 - 10)  (.3 + .7 * 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)),
+                --500:  (math.div(4, 12) * 97 - 10)  (.3 + .7 * 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)),
+                --700:  (math.div(6, 12) * 97 - 10)  (.3 + .7 * 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)),
+                --900:  (math.div(8, 12) * 97 - 10)  (.3 + .7 * 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)),
+                --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * 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)),
+                --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * math.div(12, 12)) (-30 * math.div(12, 12)),
+            ),
+        ),
+
+        --palettes: (
+            --base:   #edddc4                     --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 --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: (
@@ -116,9 +185,13 @@ $themes-spec: (
         ),
 
         --semantic: (
-            --bg-base: --base --75,
-            --bg-l1:   --base --100,
-            --bg-l2:   --base --200,
+            --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,
         ),
     )
 );
@@ -179,7 +252,7 @@ $wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, p
 $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-base));
+$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));
@@ -189,11 +262,13 @@ $wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
 $wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(#000, .7));
 $wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7));
 
-$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base));
+$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-footer-box));
 $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
-$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxText, props.get($theme, --base, --900));
+$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, --base, --700));
+$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));
@@ -217,8 +292,11 @@ $wcfButtonPrimaryText: props.def(--wcfButtonPrimaryText, props.get($theme, --red
 $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));
@@ -240,6 +318,25 @@ $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1
 
 //
 
+$wcfContentBackgroundClassic: props.def(--wcfContentBackground, props.get($theme, --base, --75), 'classic');
+$wcfContentBorderInnerClassic: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), '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');
@@ -260,7 +357,6 @@ $wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, props.get($theme, -
 $wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'dark');
 $wcfContentTextDark: props.def(--wcfContentText, props.get($theme, --base, --800), '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');
diff --git a/src/_sidebar.scss b/src/_sidebar.scss
index e200106..8c74988 100644
--- a/src/_sidebar.scss
+++ b/src/_sidebar.scss
@@ -17,12 +17,12 @@
                     display: block;
                     block-size: 1px;
                     margin-block-end: 30px;
-                    background-color: props.get(core.$theme, --base, --200);
+                    background-color: var(--wcfContentBorderInner);
                 }
             }
 
             &:not(.boxBorderless) {
-                background-color: props.get(core.$theme, --bg-l1);
+                background-color: props.get(core.$theme, --bg-sidebar);
             }
         }
 
diff --git a/src/classic.scss b/src/classic.scss
new file mode 100644
index 0000000..8d5ba47
--- /dev/null
+++ b/src/classic.scss
@@ -0,0 +1,30 @@
+@use 'sass:meta';
+@use 'iro-sass/src/props';
+
+@use 'core';
+@use 'common';
+
+@use 'header';
+@use 'sidebar';
+@use 'board';
+@use 'thread';
+@use 'avatar';
+@use 'badge';
+@use 'rank';
+@use 'reaction';
+@use 'footer';
+@use 'gallery';
+
+@include core.styles--classic;
+@include common.styles;
+
+@include header.styles;
+@include sidebar.styles;
+@include board.styles;
+@include thread.styles;
+@include avatar.styles;
+@include badge.styles;
+@include rank.styles;
+@include reaction.styles;
+@include footer.styles;
+@include gallery.styles;
diff --git a/src/design.scss b/src/light.scss
index 453ee17..453ee17 100644
--- a/src/design.scss
+++ b/src/light.scss