From eaf0b317218dcebdd5139e6ff4a93d44f3212141 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Dec 2024 19:22:42 +0100 Subject: Update --- src/_badge.scss | 3 ++ src/_core.vars.scss | 94 ++++++++++++++++++++++++----------------------------- 2 files changed, 46 insertions(+), 51 deletions(-) diff --git a/src/_badge.scss b/src/_badge.scss index 5913ea6..34fc392 100644 --- a/src/_badge.scss +++ b/src/_badge.scss @@ -22,6 +22,9 @@ @mixin styles--dark { .badge, a.badge { + --background-color: #{props.get(core.$theme, --base, --300)}; + --color: #{props.get(core.$theme, --base, --800)}; + &.badgeUpdate { --background-color: #{props.get(core.$theme, --red, --400)}; --color: #{props.get(core.$theme, --red, --400-text)}; diff --git a/src/_core.vars.scss b/src/_core.vars.scss index c188e8f..0c69713 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -35,19 +35,19 @@ $themes-spec: ( ), --colors: ( - --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)), + --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)), ), ), @@ -65,7 +65,7 @@ $themes-spec: ( --link: ( --fg: --red --1000, - --underline: --red --400, + --underline: --red --500, --fg-inv: --red --1000-text, --active: --red --1300, --active-inv: --red --1300-text, @@ -80,31 +80,31 @@ $themes-spec: ( --75: 0.7 .2 0, --100: 0 .4 0, - --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .4 * math.div(0, 6)) (30 * math.div(1, 7)), - --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .4 * math.div(1, 6)) (30 * math.div(2, 7)), - --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .4 * math.div(2, 6)) (30 * math.div(3, 7)), + --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .2 * math.div(0, 6)) (30 * math.div(1, 7)), + --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .2 * math.div(1, 6)) (30 * math.div(2, 7)), + --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .2 * math.div(2, 6)) (30 * math.div(3, 7)), - --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .4 * math.div(3, 6)) (30 * math.div(4, 7)), - --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .4 * math.div(4, 6)) (30 * math.div(5, 7)), - --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .4 * math.div(5, 6)) (30 * math.div(6, 7)), - --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .4 * math.div(6, 6)) (30 * math.div(7, 7)), + --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .2 * math.div(3, 6)) (30 * math.div(4, 7)), + --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .2 * math.div(4, 6)) (30 * math.div(5, 7)), + --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .2 * math.div(5, 6)) (30 * math.div(6, 7)), + --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .2 * math.div(6, 6)) (30 * math.div(7, 7)), --900: #fff ), --colors: ( - --100: (math.div(0, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), - --200: (math.div(1, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), - --300: (math.div(2, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), - --400: (math.div(3, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), - --500: (math.div(4, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), - --600: (math.div(5, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), - --700: (math.div(6, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), - --800: (math.div(7, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), - --900: (math.div(8, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), - --1000: (math.div(9, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), - --1100: (math.div(10, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), - --1200: (math.div(11, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), - --1300: (math.div(12, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), + --100: (math.div(0, 12) * -104 + 2) (1 - .5 * math.div(0, 12)) (-30 + 10 * math.div(0, 12)), + --200: (math.div(1, 12) * -104 + 2) (1 - .5 * math.div(1, 12)) (-30 + 10 * math.div(1, 12)), + --300: (math.div(2, 12) * -104 + 2) (1 - .5 * math.div(2, 12)) (-30 + 10 * math.div(2, 12)), + --400: (math.div(3, 12) * -104 + 2) (1 - .5 * math.div(3, 12)) (-30 + 10 * math.div(3, 12)), + --500: (math.div(4, 12) * -104 + 2) (1 - .5 * math.div(4, 12)) (-30 + 10 * math.div(4, 12)), + --600: (math.div(5, 12) * -104 + 2) (1 - .5 * math.div(5, 12)) (-30 + 10 * math.div(5, 12)), + --700: (math.div(6, 12) * -104 + 2) (1 - .5 * math.div(6, 12)) (-30 + 10 * math.div(6, 12)), + --800: (math.div(7, 12) * -104 + 2) (1 - .5 * math.div(7, 12)) (-30 + 10 * math.div(7, 12)), + --900: (math.div(8, 12) * -104 + 2) (1 - .5 * math.div(8, 12)) (-30 + 10 * math.div(8, 12)), + --1000: (math.div(9, 12) * -104 + 2) (1 - .5 * math.div(9, 12)) (-30 + 10 * math.div(9, 12)), + --1100: (math.div(10, 12) * -104 + 2) (1 - .5 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)), + --1200: (math.div(11, 12) * -104 + 2) (1 - .5 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)), + --1300: (math.div(12, 12) * -104 + 2) (1 - .5 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)), ), ), @@ -119,14 +119,6 @@ $themes-spec: ( --bg-base: --base --75, --bg-l1: --base --100, --bg-l2: --base --200, - - --link: ( - --fg: --yellow --1000, - --underline: --yellow --400, - --fg-inv: --yellow --1000-text, - --active: --yellow --1300, - --active-inv: --yellow --1300-text, - ) ), ) ); @@ -261,10 +253,12 @@ $wcfNavigationTextDark: props.def(--wcfNavigationText, props.get($theme, --base, $wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark'); $wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark'); -$wcfContentBackgroundDark: props.def(--wcfContentBackground, rgb(242, 242, 242), 'dark'); -$wcfContentBorderDark: props.def(--wcfContentBorder, var(--wcfContentBorderInner), 'dark'); -$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, rgba(#fff, .7), 'dark'); -$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, rgba(#fff, .7), 'dark'); +$wcfContentBackgroundDark: props.def(--wcfContentBackground, props.get($theme, --base, --100), 'dark'); +$wcfContentBorderInnerDark: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'dark'); +$wcfContentBorderDark: props.def(--wcfContentBorder, props.get($wcfContentBorderInnerDark), 'dark'); +$wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, props.get($theme, --base, --600), 'dark'); +$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'); @@ -289,13 +283,11 @@ $wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.g $wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark'); $wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark'); -$wcfSidebarBorderDark: props.def(--wcfSidebarBackground, transparent, 'dark'); +$wcfSidebarBackgroundDark: props.def(--wcfSidebarBackground, $wcfContentBackground, 'dark'); +$wcfSidebarBorderDark: props.def(--wcfSidebarBorder, transparent, 'dark'); $wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark'); $wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark'); $wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); $wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); -$wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --yellow, --900), 'dark'); -$wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --yellow, --900-text), 'dark'); -$wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --yellow, --1200), 'dark'); -$wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --yellow, --1200-text), 'dark'); +$wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark'); -- cgit v1.2.3-70-g09d2