diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
index 169f82640f..37b3bac8e4 100644
--- a/packages/css/src/components/heading/heading.scss
+++ b/packages/css/src/components/heading/heading.scss
@@ -59,6 +59,26 @@
}
}
+.amsterdam-heading--5 {
+ font-size: var(--amsterdam-heading-spacious-level-5-font-size);
+ line-height: var(--amsterdam-heading-spacious-level-5-line-height);
+
+ .amsterdam-theme--compact & {
+ font-size: var(--amsterdam-heading-compact-level-5-font-size);
+ line-height: var(--amsterdam-heading-compact-level-5-line-height);
+ }
+}
+
+.amsterdam-heading--6 {
+ font-size: var(--amsterdam-heading-spacious-level-6-font-size);
+ line-height: var(--amsterdam-heading-spacious-level-6-line-height);
+
+ .amsterdam-theme--compact & {
+ font-size: var(--amsterdam-heading-compact-level-6-font-size);
+ line-height: var(--amsterdam-heading-compact-level-6-line-height);
+ }
+}
+
.amsterdam-heading--inverse-color {
color: var(--amsterdam-heading-inverse-color);
}
diff --git a/packages/css/src/components/icon/icon.scss b/packages/css/src/components/icon/icon.scss
index 3307ac7cbf..081ac46a8b 100644
--- a/packages/css/src/components/icon/icon.scss
+++ b/packages/css/src/components/icon/icon.scss
@@ -48,15 +48,6 @@
width: var(--amsterdam-icon-spacious-size-6-font-size);
}
-.amsterdam-icon--size-7 {
- height: calc(var(--amsterdam-icon-spacious-size-7-font-size) * var(--amsterdam-icon-spacious-size-7-line-height));
-}
-
-.amsterdam-icon--size-7 svg {
- height: var(--amsterdam-icon-spacious-size-7-font-size);
- width: var(--amsterdam-icon-spacious-size-7-font-size);
-}
-
.amsterdam-theme--compact {
.amsterdam-icon--size-3 {
height: calc(var(--amsterdam-icon-compact-size-3-font-size) * var(--amsterdam-icon-compact-size-3-line-height));
@@ -93,13 +84,4 @@
height: var(--amsterdam-icon-compact-size-6-font-size);
width: var(--amsterdam-icon-compact-size-6-font-size);
}
-
- .amsterdam-icon--size-7 {
- height: calc(var(--amsterdam-icon-compact-size-7-font-size) * var(--amsterdam-icon-compact-size-7-line-height));
- }
-
- .amsterdam-icon--size-7 svg {
- height: var(--amsterdam-icon-compact-size-7-font-size);
- width: var(--amsterdam-icon-compact-size-7-font-size);
- }
}
diff --git a/packages/react/src/Heading/Heading.test.tsx b/packages/react/src/Heading/Heading.test.tsx
index f39c66aba2..85299ada96 100644
--- a/packages/react/src/Heading/Heading.test.tsx
+++ b/packages/react/src/Heading/Heading.test.tsx
@@ -66,6 +66,8 @@ describe('Heading', () => {
Size level 2
Size level 3
Size level 4
+ Size level 5
+ Size level 6
>,
)
@@ -85,11 +87,21 @@ describe('Heading', () => {
name: 'Size level 4',
level: 1,
})
+ const sizeLevel5 = screen.getByRole('heading', {
+ name: 'Size level 5',
+ level: 1,
+ })
+ const sizeLevel6 = screen.getByRole('heading', {
+ name: 'Size level 6',
+ level: 1,
+ })
expect(sizeLevel1).toHaveClass('amsterdam-heading--1')
expect(sizeLevel2).toHaveClass('amsterdam-heading--2')
expect(sizeLevel3).toHaveClass('amsterdam-heading--3')
expect(sizeLevel4).toHaveClass('amsterdam-heading--4')
+ expect(sizeLevel5).toHaveClass('amsterdam-heading--5')
+ expect(sizeLevel6).toHaveClass('amsterdam-heading--6')
})
it('renders the right inverse color class', () => {
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 363b4d328c..7caaaf6806 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -8,7 +8,7 @@ import clsx from 'clsx'
import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
export type HeadingLevel = 1 | 2 | 3 | 4
-type Size = 'level-1' | 'level-2' | 'level-3' | 'level-4'
+type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6'
export interface HeadingProps extends HTMLAttributes {
/**
@@ -19,7 +19,7 @@ export interface HeadingProps extends HTMLAttributes {
* De visuele grootte van de titel.
* Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
*/
- size?: Size
+ size?: HeadingSize
/**
* De kleur van de titel
* Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
diff --git a/packages/react/src/Icon/Icon.test.tsx b/packages/react/src/Icon/Icon.test.tsx
index a0185e6ac2..c6ef02766f 100644
--- a/packages/react/src/Icon/Icon.test.tsx
+++ b/packages/react/src/Icon/Icon.test.tsx
@@ -34,13 +34,11 @@ describe('Icon', () => {
const { container: level4 } = render()
const { container: level5 } = render()
const { container: level6 } = render()
- const { container: level7 } = render()
expect(level3.firstChild).toHaveClass('amsterdam-icon--size-3')
expect(level4.firstChild).toHaveClass('amsterdam-icon--size-4')
expect(level5.firstChild).toHaveClass('amsterdam-icon--size-5')
expect(level6.firstChild).toHaveClass('amsterdam-icon--size-6')
- expect(level7.firstChild).toHaveClass('amsterdam-icon--size-7')
})
it('renders an additional class name', () => {
diff --git a/packages/react/src/Icon/Icon.tsx b/packages/react/src/Icon/Icon.tsx
index cc7282b88b..d306aa9f1f 100644
--- a/packages/react/src/Icon/Icon.tsx
+++ b/packages/react/src/Icon/Icon.tsx
@@ -9,7 +9,7 @@ import clsx from 'clsx'
import { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
export interface IconProps extends HTMLAttributes {
- size?: 'level-3' | 'level-4' | 'level-5' | 'level-6' | 'level-7'
+ size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
svg: Function
}
@@ -23,7 +23,6 @@ export const Icon = forwardRef(
size === 'level-4' && 'amsterdam-icon--size-4',
size === 'level-5' && 'amsterdam-icon--size-5',
size === 'level-6' && 'amsterdam-icon--size-6',
- size === 'level-7' && 'amsterdam-icon--size-7',
className,
)}
{...otherProps}
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 54c61c9f43..47e6ce1a4c 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -49,7 +49,7 @@ export const Link = forwardRef(
className,
)}
>
- {variant === 'inList' && }
+ {variant === 'inList' && }
{children}
),
diff --git a/packages/react/src/PageMenu/PageMenu.tsx b/packages/react/src/PageMenu/PageMenu.tsx
index 55377fa152..4090f1da15 100644
--- a/packages/react/src/PageMenu/PageMenu.tsx
+++ b/packages/react/src/PageMenu/PageMenu.tsx
@@ -57,7 +57,7 @@ const PageMenuLink = forwardRef(
{children}
- {icon && }
+ {icon && }
)
@@ -70,7 +70,7 @@ const PageMenuButton = forwardRef(
)
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 6ee4313b9c..6d9c4c7ca4 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -122,7 +122,7 @@ export const Pagination = forwardRef(
onClick={onPrevious}
type="button"
>
-
+
vorige
@@ -162,7 +162,7 @@ export const Pagination = forwardRef(
type="button"
>
volgende
-
+
diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
index 2bc2c5c235..59121f4704 100644
--- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
+++ b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
@@ -10,7 +10,7 @@
"text-level": {
"0": {
"font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
- "line-height": { "value": "1.1" }
+ "line-height": { "value": "1.15" }
},
"1": {
"font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
@@ -18,25 +18,21 @@
},
"2": {
"font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
- "line-height": { "value": "1.3" }
+ "line-height": { "value": "1.25" }
},
"3": {
"font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
- "line-height": { "value": "1.4" }
+ "line-height": { "value": "1.3" }
},
"4": {
- "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
- "line-height": { "value": "1.4" }
- },
- "5": {
"font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
"line-height": { "value": "1.5" }
},
- "6": {
+ "5": {
"font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
"line-height": { "value": "1.6" }
},
- "7": {
+ "6": {
"font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
"line-height": { "value": "1.6" }
}
@@ -46,7 +42,7 @@
"text-level": {
"0": {
"font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
- "line-height": { "value": "1.1" }
+ "line-height": { "value": "1.15" }
},
"1": {
"font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
@@ -54,25 +50,21 @@
},
"2": {
"font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
- "line-height": { "value": "1.3" }
+ "line-height": { "value": "1.25" }
},
"3": {
"font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
- "line-height": { "value": "1.4" }
+ "line-height": { "value": "1.3" }
},
"4": {
- "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
- "line-height": { "value": "1.4" }
- },
- "5": {
"font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
"line-height": { "value": "1.5" }
},
- "6": {
+ "5": {
"font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
"line-height": { "value": "1.6" }
},
- "7": {
+ "6": {
"font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
"line-height": { "value": "1.6" }
}
diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
index 87714582e7..e36911e812 100644
--- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
@@ -18,12 +18,12 @@
}
},
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
}
}
}
diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json
index c1c79f4b0a..9cd2420461 100644
--- a/proprietary/tokens/src/components/amsterdam/button.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/button.tokens.json
@@ -2,12 +2,12 @@
"amsterdam": {
"button": {
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
},
"secondary": {
"box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
diff --git a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
index 7dbfec9702..b53da6b8ef 100644
--- a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
@@ -63,12 +63,12 @@
},
"outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
}
}
}
diff --git a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
index 8c7ad2f4cf..4a42884769 100644
--- a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json
@@ -5,12 +5,12 @@
"font-family": { "value": "{amsterdam.typography.font-family}" },
"font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
}
}
}
diff --git a/proprietary/tokens/src/components/amsterdam/heading.tokens.json b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
index ddfd110d96..e8fc70121e 100644
--- a/proprietary/tokens/src/components/amsterdam/heading.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/heading.tokens.json
@@ -21,6 +21,14 @@
"level-4": {
"line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" },
"font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }
+ },
+ "level-5": {
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" },
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }
+ },
+ "level-6": {
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" },
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }
}
},
"compact": {
@@ -39,6 +47,14 @@
"level-4": {
"line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" },
"font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }
+ },
+ "level-5": {
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" },
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }
+ },
+ "level-6": {
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" },
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }
}
}
}
diff --git a/proprietary/tokens/src/components/amsterdam/icon.tokens.json b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
index c4ff02a8ae..dbaac0ef7f 100644
--- a/proprietary/tokens/src/components/amsterdam/icon.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/icon.tokens.json
@@ -17,10 +17,6 @@
"size-6": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
- },
- "size-7": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
}
},
"compact": {
@@ -39,10 +35,6 @@
"size-6": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
- },
- "size-7": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
}
}
}
diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json
index 8eda3e25ff..28d0635ac7 100644
--- a/proprietary/tokens/src/components/amsterdam/link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json
@@ -34,12 +34,12 @@
"text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
},
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
}
},
"standalone": {
@@ -53,12 +53,12 @@
"text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
},
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
}
},
"on-background-dark": {
diff --git a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
index 7f52c60c61..d566961b0b 100644
--- a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json
@@ -7,12 +7,12 @@
"gap": { "value": "0.75rem" },
"list-style-type": { "value": "decimal" },
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
},
"item": {
"margin-inline-start": {
diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
index 0626af2b90..6223d09a9a 100644
--- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json
@@ -13,12 +13,12 @@
"text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
"text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
},
"hover": {
"color": { "value": "{amsterdam.link-appearance.hover.color}" },
diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
index b3b6cef8d1..6cca52f715 100644
--- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json
@@ -5,12 +5,12 @@
"font-family": { "value": "{amsterdam.typography.font-family}" },
"font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
},
"button": {
"outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
index 675202b3ce..3999df3bc5 100644
--- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json
@@ -7,30 +7,30 @@
"inverse-color": { "value": "{amsterdam.color.primary-white}" },
"spacious": {
"small": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
- },
- "medium": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
},
- "large": {
+ "medium": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
+ },
+ "large": {
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
}
},
"compact": {
"small": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
- },
- "medium": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
},
- "large": {
+ "medium": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
+ },
+ "large": {
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
}
}
}
diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
index f772433a64..f67a4e39e6 100644
--- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json
@@ -6,12 +6,12 @@
"font-family": { "value": "{amsterdam.typography.font-family}" },
"font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
}
},
"label": {
diff --git a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
index 9394ed13b2..aa33f763f0 100644
--- a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json
@@ -7,12 +7,12 @@
"gap": { "value": "0.75rem" },
"list-style-type": { "value": "'\\2022'" },
"spacious": {
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
},
"item": {
"margin-inline-start": {
diff --git a/storybook/storybook-react/src/Heading/Heading.stories.tsx b/storybook/storybook-react/src/Heading/Heading.stories.tsx
index 0e33512f99..fb65022bc1 100644
--- a/storybook/storybook-react/src/Heading/Heading.stories.tsx
+++ b/storybook/storybook-react/src/Heading/Heading.stories.tsx
@@ -20,7 +20,7 @@ const meta = {
},
size: {
control: 'radio',
- options: ['level-1', 'level-2', 'level-3', 'level-4'],
+ options: ['level-1', 'level-2', 'level-3', 'level-4', 'level-5', 'level-6'],
},
inverseColor: { control: 'boolean' },
},
diff --git a/storybook/storybook-react/src/Icon/Icon.docs.mdx b/storybook/storybook-react/src/Icon/Icon.docs.mdx
index 087836ab99..3038541ddc 100644
--- a/storybook/storybook-react/src/Icon/Icon.docs.mdx
+++ b/storybook/storybook-react/src/Icon/Icon.docs.mdx
@@ -48,7 +48,3 @@ Iconen kunnen naast tekst gebruikt worden. Door dezelfde tekstniveaus te gebruik
### Level 6
-
-### Level 7
-
-
diff --git a/storybook/storybook-react/src/Icon/Icon.stories.tsx b/storybook/storybook-react/src/Icon/Icon.stories.tsx
index 1994f7795c..d358e40654 100644
--- a/storybook/storybook-react/src/Icon/Icon.stories.tsx
+++ b/storybook/storybook-react/src/Icon/Icon.stories.tsx
@@ -13,7 +13,7 @@ const meta = {
argTypes: {
size: {
control: { type: 'select' },
- options: ['level-3', 'level-4', 'level-5', 'level-6', 'level-7'],
+ options: ['level-3', 'level-4', 'level-5', 'level-6'],
},
svg: {
control: { type: 'select' },
@@ -72,10 +72,3 @@ export const Level6: Story = {
size: 'level-6',
},
}
-
-export const Level7: Story = {
- args: {
- svg: Icons.EmailIcon,
- size: 'level-7',
- },
-}