From 707f7ef6ce8a9974da3795e3b2d3d5590cd97a18 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 11 Dec 2024 19:19:13 +0100 Subject: Update --- src/_core.vars.scss | 69 +++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 56 insertions(+), 13 deletions(-) diff --git a/src/_core.vars.scss b/src/_core.vars.scss index d062bd0..43896f8 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -53,6 +53,22 @@ $themes-spec: ( --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)), ), + + --colors-bg: ( + --100: (math.div(0, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(0, 12))), + --200: (math.div(1, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(1, 12))), + --300: (math.div(2, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(2, 12))), + --400: (math.div(3, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(3, 12))), + --500: (math.div(4, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(4, 12))), + --600: (math.div(5, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(5, 12))), + --700: (math.div(6, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(6, 12))), + --800: (math.div(7, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(7, 12))), + --900: (math.div(8, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(8, 12))), + --1000: (math.div(9, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(9, 12))), + --1100: (math.div(10, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(10, 12))), + --1200: (math.div(11, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(11, 12))), + --1300: (math.div(12, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(12, 12))), + ), ), --palettes: ( @@ -60,6 +76,7 @@ $themes-spec: ( --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, + --green: oklch(36.32% 0.1402 152.94) --colors-bg, ), --semantic: ( @@ -114,6 +131,22 @@ $themes-spec: ( --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)), ), + + --colors-bg: ( + --100: (math.div(0, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(0, 12))), + --200: (math.div(1, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(1, 12))), + --300: (math.div(2, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(2, 12))), + --400: (math.div(3, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(3, 12))), + --500: (math.div(4, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(4, 12))), + --600: (math.div(5, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(5, 12))), + --700: (math.div(6, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(6, 12))), + --800: (math.div(7, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(7, 12))), + --900: (math.div(8, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(8, 12))), + --1000: (math.div(9, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(9, 12))), + --1100: (math.div(10, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(10, 12))), + --1200: (math.div(11, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(11, 12))), + --1300: (math.div(12, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(12, 12))), + ), ), --palettes: ( @@ -121,6 +154,7 @@ $themes-spec: ( --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, + --green: oklch(36.32% 0.1402 152.94) --colors-bg, ), --semantic: ( @@ -161,19 +195,19 @@ $themes-spec: ( ), --colors: ( - --100: (math.div(0, 12) * -104 + 2) (.6 + .6 * math.div(0, 12)) (-30 + 10 * math.div(0, 12)), - --200: (math.div(1, 12) * -104 + 2) (.6 + .6 * math.div(1, 12)) (-30 + 10 * math.div(1, 12)), - --300: (math.div(2, 12) * -104 + 2) (.6 + .6 * math.div(2, 12)) (-30 + 10 * math.div(2, 12)), - --400: (math.div(3, 12) * -104 + 2) (.6 + .6 * math.div(3, 12)) (-30 + 10 * math.div(3, 12)), - --500: (math.div(4, 12) * -104 + 2) (.6 + .6 * math.div(4, 12)) (-30 + 10 * math.div(4, 12)), - --600: (math.div(5, 12) * -104 + 2) (.6 + .6 * math.div(5, 12)) (-30 + 10 * math.div(5, 12)), - --700: (math.div(6, 12) * -104 + 2) (.6 + .6 * math.div(6, 12)) (-30 + 10 * math.div(6, 12)), - --800: (math.div(7, 12) * -104 + 2) (.6 + .6 * math.div(7, 12)) (-30 + 10 * math.div(7, 12)), - --900: (math.div(8, 12) * -104 + 2) (.6 + .6 * math.div(8, 12)) (-30 + 10 * math.div(8, 12)), - --1000: (math.div(9, 12) * -104 + 2) (.6 + .6 * math.div(9, 12)) (-30 + 10 * math.div(9, 12)), - --1100: (math.div(10, 12) * -104 + 2) (.6 + .6 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)), - --1200: (math.div(11, 12) * -104 + 2) (.6 + .6 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)), - --1300: (math.div(12, 12) * -104 + 2) (.6 + .6 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)), + --100: (math.div(0, 12) * -106) (.6 + .6 * math.div(0, 12)) (-30 + 10 * math.div(0, 12)), + --200: (math.div(1, 12) * -106) (.6 + .6 * math.div(1, 12)) (-30 + 10 * math.div(1, 12)), + --300: (math.div(2, 12) * -106) (.6 + .6 * math.div(2, 12)) (-30 + 10 * math.div(2, 12)), + --400: (math.div(3, 12) * -106) (.6 + .6 * math.div(3, 12)) (-30 + 10 * math.div(3, 12)), + --500: (math.div(4, 12) * -106) (.6 + .6 * math.div(4, 12)) (-30 + 10 * math.div(4, 12)), + --600: (math.div(5, 12) * -106) (.6 + .6 * math.div(5, 12)) (-30 + 10 * math.div(5, 12)), + --700: (math.div(6, 12) * -106) (.6 + .6 * math.div(6, 12)) (-30 + 10 * math.div(6, 12)), + --800: (math.div(7, 12) * -106) (.6 + .6 * math.div(7, 12)) (-30 + 10 * math.div(7, 12)), + --900: (math.div(8, 12) * -106) (.6 + .6 * math.div(8, 12)) (-30 + 10 * math.div(8, 12)), + --1000: (math.div(9, 12) * -106) (.6 + .6 * math.div(9, 12)) (-30 + 10 * math.div(9, 12)), + --1100: (math.div(10, 12) * -106) (.6 + .6 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)), + --1200: (math.div(11, 12) * -106) (.6 + .6 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)), + --1300: (math.div(12, 12) * -106) (.6 + .6 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)), ), ), @@ -182,6 +216,7 @@ $themes-spec: ( --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, + --green: oklch(36.32% 0.1402 162.94) --colors, ), --semantic: ( @@ -319,6 +354,10 @@ $wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, $wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300)); $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800)); +$wcfStatusSuccessBackground: props.def(--wcfStatusSuccessBackground, props.get($theme, --green, --100)); +$wcfStatusSuccessBorder: props.def(--wcfStatusSuccessBorder, props.get($theme, --green, --300)); +$wcfStatusSuccessText: props.def(--wcfStatusSuccessText, props.get($theme, --green, --1100)); + // $wcfContentBackgroundClassic: props.def(--wcfContentBackground, props.get($theme, --base, --75), 'classic'); @@ -342,6 +381,10 @@ $wcfButtonPrimaryTextClassic: props.def(--wcfButtonPrimaryText, props.get($theme $wcfButtonPrimaryBackgroundActiveClassic: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'classic'); $wcfButtonPrimaryTextActiveClassic: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'classic'); +$wcfStatusSuccessBackgroundClassic: props.def(--wcfStatusSuccessBackground, props.get($theme, --green, --1000), 'classic'); +$wcfStatusSuccessBorderClassic: props.def(--wcfStatusSuccessBorder, props.get($theme, --green, --1000), 'classic'); +$wcfStatusSuccessTextClassic: props.def(--wcfStatusSuccessText, props.get($theme, --green, --100), 'classic'); + // $wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark'); -- cgit v1.2.3-70-g09d2