tokens.ts

enum BreakpointNames {
  small = 'small',
  medium = 'medium',
  wide = 'wide',
}

type NumericBreakpoints = {
  [key in BreakpointNames]: number;
};

export const breakpoints: NumericBreakpoints = {
  small: 512,
  medium: 730,
  wide: 1100,
};

type BreakpointsPx = {
  [B in keyof NumericBreakpoints as `breakpoint_${B}`]: string;
};

// Provide the same breakpoints in a form usable by CSS media queries
// {
//   breakpoint_small: '512px',
//   breakpoint_medium: '740px',
//   breakpoint_wide: '1100px',
// }
const breakpointsInPx: BreakpointsPx = Object.entries(
  breakpoints,
).reduce<BreakpointsPx>((acc, [key, val]) => {
  acc[`breakpoint_${key}`] = `${val}px`;
  return acc;
}, {} as BreakpointsPx);

export default breakpointsInPx;