Classic theme

1 files changed, 108 insertions, 12 deletions

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