Files
computer-playbook/docs/contributing/artefact/files/role/style.css.md
T
Environment TestandClaude Sonnet 4.6 0b8e16a45d test(lint): add markdown link checker and fix all broken links
Add tests/lint/repository/test_markdown_links.py — a hard-fail lint
test that scans all git-tracked markdown files for broken relative and
repo-root-absolute links. Skips external URLs, anchor-only links, fenced
code blocks, and placeholder targets.

Apply documentation.md rules to all staged files: add emojis after
headlines in docs files, remove emojis from role README headings,
standardize Credits sections to the canonical format, remove empty
sections and orphaned sentences referring to missing documentation files,
fix raw URLs and incorrect link text across role READMEs and docs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-10 22:00:46 +02:00

1.6 KiB

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. For browser-side validation requirements after visible UI changes, see Playwright Tests.

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-rgb-01-*.
  • CSS_GRADIENT_ANGLE keeps the gradients consistent across surfaces.

Inventory 📋

  • You MUST set design.css.colors.base in the inventory as the single base color.
  • You MUST keep compose.services.css.enabled enabled in the role configuration or override it in the inventory when CSS injection should run.
  • You SHOULD 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 MAY use the full generated palette space: all color categories 01 through 07 and all brightness values 00 through 99.
  • You MUST combine the matching --color-XX-* and --color-rgb-XX-* 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.