import { createGlobalThemeContract } from '@vanilla-extract/css';

import { borderWidthsContract, radiiContract } from './tokens/borders.contract';
import { colorsContract } from './tokens/colors.contract';
import { componentsContract } from './tokens/components.contract';
import { sizesContract } from './tokens/sizes.contract';
import { spaceContract } from './tokens/spacing.contract';
import {
  fontsContract,
  fontSizesContract,
  fontWeightsContract,
  letterSpacingsContract,
  lineHeightsContract,
} from './tokens/typography.contract';
import { zIndicesContract } from './tokens/z-index.contract';

export const vars = createGlobalThemeContract(
  {
    colors: colorsContract,
    borderWidths: borderWidthsContract,
    radii: radiiContract,
    sizes: sizesContract,
    space: spaceContract,
    fontSizes: fontSizesContract,
    fontWeights: fontWeightsContract,
    fonts: fontsContract,
    letterSpacings: letterSpacingsContract,
    lineHeights: lineHeightsContract,
    zIndices: zIndicesContract,
    components: componentsContract,
  },
  (_value, path) => `fui-${path.join('-')}`,
);

export type Vars = typeof vars;