Shadows
Light Shadow
Variable | Property |
---|---|
--ob-shadow-light-sm | 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) |
--ob-shadow-light-base | 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) |
--ob-shadow-light-md | 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) |
--ob-shadow-light-lg | 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) |
--ob-shadow-light-xl | 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) |
--ob-shadow-light-2xl | 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 |
---|---|
--ob-shadow-dark-sm | 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) |
--ob-shadow-dark-base | 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) |
--ob-shadow-dark-md | 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) |
--ob-shadow-dark-lg | 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) |
--ob-shadow-dark-xl | 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) |
--ob-shadow-dark-2xl | 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 |
---|---|
--ob-shadow-primary-sm | 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) |
--ob-shadow-primary-base | 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) |
--ob-shadow-primary-md | 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) |
--ob-shadow-primary-lg | 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) |
--ob-shadow-primary-xl | 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) |
--ob-shadow-primary-2xl | 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 |
---|---|
--ob-shadow-secondary-sm | 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) |
--ob-shadow-secondary-base | 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) |
--ob-shadow-secondary-md | 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) |
--ob-shadow-secondary-lg | 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) |
--ob-shadow-secondary-xl | 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) |
--ob-shadow-secondary-2xl | 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) |