feat(spec): add 9 standard CSS component sub-tokens#89
Open
tn819 wants to merge 1 commit into
Open
Conversation
Extend the component_sub_tokens vocabulary from 8 to 17 entries to support real-world design systems that use standard CSS properties within component definitions. Added sub-tokens (with usage examples): - minHeight / minWidth: touch-target compliance (44px, 56px buttons) - fontFamily / fontWeight / fontStyle: per-component type overrides (serif CTAs, italic margin-notes) - borderColor: card, chip, and container borders - borderLeftColor / borderLeftWidth: directional border patterns (left-edge accent for margin-note components) - paddingLeft: directional padding (margin-note inset pattern) - elevation: shadow classes (floating SOS button) All follow existing spec patterns: Color for colour references, Dimension for px/rem values, string for named values. Directional variants use CSS box-model naming conventions.
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Extends the
component_sub_tokensvocabulary from 8 to 17 entries to support real-world design systems that use standard CSS properties within component definitions.Problem
The current 8-token vocabulary (
backgroundColor,textColor,typography,rounded,padding,size,height,width) is insufficient for production design systems. Real-world components need additional standard CSS properties:minHeight/minWidthfontFamily/fontWeight/fontStyleborderColorborderLeftColor/borderLeftWidthpaddingLeftelevationWithout these in the spec, every real design system that uses them gets a wall of "not a recognized component sub-token" warnings. This makes
lintoutput noisy and obscures actual issues.Change
Adds 9 new entries to
component_sub_tokensinspec-config.yaml, each with:Color,Dimension,string, ornumber | string)All additions follow existing spec patterns. Directional variants (
borderLeftColor,paddingLeft) use standard CSS box-model naming.Testing
Existing tests should pass (no token removals, only additions). The change is backwards-compatible — existing valid DESIGN.md files continue to validate, and the new tokens are recognized.