notes

2.5 KB

1. // tokens.hl — THE WorldAPI design tokens (ticket antcolony#3, mission 021). Hand-written; this is
2. // the one source. Every Hybriel app carries a verbatim copy as `shared/tokens.hl` (vendored like
3. // plugins/; source: loreana /media/STORAGE/projects/worldapi-tokens/tokens.hl — edit THERE, then
4. // `cp` it into each app, see that folder's README.md).
5. //
6. // A token is a css variable declared as a VALUE (hl:web/css `var()`): the stylesheet walker names
7. // it after its member (`blueDark` → `--blue-dark`), writes it into the sheet's one `:root`, and turns
8. // every use into `var(--blue-dark)`. `static` makes it importable. An app's styles.hl imports the
9. // tokens it uses and writes them as members:
10. //
11. // import { var } from 'hl:web/css'
12. // import { purple, colorText, colorBackground } from './shared/tokens.hl'
13. // colorAccent = var(purple) // the app's accent — the ONLY token an app sets
14. // body { color = colorText background = colorBackground }
15. //
16. // (hl:web does this itself since hybriel#39; the local patch of mission 021 is gone)
17. import { var } from 'hl:web/css'
19. // ---- the palette (VS Code Dark+) ----------------------------------------------------------
20. static dark = var('rgb(25, 30, 35)')
21. static darker = var('rgb(15, 20, 25)')
22. static light = var('rgb(195, 200, 205)')
23. static lighter = var('rgb(245, 250, 255)')
24. static blueDark = var('#569bd4')
25. static greenDark = var('#4ec9b0')
26. static yellow = var('#dcdcaa')
27. static orange = var('#ce9178')
28. static red = var('#f44747')
29. static purple = var('#c586c0')
30. static blueLight = var('#9cdcfe')
31. static greenLight = var('#b5cea8')
33. // ---- semantic tokens: components and rules use only these -----------------------------------
34. static colorBackground = var(dark)
35. static colorBackgroundSunken = var(darker)
36. static colorSurface = var('rgb(35, 40, 45)')
37. static colorBorder = var('rgb(70, 75, 80)')
38. static colorText = var(light)
39. static colorTextStrong = var(lighter)
40. static colorTextMuted = var('rgb(145, 150, 155)')
41. static colorAction = var(blueDark)
42. static colorSuccess = var(greenDark)
43. static colorWarning = var(yellow)
44. static colorDanger = var(red)
45. static colorSpecial = var(purple)
47. // the accent: per app (tickets purple, ident orange, tracker greenDark, gitoria blueDark, notes
48. // yellow, calendar blueLight, antcolony greenLight). An app declares its own `colorAccent =
49. // var(<palette token>)` in styles.hl; hl:web writes it after this default, so the app's wins.
50. static colorAccent = var(colorAction)
51. // text ON the accent (buttons, badges, selected filters)
52. static colorAccentText = var(darker)