hackforla / hackforla/internship

[2026] Develop and update Design System Microsite with Tokens to match Material for Mkdocs

Open
#824 2 comments 0 reactions 1 assignee Claimed by @zvidmarb View on GitHub
complexity: large epic feature: design system Participant Type: TWE Team Member role: engineering size: 13+pt
Dominant language
CSS
Stars
20
Forks
6
PR merge metrics
No merged PRs in 30d

Description

### Dependencies

- https://github.com/hackforla/internship/issues/397
- https://github.com/hackforla/internship/issues/446
- https://github.com/hackforla/internship/issues/455

### Overview

We need to develop a microsite to hold the Design System components.
This site should be based on Material for MKDocs and setup to run on the internship repo's Github Pages. Tokens should be implemented in place of raw values for design properties.

### Action Items
- [ ] [Create a consistent naming system for tokens that reduce redundancy, similarly to Material and other systems](https://github.com/hackforla/internship/issues/823)
- [ ] Develop Component microsite pages for the Issues below

### Resources/Instructions
- [Contributing to the Internship Design System](https://github.com/hackforla/internship-website-design-system/blob/main/CONTRIBUTING.md)
- [Current Live Version](https://hackforla.github.io/internship-website-design-system/)
- [Getting Started with Material for MkDocs](https://squidfunk.github.io/mkdocs-material/getting-started/)
- [Using snippets to include code](https://facelessuser.github.io/pymdown-extensions/extensions/snippets/#snippets-notation)
- [Material for MkDocs Snippets](https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#snippets)
### Styles for the epic _(Style: Design Issue | Dev Issue)_
- [ ] Typography: #406 #528 | ~#487~ #742
- [ ] Colors: #407 | ~#488~ #746
- [ ] Elevations: #541 | #829
### Components for the epic _(Component: Design Issue | Dev Issue)_
- [x] Accordion: #404 | ~#484~ ~#544~ ~#544~ #821
- [x] Buttons: #400 | ~#736~ #815
- [x] Checkbox: #411 | ~#542~ ~#741~ #817
- [x] Input Fields: #416 | ~#751~ ~#540~ #818
- [x] Grid System: #415 | ~#743~ #750
- [x] Pagination: #424 | ~#753~ #816
- [x] Radio Button: #412 | #457 ~#471~
- [ ] Text Area: #417 | #822
- [ ] Toggles: #410 | #558
- [x] Tags/Chips: ~#413~ #622 | #557
- [x] Dropdown*: #399 #538 | ~#486~ ~#543~ #820
- [ ] Generic Homepage: #401 | #562
- [ ] Headers: #403 | #489
- [ ] Footers: #408 | #747
- [ ] Layout: #414 | #749
- [ ] Sliders: #420 | #825
- [ ] Snackbar: ~#510~ #464 | #827
- [ ] Badges: #693 | #828
- [ ] Icon Buttons: #731 | #752
- [ ] Tooltips: #425 (Incomplete?) | #826
- [ ] Date Pickers: #419 | Design Incomplete
- [ ] Icons: #426 | Design Incomplete
- [ ] Banner: #511 | Design Incomplete
- [ ] Progress Bars: #421 | Design Incomplete
- [ ] Breadcrumbs: #422 | Design Incomplete
- [ ] Cards*: ~#402~ #739 | Design Incomplete
- [ ] Dialogs (Modals / Pop-ups): #409 | Design Incomplete

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.