Skip to content

Commit 1582c62

Browse files
LukeaberLukeaber
committed
Update SASS variables to not use @import statement
1 parent 72a9f6e commit 1582c62

12 files changed

+66
-55
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## sass-variables 1.4.5 (2024-06-24)
2+
3+
- Stop using deprecated @import statements in sass. (by [@Lukeaber](https://github.com/Lukeaber) [#695](https://github.com/puppetlabs/design-system/pull/695))
4+
15
## uikit1.0.18 (2024-06-24)
26

37
- Upgrade dependencies for improved performance and compatibility. (by [@sean-mckenna](https://github.com/sean-mckenna) and [@comfucios](https://github.com/comfucios) in [#676](https://github.com/puppetlabs/design-system/pull/676))

‎packages/design-system-website/styleguide.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '~@puppet/sass-variables/index';
1+
@use '~@puppet/sass-variables' as *;
22

33
/********** Homepage **********/
44

‎packages/design-system-website/styleguideComponents/StyleGuideRenderer.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '~@puppet/sass-variables/index';
1+
@use '~@puppet/sass-variables' as *;
22

33
.app {
44
display: flex;

‎packages/design-system-website/styleguideComponents/TableOfContentsRenderer.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '~@puppet/sass-variables/index';
1+
@use '~@puppet/sass-variables' as *;
22

33
.pds-filter {
44
margin-bottom: 4 * $puppet-common-spacing-base;

‎packages/sass-variables/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Puppet Sass Variables
1+
# Puppet Sass Variables
22

33
Puppet Sass Variables is a set of public Sass variables corresponding to Puppet Design System color palettes, typography, borders, and spacing.
44

@@ -13,15 +13,15 @@ npm install @puppet/sass-variables
1313
Reference the public variables from your Sass files:
1414

1515
```scss
16-
@import '~@puppet/sass-variables/index';
16+
@use '~@puppet/sass-variables' as *;
1717

1818
.my-text {
1919
color: $puppet-amber;
2020
}
2121
```
2222

2323
```scss
24-
@import '~@puppet/sass-variables/index';
24+
@use '~@puppet/sass-variables' as *;
2525

2626
.my-class {
2727
@include puppet-type-body(subtle);
@@ -31,4 +31,4 @@ Reference the public variables from your Sass files:
3131
}
3232
```
3333

34-
See the Sass files for a complete list of common variables and mixins (e.g. [_common.scss](_common.scss), [_typography.scss](_typography.scss), and color [_palettes.scss](_palettes.scss) )
34+
See the Sass files for a complete list of common variables and mixins (e.g. [\_common.scss](_common.scss), [\_typography.scss](_typography.scss), and color [\_palettes.scss](_palettes.scss) )

‎packages/sass-variables/_common.scss

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "palettes";
2+
13
// This file contains variables considered to be part of the outward-facing API
24
// of this library, to be used by consuming apps for one-off components that
35
// still need to be consistent with our overall patterns. This variable set should be
@@ -12,24 +14,24 @@ $puppet-common-border-radius: 4px !default;
1214
$puppet-common-spacing-base: 4px;
1315

1416
// Often used border dividing content
15-
$puppet-common-border: 1px solid $puppet-n400 !default;
16-
$puppet-common-border-subtle: 1px solid $puppet-n300 !default;
17+
$puppet-common-border: 1px solid palettes.$puppet-n400 !default;
18+
$puppet-common-border-subtle: 1px solid palettes.$puppet-n300 !default;
1719

1820
// Often used content backgrounds
19-
$puppet-common-bg: $puppet-white !default;
20-
$puppet-common-bg-subtle: $puppet-n300 !default;
21+
$puppet-common-bg: palettes.$puppet-white !default;
22+
$puppet-common-bg-subtle: palettes.$puppet-n300 !default;
2123

2224
// Common focused element outline, implemented as a box shadow
23-
$puppet-common-focus-outline: 0 0 0 2px $puppet-b300 !default;
25+
$puppet-common-focus-outline: 0 0 0 2px palettes.$puppet-b300 !default;
2426
$puppet-common-focus-outline-inset: inset $puppet-common-focus-outline !default;
2527

2628
$puppet-common-disabled-opacity: 0.4;
2729

28-
$puppet-common-elevation-50: 1px 1px 2px rgba($puppet-black, 0.08);
29-
$puppet-common-elevation-100: 1px 1px 2px rgba($puppet-black, 0.16);
30-
$puppet-common-elevation-150: 2px 2px 4px rgba($puppet-black, 0.16);
31-
$puppet-common-elevation-200: 2px 2px 8px rgba($puppet-black, 0.16);
32-
$puppet-common-elevation-400: 8px 8px 16px rgba($puppet-black, 0.16);
33-
$puppet-common-elevation-800: 8px 8px 32px rgba($puppet-black, 0.16);
30+
$puppet-common-elevation-50: 1px 1px 2px rgba(palettes.$puppet-black, 0.08);
31+
$puppet-common-elevation-100: 1px 1px 2px rgba(palettes.$puppet-black, 0.16);
32+
$puppet-common-elevation-150: 2px 2px 4px rgba(palettes.$puppet-black, 0.16);
33+
$puppet-common-elevation-200: 2px 2px 8px rgba(palettes.$puppet-black, 0.16);
34+
$puppet-common-elevation-400: 8px 8px 16px rgba(palettes.$puppet-black, 0.16);
35+
$puppet-common-elevation-800: 8px 8px 32px rgba(palettes.$puppet-black, 0.16);
3436

3537
$puppet-common-transition-duration: 0.6s;

‎packages/sass-variables/_fonts.scss

+16-14
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
@use "common";
2+
13
@font-face {
24
font-family: 'Open Sans';
35
font-style: normal;
46
font-weight: 400;
5-
src: url('#{$puppet-common-font-path}/OpenSans-Regular.woff2') format('woff2');
7+
src: url('#{common.$puppet-common-font-path}/OpenSans-Regular.woff2') format('woff2');
68
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
79
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
810
U+FEFF, U+FFFD;
@@ -11,7 +13,7 @@
1113
font-family: 'Open Sans';
1214
font-style: italic;
1315
font-weight: 400;
14-
src: url('#{$puppet-common-font-path}/OpenSans-RegularItalic.woff2')
16+
src: url('#{common.$puppet-common-font-path}/OpenSans-RegularItalic.woff2')
1517
format('woff2');
1618
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
1719
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
@@ -21,7 +23,7 @@
2123
font-family: 'Open Sans';
2224
font-style: normal;
2325
font-weight: 600;
24-
src: url('#{$puppet-common-font-path}/OpenSans-Semibold.woff2')
26+
src: url('#{common.$puppet-common-font-path}/OpenSans-Semibold.woff2')
2527
format('woff2');
2628
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
2729
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
@@ -31,7 +33,7 @@
3133
font-family: 'Open Sans';
3234
font-style: italic;
3335
font-weight: 600;
34-
src: url('#{$puppet-common-font-path}/OpenSans-SemiboldItalic.woff2')
36+
src: url('#{common.$puppet-common-font-path}/OpenSans-SemiboldItalic.woff2')
3537
format('woff2');
3638
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
3739
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
@@ -41,7 +43,7 @@
4143
font-family: 'Open Sans';
4244
font-style: normal;
4345
font-weight: 700;
44-
src: url('#{$puppet-common-font-path}/OpenSans-Bold.woff2') format('woff2');
46+
src: url('#{common.$puppet-common-font-path}/OpenSans-Bold.woff2') format('woff2');
4547
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
4648
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
4749
U+FEFF, U+FFFD;
@@ -50,7 +52,7 @@
5052
font-family: 'Open Sans';
5153
font-style: italic;
5254
font-weight: 700;
53-
src: url('#{$puppet-common-font-path}/OpenSans-BoldItalic.woff2')
55+
src: url('#{common.$puppet-common-font-path}/OpenSans-BoldItalic.woff2')
5456
format('woff2');
5557
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
5658
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
@@ -61,17 +63,17 @@
6163
font-style: normal;
6264
font-weight: 600;
6365
src:
64-
url('#{$puppet-common-font-path}/CalibreWeb-Semibold.woff2') format('woff2'),
65-
url('#{$puppet-common-font-path}/CalibreWeb-Semibold.woff') format('woff');
66+
url('#{common.$puppet-common-font-path}/CalibreWeb-Semibold.woff2') format('woff2'),
67+
url('#{common.$puppet-common-font-path}/CalibreWeb-Semibold.woff') format('woff');
6668
}
6769
@font-face {
6870
font-family: Calibre;
6971
font-style: italic;
7072
font-weight: 600;
7173
src:
72-
url('#{$puppet-common-font-path}/CalibreWeb-SemiboldItalic.woff2')
74+
url('#{common.$puppet-common-font-path}/CalibreWeb-SemiboldItalic.woff2')
7375
format('woff2'),
74-
url('#{$puppet-common-font-path}/CalibreWeb-SemiboldItalic.woff')
76+
url('#{common.$puppet-common-font-path}/CalibreWeb-SemiboldItalic.woff')
7577
format('woff');
7678
}
7779

@@ -80,15 +82,15 @@
8082
font-style: normal;
8183
font-weight: 400;
8284
src:
83-
url('#{$puppet-common-font-path}/Inconsolata-Regular.woff2') format('woff2'),
84-
url('#{$puppet-common-font-path}/Inconsolata-Regular.woff') format('woff');
85+
url('#{common.$puppet-common-font-path}/Inconsolata-Regular.woff2') format('woff2'),
86+
url('#{common.$puppet-common-font-path}/Inconsolata-Regular.woff') format('woff');
8587
}
8688

8789
@font-face {
8890
font-family: Inconsolata;
8991
font-style: normal;
9092
font-weight: 700;
9193
src:
92-
url('#{$puppet-common-font-path}/Inconsolata-Bold.woff2') format('woff2'),
93-
url('#{$puppet-common-font-path}/Inconsolata-Bold.woff') format('woff');
94+
url('#{common.$puppet-common-font-path}/Inconsolata-Bold.woff2') format('woff2'),
95+
url('#{common.$puppet-common-font-path}/Inconsolata-Bold.woff') format('woff');
9496
}

‎packages/sass-variables/_index.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@import './palettes';
2-
@import './common';
3-
@import './fonts';
4-
@import './typography';
5-
@import './responsive';
6-
@import './animations';
1+
@forward './palettes';
2+
@forward './common';
3+
@forward './fonts';
4+
@forward './typography';
5+
@forward './responsive';
6+
@forward './animations';

‎packages/sass-variables/_responsive.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $breakpoints: (
1212
@content;
1313
}
1414
} @else {
15-
@warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map-keys($breakpoints)}.";
15+
@warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map.keys($breakpoints)}.";
1616
}
1717
}
1818

@@ -22,6 +22,6 @@ $breakpoints: (
2222
@content;
2323
}
2424
} @else {
25-
@warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map-keys($breakpoints)}.";
25+
@warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map.keys($breakpoints)}.";
2626
}
2727
}

‎packages/sass-variables/_typography.scss

+15-12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "common";
2+
@use "palettes";
3+
14
@use 'sass:map';
25

36
// Common font families
@@ -13,16 +16,16 @@ $puppet-type-weight-heavy: 600 !default;
1316
$puppet-type-spacing-medium: 0.4px !default;
1417

1518
// Common colors
16-
$puppet-type-color-base: $puppet-n900 !default;
17-
$puppet-type-color-medium: $puppet-n700 !default;
18-
$puppet-type-color-subtle: $puppet-n600 !default;
19-
$puppet-type-color-success: $puppet-g700 !default;
20-
$puppet-type-color-warning: $puppet-y600 !default;
21-
$puppet-type-color-danger: $puppet-r600 !default;
22-
$puppet-type-color-link: $puppet-b500 !default;
23-
$puppet-type-color-link-hover: $puppet-b400 !default;
24-
$puppet-type-color-link-active: $puppet-b600 !default;
25-
$puppet-type-color-white: $puppet-white !default;
19+
$puppet-type-color-base: palettes.$puppet-n900 !default;
20+
$puppet-type-color-medium: palettes.$puppet-n700 !default;
21+
$puppet-type-color-subtle: palettes.$puppet-n600 !default;
22+
$puppet-type-color-success: palettes.$puppet-g700 !default;
23+
$puppet-type-color-warning: palettes.$puppet-y600 !default;
24+
$puppet-type-color-danger: palettes.$puppet-r600 !default;
25+
$puppet-type-color-link: palettes.$puppet-b500 !default;
26+
$puppet-type-color-link-hover: palettes.$puppet-b400 !default;
27+
$puppet-type-color-link-active: palettes.$puppet-b600 !default;
28+
$puppet-type-color-white: palettes.$puppet-white !default;
2629

2730
// Map is useful internally for mixins below
2831
$puppet-type-colors: (
@@ -240,7 +243,7 @@ $puppet-type-code-small-font-weight: $puppet-type-weight-normal !default;
240243
}
241244

242245
&:focus {
243-
box-shadow: inset 0 -4px 0 -1px $puppet-b100;
246+
box-shadow: inset 0 -4px 0 -1px palettes.$puppet-b100;
244247
color: $puppet-type-color-link;
245248
text-decoration: none;
246249
}
@@ -253,7 +256,7 @@ $puppet-type-code-small-font-weight: $puppet-type-weight-normal !default;
253256

254257
&:disabled,
255258
&[aria-disabled='true'] {
256-
opacity: $puppet-common-disabled-opacity;
259+
opacity: common.$puppet-common-disabled-opacity;
257260
pointer-events: none;
258261
}
259262
}

‎packages/sass-variables/package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/sass-variables/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@puppet/sass-variables",
3-
"version": "1.4.5",
3+
"version": "2.0.0",
44
"author": "Puppet, Inc.",
55
"license": "Apache-2.0",
66
"scripts": {

0 commit comments

Comments
 (0)