From 82356bbf11c389c0f29146ca5f715d5b7459a634 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Fri, 8 Dec 2023 15:28:06 +0100 Subject: [PATCH] feat!: Update line heights and text levels (#898) --- .../css/src/components/heading/heading.scss | 20 +++++++++++++ packages/css/src/components/icon/icon.scss | 18 ------------ packages/react/src/Heading/Heading.test.tsx | 12 ++++++++ packages/react/src/Heading/Heading.tsx | 4 +-- packages/react/src/Icon/Icon.test.tsx | 2 -- packages/react/src/Icon/Icon.tsx | 3 +- packages/react/src/Link/Link.tsx | 2 +- packages/react/src/PageMenu/PageMenu.tsx | 4 +-- packages/react/src/Pagination/Pagination.tsx | 4 +-- .../brand/amsterdam/typography.tokens.json | 28 +++++++------------ .../amsterdam/breadcrumb.tokens.json | 8 +++--- .../components/amsterdam/button.tokens.json | 8 +++--- .../components/amsterdam/checkbox.tokens.json | 8 +++--- .../amsterdam/form-label.tokens.json | 8 +++--- .../components/amsterdam/heading.tokens.json | 16 +++++++++++ .../src/components/amsterdam/icon.tokens.json | 8 ------ .../src/components/amsterdam/link.tokens.json | 16 +++++------ .../amsterdam/ordered-list.tokens.json | 8 +++--- .../amsterdam/page-menu.tokens.json | 8 +++--- .../amsterdam/pagination.tokens.json | 8 +++--- .../amsterdam/paragraph.tokens.json | 20 ++++++------- .../amsterdam/top-task-link.tokens.json | 8 +++--- .../amsterdam/unordered-list.tokens.json | 8 +++--- .../src/Heading/Heading.stories.tsx | 2 +- .../storybook-react/src/Icon/Icon.docs.mdx | 4 --- .../storybook-react/src/Icon/Icon.stories.tsx | 9 +----- 26 files changed, 122 insertions(+), 122 deletions(-) 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', - }, -}