Unify colors and add styles docs #2069
Conversation
haworku
changed the title
haworku
changed the title
haworku
changed the title
|
|
- delete dupe mcr-primary-lightest - add -cyan-lighter so info alert banner color included - add more foundation colors (focus, visited) - add more lighter golds used in alerts and banners
|
@macrael @pearl-truss @JasonLin0991 Still waiting for reviews on this from an engineer. Design has taken a look. There are QA steps that I think make this manageable to review. Would like to land this early next week. |
...omponents/SubmissionSummarySection/UploadedDocumentsTable/UploadedDocumentsTable.module.scss
Outdated
Show resolved
Hide resolved
| [class^='usa-step-indicator__header'] { | ||
| display: inline; | ||
| /* ACCESSIBILITY */ | ||
| // Re-useable classname for hiding UI visually but still having it be read by screenreaders |
There was a problem hiding this comment.
I think this comment is for line 61
There was a problem hiding this comment.
I left and then deleted comments related to files having custom and or uswds imports that might not be necessary because it's probably beyond the scope of this PR
I also left some comments on the documentation but overall this looks really good! I really like the use of namespaces for imports and it's much clearer to me what is coming from where
|
|
||
| The `styles/custom.scss` is also the main file imported into components to reference global SCSS variables. This file `@forward`s the MCR color palette and USWDS sass variables to the rest of the application. | ||
|
|
||
| ### `USWDS` is the main design system in use |
There was a problem hiding this comment.
Visually this appears under the "How to Import" heading, is that intentional? I think there's a case for this being broken into its own section
| @@ -0,0 +1,14 @@ | |||
| { | |||
There was a problem hiding this comment.
I haven't been able to get this to work. I enabled vscode-stylelint to test this, are you using something different?
There was a problem hiding this comment.
I was running stylelint in app-web manually npx styelint **/*.scss- let me surface that as a yarn command also and document. It should be hooked into lint-staged as well (precommit script) I'll double check that.
Appreciate that note though. I did just use across every file as you noticed with find and replace - not really caring if its actually used or not. I can clean up that up once this lands in between sprint work. |
…rn lint:style working
There was a problem hiding this comment.
Diff in this file is due to addressing a skipped test that failed lint. I deleted them since they aren't needed. Then prettier ran so things shifted around a bit
|
Thanks for making those changes! And I see the stylelint working on precommit now 🎉 |
Summary
$mcr-*colors everywhere@useto@importin module scss files and move towards namespaced importsNote: There is a new major storybook version (v7) from early 2023 that we should move to eventually. Seemed out of scope for this effort. I imagine we would port the Color storybook over tp e color palette format at that time. For now just copied spaceforce code for our
Colors.stories.tsxRelated Issue
https://qmacbis.atlassian.net/browse/MCR-3847
Screenshots
QA guidance