Vite Plugin Capsize Radix Ui

vite-plugin-capsize-radix

Generate bulletproof typography css for [@radix-ui/themes](https://www.radix-ui.com/)

Now changing fonts is as easy as changing colors.

Why

Getting fonts to look right on the web is [_hard_](https://fantasai.inkedblade.net/style/talks/atypi-2021/atypi-2021-precise-text-alignment.mp4) — so most peoply rely on a few typography frameworks and fonts. But it doesn't have to be that way. [Capsize](https://seek-oss.github.io/capsize/) fixes text sizing and layout allowing for precise text alignment so changing fonts is as easy as changing colors.

https://github.com/KyleAMathews/vite-plugin-capsize-radix-ui/assets/71047/3ec5d6ca-bf00-4b79-8552-4e3da3454f52

Capsize makes fonts render the way you expect them to. With Capsize, if you assign a font to occupy 16px of height, it _actually_ will.

This plugin glues Capsize with the fantastic Radix theming components.

Similar plugins could be built for other meta-frameworks & component libraries — open an issue if you're interested on collaborating on one.

How to use

Install

`npm install vite-plugin-capsize-radix`

Add to vite.config.ts

A sample React config:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"
import { capsizeRadixPlugin } from "vite-plugin-capsize-radix"
import merriweather from "@capsizecss/metrics/merriweather"
import merriweatherSans from "@capsizecss/metrics/merriweatherSans"
import sourceCodePro from "@capsizecss/metrics/sourceCodePro"
import arial from "@capsizecss/metrics/arial"

export default defineConfig({
  plugins: [
    react(),
    capsizeRadixPlugin({
      // Import this file into your app after you import Radix's CSS.
      outputPath: `./public/merriweather.css`,
      // Pass in Capsize font metric objects.
      defaultFontStack: [merriweather, arial],
      headingFontStack: [merriweatherSans, arial],
      codingFontStack: [sourceCodePro, arial],
    }),
  ],
})

Install Fonts via Fontsource

For