hackforla / hackforla/internship
TWE: Dev: Design System: Create consistent token naming standards
- Dominant language
- CSS
- Stars
- 20
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
### Overview
We need to review existing token values and variable names (SASS variables + CSS custom properties) and determine what naming conventions are most intuitive for developer purposes. Material may be too all-encompassing for our purposes, review other resources to understand how other design systems classify tokens by domain and scope. As the Design team is currently not active, we will prepare a standard for us, first, and have them review for their adoption, second.
#### Assumptions
- You have read the [CONTRIBUTING.md](https://github.com/hackforla/internship-website-design-system/blob/main/CONTRIBUTING.md) in the Design System repo
- You have set up your development environment for working with the Internship Design System Repository: https://github.com/hackforla/internship-website-design-system
- You will continue to follow the instructions in CONTRIBUTING.md file
### Action Items
- [ ] Review the Microsite page mockup you will be working from (Resource 1.01)
- [ ] Review the Material Design Kit and identify the relevant token standards (Resource 1.13)
- [ ] Review Code Standards before starting implementation
- [ ] Name the Branch you create `tokensystem`
- [ ] Determine an initial classification to separate token scopes by
- [ ] Abstract identical tokens into a larger scope
- [ ] Define a default value for similar tokens and make variations consistent in name
- [ ] Verify a set of color tokens consistent with the design system and only those actively used by components
- [ ] Create tokens as necessary, reusing existing tokens where possible; add new color tokens only if required and name them using HTML Color Code conventions (Resources 1.07, 1.08)
- [ ] Define a consistent standard across all states where possible (how much do different component states have in common?)
- [ ] For any token/variable updated, verify all instances across SASS files have been replaced
- [ ] Review template frontend for errors
- [ ] Update [CONTRIBUTING.md](https://github.com/hackforla/internship-website-design-system/blob/main/CONTRIBUTING.md) to include a section explaining the new naming conventions
- [ ] Make a PR
### Resources
#### Resources for working on this issue
- 1.01 Design Reference
- [Design Systems Figma](https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=2%3A45&mode=design&t=jgMN8QdoLnh9F7MT-1)
- 1.02 WIKI: [Design system microsite JavaScript](https://github.com/hackforla/internship/wiki/Design-system-microsite-javascript)
- 1.03 MKdocs folder: [/docs](https://github.com/hackforla/internship-website-design-system/tree/main/docs) on repo
- 1.04 MDdocs config file: [mkdocs.yml](https://github.com/hackforla/internship-website-design-system/blob/main/mkdocs.yml) on repo
- 1.05 variables file: [/docs/components/sass/abstracts/_variables.scss](https://github.com/hackforla/internship-website-design-system/tree/main/docs/components/sass/abstracts) on repo
- 1.06 SASS file folder: [/docs/components/sass/components](https://github.com/hackforla/internship-website-design-system/tree/main/docs/components/sass/components)
- 1.07 Variables SASS Sheet: [/docs/components/sass/abstracts/variables.sss](https://github.com/hackforla/internship-website-design-system/tree/main/docs/components/sass/abstracts/variables.scss)
- 1.08 HTML Color Code Names: [HTMLColorCodes.com](https://htmlcolorcodes.com)
- 1.11 [Connect component in Figma to GitHub Files](https://github.com/hackforla/internship/wiki/Connect-component-in-Figma-to-GitHub-Files)
- 1.13 [Material Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460/material-3-design-kit)
- 1.14 Design System Links
- [Material] (https://m3.material.io/foundations/design-tokens/overview)
- [Into Design Systems] (https://www.youtube.com/watch?v=dkTGjUhQaVg)
#### Resources gathered during the completion of this issue
-
Contributor guide
Assessment
This issue has not been assessed yet.