Skip to content

Commit 864b4a9

Browse files
KristinLBradleyKristinLBradley
authored
Website - fix Sass warnings (HDS-4262) (#2603)
1 parent 645c901 commit 864b4a9

File tree

19 files changed

+114
-103
lines changed

19 files changed

+114
-103
lines changed

‎website/app/styles/app.scss

+40-40
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,58 @@
55

66
// HDS COMPONENTS
77

8-
@import "@hashicorp/design-system-components";
9-
@import "@hashicorp/design-system-power-select-overrides";
8+
@use "@hashicorp/design-system-components";
9+
@use "@hashicorp/design-system-power-select-overrides";
1010

1111
// Tokens (CSS props)
12-
@import "tokens";
12+
@use "tokens";
1313

1414
// Global declarations
15-
@import "global";
16-
@import "typography";
17-
@import "spacing";
15+
@use "global";
16+
@use "typography";
17+
@use "spacing";
1818

1919
// "Doc" components
20-
@import "doc-components";
20+
@use "doc-components";
2121

2222
// Markdown
23-
@import "markdown";
23+
@use "markdown";
2424

2525
// Page-specific declarations
26-
@import "pages/application"; // main application frame
27-
@import "pages/home"; // homepage (index)
28-
@import "pages/about/principles";
29-
@import "pages/foundations/landing";
30-
@import "pages/foundations/icon";
31-
@import "pages/foundations/typography";
32-
@import "pages/components/accordion";
33-
@import "pages/components/alert";
34-
@import "pages/components/app-footer";
35-
@import "pages/components/application-state";
36-
@import "pages/components/button";
37-
@import "pages/components/code-block";
38-
@import "pages/components/copy-snippet";
39-
@import "pages/components/copy-button";
40-
@import "pages/components/dropdown";
41-
@import "pages/components/flyout";
42-
@import "pages/components/landing";
43-
@import "pages/components/modal";
44-
@import "pages/components/pagination";
45-
@import "pages/components/radio-card";
46-
@import "pages/components/rich-tooltip";
47-
@import "pages/components/side-nav";
48-
@import "pages/components/super-select";
49-
@import "pages/components/table";
50-
@import "pages/components/tabs";
51-
@import "pages/layouts/app-frame";
52-
@import "pages/whats-new/changelog";
53-
@import "pages/patterns/table-multi-select";
54-
@import "pages/patterns/filter-patterns";
55-
@import "pages/utilities/dialog-primitive";
26+
@use "pages/application"; // main application frame
27+
@use "pages/home"; // homepage (index)
28+
@use "pages/about/principles" as about-principles;
29+
@use "pages/foundations/landing" as foundations-landing;
30+
@use "pages/foundations/icon" as foundations-icon;
31+
@use "pages/foundations/typography" as foundations-typography;
32+
@use "pages/components/accordion" as components-accordion;
33+
@use "pages/components/alert" as components-alert;
34+
@use "pages/components/app-footer" as components-app-footer;
35+
@use "pages/components/application-state" as components-application-state;
36+
@use "pages/components/button" as components-button;
37+
@use "pages/components/code-block" as components-code-block;
38+
@use "pages/components/copy-snippet" as components-copy-snippet;
39+
@use "pages/components/copy-button" as components-copy-button;
40+
@use "pages/components/dropdown" as components-dropdown;
41+
@use "pages/components/flyout" as components-flyout;
42+
@use "pages/components/landing" as components-landing;
43+
@use "pages/components/modal" as components-modal;
44+
@use "pages/components/pagination" as components-pagination;
45+
@use "pages/components/radio-card" as components-radio-card;
46+
@use "pages/components/rich-tooltip" as components-rich-tooltip;
47+
@use "pages/components/side-nav" as components-side-nav;
48+
@use "pages/components/super-select" as components-super-select;
49+
@use "pages/components/table" as components-table;
50+
@use "pages/components/tabs" as components-tabs;
51+
@use "pages/layouts/app-frame" as layouts-app-frame;
52+
@use "pages/whats-new/changelog" as whats-new-changelog;
53+
@use "pages/patterns/table-multi-select" as patterns-table-multi-select;
54+
@use "pages/patterns/filter-patterns" as patterns-filter-patterns;
55+
@use "pages/utilities/dialog-primitive" as utilities-dialog-primitive;
5656

5757
// Third-party declarations
58-
@import "prism-dracula";
59-
@import "ember-power-select";
58+
@use "prism-dracula";
59+
@use "ember-power-select";
6060

6161
// GLOBALS
6262

‎website/app/styles/doc-components/algolia-search/index.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55

66
// ALGOLIA AUTOCOMPLETE SEARCH
77

8-
@import "./modal";
9-
@import "./form";
10-
@import "./results";
8+
@use "./modal";
9+
@use "./form";
10+
@use "./results";
1111

1212
// "autocomplete" target container - not used
1313
.doc-algolia-search__autocomplete-container {

‎website/app/styles/doc-components/cards/index.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55

66
// CARDS
77

8-
@import "./deck";
9-
@import "./card";
8+
@use "./deck";
9+
@use "./card";

‎website/app/styles/doc-components/component-api.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
// COMPONENT API
77

88
@use "../breakpoints" as breakpoint;
9-
@use "../typography/mixins";
9+
@use "../typography" as *;
10+
@use "../typography/mixins" as *;
1011

1112

1213
// SET OF PROPERTIES

‎website/app/styles/doc-components/form/index.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
// FORM
77

8-
@import "./label";
9-
@import "./filter";
10-
@import "./select";
8+
@use "./label";
9+
@use "./filter";
10+
@use "./select";
1111

‎website/app/styles/doc-components/index.scss

+23-23
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,26 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
@import "algolia-search";
7-
@import "badge";
8-
@import "banner";
9-
@import "cards";
10-
@import "code-block";
11-
@import "color-card";
12-
@import "color-swatch";
13-
@import "component-api";
14-
@import "copy-button";
15-
@import "do-dont";
16-
@import "font-helpers-list";
17-
@import "form";
18-
@import "icons-list";
19-
@import "image-caption";
20-
@import "layout";
21-
@import "link-with-icon";
22-
@import "meta-row";
23-
@import "placeholder";
24-
@import "scroll-to-top";
25-
@import "table-of-contents";
26-
@import "token-preview";
27-
@import "tokens-list";
28-
@import "vars-list";
6+
@use "algolia-search";
7+
@use "badge";
8+
@use "banner";
9+
@use "cards";
10+
@use "code-block";
11+
@use "color-card";
12+
@use "color-swatch";
13+
@use "component-api";
14+
@use "copy-button";
15+
@use "do-dont";
16+
@use "font-helpers-list";
17+
@use "form";
18+
@use "icons-list";
19+
@use "image-caption";
20+
@use "layout";
21+
@use "link-with-icon";
22+
@use "meta-row";
23+
@use "placeholder";
24+
@use "scroll-to-top";
25+
@use "table-of-contents";
26+
@use "token-preview";
27+
@use "tokens-list";
28+
@use "vars-list";

‎website/app/styles/global/index.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55

66
// GLOBAL STYLES
77

8-
@import "./link";
9-
@import "./lists";
8+
@use "./link";
9+
@use "./lists";

‎website/app/styles/markdown/index.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
@import "./typography";
7-
@import "./lists";
8-
@import "./tables";
9-
@import "./other-elements";
6+
@use "./typography";
7+
@use "./lists";
8+
@use "./tables";
9+
@use "./other-elements";
1010

1111
// debugging
12-
// @import "./debug";
12+
// @use "./debug";

‎website/app/styles/markdown/other-elements.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
@use "../typography/mixins";
7-
@use "../global/link";
6+
@use "../typography" as *;
7+
@use "../typography/mixins" as *;
8+
@use "../global" as *;
9+
@use "../global/link" as *;
810

911
// LINKS
1012

‎website/app/styles/markdown/typography.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
@use "../typography/mixins";
7-
6+
@use "../typography/mixins" as *;
87

98
// HEADINGS
109

‎website/app/styles/pages/about/principles.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,11 @@
3535
}
3636

3737
.doc-content-principles__title {
38-
@include doc-font-style-h3();
3938
margin: 0;
4039
color: var(--doc-color-black);
40+
41+
// Reason for position: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
42+
@include doc-font-style-h3();
4143
}
4244

4345
.doc-content-principles__description {

‎website/app/styles/pages/application/cover.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,11 @@
3737
}
3838

3939
.doc-page-cover__title {
40-
@include doc-font-style-h1();
4140
margin: 0;
4241
color: var(--doc-color-gray-100);
42+
43+
// Reason for position: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
44+
@include doc-font-style-h1();
4345
}
4446

4547

‎website/app/styles/pages/application/index.scss

+10-10
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99

1010
// application parts
1111

12-
@import "./header";
13-
@import "./banner";
14-
@import "./sidebar";
15-
@import "./stage";
16-
@import "./cover";
17-
@import "./tabs";
18-
@import "./content";
19-
@import "./sidecar";
20-
@import "./footer";
21-
@import "./error";
12+
@use "./header";
13+
@use "./banner";
14+
@use "./sidebar";
15+
@use "./stage";
16+
@use "./cover";
17+
@use "./tabs";
18+
@use "./content";
19+
@use "./sidecar";
20+
@use "./footer";
21+
@use "./error";
2222

2323
// globals
2424

‎website/app/styles/pages/components/tabs.scss

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6+
@use "../../typography/mixins" as *;
67

78
// COMPONENTS > APP-FOOTER
89

‎website/app/styles/pages/home.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ body.application.index {
6767
// hero
6868

6969
.doc-page-home__hero {
70+
display: flex;
71+
flex-direction: column;
72+
padding: var(--padding-top) 0 var(--padding-bottom);
73+
74+
// Reason for position: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
7075
@include breakpoint.small() {
7176
--padding-top: 260px; // 200 of decoration on top + 60px of negative space
7277
--padding-bottom: 100px;
@@ -88,10 +93,6 @@ body.application.index {
8893
--tagline-font-size: 1.25rem; // 24px
8994
}
9095

91-
display: flex;
92-
flex-direction: column;
93-
padding: var(--padding-top) 0 var(--padding-bottom);
94-
9596
h1 {
9697
@include doc-font-family("hashicorp-sans");
9798
margin: 0;

‎website/app/styles/pages/whats-new/changelog.scss

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
// WHAT'S NEW > CHANGELOG
77

8+
@use "../../typography/mixins" as *;
89

910
#show-content-whats-new-release-notes {
1011
> section {

‎website/app/styles/prism-dracula.scss

+2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
* This theme has been tweaked to meet HDS needs – see comments for original values
2626
*/
2727

28+
@use "typography/mixins" as *;
29+
2830
// scope theme styles to the docs code block so they don't leak and affect the hds code block
2931
.doc-code-block__code-snippet {
3032
/* Colors */

‎website/app/styles/typography/helpers.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
// TYPOGRAPHIC STYLES (CSS HELPERS)
77

8-
@import "./mixins";
8+
@use "./mixins" as *;
99

1010

1111
// HEADINGS

‎website/app/styles/typography/index.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55

66
// TYPOGRAPHIC STYLES
77

8-
@import "./font-faces";
9-
@import "./mixins";
10-
@import "./helpers";
8+
@use "./font-faces";
9+
@use "./mixins";
10+
@use "./helpers";

0 commit comments

Comments
 (0)