tracker

3.1 KB

1. // styles.hl — all of the app's CSS, served as /__hl/app.css. Components carry no Style
2. // blocks: markup is domain tags, this file lays them out.
3. //
4. // TOKENS: the WorldAPI palette + semantic tokens are declared in `shared/tokens.hl` as
5. // hl:web css variables, vendored verbatim from ident.worldapi.org (see that project's
6. // README "Design tokens"). This file imports the tokens it uses and writes them as members;
7. // the app sets only its accent (greenDark, per CONCEPT.md / antcolony README "look and style").
8. //
9. // In a styles file a bare name is a TAG (camelCase -> kebab: `emptyState` is `empty-state`),
10. // a quoted name is a selector written verbatim. MOBILE FIRST: every rule is the phone's; the
11. // one min-width block adds the wide layout.
12. import { var } from 'hl:web/css'
13. import { greenDark, colorText, colorBackground, colorTextStrong, colorBackgroundSunken, colorTextMuted, colorAccentText, colorBorder, colorDanger, colorSurface } from './shared/tokens.hl'
15. colorAccent = var(greenDark) // the app's accent: the only token this app sets
17. '*,
18. *::before,
19. *::after' { boxSizing = 'border-box' }
21. html { colorScheme = 'dark' }
22. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
23. a { color = colorAccent textDecoration = 'none' }
24. 'a:hover' { textDecoration = 'underline' }
25. h1 { margin = '0 0 1rem' fontSize = '1.3rem' lineHeight = '1.3' color = colorTextStrong }
26. button { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' }
27. 'button:hover' { filter = 'brightness(1.1)' }
28. 'button.quiet' { color = colorText background = 'transparent' border = '1px solid ' + colorBorder }
29. 'button.quiet:hover' { background = colorSurface filter = 'none' }
31. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem 1rem' padding = '.6rem 1rem' background = colorBackgroundSunken borderBottom = '1px solid ' + colorBorder }
32. 'application-header .brand' { fontWeight = '800' fontSize = '1.15rem' color = colorAccent }
33. main { display = 'block' maxWidth = '60rem' margin = '0 auto' padding = '1rem' }
35. // ---- login (top right of the header), copied from calendar.worldapi.org's styles.hl -------------
36. userBox { display = 'flex' alignItems = 'center' gap = '.5rem' marginLeft = 'auto' }
37. 'a.button' { display = 'inline-block' padding = '.35rem .8rem' fontWeight = '600' color = colorAccentText background = colorAccent borderRadius = '.4rem' }
38. 'a.button:hover' { textDecoration = 'none' filter = 'brightness(1.1)' }
39. identSelector { '--ident-accent' = colorAccent '--ident-accent-text' = colorAccentText '--ident-background' = colorSurface '--ident-border' = colorBorder '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
40. 'ident-selector::part(button)' { padding = '.35rem .8rem' }
41. 'ident-selector::part(status)' { padding = '.35rem .8rem' }
42. '.message' { color = colorDanger }
43. '.message.banner' { margin = '0' padding = '.5rem 1rem' background = colorBackgroundSunken }
44. 'p.message:empty' { display = 'none' }