Add compact grid

packages/css/src/footer/footer.scss

@@ -7,9 +7,4 @@
 
 .amsterdam-footer__top {
   background-color: var(--amsterdam-footer-top-background-color);
-  padding-block: 2.5rem;
-}
-
-.amsterdam-footer__bottom {
-  padding-block: 0.5rem;
 }

packages/css/src/grid/grid.scss

@@ -6,10 +6,12 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-grid {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+
   display: grid;
   gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
-  margin-inline: auto;
   padding-inline: var(--amsterdam-grid-padding-inline);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
@@ -20,3 +22,44 @@
     grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
   }
 }
+
+.amsterdam-grid--density-high {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-high-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline);
+}
+
+.amsterdam-grid--margin-bottom--small {
+  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--margin-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--margin-bottom--large {
+  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-grid--margin-top--small {
+  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--margin-top--medium {
+  padding-block-start: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--margin-top--large {
+  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-grid--margin-vertical--small {
+  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--margin-vertical--medium {
+  padding-block: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--margin-vertical--large {
+  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+}

packages/css/src/highlight/highlight.scss

@@ -3,10 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-.amsterdam-highlight {
-  padding-block: var(--amsterdam-highlight-padding-block);
-}
-
 .amsterdam-highlight--blue {
   background-color: var(--amsterdam-highlight-blue-background-color);
 }

packages/css/src/screen/screen.scss

@@ -9,7 +9,9 @@
 
 .amsterdam-screen {
   @include reset;
+}
 
+.amsterdam-screen--center {
   margin-inline: auto;
 }
 

packages/react/src/Grid/Grid.test.tsx

@@ -24,6 +24,48 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid')
   })
 
+  it('renders the high-density class name', () => {
+    const { container } = render(<Grid density="high" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--density-high')
+  })
+
+  it('renders a medium vertical spacing class name for a low-density grid', () => {
+    const { container } = render(<Grid marginVertical="medium" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--margin-vertical--medium')
+  })
+
+  it('renders a medium vertical spacing class name for a high-density grid', () => {
+    const { container } = render(<Grid density="high" marginVertical="medium" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--margin-vertical--medium')
+  })
+
+  it('renders a small top class name for a low-density grid', () => {
+    const { container } = render(<Grid marginTop="small" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--margin-top--small')
+  })
+
+  it('renders a small top class name for a high-density grid', () => {
+    const { container } = render(<Grid density="high" marginTop="small" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--margin-top--small')
+  })
+
+  it('renders a large bottom class name for a low-density grid', () => {
+    const { container } = render(<Grid marginBottom="large" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--margin-bottom--large')
+  })
+
+  it('renders a large bottom class name for a high-density grid', () => {
+    const { container } = render(<Grid density="high" marginBottom="large" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-grid--margin-bottom--large')
+  })
+
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
     const { container } = render(<Grid ref={ref} />)

packages/react/src/Grid/Grid.tsx

@@ -22,17 +22,76 @@ export type GridColumnNumbers = {
   wide: GridColumnNumber
 }
 
-interface GridComponent
-  extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLDivElement>> & RefAttributes<HTMLDivElement>> {
+type GridDensity = 'low' | 'high'
+
+type GridMarginSize = 'small' | 'medium' | 'large'
+
+type GridMarginVerticalProp = {
+  marginBottom?: never
+  marginTop?: never
+  /** The amount of vertical whitespace above and below the grid. */
+  marginVertical?: GridMarginSize
+}
+
+type GridMarginTopAndBottomProps = {
+  /** The amount of vertical whitespace below the grid. */
+  marginBottom?: GridMarginSize
+  /** The amount of vertical whitespace above the grid. */
+  marginTop?: GridMarginSize
+  marginVertical?: never
+}
+
+export type GridProps = {
+  /**
+   * The density of the grid: low (for websites) or high (for applications).
+   * Adjusts the pace with which columns get wider, and the start width as well.
+   * This is to be implemented more generally – it will be moved into a theme soon.
+   */
+  density?: GridDensity
+} & (GridMarginVerticalProp | GridMarginTopAndBottomProps) &
+  PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+const marginClasses = (
+  marginBottom?: GridMarginSize,
+  marginTop?: GridMarginSize,
+  marginVertical?: GridMarginSize,
+): string[] => {
+  const classes = [] as string[]
+
+  if (marginVertical) {
+    return [`amsterdam-grid--margin-vertical--${marginVertical}`]
+  }
+
+  if (marginBottom) {
+    classes.push(`amsterdam-grid--margin-bottom--${marginBottom}`)
+  }
+
+  if (marginTop) {
+    classes.push(`amsterdam-grid--margin-top--${marginTop}`)
+  }
+
+  return classes
+}
+
+interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> {
   Cell: typeof GridCell
 }
 
 export const Grid = forwardRef(
   (
-    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
+    { children, className, density = 'low', marginBottom, marginTop, marginVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-grid', className)}>
+    <div
+      {...restProps}
+      ref={ref}
+      className={clsx(
+        'amsterdam-grid',
+        density && `amsterdam-grid--density-${density}`,
+        marginClasses(marginBottom, marginTop, marginVertical),
+        className,
+      )}
+    >
       {children}
     </div>
   ),

packages/react/src/Grid/GridCell.tsx

@@ -23,7 +23,6 @@ type GridCellColumnProps = {
   start?: GridColumnNumber | GridColumnNumbers
 }
 
-// The discriminated union and the `never` types prevent using `fullWidth` together with `span` or `start`.
 export type GridCellProps = (GridCellFullWidthProp | GridCellColumnProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 

packages/react/src/Screen/Screen.tsx

@@ -6,15 +6,24 @@
 import clsx from 'clsx'
 import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
+type ScreenAlign = 'center' | 'start'
 type ScreenMaxWidth = 'wide' | 'x-wide'
 
 export interface ScreenProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+  align?: ScreenAlign
   maxWidth?: ScreenMaxWidth
 }
 
 export const Screen = forwardRef(
-  ({ children, className, maxWidth = 'wide', ...restProps }: ScreenProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-screen', `amsterdam-screen--${maxWidth}`, className)}>
+  (
+    { align = 'center', children, className, maxWidth, ...restProps }: ScreenProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={clsx('amsterdam-screen', `amsterdam-screen--${align}`, `amsterdam-screen--${maxWidth}`, className)}
+    >
       {children}
     </div>
   ),

proprietary/tokens/src/components/amsterdam/grid.tokens.json

@@ -4,13 +4,25 @@
       "column-count": {
         "value": "4"
       },
-      "gap": {
-        "value": "clamp(0.5rem, 0.375rem + 3.125vw, 3.5rem)",
-        "comment": "Grows from 8px at 320px wide to 56px at 1440px wide."
+      "density-low": {
+        "gap": {
+          "value": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
+          "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
+        },
+        "padding-inline": {
+          "value": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)",
+          "comment": "Equals 1.5 times the gap."
+        }
       },
-      "padding-inline": {
-        "value": "clamp(0.75rem, 0.5625rem + 4.875vw, 5.25rem)",
-        "comment": "Equals 1.5 times the gap."
+      "density-high": {
+        "gap": {
+          "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+          "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
+        },
+        "padding-inline": {
+          "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+          "comment": "Equals the gap."
+        }
       },
       "medium": {
         "column-count": {

proprietary/tokens/src/components/amsterdam/highlight.tokens.json

@@ -1,9 +1,6 @@
 {
   "amsterdam": {
     "highlight": {
-      "padding-block": {
-        "value": "2rem"
-      },
       "blue": {
         "background-color": {
           "value": "{amsterdam.color.primary-blue}"