summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-12-10 11:40:28 +0100
committerVolpeon <git@volpeon.ink>2024-12-10 11:40:28 +0100
commit2448ebfdef6a15549137cf42116168f467bae393 (patch)
tree770606867cdbc11a0d56777c77926504aa586ea1 /src
parentUpdate (diff)
downloadfurbase-design-2024-2448ebfdef6a15549137cf42116168f467bae393.tar.gz
furbase-design-2024-2448ebfdef6a15549137cf42116168f467bae393.tar.bz2
furbase-design-2024-2448ebfdef6a15549137cf42116168f467bae393.zip
Refactoring
Diffstat (limited to 'src')
-rw-r--r--src/_badge.scss5
-rw-r--r--src/_common.scss9
-rw-r--r--src/_common.vars.scss79
-rw-r--r--src/_core.scss5
-rw-r--r--src/_core.vars.scss175
-rw-r--r--src/_reaction.scss6
-rw-r--r--src/_sidebar.scss6
-rw-r--r--src/_thread.scss4
-rw-r--r--src/dark.scss1
-rw-r--r--src/design.scss (renamed from src/light.scss)2
10 files changed, 190 insertions, 102 deletions
diff --git a/src/_badge.scss b/src/_badge.scss
index f18a9fb..1076947 100644
--- a/src/_badge.scss
+++ b/src/_badge.scss
@@ -1,6 +1,5 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2 2
3@use 'common';
4@use 'core'; 3@use 'core';
5 4
6@mixin styles { 5@mixin styles {
@@ -10,8 +9,8 @@
10 vertical-align: baseline; 9 vertical-align: baseline;
11 10
12 &.badgeUpdate { 11 &.badgeUpdate {
13 --background-color: #{props.get(common.$vlpnLink)}; 12 --background-color: #{props.get(core.$vlpnLink)};
14 --color: #{props.get(common.$vlpnLinkFg)}; 13 --color: #{props.get(core.$vlpnLinkFg)};
15 } 14 }
16 15
17 &.yellow { 16 &.yellow {
diff --git a/src/_common.scss b/src/_common.scss
index c8b7ac7..3b182c5 100644
--- a/src/_common.scss
+++ b/src/_common.scss
@@ -2,16 +2,11 @@
2@use 'sass:meta'; 2@use 'sass:meta';
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4 4
5@use 'common.vars' as vars; 5@use 'core' as core;
6@forward 'common.vars';
7 6
8@mixin styles { 7@mixin styles {
9 :root {
10 @include props.materialize(map.values(meta.module-variables('vars')));
11 }
12
13 body { 8 body {
14 background-color: props.get(vars.$vlpnBg); 9 background-color: props.get(core.$theme, --bg-l1);
15 } 10 }
16 11
17 a { 12 a {
diff --git a/src/_common.vars.scss b/src/_common.vars.scss
deleted file mode 100644
index d01b17a..0000000
--- a/src/_common.vars.scss
+++ /dev/null
@@ -1,79 +0,0 @@
1@use 'iro-sass/src/props';
2
3@use 'core';
4
5$vlpnBg: props.def(--vlpnBg, props.get(core.$theme, --base, --75));
6
7$vlpnLink: props.def(--vlpnLink, props.get(core.$theme, --red, --1000));
8$vlpnLinkUnderline: props.def(--vlpnLinkUnderline, props.get(core.$theme, --red, --400));
9$vlpnLinkFg: props.def(--vlpnLinkFg, props.get(core.$theme, --red, --1000-text));
10$vlpnLinkActive: props.def(--vlpnLinkActive, props.get(core.$theme, --red, --1300));
11$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get(core.$theme, --red, --1300-text));
12
13$vlpnSmileySize: props.def(--vlpnSmileySize, 28px);
14
15$wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px);
16
17$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get(core.$theme, --base, --700));
18$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get(core.$theme, --base, --800));
19$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get(core.$theme, --base, --800));
20$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get(core.$theme, --base, --700));
21$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get(core.$theme, --base, --800));
22$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get(core.$theme, --base, --800));
23$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get(core.$theme, --base, --700));
24
25$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get(core.$theme, --base, --100));
26$wcfNavigationText: props.def(--wcfNavigationText, props.get(core.$theme, --base, --500));
27$wcfNavigationLink: props.def(--wcfNavigationLink, props.get(core.$theme, --base, --800));
28$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get(core.$theme, --base, --800));
29
30$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242));
31$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
32$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6));
33$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6));
34
35$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get(core.$theme, --base, --100));
36$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --800));
37$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxText, props.get(core.$theme, --base, --900));
38
39$wcfFooterBackground: props.def(--wcfFooterBackground, props.get(core.$theme, --base, --700));
40$wcfFooterText: props.def(--wcfFooterText, props.get(core.$theme, --base, --100));
41$wcfFooterLink: props.def(--wcfFooterLink, props.get(core.$theme, --base, --75));
42$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get(core.$theme, --base, --75));
43
44$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get(core.$theme, --base, --800));
45$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get(core.$theme, --base, --75));
46$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get(core.$theme, --base, --50));
47$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get(core.$theme, --base, --50));
48
49$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
50$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
51
52$wcfButtonBackground: props.def(--wcfButtonBackground, props.get(core.$theme, --base, --100));
53$wcfButtonText: props.def(--wcfButtonText, props.get(core.$theme, --base, --100-text));
54$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get(core.$theme, --base, --500));
55$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get(core.$theme, --base, --500-text));
56
57$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get(core.$theme, --red, --800));
58$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get(core.$theme, --red, --800-text));
59$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get(core.$theme, --red, --1200));
60$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get(core.$theme, --red, --1200-text));
61
62$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
63
64$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground));
65
66$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
67$wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive));
68
69$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
70$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
71
72$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
73$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
74
75$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
76$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
77
78$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get(core.$theme, --blue, --200));
79$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get(core.$theme, --blue, --1200));
diff --git a/src/_core.scss b/src/_core.scss
index a99d147..aeea3ce 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -1,17 +1,20 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta';
2@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
3 4
4@use 'core.vars' as vars; 5@use 'core.vars' as vars;
5@forward 'core.vars'; 6@forward 'core.vars';
6 7
7@mixin styles--light { 8@mixin styles {
8 :root { 9 :root {
9 @include props.materialize(map.get(vars.$themes, --light)); 10 @include props.materialize(map.get(vars.$themes, --light));
11 @include props.materialize(map.values(meta.module-variables('vars')), null);
10 } 12 }
11} 13}
12 14
13@mixin styles--dark { 15@mixin styles--dark {
14 :root { 16 :root {
15 @include props.materialize(map.get(vars.$themes, --dark)); 17 @include props.materialize(map.get(vars.$themes, --dark));
18 @include props.materialize(map.values(meta.module-variables('vars')), 'dark');
16 } 19 }
17} 20}
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 3c6aba8..c9117b5 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -1,8 +1,10 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:math'; 3@use 'sass:math';
4@use 'sass:meta';
4@use 'iro-sass/src/props'; 5@use 'iro-sass/src/props';
5@use 'iro-sass/src/easing'; 6@use 'iro-sass/src/easing';
7@use 'iro-sass/src/functions';
6@use 'iro-design/src/functions' as fn; 8@use 'iro-design/src/functions' as fn;
7 9
8$themes-spec: ( 10$themes-spec: (
@@ -42,12 +44,83 @@ $themes-spec: (
42 ), 44 ),
43 45
44 --palettes: ( 46 --palettes: (
45 --base: #edddc4 --grays, 47 --base: #edddc4 --grays,
46 --red: oklch(36.32% 0.1302 53.73) --colors, 48 --red: oklch(36.32% 0.1302 53.73) --colors,
47 --blue: oklch(36.4% 0.1302 273.58) --colors, 49 --blue: oklch(36.32% 0.1302 273.58) --colors,
48 --yellow: oklch(36.32% 0.1302 92.94) --colors, 50 --yellow: oklch(36.32% 0.1302 92.94) --colors,
51 ),
52
53 --semantic: (
54 --bg-l2: --base --50,
55 --bg-l1: --base --75,
56 --bg-base: --base --100,
57
58 --link: (
59 --fg: --red --1000,
60 --underline: --red --400,
61 --fg-inv: --red --1000-text,
62 --active: --red --1300,
63 --active-inv: --red --1300-text,
64 )
49 ), 65 ),
50 ), 66 ),
67
68 --dark: (
69 --levels: (
70 --grays: (
71 --50: #000,
72 --75: (easing.cubic-bezier(.3, .1, .7, 1, math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)),
73 --100: (easing.cubic-bezier(.3, .1, .7, 1, math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)),
74
75 --200: (easing.cubic-bezier(.3, .1, .7, 1, math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)),
76 --300: (easing.cubic-bezier(.3, .1, .7, 1, math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)),
77 --400: (easing.cubic-bezier(.3, .1, .7, 1, math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)),
78
79 --500: (easing.cubic-bezier(.3, .1, .7, 1, math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)),
80 --600: (easing.cubic-bezier(.3, .1, .7, 1, math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)),
81 --700: (0) .5 0,
82 --800: (-16) .3 0,
83 --900: (-30) .1 0,
84 ),
85
86 --colors: (
87 --100: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
88 --200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
89 --300: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
90 --400: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
91 --500: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
92 --600: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
93 --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
94 --800: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
95 --900: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
96 --1000: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
97 --1100: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
98 --1200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
99 --1300: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
100 ),
101 ),
102
103 --palettes: (
104 --base: #edddc4 --grays,
105 --red: oklch(36.32% 0.1302 53.73) --colors,
106 --blue: oklch(36.32% 0.1302 273.58) --colors,
107 --yellow: oklch(36.32% 0.1302 92.94) --colors,
108 ),
109
110 --semantic: (
111 --bg-l2: --base --50,
112 --bg-l1: --base --75,
113 --bg-base: --base --100,
114
115 --link: (
116 --fg: --red --1000,
117 --underline: --red --400,
118 --fg-inv: --red --1000-text,
119 --active: --red --1300,
120 --active-inv: --red --1300-text,
121 )
122 ),
123 )
51); 124);
52 125
53$themes: (); 126$themes: ();
@@ -63,7 +136,101 @@ $themes: ();
63 $compiled: props.merge($compiled, ( $palette-name: $palette )); 136 $compiled: props.merge($compiled, ( $palette-name: $palette ));
64 } 137 }
65 138
139 @each $color, $ref in map.get($theme, --semantic) {
140 $res: ();
141
142 @if meta.type-of($ref) == 'map' {
143 @each $key, $r in $ref {
144 $re1: list.nth($r, 1);
145 $re2: functions.list-slice($r, 2);
146 $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
147 }
148 } @else {
149 $ref1: list.nth($ref, 1);
150 $ref2: functions.list-slice($ref, 2);
151 $res: props.get($compiled, $ref1, $ref2...);
152 }
153
154 $compiled: props.merge($compiled, ( $color: $res ));
155 }
156
66 $themes: map.set($themes, $theme-name, $compiled); 157 $themes: map.set($themes, $theme-name, $compiled);
67} 158}
68 159
69$theme: map.get($themes, --light); 160$theme: map.get($themes, --light);
161
162//
163
164$vlpnLink: props.def(--vlpnLink, props.get($theme, --link, --fg));
165$vlpnLinkUnderline: props.def(--vlpnLinkUnderline, props.get($theme, --link, --underline));
166$vlpnLinkFg: props.def(--vlpnLinkFg, props.get($theme, --link, --fg-inv));
167$vlpnLinkActive: props.def(--vlpnLinkActive, props.get($theme, --link, --active));
168$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get($theme, --link, --active-inv));
169
170$vlpnSmileySize: props.def(--vlpnSmileySize, 28px);
171
172$wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px);
173
174$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get($theme, --base, --700));
175$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --800));
176$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --800));
177$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --700));
178$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --800));
179$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --800));
180$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --700));
181
182$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get($theme, --bg-base));
183$wcfNavigationText: props.def(--wcfNavigationText, props.get($theme, --base, --500));
184$wcfNavigationLink: props.def(--wcfNavigationLink, props.get($theme, --base, --800));
185$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800));
186
187$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242));
188$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
189$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6));
190$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6));
191
192$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base));
193$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
194$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxText, props.get($theme, --base, --900));
195
196$wcfFooterBackground: props.def(--wcfFooterBackground, props.get($theme, --base, --700));
197$wcfFooterText: props.def(--wcfFooterText, props.get($theme, --base, --100));
198$wcfFooterLink: props.def(--wcfFooterLink, props.get($theme, --base, --75));
199$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get($theme, --base, --75));
200
201$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --800));
202$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --75));
203$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --50));
204$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50));
205
206$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
207$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
208
209$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));
210$wcfButtonText: props.def(--wcfButtonText, props.get($theme, --base, --100-text));
211$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700));
212$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text));
213
214$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900));
215$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get($theme, --red, --900-text));
216$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200));
217$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get($theme, --red, --1200-text));
218
219$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
220
221$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground));
222
223$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
224$wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive));
225
226$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
227$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
228
229$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
230$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
231
232$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
233$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
234
235$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200));
236$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200));
diff --git a/src/_reaction.scss b/src/_reaction.scss
index 1e09849..ecf88ad 100644
--- a/src/_reaction.scss
+++ b/src/_reaction.scss
@@ -1,12 +1,12 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2 2
3@use 'common'; 3@use 'core';
4 4
5@mixin styles { 5@mixin styles {
6 .messageFooter { 6 .messageFooter {
7 .reactionType { 7 .reactionType {
8 inline-size: props.get(common.$vlpnSmileySize); 8 inline-size: props.get(core.$vlpnSmileySize);
9 block-size: props.get(common.$vlpnSmileySize); 9 block-size: props.get(core.$vlpnSmileySize);
10 } 10 }
11 } 11 }
12 12
diff --git a/src/_sidebar.scss b/src/_sidebar.scss
index 5957d3a..b8cfc32 100644
--- a/src/_sidebar.scss
+++ b/src/_sidebar.scss
@@ -30,7 +30,7 @@
30 } 30 }
31 31
32 &:not(.boxBorderless) { 32 &:not(.boxBorderless) {
33 background-color: props.get(common.$vlpnBg); 33 background-color: props.get(core.$theme, --bg-l1);
34 } 34 }
35 } 35 }
36 36
@@ -41,6 +41,10 @@
41 } 41 }
42 } 42 }
43 43
44 .userAvatarList > li > a > img {
45 border-color: props.get(core.$theme, --bg-l1);
46 }
47
44 @media screen and (max-width: 1024px) { 48 @media screen and (max-width: 1024px) {
45 .boxesSidebarLeft{ 49 .boxesSidebarLeft{
46 margin-inline-end: 0; 50 margin-inline-end: 0;
diff --git a/src/_thread.scss b/src/_thread.scss
index 5217447..c602a87 100644
--- a/src/_thread.scss
+++ b/src/_thread.scss
@@ -1,6 +1,6 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2 2
3@use 'common'; 3@use 'core';
4 4
5@mixin styles { 5@mixin styles {
6 .messageGroupList .columnSubject > .statusDisplay { 6 .messageGroupList .columnSubject > .statusDisplay {
@@ -22,7 +22,7 @@
22 .messageSignature { 22 .messageSignature {
23 a { 23 a {
24 text-decoration: underline; 24 text-decoration: underline;
25 text-decoration-color: props.get(common.$vlpnLinkUnderline); 25 text-decoration-color: props.get(core.$vlpnLinkUnderline);
26 } 26 }
27 27
28 a:hover { 28 a:hover {
diff --git a/src/dark.scss b/src/dark.scss
index 2bc7d79..060f4ba 100644
--- a/src/dark.scss
+++ b/src/dark.scss
@@ -5,4 +5,3 @@
5@use 'common'; 5@use 'common';
6 6
7@include core.styles--dark; 7@include core.styles--dark;
8@include common.styles;
diff --git a/src/light.scss b/src/design.scss
index 325a0c6..453ee17 100644
--- a/src/light.scss
+++ b/src/design.scss
@@ -15,7 +15,7 @@
15@use 'footer'; 15@use 'footer';
16@use 'gallery'; 16@use 'gallery';
17 17
18@include core.styles--light; 18@include core.styles;
19@include common.styles; 19@include common.styles;
20 20
21@include header.styles; 21@include header.styles;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-23 03:25:38 +0000