# Design System

Out of [this list](https://github.com/alexpate/awesome-design-systems), Carbon seems like one of the strongest candidates.

## Unique Strengths
- System-oriented (not a more general site UI, e.g Bulma)
- React Component Library
- Navigable, updated documentation (in English!)
- Opinionated UI/UX patterns around using the design system's own components to enable managing data

## Questions Being Investigated / WIP Questions
- Do we dive 100% into their philosophy immediately and risk over-investing in something that may not scale, or do we slowly migrate over?
- What are JS/TS eng requirements for the next framework we adopt?
- How does it play with Typescript?
- How does it play with Webpack?
- How does it play with Worksheets?
- In terms of UX patterns, there is essentially no compatibility, but
- (For SCSS, details below)
- How can we minimize friction for devs and enable them to be productive without forcing them to slog through the Carbon(/etc) docs for 3 days before touching the front-end?
- All Hands Intro
- Adding SCSS alias mixins, like `mq`
- Comment more liberally
- To what extent do we use their code vs ours when overlap occurs? (Ours/Theirs/Keep both)
- For utilities SCSS
- Delete our cruft but keep both, consider adding aliases from ours to theirs in `_aliases.scss` to keep a backdoor open
- For layout SCSS
- Theirs for global config and vars
- Ours for `<section>`s and stuff
- For global component SCSS
- Theirs for global components (sidebar/navbar)
- For component SCSS
- Theirs
- For component JS
- Theirs for new, ours for old

## Answered Questions
- Can we just pull it in as a regular NPM dependency, or is it a more opinionated `create-carbon-app` type deal?
- Regular dependency

## Migration Plan
- How to schedule before/after Webpack migration
- Preferably after, but not sure
- Temporarily can use CDN-based CSS to forego need to implement SCSS-loaders based on old Webpack config
- How to schedule in regards to Mayven stories?
- If the majority of their focus will be on boosting responsiveness, let's just import @carbon/grid and whatever specific utilities they'll need for implementing the responsiveness in Carbon. Since this aspect will just be SCSS stuff that is relatively unopinionated and relatively loosely coupled

## Migration Plan
- Let Ops know there will be visual inconsistency during the migration that we cannot list everytime, but UX updates will always be announced
- For a while, _support_, but don't use, all 3 frameworks (Bootstrap, Foundation, Carbon)
- When to use Carbon:
- For brand new components
- When refactoring smaller components
- Refactoring larger components should be done as its own actual task (if at all)

##