@aredotna/tokens v0.3.0

@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: Font families
• SHADOWS: Box shadows
• BLURS: Blur effects

License

MIT