tokens.ts

  1import { colorRamp } from "./utils/color";
  2
  3interface Token<V, T> {
  4  value: V,
  5  type: T
  6}
  7
  8export type FontFamily = string;
  9export type FontFamilyToken = Token<FontFamily, "fontFamily">;
 10function fontFamily(value: FontFamily): FontFamilyToken {
 11  return {
 12    value,
 13    type: "fontFamily"
 14  }
 15}
 16export const fontFamilies = {
 17  sans: fontFamily("Zed Sans"),
 18  mono: fontFamily("Zed Mono"),
 19}
 20
 21export type FontSize = number;
 22export type FontSizeToken = Token<FontSize, "fontSize">;
 23function fontSize(value: FontSize) {
 24  return {
 25    value,
 26    type: "fontSize"
 27  };
 28}
 29export const fontSizes = {
 30  "3xs": fontSize(8),
 31  "2xs": fontSize(10),
 32  xs: fontSize(12),
 33  sm: fontSize(14),
 34  md: fontSize(16),
 35  lg: fontSize(18),
 36  xl: fontSize(20),
 37};
 38
 39export type FontWeight =
 40  | "thin"
 41  | "extra_light"
 42  | "light"
 43  | "normal"
 44  | "medium"
 45  | "semibold"
 46  | "bold"
 47  | "extra_bold"
 48  | "black";
 49export type FontWeightToken = Token<FontWeight, "fontWeight">;
 50function fontWeight(value: FontWeight): FontWeightToken {
 51  return {
 52    value,
 53    type: "fontWeight"
 54  };
 55}
 56export const fontWeights = {
 57  "thin": fontWeight("thin"),
 58  "extra_light": fontWeight("extra_light"),
 59  "light": fontWeight("light"),
 60  "normal": fontWeight("normal"),
 61  "medium": fontWeight("medium"),
 62  "semibold": fontWeight("semibold"),
 63  "bold": fontWeight("bold"),
 64  "extra_bold": fontWeight("extra_bold"),
 65  "black": fontWeight("black"),
 66}
 67
 68export type Color = string;
 69export interface ColorToken {
 70  value: Color,
 71  type: "color",
 72  step?: number,
 73}
 74export function color(value: string): ColorToken {
 75  return {
 76    value,
 77    type: "color",
 78  };
 79}
 80export const colors = {
 81  neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
 82  rose: colorRamp("#F43F5EFF"),
 83  red: colorRamp("#EF4444FF"),
 84  orange: colorRamp("#F97316FF"),
 85  amber: colorRamp("#F59E0BFF"),
 86  yellow: colorRamp("#EAB308FF"),
 87  lime: colorRamp("#84CC16FF"),
 88  green: colorRamp("#22C55EFF"),
 89  emerald: colorRamp("#10B981FF"),
 90  teal: colorRamp("#14B8A6FF"),
 91  cyan: colorRamp("#06BBD4FF"),
 92  sky: colorRamp("#0EA5E9FF"),
 93  blue: colorRamp("#3B82F6FF"),
 94  indigo: colorRamp("#6366F1FF"),
 95  violet: colorRamp("#8B5CF6FF"),
 96  purple: colorRamp("#A855F7FF"),
 97  fuschia: colorRamp("#D946E4FF"),
 98  pink: colorRamp("#EC4899FF"),
 99}
100
101export type NumberToken = Token<number, "number">;
102
103export default {
104  fontFamilies,
105  fontSizes,
106  fontWeights,
107  colors,
108};