UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

46 lines (45 loc) 1.37 kB
/** * ### 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)', }, };