Walidator DESIGN.md

Frontmatter w YAML, wymagany kolor primary, to, czy kolory są zapisane w formacie koloru (hex, rgb, hsl, oklch, nazwa koloru itp.), rozmiary fontów i zaokrąglenia w px, em lub rem, właściwości typografii, właściwości komponentów i ich odwołania do tokenów (w tym odwołania bez cudzysłowów, których YAML nie czyta jako tekstu), listę pominiętych sekcji, zduplikowane lub ułożone w złej kolejności sekcje oraz kontrast między kolorem tekstu a kolorem tła każdego komponentu względem minimum WCAG AA wynoszącego 4,5:1. Błędy sprawiają, że plik jest niepoprawny; ostrzeżenia wskazują rzeczy warte poprawienia.

Nie. Walidacja działa w całości w twojej przeglądarce: wklejony tekst ani wybrany plik nigdy nie trafiają na nasze serwery. Jedyne żądania wysyłane przez podgląd dotyczą arkuszy stylów fontów: nasz serwer pobiera je z Google Fonts i przekazuje w nich wyłącznie nazwy rodzin fontów z twoich tokenów typografii.

Format DESIGN.md od Google, używany przez Stitch i opublikowany w repozytorium google-labs-code/design.md. Walidator stosuje te same reguły, którymi Design Extractor sprawdza każdy generowany DESIGN.md, plus sprawdzenie kontrastu kolorów komponentów.

Odwołanie takie jak "{colors.brand}" musi wskazywać token, który istnieje we frontmatterze, w tym przypadku wpis brand w sekcji colors. Dodaj brakujący token albo skieruj odwołanie na istniejący. Trzymaj odwołania w cudzysłowie: YAML czyta {colors.brand} bez cudzysłowu jako mapowanie, a nie jako tekst.

Tak. Otwartoźródłowe narzędzie wiersza poleceń od Google sprawdza plik w twoim pipeline: uruchom npx @google/design.md lint DESIGN.md. Wypisuje raport JSON i kończy działanie z kodem 1, gdy znajdzie błędy, więc zadanie nie przejdzie z uszkodzonym plikiem. Jego zestaw reguł pokrywa się z tą stroną, ale niektóre poziomy ważności się różnią.