Revert "feat!: Replace renamed colours for Avatar, Badge and Spotlight (

#1758)" This reverts commit 5c8132a.
Amsterdam · Jan 10, 2025 · 23cf0ae · 23cf0ae
1 parent d01ce80
commit 23cf0ae
Show file tree

Hide file tree

Showing 16 changed files with 107 additions and 93 deletions.
diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss
@@ -37,11 +37,6 @@
   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);
@@ -52,39 +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--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-1 {
+  background-color: var(--ams-avatar-grey-1-background-color);
+  color: var(--ams-avatar-grey-1-color);
 }
 
-.ams-avatar--neutral-20 {
-  background-color: var(--ams-avatar-neutral-20-background-color);
-  color: var(--ams-avatar-neutral-20-color);
+.ams-avatar--grey-2 {
+  background-color: var(--ams-avatar-grey-2-background-color);
+  color: var(--ams-avatar-grey-2-color);
 }
 
-.ams-avatar--neutral-40 {
-  background-color: var(--ams-avatar-neutral-40-background-color);
-  color: var(--ams-avatar-neutral-40-color);
+.ams-avatar--grey-3 {
+  background-color: var(--ams-avatar-grey-3-background-color);
+  color: var(--ams-avatar-grey-3-color);
 }
 
-.ams-avatar--neutral-60 {
-  background-color: var(--ams-avatar-neutral-60-background-color);
-  color: var(--ams-avatar-neutral-60-color);
+.ams-avatar--light-blue {
+  background-color: var(--ams-avatar-light-blue-background-color);
+  color: var(--ams-avatar-light-blue-color);
 }
 
-.ams-avatar--neutral-80 {
-  background-color: var(--ams-avatar-neutral-80-background-color);
-  color: var(--ams-avatar-neutral-80-color);
+.ams-avatar--magenta {
+  background-color: var(--ams-avatar-magenta-background-color);
+  color: var(--ams-avatar-magenta-color);
 }
 
 .ams-avatar--orange {

diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
@@ -12,11 +12,6 @@
   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);
@@ -27,39 +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--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-1 {
+  background-color: var(--ams-badge-grey-1-background-color);
+  color: var(--ams-badge-grey-1-color);
 }
 
-.ams-badge--neutral-20 {
-  background-color: var(--ams-badge-neutral-20-background-color);
-  color: var(--ams-badge-neutral-20-color);
+.ams-badge--grey-2 {
+  background-color: var(--ams-badge-grey-2-background-color);
+  color: var(--ams-badge-grey-2-color);
 }
 
-.ams-badge--neutral-40 {
-  background-color: var(--ams-badge-neutral-40-background-color);
-  color: var(--ams-badge-neutral-40-color);
+.ams-badge--grey-3 {
+  background-color: var(--ams-badge-grey-3-background-color);
+  color: var(--ams-badge-grey-3-color);
 }
 
-.ams-badge--neutral-60 {
-  background-color: var(--ams-badge-neutral-60-background-color);
-  color: var(--ams-badge-neutral-60-color);
+.ams-badge--light-blue {
+  background-color: var(--ams-badge-light-blue-background-color);
+  color: var(--ams-badge-light-blue-color);
 }
 
-.ams-badge--neutral-80 {
-  background-color: var(--ams-badge-neutral-80-background-color);
-  color: var(--ams-badge-neutral-80-color);
+.ams-badge--magenta {
+  background-color: var(--ams-badge-magenta-background-color);
+  color: var(--ams-badge-magenta-color);
 }
 
 .ams-badge--orange {

diff --git a/packages/css/src/components/spotlight/spotlight.scss b/packages/css/src/components/spotlight/spotlight.scss
@@ -7,16 +7,20 @@
   background-color: var(--ams-spotlight-background-color);
 }
 
-.ams-spotlight--azure {
-  background-color: var(--ams-spotlight-azure-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--dark-blue {
+  background-color: var(--ams-spotlight-dark-blue-background-color);
+}
+
+.ams-spotlight--dark-green {
+  background-color: var(--ams-spotlight-dark-green-background-color);
 }
 
-.ams-spotlight--lime {
-  background-color: var(--ams-spotlight-lime-background-color);
+.ams-spotlight--green {
+  background-color: var(--ams-spotlight-green-background-color);
 }
 
 .ams-spotlight--magenta {

diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
@@ -11,16 +11,15 @@ import { Icon } from '../Icon'
 import { Image } from '../Image'
 
 export const avatarColors = [
-  'azure',
   'black',
   'blue',
+  'dark-green',
   'green',
-  'lime',
+  'grey-1',
+  'grey-2',
+  'grey-3',
+  'light-blue',
   '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--green')
+    expect(component).toHaveClass('ams-badge--dark-green')
   })
 
   badgeColors.map((color) =>

diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx
@@ -8,16 +8,15 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
 export const badgeColors = [
-  'azure',
   'black',
   'blue',
+  'dark-green',
   'green',
-  'lime',
+  'grey-1',
+  'grey-2',
+  'grey-3',
+  'light-blue',
   'magenta',
-  'neutral-20',
-  'neutral-40',
-  'neutral-60',
-  'neutral-80',
   'orange',
   'purple',
   'red',
@@ -35,7 +34,7 @@ export type BadgeProps = {
 } & HTMLAttributes<HTMLElement>
 
 export const Badge = forwardRef(
-  ({ label, className, color = 'green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
+  ({ label, className, color = 'dark-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/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx
@@ -7,7 +7,16 @@ import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 const defaultColor = 'purple'
-export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'] as const
+export const spotlightColors = [
+  'blue',
+  'dark-blue',
+  'dark-green',
+  'green',
+  'magenta',
+  'orange',
+  'purple',
+  'yellow',
+] as const
 
 type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor
 

diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -1,7 +1,7 @@
 {
   "ams": {
     "alert": {
-      "background-color": { "value": "{ams.brand.color.neutral.0}" },
+      "background-color": { "value": "{ams.color.primary-black}" },
       "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
       "gap": { "value": "{ams.space.sm}" },

diff --git a/proprietary/tokens/src/components/ams/figure.tokens.json b/proprietary/tokens/src/components/ams/figure.tokens.json
@@ -3,12 +3,12 @@
     "figure": {
       "gap": { "value": "{ams.space.sm}" },
       "caption": {
-        "color": { "value": "{ams.brand.color.neutral.100}" },
+        "color": { "value": "{ams.color.primary-white}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.6.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "line-height": { "value": "{ams.text.level.6.line-height}" },
-        "inverse-color": { "value": "{ams.brand.color.neutral.0}" }
+        "inverse-color": { "value": "{ams.color.primary-black}" }
       }
     }
   }

diff --git a/proprietary/tokens/src/components/ams/file-list.tokens.json b/proprietary/tokens/src/components/ams/file-list.tokens.json
@@ -10,7 +10,7 @@
         "gap": { "value": "{ams.space.sm}" },
         "line-height": { "value": "{ams.text.level.6.line-height}" },
         "details": {
-          "color": { "value": "{ams.brand.color.neutral.60}" }
+          "color": { "value": "{ams.color.neutral-grey3}" }
         },
         "preview": {
           "width": { "value": "clamp(2.5rem, 10vw, 5rem)" }

diff --git a/proprietary/tokens/src/components/ams/footer.tokens.json b/proprietary/tokens/src/components/ams/footer.tokens.json
@@ -2,7 +2,7 @@
   "ams": {
     "footer": {
       "top": {
-        "background-color": { "value": "{ams.brand.color.blue.60}" }
+        "background-color": { "value": "{ams.color.primary-blue}" }
       }
     }
   }

diff --git a/proprietary/tokens/src/components/ams/icon.tokens.json b/proprietary/tokens/src/components/ams/icon.tokens.json
@@ -2,7 +2,7 @@
   "ams": {
     "icon": {
       "inverse": {
-        "color": { "value": "{ams.brand.color.neutral.0}" }
+        "color": { "value": "{ams.color.primary-black}" }
       },
       "size-3": {
         "font-size": { "value": "{ams.text.level.3.font-size}" },

diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json
@@ -34,11 +34,11 @@
       "hover-indicator": {
         "stroke-width": { "value": "3px" },
         "hover": {
-          "stroke": { "value": "{ams.brand.color.blue.60}" }
+          "stroke": { "value": "{ams.color.primary-blue}" }
         },
         "invalid": {
           "hover": {
-            "stroke": { "value": "{ams.brand.color.red}" }
+            "stroke": { "value": "{ams.color.primary-red}" }
           }
         }
       },

diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -3,7 +3,10 @@
     "tabs": {
       "gap": { "value": "{ams.space.md}" },
       "list": {
-        "box-shadow": { "value": "inset 0 calc({ams.border.width.md} * -1) {ams.color.grey-1}" }
+        "box-shadow": {
+          "value": "inset 0 calc({ams.border.width.md} * -1) #d1d1d1",
+          "comment": "TODO: replace with color token"
+        }
       },
       "button": {
         "color": { "value": "{ams.color.primary-blue}" },

diff --git a/storybook/src/components/Spotlight/Spotlight.docs.mdx b/storybook/src/components/Spotlight/Spotlight.docs.mdx
@@ -14,17 +14,21 @@ import README from "../../../../packages/css/src/components/spotlight/README.md?
 
 ## Examples
 
-### Azure
+### Blue
 
-<Canvas of={SpotlightStories.Azure} />
+<Canvas of={SpotlightStories.Blue} />
 
-### Green
+### Dark Blue
 
-<Canvas of={SpotlightStories.Green} />
+<Canvas of={SpotlightStories.DarkBlue} />
+
+### Dark Green
 
-### Lime
+<Canvas of={SpotlightStories.DarkGreen} />
 
-<Canvas of={SpotlightStories.Lime} />
+### Green
+
+<Canvas of={SpotlightStories.Green} />
 
 ### 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 || !['lime', 'yellow'].includes(color)}>{quote}</Blockquote>
+          <Blockquote inverseColor={!color || !['green', 'yellow'].includes(color)}>{quote}</Blockquote>
         </Grid.Cell>
       </Grid>
     </Spotlight>
@@ -30,21 +30,27 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const Azure: Story = {
+export const Blue: Story = {
   args: {
-    color: 'azure',
+    color: 'blue',
   },
 }
 
-export const Green: Story = {
+export const DarkBlue: Story = {
   args: {
-    color: 'green',
+    color: 'dark-blue',
+  },
+}
+
+export const DarkGreen: Story = {
+  args: {
+    color: 'dark-green',
   },
 }
 
-export const Lime: Story = {
+export const Green: Story = {
   args: {
-    color: 'lime',
+    color: 'green',
   },
 }