Use @use for scss explicit imports (#2820)

addons/core/tests/dummy/app/styles/app.css

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'addon/styles/addons.scss';
+@use 'addon/styles/addons.scss';

addons/rose/README.md

@@ -26,7 +26,7 @@ Boundary UIs.
 
 Add this addon to an Ember application's `devDependencies` as:
 `"rose": "workspace:*"`, for applications included in this monorepo. Application's
-may then import rose styles by adding `@import 'rose';` to their stylesheets.
+may then import rose styles by adding `@use 'rose';` to their stylesheets.
 
 ## Installation
 

addons/rose/addon/styles/addon.scss

@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import '@hashicorp/design-system-components';
-@import 'hds/themes/dark-mode';
-@import 'hds/overrides';
+@use '@hashicorp/design-system-components';
+@use 'hds/themes/dark-mode';
+@use 'hds/overrides';

addons/rose/addon/styles/hds/themes/dark-mode/index.scss

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'color-tokens-tier-2';
+@use 'color-tokens-tier-2';
 
 // HDS Light Mode
 // This is the default HDS color theme.  Only Boundary custom tokens

addons/rose/app/styles/rose/_index.scss

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'reset';
-@import 'variables';
-@import 'typography';
-@import 'components';
+@use 'reset';
+@use 'variables';
+@use 'typography';
+@use 'components';

addons/rose/app/styles/rose/components/_index.scss

@@ -5,18 +5,18 @@
 
 // This list is sorted in ascending order to improve readability
 
-@import 'button';
-@import 'card';
-@import 'cards';
-@import 'code-editor';
-@import 'dialog';
-@import 'dropdown';
-@import 'form';
-@import 'frame';
-@import 'header';
-@import 'layout';
-@import 'list';
-@import 'metadata-list';
-@import 'nav';
-@import 'page-header';
-@import 'toolbar';
+@use 'button';
+@use 'card';
+@use 'cards';
+@use 'code-editor';
+@use 'dialog';
+@use 'dropdown';
+@use 'form';
+@use 'frame';
+@use 'header';
+@use 'layout';
+@use 'list';
+@use 'metadata-list';
+@use 'nav';
+@use 'page-header';
+@use 'toolbar';

addons/rose/app/styles/rose/components/card/_index.scss

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'link';
+@use 'link';

addons/rose/app/styles/rose/components/dialog/_index.scss

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'dialog';
+@use 'dialog';

addons/rose/app/styles/rose/components/dropdown/_index.scss

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'dropdown';
-@import 'button';
-@import 'link';
-@import 'item';
-@import 'section';
-@import 'key-value';
+@use 'dropdown';
+@use 'button';
+@use 'link';
+@use 'item';
+@use 'section';
+@use 'key-value';

addons/rose/app/styles/rose/components/form/_index.scss

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'label';
-@import 'errors';
-@import 'helper-text';
-@import 'input';
-@import 'checkbox';
-@import 'select';
-@import 'fieldset';
+@use 'label';
+@use 'errors';
+@use 'helper-text';
+@use 'input';
+@use 'checkbox';
+@use 'select';
+@use 'fieldset';

addons/rose/app/styles/rose/components/form/_select.scss

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@use '../../variables/sizing';
 @use '../../utilities/type';
+@use '../../variables/sizing';
 
 .rose-form-select {
   margin-bottom: sizing.rems(m);
@@ -22,7 +22,7 @@
   padding: sizing.rems(xs) sizing.rems(xxl) sizing.rems(xs) sizing.rems(xs);
   border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
   border-radius: sizing.rems(xxxs);
-  box-shadow: 0 $size-xxs $size-xxs
+  box-shadow: 0 sizing.rems(xxs) sizing.rems(xxs)
     rgba(var(--stark-components), var(--opacity-2));
   background: var(--ui-gray-subtler-5)
     url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%23525761%22%2F%3E%3C%2Fsvg%3E')

addons/rose/app/styles/rose/components/form/errors/_index.scss

@@ -5,7 +5,7 @@
 
 @use '../../../variables/sizing';
 
-@import 'message';
+@use 'message';
 
 .rose-form-errors {
   margin-bottom: sizing.rems(l);

addons/rose/app/styles/rose/components/header/_dropdown.scss

@@ -5,6 +5,7 @@
 
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use '../../variables/color/sass';
 
 $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
@@ -13,7 +14,7 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23bac1cc' xm
     &,
     &[open] {
       .rose-dropdown-trigger {
-        color: #{color(ui-gray, 300)};
+        color: #{sass.color(ui-gray, 300)};
         background: url($chevron) no-repeat right sizing.rems(s) center;
         background-size: sizing.rems(m);
 

addons/rose/app/styles/rose/components/header/_index.scss

@@ -7,10 +7,10 @@
 @use '../../variables/media';
 @use '../../utilities/type';
 
-@import 'brand';
-@import 'nav';
-@import 'utilities';
-@import 'dropdown';
+@use 'brand';
+@use 'nav';
+@use 'utilities';
+@use 'dropdown';
 
 .rose-header {
   --box-shadow-light: none;

addons/rose/app/styles/rose/components/layout/_index.scss

@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'global';
-@import 'sidebar';
-@import 'page';
-@import 'centered';
-@import 'body-content';
+@use 'global';
+@use 'sidebar';
+@use 'page';
+@use 'centered';
+@use 'body-content';
 
 // TODO:  this is prescriptive and can be removed if it becomes a problem,
 // but used here reflects the fact that the "main" element, of which there

addons/rose/app/styles/rose/components/layout/_sidebar.scss

@@ -5,6 +5,7 @@
 
 @use '../../variables/sizing';
 @use '../../variables/media';
+@use '../../variables/color/sass';
 
 .rose-layout-sidebar {
   --sidebar-width: #{sizing.rems(m) * 16};
@@ -22,7 +23,7 @@
 
   .rose-layout-sidebar-sidebar {
     grid-area: sidebar;
-    background-color: #{color(ui-gray, 950)};
+    background-color: #{sass.color(ui-gray, 950)};
     border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
   }
 

addons/rose/app/styles/rose/components/list/_index.scss

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'key-value';
+@use 'key-value';

addons/rose/app/styles/rose/components/nav/_index.scss

@@ -3,5 +3,5 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'sidebar';
-@import 'tabs';
+@use 'sidebar';
+@use 'tabs';

addons/rose/app/styles/rose/components/nav/_sidebar.scss

@@ -6,6 +6,7 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 @use 'sass:math';
+@use '../../variables/color/sass';
 
 .rose-nav-sidebar {
   $three-px: sizing.rems(xxxs) + sizing.rems(xxxxs);
@@ -13,7 +14,7 @@
 
   padding-top: $y-padding;
   padding-bottom: $y-padding;
-  border-bottom: sizing.rems(xxxxs) solid #{color(ui-gray, 700)};
+  border-bottom: sizing.rems(xxxxs) solid #{sass.color(ui-gray, 700)};
 
   &:last-child {
     border-bottom: 0;
@@ -24,7 +25,7 @@
     @include type.type(xs, semibold);
 
     display: none;
-    color: #{color(ui-gray, 400)};
+    color: #{sass.color(ui-gray, 400)};
     text-transform: uppercase;
 
     $line-height: math.div(20, 12);
@@ -32,7 +33,7 @@
     line-height: $line-height;
     padding: 0 sizing.rems(m);
     margin-bottom: $three-px;
-    border-bottom: sizing.rems(xxxxs) solid #{color(ui-gray, 700)};
+    border-bottom: sizing.rems(xxxxs) solid #{sass.color(ui-gray, 700)};
   }
 
   .rose-nav-link {
@@ -55,13 +56,13 @@
 
     &:hover {
       color: var(--white);
-      background-color: #{color(ui-gray, 800)};
+      background-color: #{sass.color(ui-gray, 800)};
     }
 
     &.active {
       color: var(--white);
-      border-color: #{color(ui-gray, 300)};
-      background-color: #{color(ui-gray, 800)};
+      border-color: #{sass.color(ui-gray, 300)};
+      background-color: #{sass.color(ui-gray, 800)};
     }
   }
 }

addons/rose/app/styles/rose/components/page-header/_index.scss

@@ -3,5 +3,5 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'title';
-@import 'utilities';
+@use 'title';
+@use 'utilities';

addons/rose/app/styles/rose/components/toolbar/_index.scss

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'toolbar';
+@use 'toolbar';

addons/rose/app/styles/rose/variables/_index.scss

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'sizing';
-@import 'typography';
-@import 'color';
-@import 'opacity';
-@import 'media';
+@use 'sizing';
+@use 'typography';
+@use 'color';
+@use 'opacity';
+@use 'media';

addons/rose/app/styles/rose/variables/color/_css.scss

@@ -4,6 +4,7 @@
  */
 
 @use 'sass:color';
+@use 'sass';
 
 /**
  * CSS custom properties defining colors.  These are the color variables that
@@ -13,8 +14,8 @@
 // Light Mode
 @mixin light-mode {
   // absolutes
-  --white: #{color(white)};
-  --black: #{color(black)};
+  --white: #{sass.color(white)};
+  --black: #{sass.color(black)};
   --black-components: 0, 0, 0;
 
   // poles
@@ -23,59 +24,59 @@
   --stark-components: 0, 0, 0;
 
   // brand colors
-  --brand-black: #{brand-color(black)};
-  --brand-white: #{brand-color(white)};
-  --brand-secondary: #{brand-color(secondary)};
-  --brand-gray-7: #{brand-color(gray-7)};
-  --brand-gray-6: #{brand-color(gray-6)};
-  --brand-gray-5: #{brand-color(gray-5)};
-  --brand-gray-4: #{brand-color(gray-4)};
-  --brand-gray-3: #{brand-color(gray-3)};
-  --brand-gray-2: #{brand-color(gray-2)};
-  --brand-gray-1: #{brand-color(gray-1)};
+  --brand-black: #{sass.brand-color(black)};
+  --brand-white: #{sass.brand-color(white)};
+  --brand-secondary: #{sass.brand-color(secondary)};
+  --brand-gray-7: #{sass.brand-color(gray-7)};
+  --brand-gray-6: #{sass.brand-color(gray-6)};
+  --brand-gray-5: #{sass.brand-color(gray-5)};
+  --brand-gray-4: #{sass.brand-color(gray-4)};
+  --brand-gray-3: #{sass.brand-color(gray-3)};
+  --brand-gray-2: #{sass.brand-color(gray-2)};
+  --brand-gray-1: #{sass.brand-color(gray-1)};
 
   // theme colors
-  --info-subtler-3: #{color(blue, 010)};
-  --info-subtler-2: #{color(blue, 100)};
-  --info-subtler-1: #{color(blue, 400)};
-  --info: #{color(blue)};
-  --info-starker-1: #{color(blue, 700)};
-  --info-starker-2: #{color(blue, 800)};
-  --alert-subtler-2: #{color(orange, 010)};
-  --alert-subtler-1: #{color(orange, 100)};
-  --alert: #{color(orange)};
-  --alert-starker-1: #{color(orange, 800)};
-  --warning-subtler-2: #{color(yellow, 010)};
-  --warning-subtler-1: #{color(yellow, 100)};
-  --warning: #{color(yellow)};
-  --warning-starker-1: #{color(yellow, 800)};
-  --failure-subtler-2: #{color(red, 010)};
-  --failure-subtler-1: #{color(red, 100)};
-  --failure: #{color(red)};
-  --failure-starker-1: #{color(red, 800)};
-  --success-subtler-2: #{color(green, 010)};
-  --success-subtler-1: #{color(green, 100)};
-  --success: #{color(green)};
-  --success-starker-1: #{color(green, 800)};
-  --action-subtler-2: #{color(blue, 010)};
-  --action-subtler-1h: #{color(blue, 050)};
-  --action-subtler-1: #{color(blue, 100)};
-  --action: #{color(blue)};
-  --action-starker-1: #{color(blue, 700)};
-  --ui-border-subtler-1: #{color(ui-gray, 200)};
-  --ui-border: #{color(ui-gray, 300)};
-  --ui-gray-subtler-6: #{color(ui-gray, 010)};
-  --ui-gray-subtler-5: #{color(ui-gray, 050)};
-  --ui-gray-subtler-4: #{color(ui-gray, 100)};
-  --ui-gray-subtler-3: #{color(ui-gray, 200)};
-  --ui-gray-subtler-2: #{color(ui-gray, 300)};
-  --ui-gray-subtler-1: #{color(ui-gray, 400)};
-  --ui-gray: #{color(ui-gray)};
-  --ui-gray-starker-1: #{color(ui-gray, 600)};
-  --ui-gray-starker-2: #{color(ui-gray, 700)};
-  --ui-gray-starker-3: #{color(ui-gray, 800)};
-  --ui-gray-starker-4: #{color(ui-gray, 900)};
-  --ui-header-subtler: #{color(ui-cool-gray, 700)};
+  --info-subtler-3: #{sass.color(blue, 010)};
+  --info-subtler-2: #{sass.color(blue, 100)};
+  --info-subtler-1: #{sass.color(blue, 400)};
+  --info: #{sass.color(blue)};
+  --info-starker-1: #{sass.color(blue, 700)};
+  --info-starker-2: #{sass.color(blue, 800)};
+  --alert-subtler-2: #{sass.color(orange, 010)};
+  --alert-subtler-1: #{sass.color(orange, 100)};
+  --alert: #{sass.color(orange)};
+  --alert-starker-1: #{sass.color(orange, 800)};
+  --warning-subtler-2: #{sass.color(yellow, 010)};
+  --warning-subtler-1: #{sass.color(yellow, 100)};
+  --warning: #{sass.color(yellow)};
+  --warning-starker-1: #{sass.color(yellow, 800)};
+  --failure-subtler-2: #{sass.color(red, 010)};
+  --failure-subtler-1: #{sass.color(red, 100)};
+  --failure: #{sass.color(red)};
+  --failure-starker-1: #{sass.color(red, 800)};
+  --success-subtler-2: #{sass.color(green, 010)};
+  --success-subtler-1: #{sass.color(green, 100)};
+  --success: #{sass.color(green)};
+  --success-starker-1: #{sass.color(green, 800)};
+  --action-subtler-2: #{sass.color(blue, 010)};
+  --action-subtler-1h: #{sass.color(blue, 050)};
+  --action-subtler-1: #{sass.color(blue, 100)};
+  --action: #{sass.color(blue)};
+  --action-starker-1: #{sass.color(blue, 700)};
+  --ui-border-subtler-1: #{sass.color(ui-gray, 200)};
+  --ui-border: #{sass.color(ui-gray, 300)};
+  --ui-gray-subtler-6: #{sass.color(ui-gray, 010)};
+  --ui-gray-subtler-5: #{sass.color(ui-gray, 050)};
+  --ui-gray-subtler-4: #{sass.color(ui-gray, 100)};
+  --ui-gray-subtler-3: #{sass.color(ui-gray, 200)};
+  --ui-gray-subtler-2: #{sass.color(ui-gray, 300)};
+  --ui-gray-subtler-1: #{sass.color(ui-gray, 400)};
+  --ui-gray: #{sass.color(ui-gray)};
+  --ui-gray-starker-1: #{sass.color(ui-gray, 600)};
+  --ui-gray-starker-2: #{sass.color(ui-gray, 700)};
+  --ui-gray-starker-3: #{sass.color(ui-gray, 800)};
+  --ui-gray-starker-4: #{sass.color(ui-gray, 900)};
+  --ui-header-subtler: #{sass.color(ui-cool-gray, 700)};
 
   color-scheme: light;
 }
@@ -84,51 +85,51 @@
 @mixin dark-mode {
   // poles
   --subtle: var(--black);
-  --stark: #{color(ui-gray, 100)};
+  --stark: #{sass.color(ui-gray, 100)};
   --stark-components: 255, 255, 255;
 
   // theme colors
-  --info-subtler-3: #{color(blue, 800)};
-  --info-subtler-2: #{color(blue, 700)};
-  --info-subtler-1: #{color(blue, 600)};
-  --info: #{color(blue)};
-  --info-starker-1: #{color(blue, 300)};
-  --info-starker-2: #{color(blue, 200)};
-  --alert-subtler-2: #{color(orange, 900)};
-  --alert-subtler-1: #{color(orange, 800)};
-  --alert: #{color(orange)};
-  --alert-starker-1: #{color(orange, 200)};
-  --warning-subtler-2: #{color(yellow, 900)};
-  --warning-subtler-1: #{color(yellow, 800)};
-  --warning: #{color(yellow)};
-  --warning-starker-1: #{color(yellow, 200)};
-  --failure-subtler-2: #{color(red, 900)};
-  --failure-subtler-1: #{color(red, 800)};
-  --failure: #{color(red, 300)};
-  --failure-starker-1: #{color(red, 200)};
-  --success-subtler-2: #{color(green, 900)};
-  --success-subtler-1: #{color(green, 800)};
-  --success: #{color(green, 700)};
-  --success-starker-1: #{color(green, 400)};
-  --action-subtler-2: #{color.adjust(color(blue, 900), $lightness: -10%)};
-  --action-subtler-1h: #{color.adjust(color(blue, 900), $lightness: -5%)};
-  --action-subtler-1: #{color(blue, 800)};
-  --action: #{color(blue, 400)};
-  --action-starker-1: #{color(blue, 200)};
-  --ui-border-subtler-1: #{color(ui-gray, 800)};
-  --ui-border: #{color(ui-gray, 700)};
-  --ui-gray-subtler-6: #{color(ui-gray, 950)};
-  --ui-gray-subtler-5: #{color(ui-gray, 900)};
-  --ui-gray-subtler-4: #{color(ui-gray, 800)};
-  --ui-gray-subtler-3: #{color(ui-gray, 600)};
-  --ui-gray-subtler-2: #{color(ui-gray, 500)};
-  --ui-gray-subtler-1: #{color(ui-gray, 400)};
-  --ui-gray: #{color(ui-gray, 300)};
-  --ui-gray-starker-1: #{color(ui-gray, 200)};
-  --ui-gray-starker-2: #{color(ui-gray, 100)};
-  --ui-gray-starker-3: #{color(ui-gray, 050)};
-  --ui-gray-starker-4: #{color(ui-gray, 010)};
-  --ui-header-subtler: #{color(ui-cool-gray, 100)};
+  --info-subtler-3: #{sass.color(blue, 800)};
+  --info-subtler-2: #{sass.color(blue, 700)};
+  --info-subtler-1: #{sass.color(blue, 600)};
+  --info: #{sass.color(blue)};
+  --info-starker-1: #{sass.color(blue, 300)};
+  --info-starker-2: #{sass.color(blue, 200)};
+  --alert-subtler-2: #{sass.color(orange, 900)};
+  --alert-subtler-1: #{sass.color(orange, 800)};
+  --alert: #{sass.color(orange)};
+  --alert-starker-1: #{sass.color(orange, 200)};
+  --warning-subtler-2: #{sass.color(yellow, 900)};
+  --warning-subtler-1: #{sass.color(yellow, 800)};
+  --warning: #{sass.color(yellow)};
+  --warning-starker-1: #{sass.color(yellow, 200)};
+  --failure-subtler-2: #{sass.color(red, 900)};
+  --failure-subtler-1: #{sass.color(red, 800)};
+  --failure: #{sass.color(red, 300)};
+  --failure-starker-1: #{sass.color(red, 200)};
+  --success-subtler-2: #{sass.color(green, 900)};
+  --success-subtler-1: #{sass.color(green, 800)};
+  --success: #{sass.color(green, 700)};
+  --success-starker-1: #{sass.color(green, 400)};
+  --action-subtler-2: #{color.adjust(sass.color(blue, 900), $lightness: -10%)};
+  --action-subtler-1h: #{color.adjust(sass.color(blue, 900), $lightness: -5%)};
+  --action-subtler-1: #{sass.color(blue, 800)};
+  --action: #{sass.color(blue, 400)};
+  --action-starker-1: #{sass.color(blue, 200)};
+  --ui-border-subtler-1: #{sass.color(ui-gray, 800)};
+  --ui-border: #{sass.color(ui-gray, 700)};
+  --ui-gray-subtler-6: #{sass.color(ui-gray, 950)};
+  --ui-gray-subtler-5: #{sass.color(ui-gray, 900)};
+  --ui-gray-subtler-4: #{sass.color(ui-gray, 800)};
+  --ui-gray-subtler-3: #{sass.color(ui-gray, 600)};
+  --ui-gray-subtler-2: #{sass.color(ui-gray, 500)};
+  --ui-gray-subtler-1: #{sass.color(ui-gray, 400)};
+  --ui-gray: #{sass.color(ui-gray, 300)};
+  --ui-gray-starker-1: #{sass.color(ui-gray, 200)};
+  --ui-gray-starker-2: #{sass.color(ui-gray, 100)};
+  --ui-gray-starker-3: #{sass.color(ui-gray, 050)};
+  --ui-gray-starker-4: #{sass.color(ui-gray, 010)};
+  --ui-header-subtler: #{sass.color(ui-cool-gray, 100)};
 
   color-scheme: dark;
 }

addons/rose/app/styles/rose/variables/color/_index.scss

@@ -3,5 +3,5 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'sass';
-@import 'css';
+@use 'sass';
+@use 'css';

addons/rose/tests/dummy/app/styles/app.scss

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import 'rose';
+@use 'rose';
 
 .swatches {
   display: flex;

ui/admin/app/styles/app.scss

@@ -7,9 +7,9 @@
 @use 'rose/variables/media';
 @use 'rose/utilities/type';
 
-@import 'rose';
-@import 'notify';
-@import '@hashicorp/ember-asciinema-player';
+@use 'rose';
+@use 'notify';
+@use '@hashicorp/ember-asciinema-player';
 
 .rose-layout-global {
   .rose-layout-global-body {

ui/desktop/app/styles/app.scss

@@ -7,8 +7,8 @@
 @use 'rose/variables/media';
 @use 'rose/utilities/type';
 
-@import 'rose';
-@import 'notify';
+@use 'rose';
+@use 'notify';
 
 .rose-layout-centered {
   > .rose-layout-page {