# Styling: `
```
## `:host` and shadow DOM
Every normal custom element (`CustomShadowElement`, the default) renders into its own shadow root. Style the
element itself with `:host { ... }` / `:host(.some-class) { ... }` / `:host([attr]) { ... }` — plain top-level
selectors style descendants inside the shadow root, not the element itself.
## Design tokens (`src/sass/_default_config.scss`, per-theme in `src/sass/themes/*.scss`)
- **Spacing/size scale** (`const`): `xs: 0.25, s: 0.5, m: 1 (default), l: 1.5, xl: 3` — multipliers applied to
base `sizes` values.
- **Font scale** (`const`): `font-xs: 0.5, font-s: 0.75, font-m: 1, font-l: 1.25, font-xl: 1.5, font-xxl: 3`.
- **Base sizes** (`sizes`): `padding: 1rem, margin: 1.2rem, font: 1rem, gap: 1.2rem, border: 4px, radius: 10px, icon: 24px, input: 36px`.
- **Breakpoints** (`devices`): `phone: 480px, tablet: 980px, desktop: 1706px, wide: -1` — mobile =
`(phone, tablet)`, desktop = `(desktop, wide)`.
- **Semantic colors** (per-theme, `colors`): `primary, secondary, success, error, warning, info, yellow, light,
dark, muted, white, text, background, title, icon, border, surface, app-bg, emphasis, event, layout, demo,
sidebar, menu, grey, dark-grey, shadow`. Reach for a semantic name, never a hex literal, so dark mode "just
works" (the `default` and `dark` themes both define this key set with different values).
- **Palettes** (5-shade ramps, `-100/-200/-400/-600/-800` suffix): `lights, blacks, greys, blues, greens,
oranges, reds, yellows, purples, limes`. `theme.color('blues-400')` resolves a palette shade directly.
## Common mixins (all in `src/sass/_theme.scss`, called as `theme.mixin(...)`)
| Mixin | For |
|---|---|
| `color($name)` / `color-value($name)` | Resolve a semantic or palette color to a CSS `var(...)` (theme-reactive) or a literal value. |
| `color-bg($bg, $text?)` / `color-text($name)` | Set `background-color`(+ optional contrasting `color`) / just `color`, from a semantic name. |
| `set-color($property, $name)` / `set-color-bg(...)` / `set-color-text(...)` / `set-color-icon(...)` | Emit a CSS custom property (`--mmo-...`) driving one of the above. |
| `flex($direction?, $align?, $justify?, $display: flex)` | Shorthand flexbox setup — e.g. `theme.flex(row, center, center, inline-flex)`. |
| `gap($size?)` | `gap:` using the spacing scale (`xs/s/m/l/xl` or a raw value). |
| `padding($size?, $sides?)` / `margin($size?, $sides?)` | Spacing shorthand from the scale, `$sides` like `'tb'`/`'lr'`/`'t'`. |
| `border($width, $style, $color)` / `border-radius($size)` / `border-size($n)` / `border-color($name)` / `border-style($style)` | Border shorthand + pieces, radius from the scale (or a raw value / `50%`). |
| `font-size($size)` | Font size from the `font-*` scale. |
| `shadow()` | Standard drop shadow. |
| `outline($width, $style, $color)` | Focus/hover outline shorthand. |
| `z-index()` | Framework-managed stacking (avoid hardcoding raw `z-index` numbers). |
| `only-mobiles { ... }` / `only-desktops { ... }` | `@include`-as-block media-query helpers keyed off the `devices`/`devices-mobile`/`devices-desktop` config. |
| `media-query($from?, $to?)` | Lower-level custom breakpoint block. |
| `apply-styles($name)` | Apply a named style bundle from the active theme's `styles` map (`'mono'`, `'title'`, `'text'`, `'toc'`, ...). |
| `font-face(...)` / `font-google(...)` / `include-fonts()` | Register `@font-face`/Google-hosted fonts declared in the theme's `fonts` config. |
| `printf($text, $vars?)` | Interpolate `{name}` placeholders from `config.get('variables')` into a string. |
| `set($property, $value)` / `set-size($property, $size)` | Generic "set this CSS property using the scale/config" helpers. |
For the exact signature of any mixin above, open `src/sass/_theme.scss` and search for `@mixin name`.
## Shared utility placeholders (`@extend`)
`src/sass/classes/*.scss` defines `%placeholder` selectors you can `@extend` (after `@use`-ing the relevant
partial) instead of re-implementing common visual patterns:
- `classes/forms` → `%fieldset` and its modifiers.
- `classes/inputs` → `%label`, `%input`, `%checkbox`, `%radio`, `%radio-tab`, `%select`, `%textarea`,
`%invalid`/`%required`/`%valid`, etc.
- `classes/buttons` → `%button` and variants.
- `classes/lists`, `classes/tables`, `classes/status`, `classes/customs`, `classes/colors` → list/tree, table,
status-badge, tag/tab/toolbar, and color-pair patterns respectively.
These files currently have little inline documentation — when in doubt, grep an existing `.jhs` file that
visibly renders the pattern you want (e.g. any input element for `%input`/`%label`) rather than
reverse-engineering the placeholder in isolation.
## Global app styles vs. element styles
`src/sass/styles.scss` (→ `src/sass/styles/*.scss`) is the **light-DOM, app-wide** stylesheet (loaded once,
outside any shadow root) — utility classes like `.hflex`/`.vflex`/`.gap`, `.panel`, `.card`, table/list/status
base styles, print rules, etc. An `` element's own `