tracker

13.2 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, the corner radius
35. layoutColumn = var('72rem')
36. layoutGutter = var('1rem')
37. layoutHeader = var('3.25rem')
38. layoutSidebar = var('16rem')
39. layoutList = var('24rem')
40. layoutRadius = var('.4rem')
42. // ---- 2. plain elements -----------------------------------------------------------------------------------------
43. '*,
44. *::before,
45. *::after' { boxSizing = 'border-box' }
47. html { colorScheme = 'dark' scrollbarColor = colorBorder + ' transparent' }
48. body { margin = '0' minHeight = '100dvh' font = '16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif' color = colorText background = colorBackground overflowWrap = 'anywhere' }
49. '::selection' { color = colorAccentText background = colorAccent }
50. '[hidden]' { display = 'none !important' }
52. h1 { margin = '0 0 1rem' fontSize = '1.6rem' lineHeight = '1.25' color = colorTextStrong }
53. h2 { margin = '1.5rem 0 .6rem' fontSize = '1.25rem' lineHeight = '1.3' color = colorTextStrong }
54. h3 { margin = '1.25rem 0 .5rem' fontSize = '1.05rem' lineHeight = '1.3' color = colorTextStrong }
55. h4 { margin = '1rem 0 .4rem' fontSize = '1rem' color = colorTextStrong }
56. p { margin = '0 0 1rem' }
57. strong { color = colorTextStrong }
58. small { fontSize = '.85rem' }
59. '.muted' { color = colorTextMuted }
60. 'p.empty' { color = colorTextMuted fontStyle = 'italic' }
61. '.visually-hidden' { position = 'absolute' width = '1px' height = '1px' margin = '-1px' padding = '0' overflow = 'hidden' clip = 'rect(0 0 0 0)' whiteSpace = 'nowrap' border = '0' }
62. ul { margin = '0 0 1rem' paddingLeft = '1.25rem' }
63. ol { margin = '0 0 1rem' paddingLeft = '1.5rem' }
64. li { margin = '.15rem 0' }
65. hr { height = '1px' margin = '1.5rem 0' border = '0' background = colorSurface }
66. img { maxWidth = '100%' height = 'auto' }
68. a { color = colorAccent textDecoration = 'none' textUnderlineOffset = '.2em' }
69. 'a:hover' { textDecoration = 'underline' }
70. ':focus-visible' { outline = '2px solid ' + colorAccent outlineOffset = '2px' }
72. 'code,
73. kbd,
74. samp' { padding = '.05rem .3rem' font = '.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' background = colorSurface borderRadius = '.25rem' }
75. pre { margin = '0 0 1rem' padding = '.75rem 1rem' overflow = 'auto' font = '.9rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' background = colorBackgroundSunken borderRadius = layoutRadius }
76. 'pre code' { padding = '0' background = 'transparent' }
78. // buttons: quiet by default (text on nothing, a surface on hover); `.primary` (and a form's submit) is the accent;
79. // `.danger` says it destroys something — never decoration
80. 'button,
81. .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 = layoutRadius cursor = 'pointer' }
82. 'button:hover,
83. .button:hover' { textDecoration = 'none' background = colorSurface }
84. 'button.primary,
85. .button.primary,
86. button[type="submit"]' { color = colorAccentText background = colorAccent }
87. 'button.primary:hover,
88. .button.primary:hover,
89. button[type="submit"]:hover' { background = colorAccent filter = 'brightness(1.1)' }
90. 'button.danger,
91. .button.danger' { color = colorDanger }
92. 'button:disabled' { opacity = '.45' cursor = 'default' filter = 'none' }
93. 'button svg,
94. .button svg' { flex = 'none' width = '1.25rem' height = '1.25rem' }
96. // fields: a sunken surface, no frame; the focus ring is the accent; an invalid field gets the danger ring
97. label { display = 'block' marginBottom = '.25rem' fontWeight = '600' color = colorTextStrong }
98. 'input,
99. select,
100. textarea' { maxWidth = '100%' padding = '.5rem .7rem' font = 'inherit' color = colorText background = colorBackgroundSunken border = '0' borderRadius = layoutRadius }
101. 'input:focus,
102. select:focus,
103. textarea:focus' { outline = '2px solid ' + colorAccent outlineOffset = '0' }
104. 'input[aria-invalid="true"],
105. textarea[aria-invalid="true"]' { outline = '2px solid ' + colorDanger outlineOffset = '0' }
106. 'input[type="checkbox"],
107. input[type="radio"]' { width = '1.1rem' height = '1.1rem' padding = '0' accentColor = colorAccent }
108. 'input::placeholder,
109. textarea::placeholder' { color = colorTextMuted }
110. textarea { width = '100%' minHeight = '6rem' resize = 'vertical' }
111. fieldset { margin = '0 0 1rem' padding = '0' border = '0' }
112. legend { padding = '0' marginBottom = '.5rem' fontWeight = '600' color = colorTextStrong }
113. 'form p' { margin = '0 0 1rem' }
114. progress { accentColor = colorAccent }
116. // FOLDABLES: the border belongs to the foldable (the creator likes it on the tracker's season collapsibles)
117. details { margin = '0 0 .75rem' border = '1px solid ' + colorBorder borderRadius = layoutRadius }
118. summary { padding = '.6rem .9rem' fontWeight = '600' color = colorTextStrong cursor = 'pointer' }
119. 'summary:hover' { background = colorSurface }
120. 'details[open] > summary' { borderBottom = '1px solid ' + colorBorder }
121. 'details > :not(summary)' { marginLeft = '.9rem' marginRight = '.9rem' }
122. 'details > summary + *' { marginTop = '.75rem' }
123. 'details > :last-child:not(summary)' { marginBottom = '.75rem' }
125. // DROP ZONES: a dashed border says "drop here"; `.over` while something is dragged over it
126. 'drop-zone,
127. .drop-zone' { display = 'block' padding = '1.25rem' textAlign = 'center' color = colorTextMuted border = '2px dashed ' + colorBorder borderRadius = layoutRadius }
128. 'drop-zone.over,
129. .drop-zone.over' { color = colorText borderColor = colorAccent background = colorSurface }
131. // tables: no grid; the header row is muted, a row lights up under the pointer
132. table { width = '100%' margin = '0 0 1rem' borderCollapse = 'collapse' }
133. th { padding = '.4rem .6rem' fontSize = '.85rem' fontWeight = '600' textAlign = 'left' color = colorTextMuted }
134. td { padding = '.5rem .6rem' verticalAlign = 'top' }
135. 'tbody tr:nth-child(odd)' { background = colorBackgroundSunken }
136. 'tbody tr:hover' { background = colorSurface }
138. // type colours and pills: `class="type-2"` colours a text with its slot; `.pill` turns it into an inverted label (text on
139. // the colour); a pill without a type is the accent. Status words use the semantic roles: `.success`, `.warning`, `.danger`
140. '.type-1' { color = colorType1 }
141. '.type-2' { color = colorType2 }
142. '.type-3' { color = colorType3 }
143. '.type-4' { color = colorType4 }
144. '.type-5' { color = colorType5 }
145. '.type-6' { color = colorType6 }
146. '.success' { color = colorSuccess }
147. '.warning' { color = colorWarning }
148. '.danger' { color = colorDanger }
149. '.pill' { display = 'inline-block' padding = '.1rem .55rem' fontSize = '.8rem' fontWeight = '700' lineHeight = '1.5' color = colorAccentText background = colorAccent borderRadius = '1rem' whiteSpace = 'nowrap' }
150. '.pill.type-1' { color = colorAccentText background = colorType1 }
151. '.pill.type-2' { color = colorAccentText background = colorType2 }
152. '.pill.type-3' { color = colorAccentText background = colorType3 }
153. '.pill.type-4' { color = colorAccentText background = colorType4 }
154. '.pill.type-5' { color = colorAccentText background = colorType5 }
155. '.pill.type-6' { color = colorAccentText background = colorType6 }
156. '.pill.success' { color = colorAccentText background = colorSuccess }
157. '.pill.warning' { color = colorAccentText background = colorWarning }
158. '.pill.danger' { color = colorAccentText background = colorDanger }
159. '.pill.quiet' { color = colorText background = colorSurface }
161. // ---- 3. the components of components.hybriel.worldapi.org --------------------------------------------------------
162. // Their own Style draws frames around buttons, fields, editors and day cells. The theme takes the decorative ones away
163. // (the drop zone's dashed border and the focus rings stay — they mean something) and lets surfaces separate instead.
164. // pagination
165. 'html pagination button' { border = '0' }
166. 'html pagination li.current button' { border = '0' }
167. // modal: the dimmed page around the window is the separation
168. 'html modal-dialog > dialog' { background = colorSurface border = '0' boxShadow = '0 1rem 3rem ' + colorBackgroundSunken }
169. 'html modal-dialog header' { borderBottom = '0' }
170. 'html modal-dialog modal-body footer' { background = colorSurface borderTop = '0' }
171. 'html modal-dialog button:hover' { background = colorBackground }
172. // month view: the day cells are tiles with a gap, no grid lines
173. 'html month-view ol' { gap = '.25rem' }
174. 'html month-view button' { border = '0' }
175. 'html #month-days li' { border = '0' borderRadius = '.3rem' }
176. // date picker + date range picker: borderless field, the popup is a raised surface
177. 'html date-picker input' { border = '0' }
178. 'html range-picker input' { border = '0' }
179. 'html date-picker input[aria-invalid="true"]' { outline = '2px solid ' + colorDanger outlineOffset = '-2px' }
180. 'html range-picker input[aria-invalid="true"]' { outline = '2px solid ' + colorDanger outlineOffset = '-2px' }
181. 'html date-picker month-view' { background = colorSurface border = '0' boxShadow = '0 .75rem 2rem ' + colorBackgroundSunken }
182. 'html range-picker month-view' { background = colorSurface border = '0' boxShadow = '0 .75rem 2rem ' + colorBackgroundSunken }
183. 'html date-picker button' { border = '0' }
184. 'html range-picker button' { border = '0' }
185. 'html date-picker month-view ol' { gap = '.2rem' }
186. 'html range-picker month-view ol' { gap = '.2rem' }
187. 'html date-picker ol.days li' { background = colorBackground border = '0' borderRadius = '.3rem' }
188. 'html range-picker ol.days li' { background = colorBackground border = '0' borderRadius = '.3rem' }
189. 'html date-picker ol.days li.outside' { background = 'transparent' }
190. 'html range-picker ol.days li.outside' { background = 'transparent' }
191. 'html date-picker ol.days li.selected' { background = colorAccent }
192. 'html range-picker ol.days li.selected' { background = colorAccent }
193. 'html range-picker ol.days li.between' { background = colorBackgroundSunken outline = '0' }
194. 'html range-picker ol.days li.between time' { color = colorAccent }
195. // file upload: the drop zone keeps its dashed border (it is a drop zone); the choose button is a plain button
196. 'html file-upload label.choose' { fontWeight = '600' border = '0' borderRadius = layoutRadius }
197. 'html file-upload label.choose:hover' { color = colorTextStrong filter = 'brightness(1.15)' }
198. // Markdown editor: one sunken surface, the toolbar a surface strip; no lines between the parts
199. 'html md-editor' { border = '0' borderRadius = layoutRadius }
200. 'html md-editor nav' { borderBottom = '0' borderRadius = layoutRadius + ' ' + layoutRadius + ' 0 0' }
201. 'html md-editor ul.files' { borderBottom = '0' }
202. 'html md-editor link-form' { borderBottom = '0' background = colorSurface }
203. 'html md-editor link-form input' { border = '0' }
204. 'html md-editor link-form button' { border = '0' }
205. 'html md-editor article pre' { border = '0' }
206. 'html md-editor footer' { borderTop = '0' }
207. 'html md-editor footer button' { border = '0' }
208. // code editor: the gutter is a surface beside the sunken text, no line between them
209. 'html code-editor' { border = '0' borderRadius = layoutRadius }
210. 'html code-editor code-gutter' { borderRight = '0' }