summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-12-11 13:09:56 +0100
committerVolpeon <git@volpeon.ink>2024-12-11 13:09:56 +0100
commita8294b9069f2e110731a932167d054738195752e (patch)
treedd11862eee905845bd2f32ac4c1bcb9c9ee8f1c6
parentUpdate (diff)
downloadfurbase-design-2024-a8294b9069f2e110731a932167d054738195752e.tar.gz
furbase-design-2024-a8294b9069f2e110731a932167d054738195752e.tar.bz2
furbase-design-2024-a8294b9069f2e110731a932167d054738195752e.zip
Classic theme
-rw-r--r--package.json5
-rw-r--r--src/_badge.scss4
-rw-r--r--src/_core.scss8
-rw-r--r--src/_core.vars.scss120
-rw-r--r--src/_sidebar.scss4
-rw-r--r--src/classic.scss30
-rw-r--r--src/light.scss (renamed from src/design.scss)0
7 files changed, 153 insertions, 18 deletions
diff --git a/package.json b/package.json
index 41d839e..42e4bc4 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,10 @@
5 "main": "index.js", 5 "main": "index.js",
6 "scripts": { 6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1", 7 "test": "echo \"Error: no test specified\" && exit 1",
8 "build:design": "sass -I node_modules src/design.scss dist/design.css", 8 "build:light": "sass -I node_modules src/light.scss dist/light.css",
9 "build:classic": "sass -I node_modules src/classic.scss dist/classic.css",
9 "build:dark": "sass -I node_modules src/dark.scss dist/dark.css", 10 "build:dark": "sass -I node_modules src/dark.scss dist/dark.css",
10 "build": "pnpm build:design && pnpm build:dark" 11 "build": "pnpm build:light && pnpm build:classic && pnpm build:dark"
11 }, 12 },
12 "keywords": [], 13 "keywords": [],
13 "author": "", 14 "author": "",
diff --git a/src/_badge.scss b/src/_badge.scss
index 34fc392..c74eb29 100644
--- a/src/_badge.scss
+++ b/src/_badge.scss
@@ -9,8 +9,8 @@
9 vertical-align: baseline; 9 vertical-align: baseline;
10 10
11 &.badgeUpdate { 11 &.badgeUpdate {
12 --background-color: #{props.get(core.$vlpnLink)}; 12 --background-color: #{props.get(core.$theme, --red, --1000)};
13 --color: #{props.get(core.$vlpnLinkFg)}; 13 --color: #{props.get(core.$theme, --red, --1000-text)};
14 } 14 }
15 15
16 &.yellow { 16 &.yellow {
diff --git a/src/_core.scss b/src/_core.scss
index e3a2c2e..cfa1e00 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -12,6 +12,14 @@
12 } 12 }
13} 13}
14 14
15@mixin styles--classic {
16 :root {
17 @include props.materialize(map.get(vars.$themes, --classic));
18 @include props.materialize(map.values(meta.module-variables('vars')), null);
19 @include props.materialize(map.values(meta.module-variables('vars')), 'classic');
20 }
21}
22
15@mixin styles--dark { 23@mixin styles--dark {
16 :root { 24 :root {
17 @include props.materialize(map.get(vars.$themes, --dark)); 25 @include props.materialize(map.get(vars.$themes, --dark));
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index c36e6bc..14f4d31 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -11,6 +11,10 @@
11 @return easing.cubic-bezier(.3, .1, .7, 1, $x); 11 @return easing.cubic-bezier(.3, .1, .7, 1, $x);
12} 12}
13 13
14@function classic-bezier($x) {
15 @return easing.cubic-bezier(.3, .1, .8, 1, $x);
16}
17
14@function dark-bezier($x) { 18@function dark-bezier($x) {
15 @return easing.cubic-bezier(.3, .1, .7, 1, $x); 19 @return easing.cubic-bezier(.3, .1, .7, 1, $x);
16} 20}
@@ -19,7 +23,7 @@ $themes-spec: (
19 --light: ( 23 --light: (
20 --levels: ( 24 --levels: (
21 --grays: ( 25 --grays: (
22 --50: -30 .1 0, 26 --50: -25 .1 0,
23 --75: -16 .3 0, 27 --75: -16 .3 0,
24 --100: 0 .5 0, 28 --100: 0 .5 0,
25 29
@@ -59,9 +63,13 @@ $themes-spec: (
59 ), 63 ),
60 64
61 --semantic: ( 65 --semantic: (
62 --bg-l2: --base --50, 66 --bg-l2: --base --50,
63 --bg-l1: --base --75, 67 --bg-l1: --base --75,
64 --bg-base: --base --100, 68 --bg-base: --base --100,
69 --bg-sidebar: --base --75,
70 --bg-nav: --base --100,
71 --bg-footer-box: --base --100,
72 --bg-footer: --base --700,
65 73
66 --link: ( 74 --link: (
67 --fg: --red --1000, 75 --fg: --red --1000,
@@ -73,6 +81,67 @@ $themes-spec: (
73 ), 81 ),
74 ), 82 ),
75 83
84 --classic: (
85 --levels: (
86 --grays: (
87 --50: -25 .1 0,
88 --75: -16 .3 0,
89 --100: 0 1 0,
90
91 --200: (light-bezier(math.div(1, 7)) * 87) (1.2 + 0.8 * math.div(0, 6)) (-30 * math.div(1, 7)),
92 --300: (light-bezier(math.div(2, 7)) * 87) (1.2 + 0.8 * math.div(1, 6)) (-30 * math.div(2, 7)),
93 --400: (light-bezier(math.div(3, 7)) * 87) (1.2 + 0.8 * math.div(2, 6)) (-30 * math.div(3, 7)),
94
95 --500: (light-bezier(math.div(4, 7)) * 87) (1.2 + 0.8 * math.div(3, 6)) (-30 * math.div(4, 7)),
96 --600: (light-bezier(math.div(5, 7)) * 87) (1.2 + 0.8 * math.div(4, 6)) (-30 * math.div(5, 7)),
97 --700: (light-bezier(math.div(6, 7)) * 87) (1.2 + 0.8 * math.div(5, 6)) (-30 * math.div(6, 7)),
98 --800: (light-bezier(math.div(7, 7)) * 87) (1.2 + 0.8 * math.div(6, 6)) (-30 * math.div(7, 7)),
99 --900: #000
100 ),
101
102 --colors: (
103 --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * 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)),
105 --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * 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)),
107 --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * 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)),
109 --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * 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)),
111 --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * 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)),
113 --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * 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)),
115 --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * math.div(12, 12)) (-30 * math.div(12, 12)),
116 ),
117 ),
118
119 --palettes: (
120 --base: #edddc4 --grays,
121 --red: oklch(36.32% 0.1302 53.73) --colors,
122 --blue: oklch(36.32% 0.1302 273.58) --colors,
123 --yellow: oklch(36.32% 0.1302 92.94) --colors,
124 ),
125
126 --semantic: (
127 --bg-l2: --base --100,
128 --bg-l1: --base --300,
129 --bg-base: --base --75,
130 --bg-sidebar: --base --100,
131 --bg-nav: --base --75,
132 --bg-footer-box: --base --100,
133 --bg-footer: --base --600,
134
135 --link: (
136 --fg: --red --1200,
137 --underline: --red --600,
138 --fg-inv: --red --1200-text,
139 --active: --red --1300,
140 --active-inv: --red --1300-text,
141 )
142 ),
143 ),
144
76 --dark: ( 145 --dark: (
77 --levels: ( 146 --levels: (
78 --grays: ( 147 --grays: (
@@ -116,9 +185,13 @@ $themes-spec: (
116 ), 185 ),
117 186
118 --semantic: ( 187 --semantic: (
119 --bg-base: --base --75, 188 --bg-base: --base --75,
120 --bg-l1: --base --100, 189 --bg-l1: --base --100,
121 --bg-l2: --base --200, 190 --bg-l2: --base --200,
191 --bg-sidebar: --base --100,
192 --bg-nav: --base --75,
193 --bg-footer-box: --base --75,
194 --bg-footer: --base --75,
122 ), 195 ),
123 ) 196 )
124); 197);
@@ -179,7 +252,7 @@ $wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, p
179$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --800)); 252$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --800));
180$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --700)); 253$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --700));
181 254
182$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get($theme, --bg-base)); 255$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get($theme, --bg-nav));
183$wcfNavigationText: props.def(--wcfNavigationText, props.get($theme, --base, --500)); 256$wcfNavigationText: props.def(--wcfNavigationText, props.get($theme, --base, --500));
184$wcfNavigationLink: props.def(--wcfNavigationLink, props.get($theme, --base, --800)); 257$wcfNavigationLink: props.def(--wcfNavigationLink, props.get($theme, --base, --800));
185$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800)); 258$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800));
@@ -189,11 +262,13 @@ $wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
189$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(#000, .7)); 262$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(#000, .7));
190$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7)); 263$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7));
191 264
192$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base)); 265$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-footer-box));
193$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800)); 266$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
194$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxText, props.get($theme, --base, --900)); 267$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxHeadlineText, props.get($theme, --base, --900));
268$wcfFooterBoxHeadlineLink: props.def(--wcfFooterBoxHeadlineLink, props.get($theme, --base, --900));
269$wcfFooterBoxHeadlineLinkActive: props.def(--wcfFooterBoxHeadlineLinkActive, props.get($theme, --base, --900));
195 270
196$wcfFooterBackground: props.def(--wcfFooterBackground, props.get($theme, --base, --700)); 271$wcfFooterBackground: props.def(--wcfFooterBackground, props.get($theme, --bg-footer));
197$wcfFooterText: props.def(--wcfFooterText, props.get($theme, --base, --100)); 272$wcfFooterText: props.def(--wcfFooterText, props.get($theme, --base, --100));
198$wcfFooterLink: props.def(--wcfFooterLink, props.get($theme, --base, --75)); 273$wcfFooterLink: props.def(--wcfFooterLink, props.get($theme, --base, --75));
199$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get($theme, --base, --75)); 274$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get($theme, --base, --75));
@@ -217,8 +292,11 @@ $wcfButtonPrimaryText: props.def(--wcfButtonPrimaryText, props.get($theme, --red
217$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200)); 292$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200));
218$wcfButtonPrimaryTextActive: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text)); 293$wcfButtonPrimaryTextActive: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text));
219 294
295$wcfInputBorderActive: props.def(--wcfInputBorderActive, props.get($theme, --red, --900));
296
220$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); 297$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
221 298
299$wcfContentContainerBackground: props.def(--wcfContentContainerBackground, props.get($theme, --bg-l2));
222$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground)); 300$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground));
223 301
224$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink)); 302$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
@@ -240,6 +318,25 @@ $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1
240 318
241// 319//
242 320
321$wcfContentBackgroundClassic: props.def(--wcfContentBackground, props.get($theme, --base, --75), 'classic');
322$wcfContentBorderInnerClassic: props.def(--wcfContentBorderInner, props.get($theme, --base, --300), 'classic');
323
324$wcfSidebarBackgroundClassic: props.def(--wcfSidebarBackground, props.get($theme, --base, --75), 'classic');
325
326$wcfTabularBoxBackgroundActiveClassic: props.def(--wcfTabularBoxBackgroundActive, props.get($theme, --base, --75), 'classic');
327
328$wcfButtonBackgroundClassic: props.def(--wcfButtonBackground, props.get($theme, --base, --50), 'classic');
329$wcfButtonTextClassic: props.def(--wcfButtonText, props.get($theme, --base, --50-text), 'classic');
330$wcfButtonBackgroundActiveClassic: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700), 'classic');
331$wcfButtonTextActiveClassic: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text), 'classic');
332
333$wcfButtonPrimaryBackgroundClassic: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --1000), 'classic');
334$wcfButtonPrimaryTextClassic: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --1000-text), 'classic');
335$wcfButtonPrimaryBackgroundActiveClassic: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'classic');
336$wcfButtonPrimaryTextActiveClassic: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'classic');
337
338//
339
243$wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark'); 340$wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark');
244$wcfHeaderMenuBackgroundDark: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --50), 'dark'); 341$wcfHeaderMenuBackgroundDark: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --50), 'dark');
245$wcfHeaderMenuLinkBackgroundDark: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --50), 'dark'); 342$wcfHeaderMenuLinkBackgroundDark: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --50), 'dark');
@@ -260,7 +357,6 @@ $wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, props.get($theme, -
260$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'dark'); 357$wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, props.get($theme, --base, --900), 'dark');
261$wcfContentTextDark: props.def(--wcfContentText, props.get($theme, --base, --800), 'dark'); 358$wcfContentTextDark: props.def(--wcfContentText, props.get($theme, --base, --800), 'dark');
262 359
263$wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark');
264$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark'); 360$wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark');
265$wcfFooterLinkDark: props.def(--wcfFooterLink, props.get($theme, --base, --700), 'dark'); 361$wcfFooterLinkDark: props.def(--wcfFooterLink, props.get($theme, --base, --700), 'dark');
266$wcfFooterLinkActiveDark: props.def(--wcfFooterLinkActive, props.get($theme, --base, --700), 'dark'); 362$wcfFooterLinkActiveDark: props.def(--wcfFooterLinkActive, props.get($theme, --base, --700), 'dark');
diff --git a/src/_sidebar.scss b/src/_sidebar.scss
index e200106..8c74988 100644
--- a/src/_sidebar.scss
+++ b/src/_sidebar.scss
@@ -17,12 +17,12 @@
17 display: block; 17 display: block;
18 block-size: 1px; 18 block-size: 1px;
19 margin-block-end: 30px; 19 margin-block-end: 30px;
20 background-color: props.get(core.$theme, --base, --200); 20 background-color: var(--wcfContentBorderInner);
21 } 21 }
22 } 22 }
23 23
24 &:not(.boxBorderless) { 24 &:not(.boxBorderless) {
25 background-color: props.get(core.$theme, --bg-l1); 25 background-color: props.get(core.$theme, --bg-sidebar);
26 } 26 }
27 } 27 }
28 28
diff --git a/src/classic.scss b/src/classic.scss
new file mode 100644
index 0000000..8d5ba47
--- /dev/null
+++ b/src/classic.scss
@@ -0,0 +1,30 @@
1@use 'sass:meta';
2@use 'iro-sass/src/props';
3
4@use 'core';
5@use 'common';
6
7@use 'header';
8@use 'sidebar';
9@use 'board';
10@use 'thread';
11@use 'avatar';
12@use 'badge';
13@use 'rank';
14@use 'reaction';
15@use 'footer';
16@use 'gallery';
17
18@include core.styles--classic;
19@include common.styles;
20
21@include header.styles;
22@include sidebar.styles;
23@include board.styles;
24@include thread.styles;
25@include avatar.styles;
26@include badge.styles;
27@include rank.styles;
28@include reaction.styles;
29@include footer.styles;
30@include gallery.styles;
diff --git a/src/design.scss b/src/light.scss
index 453ee17..453ee17 100644
--- a/src/design.scss
+++ b/src/light.scss