TWE: Dev: Design System: Create consistent token naming standards

[zvidmarb]

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 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 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
• 1.02 WIKI: Design system microsite JavaScript
• 1.03 MKdocs folder: /docs on repo
• 1.04 MDdocs config file: mkdocs.yml on repo
• 1.05 variables file: /docs/components/sass/abstracts/_variables.scss on repo
• 1.06 SASS file folder: /docs/components/sass/components
• 1.07 Variables SASS Sheet: /docs/components/sass/abstracts/variables.sss
• 1.08 HTML Color Code Names: HTMLColorCodes.com
• 1.11 Connect component in Figma to GitHub Files
• 1.13 Material Design Kit (Figma)
• 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