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
 68// Standard size unit used for paddings, margins, borders, etc.
 69
 70export type Size = number
 71
 72export type SizeToken = Token<Size, "size">;
 73function size(value: Size): SizeToken {
 74  return {
 75    value,
 76    type: "size"
 77  };
 78}
 79
 80export const sizes = {
 81  px: size(1),
 82  xs: size(2),
 83  sm: size(4),
 84  md: size(6),
 85  lg: size(8),
 86  xl: size(12),
 87};
 88
 89export type Color = string;
 90export interface ColorToken {
 91  value: Color,
 92  type: "color",
 93  step?: number,
 94}
 95export function color(value: string): ColorToken {
 96  return {
 97    value,
 98    type: "color",
 99  };
100}
101export const colors = {
102  neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
103  rose: colorRamp("#F43F5EFF"),
104  red: colorRamp("#EF4444FF"),
105  orange: colorRamp("#F97316FF"),
106  amber: colorRamp("#F59E0BFF"),
107  yellow: colorRamp("#EAB308FF"),
108  lime: colorRamp("#84CC16FF"),
109  green: colorRamp("#22C55EFF"),
110  emerald: colorRamp("#10B981FF"),
111  teal: colorRamp("#14B8A6FF"),
112  cyan: colorRamp("#06BBD4FF"),
113  sky: colorRamp("#0EA5E9FF"),
114  blue: colorRamp("#3B82F6FF"),
115  indigo: colorRamp("#6366F1FF"),
116  violet: colorRamp("#8B5CF6FF"),
117  purple: colorRamp("#A855F7FF"),
118  fuschia: colorRamp("#D946E4FF"),
119  pink: colorRamp("#EC4899FF"),
120}
121
122export type NumberToken = Token<number, "number">;
123
124export default {
125  fontFamilies,
126  fontSizes,
127  fontWeights,
128  size,
129  colors,
130};