@aredotna/tokens

Design tokens for Are.na applications.

Installation

yarn add @aredotna/tokens

Usage

import {
  COLORS,
  SPACE,
  FONT_SIZES,
  RADII,
  BREAKPOINTS,
  FONTS,
  SHADOWS,
  BLURS,
} from "@aredotna/tokens";

// Use the tokens in your application
const styles = {
  backgroundColor: COLORS.light.background,
  padding: SPACE[4],
  fontSize: FONT_SIZES[3],
  borderRadius: RADII[1],
  fontFamily: FONTS.sans,
  boxShadow: SHADOWS[1],
  backdropFilter: BLURS[1],
};

Available Tokens

• COLORS: Color palette with light, dark, dawn, and dusk themes
• SPACE: Spacing scale
• FONT_SIZES: Typography scale
• RADII: Border radius values
• BREAKPOINTS: Responsive breakpoints
• FONTS: Base font families
• SHADOWS: Box shadows
• BLURS: Blur effects

Fonts

Font files are included at the package root under fonts/ for easy download or direct consumption in your app/build.

• fonts/areal.woff2: Areal variable font that you probably want to use
• fonts/web/**: specific weights/styles (woff/woff2) for Areal and Areal Mono
• fonts/web variable/**: variable webfont (woff/woff2)
• fonts/otf/** and fonts/variable/**: original sources

Next.js (next/font/local)

import localFont from "next/font/local";
import { FONTS } from "@aredotna/tokens";

export const areal = localFont({
  src: "./node_modules/@aredotna/tokens/fonts/areal.woff2",
  variable: "--font-areal",
  display: "swap",
  fallback: ["Arial", "Helvetica", "sans-serif"],
});

export const FONT_STACKS = {
  sans: `${areal.style.fontFamily}, ${FONTS.sans}`,
  mono: `${areal.style.fontFamily}, ${FONTS.mono}`,
};

Stitches helpers

import { css } from "@stitches/react";
import { FONTS } from "@aredotna/tokens";

export const mono = (value: number) => ({
  fontFamily: "$mono",
  fontVariationSettings: `"MONO" ${value}`,
});

export const italic = () => ({
  fontStyle: "italic",
  fontVariationSettings: `"slnt" -12`,
});

License

MIT