resolve.ts 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540
  1. import type { ColorValue, DesktopTheme, HexColor, ResolvedTheme, ThemeVariant } from "./types"
  2. import { blend, generateNeutralScale, generateScale, hexToOklch, hexToRgb, shift, withAlpha } from "./color"
  3. export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): ResolvedTheme {
  4. const colors = getColors(variant)
  5. const { overrides = {} } = variant
  6. const neutral = generateNeutralScale(colors.neutral, isDark, colors.ink)
  7. const primary = generateScale(colors.primary, isDark)
  8. const accent = generateScale(colors.accent, isDark)
  9. const success = generateScale(colors.success, isDark)
  10. const warning = generateScale(colors.warning, isDark)
  11. const error = generateScale(colors.error, isDark)
  12. const info = generateScale(colors.info, isDark)
  13. const interactive = generateScale(colors.interactive, isDark)
  14. const amber = generateScale(
  15. shift(colors.warning, isDark ? { h: -16, l: -0.058, c: 1.14 } : { h: -22, l: -0.082, c: 0.94 }),
  16. isDark,
  17. )
  18. const blue = generateScale(shift(colors.interactive, { h: -12, l: 0.128, c: 1.12 }), isDark)
  19. const diffAdd = generateScale(
  20. colors.diffAdd ?? shift(colors.success, { c: isDark ? 0.7 : 0.55, l: isDark ? -0.18 : 0.14 }),
  21. isDark,
  22. )
  23. const diffDelete = generateScale(
  24. colors.diffDelete ?? shift(colors.error, { c: isDark ? 0.82 : 0.7, l: isDark ? -0.08 : 0.08 }),
  25. isDark,
  26. )
  27. const ink = colors.ink ?? colors.neutral
  28. const tint = colors.compact ? hexToOklch(ink) : undefined
  29. const body = tint
  30. ? shift(ink, {
  31. l: isDark ? Math.max(0, 0.88 - tint.l) * 0.4 : -Math.max(0, tint.l - 0.18) * 0.24,
  32. c: isDark ? 1.04 : 1.02,
  33. })
  34. : undefined
  35. const backgroundOverride = overrides["background-base"]
  36. const backgroundHex = getHex(backgroundOverride)
  37. const overlay = Boolean(backgroundOverride) && !backgroundHex
  38. const content = (seed: HexColor, scale: HexColor[]) => {
  39. const base = hexToOklch(seed)
  40. const value = isDark ? (base.l > 0.84 ? shift(seed, { c: 1.18 }) : scale[10]) : scale[10]
  41. return shift(value, { l: isDark ? 0.034 : -0.024, c: isDark ? 1.3 : 1.18 })
  42. }
  43. const modified = () => {
  44. if (!colors.compact) return isDark ? "#ffba92" : "#FF8C00"
  45. const warningHue = hexToOklch(colors.warning).h
  46. const deleteHue = hexToOklch(colors.diffDelete ?? colors.error).h
  47. const delta = Math.abs(((((deleteHue - warningHue) % 360) + 540) % 360) - 180)
  48. if (delta < 48) return isDark ? "#ffba92" : "#FF8C00"
  49. return content(colors.warning, warning)
  50. }
  51. const surface = (
  52. seed: HexColor,
  53. alpha: { base: number; weak: number; weaker: number; strong: number; stronger: number },
  54. ) => {
  55. const base = alphaTone(seed, alpha.base)
  56. return {
  57. base,
  58. weak: alphaTone(seed, alpha.weak),
  59. weaker: alphaTone(seed, alpha.weaker),
  60. strong: alphaTone(seed, alpha.strong),
  61. stronger: alphaTone(seed, alpha.stronger),
  62. }
  63. }
  64. const background = backgroundHex ?? neutral[0]
  65. const alphaTone = (color: HexColor, alpha: number) =>
  66. overlay ? (withAlpha(color, alpha) as ColorValue) : blend(color, background, alpha)
  67. const borderTone = (light: number, dark: number) =>
  68. alphaTone(ink, isDark ? Math.min(1, dark + 0.024 + (colors.compact ? 0.08 : 0)) : Math.min(1, light + 0.024))
  69. const diffHiddenSurface = surface(
  70. isDark ? shift(colors.interactive, { c: 0.55, l: 0 }) : shift(colors.interactive, { c: 0.45, l: 0.08 }),
  71. isDark
  72. ? { base: 0.14, weak: 0.08, weaker: 0.18, strong: 0.26, stronger: 0.42 }
  73. : { base: 0.12, weak: 0.08, weaker: 0.16, strong: 0.24, stronger: 0.36 },
  74. )
  75. const neutralAlpha = generateNeutralAlphaScale(neutral, isDark)
  76. const brandb = primary[8]
  77. const brandh = primary[9]
  78. const interb = interactive[isDark ? 6 : 4]
  79. const interh = interactive[isDark ? 7 : 5]
  80. const interw = interactive[isDark ? 5 : 3]
  81. const succb = success[isDark ? 6 : 4]
  82. const succw = success[isDark ? 5 : 3]
  83. const succs = success[10]
  84. const warnb = warning[isDark ? 6 : 4]
  85. const warnw = warning[isDark ? 5 : 3]
  86. const warns = warning[10]
  87. const critb = error[isDark ? 6 : 4]
  88. const critw = error[isDark ? 5 : 3]
  89. const crits = error[10]
  90. const infob = info[isDark ? 6 : 4]
  91. const infow = info[isDark ? 5 : 3]
  92. const infos = info[10]
  93. const lum = (hex: HexColor) => {
  94. const rgb = hexToRgb(hex)
  95. const lift = (v: number) => (v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4))
  96. return 0.2126 * lift(rgb.r) + 0.7152 * lift(rgb.g) + 0.0722 * lift(rgb.b)
  97. }
  98. const hit = (a: HexColor, b: HexColor) => {
  99. const x = lum(a)
  100. const y = lum(b)
  101. const light = Math.max(x, y)
  102. const dark = Math.min(x, y)
  103. return (light + 0.05) / (dark + 0.05)
  104. }
  105. const on = (fill: HexColor) => {
  106. const light = "#ffffff" as HexColor
  107. const dark = "#000000" as HexColor
  108. return hit(light, fill) > hit(dark, fill) ? light : dark
  109. }
  110. const tokens: ResolvedTheme = {}
  111. tokens["background-base"] = neutral[0]
  112. tokens["background-weak"] = neutral[2]
  113. tokens["background-strong"] = neutral[0]
  114. tokens["background-stronger"] = isDark ? neutral[1] : "#fcfcfc"
  115. tokens["surface-base"] = neutralAlpha[1]
  116. tokens["base"] = neutralAlpha[1]
  117. tokens["surface-base-hover"] = neutralAlpha[2]
  118. tokens["surface-base-active"] = neutralAlpha[2]
  119. tokens["surface-base-interactive-active"] = withAlpha(interactive[2], 0.3) as ColorValue
  120. tokens["base2"] = neutralAlpha[1]
  121. tokens["base3"] = neutralAlpha[1]
  122. tokens["surface-inset-base"] = neutralAlpha[1]
  123. tokens["surface-inset-base-hover"] = neutralAlpha[2]
  124. tokens["surface-inset-strong"] = isDark
  125. ? (withAlpha(neutral[0], 0.5) as ColorValue)
  126. : (withAlpha(neutral[3], 0.09) as ColorValue)
  127. tokens["surface-inset-strong-hover"] = tokens["surface-inset-strong"]
  128. tokens["surface-raised-base"] = neutralAlpha[0]
  129. tokens["surface-float-base"] = isDark ? neutral[1] : neutral[11]
  130. tokens["surface-float-base-hover"] = isDark ? neutral[2] : neutral[10]
  131. tokens["surface-raised-base-hover"] = neutralAlpha[1]
  132. tokens["surface-raised-base-active"] = neutralAlpha[2]
  133. tokens["surface-raised-strong"] = isDark ? neutralAlpha[3] : neutral[0]
  134. tokens["surface-raised-strong-hover"] = isDark ? neutralAlpha[5] : "#ffffff"
  135. tokens["surface-raised-stronger"] = isDark ? neutralAlpha[5] : "#ffffff"
  136. tokens["surface-raised-stronger-hover"] = isDark ? neutralAlpha[6] : "#ffffff"
  137. tokens["surface-weak"] = neutralAlpha[2]
  138. tokens["surface-weaker"] = neutralAlpha[3]
  139. tokens["surface-strong"] = isDark ? neutralAlpha[6] : "#ffffff"
  140. tokens["surface-raised-stronger-non-alpha"] = isDark ? neutral[2] : "#ffffff"
  141. tokens["surface-brand-base"] = brandb
  142. tokens["surface-brand-hover"] = brandh
  143. tokens["surface-interactive-base"] = interb
  144. tokens["surface-interactive-hover"] = interh
  145. tokens["surface-interactive-weak"] = interw
  146. tokens["surface-interactive-weak-hover"] = interb
  147. tokens["surface-success-base"] = succb
  148. tokens["surface-success-weak"] = succw
  149. tokens["surface-success-strong"] = succs
  150. tokens["surface-warning-base"] = warnb
  151. tokens["surface-warning-weak"] = warnw
  152. tokens["surface-warning-strong"] = warns
  153. tokens["surface-critical-base"] = critb
  154. tokens["surface-critical-weak"] = critw
  155. tokens["surface-critical-strong"] = crits
  156. tokens["surface-info-base"] = infob
  157. tokens["surface-info-weak"] = infow
  158. tokens["surface-info-strong"] = infos
  159. tokens["surface-diff-unchanged-base"] = isDark ? neutral[0] : "#ffffff00"
  160. tokens["surface-diff-skip-base"] = isDark ? neutralAlpha[0] : neutral[1]
  161. tokens["surface-diff-hidden-base"] = diffHiddenSurface.base
  162. tokens["surface-diff-hidden-weak"] = diffHiddenSurface.weak
  163. tokens["surface-diff-hidden-weaker"] = diffHiddenSurface.weaker
  164. tokens["surface-diff-hidden-strong"] = diffHiddenSurface.strong
  165. tokens["surface-diff-hidden-stronger"] = diffHiddenSurface.stronger
  166. tokens["surface-diff-add-base"] = diffAdd[2]
  167. tokens["surface-diff-add-weak"] = diffAdd[isDark ? 3 : 1]
  168. tokens["surface-diff-add-weaker"] = diffAdd[isDark ? 2 : 0]
  169. tokens["surface-diff-add-strong"] = diffAdd[4]
  170. tokens["surface-diff-add-stronger"] = diffAdd[isDark ? 10 : 8]
  171. tokens["surface-diff-delete-base"] = diffDelete[2]
  172. tokens["surface-diff-delete-weak"] = diffDelete[isDark ? 3 : 1]
  173. tokens["surface-diff-delete-weaker"] = diffDelete[isDark ? 2 : 0]
  174. tokens["surface-diff-delete-strong"] = diffDelete[isDark ? 4 : 5]
  175. tokens["surface-diff-delete-stronger"] = diffDelete[isDark ? 10 : 8]
  176. tokens["input-base"] = isDark ? neutral[1] : neutral[0]
  177. tokens["input-hover"] = isDark ? neutral[2] : neutral[1]
  178. tokens["input-active"] = isDark ? interactive[6] : interactive[0]
  179. tokens["input-selected"] = isDark ? interactive[7] : interactive[3]
  180. tokens["input-focus"] = isDark ? interactive[6] : interactive[0]
  181. tokens["input-disabled"] = neutral[3]
  182. tokens["text-base"] = colors.compact ? (body as HexColor) : neutral[10]
  183. tokens["text-weak"] = colors.compact ? shift(body as HexColor, { l: isDark ? -0.11 : 0.11, c: 0.9 }) : neutral[8]
  184. tokens["text-weaker"] = colors.compact
  185. ? shift(body as HexColor, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 })
  186. : neutral[7]
  187. tokens["text-strong"] = colors.compact
  188. ? isDark
  189. ? blend("#ffffff", body as HexColor, 0.9)
  190. : shift(body as HexColor, { l: -0.07, c: 1.04 })
  191. : neutral[11]
  192. tokens["text-invert-base"] = isDark ? neutral[10] : neutral[1]
  193. tokens["text-invert-weak"] = isDark ? neutral[8] : neutral[2]
  194. tokens["text-invert-weaker"] = isDark ? neutral[7] : neutral[3]
  195. tokens["text-invert-strong"] = isDark ? neutral[11] : neutral[0]
  196. tokens["text-interactive-base"] = interactive[isDark ? 10 : 9]
  197. tokens["text-on-brand-base"] = on(brandb)
  198. tokens["text-on-interactive-base"] = on(interb)
  199. tokens["text-on-interactive-weak"] = on(interb)
  200. tokens["text-on-success-base"] = on(succb)
  201. tokens["text-on-critical-base"] = on(critb)
  202. tokens["text-on-critical-weak"] = on(critb)
  203. tokens["text-on-critical-strong"] = on(crits)
  204. tokens["text-on-warning-base"] = on(warnb)
  205. tokens["text-on-info-base"] = on(infob)
  206. tokens["text-diff-add-base"] = diffAdd[10]
  207. tokens["text-diff-delete-base"] = diffDelete[9]
  208. tokens["text-diff-delete-strong"] = diffDelete[11]
  209. tokens["text-diff-add-strong"] = diffAdd[isDark ? 7 : 11]
  210. tokens["text-on-info-weak"] = on(infob)
  211. tokens["text-on-info-strong"] = on(infos)
  212. tokens["text-on-warning-weak"] = on(warnb)
  213. tokens["text-on-warning-strong"] = on(warns)
  214. tokens["text-on-success-weak"] = on(succb)
  215. tokens["text-on-success-strong"] = on(succs)
  216. tokens["text-on-brand-weak"] = on(brandb)
  217. tokens["text-on-brand-weaker"] = on(brandb)
  218. tokens["text-on-brand-strong"] = on(brandh)
  219. tokens["button-primary-base"] = neutral[11]
  220. tokens["button-secondary-base"] = isDark ? neutral[2] : neutral[0]
  221. tokens["button-secondary-hover"] = isDark ? neutral[3] : neutral[1]
  222. tokens["button-ghost-hover"] = neutralAlpha[1]
  223. tokens["button-ghost-hover2"] = neutralAlpha[2]
  224. tokens["border-base"] = colors.compact ? borderTone(0.22, 0.16) : neutralAlpha[6]
  225. tokens["border-hover"] = colors.compact ? borderTone(0.28, 0.2) : neutralAlpha[7]
  226. tokens["border-active"] = colors.compact ? borderTone(0.34, 0.24) : neutralAlpha[8]
  227. tokens["border-selected"] = withAlpha(interactive[8], isDark ? 0.9 : 0.99) as ColorValue
  228. tokens["border-disabled"] = colors.compact ? borderTone(0.18, 0.12) : neutralAlpha[7]
  229. tokens["border-focus"] = colors.compact ? borderTone(0.34, 0.24) : neutralAlpha[8]
  230. tokens["border-weak-base"] = colors.compact ? borderTone(0.1, 0.08) : neutralAlpha[isDark ? 5 : 4]
  231. tokens["border-strong-base"] = colors.compact ? borderTone(0.34, 0.24) : neutralAlpha[isDark ? 7 : 6]
  232. tokens["border-strong-hover"] = colors.compact ? borderTone(0.4, 0.28) : neutralAlpha[7]
  233. tokens["border-strong-active"] = colors.compact ? borderTone(0.46, 0.32) : neutralAlpha[isDark ? 7 : 6]
  234. tokens["border-strong-selected"] = withAlpha(interactive[5], 0.6) as ColorValue
  235. tokens["border-strong-disabled"] = colors.compact ? borderTone(0.14, 0.1) : neutralAlpha[5]
  236. tokens["border-strong-focus"] = colors.compact ? borderTone(0.46, 0.32) : neutralAlpha[isDark ? 7 : 6]
  237. tokens["border-weak-hover"] = colors.compact ? borderTone(0.16, 0.12) : neutralAlpha[isDark ? 6 : 5]
  238. tokens["border-weak-active"] = colors.compact ? borderTone(0.22, 0.16) : neutralAlpha[isDark ? 7 : 6]
  239. tokens["border-weak-selected"] = withAlpha(interactive[4], isDark ? 0.6 : 0.5) as ColorValue
  240. tokens["border-weak-disabled"] = colors.compact ? borderTone(0.08, 0.06) : neutralAlpha[5]
  241. tokens["border-weak-focus"] = colors.compact ? borderTone(0.22, 0.16) : neutralAlpha[isDark ? 7 : 6]
  242. tokens["border-weaker-base"] = colors.compact ? borderTone(0.06, 0.04) : neutralAlpha[2]
  243. tokens["border-interactive-base"] = interactive[6]
  244. tokens["border-interactive-hover"] = interactive[7]
  245. tokens["border-interactive-active"] = interactive[8]
  246. tokens["border-interactive-selected"] = interactive[8]
  247. tokens["border-interactive-disabled"] = neutral[7]
  248. tokens["border-interactive-focus"] = interactive[8]
  249. tokens["border-success-base"] = success[isDark ? 6 : 6]
  250. tokens["border-success-hover"] = success[isDark ? 7 : 7]
  251. tokens["border-success-selected"] = success[8]
  252. tokens["border-warning-base"] = warning[isDark ? 6 : 6]
  253. tokens["border-warning-hover"] = warning[isDark ? 7 : 7]
  254. tokens["border-warning-selected"] = warning[8]
  255. tokens["border-critical-base"] = error[isDark ? 6 : 6]
  256. tokens["border-critical-hover"] = error[isDark ? 7 : 7]
  257. tokens["border-critical-selected"] = error[8]
  258. tokens["border-info-base"] = info[isDark ? 6 : 6]
  259. tokens["border-info-hover"] = info[isDark ? 7 : 7]
  260. tokens["border-info-selected"] = info[8]
  261. tokens["border-color"] = "#ffffff"
  262. tokens["icon-base"] = colors.compact && !isDark ? tokens["text-weak"] : neutral[isDark ? 9 : 8]
  263. tokens["icon-hover"] = colors.compact && !isDark ? tokens["text-base"] : neutral[10]
  264. tokens["icon-active"] = colors.compact && !isDark ? tokens["text-strong"] : neutral[11]
  265. tokens["icon-selected"] = colors.compact && !isDark ? tokens["text-strong"] : neutral[11]
  266. tokens["icon-disabled"] = neutral[isDark ? 6 : 7]
  267. tokens["icon-focus"] = colors.compact && !isDark ? tokens["text-strong"] : neutral[11]
  268. tokens["icon-invert-base"] = isDark ? neutral[0] : "#ffffff"
  269. tokens["icon-weak-base"] = neutral[isDark ? 5 : 6]
  270. tokens["icon-weak-hover"] = neutral[isDark ? 11 : 7]
  271. tokens["icon-weak-active"] = neutral[8]
  272. tokens["icon-weak-selected"] = neutral[isDark ? 8 : 9]
  273. tokens["icon-weak-disabled"] = neutral[isDark ? 3 : 5]
  274. tokens["icon-weak-focus"] = neutral[8]
  275. tokens["icon-strong-base"] = neutral[11]
  276. tokens["icon-strong-hover"] = isDark ? "#f6f3f3" : "#151313"
  277. tokens["icon-strong-active"] = isDark ? "#fcfcfc" : "#020202"
  278. tokens["icon-strong-selected"] = isDark ? "#fdfcfc" : "#020202"
  279. tokens["icon-strong-disabled"] = neutral[7]
  280. tokens["icon-strong-focus"] = isDark ? "#fdfcfc" : "#020202"
  281. tokens["icon-brand-base"] = isDark ? "#ffffff" : neutral[11]
  282. tokens["icon-interactive-base"] = interactive[8]
  283. tokens["icon-success-base"] = success[isDark ? 8 : 6]
  284. tokens["icon-success-hover"] = success[9]
  285. tokens["icon-success-active"] = success[10]
  286. tokens["icon-warning-base"] = amber[isDark ? 8 : 6]
  287. tokens["icon-warning-hover"] = amber[9]
  288. tokens["icon-warning-active"] = amber[10]
  289. tokens["icon-critical-base"] = error[isDark ? 8 : 9]
  290. tokens["icon-critical-hover"] = error[9]
  291. tokens["icon-critical-active"] = error[10]
  292. tokens["icon-info-base"] = info[isDark ? 8 : 6]
  293. tokens["icon-info-hover"] = info[isDark ? 9 : 7]
  294. tokens["icon-info-active"] = info[10]
  295. tokens["icon-on-brand-base"] = on(brandb)
  296. tokens["icon-on-brand-hover"] = on(brandh)
  297. tokens["icon-on-brand-selected"] = on(brandh)
  298. tokens["icon-on-interactive-base"] = on(interb)
  299. tokens["icon-agent-plan-base"] = info[8]
  300. tokens["icon-agent-docs-base"] = amber[8]
  301. tokens["icon-agent-ask-base"] = blue[8]
  302. tokens["icon-agent-build-base"] = interactive[isDark ? 10 : 8]
  303. tokens["icon-on-success-base"] = on(succb)
  304. tokens["icon-on-success-hover"] = on(succs)
  305. tokens["icon-on-success-selected"] = on(succs)
  306. tokens["icon-on-warning-base"] = on(warnb)
  307. tokens["icon-on-warning-hover"] = on(warns)
  308. tokens["icon-on-warning-selected"] = on(warns)
  309. tokens["icon-on-critical-base"] = on(critb)
  310. tokens["icon-on-critical-hover"] = on(crits)
  311. tokens["icon-on-critical-selected"] = on(crits)
  312. tokens["icon-on-info-base"] = on(infob)
  313. tokens["icon-on-info-hover"] = on(infos)
  314. tokens["icon-on-info-selected"] = on(infos)
  315. tokens["icon-diff-add-base"] = diffAdd[10]
  316. tokens["icon-diff-add-hover"] = diffAdd[isDark ? 9 : 11]
  317. tokens["icon-diff-add-active"] = diffAdd[isDark ? 10 : 11]
  318. tokens["icon-diff-delete-base"] = diffDelete[9]
  319. tokens["icon-diff-delete-hover"] = diffDelete[isDark ? 10 : 10]
  320. tokens["icon-diff-modified-base"] = modified()
  321. if (colors.compact) {
  322. tokens["syntax-comment"] = "var(--text-weak)"
  323. tokens["syntax-regexp"] = "var(--text-base)"
  324. tokens["syntax-string"] = content(colors.success, success)
  325. tokens["syntax-keyword"] = content(colors.accent, accent)
  326. tokens["syntax-primitive"] = content(colors.primary, primary)
  327. tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
  328. tokens["syntax-variable"] = "var(--text-strong)"
  329. tokens["syntax-property"] = content(colors.info, info)
  330. tokens["syntax-type"] = content(colors.warning, warning)
  331. tokens["syntax-constant"] = content(colors.accent, accent)
  332. tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
  333. tokens["syntax-object"] = "var(--text-strong)"
  334. tokens["syntax-success"] = success[10]
  335. tokens["syntax-warning"] = amber[10]
  336. tokens["syntax-critical"] = error[10]
  337. tokens["syntax-info"] = content(colors.info, info)
  338. tokens["syntax-diff-add"] = diffAdd[10]
  339. tokens["syntax-diff-delete"] = diffDelete[10]
  340. tokens["syntax-diff-unknown"] = "#ff0000"
  341. tokens["markdown-heading"] = content(colors.primary, primary)
  342. tokens["markdown-text"] = tokens["text-base"]
  343. tokens["markdown-link"] = content(colors.interactive, interactive)
  344. tokens["markdown-link-text"] = content(colors.info, info)
  345. tokens["markdown-code"] = content(colors.success, success)
  346. tokens["markdown-block-quote"] = content(colors.warning, warning)
  347. tokens["markdown-emph"] = content(colors.warning, warning)
  348. tokens["markdown-strong"] = content(colors.accent, accent)
  349. tokens["markdown-horizontal-rule"] = tokens["border-base"]
  350. tokens["markdown-list-item"] = content(colors.interactive, interactive)
  351. tokens["markdown-list-enumeration"] = content(colors.info, info)
  352. tokens["markdown-image"] = content(colors.interactive, interactive)
  353. tokens["markdown-image-text"] = content(colors.info, info)
  354. tokens["markdown-code-block"] = tokens["text-base"]
  355. }
  356. if (!colors.compact) {
  357. tokens["syntax-comment"] = "var(--text-weak)"
  358. tokens["syntax-regexp"] = "var(--text-base)"
  359. tokens["syntax-string"] = isDark ? "#00ceb9" : "#006656"
  360. tokens["syntax-keyword"] = "var(--text-weak)"
  361. tokens["syntax-primitive"] = isDark ? "#ffba92" : "#fb4804"
  362. tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
  363. tokens["syntax-variable"] = "var(--text-strong)"
  364. tokens["syntax-property"] = isDark ? "#ff9ae2" : "#ed6dc8"
  365. tokens["syntax-type"] = isDark ? "#ecf58c" : "#596600"
  366. tokens["syntax-constant"] = isDark ? "#93e9f6" : "#007b80"
  367. tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
  368. tokens["syntax-object"] = "var(--text-strong)"
  369. tokens["syntax-success"] = success[10]
  370. tokens["syntax-warning"] = amber[10]
  371. tokens["syntax-critical"] = error[10]
  372. tokens["syntax-info"] = isDark ? "#93e9f6" : "#0092a8"
  373. tokens["syntax-diff-add"] = diffAdd[10]
  374. tokens["syntax-diff-delete"] = diffDelete[10]
  375. tokens["syntax-diff-unknown"] = "#ff0000"
  376. tokens["markdown-heading"] = isDark ? "#9d7cd8" : "#d68c27"
  377. tokens["markdown-text"] = isDark ? "#eeeeee" : "#1a1a1a"
  378. tokens["markdown-link"] = isDark ? "#fab283" : "#3b7dd8"
  379. tokens["markdown-link-text"] = isDark ? "#56b6c2" : "#318795"
  380. tokens["markdown-code"] = isDark ? "#7fd88f" : "#3d9a57"
  381. tokens["markdown-block-quote"] = isDark ? "#e5c07b" : "#b0851f"
  382. tokens["markdown-emph"] = isDark ? "#e5c07b" : "#b0851f"
  383. tokens["markdown-strong"] = isDark ? "#f5a742" : "#d68c27"
  384. tokens["markdown-horizontal-rule"] = isDark ? "#808080" : "#8a8a8a"
  385. tokens["markdown-list-item"] = isDark ? "#fab283" : "#3b7dd8"
  386. tokens["markdown-list-enumeration"] = isDark ? "#56b6c2" : "#318795"
  387. tokens["markdown-image"] = isDark ? "#fab283" : "#3b7dd8"
  388. tokens["markdown-image-text"] = isDark ? "#56b6c2" : "#318795"
  389. tokens["markdown-code-block"] = isDark ? "#eeeeee" : "#1a1a1a"
  390. }
  391. tokens["avatar-background-pink"] = isDark ? "#501b3f" : "#feeef8"
  392. tokens["avatar-background-mint"] = isDark ? "#033a34" : "#e1fbf4"
  393. tokens["avatar-background-orange"] = isDark ? "#5f2a06" : "#fff1e7"
  394. tokens["avatar-background-purple"] = isDark ? "#432155" : "#f9f1fe"
  395. tokens["avatar-background-cyan"] = isDark ? "#0f3058" : "#e7f9fb"
  396. tokens["avatar-background-lime"] = isDark ? "#2b3711" : "#eefadc"
  397. tokens["avatar-text-pink"] = isDark ? "#e34ba9" : "#cd1d8d"
  398. tokens["avatar-text-mint"] = isDark ? "#95f3d9" : "#147d6f"
  399. tokens["avatar-text-orange"] = isDark ? "#ff802b" : "#ed5f00"
  400. tokens["avatar-text-purple"] = isDark ? "#9d5bd2" : "#8445bc"
  401. tokens["avatar-text-cyan"] = isDark ? "#369eff" : "#0894b3"
  402. tokens["avatar-text-lime"] = isDark ? "#c4f042" : "#5d770d"
  403. for (const [key, value] of Object.entries(overrides)) {
  404. tokens[key] = value
  405. }
  406. if (colors.compact && "text-weak" in overrides && !("text-weaker" in overrides)) {
  407. const weak = tokens["text-weak"]
  408. if (weak.startsWith("#")) {
  409. tokens["text-weaker"] = shift(weak as HexColor, { l: isDark ? -0.12 : 0.12, c: 0.75 })
  410. } else {
  411. tokens["text-weaker"] = weak
  412. }
  413. }
  414. if (colors.compact) {
  415. if (!("markdown-text" in overrides)) {
  416. tokens["markdown-text"] = tokens["text-base"]
  417. }
  418. if (!("markdown-code-block" in overrides)) {
  419. tokens["markdown-code-block"] = tokens["text-base"]
  420. }
  421. }
  422. if (!("text-stronger" in overrides)) {
  423. tokens["text-stronger"] = tokens["text-strong"]
  424. }
  425. return tokens
  426. }
  427. interface ThemeColors {
  428. compact: boolean
  429. neutral: HexColor
  430. ink?: HexColor
  431. primary: HexColor
  432. accent: HexColor
  433. success: HexColor
  434. warning: HexColor
  435. error: HexColor
  436. info: HexColor
  437. interactive: HexColor
  438. diffAdd?: HexColor
  439. diffDelete?: HexColor
  440. }
  441. function getColors(variant: ThemeVariant): ThemeColors {
  442. const input = variant as { palette?: unknown; seeds?: unknown }
  443. if (input.palette && input.seeds) {
  444. throw new Error("Theme variant cannot define both `palette` and `seeds`")
  445. }
  446. if (variant.palette) {
  447. return {
  448. compact: true,
  449. neutral: variant.palette.neutral,
  450. ink: variant.palette.ink,
  451. primary: variant.palette.primary,
  452. accent: variant.palette.accent ?? variant.palette.info,
  453. success: variant.palette.success,
  454. warning: variant.palette.warning,
  455. error: variant.palette.error,
  456. info: variant.palette.info,
  457. interactive: variant.palette.interactive ?? variant.palette.primary,
  458. diffAdd: variant.palette.diffAdd,
  459. diffDelete: variant.palette.diffDelete,
  460. }
  461. }
  462. if (variant.seeds) {
  463. return {
  464. compact: false,
  465. neutral: variant.seeds.neutral,
  466. ink: undefined,
  467. primary: variant.seeds.primary,
  468. accent: variant.seeds.info,
  469. success: variant.seeds.success,
  470. warning: variant.seeds.warning,
  471. error: variant.seeds.error,
  472. info: variant.seeds.info,
  473. interactive: variant.seeds.interactive,
  474. diffAdd: variant.seeds.diffAdd,
  475. diffDelete: variant.seeds.diffDelete,
  476. }
  477. }
  478. throw new Error("Theme variant requires `palette` or `seeds`")
  479. }
  480. function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): HexColor[] {
  481. const alphas = isDark
  482. ? [0.038, 0.066, 0.1, 0.142, 0.19, 0.252, 0.334, 0.446, 0.58, 0.718, 0.854, 0.985]
  483. : [0.03, 0.06, 0.1, 0.145, 0.2, 0.265, 0.35, 0.47, 0.61, 0.74, 0.86, 0.97]
  484. return alphas.map((alpha) => blend(neutralScale[11], neutralScale[0], alpha))
  485. }
  486. function getHex(value: ColorValue | undefined): HexColor | undefined {
  487. if (!value?.startsWith("#")) return
  488. return value as HexColor
  489. }
  490. export function resolveTheme(theme: DesktopTheme): { light: ResolvedTheme; dark: ResolvedTheme } {
  491. return {
  492. light: resolveThemeVariant(theme.light, false),
  493. dark: resolveThemeVariant(theme.dark, true),
  494. }
  495. }
  496. export function themeToCss(tokens: ResolvedTheme): string {
  497. return Object.entries(tokens)
  498. .map(([key, value]) => `--${key}: ${value};`)
  499. .join("\n ")
  500. }