tracker

14.3 KB

1. // theme/theme.hl — THE WORLDAPI THEME: how WorldAPI makes the black/white components of components.hybriel.worldapi.org
2. // look for itself. A styles file (hl:web): an app inherits it from its own styles.hl and sets its accent and type colours:
3. //
4. // inherit './theme/theme.hl'
5. // import { var } from 'hl:web/css'
6. // import { purple, yellow } from './shared/tokens.hl'
7. // colorAccent = var(purple)
8. // colorType1 = var(yellow)
9. //
10. // What is in here, in this order:
11. // 1. layout tokens and the type-colour slots (the palette and the semantic roles are shared/tokens.hl)
12. // 2. plain HTML elements: text, links, buttons, fields, foldables, drop zones, tables, pills
13. // 3. the components of components.hybriel.worldapi.org, themed WITHOUT forking them: every rule repeats the component's
14. // own selector with `html ` in front, so it wins over the component's Style (which comes later in the one stylesheet)
15. // and never emits the same selector twice (hl:web refuses that)
16. // The shells (header, sidebar, content-first, list-first, three-pane) carry their own Style in theme/shell/*.hl.
17. //
18. // Design rules (docs/design-rules.md): borderless — a border only where it means something (foldables, drop zones,
19. // focus); no boxed cards, no grey frames; colours only through the named tokens; titles white; mobile first, wider
20. // layouts in `@media (min-width: 60rem)` (the one breakpoint of the theme, also used by theme/shell/*.hl).
21. import { var } from 'hl:web/css'
22. import { yellow, greenDark, purple, blueDark, orange, blueLight, colorBackground, colorBackgroundSunken, colorSurface, colorBorder, colorText, colorTextStrong, colorTextMuted, colorSuccess, colorWarning, colorDanger, colorAccent, colorAccentText } from '../shared/tokens.hl'
24. // ---- 1. tokens -------------------------------------------------------------------------------------------------
25. // the type colours: an app names what each slot means (tracker: 1 Movie, 2 Series, 3 Show, 4 Genre, 5 Person) and may
26. // point a slot at another palette colour in its styles.hl (`colorType1 = var(yellow)`)
27. colorType1 = var(yellow)
28. colorType2 = var(greenDark)
29. colorType3 = var(purple)
30. colorType4 = var(blueDark)
31. colorType5 = var(orange)
32. colorType6 = var(blueLight)
33. // the layout: the centred content column (header contents end flush with it), the side gutter, the header height, the
34. // sidebar and list-pane widths of the shells
35. layoutColumn = var('72rem')
36. layoutGutter = var('1rem')
37. layoutHeader = var('3.25rem')
38. layoutSidebar = var('16rem')
39. layoutList = var('24rem')
40. // the corner radii — exactly two (docs/design-rules.md "Corner radius"): radiusSmall for every small item (buttons, pills,
41. // fields, tags, menu items, chips, day cells), radiusLarge for everything else that is rounded (panels, modals, popovers,
42. // dropdowns, foldables, tiles/posters); '50%' only for round things (avatars, the check circle). check-theme flags any other
43. radiusSmall = var('5px')
44. radiusLarge = var('10px')
46. // ---- 2. plain elements -----------------------------------------------------------------------------------------
47. '*,
48. *::before,
49. *::after' { boxSizing = 'border-box' }
51. html { colorScheme = 'dark' scrollbarColor = colorBorder + ' transparent' }
52. body { margin = '0' minHeight = '100dvh' font = '16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif' color = colorText background = colorBackground overflowWrap = 'anywhere' }
53. '::selection' { color = colorAccentText background = colorAccent }
54. '[hidden]' { display = 'none !important' }
56. h1 { margin = '0 0 1rem' fontSize = '1.6rem' lineHeight = '1.25' color = colorTextStrong }
57. h2 { margin = '1.5rem 0 .6rem' fontSize = '1.25rem' lineHeight = '1.3' color = colorTextStrong }
58. h3 { margin = '1.25rem 0 .5rem' fontSize = '1.05rem' lineHeight = '1.3' color = colorTextStrong }
59. h4 { margin = '1rem 0 .4rem' fontSize = '1rem' color = colorTextStrong }
60. p { margin = '0 0 1rem' }
61. strong { color = colorTextStrong }
62. small { fontSize = '.85rem' }
63. '.muted' { color = colorTextMuted }
64. 'p.empty' { color = colorTextMuted fontStyle = 'italic' }
65. '.visually-hidden' { position = 'absolute' width = '1px' height = '1px' margin = '-1px' padding = '0' overflow = 'hidden' clip = 'rect(0 0 0 0)' whiteSpace = 'nowrap' border = '0' }
66. ul { margin = '0 0 1rem' paddingLeft = '1.25rem' }
67. ol { margin = '0 0 1rem' paddingLeft = '1.5rem' }
68. li { margin = '.15rem 0' }
69. hr { height = '1px' margin = '1.5rem 0' border = '0' background = colorSurface }
70. img { maxWidth = '100%' height = 'auto' }
72. a { color = colorAccent textDecoration = 'none' textUnderlineOffset = '.2em' }
73. 'a:hover' { textDecoration = 'underline' }
74. ':focus-visible' { outline = '2px solid ' + colorAccent outlineOffset = '2px' }
76. 'code,
77. kbd,
78. samp' { padding = '.05rem .3rem' font = '.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' background = colorSurface borderRadius = radiusSmall }
79. pre { margin = '0 0 1rem' padding = '.75rem 1rem' overflow = 'auto' font = '.9rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' background = colorBackgroundSunken borderRadius = radiusLarge }
80. 'pre code' { padding = '0' background = 'transparent' }
82. // buttons: quiet by default (text on nothing, a surface on hover); `.primary` (and a form's submit) is the accent;
83. // `.danger` says it destroys something — never decoration
84. 'button,
85. .button' { display = 'inline-flex' alignItems = 'center' justifyContent = 'center' gap = '.4rem' minHeight = '2.25rem' padding = '.4rem .9rem' font = 'inherit' fontWeight = '600' lineHeight = '1.2' color = colorText textDecoration = 'none' background = 'transparent' border = '0' borderRadius = radiusSmall cursor = 'pointer' }
86. 'button:hover,
87. .button:hover' { textDecoration = 'none' background = colorSurface }
88. 'button.primary,
89. .button.primary,
90. button[type="submit"]' { color = colorAccentText background = colorAccent }
91. 'button.primary:hover,
92. .button.primary:hover,
93. button[type="submit"]:hover' { background = colorAccent filter = 'brightness(1.1)' }
94. 'button.danger,
95. .button.danger' { color = colorDanger }
96. 'button:disabled' { opacity = '.45' cursor = 'default' filter = 'none' }
97. 'button svg,
98. .button svg' { flex = 'none' width = '1.25rem' height = '1.25rem' }
100. // fields: a sunken surface, no frame; the focus ring is the accent; an invalid field gets the danger ring
101. label { display = 'block' marginBottom = '.25rem' fontWeight = '600' color = colorTextStrong }
102. 'input,
103. select,
104. textarea' { maxWidth = '100%' padding = '.5rem .7rem' font = 'inherit' color = colorText background = colorBackgroundSunken border = '0' borderRadius = radiusSmall }
105. 'input:focus,
106. select:focus,
107. textarea:focus' { outline = '2px solid ' + colorAccent outlineOffset = '0' }
108. 'input[aria-invalid="true"],
109. textarea[aria-invalid="true"]' { outline = '2px solid ' + colorDanger outlineOffset = '0' }
110. 'input[type="checkbox"],
111. input[type="radio"]' { width = '1.1rem' height = '1.1rem' padding = '0' accentColor = colorAccent }
112. 'input::placeholder,
113. textarea::placeholder' { color = colorTextMuted }
114. textarea { width = '100%' minHeight = '6rem' resize = 'vertical' }
115. fieldset { margin = '0 0 1rem' padding = '0' border = '0' }
116. legend { padding = '0' marginBottom = '.5rem' fontWeight = '600' color = colorTextStrong }
117. 'form p' { margin = '0 0 1rem' }
118. progress { accentColor = colorAccent }
120. // FOLDABLES: the border belongs to the foldable (the creator likes it on the tracker's season collapsibles)
121. details { margin = '0 0 .75rem' border = '1px solid ' + colorBorder borderRadius = radiusLarge }
122. summary { padding = '.6rem .9rem' fontWeight = '600' color = colorTextStrong cursor = 'pointer' }
123. 'summary:hover' { background = colorSurface }
124. 'details[open] > summary' { borderBottom = '1px solid ' + colorBorder }
125. 'details > :not(summary)' { marginLeft = '.9rem' marginRight = '.9rem' }
126. 'details > summary + *' { marginTop = '.75rem' }
127. 'details > :last-child:not(summary)' { marginBottom = '.75rem' }
129. // DROP ZONES: a dashed border says "drop here"; `.over` while something is dragged over it
130. 'drop-zone,
131. .drop-zone' { display = 'block' padding = '1.25rem' textAlign = 'center' color = colorTextMuted border = '2px dashed ' + colorBorder borderRadius = radiusLarge }
132. 'drop-zone.over,
133. .drop-zone.over' { color = colorText borderColor = colorAccent background = colorSurface }
135. // tables: no grid; the header row is muted, a row lights up under the pointer
136. table { width = '100%' margin = '0 0 1rem' borderCollapse = 'collapse' }
137. th { padding = '.4rem .6rem' fontSize = '.85rem' fontWeight = '600' textAlign = 'left' color = colorTextMuted }
138. td { padding = '.5rem .6rem' verticalAlign = 'top' }
139. 'tbody tr:nth-child(odd)' { background = colorBackgroundSunken }
140. 'tbody tr:hover' { background = colorSurface }
142. // type colours and pills: `class="type-2"` colours a text with its slot; `.pill` turns it into an inverted label (text on
143. // the colour); a pill without a type is the accent. Status words use the semantic roles: `.success`, `.warning`, `.danger`
144. '.type-1' { color = colorType1 }
145. '.type-2' { color = colorType2 }
146. '.type-3' { color = colorType3 }
147. '.type-4' { color = colorType4 }
148. '.type-5' { color = colorType5 }
149. '.type-6' { color = colorType6 }
150. '.success' { color = colorSuccess }
151. '.warning' { color = colorWarning }
152. '.danger' { color = colorDanger }
153. '.pill' { display = 'inline-block' padding = '.1rem .55rem' fontSize = '.8rem' fontWeight = '700' lineHeight = '1.5' color = colorAccentText background = colorAccent borderRadius = radiusSmall whiteSpace = 'nowrap' }
154. '.pill.type-1' { color = colorAccentText background = colorType1 }
155. '.pill.type-2' { color = colorAccentText background = colorType2 }
156. '.pill.type-3' { color = colorAccentText background = colorType3 }
157. '.pill.type-4' { color = colorAccentText background = colorType4 }
158. '.pill.type-5' { color = colorAccentText background = colorType5 }
159. '.pill.type-6' { color = colorAccentText background = colorType6 }
160. '.pill.success' { color = colorAccentText background = colorSuccess }
161. '.pill.warning' { color = colorAccentText background = colorWarning }
162. '.pill.danger' { color = colorAccentText background = colorDanger }
163. '.pill.quiet' { color = colorText background = colorSurface }
165. // ---- 3. the components of components.hybriel.worldapi.org --------------------------------------------------------
166. // Their own Style draws frames around buttons, fields, editors and day cells. The theme takes the decorative ones away
167. // (the drop zone's dashed border and the focus rings stay — they mean something) and lets surfaces separate instead.
168. // Their corners become the theme's two radii: small items radiusSmall, popups / windows / editors / day tiles radiusLarge.
169. // pagination
170. 'html pagination button' { border = '0' borderRadius = radiusSmall }
171. 'html pagination li.current button' { border = '0' }
172. // modal: the dimmed page around the window is the separation
173. 'html modal-dialog > dialog' { background = colorSurface border = '0' borderRadius = radiusLarge boxShadow = '0 1rem 3rem ' + colorBackgroundSunken }
174. 'html modal-dialog header' { borderBottom = '0' }
175. 'html modal-dialog modal-body footer' { background = colorSurface borderTop = '0' }
176. 'html modal-dialog button' { borderRadius = radiusSmall }
177. 'html modal-dialog button:hover' { background = colorBackground }
178. // month view: the day cells are tiles with a gap, no grid lines
179. 'html month-view ol' { gap = '.25rem' }
180. 'html month-view button' { border = '0' borderRadius = radiusSmall }
181. 'html #month-days li' { border = '0' borderRadius = radiusLarge }
182. // date picker + date range picker: borderless field, the popup is a raised surface
183. 'html date-picker input' { border = '0' borderRadius = radiusSmall }
184. 'html range-picker input' { border = '0' borderRadius = radiusSmall }
185. 'html date-picker input[aria-invalid="true"]' { outline = '2px solid ' + colorDanger outlineOffset = '-2px' }
186. 'html range-picker input[aria-invalid="true"]' { outline = '2px solid ' + colorDanger outlineOffset = '-2px' }
187. 'html date-picker month-view' { background = colorSurface border = '0' borderRadius = radiusLarge boxShadow = '0 .75rem 2rem ' + colorBackgroundSunken }
188. 'html range-picker month-view' { background = colorSurface border = '0' borderRadius = radiusLarge boxShadow = '0 .75rem 2rem ' + colorBackgroundSunken }
189. 'html date-picker button' { border = '0' borderRadius = radiusSmall }
190. 'html range-picker button' { border = '0' borderRadius = radiusSmall }
191. 'html date-picker month-view ol' { gap = '.2rem' }
192. 'html range-picker month-view ol' { gap = '.2rem' }
193. 'html date-picker ol.days li' { background = colorBackground border = '0' borderRadius = radiusSmall }
194. 'html range-picker ol.days li' { background = colorBackground border = '0' borderRadius = radiusSmall }
195. 'html date-picker ol.days li.outside' { background = 'transparent' }
196. 'html range-picker ol.days li.outside' { background = 'transparent' }
197. 'html date-picker ol.days li.selected' { background = colorAccent }
198. 'html range-picker ol.days li.selected' { background = colorAccent }
199. 'html range-picker ol.days li.between' { background = colorBackgroundSunken outline = '0' }
200. 'html range-picker ol.days li.between time' { color = colorAccent }
201. // file upload: the drop zone keeps its dashed border (it is a drop zone); the choose button is a plain button
202. 'html file-upload drop-zone' { borderRadius = radiusLarge }
203. 'html file-upload label.choose' { fontWeight = '600' border = '0' borderRadius = radiusSmall }
204. 'html file-upload label.choose:hover' { color = colorTextStrong filter = 'brightness(1.15)' }
205. // Markdown editor: one sunken surface, the toolbar a surface strip; no lines between the parts
206. 'html md-editor' { border = '0' borderRadius = radiusLarge }
207. 'html md-editor nav' { borderBottom = '0' borderRadius = radiusLarge + ' ' + radiusLarge + ' 0 0' }
208. 'html md-editor nav button' { borderRadius = radiusSmall }
209. 'html md-editor ul.files' { borderBottom = '0' }
210. 'html md-editor link-form' { borderBottom = '0' background = colorSurface }
211. 'html md-editor link-form input' { border = '0' borderRadius = radiusSmall }
212. 'html md-editor link-form button' { border = '0' borderRadius = radiusSmall }
213. 'html md-editor article img' { borderRadius = radiusLarge }
214. 'html md-editor article code' { borderRadius = radiusSmall }
215. 'html md-editor article pre' { border = '0' borderRadius = radiusLarge }
216. 'html md-editor footer' { borderTop = '0' }
217. 'html md-editor footer button' { border = '0' borderRadius = radiusSmall }
218. // code editor: the gutter is a surface beside the sunken text, no line between them
219. 'html code-editor' { border = '0' borderRadius = radiusLarge }
220. 'html code-editor code-gutter' { borderRight = '0' }