Camel2.0 — Dokumentacja komponentów UI

1 #Base Base

1.1 #Base.SVGRules SVG Sprite — zasady fill

Ikony SVG w sprite renderowane przez <use> (shadow DOM). Atrybuty prezentacyjne (fill="none") wewnątrz <symbol> nie mogą być nadpisane z CSS. Dlatego:

  1. Plik SVG źródłowy — NIE ustawiaj fill na root <svg> ani <path>. Użyj stroke="currentColor".
  2. CSS — steruj fill z poziomu hostu: .component svg { fill: none; } .component.is-active svg { fill: currentcolor; }
  3. Kolor — currentColor w SVG + color w CSS → ikona dziedziczy kolor.
Source: src/scss/base/_variables.scss, line 10

1.2 #Base.Theming Themowanie kolorów

Komponenty z wariantem kolorystycznym per produkt używają CSS Custom Properties zdefiniowanych w :root i nadpisywanych przez klasy .theme-* (np. .theme-red, .theme-gold).

Zmienne: --fc-accent-color, --fc-text-color, --like-btn-color. Użycie: dodaj .theme-* na kontenerze nadrzędnym.

Source: src/scss/base/_variables.scss, line 25

1.3 #Base.Variables Variables

Design tokens: kolory, typografia, spacing, breakpoints, shadows, transitions, z-index. Custom properties CSS do themowania komponentów per produkt.

Source: src/scss/base/_variables.scss, line 3