From 4c03c65933da539af223c73e581bf99274bc86a4 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 20 Nov 2024 09:43:39 +0100
Subject: [PATCH 1/2] feat!: Change colours for Alert (#1757)

---
 packages/css/src/components/alert/alert.scss         |  4 ++++
 packages/react/src/Alert/Alert.tsx                   |  2 +-
 .../tokens/src/components/ams/alert.tokens.json      | 12 +++++-------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss
index 47d4d0a207..52a0e0a817 100644
--- a/packages/css/src/components/alert/alert.scss
+++ b/packages/css/src/components/alert/alert.scss
@@ -23,17 +23,21 @@
 }
 
 .ams-alert--error {
+  background-color: var(--ams-alert-error-background-color);
   border-color: var(--ams-alert-error-border-color);
 }
 
 .ams-alert--info {
+  background-color: var(--ams-alert-info-background-color);
   border-color: var(--ams-alert-info-border-color);
 }
 
 .ams-alert--success {
+  background-color: var(--ams-alert-success-background-color);
   border-color: var(--ams-alert-success-border-color);
 }
 
 .ams-alert--warning {
+  background-color: var(--ams-alert-warning-background-color);
   border-color: var(--ams-alert-warning-border-color);
 }
diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx
index fddfb9841d..d3d4357f07 100644
--- a/packages/react/src/Alert/Alert.tsx
+++ b/packages/react/src/Alert/Alert.tsx
@@ -68,7 +68,7 @@ export const Alert = forwardRef(
           )}
           {children}
         </div>
-        {closeable && <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />}
+        {closeable && <IconButton contrastColor label={closeButtonLabel} size={alertSize} onClick={onClose} />}
       </Tag>
     )
   },
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index df8fe6b937..3d0c670451 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -7,23 +7,21 @@
       "padding-block": { "value": "{ams.space.md}" },
       "padding-inline": { "value": "{ams.space.lg}" },
       "error": {
+        "background-color": { "value": "{ams.brand.color.red.20}" },
         "border-color": { "value": "{ams.brand.color.red.60}" }
       },
       "info": {
-        "border-color": { "value": "{ams.brand.color.blue.60}" }
+        "background-color": { "value": "{ams.brand.color.azure.20}" },
+        "border-color": { "value": "{ams.brand.color.azure.60}" }
       },
       "success": {
+        "background-color": { "value": "{ams.brand.color.green.20}" },
         "border-color": { "value": "{ams.brand.color.green.60}" }
       },
       "warning": {
+        "background-color": { "value": "{ams.brand.color.orange.20}" },
         "border-color": { "value": "{ams.brand.color.orange.60}" }
       },
-      "close": {
-        "fill": { "value": "{ams.brand.color.neutral.100}" },
-        "hover": {
-          "fill": { "value": "{ams.brand.color.blue.60}" }
-        }
-      },
       "content": {
         "gap": { "value": "{ams.space.sm}" }
       }

From 5c8132a9a616d611b7ceee192cecb327e3b45451 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 20 Nov 2024 09:48:50 +0100
Subject: [PATCH 2/2] feat!: Replace renamed colours for Avatar, Badge and
 Spotlight (#1758)

---
 .../css/src/components/avatar/avatar.scss     | 45 ++++++++++---------
 packages/css/src/components/badge/badge.scss  | 45 ++++++++++---------
 .../src/components/spotlight/spotlight.scss   | 16 +++----
 packages/react/src/Avatar/Avatar.tsx          | 11 ++---
 packages/react/src/Badge/Badge.test.tsx       |  2 +-
 packages/react/src/Badge/Badge.tsx            | 13 +++---
 packages/react/src/Footer/FooterTop.tsx       |  2 +-
 packages/react/src/Spotlight/Spotlight.tsx    | 13 +-----
 .../src/components/ams/avatar.tokens.json     | 32 +++++++------
 .../src/components/ams/badge.tokens.json      | 26 ++++++-----
 .../src/components/ams/spotlight.tokens.json  |  8 ++--
 .../components/Spotlight/Spotlight.docs.mdx   | 16 +++----
 .../Spotlight/Spotlight.stories.tsx           | 18 ++++----
 13 files changed, 129 insertions(+), 118 deletions(-)

diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss
index eb5f47e9f5..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);
@@ -47,39 +52,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--magenta {
+  background-color: var(--ams-avatar-magenta-background-color);
+  color: var(--ams-avatar-magenta-color);
 }
 
-.ams-avatar--grey-2 {
-  background-color: var(--ams-avatar-grey-2-background-color);
-  color: var(--ams-avatar-grey-2-color);
+.ams-avatar--neutral-20 {
+  background-color: var(--ams-avatar-neutral-20-background-color);
+  color: var(--ams-avatar-neutral-20-color);
 }
 
-.ams-avatar--grey-3 {
-  background-color: var(--ams-avatar-grey-3-background-color);
-  color: var(--ams-avatar-grey-3-color);
+.ams-avatar--neutral-40 {
+  background-color: var(--ams-avatar-neutral-40-background-color);
+  color: var(--ams-avatar-neutral-40-color);
 }
 
-.ams-avatar--light-blue {
-  background-color: var(--ams-avatar-light-blue-background-color);
-  color: var(--ams-avatar-light-blue-color);
+.ams-avatar--neutral-60 {
+  background-color: var(--ams-avatar-neutral-60-background-color);
+  color: var(--ams-avatar-neutral-60-color);
 }
 
-.ams-avatar--magenta {
-  background-color: var(--ams-avatar-magenta-background-color);
-  color: var(--ams-avatar-magenta-color);
+.ams-avatar--neutral-80 {
+  background-color: var(--ams-avatar-neutral-80-background-color);
+  color: var(--ams-avatar-neutral-80-color);
 }
 
 .ams-avatar--orange {
diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
index d53d17bede..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);
@@ -22,39 +27,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--magenta {
+  background-color: var(--ams-badge-magenta-background-color);
+  color: var(--ams-badge-magenta-color);
 }
 
-.ams-badge--grey-2 {
-  background-color: var(--ams-badge-grey-2-background-color);
-  color: var(--ams-badge-grey-2-color);
+.ams-badge--neutral-20 {
+  background-color: var(--ams-badge-neutral-20-background-color);
+  color: var(--ams-badge-neutral-20-color);
 }
 
-.ams-badge--grey-3 {
-  background-color: var(--ams-badge-grey-3-background-color);
-  color: var(--ams-badge-grey-3-color);
+.ams-badge--neutral-40 {
+  background-color: var(--ams-badge-neutral-40-background-color);
+  color: var(--ams-badge-neutral-40-color);
 }
 
-.ams-badge--light-blue {
-  background-color: var(--ams-badge-light-blue-background-color);
-  color: var(--ams-badge-light-blue-color);
+.ams-badge--neutral-60 {
+  background-color: var(--ams-badge-neutral-60-background-color);
+  color: var(--ams-badge-neutral-60-color);
 }
 
-.ams-badge--magenta {
-  background-color: var(--ams-badge-magenta-background-color);
-  color: var(--ams-badge-magenta-color);
+.ams-badge--neutral-80 {
+  background-color: var(--ams-badge-neutral-80-background-color);
+  color: var(--ams-badge-neutral-80-color);
 }
 
 .ams-badge--orange {
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/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index a103565e3d..b1dea71599 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -11,15 +11,16 @@ import { Icon } from '../Icon'
 import { Image } from '../Image'
 
 export const avatarColors = [
+  'azure',
   'black',
   'blue',
-  'dark-green',
   'green',
-  'grey-1',
-  'grey-2',
-  'grey-3',
-  'light-blue',
+  'lime',
   'magenta',
+  'neutral-20',
+  'neutral-40',
+  'neutral-60',
+  'neutral-80',
   'orange',
   'purple',
   'red',
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..ecd9f3633d 100644
--- a/packages/react/src/Badge/Badge.tsx
+++ b/packages/react/src/Badge/Badge.tsx
@@ -8,15 +8,16 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
 export const badgeColors = [
+  'azure',
   'black',
   'blue',
-  'dark-green',
   'green',
-  'grey-1',
-  'grey-2',
-  'grey-3',
-  'light-blue',
+  'lime',
   'magenta',
+  'neutral-20',
+  'neutral-40',
+  'neutral-60',
+  'neutral-80',
   'orange',
   'purple',
   'red',
@@ -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/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/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json
index 3702fd6b6b..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}" }
@@ -16,35 +20,32 @@
         "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": {
+      "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}" }
       },
-      "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": {
-        "background-color": { "value": "{ams.brand.color.azure.60}" },
-        "color": { "value": "{ams.brand.color.neutral.100}" }
-      },
-      "magenta": {
-        "background-color": { "value": "{ams.brand.color.magenta.60}" },
+      "neutral-80": {
+        "background-color": { "value": "{ams.brand.color.neutral.80}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
       "orange": {
@@ -66,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}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/badge.tokens.json b/proprietary/tokens/src/components/ams/badge.tokens.json
index 403c368809..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}" }
@@ -14,32 +18,32 @@
         "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": {
+      "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}" }
       },
-      "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": {
-        "background-color": { "value": "{ams.brand.color.azure.60}" },
-        "color": { "value": "{ams.brand.color.neutral.100}" }
-      },
-      "magenta": {
-        "background-color": { "value": "{ams.brand.color.magenta.60}" },
+      "neutral-80": {
+        "background-color": { "value": "{ams.brand.color.neutral.80}" },
         "color": { "value": "{ams.brand.color.neutral.0}" }
       },
       "orange": {
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..39929e1f71 100644
--- a/storybook/src/components/Spotlight/Spotlight.docs.mdx
+++ b/storybook/src/components/Spotlight/Spotlight.docs.mdx
@@ -14,22 +14,22 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 ## Examples
 
-### Blue
-
-<Canvas of={SpotlightStories.Blue} />
-
-### Dark Blue
+### Azure
 
-<Canvas of={SpotlightStories.DarkBlue} />
+<Canvas of={SpotlightStories.Azure} />
 
-### Dark Green
+### Blue
 
-<Canvas of={SpotlightStories.DarkGreen} />
+<Canvas of={SpotlightStories.Blue} />
 
 ### Green
 
 <Canvas of={SpotlightStories.Green} />
 
+### Lime
+
+<Canvas of={SpotlightStories.Lime} />
+
 ### Magenta
 
 <Canvas of={SpotlightStories.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',
   },
 }