Mechanize UI color token enforcement check

Đang mở
  • Có gì không ổn?
#578 1 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@ArthurArthurArthur0817 đang làm issue này rồi.

Từ ngày 4/11/2026.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
68/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, python, shell
Lĩnh vực
testing, tooling

Hướng nghiên cứu

Start by reading scripts/test.sh and the project’s CSS token guidance to understand how checks are run and which token-definition blocks are exempt. Add the checker at scripts/check-css-tokens.py and cover it in tests/scripts/test_check_css_tokens.py; run the unit tests and bash scripts/test.sh. Done means hardcoded colors outside exempt blocks are reported with file and line, while permitted tokens, comments, and strings do not cause false positives.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Summary

Adds an automated CSS color token enforcement tool in scripts/check-css-tokens.py to mechanize stylesheet color rules and prevent interface styles from hardcoding literal color values (Hex/RGB/HSL).

Motivation & Context

As described in the "Strengthening skills: code checking and progressive review" section of subsequent contribution directions, project guidelines require UI colors to use CSS tokens (var(--...)) to maintain consistency across themes (light/dark modes). However, this rule is not yet mechanized and relies entirely on manual code reviews. This creates unnecessary review overhead and allows hardcoded colors—such as fixed hex values failing on light backgrounds—to slip into the codebase.

Changes
  1. Add checker script (scripts/check-css-tokens.py):
    • Scans CSS files under web/.
    • Excludes :root and theme-specific token definition blocks, then checks remaining CSS rules for hardcoded literal color values (#hex, rgb(), rgba(), hsl(), etc.).
    • Reports exact file paths, line numbers, and offending values upon detecting violations, exiting with a non-zero status code (1).
  2. Integrate into local test gates:
    • Adds the checker to scripts/test.sh so style rules are validated automatically during the test run.
  3. Add test coverage (tests/scripts/test_check_css_tokens.py):
    • Implements unit tests for the script covering valid var(--...) usage, permitted comments/strings, and interception of prohibited literal color formats to ensure zero false positives and reliable detection.
Testing
  • Script unit tests pass: python3 -m unittest tests/scripts/test_check_css_tokens.py (or pytest tests/scripts/test_check_css_tokens.py).
  • Full local test suite passes with no regressions: bash scripts/test.sh.
  • Intentionally introduced #ff0000 into web/styles.css to verify that the script pinpoints the offending line and halts the build.
Ngôn ngữ chính
Rust
Star
223
Fork
148
Merge trung bình
1 ngày 10 giờ
Pull request đã merge (30 ngày)
227

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của sysprog21/codetrial

Tất cả issue của sysprog21/codetrial

Issue tương tự

Thêm issue về Rust

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.