From 84e98b9bf792194056a9f6975059c2c78a0c3c2a Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 11 Dec 2024 18:58:06 +0100 Subject: Update --- src/_avatar.scss | 6 ++++ src/_core.vars.scss | 86 ++++++++++++++++++++++++++++------------------------- src/dark.scss | 2 ++ 3 files changed, 54 insertions(+), 40 deletions(-) diff --git a/src/_avatar.scss b/src/_avatar.scss index acdfd96..5cde612 100644 --- a/src/_avatar.scss +++ b/src/_avatar.scss @@ -4,3 +4,9 @@ background-color: transparent; } } + +@mixin styles--dark { + .userAvatarImage { + background-color: transparent; + } +} diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 2911562..d062bd0 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -23,7 +23,7 @@ $themes-spec: ( --light: ( --levels: ( --grays: ( - --50: -25 .1 0, + --50: #fff, --75: -16 .3 0, --100: 0 .5 0, @@ -39,27 +39,27 @@ $themes-spec: ( ), --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)), + --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), + --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), + --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), + --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), + --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), + --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), + --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), + --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), + --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), + --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), + --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), + --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), + --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(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, + --red: oklch(36.32% 0.1402 53.73) --colors, + --blue: oklch(36.32% 0.1402 273.58) --colors, + --yellow: oklch(36.32% 0.1402 92.94) --colors, ), --semantic: ( @@ -72,9 +72,9 @@ $themes-spec: ( --bg-footer: --base --700, --link: ( - --fg: --red --1000, + --fg: --red --1100, --underline: --red --500, - --fg-inv: --red --1000-text, + --fg-inv: --red --1100-text, --active: --red --1300, --active-inv: --red --1300-text, ) @@ -100,27 +100,27 @@ $themes-spec: ( ), --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)), + --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), + --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), + --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), + --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), + --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), + --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), + --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), + --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), + --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), + --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), + --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), + --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), + --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(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, + --red: oklch(36.32% 0.1402 53.73) --colors, + --blue: oklch(36.32% 0.1402 273.58) --colors, + --yellow: oklch(36.32% 0.1402 92.94) --colors, ), --semantic: ( @@ -179,9 +179,9 @@ $themes-spec: ( --palettes: ( --base: #351c0e --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, + --red: oklch(36.32% 0.1402 53.73) --colors, + --blue: oklch(36.32% 0.1402 273.58) --colors, + --yellow: oklch(36.32% 0.1402 92.94) --colors, ), --semantic: ( @@ -281,6 +281,7 @@ $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.g $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); $wcfSidebarBorder: props.def(--wcfSidebarBorder, transparent); +$wcfSidebarHeadlineText: props.def(--wcfSidebarHeadlineText, props.get($wcfContentHeadlineText)); $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); $wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100)); @@ -314,8 +315,9 @@ $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLink $wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink)); $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive)); -$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200)); -$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200)); +$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100)); +$wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300)); +$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800)); // @@ -392,3 +394,7 @@ $wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSideb $wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); $wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark'); + +$wcfStatusInfoBackgroundDark: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100), 'dark'); +$wcfStatusInfoBorderDark: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300), 'dark'); +$wcfStatusInfoTextDark: props.def(--wcfStatusInfoText, props.get($theme, --base, --800), 'dark'); diff --git a/src/dark.scss b/src/dark.scss index 6013f6e..41901ca 100644 --- a/src/dark.scss +++ b/src/dark.scss @@ -6,8 +6,10 @@ @use 'footer'; @use 'badge'; +@use 'avatar'; @include core.styles--dark; @include footer.styles--dark; @include badge.styles--dark; +@include avatar.styles--dark; -- cgit v1.2.3-70-g09d2