diff --git a/packages/css/src/components/gap/README.md b/packages/css/src/components/gap/README.md index 2088f3d198..c1894b30ee 100644 --- a/packages/css/src/components/gap/README.md +++ b/packages/css/src/components/gap/README.md @@ -6,7 +6,7 @@ Adds white space between a set of elements. ## Class names -The five sizes of [Component Space](/docs/foundation-design-tokens-space--docs) are available for the width or height of the gap. +The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the width or height of the gap. | Class name | Preview | | ------------- | ----------------------------------------------------------------------------------------- | diff --git a/packages/css/src/components/grid/README.md b/packages/css/src/components/grid/README.md index 5f3fd5fef7..d9ea3c7e55 100644 --- a/packages/css/src/components/grid/README.md +++ b/packages/css/src/components/grid/README.md @@ -19,4 +19,4 @@ A cell often spans multiple columns of the grid. ## Design -The [design choices](/docs/foundation-design-tokens-grid--docs) are described in the general documentation. +The [design choices](/docs/brand-design-tokens-grid--docs) are described in the general documentation. diff --git a/packages/css/src/components/icon/README.md b/packages/css/src/components/icon/README.md index 214bf4a85b..2aebf1252b 100644 --- a/packages/css/src/components/icon/README.md +++ b/packages/css/src/components/icon/README.md @@ -28,8 +28,8 @@ Icons are aligned to the left of the text by default and vertically centred to t Icons use the same text levels as all typographic components to determine their size. This ensures easy alignment between icons and text. -[Refer to the typography documentation for more information](/docs/foundation-design-tokens-text--docs). +[Refer to the typography documentation for more information](/docs/brand-design-tokens-text--docs). ## Overview -[You can find an overview of the available icons here](/docs/foundation-assets-icons--docs). +[You can find an overview of the available icons here](/docs/brand-assets-icons--docs). diff --git a/packages/css/src/components/margin/README.md b/packages/css/src/components/margin/README.md index 8078032e37..d324d4f311 100644 --- a/packages/css/src/components/margin/README.md +++ b/packages/css/src/components/margin/README.md @@ -6,7 +6,7 @@ Adds white space below a single element. ## Class names -The five sizes of [Component Space](/docs/foundation-design-tokens-space--docs) are available for the height of the bottom margin. +The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the height of the bottom margin. | Class name | Preview | | ------------ | -------------------------------------------------------------------------------------------- | diff --git a/proprietary/assets/README.md b/proprietary/assets/README.md index 4d3622fa25..561c71101f 100644 --- a/proprietary/assets/README.md +++ b/proprietary/assets/README.md @@ -7,4 +7,4 @@ Assets for the City of Amsterdam ## Web app manifest, app icons and favicon See the Design System documentation for guides on [the web manifest and application icons](https://designsystem.amsterdam/?path=/docs/docs-developer-guide-web-app--docs) -and [the favicon](https://designsystem.amsterdam/?path=/docs/foundation-assets-favicon--docs). +and [the favicon](https://designsystem.amsterdam/?path=/docs/brand-assets-favicon--docs). diff --git a/storybook/config/manager-head.html b/storybook/config/manager-head.html index 1566bdbed2..60a4f152d4 100644 --- a/storybook/config/manager-head.html +++ b/storybook/config/manager-head.html @@ -2,7 +2,7 @@ // Somewhat hacky way to expand all folders. Storybook does not support that natively. var clickCollapsedItemsUntilNoneLeft = () => { const collapsedItems = document.querySelectorAll( - ':is(button[data-parent-id="foundation"], button[data-parent-id="components"], button[data-parent-id="utilities"], button[data-parent-id="pages"])[aria-expanded="false"]', + ':is(button[data-parent-id="brand"], button[data-parent-id="components"], button[data-parent-id="utilities"], button[data-parent-id="pages"])[aria-expanded="false"]', ); for (item of collapsedItems) { diff --git a/storybook/config/preview.tsx b/storybook/config/preview.tsx index 1d2ba0598f..2e7cf7995f 100644 --- a/storybook/config/preview.tsx +++ b/storybook/config/preview.tsx @@ -40,7 +40,7 @@ export const parameters = { order: [ 'Docs', ['Introduction', 'Developer Guide', ['Getting Started']], - 'Foundation', + 'Brand', 'Components', ['Buttons', 'Containers', 'Feedback', 'Forms', 'Layout', 'Media', 'Navigation', 'Text'], 'Utilities', diff --git a/storybook/src/components/Column/Column.docs.mdx b/storybook/src/components/Column/Column.docs.mdx index 2e345f528c..cd0008915f 100644 --- a/storybook/src/components/Column/Column.docs.mdx +++ b/storybook/src/components/Column/Column.docs.mdx @@ -11,7 +11,7 @@ import README from "../../../../packages/css/src/components/column/README.md?raw ## How to Use - Wrap a Column around a set of elements that need the same amount of white space between them. -- The five sizes of [Component Space](/docs/foundation-design-tokens-space--docs) are available for the width or height of the gap. +- The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the width or height of the gap. - To add white space below a single element, you can add a [Margin Bottom](/docs/utilities-css-margin--docs) instead. - Align the elements horizontally or vertically through the alignment props. diff --git a/storybook/src/components/Heading/Heading.docs.mdx b/storybook/src/components/Heading/Heading.docs.mdx index 073668f217..b27dd0ec6c 100644 --- a/storybook/src/components/Heading/Heading.docs.mdx +++ b/storybook/src/components/Heading/Heading.docs.mdx @@ -38,7 +38,7 @@ More detailed content should probably be split into multiple pages or have some ### Sizes It may be visually more suitable to display a heading in a smaller font size. -Six sizes from the set of [Text Levels](/docs/foundation-design-tokens-text--docs) can be used for this purpose. +Six sizes from the set of [Text Levels](/docs/brand-design-tokens-text--docs) can be used for this purpose. Ensure that you still select a level that accurately represents the section’s hierarchy. diff --git a/storybook/src/components/Icon/Icon.docs.mdx b/storybook/src/components/Icon/Icon.docs.mdx index 21965ae008..e6df514b6d 100644 --- a/storybook/src/components/Icon/Icon.docs.mdx +++ b/storybook/src/components/Icon/Icon.docs.mdx @@ -36,7 +36,7 @@ Then, you can use it in the component like this: Icons can be used alongside text. Using the same text levels for both the icon and text aligns them perfectly. -[Consult the documentation on typography for more information](/docs/foundation-design-tokens-text--docs). +[Consult the documentation on typography for more information](/docs/brand-design-tokens-text--docs). diff --git a/storybook/src/components/Row/Row.docs.mdx b/storybook/src/components/Row/Row.docs.mdx index 90d0de7af1..6753aea45e 100644 --- a/storybook/src/components/Row/Row.docs.mdx +++ b/storybook/src/components/Row/Row.docs.mdx @@ -11,7 +11,7 @@ import README from "../../../../packages/css/src/components/row/README.md?raw"; ## How to use - Wrap a Row around a set of elements that need the same amount of white space between them. -- The five sizes of [Component Space](/docs/foundation-design-tokens-space--docs) are available for the width of the gap. +- The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the width of the gap. - Align the elements horizontally or vertically through the alignment props. ## Examples diff --git a/storybook/src/docs/developer-guide/web-app.docs.mdx b/storybook/src/docs/developer-guide/web-app.docs.mdx index 1325b1fdfa..a864b85e94 100644 --- a/storybook/src/docs/developer-guide/web-app.docs.mdx +++ b/storybook/src/docs/developer-guide/web-app.docs.mdx @@ -12,7 +12,7 @@ Turn a website into a Progressive Web App (PWA) with a web manifest and app icon Here’s how to publish a web app with the proper app names and icons. This set covers all combinations of common operating systems (Android, iOS, macOS, and Windows) and browsers (Chrome, Safari, Edge, and Firefox). -> There is seperate documentation on [how to add a website icon (a “favicon”)](/docs/foundation-assets-favicon--docs). +> There is seperate documentation on [how to add a website icon (a “favicon”)](/docs/brand-assets-favicon--docs). ## How to use diff --git a/storybook/src/foundation/assets/favicon.docs.mdx b/storybook/src/foundation/assets/favicon.docs.mdx index 0e9e305b86..87754358c4 100644 --- a/storybook/src/foundation/assets/favicon.docs.mdx +++ b/storybook/src/foundation/assets/favicon.docs.mdx @@ -3,7 +3,7 @@ import { Meta } from "@storybook/blocks"; import { AppleTouchIcon, Favicon, SvgIcon } from "../../docs/components/AppIcons"; - + # Favicon diff --git a/storybook/src/foundation/assets/font.docs.mdx b/storybook/src/foundation/assets/font.docs.mdx index 242b70cb7c..72dac27837 100644 --- a/storybook/src/foundation/assets/font.docs.mdx +++ b/storybook/src/foundation/assets/font.docs.mdx @@ -2,7 +2,7 @@ import { Meta, Typeset } from "@storybook/blocks"; - + # Font diff --git a/storybook/src/foundation/assets/icons.docs.mdx b/storybook/src/foundation/assets/icons.docs.mdx index 739f1acf89..3f82396881 100644 --- a/storybook/src/foundation/assets/icons.docs.mdx +++ b/storybook/src/foundation/assets/icons.docs.mdx @@ -4,7 +4,7 @@ import { Meta } from "@storybook/blocks"; import { AmsterdamIconGallery } from "../../docs/components/AmsterdamIconGallery"; import { StatusBadge } from "../../docs/components/StatusBadge"; - + diff --git a/storybook/src/foundation/design-tokens/border.docs.mdx b/storybook/src/foundation/design-tokens/border.docs.mdx index 19bec7cd73..4fe8a01964 100644 --- a/storybook/src/foundation/design-tokens/border.docs.mdx +++ b/storybook/src/foundation/design-tokens/border.docs.mdx @@ -2,7 +2,7 @@ import { Meta } from "@storybook/blocks"; - + # Border diff --git a/storybook/src/foundation/design-tokens/colour.docs.mdx b/storybook/src/foundation/design-tokens/colour.docs.mdx index fc547670cf..e69dd0575b 100644 --- a/storybook/src/foundation/design-tokens/colour.docs.mdx +++ b/storybook/src/foundation/design-tokens/colour.docs.mdx @@ -5,7 +5,7 @@ import { Meta } from "@storybook/blocks"; import { ColorPalette } from "../../docs/components/ColorPalette"; import { StatusBadge } from "../../docs/components/StatusBadge"; - + diff --git a/storybook/src/foundation/design-tokens/grid.docs.mdx b/storybook/src/foundation/design-tokens/grid.docs.mdx index b53d440b10..7a3a20c363 100644 --- a/storybook/src/foundation/design-tokens/grid.docs.mdx +++ b/storybook/src/foundation/design-tokens/grid.docs.mdx @@ -2,7 +2,7 @@ import { Meta } from "@storybook/blocks"; - + # Grid @@ -192,7 +192,7 @@ Layout and text relate in various ways. ### Scaling typography -Like the grid, the [text sizes](/docs/foundation-design-tokens-text--docs) respond to the window width. +Like the grid, the [text sizes](/docs/brand-design-tokens-text--docs) respond to the window width. This ensures that content looks good on as many window widths and with various personal settings. ### Zooming or enlarged text diff --git a/storybook/src/foundation/design-tokens/space.docs.mdx b/storybook/src/foundation/design-tokens/space.docs.mdx index 72338708b2..15902284c5 100644 --- a/storybook/src/foundation/design-tokens/space.docs.mdx +++ b/storybook/src/foundation/design-tokens/space.docs.mdx @@ -2,7 +2,7 @@ import { Meta } from "@storybook/blocks"; - + # Space diff --git a/storybook/src/foundation/design-tokens/text.docs.mdx b/storybook/src/foundation/design-tokens/text.docs.mdx index 9539f68006..595a47e082 100644 --- a/storybook/src/foundation/design-tokens/text.docs.mdx +++ b/storybook/src/foundation/design-tokens/text.docs.mdx @@ -2,7 +2,7 @@ import { Meta, Typeset } from "@storybook/blocks"; - + # Text