Skip to content

Commit

Permalink
Move towards @use in each module.scss file. Document that @import wi…
Browse files Browse the repository at this point in the history
…ll be deprecated.
  • Loading branch information
haworku committed Dec 26, 2023
1 parent b774420 commit 2b21df2
Show file tree
Hide file tree
Showing 50 changed files with 388 additions and 374 deletions.
11 changes: 10 additions & 1 deletion docs/technical-design/howto-style-css-scss.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ We currently have ~three types of containers in the application. See our `custom

Make sure heading levels (`h2`, `h3` etc) are properly used for text content. There are clear [guidelines](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) around heading levels to follow. For example, page titles should always have some kind of heading, use only one h1 per page, headings should be nested by level, etc. If the heading is not styled the way you expect by default, CSS can be used to override things like font weight, size, etc. If you are noticing something with heading that need to be overridden across the app, this likely calls for global styles.

Note also that there is a specific color to be used for links (`$mcr-foundation-link`) and hint text (`$mcr-foundation-hint`).
Note also that there is a specific color to be used for links (`$$mcr-foundation-link`) and hint text (`$mcr-foundation-hint`).

## Patterns and technologies related to styles in MC-Review

Expand All @@ -38,7 +38,16 @@ Example of scoped styles:
- Shared styles live close to the workflow they apply to. For example, directories in `/pages` folder may share a `*.module.scss` stylesheet if needed for templates in that area of the application. CSS selectors should be used to further scope down styles.
- Re-useable atomic components (see `/components` folder) have self contained styles. There is a named `*.module.scss` file for each component.

## How to import
- Prefer namespaced scss imports with [`@use`](https://sass-lang.com/documentation/at-rules/use/) over [`@import`](https://sass-lang.com/documentation/at-rules/import/) for scss to reduce loading styles multiple times. Sass team is deprecating [`@import`](https://github.com/sass/sass/blob/main/accepted/module-system.md#timeline).

In `*.module.scss` files this looks like (at top of file):
```
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;
```

and then referring to varibles and mixins inline with the [namespace](https://sass-lang.com/documentation/at-rules/use/#choosing-a-namespace) - such as `custom.$mcr-foundation-white` or `@include uswds.uswds-at-media(tablet)`
#### When to use global overrides

Global styles live in a single file (`overrides.scss`). This should be used sparingly.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use '../../styles/uswdsImports.scss';
@use '../../styles/custom.scss' as *;
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

// preferred way to show a button that is disabled. avoid cursor: none
.disabledCursor {
Expand All @@ -16,11 +16,11 @@
}

.successButton {
background: $mcr-success-base;
background: custom.$mcr-success-base;
&:hover {
background-color: $mcr-success-hover !important;
background-color: custom.$mcr-success-hover !important;
}
&:active {
background-color: $mcr-success-hover !important;
background-color: custom.$mcr-success-hover !important;
}
}
4 changes: 2 additions & 2 deletions services/app-web/src/components/Banner/Banner.module.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.bannerBodyText {
p {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import '../../styles/uswdsImports.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.crumbContainer {
margin-top: 1em;
Expand All @@ -8,7 +9,7 @@
[class^='usa-breadcrumb'] {
li:last-child a {
text-decoration: none;
color: $theme-color-base-ink;
color: custom.$mcr-foundation-ink
}
}
}
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.summarySection {
background: $mcr-foundation-white;
line-height: units(3);
@include u-radius('md');
background: custom.$mcr-foundation-white;
line-height: uswds.units(3);
@include uswds.u-radius('md');

h2 {
margin: 0;
@include u-text('normal');
@include uswds.u-text('normal');
}
&:first-of-type {
h2 {
@include u-text('bold');
@include uswds.u-text('bold');
font-size: size('body', 'lg');
}
}
Expand Down
60 changes: 30 additions & 30 deletions services/app-web/src/components/Colors/Colors.module.scss
Original file line number Diff line number Diff line change
@@ -1,51 +1,51 @@
@use '../../styles/custom.scss' as *;
@use '../../styles/custom.scss' as custom;

:export {
mcr: {
primary: {
lightest: $mcr-primary-lightest;
lighter: $mcr-primary-lighter;
light: $mcr-primary-light;
base: $mcr-primary-base;
dark: $mcr-primary-dark;
darkest: $mcr-primary-darkest;
lightest: custom.$mcr-primary-lightest;
lighter: custom.$mcr-primary-lighter;
light: custom.$mcr-primary-light;
base: custom.$mcr-primary-base;
dark: custom.$mcr-primary-dark;
darkest: custom.$mcr-primary-darkest;
}
cmsblue: {
lightest: $mcr-cmsblue-lightest;
base: $mcr-cmsblue-base;
dark: $mcr-cmsblue-dark;
darkest: $mcr-cmsblue-darkest;
lightest: custom.$mcr-cmsblue-lightest;
base: custom.$mcr-cmsblue-base;
dark: custom.$mcr-cmsblue-dark;
darkest: custom.$mcr-cmsblue-darkest;
}
cyan: {
light: $mcr-cyan-light;
base: $mcr-cyan-base;
dark: $mcr-cyan-dark;
light: custom.$mcr-cyan-light;
base: custom.$mcr-cyan-base;
dark: custom.$mcr-cyan-dark;
}
gold: {
base: $mcr-gold-base;
dark: $mcr-gold-dark;
darker: $mcr-gold-darker;
base: custom.$mcr-gold-base;
dark: custom.$mcr-gold-dark;
darker: custom.$mcr-gold-darker;
}
gray: {
dark: $mcr-gray-dark;
base : $mcr-gray-base;
lighter: $mcr-gray-lighter;
lightest: $mcr-gray-lightest;
dark: custom.$mcr-gray-dark;
base : custom.$mcr-gray-base;
lighter: custom.$mcr-gray-lighter;
lightest: custom.$mcr-gray-lightest;
}
foundation: {
white: $mcr-foundation-white;
hint: $mcr-foundation-hint;
link: $mcr-foundation-link;
ink : $mcr-foundation-ink;
white: custom.$mcr-foundation-white;
hint: custom.$mcr-foundation-hint;
link: custom.$mcr-foundation-link;
ink : custom.$mcr-foundation-ink;
}
success: {
base: $mcr-success-base;
hover: $mcr-success-hover;
dark: $mcr-success-dark;
base: custom.$mcr-success-base;
hover: custom.$mcr-success-hover;
dark: custom.$mcr-success-dark;
}
error: {
light: $mcr-error-light;
base: $mcr-error-base;
light: custom.$mcr-error-light;
base: custom.$mcr-error-base;

}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.dataDetail {
margin-bottom: units(4);
margin-bottom: uswds.units(4);

@include at-media(tablet) {
@include uswds.at-media(tablet) {
margin-bottom: 0;
}

Expand All @@ -21,7 +21,7 @@
}

.missingInfo {
color: #b50909;
color: custom.$mcr-error-base;
font-weight: 700;
display: flex;
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@import '../../../styles/uswdsImports.scss';
@import '../../../styles/custom.scss';
@use '../../../styles/custom.scss' as custom;
@use '../../../styles/uswdsImports.scss' as uswds;

.missingInfo {
color: $mcr-gold-darker;
color: custom.$mcr-gold-darker;
font-weight: 700;
display: flex;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.row {
@include at-media(tablet) {
margin-bottom: units(2);
@include uswds.at-media(tablet) {
margin-bottom: uswds.units(2);
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.disabledCursor {
cursor: not-allowed;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.messageBodyText{
p {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.expandableBlock {
line-height: initial;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.warningRow {
& td {
Expand All @@ -8,7 +8,7 @@
}

.fileInputError {
background-color: $mcr-error-light;
background-color: custom.$mcr-error-light;
}

.loadingImage {
Expand All @@ -28,21 +28,21 @@
.fileInputHint {
display: flex;
flex-direction: column;
color: $mcr-foundation-hint;
color: custom.$mcr-foundation-hint;
margin-bottom: 0.5rem;
}

.requiredOptionalText {
display: block;
color: $mcr-foundation-hint;
color: custom.$mcr-foundation-hint;
}

.fileSummary {
font-weight: normal;
@include u-font('sans', 'sm');
@include u-padding(1);
@include u-margin-y(1px);
background: $mcr-primary-light;
@include uswds.u-font('sans', 'sm');
@include uswds.u-padding(1);
@include uswds.u-margin-y(1px);
background: custom.$mcr-primary-light;
}

.fileItemsList {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.filterTitle {
font-weight: bold;
Expand All @@ -14,7 +14,7 @@

.filterAccordion {
[class*='usa-accordion__content'] {
background: $mcr-gray-lightest;
background: custom.$mcr-gray-lightest;
overflow: visible;
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import '../../../styles/uswdsImports.scss';
@import '../../../styles/custom.scss';
@use '../../../styles/custom.scss' as custom;
@use '../../../styles/uswdsImports.scss' as uswds;

.dateRangePicker {
[class='usa-label'] {
Expand Down
22 changes: 11 additions & 11 deletions services/app-web/src/components/Footer/Footer.module.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@import '../../styles/uswdsImports.scss';
@import '../../styles/custom.scss';
@use '../../styles/custom.scss' as custom;
@use '../../styles/uswdsImports.scss' as uswds;

.logosRow {
background-color: $mcr-cmsblue-lightest;
background-color: custom.$mcr-cmsblue-lightest;
& img,
svg {
padding-right: units(4);
padding-right: uswds.units(4);
flex-shrink: 0;
height: 50px;
width: auto;
Expand All @@ -21,27 +21,27 @@
align-items: center;
display: flex;
flex-wrap: wrap;
padding: units(2);
padding: uswds.units(2);
justify-content: flex-end;
> span {
max-width: 300px;
}
}

.contactRow {
background-color: $mcr-cmsblue-base;
color: $mcr-foundation-white;
padding: units(3) 0;
background-color: custom.$mcr-cmsblue-base;
color: custom.$mcr-foundation-white;
padding: uswds.units(3) 0;
> span {
margin: units(1);
margin: uswds.units(1);
}
a {
color: $mcr-foundation-white;
color: custom.$mcr-foundation-white;

&:hover,
&:active,
&:visited {
color: $mcr-foundation-white;
color: custom.$mcr-foundation-white;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import '../../../styles/uswdsImports.scss';
@import '../../../styles/custom.scss';

@use '../../../styles/custom.scss' as custom;
@use '../../../styles/uswdsImports.scss' as uswds;
.message {
a {
border: 0;
Expand All @@ -10,7 +9,7 @@
font-weight: normal;
text-align: left;
&, &:visited {
color: $mcr-foundation-ink;
color: custom.$mcr-foundation-ink;
}
}
}
Expand Down
Loading

0 comments on commit 2b21df2

Please sign in to comment.