diff options
author | Volpeon <git@volpeon.ink> | 2024-12-11 13:09:56 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-12-11 13:09:56 +0100 |
commit | a8294b9069f2e110731a932167d054738195752e (patch) | |
tree | dd11862eee905845bd2f32ac4c1bcb9c9ee8f1c6 | |
parent | Update (diff) | |
download | furbase-design-2024-a8294b9069f2e110731a932167d054738195752e.tar.gz furbase-design-2024-a8294b9069f2e110731a932167d054738195752e.tar.bz2 furbase-design-2024-a8294b9069f2e110731a932167d054738195752e.zip |
Classic theme
-rw-r--r-- | package.json | 5 | ||||
-rw-r--r-- | src/_badge.scss | 4 | ||||
-rw-r--r-- | src/_core.scss | 8 | ||||
-rw-r--r-- | src/_core.vars.scss | 120 | ||||
-rw-r--r-- | src/_sidebar.scss | 4 | ||||
-rw-r--r-- | src/classic.scss | 30 | ||||
-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 | |||