feat!: Update line heights and text levels (#898)

Amsterdam · Dec 8, 2023 · 82356bb · 82356bb
1 parent dd1a437
commit 82356bb
Show file tree

Hide file tree

Showing 26 changed files with 122 additions and 122 deletions.
diff --git 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
@@ -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
@@ -66,6 +66,8 @@ describe('Heading', () => {
         <Heading size="level-2">Size level 2</Heading>
         <Heading size="level-3">Size level 3</Heading>
         <Heading size="level-4">Size level 4</Heading>
+        <Heading size="level-5">Size level 5</Heading>
+        <Heading size="level-6">Size level 6</Heading>
       </>,
     )
 
@@ -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
@@ -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<HTMLHeadingElement> {
   /**
@@ -19,7 +19,7 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
    * 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
@@ -34,13 +34,11 @@ describe('Icon', () => {
     const { container: level4 } = render(<Icon svg={AlertIcon} size="level-4" />)
     const { container: level5 } = render(<Icon svg={AlertIcon} size="level-5" />)
     const { container: level6 } = render(<Icon svg={AlertIcon} size="level-6" />)
-    const { container: level7 } = render(<Icon svg={AlertIcon} size="level-7" />)
 
     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
@@ -9,7 +9,7 @@ import clsx from 'clsx'
 import { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
 
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-  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
@@ -49,7 +49,7 @@ export const Link = forwardRef(
         className,
       )}
     >
-      {variant === 'inList' && <Icon svg={icon ?? ChevronRightIcon} size="level-6" />}
+      {variant === 'inList' && <Icon svg={icon ?? ChevronRightIcon} size="level-5" />}
       {children}
     </a>
   ),

diff --git a/packages/react/src/PageMenu/PageMenu.tsx b/packages/react/src/PageMenu/PageMenu.tsx
@@ -57,7 +57,7 @@ const PageMenuLink = forwardRef(
       <li className="amsterdam-page-menu__item">
         <a {...restProps} ref={ref} className="amsterdam-page-menu__link">
           {children}
-          {icon && <Icon svg={icon} size="level-7" />}
+          {icon && <Icon svg={icon} size="level-6" />}
         </a>
       </li>
     )
@@ -70,7 +70,7 @@ const PageMenuButton = forwardRef(
       <li className="amsterdam-page-menu__item">
         <button {...restProps} type="button" ref={ref} className="amsterdam-page-menu__button">
           {children}
-          {icon && <Icon svg={icon} size="level-7" />}
+          {icon && <Icon svg={icon} size="level-6" />}
         </button>
       </li>
     )

diff --git 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"
             >
-              <Icon svg={ChevronLeftIcon} size="level-6" />
+              <Icon svg={ChevronLeftIcon} size="level-5" />
               vorige
             </button>
           </li>
@@ -162,7 +162,7 @@ export const Pagination = forwardRef(
               type="button"
             >
               volgende
-              <Icon svg={ChevronRightIcon} size="level-6" />
+              <Icon svg={ChevronRightIcon} size="level-5" />
             </button>
           </li>
         </ol>

diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json
@@ -10,33 +10,29 @@
         "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)" },
             "line-height": { "value": "1.2" }
           },
           "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,33 +42,29 @@
         "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)" },
             "line-height": { "value": "1.2" }
           },
           "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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}" }
         }
       }
     }