diff --git a/change/@fluentui-react-theme-sass-52978fdc-fb87-42a2-867b-da784f7bd800.json b/change/@fluentui-react-theme-sass-52978fdc-fb87-42a2-867b-da784f7bd800.json new file mode 100644 index 00000000000000..a7deec78265868 --- /dev/null +++ b/change/@fluentui-react-theme-sass-52978fdc-fb87-42a2-867b-da784f7bd800.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Replace @import with @forward", + "packageName": "@fluentui/react-theme-sass", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-theme-sass/README.md b/packages/react-components/react-theme-sass/README.md index 42c26f914e6e7b..696769302413af 100644 --- a/packages/react-components/react-theme-sass/README.md +++ b/packages/react-components/react-theme-sass/README.md @@ -21,10 +21,22 @@ ReactDOM.render( ); ``` -2. In SCSS styles you can import SCSS variables from `@fluentui/react-theme-sass` and use them in the styles: +2. In SCSS styles you can `@use` SASS variables from `@fluentui/react-theme-sass`. ```scss -@import '@fluentui/react-theme-sass'; +// With a namespace +@use '@fluentui/react-theme-sass/sass/tokens' as 'fluentTokens'; + +.brandedElement { + color: fluentTokens.colorBrandForeground1; + background: fluentTokens.colorBrandBackground; + border-radius: fluentTokens.borderRadiusLarge; +} +``` + +```scss +// Without a namespace +@use '@fluentui/react-theme-sass/sass/tokens' as *; .brandedElement { color: $colorBrandForeground1; diff --git a/packages/react-components/react-theme-sass/sass/tokens.scss b/packages/react-components/react-theme-sass/sass/tokens.scss index 24e655da70dbcc..a28079da9cac7f 100644 --- a/packages/react-components/react-theme-sass/sass/tokens.scss +++ b/packages/react-components/react-theme-sass/sass/tokens.scss @@ -1,9 +1,9 @@ -@import 'borderRadiusTokens'; -@import 'colorPaletteTokens'; -@import 'colorTokens'; -@import 'curveTokens'; -@import 'durationTokens'; -@import 'fontTokens'; -@import 'shadowTokens'; -@import 'spacingTokens'; -@import 'strokeWidthTokens'; +@forward 'borderRadiusTokens'; +@forward 'colorPaletteTokens'; +@forward 'colorTokens'; +@forward 'curveTokens'; +@forward 'durationTokens'; +@forward 'fontTokens'; +@forward 'shadowTokens'; +@forward 'spacingTokens'; +@forward 'strokeWidthTokens';