From a8294b9069f2e110731a932167d054738195752e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 11 Dec 2024 13:09:56 +0100 Subject: Classic theme --- package.json | 5 ++- src/_badge.scss | 4 +- src/_core.scss | 8 ++++ src/_core.vars.scss | 120 ++++++++++++++++++++++++++++++++++++++++++++++------ src/_sidebar.scss | 4 +- src/classic.scss | 30 +++++++++++++ src/design.scss | 30 ------------- src/light.scss | 30 +++++++++++++ 8 files changed, 183 insertions(+), 48 deletions(-) create mode 100644 src/classic.scss delete mode 100644 src/design.scss create mode 100644 src/light.scss 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/design.scss deleted file mode 100644 index 453ee17..0000000 --- a/src/design.scss +++ /dev/null @@ -1,30 +0,0 @@ -@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; -@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/light.scss b/src/light.scss new file mode 100644 index 0000000..453ee17 --- /dev/null +++ b/src/light.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; +@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; -- cgit v1.2.3-70-g09d2