diff options
author | Volpeon <git@volpeon.ink> | 2024-12-11 18:58:06 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-12-11 18:58:06 +0100 |
commit | 84e98b9bf792194056a9f6975059c2c78a0c3c2a (patch) | |
tree | 3074613b6d41df07f9fd758709ff9a3ba6335b8f /src | |
parent | Fix (diff) | |
download | furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.tar.gz furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.tar.bz2 furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.zip |
Update
Diffstat (limited to 'src')
-rw-r--r-- | src/_avatar.scss | 6 | ||||
-rw-r--r-- | src/_core.vars.scss | 86 | ||||
-rw-r--r-- | 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 @@ | |||
4 | background-color: transparent; | 4 | background-color: transparent; |
5 | } | 5 | } |
6 | } | 6 | } |
7 | |||
8 | @mixin styles--dark { | ||
9 | .userAvatarImage { | ||
10 | background-color: transparent; | ||
11 | } | ||
12 | } | ||
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: ( | |||
23 | --light: ( | 23 | --light: ( |
24 | --levels: ( | 24 | --levels: ( |
25 | --grays: ( | 25 | --grays: ( |
26 | --50: -25 .1 0, | 26 | --50: #fff, |
27 | --75: -16 .3 0, | 27 | --75: -16 .3 0, |
28 | --100: 0 .5 0, | 28 | --100: 0 .5 0, |
29 | 29 | ||
@@ -39,27 +39,27 @@ $themes-spec: ( | |||
39 | ), | 39 | ), |
40 | 40 | ||
41 | --colors: ( | 41 | --colors: ( |
42 | --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * math.div(0, 12)) (-30 * math.div(0, 12)), | 42 | --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), |
43 | --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * math.div(1, 12)) (-30 * math.div(1, 12)), | 43 | --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), |
44 | --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * math.div(2, 12)) (-30 * math.div(2, 12)), | 44 | --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), |
45 | --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * math.div(3, 12)) (-30 * math.div(3, 12)), | 45 | --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), |
46 | --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * math.div(4, 12)) (-30 * math.div(4, 12)), | 46 | --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), |
47 | --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * math.div(5, 12)) (-30 * math.div(5, 12)), | 47 | --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), |
48 | --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * math.div(6, 12)) (-30 * math.div(6, 12)), | 48 | --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), |
49 | --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * math.div(7, 12)) (-30 * math.div(7, 12)), | 49 | --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), |
50 | --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * math.div(8, 12)) (-30 * math.div(8, 12)), | 50 | --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), |
51 | --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * math.div(9, 12)) (-30 * math.div(9, 12)), | 51 | --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), |
52 | --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * math.div(10, 12)) (-30 * math.div(10, 12)), | 52 | --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), |
53 | --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * 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 * 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 | ), | 56 | ), |
57 | 57 | ||
58 | --palettes: ( | 58 | --palettes: ( |
59 | --base: #edddc4 --grays, | 59 | --base: #edddc4 --grays, |
60 | --red: oklch(36.32% 0.1302 53.73) --colors, | 60 | --red: oklch(36.32% 0.1402 53.73) --colors, |
61 | --blue: oklch(36.32% 0.1302 273.58) --colors, | 61 | --blue: oklch(36.32% 0.1402 273.58) --colors, |
62 | --yellow: oklch(36.32% 0.1302 92.94) --colors, | 62 | --yellow: oklch(36.32% 0.1402 92.94) --colors, |
63 | ), | 63 | ), |
64 | 64 | ||
65 | --semantic: ( | 65 | --semantic: ( |
@@ -72,9 +72,9 @@ $themes-spec: ( | |||
72 | --bg-footer: --base --700, | 72 | --bg-footer: --base --700, |
73 | 73 | ||
74 | --link: ( | 74 | --link: ( |
75 | --fg: --red --1000, | 75 | --fg: --red --1100, |
76 | --underline: --red --500, | 76 | --underline: --red --500, |
77 | --fg-inv: --red --1000-text, | 77 | --fg-inv: --red --1100-text, |
78 | --active: --red --1300, | 78 | --active: --red --1300, |
79 | --active-inv: --red --1300-text, | 79 | --active-inv: --red --1300-text, |
80 | ) | 80 | ) |
@@ -100,27 +100,27 @@ $themes-spec: ( | |||
100 | ), | 100 | ), |
101 | 101 | ||
102 | --colors: ( | 102 | --colors: ( |
103 | --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * math.div(0, 12)) (-30 * math.div(0, 12)), | 103 | --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), |
104 | --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * math.div(1, 12)) (-30 * math.div(1, 12)), | 104 | --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), |
105 | --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * math.div(2, 12)) (-30 * math.div(2, 12)), | 105 | --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), |
106 | --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * math.div(3, 12)) (-30 * math.div(3, 12)), | 106 | --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), |
107 | --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * math.div(4, 12)) (-30 * math.div(4, 12)), | 107 | --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), |
108 | --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * math.div(5, 12)) (-30 * math.div(5, 12)), | 108 | --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), |
109 | --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * math.div(6, 12)) (-30 * math.div(6, 12)), | 109 | --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), |
110 | --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * math.div(7, 12)) (-30 * math.div(7, 12)), | 110 | --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), |
111 | --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * math.div(8, 12)) (-30 * math.div(8, 12)), | 111 | --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), |
112 | --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * math.div(9, 12)) (-30 * math.div(9, 12)), | 112 | --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), |
113 | --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * math.div(10, 12)) (-30 * math.div(10, 12)), | 113 | --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), |
114 | --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * math.div(11, 12)) (-30 * math.div(11, 12)), | 114 | --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 * math.div(12, 12)) (-30 * math.div(12, 12)), | 115 | --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), |
116 | ), | 116 | ), |
117 | ), | 117 | ), |
118 | 118 | ||
119 | --palettes: ( | 119 | --palettes: ( |
120 | --base: #edddc4 --grays, | 120 | --base: #edddc4 --grays, |
121 | --red: oklch(36.32% 0.1302 53.73) --colors, | 121 | --red: oklch(36.32% 0.1402 53.73) --colors, |
122 | --blue: oklch(36.32% 0.1302 273.58) --colors, | 122 | --blue: oklch(36.32% 0.1402 273.58) --colors, |
123 | --yellow: oklch(36.32% 0.1302 92.94) --colors, | 123 | --yellow: oklch(36.32% 0.1402 92.94) --colors, |
124 | ), | 124 | ), |
125 | 125 | ||
126 | --semantic: ( | 126 | --semantic: ( |
@@ -179,9 +179,9 @@ $themes-spec: ( | |||
179 | 179 | ||
180 | --palettes: ( | 180 | --palettes: ( |
181 | --base: #351c0e --grays, | 181 | --base: #351c0e --grays, |
182 | --red: oklch(36.32% 0.1302 53.73) --colors, | 182 | --red: oklch(36.32% 0.1402 53.73) --colors, |
183 | --blue: oklch(36.32% 0.1302 273.58) --colors, | 183 | --blue: oklch(36.32% 0.1402 273.58) --colors, |
184 | --yellow: oklch(36.32% 0.1302 92.94) --colors, | 184 | --yellow: oklch(36.32% 0.1402 92.94) --colors, |
185 | ), | 185 | ), |
186 | 186 | ||
187 | --semantic: ( | 187 | --semantic: ( |
@@ -281,6 +281,7 @@ $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.g | |||
281 | 281 | ||
282 | $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); | 282 | $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); |
283 | $wcfSidebarBorder: props.def(--wcfSidebarBorder, transparent); | 283 | $wcfSidebarBorder: props.def(--wcfSidebarBorder, transparent); |
284 | $wcfSidebarHeadlineText: props.def(--wcfSidebarHeadlineText, props.get($wcfContentHeadlineText)); | ||
284 | $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); | 285 | $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); |
285 | 286 | ||
286 | $wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100)); | 287 | $wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100)); |
@@ -314,8 +315,9 @@ $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLink | |||
314 | $wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink)); | 315 | $wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink)); |
315 | $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive)); | 316 | $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive)); |
316 | 317 | ||
317 | $wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200)); | 318 | $wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100)); |
318 | $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200)); | 319 | $wcfStatusInfoBorder: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300)); |
320 | $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --base, --800)); | ||
319 | 321 | ||
320 | // | 322 | // |
321 | 323 | ||
@@ -392,3 +394,7 @@ $wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSideb | |||
392 | $wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); | 394 | $wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); |
393 | 395 | ||
394 | $wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark'); | 396 | $wcfTabularBoxBackgroundActiveDark: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --100), 'dark'); |
397 | |||
398 | $wcfStatusInfoBackgroundDark: props.def(--wcfStatusInfoBackground, props.get($theme, --base, --100), 'dark'); | ||
399 | $wcfStatusInfoBorderDark: props.def(--wcfStatusInfoBorder, props.get($theme, --base, --300), 'dark'); | ||
400 | $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 @@ | |||
6 | 6 | ||
7 | @use 'footer'; | 7 | @use 'footer'; |
8 | @use 'badge'; | 8 | @use 'badge'; |
9 | @use 'avatar'; | ||
9 | 10 | ||
10 | @include core.styles--dark; | 11 | @include core.styles--dark; |
11 | 12 | ||
12 | @include footer.styles--dark; | 13 | @include footer.styles--dark; |
13 | @include badge.styles--dark; | 14 | @include badge.styles--dark; |
15 | @include avatar.styles--dark; | ||