1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
|
@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
@use 'sass:meta';
@use 'iro-sass/src/props';
@use 'iro-sass/src/easing';
@use 'iro-sass/src/functions';
@use 'iro-design/src/functions' as fn;
$themes-spec: (
--light: (
--levels: (
--grays: (
--50: (-30) .1 0,
--75: (-16) .3 0,
--100: (0) .5 0,
--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)),
--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)),
--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)),
--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)),
--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)),
--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)),
--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)),
--900: #000
),
--colors: (
--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
),
),
--palettes: (
--base: #edddc4 --grays,
--red: oklch(36.32% 0.1302 53.73) --colors,
--blue: oklch(36.32% 0.1302 273.58) --colors,
--yellow: oklch(36.32% 0.1302 92.94) --colors,
),
--semantic: (
--bg-l2: --base --50,
--bg-l1: --base --75,
--bg-base: --base --100,
--link: (
--fg: --red --1000,
--underline: --red --400,
--fg-inv: --red --1000-text,
--active: --red --1300,
--active-inv: --red --1300-text,
)
),
),
--dark: (
--levels: (
--grays: (
--50: #000,
--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)),
--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)),
--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)),
--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)),
--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)),
--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)),
--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)),
--700: (0) .5 0,
--800: (-16) .3 0,
--900: (-30) .1 0,
),
--colors: (
--100: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
--200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
--300: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
--400: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
--500: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
--600: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
--800: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
--900: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
--1000: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
--1100: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
--1200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
--1300: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
),
),
--palettes: (
--base: #edddc4 --grays,
--red: oklch(36.32% 0.1302 53.73) --colors,
--blue: oklch(36.32% 0.1302 273.58) --colors,
--yellow: oklch(36.32% 0.1302 92.94) --colors,
),
--semantic: (
--bg-l2: --base --50,
--bg-l1: --base --75,
--bg-base: --base --100,
--link: (
--fg: --red --1000,
--underline: --red --400,
--fg-inv: --red --1000-text,
--active: --red --1300,
--active-inv: --red --1300-text,
)
),
)
);
$themes: ();
@each $theme-name, $theme in $themes-spec {
$compiled: props.def(--colors, (), 'color');
@each $palette-name, $palette in map.get($theme, --palettes) {
$base-color: list.nth($palette, 1);
$levels: list.nth($palette, 2);
$palette: fn.palette($base-color, map.get($theme, --levels, $levels), list.nth(map.get($theme, --palettes, --base), 1));
$compiled: props.merge($compiled, ( $palette-name: $palette ));
}
@each $color, $ref in map.get($theme, --semantic) {
$res: ();
@if meta.type-of($ref) == 'map' {
@each $key, $r in $ref {
$re1: list.nth($r, 1);
$re2: functions.list-slice($r, 2);
$res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
}
} @else {
$ref1: list.nth($ref, 1);
$ref2: functions.list-slice($ref, 2);
$res: props.get($compiled, $ref1, $ref2...);
}
$compiled: props.merge($compiled, ( $color: $res ));
}
$themes: map.set($themes, $theme-name, $compiled);
}
$theme: map.get($themes, --light);
//
$vlpnLink: props.def(--vlpnLink, props.get($theme, --link, --fg));
$vlpnLinkUnderline: props.def(--vlpnLinkUnderline, props.get($theme, --link, --underline));
$vlpnLinkFg: props.def(--vlpnLinkFg, props.get($theme, --link, --fg-inv));
$vlpnLinkActive: props.def(--vlpnLinkActive, props.get($theme, --link, --active));
$vlpnLinkActiveFg: props.def(--vlpnLinkActiveFg, props.get($theme, --link, --active-inv));
$vlpnSmileySize: props.def(--vlpnSmileySize, 28px);
$wcfFontSizeHeadline: props.def(--wcfFontSizeHeadline, 16px);
$wcfHeaderBackground: props.def(--wcfHeaderBackground, props.get($theme, --base, --700));
$wcfHeaderMenuBackground: props.def(--wcfHeaderMenuBackground, props.get($theme, --base, --800));
$wcfHeaderMenuLinkBackground: props.def(--wcfHeaderMenuLinkBackground, props.get($theme, --base, --800));
$wcfHeaderMenuLinkBackgroundActive: props.def(--wcfHeaderMenuLinkBackgroundActive, props.get($theme, --base, --700));
$wcfHeaderMenuDropdownBackground: props.def(--wcfHeaderMenuDropdownBackground, props.get($theme, --base, --800));
$wcfHeaderMenuDropdownBorder: props.def(--wcfHeaderMenuDropdownBorder, props.get($theme, --base, --800));
$wcfHeaderMenuDropdownBackgroundActive: props.def(--wcfHeaderMenuDropdownBackgroundActive, props.get($theme, --base, --700));
$wcfNavigationBackground: props.def(--wcfNavigationBackground, props.get($theme, --bg-base));
$wcfNavigationText: props.def(--wcfNavigationText, props.get($theme, --base, --500));
$wcfNavigationLink: props.def(--wcfNavigationLink, props.get($theme, --base, --800));
$wcfNavigationLinkActive: props.def(--wcfNavigationLinkActive, props.get($theme, --base, --800));
$wcfContentBackground: props.def(--wcfContentBackground, rgb(242, 242, 242));
$wcfContentBorder: props.def(--wcfContentBorder, var(--wcfContentBorderInner));
$wcfContentDimmedText: props.def(--wcfContentDimmedText, rgba(0, 0, 0, .6));
$wcfContentDimmedLink: props.def(--wcfContentDimmedLink, rgba(0, 0, 0, .6));
$wcfFooterBoxBackground: props.def(--wcfFooterBoxBackground, props.get($theme, --bg-base));
$wcfFooterBoxText: props.def(--wcfFooterBoxText, props.get($theme, --base, --800));
$wcfFooterBoxHeadlineText: props.def(--wcfFooterBoxText, props.get($theme, --base, --900));
$wcfFooterBackground: props.def(--wcfFooterBackground, props.get($theme, --base, --700));
$wcfFooterText: props.def(--wcfFooterText, props.get($theme, --base, --100));
$wcfFooterLink: props.def(--wcfFooterLink, props.get($theme, --base, --75));
$wcfFooterLinkActive: props.def(--wcfFooterLinkActive, props.get($theme, --base, --75));
$wcfFooterCopyrightBackground: props.def(--wcfFooterCopyrightBackground, props.get($theme, --base, --800));
$wcfFooterCopyrightText: props.def(--wcfFooterCopyrightText, props.get($theme, --base, --75));
$wcfFooterCopyrightLink: props.def(--wcfFooterCopyrightLink, props.get($theme, --base, --50));
$wcfFooterCopyrightLinkActive: props.def(--wcfFooterCopyrightLinkActive, props.get($theme, --base, --50));
$wcfSidebarBackground: props.def(--wcfSidebarBackground, $wcfContentBackground);
$wcfSidebarDimmedText: props.def(--wcfSidebarDimmedText, props.get($wcfContentDimmedText));
$wcfButtonBackground: props.def(--wcfButtonBackground, props.get($theme, --base, --100));
$wcfButtonText: props.def(--wcfButtonText, props.get($theme, --base, --100-text));
$wcfButtonBackgroundActive: props.def(--wcfButtonBackgroundActive, props.get($theme, --base, --700));
$wcfButtonTextActive: props.def(--wcfButtonTextActive, props.get($theme, --base, --700-text));
$wcfButtonPrimaryBackground: props.def(--wcfButtonPrimaryBackground, props.get($theme, --red, --900));
$wcfButtonPrimaryText: props.def(--wcfButtonTextBackground, props.get($theme, --red, --900-text));
$wcfButtonPrimaryBackgroundActive: props.def(--wcfButtonPrimaryBackgroundActive, props.get($theme, --red, --1200));
$wcfButtonPrimaryTextActive: props.def(--wcfButtonTextBackgroundActive, props.get($theme, --red, --1200-text));
$wcfBoxShadowCard: props.def(--wcfBoxShadowCard, none);
$wcfContentContainerBorder: props.def(--wcfContentContainerBorder, var(--wcfContentContainerBackground));
$wcfContentLink: props.def(--wcfContentLink, props.get($vlpnLink));
$wcfContentLinkActive: props.def(--wcfContentLinkActive, props.get($vlpnLinkActive));
$wcfSidebarLink: props.def(--wcfSidebarLink, props.get($vlpnLink));
$wcfSidebarLinkActive: props.def(--wcfSidebarLinkActive, props.get($vlpnLinkActive));
$wcfFooterBoxLink: props.def(--wcfFooterBoxLink, props.get($vlpnLink));
$wcfFooterBoxLinkActive: props.def(--wcfFooterBoxLinkActive, props.get($vlpnLinkActive));
$wcfTabularBoxHeadline: props.def(--wcfTabularBoxHeadline, props.get($vlpnLink));
$wcfTabularBoxHeadlineActive: props.def(--wcfTabularBoxHeadlineActive, props.get($vlpnLinkActive));
$wcfStatusInfoBackground: props.def(--wcfStatusInfoBackground, props.get($theme, --blue, --200));
$wcfStatusInfoText: props.def(--wcfStatusInfoText, props.get($theme, --blue, --1200));
|
