@navinc/base-react-components
Version:
Nav's Pattern Library
37 lines (36 loc) • 2.07 kB
TypeScript
/**
* 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};
* `
*/
import { Theme } from './base-theme.js';
export declare const elevations: {
readonly elevation1: "box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 4px 1px -2px rgb(0 0 0 / 8%);";
readonly 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%);";
readonly 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%);";
readonly 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 declare const elevation1: ({ theme }: {
theme: Theme;
}) => "box-shadow: 0 0 0 1px rgb(0 0 0 / 10%), 0 4px 1px -2px rgb(0 0 0 / 8%);";
export declare const elevation2: ({ theme }: {
theme: Theme;
}) => "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%);";
export declare const elevation3: ({ theme }: {
theme: Theme;
}) => "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%);";
export declare const elevation4: ({ theme }: {
theme: Theme;
}) => "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%);";