Update SASS variables to not use @import statement

Lukeaber · Lukeaber · commit 7a0a8fb7850d · 2025-03-25T11:00:00.000Z
diff --git a/packages/design-system-website/styleguide.scss b/packages/design-system-website/styleguide.scss
@@ -1,4 +1,4 @@
-@import '~@puppet/sass-variables/index';
+@use '~@puppet/sass-variables' as *;
 
 /********** Homepage **********/
 
diff --git a/packages/design-system-website/styleguideComponents/StyleGuideRenderer.scss b/packages/design-system-website/styleguideComponents/StyleGuideRenderer.scss
@@ -1,4 +1,4 @@
-@import '~@puppet/sass-variables/index';
+@use '~@puppet/sass-variables' as *;
 
 .app {
   display: flex;
diff --git a/packages/design-system-website/styleguideComponents/TableOfContentsRenderer.scss b/packages/design-system-website/styleguideComponents/TableOfContentsRenderer.scss
@@ -1,4 +1,4 @@
-@import '~@puppet/sass-variables/index';
+@use '~@puppet/sass-variables' as *;
 
 .pds-filter {
   margin-bottom: 4 * $puppet-common-spacing-base;
diff --git a/packages/sass-variables/README.md b/packages/sass-variables/README.md
@@ -1,4 +1,4 @@
-# Puppet  Sass Variables
+# Puppet Sass Variables
 
 Puppet Sass Variables is a set of public Sass variables corresponding to Puppet Design System color palettes, typography, borders, and spacing.
 
@@ -13,15 +13,15 @@ npm install @puppet/sass-variables
 Reference the public variables from your Sass files:
 
 ```scss
-@import '~@puppet/sass-variables/index';
+@use '~@puppet/sass-variables' as *;
 
 .my-text {
   color: $puppet-amber;
 }
 ```
 
 ```scss
-@import '~@puppet/sass-variables/index';
+@use '~@puppet/sass-variables' as *;
 
 .my-class {
   @include puppet-type-body(subtle);
@@ -31,4 +31,4 @@ Reference the public variables from your Sass files:
 }
 ```
 
-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) )
+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) )
diff --git a/packages/sass-variables/_common.scss b/packages/sass-variables/_common.scss
@@ -1,3 +1,5 @@
+@use "palettes";
+
 // This file contains variables considered to be part of the outward-facing API
 // of this library, to be used by consuming apps for one-off components that
 // still need to be consistent with our overall patterns. This variable set should be
@@ -12,24 +14,24 @@ $puppet-common-border-radius: 4px !default;
 $puppet-common-spacing-base: 4px;
 
 // Often used border dividing content
-$puppet-common-border: 1px solid $puppet-n400 !default;
-$puppet-common-border-subtle: 1px solid $puppet-n300 !default;
+$puppet-common-border: 1px solid palettes.$puppet-n400 !default;
+$puppet-common-border-subtle: 1px solid palettes.$puppet-n300 !default;
 
 // Often used content backgrounds
-$puppet-common-bg: $puppet-white !default;
-$puppet-common-bg-subtle: $puppet-n300 !default;
+$puppet-common-bg: palettes.$puppet-white !default;
+$puppet-common-bg-subtle: palettes.$puppet-n300 !default;
 
 // Common focused element outline, implemented as a box shadow
-$puppet-common-focus-outline: 0 0 0 2px $puppet-b300 !default;
+$puppet-common-focus-outline: 0 0 0 2px palettes.$puppet-b300 !default;
 $puppet-common-focus-outline-inset: inset $puppet-common-focus-outline !default;
 
 $puppet-common-disabled-opacity: 0.4;
 
-$puppet-common-elevation-50: 1px 1px 2px rgba($puppet-black, 0.08);
-$puppet-common-elevation-100: 1px 1px 2px rgba($puppet-black, 0.16);
-$puppet-common-elevation-150: 2px 2px 4px rgba($puppet-black, 0.16);
-$puppet-common-elevation-200: 2px 2px 8px rgba($puppet-black, 0.16);
-$puppet-common-elevation-400: 8px 8px 16px rgba($puppet-black, 0.16);
-$puppet-common-elevation-800: 8px 8px 32px rgba($puppet-black, 0.16);
+$puppet-common-elevation-50: 1px 1px 2px rgba(palettes.$puppet-black, 0.08);
+$puppet-common-elevation-100: 1px 1px 2px rgba(palettes.$puppet-black, 0.16);
+$puppet-common-elevation-150: 2px 2px 4px rgba(palettes.$puppet-black, 0.16);
+$puppet-common-elevation-200: 2px 2px 8px rgba(palettes.$puppet-black, 0.16);
+$puppet-common-elevation-400: 8px 8px 16px rgba(palettes.$puppet-black, 0.16);
+$puppet-common-elevation-800: 8px 8px 32px rgba(palettes.$puppet-black, 0.16);
 
 $puppet-common-transition-duration: 0.6s;
diff --git a/packages/sass-variables/_fonts.scss b/packages/sass-variables/_fonts.scss
@@ -1,8 +1,10 @@
+@use "common";
+
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: url('#{$puppet-common-font-path}/OpenSans-Regular.woff2') format('woff2');
+  src: url('#{common.$puppet-common-font-path}/OpenSans-Regular.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
@@ -11,7 +13,7 @@
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 400;
-  src: url('#{$puppet-common-font-path}/OpenSans-RegularItalic.woff2')
+  src: url('#{common.$puppet-common-font-path}/OpenSans-RegularItalic.woff2')
     format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
@@ -21,7 +23,7 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: url('#{$puppet-common-font-path}/OpenSans-Semibold.woff2')
+  src: url('#{common.$puppet-common-font-path}/OpenSans-Semibold.woff2')
     format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
@@ -31,7 +33,7 @@
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 600;
-  src: url('#{$puppet-common-font-path}/OpenSans-SemiboldItalic.woff2')
+  src: url('#{common.$puppet-common-font-path}/OpenSans-SemiboldItalic.woff2')
     format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
@@ -41,7 +43,7 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
-  src: url('#{$puppet-common-font-path}/OpenSans-Bold.woff2') format('woff2');
+  src: url('#{common.$puppet-common-font-path}/OpenSans-Bold.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
@@ -50,7 +52,7 @@
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 700;
-  src: url('#{$puppet-common-font-path}/OpenSans-BoldItalic.woff2')
+  src: url('#{common.$puppet-common-font-path}/OpenSans-BoldItalic.woff2')
     format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
@@ -61,17 +63,17 @@
   font-style: normal;
   font-weight: 600;
   src:
-    url('#{$puppet-common-font-path}/CalibreWeb-Semibold.woff2') format('woff2'),
-    url('#{$puppet-common-font-path}/CalibreWeb-Semibold.woff') format('woff');
+    url('#{common.$puppet-common-font-path}/CalibreWeb-Semibold.woff2') format('woff2'),
+    url('#{common.$puppet-common-font-path}/CalibreWeb-Semibold.woff') format('woff');
 }
 @font-face {
   font-family: Calibre;
   font-style: italic;
   font-weight: 600;
   src:
-    url('#{$puppet-common-font-path}/CalibreWeb-SemiboldItalic.woff2')
+    url('#{common.$puppet-common-font-path}/CalibreWeb-SemiboldItalic.woff2')
     format('woff2'),
-    url('#{$puppet-common-font-path}/CalibreWeb-SemiboldItalic.woff')
+    url('#{common.$puppet-common-font-path}/CalibreWeb-SemiboldItalic.woff')
     format('woff');
 }
 
@@ -80,15 +82,15 @@
   font-style: normal;
   font-weight: 400;
   src:
-    url('#{$puppet-common-font-path}/Inconsolata-Regular.woff2') format('woff2'),
-    url('#{$puppet-common-font-path}/Inconsolata-Regular.woff') format('woff');
+    url('#{common.$puppet-common-font-path}/Inconsolata-Regular.woff2') format('woff2'),
+    url('#{common.$puppet-common-font-path}/Inconsolata-Regular.woff') format('woff');
 }
 
 @font-face {
   font-family: Inconsolata;
   font-style: normal;
   font-weight: 700;
   src:
-    url('#{$puppet-common-font-path}/Inconsolata-Bold.woff2') format('woff2'),
-    url('#{$puppet-common-font-path}/Inconsolata-Bold.woff') format('woff');
+    url('#{common.$puppet-common-font-path}/Inconsolata-Bold.woff2') format('woff2'),
+    url('#{common.$puppet-common-font-path}/Inconsolata-Bold.woff') format('woff');
 }
diff --git a/packages/sass-variables/_index.scss b/packages/sass-variables/_index.scss
@@ -1,6 +1,6 @@
-@import './palettes';
-@import './common';
-@import './fonts';
-@import './typography';
-@import './responsive';
-@import './animations';
+@forward './palettes';
+@forward './common';
+@forward './fonts';
+@forward './typography';
+@forward './responsive';
+@forward './animations';
diff --git a/packages/sass-variables/_responsive.scss b/packages/sass-variables/_responsive.scss
@@ -12,7 +12,7 @@ $breakpoints: (
       @content;
     }
   } @else {
-    @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map-keys($breakpoints)}.";
+    @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map.keys($breakpoints)}.";
   }
 }
 
@@ -22,6 +22,6 @@ $breakpoints: (
       @content;
     }
   } @else {
-    @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map-keys($breakpoints)}.";
+    @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map.keys($breakpoints)}.";
   }
 }
diff --git a/packages/sass-variables/_typography.scss b/packages/sass-variables/_typography.scss
@@ -1,3 +1,6 @@
+@use "common";
+@use "palettes";
+
 @use 'sass:map';
 
 // Common font families
@@ -13,16 +16,16 @@ $puppet-type-weight-heavy: 600 !default;
 $puppet-type-spacing-medium: 0.4px !default;
 
 // Common colors
-$puppet-type-color-base: $puppet-n900 !default;
-$puppet-type-color-medium: $puppet-n700 !default;
-$puppet-type-color-subtle: $puppet-n600 !default;
-$puppet-type-color-success: $puppet-g700 !default;
-$puppet-type-color-warning: $puppet-y600 !default;
-$puppet-type-color-danger: $puppet-r600 !default;
-$puppet-type-color-link: $puppet-b500 !default;
-$puppet-type-color-link-hover: $puppet-b400 !default;
-$puppet-type-color-link-active: $puppet-b600 !default;
-$puppet-type-color-white: $puppet-white !default;
+$puppet-type-color-base: palettes.$puppet-n900 !default;
+$puppet-type-color-medium: palettes.$puppet-n700 !default;
+$puppet-type-color-subtle: palettes.$puppet-n600 !default;
+$puppet-type-color-success: palettes.$puppet-g700 !default;
+$puppet-type-color-warning: palettes.$puppet-y600 !default;
+$puppet-type-color-danger: palettes.$puppet-r600 !default;
+$puppet-type-color-link: palettes.$puppet-b500 !default;
+$puppet-type-color-link-hover: palettes.$puppet-b400 !default;
+$puppet-type-color-link-active: palettes.$puppet-b600 !default;
+$puppet-type-color-white: palettes.$puppet-white !default;
 
 // Map is useful internally for mixins below
 $puppet-type-colors: (
@@ -240,7 +243,7 @@ $puppet-type-code-small-font-weight: $puppet-type-weight-normal !default;
   }
 
   &:focus {
-    box-shadow: inset 0 -4px 0 -1px $puppet-b100;
+    box-shadow: inset 0 -4px 0 -1px palettes.$puppet-b100;
     color: $puppet-type-color-link;
     text-decoration: none;
   }
@@ -253,7 +256,7 @@ $puppet-type-code-small-font-weight: $puppet-type-weight-normal !default;
 
   &:disabled,
   &[aria-disabled='true'] {
-    opacity: $puppet-common-disabled-opacity;
+    opacity: common.$puppet-common-disabled-opacity;
     pointer-events: none;
   }
 }
diff --git a/packages/sass-variables/package-lock.json b/packages/sass-variables/package-lock.json
diff --git a/packages/sass-variables/package.json b/packages/sass-variables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@puppet/sass-variables",
-  "version": "1.4.5",
+  "version": "2.0.0",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "scripts": {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '~@puppet/sass-variables/index';`
	`1`	`+@use '~@puppet/sass-variables' as *;`
`2`	`2`
`3`	`3`	`/******** Homepage ********/`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ $breakpoints: (`
`12`	`12`	`@content;`
`13`	`13`	`}`
`14`	`14`	`} @else {`
`15`		`- @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map-keys($breakpoints)}.";`
	`15`	`+ @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map.keys($breakpoints)}.";`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`
`@@ -22,6 +22,6 @@ $breakpoints: (`
`22`	`22`	`@content;`
`23`	`23`	`}`
`24`	`24`	`} @else {`
`25`		`- @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map-keys($breakpoints)}.";`
	`25`	`+ @warn "Unrecognized breakpoint '#{$breakpoint}'. Available breakpoints are: #{map.keys($breakpoints)}.";`
`26`	`26`	`}`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@puppet/sass-variables",`
`3`		`- "version": "1.4.5",`
	`3`	`+ "version": "2.0.0",`
`4`	`4`	`"author": "Puppet, Inc.",`
`5`	`5`	`"license": "Apache-2.0",`
`6`	`6`	`"scripts": {`