Replace changed colour names in Spotlight

Amsterdam · Nov 19, 2024 · dca4c14 · dca4c14
1 parent 063ff27
commit dca4c14
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',
   },
 }