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 |
-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'); |