This repository showcases a monorepo setup to build a UI library using @vanilla-extract/css and Vite in library mode. It includes a detailed example of how TypeScript definitions translate into CSS, particularly highlighting the generation and application of CSS variables.

1. Install dependencies with bun i.
2. Build the ui package by running bun run build in the packages/ui directory.
3. Start the development server in the packages/app directory with bun run dev to see the components in action.

This monorepo is organized into two main packages:

• packages/ui: Contains the setup for building components and styles.
• packages/app: Demonstrates the usage of components from the ui package.

The ui package uses @vanilla-extract/css and Vite's library mode to construct and style components. The build process outputs to the dist directory as follows:

dist
├── index.cjs
├── index.d.ts
├── index.js
└── style.css

In packages/ui/src/theme/token.css.ts, CSS variables are defined and their values set, which are then globally applied. Below is the TypeScript configuration followed by the resulting CSS output:

TypeScript Configuration (token.css.ts):

import {
  createGlobalTheme,
  createGlobalThemeContract,
} from "@vanilla-extract/css";

export const vars = createGlobalThemeContract({
  color: {
    primary: "color-primary",
    primaryHover: "color-primary-hover",
    textPrimary: "color-text-primary",
    borderColor: "color-border-color",
    focusBorderColor: "color-focus-border-color",
  },
});

createGlobalTheme(":root", vars, {
  color: {
    primary: "#007bff",
    primaryHover: "#0056b3",
    textPrimary: "#ffffff",
    borderColor: "#ccc",
    focusBorderColor: "#007bff",
  },
});

Resulting CSS Output:

:root {
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-text-primary: #ffffff;
  --color-border-color: #ccc;
  --color-focus-border-color: #007bff;
}
._1ky5pq0 {
  background-color: var(--color-primary);
  color: var(--color-text-primary);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
._1ky5pq0:hover {
  background-color: var(--color-primary-hover);
}
.q62e5d0 {
  padding: 10px;
  border-color: var(--color-border-color);
  border-radius: 5px;
  width: 300px;
  height: 150px;
  font-size: 16px;
}
.q62e5d0:focus {
  border-color: var(--color-focus-border-color);
  outline: none;
}

The app package demonstrates the actual use of the ui package components in a real application setup. Running bun run dev will launch a development server showing the components as they would appear in a production environment.

import { Button, TextArea } from "ui";
import "ui/style.css";

function App() {
  return (
    <div className="root">
      <TextArea />
      <Button>button</Button>
    </div>
  );
}

export default App;