34 lines
1.8 KiB
CSS
34 lines
1.8 KiB
CSS
/* ==========================================================================
|
|
Cascade-Layer-Reihenfolge
|
|
--------------------------------------------------------------------------
|
|
Zwingende Reihenfolge der Designsprache (siehe .claude/skills/assessor-ui):
|
|
|
|
@layer tokens, base, shell, components, utilities;
|
|
|
|
Diese Datei muss als erstes Stylesheet geladen werden, weil die
|
|
Reihenfolge durch die erste Layer-Deklaration festgelegt wird.
|
|
|
|
Uebergangszustand: der Altbestand (tokens.css, base.css, layout.css,
|
|
components.css, datahub.css, mitre-graph.css, import-workflow.css,
|
|
dynamic-filters.css, themes.css, legacy-views.css) liegt noch ausserhalb
|
|
der Layer. Unlayered Regeln gewinnen gegen jede Layer-Regel. Solange das
|
|
so ist, gilt:
|
|
|
|
- Tokennamen duerfen nicht doppelt vergeben sein. Der Altbestand fuehrt
|
|
seine zehn abweichenden Werte deshalb unter `--legacy-*`
|
|
(accent, accent-active, radius-sm, radius-md, space-1 bis space-6).
|
|
- Klassennamen sind fast disjunkt. Sechs Namen kollidieren jedoch:
|
|
`btn`, `icon-btn`, `input`, `select`, `tile-grid`, `is-bookmarked`.
|
|
Deshalb ist `ui-components.css` noch nicht in `main.tsx` importiert:
|
|
eine Layer-Regel verliert nur bei gemeinsamen Eigenschaften, ihre
|
|
zusaetzlichen Eigenschaften (height, gap, justify-content) wirken
|
|
trotzdem und veraendern bestehende Ansichten.
|
|
|
|
Beim Umstellen einer Ansicht wandert ihr CSS in den passenden Layer,
|
|
verliert seine `--legacy-*`-Referenzen, und die betroffenen sechs
|
|
Klassennamen werden auf die Designsprache umgestellt. Ist der letzte
|
|
Altname weg, wird `ui-components.css` global importiert.
|
|
========================================================================== */
|
|
|
|
@layer tokens, base, shell, components, utilities;
|