export enum BreakpointKey { zero = 'zero' , s = 's' , m = 'm' , l = 'l' , xl = 'xl' } export type BreakpointFnParam = BreakpointKey | keyof typeof BreakpointKey ; export type CanvasBreakpoints = { example zero : 0 ; example s : 320 ; example m : 768 ; example l : 1024 ; example xl : 1440 ; } ; export const breakpointKeys = [ 'zero' , 's' , 'm' , 'l' , 'xl' ] as const ; /**
 * ### Theme Breakpoint Values
 *
 * Breakpoints are used by media queries to conditionally apply or modify styles based on the viewport width.
 * This allows the UI to be responsive to various screen sizes. This object provides five breakpoint values
 * that correspond to the min-widths of our standard screen sizes.
 *
 * - `zero`: 0
 * - `s`: 320
 * - `m`: 768
 * - `l`: 1024
 * - `xl`: 1440
 *
 * And these are our standard screen size ranges:
 *
 * - `small` (320px - 767px) Used for mobile-sized screens
 * - `medium` (768px - 1023px) Used for tablet-sized screens
 * - `large` - (1024px - 1439px) Used for laptop and small desktop screens
 * - `extra-large` (≥1440px) Used for very large screens
 *
 * Note: Some applications may only require a subset of screen sizes and not use all breakpoints.
 *
 */ export const breakpoints = { zero : 0 , s : 320 , m : 768 , l : 1024 , xl : 1440 , } ; const step = 0.5 ; example export function up ( key ) { const value = typeof breakpoints [ key as BreakpointKey ] === 'number' ? breakpoints [ key ] : key ; return `@media (min-width: ${ value }px)` ; } example example export function down ( endKey ) { const endIndex = breakpointKeys . indexOf ( endKey as BreakpointKey ) + 1 ; const upperbound = breakpoints [ breakpointKeys [ endIndex ] ] ; if ( endIndex === breakpointKeys . length ) { return up ( BreakpointKey . zero ) ; } const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : 0 ; return `@media (max-width: ${ value - step }px)` ; } example example export function between ( start , end ) { const endIndex = breakpointKeys . indexOf ( end ) + 1 ; if ( endIndex === breakpointKeys . length ) { return up ( start ) ; } return ( `@media (min-width: ${ breakpoints [ start ] }px) and ` + `(max-width: ${ breakpoints [ breakpointKeys [ endIndex ] ] - step }px)` ) ; } example example export function only ( key ) { return between ( key , key ) ; }