diff --git a/plopfile.mjs b/plopfile.mjs index 7b0b6cc6ce..87e2b7f99a 100644 --- a/plopfile.mjs +++ b/plopfile.mjs @@ -52,7 +52,7 @@ export default function (plop) { type: 'append', path: 'packages/css/src/components/index.scss', pattern: `/* Append here */`, - template: `@import "./{{kebabCase name}}/{{kebabCase name}}";`, + template: `@use "./{{kebabCase name}}/{{kebabCase name}}";`, }, { type: 'add', diff --git a/proprietary/tokens/README.md b/proprietary/tokens/README.md index abab112e46..cec5539de2 100644 --- a/proprietary/tokens/README.md +++ b/proprietary/tokens/README.md @@ -146,16 +146,22 @@ Note that redefining the value of a token is a much better approach than redecla ## Usage in Sass The tokens can be imported as Sass variables as well. +As they are already prefixed, the namespace that Sass would assign isn’t necessary. ```sass -@import "@amsterdam/design-system-tokens/dist/index.scss" +@use "@amsterdam/design-system-tokens/dist/index.scss" as *; ``` -Import the compact tokens if you need them. -Sass will override spacious values automatically. +Import the compact tokens if needed. +Note that Sass doesn't allow importing them alongside the default set due to naming conflicts. +Address these tokens through the `compact` namespace and do not use the spacious tokens they replace. ```sass -@import "@amsterdam/design-system-tokens/dist/compact.scss" +@use "@amsterdam/design-system-tokens/dist/compact.scss"; + +.class { + padding-block: compact.$ams-space-md; +} ``` ## Usage in JavaScript