@navinc/base-react-components
Version:
Nav's Pattern Library
28 lines • 1.51 kB
JavaScript
/**
* Elevation styles for use in components. These can be brought in two different ways:
* 1. Import them directly (`elevation1`, `elevation2`, etc) and use them in your styled component
* 2. Use the theme directly `${({ theme }) => theme.elevations.elevation4};`
* @example
* // If you want to use the function directly
* import { elevation1 } from '../themes/elevation.js'
* ...
* const StyledDiv = styled.div`
* ${elevation1};
* `
* @example
* // If you want to use the theme
* const StyledDiv = styled.div`
* ${({ theme }) => theme.elevations.elevation4};
* `
*/
export const elevations = {
elevation1: 'box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 4px 1px -2px rgb(0 0 0 / 8%);',
elevation2: 'box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 4px 4px -2px rgb(0 0 0 / 5%), 0 8px 8px -4px rgb(0 0 0 / 5%), 0 16px 16px -8px rgb(0 0 0 / 5%);',
elevation3: 'box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 8px 8px -4px rgb(0 0 0 / 5%), 0 16px 16px -8px rgb(0 0 0 / 5%), 0 32px 32px -16px rgb(0 0 0 / 5%);',
elevation4: 'box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 16px 16px -16px rgb(0 0 0 / 5%), 0 32px 32px -16px rgb(0 0 0 / 5%), 0 64px 64px -32px rgb(0 0 0 / 5%);',
};
export const elevation1 = ({ theme }) => theme.elevations.elevation1;
export const elevation2 = ({ theme }) => theme.elevations.elevation2;
export const elevation3 = ({ theme }) => theme.elevations.elevation3;
export const elevation4 = ({ theme }) => theme.elevations.elevation4;
//# sourceMappingURL=elevation.js.map