feat!: Change naming approach of all typography tokens

packages/css/src/components/button/button.scss

@@ -19,6 +19,7 @@
   display: inline-flex;
   font-family: var(--ams-button-font-family);
   font-size: var(--ams-button-font-size);
+  font-weight: var(--ams-button-font-weight);
   gap: var(--ams-button-gap);
   justify-content: center;
   line-height: var(--ams-button-line-height);

packages/css/src/components/heading/heading.scss

@@ -24,33 +24,33 @@
 }
 
 .ams-heading--level-1 {
-  font-size: var(--ams-heading-level-1-font-size);
-  line-height: var(--ams-heading-level-1-line-height);
+  font-size: var(--ams-heading-1-font-size);
+  line-height: var(--ams-heading-1-line-height);
 }
 
 .ams-heading--level-2 {
-  font-size: var(--ams-heading-level-2-font-size);
-  line-height: var(--ams-heading-level-2-line-height);
+  font-size: var(--ams-heading-2-font-size);
+  line-height: var(--ams-heading-2-line-height);
 }
 
 .ams-heading--level-3 {
-  font-size: var(--ams-heading-level-3-font-size);
-  line-height: var(--ams-heading-level-3-line-height);
+  font-size: var(--ams-heading-3-font-size);
+  line-height: var(--ams-heading-3-line-height);
 }
 
 .ams-heading--level-4 {
-  font-size: var(--ams-heading-level-4-font-size);
-  line-height: var(--ams-heading-level-4-line-height);
+  font-size: var(--ams-heading-4-font-size);
+  line-height: var(--ams-heading-4-line-height);
 }
 
 .ams-heading--level-5 {
-  font-size: var(--ams-heading-level-5-font-size);
-  line-height: var(--ams-heading-level-5-line-height);
+  font-size: var(--ams-heading-5-font-size);
+  line-height: var(--ams-heading-5-line-height);
 }
 
 .ams-heading--level-6 {
-  font-size: var(--ams-heading-level-6-font-size);
-  line-height: var(--ams-heading-level-6-line-height);
+  font-size: var(--ams-heading-6-font-size);
+  line-height: var(--ams-heading-6-line-height);
 }
 
 .ams-heading--inverse {

packages/css/src/components/icon/README.md

@@ -28,7 +28,7 @@ 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/brand-design-tokens-text--docs).
+[Refer to the typography documentation for more information](/docs/brand-design-tokens-typography--docs).
 
 ## Overview
 

packages/css/src/components/icon/icon.scss

@@ -5,11 +5,14 @@
 
 .ams-icon {
   align-items: center;
+  block-size: calc(var(--ams-icon-font-size) * var(--ams-icon-line-height));
   display: inline-flex;
-}
 
-.ams-icon svg {
-  fill: currentColor;
+  svg {
+    block-size: var(--ams-icon-font-size);
+    fill: currentColor;
+    inline-size: var(--ams-icon-font-size);
+  }
 }
 
 .ams-icon--inverse {
@@ -21,38 +24,56 @@
   justify-content: center;
 }
 
-.ams-icon--size-3 {
-  block-size: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
-}
+.ams-icon--small {
+  block-size: calc(var(--ams-icon-small-font-size) * var(--ams-icon-small-line-height));
 
-.ams-icon--size-3 svg {
-  block-size: var(--ams-icon-size-3-font-size);
-  inline-size: var(--ams-icon-size-3-font-size);
+  svg {
+    block-size: var(--ams-icon-small-font-size);
+    inline-size: var(--ams-icon-small-font-size);
+  }
 }
 
-.ams-icon--size-4 {
-  block-size: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
-}
+.ams-icon--large {
+  block-size: calc(var(--ams-icon-large-font-size) * var(--ams-icon-large-line-height));
 
-.ams-icon--size-4 svg {
-  block-size: var(--ams-icon-size-4-font-size);
-  inline-size: var(--ams-icon-size-4-font-size);
+  svg {
+    block-size: var(--ams-icon-large-font-size);
+    inline-size: var(--ams-icon-large-font-size);
+  }
 }
 
-.ams-icon--size-5 {
-  block-size: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
+.ams-icon--heading-3 {
+  block-size: calc(var(--ams-icon-heading-3-font-size) * var(--ams-icon-heading-3-line-height));
+
+  svg {
+    block-size: var(--ams-icon-heading-3-font-size);
+    inline-size: var(--ams-icon-heading-3-font-size);
+  }
 }
 
-.ams-icon--size-5 svg {
-  block-size: var(--ams-icon-size-5-font-size);
-  inline-size: var(--ams-icon-size-5-font-size);
+.ams-icon--heading-4 {
+  block-size: calc(var(--ams-icon-heading-4-font-size) * var(--ams-icon-heading-4-line-height));
+
+  svg {
+    block-size: var(--ams-icon-heading-4-font-size);
+    inline-size: var(--ams-icon-heading-4-font-size);
+  }
 }
 
-.ams-icon--size-6 {
-  block-size: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
+.ams-icon--heading-5 {
+  block-size: calc(var(--ams-icon-heading-5-font-size) * var(--ams-icon-heading-5-line-height));
+
+  svg {
+    block-size: var(--ams-icon-heading-5-font-size);
+    inline-size: var(--ams-icon-heading-5-font-size);
+  }
 }
 
-.ams-icon--size-6 svg {
-  block-size: var(--ams-icon-size-6-font-size);
-  inline-size: var(--ams-icon-size-6-font-size);
+.ams-icon--heading-6 {
+  block-size: calc(var(--ams-icon-heading-6-font-size) * var(--ams-icon-heading-6-line-height));
+
+  svg {
+    block-size: var(--ams-icon-heading-6-font-size);
+    inline-size: var(--ams-icon-heading-6-font-size);
+  }
 }

packages/react/src/Accordion/AccordionSection.tsx

@@ -43,7 +43,7 @@ export const AccordionSection = forwardRef(
             onClick={() => setIsExpanded(!isExpanded)}
             type="button"
           >
-            <Icon className="ams-accordion__icon" size="level-4" svg={ChevronDownIcon} />
+            <Icon className="ams-accordion__icon" size="heading-4" svg={ChevronDownIcon} />
             {label}
           </button>
         </HeadingTag>

packages/react/src/Alert/Alert.tsx

@@ -60,14 +60,14 @@ export const Alert = forwardRef(
     return (
       <section {...restProps} className={clsx('ams-alert', severity && `ams-alert--${severity}`, className)} ref={ref}>
         <div className="ams-alert__severity-indicator">
-          <Icon color="inverse" size="level-4" svg={SeverityIcon} />
+          <Icon color="inverse" size="heading-4" svg={SeverityIcon} />
         </div>
         <div className="ams-alert__content">
           <Row align="between" alignVertical="start">
             <Heading level={headingLevel} size="level-4">
               {heading}
             </Heading>
-            {closeable && <IconButton label={closeButtonLabel} onClick={onClose} size="level-4" />}
+            {closeable && <IconButton label={closeButtonLabel} onClick={onClose} size="heading-4" />}
           </Row>
           {children}
         </div>

packages/react/src/Avatar/Avatar.tsx

@@ -27,7 +27,7 @@ const AvatarContent = ({ imageSrc, initials }: AvatarContentProps) => {
     return <span aria-hidden={true}>{initials}</span>
   }
 
-  return <Icon size="level-6" svg={PersonalLoginIcon} />
+  return <Icon size="small" svg={PersonalLoginIcon} />
 }
 
 export type AvatarProps = {

packages/react/src/Button/Button.tsx

@@ -50,9 +50,9 @@ export const Button = forwardRef(
       ref={ref}
       type={type || 'button'}
     >
-      {icon && (iconBefore || iconOnly) && <Icon size="level-5" square={iconOnly} svg={icon} />}
+      {icon && (iconBefore || iconOnly) && <Icon square={iconOnly} svg={icon} />}
       {icon && iconOnly ? <span className="ams-visually-hidden">{children}</span> : children}
-      {icon && !iconBefore && !iconOnly && <Icon size="level-5" svg={icon} />}
+      {icon && !iconBefore && !iconOnly && <Icon svg={icon} />}
     </button>
   ),
 )

packages/react/src/Dialog/Dialog.tsx

@@ -31,7 +31,7 @@ const DialogRoot = forwardRef(
         <Heading level={1} size="level-4">
           {heading}
         </Heading>
-        <IconButton label={closeButtonLabel} onClick={closeDialog} size="level-4" type="button" />
+        <IconButton label={closeButtonLabel} onClick={closeDialog} size="heading-4" type="button" />
       </header>
       <div className="ams-dialog__body">{children}</div>
       {footer && <footer className="ams-dialog__footer">{footer}</footer>}

packages/react/src/ErrorMessage/ErrorMessage.tsx

@@ -22,7 +22,7 @@ export const ErrorMessage = forwardRef(
     ref: ForwardedRef<HTMLParagraphElement>,
   ) => (
     <p {...restProps} className={clsx('ams-error-message', className)} ref={ref}>
-      <Icon size="level-6" svg={icon ? icon : AlertIcon} />
+      <Icon size="small" svg={icon ? icon : AlertIcon} />
       <span className="ams-visually-hidden">
         {prefix}
         {': '}

packages/react/src/FileList/FileListItem.tsx

@@ -24,7 +24,7 @@ export const FileListItem = forwardRef(
         {file.type.startsWith('image/') ? (
           <img alt={file.name} src={URL.createObjectURL(file)} />
         ) : (
-          <Icon size="level-3" square svg={DocumentIcon} />
+          <Icon size="heading-3" square svg={DocumentIcon} />
         )}
       </div>
       <div className="ams-file-list__item-info">

packages/react/src/Header/Header.tsx

@@ -110,7 +110,6 @@ const HeaderRoot = forwardRef(
                       {menuButtonText}
                     </span>
                     <Icon
-                      size="level-5"
                       svg={
                         <HeaderMenuIcon
                           className={clsx('ams-header__menu-icon', open && 'ams-header__menu-icon--open')}

packages/react/src/Icon/Icon.test.tsx

@@ -1,7 +1,7 @@
 import { AlertIcon } from '@amsterdam/design-system-react-icons'
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
-import { Icon } from './Icon'
+import { Icon, iconSizes } from './Icon'
 import '@testing-library/jest-dom'
 
 describe('Icon', () => {
@@ -29,16 +29,14 @@ describe('Icon', () => {
     expect(svg).toBeInTheDocument()
   })
 
-  it('renders the right size classes', () => {
-    const { container: level3 } = render(<Icon size="level-3" svg={AlertIcon} />)
-    const { container: level4 } = render(<Icon size="level-4" svg={AlertIcon} />)
-    const { container: level5 } = render(<Icon size="level-5" svg={AlertIcon} />)
-    const { container: level6 } = render(<Icon size="level-6" svg={AlertIcon} />)
+  iconSizes.forEach((size) => {
+    it(`renders the correct class name for a ‘${size}’ icon`, () => {
+      const { container } = render(<Icon size={size} svg={AlertIcon} />)
 
-    expect(level3.firstChild).toHaveClass('ams-icon--size-3')
-    expect(level4.firstChild).toHaveClass('ams-icon--size-4')
-    expect(level5.firstChild).toHaveClass('ams-icon--size-5')
-    expect(level6.firstChild).toHaveClass('ams-icon--size-6')
+      const icon = container.querySelector(':only-child')
+
+      expect(icon).toHaveClass(`ams-icon--${size}`)
+    })
   })
 
   it('renders the right square class', () => {

packages/react/src/Icon/Icon.tsx

@@ -9,27 +9,28 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
 
+export const iconSizes = ['small', 'large', 'heading-3', 'heading-4', 'heading-5', 'heading-6']
+
+type IconSize = (typeof iconSizes)[number]
+
 export type IconProps = {
   /** Changes the icon colour for readability on a dark background. */
   color?: 'inverse'
-  /** The size of the icon. Corresponds with the text levels. */
-  size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
+  /** The size of the icon. Choose the size of the corresponding body text or heading. */
+  size?: IconSize
   /** Whether the icon container should be made square. */
   square?: boolean
   /** The component rendering the icon’s markup. */
   svg: Function | ReactNode
 } & HTMLAttributes<HTMLSpanElement>
 
 export const Icon = forwardRef(
-  ({ className, color, size = 'level-3', square, svg, ...restProps }: IconProps, ref: ForwardedRef<HTMLElement>) => (
+  ({ className, color, size, square, svg, ...restProps }: IconProps, ref: ForwardedRef<HTMLElement>) => (
     <span
       className={clsx(
         'ams-icon',
         color && `ams-icon--${color}`,
-        size === 'level-3' && 'ams-icon--size-3',
-        size === 'level-4' && 'ams-icon--size-4',
-        size === 'level-5' && 'ams-icon--size-5',
-        size === 'level-6' && 'ams-icon--size-6',
+        size && `ams-icon--${size}`,
         square && 'ams-icon--square',
         className,
       )}

packages/react/src/IconButton/IconButton.tsx

@@ -8,21 +8,22 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ForwardedRef } from 'react'
 import { Icon } from '../Icon'
+import type { IconProps } from '../Icon'
 
 export type IconButtonProps = {
   /** Changes the text colour for readability on a light or dark background. */
   color?: 'contrast' | 'inverse'
   /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
   label: string
-  /** The size of the icon. Corresponds with the text levels. */
-  size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
+  /** The size of the icon. Choose the size of the corresponding body text or heading. */
+  size?: IconProps['size']
   /** The component rendering the icon’s markup. */
-  svg?: Function
+  svg?: IconProps['svg']
 } & ButtonHTMLAttributes<HTMLButtonElement>
 
 export const IconButton = forwardRef(
   (
-    { className, color, label, size = 'level-5', svg = CloseIcon, ...restProps }: IconButtonProps,
+    { className, color, label, size, svg = CloseIcon, ...restProps }: IconButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => (
     <button

packages/react/src/LinkList/LinkListLink.tsx

@@ -18,12 +18,6 @@ export type LinkListLinkProps = {
   size?: 'small' | 'large'
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>
 
-const iconSizeMap = {
-  small: 'level-6',
-  medium: 'level-5',
-  large: 'level-4',
-} as const
-
 /** One link with a Link List. */
 export const LinkListLink = forwardRef(
   (
@@ -42,7 +36,7 @@ export const LinkListLink = forwardRef(
           ref={ref}
           {...restProps}
         >
-          <Icon size={iconSizeMap[size ?? 'medium']} svg={icon ?? ChevronRightIcon} />
+          <Icon size={size} svg={icon ?? ChevronRightIcon} />
           {children}
         </a>
       </li>

packages/react/src/PageMenu/PageMenuLink.tsx

@@ -17,7 +17,7 @@ export const PageMenuLink = forwardRef(
     <li>
       <a {...restProps} className={clsx('ams-page-menu__link', className)} ref={ref}>
         {children}
-        {icon && <Icon size="level-6" svg={icon} />}
+        {icon && <Icon size="small" svg={icon} />}
       </a>
     </li>
   ),

packages/react/src/Pagination/Pagination.tsx

@@ -81,7 +81,7 @@ export const Pagination = forwardRef(
         </span>
         {page !== 1 && (
           <Link className="ams-pagination__link" href={linkTemplate(page - 1)} rel="prev">
-            <Icon size="level-5" svg={ChevronLeftIcon} />
+            <Icon svg={ChevronLeftIcon} />
             <span className="ams-visually-hidden">{previousVisuallyHiddenLabel}</span>
             <span aria-hidden>{previousLabel}</span>
           </Link>
@@ -105,7 +105,7 @@ export const Pagination = forwardRef(
           <Link className="ams-pagination__link" href={linkTemplate(page + 1)} rel="next">
             <span className="ams-visually-hidden">{nextVisuallyHiddenLabel}</span>
             <span aria-hidden>{nextLabel}</span>
-            <Icon size="level-5" svg={ChevronRightIcon} />
+            <Icon svg={ChevronRightIcon} />
           </Link>
         )}
       </nav>

proprietary/tokens/build.js

@@ -122,9 +122,6 @@ defaultMode.buildAllPlatforms()
 
 modes.map((mode) => {
   const styleDictionary = new StyleDictionary({
-    log: {
-      verbosity: 'verbose',
-    },
     platforms: generateSharedConfig(mode),
     source: [`./src/**/*.${mode}.tokens.json`],
   })