pike/glyph Public Public: anyone can read this; nobody can change it.

workbenchthis machine

Files e45e4989a79ef3f801c453528dd5b471f91bea4f

95 lines · 2.5 KB · ~870 tok Raw History

{
  "$description": "The look, as data (W3C design tokens). Every colour the app shows is here and nowhere else: src/tokens.ts compiles this to /tokens.css at boot, and bun run lint:design refuses a raw colour anywhere else. A colour's $value is the light theme; $extensions.mode.dark is the dark one.",
  "color": {
    "$type": "color",
    "bg": {
      "$value": "#f6f6f3",
      "$extensions": { "mode": { "dark": "#131312" } }
    },
    "surface": {
      "$value": "#ffffff",
      "$extensions": { "mode": { "dark": "#1d1d1b" } }
    },
    "fg": {
      "$value": "#1c1c1a",
      "$extensions": { "mode": { "dark": "#ecece7" } }
    },
    "muted": {
      "$value": "#6b6b65",
      "$extensions": { "mode": { "dark": "#9a9a93" } }
    },
    "line": {
      "$value": "#e3e3dd",
      "$extensions": { "mode": { "dark": "#2c2c29" } }
    },
    "accent": {
      "$value": "#2f5bea",
      "$extensions": { "mode": { "dark": "#7c96ff" } }
    },
    "accent-fg": {
      "$value": "#ffffff",
      "$extensions": { "mode": { "dark": "#0f1a4d" } }
    },
    "danger": {
      "$value": "#c2410c",
      "$extensions": { "mode": { "dark": "#fb923c" } }
    },
    "toast-bg": {
      "$value": "#1c1c1a",
      "$extensions": { "mode": { "dark": "#ecece7" } }
    },
    "toast-fg": {
      "$value": "#f6f6f3",
      "$extensions": { "mode": { "dark": "#131312" } }
    },
    "shadow": {
      "$value": "#0000002e",
      "$extensions": { "mode": { "dark": "#00000080" } }
    }
  },
  "space": {
    "$type": "dimension",
    "1": { "$value": "0.25rem" },
    "2": { "$value": "0.5rem" },
    "3": { "$value": "0.75rem" },
    "4": { "$value": "1rem" },
    "5": { "$value": "1.5rem" },
    "6": { "$value": "2.5rem" }
  },
  "radius": {
    "$type": "dimension",
    "md": { "$value": "10px" },
    "pill": { "$value": "999px" }
  },
  "size": {
    "$type": "dimension",
    "tap": {
      "$value": "44px",
      "$description": "The least a control measures on a side."
    }
  },
  "font": {
    "$type": "fontFamily",
    "sans": {
      "$value": ["system-ui", "-apple-system", "Segoe UI", "sans-serif"]
    },
    "mono": {
      "$value": ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"]
    }
  },
  "text": {
    "$type": "dimension",
    "sm": { "$value": "0.875rem" },
    "base": {
      "$value": "1rem",
      "$description": "Never below 16px: a phone zooms into a smaller input."
    },
    "lg": { "$value": "1.125rem" },
    "xl": { "$value": "1.5rem" }
  },
  "leading": {
    "$type": "number",
    "body": { "$value": 1.55 },
    "tight": { "$value": 1.2 }
  }
}

1	{
2	"$description": "The look, as data (W3C design tokens). Every colour the app shows is here and nowhere else: src/tokens.ts compiles this to /tokens.css at boot, and bun run lint:design refuses a raw colour anywhere else. A colour's $value is the light theme; $extensions.mode.dark is the dark one.",
3	"color": {
4	"$type": "color",
5	"bg": {
6	"$value": "#f6f6f3",
7	"$extensions": { "mode": { "dark": "#131312" } }
8	},
9	"surface": {
10	"$value": "#ffffff",
11	"$extensions": { "mode": { "dark": "#1d1d1b" } }
12	},
13	"fg": {
14	"$value": "#1c1c1a",
15	"$extensions": { "mode": { "dark": "#ecece7" } }
16	},
17	"muted": {
18	"$value": "#6b6b65",
19	"$extensions": { "mode": { "dark": "#9a9a93" } }
20	},
21	"line": {
22	"$value": "#e3e3dd",
23	"$extensions": { "mode": { "dark": "#2c2c29" } }
24	},
25	"accent": {
26	"$value": "#2f5bea",
27	"$extensions": { "mode": { "dark": "#7c96ff" } }
28	},
29	"accent-fg": {
30	"$value": "#ffffff",
31	"$extensions": { "mode": { "dark": "#0f1a4d" } }
32	},
33	"danger": {
34	"$value": "#c2410c",
35	"$extensions": { "mode": { "dark": "#fb923c" } }
36	},
37	"toast-bg": {
38	"$value": "#1c1c1a",
39	"$extensions": { "mode": { "dark": "#ecece7" } }
40	},
41	"toast-fg": {
42	"$value": "#f6f6f3",
43	"$extensions": { "mode": { "dark": "#131312" } }
44	},
45	"shadow": {
46	"$value": "#0000002e",
47	"$extensions": { "mode": { "dark": "#00000080" } }
48	}
49	},
50	"space": {
51	"$type": "dimension",
52	"1": { "$value": "0.25rem" },
53	"2": { "$value": "0.5rem" },
54	"3": { "$value": "0.75rem" },
55	"4": { "$value": "1rem" },
56	"5": { "$value": "1.5rem" },
57	"6": { "$value": "2.5rem" }
58	},
59	"radius": {
60	"$type": "dimension",
61	"md": { "$value": "10px" },
62	"pill": { "$value": "999px" }
63	},
64	"size": {
65	"$type": "dimension",
66	"tap": {
67	"$value": "44px",
68	"$description": "The least a control measures on a side."
69	}
70	},
71	"font": {
72	"$type": "fontFamily",
73	"sans": {
74	"$value": ["system-ui", "-apple-system", "Segoe UI", "sans-serif"]
75	},
76	"mono": {
77	"$value": ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"]
78	}
79	},
80	"text": {
81	"$type": "dimension",
82	"sm": { "$value": "0.875rem" },
83	"base": {
84	"$value": "1rem",
85	"$description": "Never below 16px: a phone zooms into a smaller input."
86	},
87	"lg": { "$value": "1.125rem" },
88	"xl": { "$value": "1.5rem" }
89	},
90	"leading": {
91	"$type": "number",
92	"body": { "$value": 1.55 },
93	"tight": { "$value": 1.2 }
94	}
95	}