Skip to content

docs: add css/README.md — developer guide for CSS token system#7407

Open
adarsh-yadav1 wants to merge 1 commit into
sugarlabs:masterfrom
adarsh-yadav1:docs/css-token-developer-guide
Open

docs: add css/README.md — developer guide for CSS token system#7407
adarsh-yadav1 wants to merge 1 commit into
sugarlabs:masterfrom
adarsh-yadav1:docs/css-token-developer-guide

Conversation

@adarsh-yadav1
Copy link
Copy Markdown

@adarsh-yadav1 adarsh-yadav1 commented May 21, 2026

PR Category

  • Bug Fix
  • Feature
  • Performance
  • Tests
  • Documentation

Summary

Adds css/README.md as the developer guide for the CSS custom property
token system introduced in css/tokens.css.

What this PR does

  • Documents the complete token naming convention and category prefixes
  • Explains the three-theme architecture (light, dark, high-contrast)
  • Provides copy-paste examples for consuming tokens in CSS
  • Provides the getComputedStyle bridge pattern for reading tokens in JS
  • Documents how to add new tokens correctly
  • Explains the inline style migration pattern from platformColor to CSS classes
  • Tracks which CSS files have been migrated and which are pending
  • Notes the Materialize CSS override strategy

Why

relates to #6606

Directly satisfies the seventh acceptance criterion from the DMP 2026
project ticket: "A brief developer guide explains how to use and extend
the token system." Without this guide, future contributors will
reintroduce hardcoded values.

Related

Companion to the token system PRs being merged under this DMP project.

Note: aidebugger.test.js failure is pre-existing on master.
Confirmed by identical coverage numbers (48.11% on both PR and master).
This is a documentation-only PR (css/README.md) with no JS changes.

@github-actions github-actions Bot added documentation Updates to docs, comments, or README size/M Medium: 50-249 lines changed area/css Changes to CSS/SASS style files area/docs Changes to documentation labels May 21, 2026
@github-actions
Copy link
Copy Markdown
Contributor

🧪 Jest Test Results

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Coverage: Statements: 48.11% | Branches: 39.52% | Functions: 52.84% | Lines: 48.52%
Master Coverage: Statements: 48.11% | Branches: 39.52% | Functions: 52.84% | Lines: 48.52%

Note: These failures may be introduced by this PR or may already exist in the master branch.
Tip: Update your branch with the latest master and rerun tests.
If the same failures are present on master, they are likely not introduced by this PR.

Failed Tests:

aidebugger.test.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/css Changes to CSS/SASS style files area/docs Changes to documentation documentation Updates to docs, comments, or README size/M Medium: 50-249 lines changed

Projects

Development

Successfully merging this pull request may close these issues.

1 participant