ตัวตรวจสอบ DESIGN.md

ตรวจ YAML frontmatter สี primary ที่จำเป็นต้องมี สีต้องเขียนในรูปแบบสี (hex, rgb, hsl, oklch, ชื่อสี และอื่น ๆ) ขนาดฟอนต์และความโค้งมุมต้องเป็น px, em หรือ rem คุณสมบัติของตัวอักษร คุณสมบัติของคอมโพเนนต์และการอ้างอิงโทเค็น (รวมถึงการอ้างอิงที่ไม่ได้ใส่เครื่องหมายคำพูด ซึ่ง YAML จะไม่อ่านเป็นข้อความ) รายการ omitted ส่วนที่ซ้ำหรือเรียงลำดับผิด และคอนทราสต์ระหว่างสีข้อความกับสีพื้นหลังของแต่ละคอมโพเนนต์เทียบกับเกณฑ์ขั้นต่ำ WCAG AA ที่ 4.5:1 ข้อผิดพลาด (error) ทำให้ไฟล์ไม่ถูกต้อง ส่วนคำเตือน (warning) ชี้จุดที่ควรแก้ไข

ไม่ การตรวจสอบทำงานในเบราว์เซอร์ของคุณทั้งหมด ข้อความที่คุณวางหรือไฟล์ที่คุณเลือกจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา คำขอเดียวที่การแสดงตัวอย่างส่งออกไปคือคำขอสไตล์ชีตของฟอนต์ ซึ่งเซิร์ฟเวอร์ของเราดึงมาจาก Google Fonts โดยส่งไปเพียงชื่อฟอนต์จากโทเค็นตัวอักษรของคุณเท่านั้น

รูปแบบ DESIGN.md ของ Google ที่ Stitch ใช้ และเผยแพร่ใน repository google-labs-code/design.md ตัวตรวจสอบใช้กฎเดียวกับที่ Design Extractor ใช้ตรวจ DESIGN.md ทุกไฟล์ที่สร้างขึ้น บวกกับการตรวจคอนทราสต์ของสีคอมโพเนนต์

การอ้างอิงอย่าง "{colors.brand}" ต้องระบุชื่อโทเค็นที่มีอยู่ใน frontmatter ในที่นี้คือรายการ brand ภายใต้ colors ให้เพิ่มโทเค็นที่ขาดไป หรือชี้การอ้างอิงไปยังโทเค็นที่มีอยู่ ใส่การอ้างอิงไว้ในเครื่องหมายคำพูดเสมอ เพราะ YAML จะอ่าน {colors.brand} ที่ไม่มีเครื่องหมายคำพูดเป็น mapping ไม่ใช่ข้อความ

ได้ เครื่องมือ command-line แบบโอเพนซอร์สของ Google ตรวจสอบไฟล์ใน pipeline ของคุณได้ ให้รัน npx @google/design.md lint DESIGN.md เครื่องมือจะพิมพ์รายงาน JSON และจบการทำงานด้วยโค้ด 1 เมื่อพบข้อผิดพลาด job จึงล้มเหลวเมื่อไฟล์เสีย ชุดกฎของเครื่องมือนี้ทับซ้อนกับหน้านี้ แต่ระดับความรุนแรงบางข้อต่างกัน