import { createResponsiveToken } from '../utils/create-responsive-token';
import { vars } from '../vars.css';

export const typographyResponsiveRule = createResponsiveToken({
  lg: {
    [vars.fontSizes.h1]: vars.fontSizes['4xl'],
    [vars.fontSizes.h2]: vars.fontSizes['2xl'],
    [vars.fontSizes.h3]: vars.fontSizes['lg'],
    [vars.fontSizes.h4]: vars.fontSizes['md'],
    [vars.fontSizes.h5]: vars.fontSizes['sm'],
    [vars.fontSizes.h6]: vars.fontSizes['sm'],
    [vars.fontSizes.body1]: vars.fontSizes['sm'],
    [vars.fontSizes.body2]: vars.fontSizes['xs'],
  },
  md: {
    [vars.fontSizes.h1]: vars.fontSizes['2xl'],
    [vars.fontSizes.h2]: vars.fontSizes['xl'],
    [vars.fontSizes.h3]: vars.fontSizes['lg'],
    [vars.fontSizes.h4]: vars.fontSizes['md'],
    [vars.fontSizes.h5]: vars.fontSizes['sm'],
    [vars.fontSizes.h6]: vars.fontSizes['sm'],
    [vars.fontSizes.body1]: vars.fontSizes['sm'],
    [vars.fontSizes.body2]: vars.fontSizes['xs'],
  },
});