[Back to Role](README.md)

# `style.css`

This page is the SPOT for role-local CSS and theming.
Use this page for repository wiring, inventory keys, and palette mapping.
For implementation scope, override strategy, and live review, see [Agent `style.css`](../../../agents/files/role/style.css.md).
For browser-side validation requirements after visible UI changes, see [Contributing `playwright.spec.js`](playwright.spec.js.md).

## `style.css.j2`

- `roles/web-app-taiga/templates/style.css.j2` is the Taiga role override.
- `sys-front-inj-css` renders it when `compose.services.css.enabled` is enabled.
- The template maps the generated palette to semantic variables such as `--color-01-solid-primary`, `--color-01-link-primary`, grayscale steps, and `--color-01-rgb-*`.
- `CSS_GRADIENT_ANGLE` keeps the gradients consistent across surfaces.

## Inventory

- Set `design.css.colors.base` in the inventory as the single base color.
- Keep `compose.services.css.enabled` enabled in the role configuration or override it in the inventory when CSS injection should run.
- Add `design.font.import_url` when typography and colors should be controlled together.

## Color Logic

- The palette is generated from a base color through `colorscheme-generator`.
- Role-local CSS can use the full generated palette space: all color categories `01` through `07` and all brightness values `00` through `99`.
- Combine the matching `--color-XX-*` and `--color-XX-rgb-*` tokens in a way that is both meaningful and aesthetically coherent so semantic mappings, surfaces, gradients, borders, and overlays work together as one design system.