1 | const Shadows = {
|
2 | '--shadow-color': '220 3% 15%',
|
3 | '--shadow-strength': '1%',
|
4 |
|
5 | '--shadow-color-@media:dark': '220 40% 2%',
|
6 | '--shadow-strength-@media:dark': '25%',
|
7 |
|
8 | '--shadow-1': '0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
|
9 | '--shadow-2': `
|
10 | 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
11 | 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%))`,
|
12 | '--shadow-3': `
|
13 | 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
14 | 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
15 | 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
|
16 | 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
|
17 | 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%))`,
|
18 | '--shadow-4': `
|
19 | 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
20 | 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
21 | 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
22 | 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
|
23 | 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
|
24 | 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%))`,
|
25 | '--shadow-5': `
|
26 | 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
27 | 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
28 | 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
29 | 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
|
30 | 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
|
31 | 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%))`,
|
32 | '--shadow-6': `
|
33 | 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
34 | 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
35 | 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
36 | 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
|
37 | 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
|
38 | 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
|
39 | 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%))`,
|
40 |
|
41 | '--inner-shadow-0': 'inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
|
42 | '--inner-shadow-1': 'inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
|
43 | '--inner-shadow-2': 'inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
|
44 | '--inner-shadow-3': 'inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
|
45 | '--inner-shadow-4': 'inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))',
|
46 | }
|
47 |
|
48 | export default Shadows
|
49 |
|
50 | export const StaticShadows = Object.fromEntries(
|
51 | Object.entries(Shadows)
|
52 | .map(([key,value]) => {
|
53 | value = value.replace(/var(--shadow-color)/g, Shadows['--shadow-color'])
|
54 | value = value.replace(/var(--shadow-strength)/g, Shadows['--shadow-strength'])
|
55 | return [key, value]
|
56 | })
|
57 | .filter(([key]) =>
|
58 | !['--shadow-color', '--shadow-strength'].includes(key)
|
59 | )
|
60 | )
|