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};