summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-12-11 18:58:06 +0100
committerVolpeon <git@volpeon.ink>2024-12-11 18:58:06 +0100
commit84e98b9bf792194056a9f6975059c2c78a0c3c2a (patch)
tree3074613b6d41df07f9fd758709ff9a3ba6335b8f
parentFix (diff)
downloadfurbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.tar.gz
furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.tar.bz2
furbase-design-2024-84e98b9bf792194056a9f6975059c2c78a0c3c2a.zip
Update
Diffstat
-rw-r--r--src/_avatar.scss6
-rw-r--r--src/_core.vars.scss86
-rw-r--r--src/dark.scss2
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;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-22 17:57:22 +0000