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 const colors = {
75 neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
76 rose: colorRamp("#F43F5EFF"),
77 red: colorRamp("#EF4444FF"),
78 orange: colorRamp("#F97316FF"),
79 amber: colorRamp("#F59E0BFF"),
80 yellow: colorRamp("#EAB308FF"),
81 lime: colorRamp("#84CC16FF"),
82 green: colorRamp("#22C55EFF"),
83 emerald: colorRamp("#10B981FF"),
84 teal: colorRamp("#14B8A6FF"),
85 cyan: colorRamp("#06BBD4FF"),
86 sky: colorRamp("#0EA5E9FF"),
87 blue: colorRamp("#3B82F6FF"),
88 indigo: colorRamp("#6366F1FF"),
89 violet: colorRamp("#8B5CF6FF"),
90 purple: colorRamp("#A855F7FF"),
91 fuschia: colorRamp("#D946E4FF"),
92 pink: colorRamp("#EC4899FF"),
93}
94
95export type NumberToken = Token<number, "number">;
96
97export default {
98 fontFamilies,
99 fontSizes,
100 fontWeights,
101 colors,
102};