@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
46 lines (45 loc) • 1.37 kB
JavaScript
/**
* ### Depth Tokens
*
* Depth is the relative distance between surfaces in the z-axis.
* It provides delineation, focus, and priority with shadows and layering.
* There are seven depth levels, `none`, `1`, `2`, `3`, `4`, `5` and `6`.
* `none` is a special value to remove depth styles. All other levels only apply box-shadow styles.
*
* @example
* ```tsx
* import { depth } from '@workday/canvas-kit-react/tokens';
*
* const CustomCard = () => {
* return (
* <div css={depth[2]}>
* A standard-depth card
* </div>
* );
* }
* ```
*
*/
export const depth = {
none: {
boxShadow: 'none',
},
1: {
boxShadow: '0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)',
},
2: {
boxShadow: '0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)',
},
3: {
boxShadow: '0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)',
},
4: {
boxShadow: '0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)',
},
5: {
boxShadow: '0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)',
},
6: {
boxShadow: '0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)',
},
};