feat!: Replace renamed colours for Avatar, Badge and Spotlight (#1758)

Amsterdam · Nov 20, 2024 · 5c8132a · 5c8132a
1 parent 4c03c65
commit 5c8132a
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 118 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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
@@ -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": {