This folder contains the global stylesheet entry for the app.
We use Tailwind for styling in templates. SCSS here is intentionally minimal and only covers:
- runtime CSS variables (tokens)
- font and icon font loading
- a few global defaults (base, scrollbars)
- small accessibility helpers
File: index.scss
Loaded in this order:
utils/vars– CSS variables (tokens)utils/fonts– Poppins font facesutils/icons– Material Icons font +.material-iconsclass@use 'tailwindcss';– Tailwind utilitieslayout/base– global html/body defaults + reduced motion behaviorlayout/scroll– scrollbar stylingatom/a11y– screen reader utilities
- Use Tailwind utilities in templates for layout, spacing, typography, etc.
- Do not create new global SCSS for component styling.
- Add component SCSS only when Tailwind can’t cover the case (rare) and keep it local.
File: utils/_vars.scss
We expose a small set of CSS variables (e.g. var(--c-bg-primary)) that can be changed at runtime via attributes on <html>:
data-mode="dark"– overrides surface/text/border tokensdata-density="compact"– reduces spacing tokensdata-radius="square"– removes rounding tokens
These tokens exist to support consistent colors/backgrounds and a few global behaviors (scrollbars, body background, focus ring), not to replace Tailwind.
File: atom/_a11y.scss
.visually-hidden– hide visually but keep for screen readers.visually-hidden-focusable– hidden unless focused (e.g. skip link)
Example:
<a class="visually-hidden-focusable" href="#main">Skip to content</a>