From 4f4409e22b495b0d479a40e2623846613ea55bdb Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 20 Dec 2024 11:36:16 +0100 Subject: [PATCH 1/2] chore: Use Sass @use in plop template and README (#1793) Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- plopfile.mjs | 2 +- proprietary/tokens/README.md | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) 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 From 122d15b0bcb13352dcc45d03ebaa9a6ea1ebad3a Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 20 Dec 2024 11:40:57 +0100 Subject: [PATCH 2/2] chore: Sort imports and exports in index files of Sass and React (#1796) Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/components/index.scss | 86 +++++++++++------------ packages/react/src/index.ts | 94 +++++++++++++------------- 2 files changed, 90 insertions(+), 90 deletions(-) diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index f8417eaa30..0b52b1e570 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,67 +4,67 @@ */ /* Append here */ -@use "file-list/file-list"; -@use "action-group/action-group"; -@use "breakout/breakout"; -@use "hint/hint"; -@use "password-input/password-input"; -@use "form-error-list/form-error-list"; -@use "image-slider/image-slider"; -@use "table-of-contents/table-of-contents"; -@use "error-message/error-message"; -@use "file-input/file-input"; -@use "field/field"; -@use "select/select"; -@use "time-input/time-input"; -@use "date-input/date-input"; -@use "document/document"; -@use "avatar/avatar"; -@use "character-count/character-count"; -@use "description-list/description-list"; -@use "row/row"; -@use "radio/radio"; -@use "tabs/tabs"; -@use "text-area/text-area"; -@use "column/column"; -@use "margin/margin"; -@use "gap/gap"; -@use "field-set/field-set"; -@use "link-list/link-list"; -@use "badge/badge"; -@use "table/table"; -@use "mega-menu/mega-menu"; -@use "icon-button/icon-button"; -@use "skip-link/skip-link"; -@use "overlap/overlap"; -@use "header/header"; -@use "mark/mark"; -@use "text-input/text-input"; -@use "search-field/search-field"; -@use "logo/logo"; -@use "dialog/dialog"; -@use "image/image"; -@use "pagination/pagination"; @use "accordion/accordion"; +@use "action-group/action-group"; @use "alert/alert"; @use "aspect-ratio/aspect-ratio"; +@use "avatar/avatar"; +@use "badge/badge"; @use "blockquote/blockquote"; @use "breadcrumb/breadcrumb"; +@use "breakout/breakout"; @use "button/button"; @use "card/card"; +@use "character-count/character-count"; @use "checkbox/checkbox"; -@use "label/label"; +@use "column/column"; +@use "date-input/date-input"; +@use "description-list/description-list"; +@use "dialog/dialog"; +@use "document/document"; +@use "error-message/error-message"; +@use "field-set/field-set"; +@use "field/field"; +@use "file-input/file-input"; +@use "file-list/file-list"; +@use "form-error-list/form-error-list"; +@use "gap/gap"; @use "grid/grid"; +@use "header/header"; @use "heading/heading"; -@use "spotlight/spotlight"; +@use "hint/hint"; +@use "icon-button/icon-button"; @use "icon/icon"; +@use "image-slider/image-slider"; +@use "image/image"; +@use "label/label"; +@use "link-list/link-list"; @use "link/link"; +@use "logo/logo"; +@use "margin/margin"; +@use "mark/mark"; +@use "mega-menu/mega-menu"; @use "ordered-list/ordered-list"; +@use "overlap/overlap"; @use "page-heading/page-heading"; @use "page-menu/page-menu"; +@use "pagination/pagination"; @use "paragraph/paragraph"; +@use "password-input/password-input"; +@use "radio/radio"; +@use "row/row"; @use "screen/screen"; +@use "search-field/search-field"; +@use "select/select"; +@use "skip-link/skip-link"; +@use "spotlight/spotlight"; @use "switch/switch"; +@use "table-of-contents/table-of-contents"; +@use "table/table"; +@use "tabs/tabs"; +@use "text-area/text-area"; +@use "text-input/text-input"; +@use "time-input/time-input"; @use "top-task-link/top-task-link"; @use "unordered-list/unordered-list"; @use "visually-hidden/visually-hidden"; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 5bb39cae01..34dc74a18b 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,63 +4,63 @@ */ /* Append here */ -export * from './FileList' +export * from './Accordion' export * from './ActionGroup' -export * from './Breakout' -export * from './Hint' -export * from './ImageSlider' -export * from './PasswordInput' -export * from './FormErrorList' -export * from './TableOfContents' -export * from './ErrorMessage' -export * from './FileInput' -export * from './Field' -export * from './Select' -export * from './TimeInput' -export * from './DateInput' +export * from './Alert' export * from './Avatar' +export * from './Badge' +export * from './Blockquote' +export * from './Breadcrumb' +export * from './Breakout' +export * from './Button' +export * from './Card' export * from './CharacterCount' -export * from './DescriptionList' -export * from './Row' -export * from './Radio' -export * from './Tabs' -export * from './TextArea' +export * from './Checkbox' export * from './Column' +export * from './DateInput' +export * from './DescriptionList' +export * from './Dialog' +export * from './ErrorMessage' +export * from './Field' export * from './FieldSet' +export * from './FileInput' +export * from './FileList' +export * from './Footer' +export * from './FormErrorList' +export * from './Grid' +export * from './Header' +export * from './Heading' +export * from './Hint' +export * from './Icon' +export * from './IconButton' +export * from './Image' +export * from './ImageSlider' +export * from './Label' +export * from './Link' export * from './LinkList' -export * from './Badge' -export * from './Table' +export * from './Logo' +export * from './Mark' export * from './MegaMenu' -export * from './IconButton' -export * from './SkipLink' +export * from './OrderedList' export * from './Overlap' -export * from './Header' -export * from './Mark' -export * from './TextInput' -export * from './SearchField' -export * from './Logo' -export * from './Dialog' -export * from './Image' +export * from './PageHeading' +export * from './PageMenu' export * from './Pagination' +export * from './Paragraph' +export * from './PasswordInput' +export * from './Radio' +export * from './Row' export * from './Screen' -export * from './Switch' +export * from './SearchField' +export * from './Select' +export * from './SkipLink' export * from './Spotlight' -export * from './Card' -export * from './Alert' -export * from './Footer' -export * from './PageMenu' +export * from './Switch' +export * from './Table' +export * from './TableOfContents' +export * from './Tabs' +export * from './TextArea' +export * from './TextInput' +export * from './TimeInput' export * from './TopTaskLink' -export * from './Blockquote' -export * from './Checkbox' -export * from './PageHeading' -export * from './OrderedList' -export * from './Heading' -export * from './Breadcrumb' -export * from './Link' -export * from './Button' -export * from './Paragraph' -export * from './Label' export * from './UnorderedList' -export * from './Icon' -export * from './Accordion' -export * from './Grid'