diff options
| author | Volpeon <git@volpeon.ink> | 2024-12-11 19:19:13 +0100 | 
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2024-12-11 19:19:13 +0100 | 
| commit | 707f7ef6ce8a9974da3795e3b2d3d5590cd97a18 (patch) | |
| tree | 474c42f8659de07a01b6ba3c491dd0b60d22587d | |
| parent | Update (diff) | |
| download | furbase-design-2024-707f7ef6ce8a9974da3795e3b2d3d5590cd97a18.tar.gz furbase-design-2024-707f7ef6ce8a9974da3795e3b2d3d5590cd97a18.tar.bz2 furbase-design-2024-707f7ef6ce8a9974da3795e3b2d3d5590cd97a18.zip | |
Update
| -rw-r--r-- | src/_core.vars.scss | 69 | 
1 files 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: ( | |||
| 53 | --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), | 53 | --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), | 
| 54 | --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), | 54 | --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), | 
| 55 | ), | 55 | ), | 
| 56 | |||
| 57 | --colors-bg: ( | ||
| 58 | --100: (math.div(0, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(0, 12))), | ||
| 59 | --200: (math.div(1, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(1, 12))), | ||
| 60 | --300: (math.div(2, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(2, 12))), | ||
| 61 | --400: (math.div(3, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(3, 12))), | ||
| 62 | --500: (math.div(4, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(4, 12))), | ||
| 63 | --600: (math.div(5, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(5, 12))), | ||
| 64 | --700: (math.div(6, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(6, 12))), | ||
| 65 | --800: (math.div(7, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(7, 12))), | ||
| 66 | --900: (math.div(8, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(8, 12))), | ||
| 67 | --1000: (math.div(9, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(9, 12))), | ||
| 68 | --1100: (math.div(10, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(10, 12))), | ||
| 69 | --1200: (math.div(11, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(11, 12))), | ||
| 70 | --1300: (math.div(12, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(12, 12))), | ||
| 71 | ), | ||
| 56 | ), | 72 | ), | 
| 57 | 73 | ||
| 58 | --palettes: ( | 74 | --palettes: ( | 
| @@ -60,6 +76,7 @@ $themes-spec: ( | |||
| 60 | --red: oklch(36.32% 0.1402 53.73) --colors, | 76 | --red: oklch(36.32% 0.1402 53.73) --colors, | 
| 61 | --blue: oklch(36.32% 0.1402 273.58) --colors, | 77 | --blue: oklch(36.32% 0.1402 273.58) --colors, | 
| 62 | --yellow: oklch(36.32% 0.1402 92.94) --colors, | 78 | --yellow: oklch(36.32% 0.1402 92.94) --colors, | 
| 79 | --green: oklch(36.32% 0.1402 152.94) --colors-bg, | ||
| 63 | ), | 80 | ), | 
| 64 | 81 | ||
| 65 | --semantic: ( | 82 | --semantic: ( | 
| @@ -114,6 +131,22 @@ $themes-spec: ( | |||
| 114 | --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), | 131 | --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), | 
| 115 | --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), | 132 | --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), | 
| 116 | ), | 133 | ), | 
| 134 | |||
| 135 | --colors-bg: ( | ||
| 136 | --100: (math.div(0, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(0, 12))), | ||
| 137 | --200: (math.div(1, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(1, 12))), | ||
| 138 | --300: (math.div(2, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(2, 12))), | ||
| 139 | --400: (math.div(3, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(3, 12))), | ||
| 140 | --500: (math.div(4, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(4, 12))), | ||
| 141 | --600: (math.div(5, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(5, 12))), | ||
| 142 | --700: (math.div(6, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(6, 12))), | ||
| 143 | --800: (math.div(7, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(7, 12))), | ||
| 144 | --900: (math.div(8, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(8, 12))), | ||
| 145 | --1000: (math.div(9, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(9, 12))), | ||
| 146 | --1100: (math.div(10, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(10, 12))), | ||
| 147 | --1200: (math.div(11, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(11, 12))), | ||
| 148 | --1300: (math.div(12, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(12, 12))), | ||
| 149 | ), | ||
| 117 | ), | 150 | ), | 
| 118 | 151 | ||
| 119 | --palettes: ( | 152 | --palettes: ( | 
| @@ -121,6 +154,7 @@ $themes-spec: ( | |||
| 121 | --red: oklch(36.32% 0.1402 53.73) --colors, | 154 | --red: oklch(36.32% 0.1402 53.73) --colors, | 
| 122 | --blue: oklch(36.32% 0.1402 273.58) --colors, | 155 | --blue: oklch(36.32% 0.1402 273.58) --colors, | 
| 123 | --yellow: oklch(36.32% 0.1402 92.94) --colors, | 156 | --yellow: oklch(36.32% 0.1402 92.94) --colors, | 
| 157 | --green: oklch(36.32% 0.1402 152.94) --colors-bg, | ||
| 124 | ), | 158 | ), | 
| 125 | 159 | ||
| 126 | --semantic: ( | 160 | --semantic: ( | 
| @@ -161,19 +195,19 @@ $themes-spec: ( | |||
| 161 | ), | 195 | ), | 
| 162 | 196 | ||
| 163 | --colors: ( | 197 | --colors: ( | 
| 164 | --100: (math.div(0, 12) * -104 + 2) (.6 + .6 * math.div(0, 12)) (-30 + 10 * math.div(0, 12)), | 198 | --100: (math.div(0, 12) * -106) (.6 + .6 * math.div(0, 12)) (-30 + 10 * math.div(0, 12)), | 
| 165 | --200: (math.div(1, 12) * -104 + 2) (.6 + .6 * math.div(1, 12)) (-30 + 10 * math.div(1, 12)), | 199 | --200: (math.div(1, 12) * -106) (.6 + .6 * math.div(1, 12)) (-30 + 10 * math.div(1, 12)), | 
| 166 | --300: (math.div(2, 12) * -104 + 2) (.6 + .6 * math.div(2, 12)) (-30 + 10 * math.div(2, 12)), | 200 | --300: (math.div(2, 12) * -106) (.6 + .6 * math.div(2, 12)) (-30 + 10 * math.div(2, 12)), | 
| 167 | --400: (math.div(3, 12) * -104 + 2) (.6 + .6 * math.div(3, 12)) (-30 + 10 * math.div(3, 12)), | 201 | --400: (math.div(3, 12) * -106) (.6 + .6 * math.div(3, 12)) (-30 + 10 * math.div(3, 12)), | 
| 168 | --500: (math.div(4, 12) * -104 + 2) (.6 + .6 * math.div(4, 12)) (-30 + 10 * math.div(4, 12)), | 202 | --500: (math.div(4, 12) * -106) (.6 + .6 * math.div(4, 12)) (-30 + 10 * math.div(4, 12)), | 
| 169 | --600: (math.div(5, 12) * -104 + 2) (.6 + .6 * math.div(5, 12)) (-30 + 10 * math.div(5, 12)), | 203 | --600: (math.div(5, 12) * -106) (.6 + .6 * math.div(5, 12)) (-30 + 10 * math.div(5, 12)), | 
| 170 | --700: (math.div(6, 12) * -104 + 2) (.6 + .6 * math.div(6, 12)) (-30 + 10 * math.div(6, 12)), | 204 | --700: (math.div(6, 12) * -106) (.6 + .6 * math.div(6, 12)) (-30 + 10 * math.div(6, 12)), | 
| 171 | --800: (math.div(7, 12) * -104 + 2) (.6 + .6 * math.div(7, 12)) (-30 + 10 * math.div(7, 12)), | 205 | --800: (math.div(7, 12) * -106) (.6 + .6 * math.div(7, 12)) (-30 + 10 * math.div(7, 12)), | 
| 172 | --900: (math.div(8, 12) * -104 + 2) (.6 + .6 * math.div(8, 12)) (-30 + 10 * math.div(8, 12)), | 206 | --900: (math.div(8, 12) * -106) (.6 + .6 * math.div(8, 12)) (-30 + 10 * math.div(8, 12)), | 
| 173 | --1000: (math.div(9, 12) * -104 + 2) (.6 + .6 * math.div(9, 12)) (-30 + 10 * math.div(9, 12)), | 207 | --1000: (math.div(9, 12) * -106) (.6 + .6 * math.div(9, 12)) (-30 + 10 * math.div(9, 12)), | 
| 174 | --1100: (math.div(10, 12) * -104 + 2) (.6 + .6 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)), | 208 | --1100: (math.div(10, 12) * -106) (.6 + .6 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)), | 
| 175 | --1200: (math.div(11, 12) * -104 + 2) (.6 + .6 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)), | 209 | --1200: (math.div(11, 12) * -106) (.6 + .6 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)), | 
| 176 | --1300: (math.div(12, 12) * -104 + 2) (.6 + .6 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)), | 210 | --1300: (math.div(12, 12) * -106) (.6 + .6 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)), | 
| 177 | ), | 211 | ), | 
| 178 | ), | 212 | ), | 
| 179 | 213 | ||
| @@ -182,6 +216,7 @@ $themes-spec: ( | |||
| 182 | --red: oklch(36.32% 0.1402 53.73) --colors, | 216 | --red: oklch(36.32% 0.1402 53.73) --colors, | 
| 183 | --blue: oklch(36.32% 0.1402 273.58) --colors, | 217 | --blue: oklch(36.32% 0.1402 273.58) --colors, | 
| 184 | --yellow: oklch(36.32% 0.1402 92.94) --colors, | 218 | --yellow: oklch(36.32% 0.1402 92.94) --colors, | 
| 219 | --green: oklch(36.32% 0.1402 162.94) --colors, | ||
| 185 | ), | 220 | ), | 
| 186 | 221 | ||
| 187 | --semantic: ( | 222 | --semantic: ( | 
| @@ -319,6 +354,10 @@ $wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, | |||
| 319 | $wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300)); | 354 | $wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300)); | 
| 320 | $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800)); | 355 | $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800)); | 
| 321 | 356 | ||
| 357 | $wcfStatusSuccessBackground: props.def(--wcfStatusSuccessBackground, props.get($theme, --green, --100)); | ||
| 358 | $wcfStatusSuccessBorder: props.def(--wcfStatusSuccessBorder, props.get($theme, --green, --300)); | ||
| 359 | $wcfStatusSuccessText: props.def(--wcfStatusSuccessText, props.get($theme, --green, --1100)); | ||
| 360 | |||
| 322 | // | 361 | // | 
| 323 | 362 | ||
| 324 | $wcfContentBackgroundClassic: props.def(--wcfContentBackground, props.get($theme, --base, --75), 'classic'); | 363 | $wcfContentBackgroundClassic: props.def(--wcfContentBackground, props.get($theme, --base, --75), 'classic'); | 
| @@ -342,6 +381,10 @@ $wcfButtonPrimaryTextClassic: props.def(--wcfButtonPrimaryText, props.get($theme | |||
| 342 | $wcfButtonPrimaryBackgroundActiveClassic: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'classic'); | 381 | $wcfButtonPrimaryBackgroundActiveClassic: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'classic'); | 
| 343 | $wcfButtonPrimaryTextActiveClassic: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'classic'); | 382 | $wcfButtonPrimaryTextActiveClassic: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'classic'); | 
| 344 | 383 | ||
| 384 | $wcfStatusSuccessBackgroundClassic: props.def(--wcfStatusSuccessBackground, props.get($theme, --green, --1000), 'classic'); | ||
| 385 | $wcfStatusSuccessBorderClassic: props.def(--wcfStatusSuccessBorder, props.get($theme, --green, --1000), 'classic'); | ||
| 386 | $wcfStatusSuccessTextClassic: props.def(--wcfStatusSuccessText, props.get($theme, --green, --100), 'classic'); | ||
| 387 | |||
| 345 | // | 388 | // | 
| 346 | 389 | ||
| 347 | $wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark'); | 390 | $wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark'); | 
