README.md

Additional Styling on top of zord:

You can set global styles and use classNames to inherit them using this pattern:

globalStyle('light-font', {
  fontWeight: 300,
  fontFamily: "'ptRegular', Arial, Helvetica, sans-serif!important",
  color: 'green'
})

Vanilla Css

Of course you can always just write vanilla css! the className prop accepts an array on any zord element:

className={['style-a-written-in-vanilla-css', styleBWrittenInVanillaExtractSyleSheet]}

Also setting some global css variables is a good way to go for colors etc.

css variables can also be responsive with breakpoints.

globals.css

@font-face {
  font-family: ptRegular;
  src: url('/fonts/PT-Root-UI_Regular.woff');
}

@font-face {
  font-family: ptMedium;
  src: url('/fonts/PT-Root-UI_Medium.woff');
}

@font-face {
  font-family: ptBold;
  src: url('/fonts/PT-Root-UI_Bold.woff');
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

/* CSS VARIABLES */

:root {
  --dk-grey: rgba(0, 0, 0, 0.6);
  --light-grey: rgba(0, 0, 0, 0.125);
  --nouns-beige: #e1d7d5;
}

style-constants.ts

/* These could just be css Variables */

export const HEADER_HEIGHT = 84
export const HEADER_HEIGHT_MOBILE = 128
export const FOOTER_HEIGHT = 204
export const FOOTER_HEIGHT_MOBILE = 80
export const HEADER_Z = 100

export const MAX_WIDTH = {
  SM: 564,
  MED: 1100,
  LG: 1200,
  XL: 1376,
}

styles.css.ts

import { style, globalStyle } from '@vanilla-extract/css'
import { atoms, media, typography, colorTheme, radii } from '@zoralabs/zord'
import {
  FOOTER_HEIGHT,
  FOOTER_HEIGHT_MOBILE,
  HEADER_HEIGHT,
  HEADER_HEIGHT_MOBILE,
  MAX_WIDTH,
} from './style-constants'

globalStyle('html, body', {
  margin: 0,
  padding: 0,
})

/* Globally changing the font as using html tags to inherit */

globalStyle('*', {
  fontFamily: "'ptBold', Arial, Helvetica, sans-serif!important",
})

globalStyle('h1, h2, h3', {
  fontFamily: "'Funky font', cursive!important",
})

globalStyle('light-font', {
  fontWeight: 300,
  fontFamily: "'ptRegular', Arial, Helvetica, sans-serif!important",
})

export const lightFont = style({
  fontWeight: 300,
  fontFamily: "'ptRegular', Arial, Helvetica, sans-serif!important",
})

export const noTextWrap = style({
  whiteSpace: 'nowrap',
})

export const textCenter = style({
  textAlign: 'center',
})

export const leadingTight = style({
  lineHeight: 1.125,
})

export const lightGreyType = style({
  color: 'var(--dk-grey)',
})

export const buttonStyle = style([
  {
    backgroundColor: 'var(--light-grey)',
  },
  atoms({
    borderRadius: 'round',
    px: 'x2',
    py: 'x2',
    justifyContent: 'center',
  }),
])

export const pageWrapper = style([
  {
    minHeight: `calc(100vh - ${HEADER_HEIGHT_MOBILE + FOOTER_HEIGHT_MOBILE}px)`,
    '@media': {
      [media.min1024]: {
        minHeight: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT}px)`,
      },
    },
  },
])

export const maxWidthSm = style([
  {
    maxWidth: MAX_WIDTH.SM,
  },
  atoms({
    width: '100%',
    margin: 'auto',
  }),
])

globalStyle('.zord-acccordionTrigger > span', {
  fontFamily: "'Londrina Solid', cursive!important",
  fontSize: typography.size[8],
  paddingBottom: 10,
})

globalStyle('.zord-attributesHeading', {
  fontFamily: "'Londrina Solid', cursive!important",
  fontSize: typography.size[8],
  paddingTop: 10,
})

globalStyle('.market-traits h3 > button > span', {
  fontFamily: "'ptBold', Arial, Helvetica, sans-serif!important",
  fontSize: `${typography.size[10]}!important`,
  textTransform: 'capitalize',
  paddingBottom: 0,
})

globalStyle('.market-traits h3 > button', {
  backgroundColor: `${colorTheme.background.tertiary}!important`,
  paddingLeft: 10,
  paddingRight: 10,
  paddingBottom: 10,
  borderRadius: radii.curved,
  marginBottom: 5,
})

export const clickAnimation = style({
  transition:
    'border 0.1s ease-in-out, background 0.1s ease-in-out, transform 0.1s ease-out',
  userSelect: 'none',
  selectors: {
    '&:focus-visible': {
      outline: '2px solid rgb(32, 103, 243)',
      outlineStyle: 'auto',
    },
    '&:active': {
      transform: 'scale(0.95)',
    },
    '&[disabled]': {
      cursor: 'not-allowed',
      pointerEvents: 'none',
      opacity: 0.6,
    },
    '&[disabled]:active': {
      transform: 'unset',
    },
  },
})