From a8294b9069f2e110731a932167d054738195752e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 11 Dec 2024 13:09:56 +0100 Subject: Classic theme --- src/_core.vars.scss | 120 ++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 108 insertions(+), 12 deletions(-) (limited to 'src/_core.vars.scss') 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'); -- cgit v1.2.3-70-g09d2