cityofaustin / cityofaustin/techstack

Janis CSS refactor (tokens)

Open
#4,692 2 comments 0 reactions 1 assignee Assigned to @chase-gumbeau View on GitHub
Design System Epic Janis Alpha Team: Design
Dominant language
No language data
Stars
11
Forks
3
PR merge metrics
No merged PRs in 30d

Description

## 📓 Overview
Many iterations have happened over the years to the frontend, but without regular maintenance, small issues have piled up that have led to inconsistencies and we're overdue for looking back at our work and tidying up. We're better positioned to address these issues with the addition of Jair for Q/A, and a few really important features in XD that help manage and communicate variables.

### Issues and solutions
- Variables in the mocks aren't always consistent across designs, which leads to guessing or hiccups at the review stage (especially color) → XD now supports `design tokens`, so we can declare class names for variables and have those delivered side-by-side with mocks
- There are several names that aren't being used.
- There are duplicates that could/should be merged into one variable.
- Some could just be outdate and or incorrect.
- A few common page elements haven't been standardized (things like headings) → Refactor the ~~master~~ main components, then recreate page templates from those refactored components
- We don't currently utilize tokens
- Components aren't configured to be easily reusable (I might be wrong?)

## 🏆 Goals
- Optimized design/dev collaboration that integrates Q/A
- Simplify the variables to reduce the potential for inconsistencies which should speed up design/development
- Codebase and Abstract are in sync with each other

## ⛰ Milestones
- [ ] Audit
- [ ] Documentation: component names, variable names, type scale and setting, spacing rules
- [ ] Refactored mocks
- [ ] Storybook is reconnected

## 🗂 Working files
- [Design system / Tokens](https://docs.google.com/document/d/1o6k2yn99IvunM9qwiBS3_aXI3987LFwP_0EXPYZX11g/edit#heading=h.hcgrks969d8b)

---
**Links**
- CSS audit: https://cssstats.com/stats?url=https%3A%2F%2Falpha.austin.gov%2F
- Janis variables: https://github.com/cityofaustin/janis/blob/master/src/css/base/_variables.scss

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.