@ananse/tokens
v0.1.0
Published
CSS variables and Tailwind preset for the Ananse design system.
Maintainers
pkdadsonReadme
@ananse/tokens
Design tokens for Ananse: CSS variables and a Tailwind preset.
Install
pnpm add @ananse/tokensCSS variables
Import once at the root of your app:
import "@ananse/tokens/variables.css";Includes:
- Surface:
--ananse-bg,--ananse-node-bg,--ananse-node-border, text colors, radius, shadows - Edges:
--ananse-edge-color,--ananse-edge-highlight - Focus / selection rings
- Department accent colors (
--ananse-dept-*) - Role styles (executive, vacant)
- Badge colors: remote, hybrid, onsite, contractor, intern, tenure
Dark theme
Set data-theme="dark" on <html> (or any ancestor). Variables under [data-theme="dark"] override the light defaults.
<html data-theme="dark">Tailwind preset
// tailwind.config.ts
import type { Config } from "tailwindcss";
import anansePreset from "@ananse/tokens/tailwind";
export default {
presets: [anansePreset],
content: ["./src/**/*.{ts,tsx}"],
} satisfies Config;Utility colors map to the same CSS variables (e.g. bg-ananse-node, text-ananse-node-text, border-ananse-node-border).
License
MIT