Shadows
Light Shadow
Variable | Property |
---|---|
0px 1px 3px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05) | |
0px 2px 4px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05) | |
0px 4px 8px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05) | |
0px 8px 16px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05) | |
0px 16px 24px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05) | |
0px 32px 64px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05) |
Dark Shadow
Variable | Property |
---|---|
0px 1px 3px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9) | |
0px 2px 4px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9) | |
0px 4px 8px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9) | |
0px 8px 16px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9) | |
0px 16px 24px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9) | |
0px 32px 64px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9) |
Primary Shadow
Variable | Property |
---|---|
0px 1px 3px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25) | |
0px 2px 4px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25) | |
0px 4px 8px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25) | |
0px 8px 16px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25) | |
0px 16px 24px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25) | |
0px 32px 64px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25) |
Secondary Shadow
Variable | Property |
---|---|
0px 1px 3px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1) | |
0px 2px 4px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1) | |
0px 4px 8px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1) | |
0px 8px 16px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1) | |
0px 16px 24px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1) | |
0px 32px 64px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1) |