Skip to content

Commit 6938efb

Browse files
alex-jualex-ju
authored
Resolve sass warnings in rollup build (#2594)
1 parent 932f35f commit 6938efb

File tree

10 files changed

+76
-58
lines changed

10 files changed

+76
-58
lines changed

‎.changeset/neat-eels-speak.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hashicorp/design-system-components": patch
3+
---
4+
5+
Fixed deprecated Sass syntax (`map-get` replaced with `map.get` and `@import` with `@use`)

‎packages/components/src/styles/components/badge-count.scss

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
//
99

1010
@use "sass:math";
11+
@use "sass:map";
1112

1213
$hds-badge-count-types: ( "flat","inverted","outlined" );
1314
$hds-badge-count-sizes: ( "small", "medium", "large" );
@@ -52,11 +53,11 @@ $hds-badge-count-size-props: (
5253

5354
@each $size in $hds-badge-count-sizes {
5455
.hds-badge-count--size-#{$size} {
55-
min-height: map-get($hds-badge-count-size-props, $size, "height");
56-
padding: calc(#{map-get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
57-
font-size: map-get($hds-badge-count-size-props, $size, "font-size");
58-
line-height: map-get($hds-badge-count-size-props, $size, "line-height");
59-
border-radius: math.div(map-get($hds-badge-count-size-props, $size, "height"), 2);
56+
min-height: map.get($hds-badge-count-size-props, $size, "height");
57+
padding: calc(#{map.get($hds-badge-count-size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map.get($hds-badge-count-size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
58+
font-size: map.get($hds-badge-count-size-props, $size, "font-size");
59+
line-height: map.get($hds-badge-count-size-props, $size, "line-height");
60+
border-radius: math.div(map.get($hds-badge-count-size-props, $size, "height"), 2);
6061
}
6162
}
6263

‎packages/components/src/styles/components/badge.scss

+11-9
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
// BADGE COMPONENT
88
//
99

10+
@use "sass:map";
11+
1012
$hds-badge-types: ( "flat","inverted","outlined" );
1113
$hds-badge-colors-accents: ( "highlight", "success", "warning", "critical" );
1214
$hds-badge-sizes: ( "small", "medium", "large" );
@@ -87,18 +89,18 @@ $hds-badge-size-props: (
8789

8890
@each $size in $hds-badge-sizes {
8991
.hds-badge--size-#{$size} {
90-
gap: map-get($hds-badge-size-props, $size, "gap");
91-
min-height: map-get($hds-badge-size-props, $size, "height");
92-
padding: calc(#{map-get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
92+
gap: map.get($hds-badge-size-props, $size, "gap");
93+
min-height: map.get($hds-badge-size-props, $size, "height");
94+
padding: calc(#{map.get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map.get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
9395

9496
.hds-badge__icon {
95-
width: map-get($hds-badge-size-props, $size, "icon-size");
96-
height: map-get($hds-badge-size-props, $size, "icon-size");
97+
width: map.get($hds-badge-size-props, $size, "icon-size");
98+
height: map.get($hds-badge-size-props, $size, "icon-size");
9799
}
98100

99101
.hds-badge__text {
100-
font-size: map-get($hds-badge-size-props, $size, "font-size");
101-
line-height: map-get($hds-badge-size-props, $size, "line-height");
102+
font-size: map.get($hds-badge-size-props, $size, "font-size");
103+
line-height: map.get($hds-badge-size-props, $size, "line-height");
102104
}
103105
}
104106
}
@@ -151,13 +153,13 @@ $hds-badge-size-props: (
151153

152154
&.hds-badge--type-inverted {
153155
color: var(--token-color-foreground-high-contrast);
154-
background-color: map-get($hds-badge-colors-props, $color, "inverted-background-color");
156+
background-color: map.get($hds-badge-colors-props, $color, "inverted-background-color");
155157
}
156158

157159
&.hds-badge--type-outlined {
158160
color: var(--token-color-foreground-#{$color});
159161
background-color: transparent;
160-
border-color: map-get($hds-badge-colors-props, $color, "outlined-border-color");
162+
border-color: map.get($hds-badge-colors-props, $color, "outlined-border-color");
161163
}
162164
}
163165
}

‎packages/components/src/styles/components/code-block/index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@use "../../mixins/focus-ring" as *;
1212

1313
// Note: "theme" contains just color variables and syntax highlighting styles
14-
@import "theme";
14+
@use "theme";
1515

1616
// DIMENSIONS
1717
$hds-code-block-line-numbers-width: 49px; // 3em ≈ 49px

‎packages/components/src/styles/components/icon-tile.scss

+14-12
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
// ICON-TILE COMPONENT
88
//
99

10+
@use "sass:map";
11+
1012
$hds-icon-tile-sizes: ( "small", "medium", "large" );
1113
$hds-icon-tile-types: ( "object","resource","logo" );
1214
$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "vault-radar", "waypoint" );
@@ -77,29 +79,29 @@ $hds-icon-tile-size-props: (
7779

7880
@each $size in $hds-icon-tile-sizes {
7981
.hds-icon-tile--size-#{$size} {
80-
width: map-get($hds-icon-tile-size-props, $size, "size");
81-
height: map-get($hds-icon-tile-size-props, $size, "size");
82-
border-radius: map-get($hds-icon-tile-size-props, $size, "border-radius");
82+
width: map.get($hds-icon-tile-size-props, $size, "size");
83+
height: map.get($hds-icon-tile-size-props, $size, "size");
84+
border-radius: map.get($hds-icon-tile-size-props, $size, "border-radius");
8385

8486
.hds-icon-tile__icon {
85-
width: map-get($hds-icon-tile-size-props, $size, "icon-size");
86-
height: map-get($hds-icon-tile-size-props, $size, "icon-size");
87+
width: map.get($hds-icon-tile-size-props, $size, "icon-size");
88+
height: map.get($hds-icon-tile-size-props, $size, "icon-size");
8789
}
8890

8991
.hds-icon-tile__logo {
90-
width: map-get($hds-icon-tile-size-props, $size, "logo-size");
91-
height: map-get($hds-icon-tile-size-props, $size, "logo-size");
92+
width: map.get($hds-icon-tile-size-props, $size, "logo-size");
93+
height: map.get($hds-icon-tile-size-props, $size, "logo-size");
9294
}
9395

9496
.hds-icon-tile__extra {
95-
width: map-get($hds-icon-tile-size-props, $size, "extra-size");
96-
height: map-get($hds-icon-tile-size-props, $size, "extra-size");
97-
border-radius: map-get($hds-icon-tile-size-props, $size, "extra-border-radius");
97+
width: map.get($hds-icon-tile-size-props, $size, "extra-size");
98+
height: map.get($hds-icon-tile-size-props, $size, "extra-size");
99+
border-radius: map.get($hds-icon-tile-size-props, $size, "extra-border-radius");
98100
}
99101

100102
.hds-icon-tile__extra-icon {
101-
width: map-get($hds-icon-tile-size-props, $size, "extra-icon-size");
102-
height: map-get($hds-icon-tile-size-props, $size, "extra-icon-size");
103+
width: map.get($hds-icon-tile-size-props, $size, "extra-icon-size");
104+
height: map.get($hds-icon-tile-size-props, $size, "extra-icon-size");
103105
}
104106
}
105107
}

‎packages/components/src/styles/components/link/standalone.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
// notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
1010
//
1111

12+
@use "sass:map";
1213
@use "../../mixins/focus-ring" as *;
1314

1415
$hds-link-standalone-sizes: ( "small", "medium", "large" );
@@ -67,13 +68,13 @@ $hds-link-standalone-size-props: (
6768
@each $size in $hds-link-standalone-sizes {
6869
.hds-link-standalone--size-#{$size} {
6970
.hds-link-standalone__icon {
70-
width: map-get($hds-link-standalone-size-props, $size, "icon-size");
71-
height: map-get($hds-link-standalone-size-props, $size, "icon-size");
71+
width: map.get($hds-link-standalone-size-props, $size, "icon-size");
72+
height: map.get($hds-link-standalone-size-props, $size, "icon-size");
7273
}
7374

7475
.hds-link-standalone__text {
75-
font-size: map-get($hds-link-standalone-size-props, $size, "font-size");
76-
line-height: map-get($hds-link-standalone-size-props, $size, "line-height");
76+
font-size: map.get($hds-link-standalone-size-props, $size, "font-size");
77+
line-height: map.get($hds-link-standalone-size-props, $size, "line-height");
7778
}
7879
}
7980
}

‎packages/components/src/styles/components/stepper/step-indicator.scss

+14-12
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
// STEPPER > INDICATOR > STEP
88
//
99

10+
@use "sass:map";
11+
1012
$hds-stepper-indicator-step-statuses: (
1113
"incomplete",
1214
"progress",
@@ -84,20 +86,20 @@ $hds-stepper-indicator-step-non-interactive-props: (
8486
// For each status of the non-interactive variant, set the text color, svg fill, and svg stroke colors based on $non-interactive-props
8587
.hds-stepper-indicator-step--status-#{$status} {
8688
.hds-stepper-indicator-step__status {
87-
color: map-get(
89+
color: map.get(
8890
$hds-stepper-indicator-step-non-interactive-props,
8991
$status,
9092
"text-color"
9193
);
9294
}
9395

9496
.hds-stepper-indicator-step__svg-hexagon path {
95-
fill: map-get(
97+
fill: map.get(
9698
$hds-stepper-indicator-step-non-interactive-props,
9799
$status,
98100
"fill-color"
99101
);
100-
stroke: map-get(
102+
stroke: map.get(
101103
$hds-stepper-indicator-step-non-interactive-props,
102104
$status,
103105
"stroke-color"
@@ -155,20 +157,20 @@ $hds-stepper-indicator-step-status-props: (
155157
// For each status set the text, svg fill, and svg stroke color based on $hds-stepper-indicator-step-status-props
156158
&.hds-stepper-indicator-step--status-#{$status} {
157159
.hds-stepper-indicator-step__status {
158-
color: map-get(
160+
color: map.get(
159161
$hds-stepper-indicator-step-status-props,
160162
$status,
161163
"text-color-default"
162164
);
163165
}
164166

165167
.hds-stepper-indicator-step__svg-hexagon path {
166-
fill: map-get(
168+
fill: map.get(
167169
$hds-stepper-indicator-step-status-props,
168170
$status,
169171
"fill-color-default"
170172
);
171-
stroke: map-get(
173+
stroke: map.get(
172174
$hds-stepper-indicator-step-status-props,
173175
$status,
174176
"stroke-color-default"
@@ -178,7 +180,7 @@ $hds-stepper-indicator-step-status-props: (
178180
&:hover,
179181
&.mock-hover {
180182
.hds-stepper-indicator-step__status {
181-
color: map-get(
183+
color: map.get(
182184
$hds-stepper-indicator-step-status-props,
183185
$status,
184186
"text-color-hover"
@@ -187,12 +189,12 @@ $hds-stepper-indicator-step-status-props: (
187189

188190
.hds-stepper-indicator-step__svg-hexagon {
189191
path {
190-
fill: map-get(
192+
fill: map.get(
191193
$hds-stepper-indicator-step-status-props,
192194
$status,
193195
"fill-color-hover"
194196
);
195-
stroke: map-get(
197+
stroke: map.get(
196198
$hds-stepper-indicator-step-status-props,
197199
$status,
198200
"stroke-color-hover"
@@ -204,7 +206,7 @@ $hds-stepper-indicator-step-status-props: (
204206
&:active,
205207
&.mock-active {
206208
.hds-stepper-indicator-step__status {
207-
color: map-get(
209+
color: map.get(
208210
$hds-stepper-indicator-step-status-props,
209211
$status,
210212
"text-color-active"
@@ -213,12 +215,12 @@ $hds-stepper-indicator-step-status-props: (
213215

214216
.hds-stepper-indicator-step__svg-hexagon {
215217
path {
216-
fill: map-get(
218+
fill: map.get(
217219
$hds-stepper-indicator-step-status-props,
218220
$status,
219221
"fill-color-active"
220222
);
221-
stroke: map-get(
223+
stroke: map.get(
222224
$hds-stepper-indicator-step-status-props,
223225
$status,
224226
"stroke-color-active"

‎packages/components/src/styles/components/stepper/task-indicator.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
// STEPPER > INDICATOR > TASK
88
//
99

10+
@use "sass:map";
11+
1012
$hds-stepper-indicator-task-statuses: (
1113
"incomplete",
1214
"progress",
@@ -61,15 +63,15 @@ $hds-stepper-indicator-task-status-props: (
6163
@each $status in $hds-stepper-indicator-task-statuses {
6264
// For each status set the icon color based on the $hds-stepper-indicator-task-status-props
6365
&.hds-stepper-indicator-task--status-#{$status} {
64-
color: map-get(
66+
color: map.get(
6567
$hds-stepper-indicator-task-status-props,
6668
$status,
6769
"color-default"
6870
);
6971

7072
&:hover,
7173
&.mock-hover {
72-
color: map-get(
74+
color: map.get(
7375
$hds-stepper-indicator-task-status-props,
7476
$status,
7577
"color-hover"
@@ -78,7 +80,7 @@ $hds-stepper-indicator-task-status-props: (
7880

7981
&:active,
8082
&.mock-active {
81-
color: map-get(
83+
color: map.get(
8284
$hds-stepper-indicator-task-status-props,
8385
$status,
8486
"color-active"

‎packages/components/src/styles/components/tabs.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
$hds-tabs-sizes: ( "medium", "large" );
1111

12+
@use "sass:map";
1213
@use "../mixins/focus-ring" as *;
1314

1415

@@ -142,12 +143,12 @@ $hds-tabs-size-props: (
142143
@each $size in $hds-tabs-sizes {
143144
.hds-tabs--size-#{$size} {
144145
.hds-tabs__tab {
145-
height: map-get($hds-tabs-size-props, $size, "tab-height");
146-
padding: var(--token-tabs-tab-padding-vertical) map-get($hds-tabs-size-props, $size, "tab-padding-horizontal");
146+
height: map.get($hds-tabs-size-props, $size, "tab-height");
147+
padding: var(--token-tabs-tab-padding-vertical) map.get($hds-tabs-size-props, $size, "tab-padding-horizontal");
147148
}
148149

149150
.hds-tabs__tab-button {
150-
font-size: map-get($hds-tabs-size-props, $size, "tab-font-size");
151+
font-size: map.get($hds-tabs-size-props, $size, "tab-font-size");
151152
}
152153
}
153154
}

‎packages/components/src/styles/mixins/_button.scss

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

6+
@use "sass:map";
7+
68
$hds-button-sizes: ( "small", "medium", "large" );
79
$hds-button-border-radius: 5px;
810
$hds-button-border-width: 1px;
@@ -273,24 +275,24 @@ $hds-button-size-props: (
273275
@mixin hds-button-size-classes($blockName) {
274276
@each $size in $hds-button-sizes {
275277
.#{$blockName}--size-#{$size} {
276-
min-height: map-get($hds-button-size-props, $size, "min-height");
277-
padding: map-get($hds-button-size-props, $size, "padding-vertical") map-get($hds-button-size-props, $size, "padding-horizontal");
278+
min-height: map.get($hds-button-size-props, $size, "min-height");
279+
padding: map.get($hds-button-size-props, $size, "padding-vertical") map.get($hds-button-size-props, $size, "padding-horizontal");
278280

279281
.#{$blockName}__icon {
280-
width: map-get($hds-button-size-props, $size, "icon-size");
281-
height: map-get($hds-button-size-props, $size, "icon-size");
282+
width: map.get($hds-button-size-props, $size, "icon-size");
283+
height: map.get($hds-button-size-props, $size, "icon-size");
282284
}
283285

284286
.#{$blockName}__text {
285-
font-size: map-get($hds-button-size-props, $size, "font-size");
286-
line-height: map-get($hds-button-size-props, $size, "line-height");
287+
font-size: map.get($hds-button-size-props, $size, "font-size");
288+
line-height: map.get($hds-button-size-props, $size, "line-height");
287289
}
288290

289291
&.#{$blockName}--is-icon-only {
290292
// overrides to have the icon-only button squared
291-
min-width: map-get($hds-button-size-props, $size, "min-height");
292-
padding-right: map-get($hds-button-size-props, $size, "padding-vertical");
293-
padding-left: map-get($hds-button-size-props, $size, "padding-vertical");
293+
min-width: map.get($hds-button-size-props, $size, "min-height");
294+
padding-right: map.get($hds-button-size-props, $size, "padding-vertical");
295+
padding-left: map.get($hds-button-size-props, $size, "padding-vertical");
294296
}
295297
}
296298
}

0 commit comments

Comments
 (0)