<!-- Generated by npm run gen:skill from tools/skill/theme/app-css.md - do not edit. -->

# Tuning in an app's CSS

An app adjusts the theme, it does not repaint it. Its CSS goes in a view: `<style href="app.css"/>` (or an inline `<style>`) as the view's first child. Put the rules on a class and give that class to a component or to a panel: custom properties reach everything inside it.

```css
.compact { --xc-tabstrip-font-weight: 600; --xc-table-cell-pad-y: 2px; }
```
```xml
<panel type="rows" class="compact">...</panel>
```

- `--xc-<comp>-*` is the per-component knob layer (`--xc-button-radius`, `--xc-input-outline`, `--xc-tabstrip-color-active`, `--xc-list-row-pad-y`, ...). A component's knobs are the `var(--xc-...)` names in `ui/<Dir>/*.css` and the reference; a name nobody reads does nothing, so look it up.
- Field states (a process sets `action="error"`, `"warning"` or `"success"` on a field) are drawn from `--xios-color-error`, `-warning` and `-success`: change them in the theme, not per app.
- Read tokens with a fallback: `var(--xios-color-on-surface, #1f2937)`, `var(--xios-radius-md, 4px)`. Colors from roles only (`primary`, `surface`, `on-surface`, `outline`, ...), so the dark variant follows; a hard-coded color does not.
- Color a component by role with a class: `xios-color-secondary`, `xios-color-tertiary`, `xios-color-danger`, `xios-color-neutral`. Type with `xios-type-display`, `-heading`, `-subheading`, `-body`, `-caption`, `-label`, `-strong`.
- Your own CSS names stay out of `--xios-*`: use the app's own prefix (`--myapp-gap`).
