import { createGlobalTheme, globalStyle } from '@vanilla-extract/css';
import { merge } from 'lodash';

import { borderWidths, radii } from './tokens/borders';
import { colors } from './tokens/colors';
import { components } from './tokens/components';
import { componentsResponsiveRule } from './tokens/components.responsive';
import { sizes } from './tokens/sizes';
import { space } from './tokens/spacing';
import {
  fontSizes,
  fontWeights,
  fonts,
  letterSpacings,
  lineHeights,
} from './tokens/typography';
import { typographyResponsiveRule } from './tokens/typography.responsive';
import { zIndices } from './tokens/z-index';
import { vars } from './vars.css';

createGlobalTheme(':root', vars, {
  colors,
  borderWidths,
  radii,
  sizes,
  space,
  fontSizes,
  fontWeights,
  fonts,
  letterSpacings,
  lineHeights,
  zIndices,
  components,
});

globalStyle(':root', {
  '@media': merge({}, typographyResponsiveRule, componentsResponsiveRule),
});