Janis CSS refactor (tokens)

[gumbeauuu]

📓 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

---

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

[gumbeauuu]

This is the issue I'm working from @robbobfrh84

[robbobfrh84]

To illustrate the wild ride we've been on. Here's the link to the current state of our variables in janis.

• https://github.com/cityofaustin/janis/blob/master/src/css/base/_variables.scss

It be great to clean this up and make this list much much shorter. My guess is...

• 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.