@dreadkn1ght123/tokens

Shared design tokens for the @dreadkn1ght123 design system — available in three formats so both web and React Native apps can consume the same brand values.

Installation

pnpm add @dreadkn1ght123/tokens

Import patterns

1. Web CSS — custom properties

Import the CSS file once in your app's CSS entry, after @import "tailwindcss":

@import "tailwindcss";
@import "@dreadkn1ght123/tokens/theme.css";

All tokens are exposed as CSS custom properties (--background, --primary, --radius, etc.) and Tailwind v4 utilities are wired up automatically via @theme inline.

Identical to @dreadkn1ght123/ui/theme.css — use this package when you need the tokens without the full component library.

2. React Native — typed JS objects

import { StyleSheet } from "react-native";
import { light, dark } from "@dreadkn1ght123/tokens";

// Pick the mode that matches the system color scheme
import { useColorScheme } from "react-native";

export function useTokens() {
  const scheme = useColorScheme();
  return scheme === "dark" ? dark : light;
}

// Example: using tokens in a StyleSheet
const tokens = light; // or dark

const styles = StyleSheet.create({
  card: {
    backgroundColor: tokens.colors.card,
    borderColor: tokens.colors.cardBorder,
    borderWidth: 1,
    borderRadius: tokens.radii.lg,
    padding: 16,
  },
  title: {
    color: tokens.colors.foreground,
    fontFamily: tokens.fonts.sans,
    fontSize: 16,
    fontWeight: "600",
  },
  button: {
    backgroundColor: tokens.colors.primary,
    borderRadius: tokens.radii.md,
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  buttonText: {
    color: tokens.colors.primaryForeground,
    fontWeight: "600",
  },
});

Token shape

interface Tokens {
  colors: {
    background: string;        // e.g. "#ffffff"
    foreground: string;
    border: string;
    primary: string;           // brand blue #0f2efd
    primaryForeground: string;
    // … full set — see src/index.ts for complete interface
  };
  radii: {
    base: number;  // 10  (0.625 rem)
    sm: number;    // 6
    md: number;    // 8
    lg: number;    // 10
    xl: number;    // 14
  };
  fonts: {
    sans: string;  // "'Inter', system-ui, sans-serif"
    serif: string;
    mono: string;
  };
  shadows: {
    "2xs": string;
    xs: string;
    sm: string;
    DEFAULT: string;
    md: string;
    lg: string;
    xl: string;
    "2xl": string;
  };
}

3. Tooling / Figma plugins — JSON

// Node.js / bundler-agnostic
import tokens from "@dreadkn1ght123/tokens/tokens.json";

console.log(tokens.light.colors.primary);  // "#0f2efd"
console.log(tokens.dark.colors.background); // "#18181b"

The JSON file has the same { light, dark } structure as the TS exports and can be consumed by Figma plugins, Style Dictionary, token pipelines, or any tooling that can read JSON.

Package exports

| Export | Format | Use case | |---|---|---| | @dreadkn1ght123/tokens | ES module (JS + types) | React Native, bundled web apps | | @dreadkn1ght123/tokens/theme.css | CSS | Tailwind v4 web apps | | @dreadkn1ght123/tokens/tokens.json | JSON | Figma plugins, codegen, tooling |

Color palette overview

| Token | Light | Dark | |---|---|---| | background | #ffffff | #18181b | | foreground | #18181b | #fafafa | | primary | #0f2efd | #0f2efd | | muted | #f4f4f5 | #3f3f46 | | destructive | #ef4444 | #f87171 | | chart1 | #a3e635 | #a3e635 |