feat: Add background colour and full-height prop to Screen

packages/css/src/components/screen/screen.scss

@@ -8,9 +8,14 @@
 }
 
 .ams-screen {
+  background-color: var(--ams-screen-background-color);
+  margin-inline: auto;
+
   @include reset;
+}
 
-  margin-inline: auto;
+.ams-screen--full-height {
+  min-height: 100vh;
 }
 
 .ams-screen--wide {

packages/react/src/Screen/Screen.tsx

@@ -10,12 +10,22 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 type ScreenMaxWidth = 'wide' | 'x-wide'
 
 export type ScreenProps = {
+  /** Whether the screen should stretch to the full height of the viewport. */
+  fullHeight?: boolean
+  /** The maximum width of the screen. */
   maxWidth?: ScreenMaxWidth
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const Screen = forwardRef(
-  ({ children, className, maxWidth = 'wide', ...restProps }: ScreenProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('ams-screen', `ams-screen--${maxWidth}`, className)}>
+  (
+    { children, className, fullHeight, maxWidth = 'wide', ...restProps }: ScreenProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={clsx('ams-screen', fullHeight && 'ams-screen--full-height', `ams-screen--${maxWidth}`, className)}
+    >
       {children}
     </div>
   ),

proprietary/tokens/src/components/ams/screen.tokens.json

@@ -1,6 +1,7 @@
 {
   "ams": {
     "screen": {
+      "background-color": { "value": "{ams.color.primary-white}" },
       "wide": {
         "max-width": { "value": "100rem" }
       },