v3/src/design-system/atoms/breakpoints/Breakpoints.ts

export const breakpoints = {
    onTablet: 768,
    onDesktop: 1024,
};

export const mediaQueryDefs = {
    onSmallScreen: `@media screen and (max-width: ${breakpoints.onTablet - 1}px)`,
    onTablet: `@media screen and (min-width: ${breakpoints.onTablet}px)`,
    onDesktop: `@media screen and (min-width: ${breakpoints.onDesktop}px)`,
};

export const onTablet = (...expressions: any) => {
    return `
    ${mediaQueryDefs.onTablet} {
      ${expressions.join()}
    }
  `;
};

export const onDesktop = (...expressions: any) => {
    return `
    ${mediaQueryDefs.onDesktop} {
      ${expressions.join()}
    }
  `;
};

export const onSmallScreen = (...expressions: any) => {
    return `
    ${mediaQueryDefs.onSmallScreen} {
      ${expressions.join()}
    }
  `;
};