Disallow blue Spotlight and make purple the default

Amsterdam · Dec 19, 2024 · 739ee93 · 739ee93
1 parent fa42211
commit 739ee93
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 38 deletions.
diff --git a/packages/css/src/components/spotlight/README.md b/packages/css/src/components/spotlight/README.md
@@ -7,6 +7,10 @@ Emphasizes a section on a page through a distinctive background colour.
 ## Guidelines
 
 - Display the Spotlight at the entire width of the [Screen](/docs/components-layout-screen--docs); do not position it on the [Grid](/docs/components-layout-grid--docs).
+- Do not use other background colours than the options below.
+  The blue appearance of Footer must remain unique – this is why that colour is not an option for Spotlight.
+  Red, black and grey aren’t options either.
+- The default background is purple, but the colours can be chosen freely – they do not convey a meaning or theme in itself.
 - Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
 
 ## Relevant WCAG requirements

diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss
@@ -3,12 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
-.ams-spotlight--azure {
-  background-color: var(--ams-spotlight-azure-background-color);
+.ams-spotlight {
+  background-color: var(--ams-spotlight-background-color);
 }
 
-.ams-spotlight--blue {
-  background-color: var(--ams-spotlight-blue-background-color);
+.ams-spotlight--azure {
+  background-color: var(--ams-spotlight-azure-background-color);
 }
 
 .ams-spotlight--green {
@@ -27,10 +27,6 @@
   background-color: var(--ams-spotlight-orange-background-color);
 }
 
-.ams-spotlight--purple {
-  background-color: var(--ams-spotlight-purple-background-color);
-}
-
 .ams-spotlight--yellow {
   background-color: var(--ams-spotlight-yellow-background-color);
 }
diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx
@@ -6,9 +6,10 @@
 import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export const spotlightColors = ['azure', 'blue', 'green', 'lime', 'magenta', 'orange', 'purple', 'yellow'] as const
+const defaultColor = 'purple'
+export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'] as const
 
-type SpotlightColor = (typeof spotlightColors)[number]
+type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor
 
 export type SpotlightProps = {
   /** The HTML element to use. */
@@ -18,8 +19,12 @@ export type SpotlightProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Spotlight = forwardRef(
-  ({ children, className, as: Tag = 'div', color = 'blue', ...restProps }: SpotlightProps, ref: any) => (
-    <Tag {...restProps} ref={ref} className={clsx('ams-spotlight', `ams-spotlight--${color}`, className)}>
+  ({ as: Tag = 'div', children, className, color = defaultColor, ...restProps }: SpotlightProps, ref: any) => (
+    <Tag
+      {...restProps}
+      ref={ref}
+      className={clsx('ams-spotlight', { [`ams-spotlight--${color}`]: color !== defaultColor }, className)}
+    >
       {children}
     </Tag>
   ),

diff --git a/proprietary/tokens/src/components/ams/spotlight.tokens.json b/proprietary/tokens/src/components/ams/spotlight.tokens.json
@@ -1,12 +1,10 @@
 {
   "ams": {
     "spotlight": {
+      "background-color": { "value": "{ams.brand.color.purple.60}" },
       "azure": {
         "background-color": { "value": "{ams.brand.color.azure.60}" }
       },
-      "blue": {
-        "background-color": { "value": "{ams.brand.color.blue.60}" }
-      },
       "green": {
         "background-color": { "value": "{ams.brand.color.green.60}" }
       },
@@ -19,9 +17,6 @@
       "orange": {
         "background-color": { "value": "{ams.brand.color.orange.60}" }
       },
-      "purple": {
-        "background-color": { "value": "{ams.brand.color.purple.60}" }
-      },
       "yellow": {
         "background-color": { "value": "{ams.brand.color.yellow.60}" }
       }

diff --git a/storybook/src/components/Spotlight/Spotlight.docs.mdx b/storybook/src/components/Spotlight/Spotlight.docs.mdx
@@ -18,10 +18,6 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Azure} />
 
-### Blue
-
-<Canvas of={SpotlightStories.Blue} />
-
 ### Green
 
 <Canvas of={SpotlightStories.Green} />
@@ -38,10 +34,6 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 <Canvas of={SpotlightStories.Orange} />
 
-### Purple
-
-<Canvas of={SpotlightStories.Purple} />
-
 ### Yellow
 
 <Canvas of={SpotlightStories.Yellow} />

diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx
@@ -36,12 +36,6 @@ export const Azure: Story = {
   },
 }
 
-export const Blue: Story = {
-  args: {
-    color: 'blue',
-  },
-}
-
 export const Green: Story = {
   args: {
     color: 'green',
@@ -66,12 +60,6 @@ export const Orange: Story = {
   },
 }
 
-export const Purple: Story = {
-  args: {
-    color: 'purple',
-  },
-}
-
 export const Yellow: Story = {
   args: {
     color: 'yellow',