From 532492acae29bdbf34d99bc68b03f02c54410810 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 19 Nov 2024 20:53:13 +0100
Subject: [PATCH 1/6] Replace changed colour names in Avatar

---
 .../css/src/components/avatar/avatar.scss     | 39 +++++++++++--------
 packages/react/src/Avatar/Avatar.tsx          | 11 +++---
 .../src/components/ams/avatar.tokens.json     | 16 +++++---
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss
index eb5f47e9f5..4dc47561e0 100644
--- a/packages/css/src/components/avatar/avatar.scss
+++ b/packages/css/src/components/avatar/avatar.scss
@@ -47,34 +47,39 @@
   color: var(--ams-avatar-blue-color);
 }
 
-.ams-avatar--dark-green {
-  background-color: var(--ams-avatar-dark-green-background-color);
-  color: var(--ams-avatar-dark-green-color);
-}
-
 .ams-avatar--green {
   background-color: var(--ams-avatar-green-background-color);
   color: var(--ams-avatar-green-color);
 }
 
-.ams-avatar--grey-1 {
-  background-color: var(--ams-avatar-grey-1-background-color);
-  color: var(--ams-avatar-grey-1-color);
+.ams-avatar--lime {
+  background-color: var(--ams-avatar-lime-background-color);
+  color: var(--ams-avatar-lime-color);
+}
+
+.ams-avatar--neutral-20 {
+  background-color: var(--ams-avatar-neutral-20-background-color);
+  color: var(--ams-avatar-neutral-20-color);
+}
+
+.ams-avatar--neutral-40 {
+  background-color: var(--ams-avatar-neutral-40-background-color);
+  color: var(--ams-avatar-neutral-40-color);
 }
 
-.ams-avatar--grey-2 {
-  background-color: var(--ams-avatar-grey-2-background-color);
-  color: var(--ams-avatar-grey-2-color);
+.ams-avatar--neutral-60 {
+  background-color: var(--ams-avatar-neutral-60-background-color);
+  color: var(--ams-avatar-neutral-60-color);
 }
 
-.ams-avatar--grey-3 {
-  background-color: var(--ams-avatar-grey-3-background-color);
-  color: var(--ams-avatar-grey-3-color);
+.ams-avatar--neutral-80 {
+  background-color: var(--ams-avatar-neutral-80-background-color);
+  color: var(--ams-avatar-neutral-80-color);
 }
 
-.ams-avatar--light-blue {
-  background-color: var(--ams-avatar-light-blue-background-color);
-  color: var(--ams-avatar-light-blue-color);
+.ams-avatar--azure {
+  background-color: var(--ams-avatar-azure-background-color);
+  color: var(--ams-avatar-azure-color);
 }
 
 .ams-avatar--magenta {
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index a103565e3d..389cf98e8a 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -13,12 +13,13 @@ import { Image } from '../Image'
 export const avatarColors = [
   'black',
   'blue',
-  'dark-green',
   'green',
-  'grey-1',
-  'grey-2',
-  'grey-3',
-  'light-blue',
+  'lime',
+  'neutral-20',
+  'neutral-40',
+  'neutral-60',
+  'neutral-80',
+  'azure',
   'magenta',
   'orange',
   'purple',
diff --git a/proprietary/tokens/src/components/ams/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json
index 3702fd6b6b..80caea030d 100644
--- a/proprietary/tokens/src/components/ams/avatar.tokens.json
+++ b/proprietary/tokens/src/components/ams/avatar.tokens.json
@@ -16,30 +16,34 @@
         "background-color": { "value": "{ams.brand.color.blue.60}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
-      "dark-green": {
+      "green": {
         "background-color": { "value": "{ams.brand.color.green.60}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
       "forced-colors": {
         "border-width": { "value": "{ams.border.width.md}" }
       },
-      "green": {
+      "lime": {
         "background-color": { "value": "{ams.brand.color.lime.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },
-      "grey-1": {
+      "neutral-20": {
         "background-color": { "value": "{ams.brand.color.neutral.20}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },
-      "grey-2": {
+      "neutral-40": {
         "background-color": { "value": "{ams.brand.color.neutral.40}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },
-      "grey-3": {
+      "neutral-60": {
         "background-color": { "value": "{ams.brand.color.neutral.60}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
-      "light-blue": {
+      "neutral-80": {
+        "background-color": { "value": "{ams.brand.color.neutral.80}" },
+        "color": { "value": "{ams.brand.color.neutral.0}" }
+      },
+      "azure": {
         "background-color": { "value": "{ams.brand.color.azure.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },

From 58a59c4669a0622f4a9473bb08e5d1087c1e2db5 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 19 Nov 2024 21:02:35 +0100
Subject: [PATCH 2/6] Sort colour names in Avatar

---
 .../css/src/components/avatar/avatar.scss     | 20 ++++++++---------
 packages/react/src/Avatar/Avatar.tsx          |  4 ++--
 .../src/components/ams/avatar.tokens.json     | 22 +++++++++----------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss
index 4dc47561e0..4cfeb6fff6 100644
--- a/packages/css/src/components/avatar/avatar.scss
+++ b/packages/css/src/components/avatar/avatar.scss
@@ -37,6 +37,11 @@
   vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
 }
 
+.ams-avatar--azure {
+  background-color: var(--ams-avatar-azure-background-color);
+  color: var(--ams-avatar-azure-color);
+}
+
 .ams-avatar--black {
   background-color: var(--ams-avatar-black-background-color);
   color: var(--ams-avatar-black-color);
@@ -57,6 +62,11 @@
   color: var(--ams-avatar-lime-color);
 }
 
+.ams-avatar--magenta {
+  background-color: var(--ams-avatar-magenta-background-color);
+  color: var(--ams-avatar-magenta-color);
+}
+
 .ams-avatar--neutral-20 {
   background-color: var(--ams-avatar-neutral-20-background-color);
   color: var(--ams-avatar-neutral-20-color);
@@ -77,16 +87,6 @@
   color: var(--ams-avatar-neutral-80-color);
 }
 
-.ams-avatar--azure {
-  background-color: var(--ams-avatar-azure-background-color);
-  color: var(--ams-avatar-azure-color);
-}
-
-.ams-avatar--magenta {
-  background-color: var(--ams-avatar-magenta-background-color);
-  color: var(--ams-avatar-magenta-color);
-}
-
 .ams-avatar--orange {
   background-color: var(--ams-avatar-orange-background-color);
   color: var(--ams-avatar-orange-color);
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index 389cf98e8a..b1dea71599 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -11,16 +11,16 @@ import { Icon } from '../Icon'
 import { Image } from '../Image'
 
 export const avatarColors = [
+  'azure',
   'black',
   'blue',
   'green',
   'lime',
+  'magenta',
   'neutral-20',
   'neutral-40',
   'neutral-60',
   'neutral-80',
-  'azure',
-  'magenta',
   'orange',
   'purple',
   'red',
diff --git a/proprietary/tokens/src/components/ams/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json
index 80caea030d..63727d204b 100644
--- a/proprietary/tokens/src/components/ams/avatar.tokens.json
+++ b/proprietary/tokens/src/components/ams/avatar.tokens.json
@@ -8,6 +8,10 @@
       "line-height": { "value": "{ams.text.level.6.line-height}" },
       "padding-block": { "value": "{ams.space.xs}" },
       "padding-inline": { "value": "{ams.space.xs}" },
+      "azure": {
+        "background-color": { "value": "{ams.brand.color.azure.60}" },
+        "color": { "value": "{ams.brand.color.neutral.100}" }
+      },
       "black": {
         "background-color": { "value": "{ams.brand.color.neutral.100}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
@@ -20,13 +24,14 @@
         "background-color": { "value": "{ams.brand.color.green.60}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
-      "forced-colors": {
-        "border-width": { "value": "{ams.border.width.md}" }
-      },
       "lime": {
         "background-color": { "value": "{ams.brand.color.lime.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },
+      "magenta": {
+        "background-color": { "value": "{ams.brand.color.magenta.60}" },
+        "color": { "value": "{ams.brand.color.neutral.0}" }
+      },
       "neutral-20": {
         "background-color": { "value": "{ams.brand.color.neutral.20}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
@@ -43,14 +48,6 @@
         "background-color": { "value": "{ams.brand.color.neutral.80}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
-      "azure": {
-        "background-color": { "value": "{ams.brand.color.azure.60}" },
-        "color": { "value": "{ams.brand.color.neutral.100}" }
-      },
-      "magenta": {
-        "background-color": { "value": "{ams.brand.color.magenta.60}" },
-        "color": { "value": "{ams.brand.color.neutral.0}" }
-      },
       "orange": {
         "background-color": { "value": "{ams.brand.color.orange.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
@@ -70,6 +67,9 @@
       "yellow": {
         "background-color": { "value": "{ams.brand.color.yellow.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
+      },
+      "forced-colors": {
+        "border-width": { "value": "{ams.border.width.md}" }
       }
     }
   }

From 1734c159533a298c60528038032730bb255c0dd3 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 19 Nov 2024 21:04:50 +0100
Subject: [PATCH 3/6] Replace changed colour names in Badge

---
 packages/css/src/components/badge/badge.scss  | 39 +++++++++++--------
 packages/react/src/Badge/Badge.test.tsx       |  2 +-
 packages/react/src/Badge/Badge.tsx            | 13 ++++---
 .../src/components/ams/badge.tokens.json      | 16 +++++---
 4 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
index d53d17bede..bd3b228e73 100644
--- a/packages/css/src/components/badge/badge.scss
+++ b/packages/css/src/components/badge/badge.scss
@@ -22,34 +22,39 @@
   color: var(--ams-badge-blue-color);
 }
 
-.ams-badge--dark-green {
-  background-color: var(--ams-badge-dark-green-background-color);
-  color: var(--ams-badge-dark-green-color);
-}
-
 .ams-badge--green {
   background-color: var(--ams-badge-green-background-color);
   color: var(--ams-badge-green-color);
 }
 
-.ams-badge--grey-1 {
-  background-color: var(--ams-badge-grey-1-background-color);
-  color: var(--ams-badge-grey-1-color);
+.ams-badge--lime {
+  background-color: var(--ams-badge-lime-background-color);
+  color: var(--ams-badge-lime-color);
+}
+
+.ams-badge--neutral-20 {
+  background-color: var(--ams-badge-neutral-20-background-color);
+  color: var(--ams-badge-neutral-20-color);
+}
+
+.ams-badge--neutral-40 {
+  background-color: var(--ams-badge-neutral-40-background-color);
+  color: var(--ams-badge-neutral-40-color);
 }
 
-.ams-badge--grey-2 {
-  background-color: var(--ams-badge-grey-2-background-color);
-  color: var(--ams-badge-grey-2-color);
+.ams-badge--neutral-60 {
+  background-color: var(--ams-badge-neutral-60-background-color);
+  color: var(--ams-badge-neutral-60-color);
 }
 
-.ams-badge--grey-3 {
-  background-color: var(--ams-badge-grey-3-background-color);
-  color: var(--ams-badge-grey-3-color);
+.ams-badge--neutral-80 {
+  background-color: var(--ams-badge-neutral-80-background-color);
+  color: var(--ams-badge-neutral-80-color);
 }
 
-.ams-badge--light-blue {
-  background-color: var(--ams-badge-light-blue-background-color);
-  color: var(--ams-badge-light-blue-color);
+.ams-badge--azure {
+  background-color: var(--ams-badge-azure-background-color);
+  color: var(--ams-badge-azure-color);
 }
 
 .ams-badge--magenta {
diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx
index a059070d80..58caa116bb 100644
--- a/packages/react/src/Badge/Badge.test.tsx
+++ b/packages/react/src/Badge/Badge.test.tsx
@@ -52,7 +52,7 @@ describe('Badge', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-badge--dark-green')
+    expect(component).toHaveClass('ams-badge--green')
   })
 
   badgeColors.map((color) =>
diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx
index 3ccd0cb457..92175e49f0 100644
--- a/packages/react/src/Badge/Badge.tsx
+++ b/packages/react/src/Badge/Badge.tsx
@@ -10,12 +10,13 @@ import type { ForwardedRef, HTMLAttributes } from 'react'
 export const badgeColors = [
   'black',
   'blue',
-  'dark-green',
   'green',
-  'grey-1',
-  'grey-2',
-  'grey-3',
-  'light-blue',
+  'lime',
+  'neutral-20',
+  'neutral-40',
+  'neutral-60',
+  'neutral-80',
+  'azure',
   'magenta',
   'orange',
   'purple',
@@ -34,7 +35,7 @@ export type BadgeProps = {
 } & HTMLAttributes<HTMLElement>
 
 export const Badge = forwardRef(
-  ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
+  ({ label, className, color = 'green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
     <span {...restProps} ref={ref} className={clsx('ams-badge', `ams-badge--${color}`, className)}>
       {label}
     </span>
diff --git a/proprietary/tokens/src/components/ams/badge.tokens.json b/proprietary/tokens/src/components/ams/badge.tokens.json
index 403c368809..6f8673badb 100644
--- a/proprietary/tokens/src/components/ams/badge.tokens.json
+++ b/proprietary/tokens/src/components/ams/badge.tokens.json
@@ -14,27 +14,31 @@
         "background-color": { "value": "{ams.brand.color.blue.60}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
-      "dark-green": {
+      "green": {
         "background-color": { "value": "{ams.brand.color.green.60}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
-      "green": {
+      "lime": {
         "background-color": { "value": "{ams.brand.color.lime.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },
-      "grey-1": {
+      "neutral-20": {
         "background-color": { "value": "{ams.brand.color.neutral.20}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },
-      "grey-2": {
+      "neutral-40": {
         "background-color": { "value": "{ams.brand.color.neutral.40}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },
-      "grey-3": {
+      "neutral-60": {
         "background-color": { "value": "{ams.brand.color.neutral.60}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
-      "light-blue": {
+      "neutral-80": {
+        "background-color": { "value": "{ams.brand.color.neutral.80}" },
+        "color": { "value": "{ams.brand.color.neutral.0}" }
+      },
+      "azure": {
         "background-color": { "value": "{ams.brand.color.azure.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },

From 063ff27cc6a8ab2597425db7f5227a96ab4e56d6 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 19 Nov 2024 21:06:14 +0100
Subject: [PATCH 4/6] Sort colour names in Badge

---
 packages/css/src/components/badge/badge.scss  | 20 +++++++++----------
 packages/react/src/Badge/Badge.tsx            |  4 ++--
 .../src/components/ams/badge.tokens.json      | 16 +++++++--------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
index bd3b228e73..63416163b3 100644
--- a/packages/css/src/components/badge/badge.scss
+++ b/packages/css/src/components/badge/badge.scss
@@ -12,6 +12,11 @@
   padding-inline: var(--ams-badge-padding-inline);
 }
 
+.ams-badge--azure {
+  background-color: var(--ams-badge-azure-background-color);
+  color: var(--ams-badge-azure-color);
+}
+
 .ams-badge--black {
   background-color: var(--ams-badge-black-background-color);
   color: var(--ams-badge-black-color);
@@ -32,6 +37,11 @@
   color: var(--ams-badge-lime-color);
 }
 
+.ams-badge--magenta {
+  background-color: var(--ams-badge-magenta-background-color);
+  color: var(--ams-badge-magenta-color);
+}
+
 .ams-badge--neutral-20 {
   background-color: var(--ams-badge-neutral-20-background-color);
   color: var(--ams-badge-neutral-20-color);
@@ -52,16 +62,6 @@
   color: var(--ams-badge-neutral-80-color);
 }
 
-.ams-badge--azure {
-  background-color: var(--ams-badge-azure-background-color);
-  color: var(--ams-badge-azure-color);
-}
-
-.ams-badge--magenta {
-  background-color: var(--ams-badge-magenta-background-color);
-  color: var(--ams-badge-magenta-color);
-}
-
 .ams-badge--orange {
   background-color: var(--ams-badge-orange-background-color);
   color: var(--ams-badge-orange-color);
diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx
index 92175e49f0..ecd9f3633d 100644
--- a/packages/react/src/Badge/Badge.tsx
+++ b/packages/react/src/Badge/Badge.tsx
@@ -8,16 +8,16 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
 export const badgeColors = [
+  'azure',
   'black',
   'blue',
   'green',
   'lime',
+  'magenta',
   'neutral-20',
   'neutral-40',
   'neutral-60',
   'neutral-80',
-  'azure',
-  'magenta',
   'orange',
   'purple',
   'red',
diff --git a/proprietary/tokens/src/components/ams/badge.tokens.json b/proprietary/tokens/src/components/ams/badge.tokens.json
index 6f8673badb..e5b1914e71 100644
--- a/proprietary/tokens/src/components/ams/badge.tokens.json
+++ b/proprietary/tokens/src/components/ams/badge.tokens.json
@@ -6,6 +6,10 @@
       "font-weight": { "value": "{ams.text.font-weight.bold}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "padding-inline": { "value": "{ams.space.xs}" },
+      "azure": {
+        "background-color": { "value": "{ams.brand.color.azure.60}" },
+        "color": { "value": "{ams.brand.color.neutral.100}" }
+      },
       "black": {
         "background-color": { "value": "{ams.brand.color.neutral.100}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
@@ -22,6 +26,10 @@
         "background-color": { "value": "{ams.brand.color.lime.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
       },
+      "magenta": {
+        "background-color": { "value": "{ams.brand.color.magenta.60}" },
+        "color": { "value": "{ams.brand.color.neutral.0}" }
+      },
       "neutral-20": {
         "background-color": { "value": "{ams.brand.color.neutral.20}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }
@@ -38,14 +46,6 @@
         "background-color": { "value": "{ams.brand.color.neutral.80}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
-      "azure": {
-        "background-color": { "value": "{ams.brand.color.azure.60}" },
-        "color": { "value": "{ams.brand.color.neutral.100}" }
-      },
-      "magenta": {
-        "background-color": { "value": "{ams.brand.color.magenta.60}" },
-        "color": { "value": "{ams.brand.color.neutral.0}" }
-      },
       "orange": {
         "background-color": { "value": "{ams.brand.color.orange.60}" },
         "color": { "value": "{ams.brand.color.neutral.100}" }

From dca4c1465b80ae510a01408d8f7fb02157212ea1 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 19 Nov 2024 21:16:17 +0100
Subject: [PATCH 5/6] Replace changed colour names in Spotlight

---
 .../src/components/spotlight/spotlight.scss    | 16 ++++++++--------
 packages/react/src/Footer/FooterTop.tsx        |  2 +-
 packages/react/src/Spotlight/Spotlight.tsx     | 13 ++-----------
 .../src/components/ams/spotlight.tokens.json   |  8 ++++----
 .../components/Spotlight/Spotlight.docs.mdx    | 14 +++++++-------
 .../components/Spotlight/Spotlight.stories.tsx | 18 +++++++++---------
 6 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss
index 7ad4f952a3..e3ce9d208b 100644
--- a/packages/css/src/components/spotlight/spotlight.scss
+++ b/packages/css/src/components/spotlight/spotlight.scss
@@ -3,22 +3,22 @@
  * Copyright Gemeente Amsterdam
  */
 
-.ams-spotlight--blue {
-  background-color: var(--ams-spotlight-blue-background-color);
-}
-
-.ams-spotlight--dark-blue {
-  background-color: var(--ams-spotlight-dark-blue-background-color);
+.ams-spotlight--azure {
+  background-color: var(--ams-spotlight-azure-background-color);
 }
 
-.ams-spotlight--dark-green {
-  background-color: var(--ams-spotlight-dark-green-background-color);
+.ams-spotlight--blue {
+  background-color: var(--ams-spotlight-blue-background-color);
 }
 
 .ams-spotlight--green {
   background-color: var(--ams-spotlight-green-background-color);
 }
 
+.ams-spotlight--lime {
+  background-color: var(--ams-spotlight-lime-background-color);
+}
+
 .ams-spotlight--magenta {
   background-color: var(--ams-spotlight-magenta-background-color);
 }
diff --git a/packages/react/src/Footer/FooterTop.tsx b/packages/react/src/Footer/FooterTop.tsx
index b70f39b6ab..d7dcf052e1 100644
--- a/packages/react/src/Footer/FooterTop.tsx
+++ b/packages/react/src/Footer/FooterTop.tsx
@@ -12,7 +12,7 @@ export type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const FooterTop = forwardRef(
   ({ children, className, ...restProps }: FooterTopProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <Spotlight {...restProps} color="dark-blue" ref={ref} className={clsx('ams-footer__top', className)}>
+    <Spotlight {...restProps} color="blue" ref={ref} className={clsx('ams-footer__top', className)}>
       {children}
     </Spotlight>
   ),
diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx
index ab88d90e02..cc3e9799ba 100644
--- a/packages/react/src/Spotlight/Spotlight.tsx
+++ b/packages/react/src/Spotlight/Spotlight.tsx
@@ -6,16 +6,7 @@
 import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export const spotlightColors = [
-  'blue',
-  'dark-blue',
-  'dark-green',
-  'green',
-  'magenta',
-  'orange',
-  'purple',
-  'yellow',
-] as const
+export const spotlightColors = ['azure', 'blue', 'green', 'lime', 'magenta', 'orange', 'purple', 'yellow'] as const
 
 type SpotlightColor = (typeof spotlightColors)[number]
 
@@ -27,7 +18,7 @@ export type SpotlightProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Spotlight = forwardRef(
-  ({ children, className, as: Tag = 'div', color = 'dark-blue', ...restProps }: SpotlightProps, ref: any) => (
+  ({ children, className, as: Tag = 'div', color = 'blue', ...restProps }: SpotlightProps, ref: any) => (
     <Tag {...restProps} ref={ref} className={clsx('ams-spotlight', `ams-spotlight--${color}`, className)}>
       {children}
     </Tag>
diff --git a/proprietary/tokens/src/components/ams/spotlight.tokens.json b/proprietary/tokens/src/components/ams/spotlight.tokens.json
index 336636e29c..e6bc2022f4 100644
--- a/proprietary/tokens/src/components/ams/spotlight.tokens.json
+++ b/proprietary/tokens/src/components/ams/spotlight.tokens.json
@@ -1,16 +1,16 @@
 {
   "ams": {
     "spotlight": {
-      "blue": {
+      "azure": {
         "background-color": { "value": "{ams.brand.color.azure.60}" }
       },
-      "dark-blue": {
+      "blue": {
         "background-color": { "value": "{ams.brand.color.blue.60}" }
       },
-      "dark-green": {
+      "green": {
         "background-color": { "value": "{ams.brand.color.green.60}" }
       },
-      "green": {
+      "lime": {
         "background-color": { "value": "{ams.brand.color.lime.60}" }
       },
       "magenta": {
diff --git a/storybook/src/components/Spotlight/Spotlight.docs.mdx b/storybook/src/components/Spotlight/Spotlight.docs.mdx
index 612190f276..4e37b88b6e 100644
--- a/storybook/src/components/Spotlight/Spotlight.docs.mdx
+++ b/storybook/src/components/Spotlight/Spotlight.docs.mdx
@@ -14,21 +14,21 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 ## Examples
 
-### Blue
+### Azure
 
-<Canvas of={SpotlightStories.Blue} />
+<Canvas of={SpotlightStories.Azure} />
 
-### Dark Blue
+### Blue
 
-<Canvas of={SpotlightStories.DarkBlue} />
+<Canvas of={SpotlightStories.Blue} />
 
-### Dark Green
+### Green
 
-<Canvas of={SpotlightStories.DarkGreen} />
+<Canvas of={SpotlightStories.Green} />
 
 ### Green
 
-<Canvas of={SpotlightStories.Green} />
+<Canvas of={SpotlightStories.Lime} />
 
 ### Magenta
 
diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx
index 4383b9f57d..37afba8063 100644
--- a/storybook/src/components/Spotlight/Spotlight.stories.tsx
+++ b/storybook/src/components/Spotlight/Spotlight.stories.tsx
@@ -17,7 +17,7 @@ const meta = {
     <Spotlight as={as} color={color}>
       <Grid paddingVertical="medium">
         <Grid.Cell span="all">
-          <Blockquote inverseColor={!color || !['green', 'yellow'].includes(color)}>{quote}</Blockquote>
+          <Blockquote inverseColor={!color || !['lime', 'yellow'].includes(color)}>{quote}</Blockquote>
         </Grid.Cell>
       </Grid>
     </Spotlight>
@@ -30,27 +30,27 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const Blue: Story = {
+export const Azure: Story = {
   args: {
-    color: 'blue',
+    color: 'azure',
   },
 }
 
-export const DarkBlue: Story = {
+export const Blue: Story = {
   args: {
-    color: 'dark-blue',
+    color: 'blue',
   },
 }
 
-export const DarkGreen: Story = {
+export const Green: Story = {
   args: {
-    color: 'dark-green',
+    color: 'green',
   },
 }
 
-export const Green: Story = {
+export const Lime: Story = {
   args: {
-    color: 'green',
+    color: 'lime',
   },
 }
 

From e6176a799e4e4a7f61de63bd390a123d4471718a Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 19 Nov 2024 21:41:27 +0100
Subject: [PATCH 6/6] Fix story heading

---
 storybook/src/components/Spotlight/Spotlight.docs.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/src/components/Spotlight/Spotlight.docs.mdx b/storybook/src/components/Spotlight/Spotlight.docs.mdx
index 4e37b88b6e..39929e1f71 100644
--- a/storybook/src/components/Spotlight/Spotlight.docs.mdx
+++ b/storybook/src/components/Spotlight/Spotlight.docs.mdx
@@ -26,7 +26,7 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Green} />
 
-### Green
+### Lime
 
 <Canvas of={SpotlightStories.Lime} />