feat: Let Footer set its own background colour (#1797)

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

@@ -6,17 +6,17 @@ Provides service information at the bottom of every page.
 
 ## Guidelines
 
-- The Footer consists of a dark blue [Spotlight](/docs/components-containers-spotlight--docs) and a [Page Menu](/docs/components-navigation-page-menu--docs).
-  It must be used on all websites for the City of Amsterdam.
-- For applications, only the Page Menu can be sufficient.
-- The Footer is the same on every page of the application.
+- The Footer usually consists of two sections: a full-width blue area and a [Page Menu](/docs/components-navigation-page-menu--docs) below it.
+- A Footer containing only a Page Menu can be sufficient for applications.
+- The Footer must be used on all websites for the City of Amsterdam.
+- It must be the same on every page.
 
-The Spotlight offers space for various practical links:
+The top section offers space for various practical links:
 
 - The first column focuses on contact information.
   The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
 - The second column contains links to relevant (online) sites or sources.
 - The third column refers to newsletters, social media, etc.
 
-The menu at the very bottom is intended for links to privacy policies, cookie statements, information about the website itself, etc.
+The menu in the bottom section is for links to privacy policies, cookie statements, information about the website itself, etc.
 Contact details should not go here.

packages/css/src/components/footer/footer.scss

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-footer__top {
+  background-color: var(--ams-footer-top-background-color);
+}

packages/css/src/components/index.scss

@@ -27,6 +27,7 @@
 @use "field/field";
 @use "file-input/file-input";
 @use "file-list/file-list";
+@use "footer/footer";
 @use "form-error-list/form-error-list";
 @use "gap/gap";
 @use "grid/grid";

packages/react/src/Footer/FooterTop.tsx

@@ -6,15 +6,14 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-import { Spotlight } from '../Spotlight/Spotlight'
 
 export type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const FooterTop = forwardRef(
   ({ children, className, ...restProps }: FooterTopProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <Spotlight {...restProps} color="blue" ref={ref} className={clsx('ams-footer__top', className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-footer__top', className)}>
       {children}
-    </Spotlight>
+    </div>
   ),
 )
 

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

@@ -0,0 +1,9 @@
+{
+  "ams": {
+    "footer": {
+      "top": {
+        "background-color": { "value": "{ams.brand.color.blue.60}" }
+      }
+    }
+  }
+}