-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unify colors and add styles docs #2069
Conversation
|
- 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this comment is for line 61
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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@use
to@import
in 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.tsx
Related Issue
https://qmacbis.atlassian.net/browse/MCR-3847
Screenshots
QA guidance