chore: Rename ‘Foundation’ layer to ‘Brand’ (#1454)

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                                                                                   |
 | ------------- | ----------------------------------------------------------------------------------------- |

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.

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).

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                                                                                      |
 | ------------ | -------------------------------------------------------------------------------------------- |

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).

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) {

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',

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.
 

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.
 
 <Canvas of={HeadingStories.Sizes} />

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).
 
 <Canvas of={IconStories.WithText} />
 

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

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
 

storybook/src/foundation/assets/favicon.docs.mdx

@@ -3,7 +3,7 @@
 import { Meta } from "@storybook/blocks";
 import { AppleTouchIcon, Favicon, SvgIcon } from "../../docs/components/AppIcons";
 
-<Meta title="Foundation/Assets/Favicon" />
+<Meta title="Brand/Assets/Favicon" />
 
 # Favicon
 

storybook/src/foundation/assets/font.docs.mdx

@@ -2,7 +2,7 @@
 
 import { Meta, Typeset } from "@storybook/blocks";
 
-<Meta title="Foundation/Assets/Font" />
+<Meta title="Brand/Assets/Font" />
 
 # Font
 

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";
 
-<Meta title="Foundation/Assets/Icons" />
+<Meta title="Brand/Assets/Icons" />
 
 <StatusBadge reason="The set of available icons will change." />
 

storybook/src/foundation/design-tokens/border.docs.mdx

@@ -2,7 +2,7 @@
 
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Foundation/Design Tokens/Border" />
+<Meta title="Brand/Design Tokens/Border" />
 
 # Border
 

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";
 
-<Meta title="Foundation/Design Tokens/Colour" />
+<Meta title="Brand/Design Tokens/Colour" />
 
 <StatusBadge reason="The set of available colours and their names will change." />
 

storybook/src/foundation/design-tokens/grid.docs.mdx

@@ -2,7 +2,7 @@
 
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Foundation/Design Tokens/Grid" />
+<Meta title="Brand/Design Tokens/Grid" />
 
 # 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

storybook/src/foundation/design-tokens/space.docs.mdx

@@ -2,7 +2,7 @@
 
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Foundation/Design Tokens/Space" />
+<Meta title="Brand/Design Tokens/Space" />
 
 # Space
 

storybook/src/foundation/design-tokens/text.docs.mdx

@@ -2,7 +2,7 @@
 
 import { Meta, Typeset } from "@storybook/blocks";
 
-<Meta title="Foundation/Design Tokens/Text" />
+<Meta title="Brand/Design Tokens/Text" />
 
 # Text