@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
61 lines (60 loc) • 2.49 kB
TypeScript
/**
* Our internal configuration for breakpoints configuration.
*
* We explicitly use `-0.01rem` for "max" values to both ensure we do not overlap our media queries, but also don't skip any fractional pixels. There is a chance this is not safe in some browsers, eg. Safari has weird rounding.
* @see: https://tzi.fr/css/prevent-double-breakpoint/
*
* @experimental Unsafe for direct consumption outside of the design system itself; please use our `media` export instead for media queries.
*/
export declare const UNSAFE_BREAKPOINTS_CONFIG: {
readonly xxs: {
readonly gridItemGutter: 'var(--ds-space-200)';
readonly gridMargin: 'var(--ds-space-200)';
readonly min: '0rem';
readonly max: '29.99rem';
};
readonly xs: {
readonly gridItemGutter: 'var(--ds-space-200)';
readonly gridMargin: 'var(--ds-space-200)';
readonly min: '30rem';
readonly max: '47.99rem';
};
readonly sm: {
readonly gridItemGutter: 'var(--ds-space-200)';
readonly gridMargin: 'var(--ds-space-300)';
readonly min: '48rem';
readonly max: '63.99rem';
};
readonly md: {
readonly gridItemGutter: 'var(--ds-space-300)';
readonly gridMargin: 'var(--ds-space-400)';
readonly min: '64rem';
readonly max: '89.99rem';
};
readonly lg: {
readonly gridItemGutter: 'var(--ds-space-400)';
readonly gridMargin: 'var(--ds-space-400)';
readonly min: '90rem';
readonly max: '110.49rem';
};
readonly xl: {
readonly gridItemGutter: 'var(--ds-space-400)';
readonly gridMargin: 'var(--ds-space-500)';
readonly min: '110.5rem';
readonly max: null;
};
};
/**
* The list of breakpoints in order from smallest to largest. You may need to clone and reverse this list if you want the opposite.
*
* This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
*
* @experimental Unsafe for consumption outside of the design system itself.
*/
export declare const UNSAFE_BREAKPOINTS_ORDERED_LIST: ["xxs", "xs", "sm", "md", "lg", "xl"];
/**
* This is our smallest breakpoint with a few nuances to it:
* 1. It is the default value for shorthands, eg. `<GridItem span={6} />` maps to `{ [SMALLEST_BREAKPOINT]: props.span }`
* 2. It's omitted in `media.below` as there's nothing below `0px`.
*/
export declare const SMALLEST_BREAKPOINT: 'xxs';