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