diff options
author | Volpeon <git@volpeon.ink> | 2024-12-10 17:12:20 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-12-10 17:12:20 +0100 |
commit | a9888043fcd37389e1e14e65eb2b3ab7b4a708bb (patch) | |
tree | 24da08a3f54627641adb9102267a02ebfcbff435 /src/_core.vars.scss | |
parent | Refactoring (diff) | |
download | furbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.tar.gz furbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.tar.bz2 furbase-design-2024-a9888043fcd37389e1e14e65eb2b3ab7b4a708bb.zip |
Dark mode mainly
Diffstat (limited to 'src/_core.vars.scss')
-rw-r--r-- | src/_core.vars.scss | 183 |
1 files changed, 124 insertions, 59 deletions
diff --git a/src/_core.vars.scss b/src/_core.vars.scss index c9117b5..c188e8f 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss | |||
@@ -7,36 +7,44 @@ | |||
7 | @use 'iro-sass/src/functions'; | 7 | @use 'iro-sass/src/functions'; |
8 | @use 'iro-design/src/functions' as fn; | 8 | @use 'iro-design/src/functions' as fn; |
9 | 9 | ||
10 | @function light-bezier($x) { | ||
11 | @return easing.cubic-bezier(.3, .1, .7, 1, $x); | ||
12 | } | ||
13 | |||
14 | @function dark-bezier($x) { | ||
15 | @return easing.cubic-bezier(.3, .1, .7, 1, $x); | ||
16 | } | ||
17 | |||
10 | $themes-spec: ( | 18 | $themes-spec: ( |
11 | --light: ( | 19 | --light: ( |
12 | --levels: ( | 20 | --levels: ( |
13 | --grays: ( | 21 | --grays: ( |
14 | --50: (-30) .1 0, | 22 | --50: -30 .1 0, |
15 | --75: (-16) .3 0, | 23 | --75: -16 .3 0, |
16 | --100: (0) .5 0, | 24 | --100: 0 .5 0, |
17 | 25 | ||
18 | --200: (easing.cubic-bezier(.3, .1, .7, 1, math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)), | 26 | --200: (light-bezier(math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)), |
19 | --300: (easing.cubic-bezier(.3, .1, .7, 1, math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)), | 27 | --300: (light-bezier(math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)), |
20 | --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)), | 28 | --400: (light-bezier(math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)), |
21 | 29 | ||
22 | --500: (easing.cubic-bezier(.3, .1, .7, 1, math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)), | 30 | --500: (light-bezier(math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)), |
23 | --600: (easing.cubic-bezier(.3, .1, .7, 1, math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)), | 31 | --600: (light-bezier(math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)), |
24 | --700: (easing.cubic-bezier(.3, .1, .7, 1, math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)), | 32 | --700: (light-bezier(math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)), |
25 | --800: (easing.cubic-bezier(.3, .1, .7, 1, math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)), | 33 | --800: (light-bezier(math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)), |
26 | --900: #000 | 34 | --900: #000 |
27 | ), | 35 | ), |
28 | 36 | ||
29 | --colors: ( | 37 | --colors: ( |
30 | --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), | 38 | --100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), |
31 | --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), | 39 | --200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), |
32 | --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), | 40 | --300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), |
33 | --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), | 41 | --400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), |
34 | --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), | 42 | --500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), |
35 | --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), | 43 | --600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), |
36 | --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), | 44 | --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), |
37 | --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), | 45 | --800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), |
38 | --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), | 46 | --900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), |
39 | --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), | 47 | --1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), |
40 | --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), | 48 | --1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), |
41 | --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), | 49 | --1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), |
42 | --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), | 50 | --1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), |
@@ -68,56 +76,56 @@ $themes-spec: ( | |||
68 | --dark: ( | 76 | --dark: ( |
69 | --levels: ( | 77 | --levels: ( |
70 | --grays: ( | 78 | --grays: ( |
71 | --50: #000, | 79 | --50: 1.2 .1 0, |
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)), | 80 | --75: 0.7 .2 0, |
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)), | 81 | --100: 0 .4 0, |
74 | 82 | ||
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)), | 83 | --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .4 * math.div(0, 6)) (30 * math.div(1, 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)), | 84 | --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .4 * math.div(1, 6)) (30 * math.div(2, 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)), | 85 | --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .4 * math.div(2, 6)) (30 * math.div(3, 7)), |
78 | 86 | ||
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)), | 87 | --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .4 * math.div(3, 6)) (30 * math.div(4, 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)), | 88 | --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .4 * math.div(4, 6)) (30 * math.div(5, 7)), |
81 | --700: (0) .5 0, | 89 | --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .4 * math.div(5, 6)) (30 * math.div(6, 7)), |
82 | --800: (-16) .3 0, | 90 | --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .4 * math.div(6, 6)) (30 * math.div(7, 7)), |
83 | --900: (-30) .1 0, | 91 | --900: #fff |
84 | ), | 92 | ), |
85 | 93 | ||
86 | --colors: ( | 94 | --colors: ( |
87 | --100: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), | 95 | --100: (math.div(0, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), |
88 | --200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), | 96 | --200: (math.div(1, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), |
89 | --300: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), | 97 | --300: (math.div(2, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), |
90 | --400: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), | 98 | --400: (math.div(3, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), |
91 | --500: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), | 99 | --500: (math.div(4, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), |
92 | --600: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), | 100 | --600: (math.div(5, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)), |
93 | --700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)), | 101 | --700: (math.div(6, 12) * -104 + 2) (1 - .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)), | 102 | --800: (math.div(7, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)), |
95 | --900: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)), | 103 | --900: (math.div(8, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)), |
96 | --1000: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)), | 104 | --1000: (math.div(9, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)), |
97 | --1100: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)), | 105 | --1100: (math.div(10, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)), |
98 | --1200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)), | 106 | --1200: (math.div(11, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)), |
99 | --1300: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)), | 107 | --1300: (math.div(12, 12) * -104 + 2) (1 - .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)), |
100 | ), | 108 | ), |
101 | ), | 109 | ), |
102 | 110 | ||
103 | --palettes: ( | 111 | --palettes: ( |
104 | --base: #edddc4 --grays, | 112 | --base: #351c0e --grays, |
105 | --red: oklch(36.32% 0.1302 53.73) --colors, | 113 | --red: oklch(36.32% 0.1302 53.73) --colors, |
106 | --blue: oklch(36.32% 0.1302 273.58) --colors, | 114 | --blue: oklch(36.32% 0.1302 273.58) --colors, |
107 | --yellow: oklch(36.32% 0.1302 92.94) --colors, | 115 | --yellow: oklch(36.32% 0.1302 92.94) --colors, |
108 | ), | 116 | ), |
109 | 117 | ||
110 | --semantic: ( | 118 | --semantic: ( |
111 | --bg-l2: --base --50, | 119 | --bg-base: --base --75, |
112 | --bg-l1: --base --75, | 120 | --bg-l1: --base --100, |
113 | --bg-base: --base --100, | 121 | --bg-l2: --base --200, |
114 | 122 | ||
115 | --link: ( | 123 | --link: ( |
116 | --fg: --red --1000, | 124 | --fg: --yellow --1000, |
117 | --underline: --red --400, | 125 | --underline: --yellow --400, |
118 | --fg-inv: --red --1000-text, | 126 | --fg-inv: --yellow --1000-text, |
119 | --active: --red --1300, | 127 | --active: --yellow --1300, |
120 | --active-inv: --red --1300-text, | 128 | --active-inv: --yellow --1300-text, |
121 | ) | 129 | ) |
122 | ), | 130 | ), |
123 | ) | 131 | ) |
@@ -186,8 +194,8 @@ $wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, | |||
186 | 194 | ||
187 | $wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242)); | 195 | $wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242)); |
188 | $wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner)); | 196 | $wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner)); |
189 | $wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6)); | 197 | $wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(#000, .7)); |
190 | $wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6)); | 198 | $wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(#000, .7)); |
191 | 199 | ||
192 | $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base)); | 200 | $wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base)); |
193 | $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800)); | 201 | $wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800)); |
@@ -204,6 +212,7 @@ $wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, - | |||
204 | $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50)); | 212 | $wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50)); |
205 | 213 | ||
206 | $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); | 214 | $wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground); |
215 | $wcfSidebarBorder: props.def(--wcfSidebarBackground, transparent); | ||
207 | $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); | 216 | $wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText)); |
208 | 217 | ||
209 | $wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100)); | 218 | $wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100)); |
@@ -212,9 +221,9 @@ $wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($th | |||
212 | $wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text)); | 221 | $wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text)); |
213 | 222 | ||
214 | $wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900)); | 223 | $wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900)); |
215 | $wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get($theme, --red, --900-text)); | 224 | $wcfButtonPrimaryText: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --900-text)); |
216 | $wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200)); | 225 | $wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200)); |
217 | $wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get($theme, --red, --1200-text)); | 226 | $wcfButtonPrimaryTextActive: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text)); |
218 | 227 | ||
219 | $wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); | 228 | $wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none); |
220 | 229 | ||
@@ -225,6 +234,8 @@ $wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActi | |||
225 | 234 | ||
226 | $wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink)); | 235 | $wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink)); |
227 | $wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive)); | 236 | $wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive)); |
237 | $wcfSidebarDimmedLink: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText)); | ||
238 | $wcfSidebarDimmedLinkActive: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText)); | ||
228 | 239 | ||
229 | $wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink)); | 240 | $wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink)); |
230 | $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive)); | 241 | $wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive)); |
@@ -234,3 +245,57 @@ $wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get | |||
234 | 245 | ||
235 | $wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200)); | 246 | $wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200)); |
236 | $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200)); | 247 | $wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200)); |
248 | |||
249 | // | ||
250 | |||
251 | $wcfHeaderBackgroundDark: props.def(--wcfHeaderBackground, props.get($theme, --bg-base), 'dark'); | ||
252 | $wcfHeaderMenuBackgroundDark: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --50), 'dark'); | ||
253 | $wcfHeaderMenuLinkBackgroundDark: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --50), 'dark'); | ||
254 | $wcfHeaderMenuLinkBackgroundActiveDark: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --200), 'dark'); | ||
255 | $wcfHeaderMenuDropdownBackgroundDark: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --50), 'dark'); | ||
256 | $wcfHeaderMenuDropdownBorderDark: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --50), 'dark'); | ||
257 | $wcfHeaderMenuDropdownBackgroundActiveDark: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --200), 'dark'); | ||
258 | |||
259 | $wcfNavigationBackgroundDark: props.def(--wcfNavigationBackground, props.get($theme, --bg-base), 'dark'); | ||
260 | $wcfNavigationTextDark: props.def(--wcfNavigationText, props.get($theme, --base, --500), 'dark'); | ||
261 | $wcfNavigationLinkDark: props.def(--wcfNavigationLink, props.get($theme, --base, --800), 'dark'); | ||
262 | $wcfNavigationLinkActiveDark: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800), 'dark'); | ||
263 | |||
264 | $wcfContentBackgroundDark: props.def(--wcfContentBackground, rgb(242, 242, 242), 'dark'); | ||
265 | $wcfContentBorderDark: props.def(--wcfContentBorder, var(--wcfContentBorderInner), 'dark'); | ||
266 | $wcfContentDimmedTextDark: props.def(--wcfContentDimmedText, rgba(#fff, .7), 'dark'); | ||
267 | $wcfContentDimmedLinkDark: props.def(--wcfContentDimmedLink, rgba(#fff, .7), 'dark'); | ||
268 | |||
269 | $wcfFooterBackgroundDark: props.def(--wcfFooterBackground, props.get($theme, --bg-base), 'dark'); | ||
270 | $wcfFooterTextDark: props.def(--wcfFooterText, props.get($theme, --base, --500), 'dark'); | ||
271 | $wcfFooterLinkDark: props.def(--wcfFooterLink, props.get($theme, --base, --700), 'dark'); | ||
272 | $wcfFooterLinkActiveDark: props.def(--wcfFooterLinkActive, props.get($theme, --base, --700), 'dark'); | ||
273 | |||
274 | $wcfFooterCopyrightBackgroundDark: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --50), 'dark'); | ||
275 | $wcfFooterCopyrightTextDark: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --500), 'dark'); | ||
276 | $wcfFooterCopyrightLinkDark: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --700), 'dark'); | ||
277 | $wcfFooterCopyrightLinkActiveDark: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --700), 'dark'); | ||
278 | |||
279 | $wcfButtonBackgroundDark: props.def(--wcfButtonBackground, props.get($theme, --base, --300), 'dark'); | ||
280 | $wcfButtonTextDark: props.def(--wcfButtonText, props.get($theme, --base, --300-text), 'dark'); | ||
281 | $wcfButtonBackgroundActiveDark: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700), 'dark'); | ||
282 | $wcfButtonTextActiveDark: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text), 'dark'); | ||
283 | |||
284 | $wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900), 'dark'); | ||
285 | $wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --red, --900-text), 'dark'); | ||
286 | $wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200), 'dark'); | ||
287 | $wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --red, --1200-text), 'dark'); | ||
288 | |||
289 | $wcfContentContainerBackgroundDark: props.def(--wcfContentContainerBackground, props.get($theme, --base, --200), 'dark'); | ||
290 | $wcfContentContainerBorderDark: props.def(--wcfContentContainerBorder, props.get($wcfContentContainerBackgroundDark), 'dark'); | ||
291 | |||
292 | $wcfSidebarBorderDark: props.def(--wcfSidebarBackground, transparent, 'dark'); | ||
293 | $wcfSidebarLinkDark: props.def(--wcfSidebarLink, props.get($vlpnLink), 'dark'); | ||
294 | $wcfSidebarLinkActiveDark: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive), 'dark'); | ||
295 | $wcfSidebarDimmedLinkDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); | ||
296 | $wcfSidebarDimmedLinkActiveDark: props.def(--wcfSidebarDimmedLink, props.get($wcfSidebarDimmedText), 'dark'); | ||
297 | |||
298 | $wcfButtonPrimaryBackgroundDark: props.def(--wcfButtonPrimaryBackground, props.get($theme, --yellow, --900), 'dark'); | ||
299 | $wcfButtonPrimaryTextDark: props.def(--wcfButtonPrimaryText, props.get($theme, --yellow, --900-text), 'dark'); | ||
300 | $wcfButtonPrimaryBackgroundActiveDark: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --yellow, --1200), 'dark'); | ||
301 | $wcfButtonPrimaryTextActiveDark: props.def(--wcfButtonPrimaryTextActive, props.get($theme, --yellow, --1200-text), 'dark'); | ||