vanilla-extract

base.ts

import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles'

const typographyProperties = defineProperties({
  ...responsiveProperties,
  properties: {
    fontSize: fontSizePairings,
    lineHeight: lineHeights,
    fontWeight: fontWeights,
    letterSpacing: letterSpacings,
    textAlign: ['left', 'right', 'center'],
  },
})

const displayProperties = defineProperties({
  ...responsiveProperties,
  properties: {
    display: ['none', 'flex', 'grid', 'inline-flex', 'block', 'inline-block'],
    alignItems: ['flex-start', 'center', 'flex-end', 'stretch'],
    alignContent: ['center', 'stretch'],
    justifyContent: ['flex-start', 'center', 'flex-end', 'space-between'],
    justifyItems: ['start', 'center', 'end'],
    flexDirection: ['row', 'column'],
    flex: ['0', '1'],
    flexShrink: ['0', '1', '2'],
    gridTemplateColumns: {
      '1': 'repeat(var(--grid-repeat, 1), minmax(0, 1fr))',
      '2': 'repeat(var(--grid-repeat, 2), minmax(0, 1fr))',
      '3': 'repeat(var(--grid-repeat, 3), minmax(0, 1fr))',
      '4': 'repeat(var(--grid-repeat, 4), minmax(0, 1fr))',
      '5': 'repeat(var(--grid-repeat, 5), minmax(0, 1fr))',
      '6': 'repeat(var(--grid-repeat, 6), minmax(0, 1fr))',
      '7': 'repeat(var(--grid-repeat, 7), minmax(0, 1fr))',
      '8': 'repeat(var(--grid-repeat, 8), minmax(0, 1fr))',
      '9': 'repeat(var(--grid-repeat, 9), minmax(0, 1fr))',
      '10': 'repeat(var(--grid-repeat, 10), minmax(0, 1fr))',
      '11': 'repeat(var(--grid-repeat, 11), minmax(0, 1fr))',
      '12': 'repeat(var(--grid-repeat, 12), minmax(0, 1fr))',
    },
  },
})

export const css = createSprinkles(typographyProperties, displayProperties)