chore: Revert changes to color tokens (#1806)

Amsterdam · Jan 10, 2025 · 27719e6 · 27719e6
1 parent 588fd51
commit 27719e6
Show file tree

Hide file tree

Showing 70 changed files with 495 additions and 516 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/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
@@ -151,6 +151,7 @@
 :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid="true"])
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
   border-color: var(--ams-checkbox-checkmark-invalid-hover-border-color);
 }
 
@@ -168,13 +169,15 @@
 :is(.ams-checkbox__input:invalid:checked, .ams-checkbox__input[aria-invalid="true"]:checked)
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
   background-color: var(--ams-checkbox-checkmark-invalid-checked-hover-background-color);
 }
 
 // Invalid indeterminate hover
 :is(.ams-checkbox__input:invalid:indeterminate, .ams-checkbox__input[aria-invalid="true"]:indeterminate)
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
   background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-hover-background-color);
 }
 

diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss
@@ -71,6 +71,7 @@
   box-shadow: var(--ams-date-input-invalid-box-shadow);
 
   &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
   }
 }
diff --git a/packages/css/src/components/password-input/password-input.scss b/packages/css/src/components/password-input/password-input.scss
@@ -53,6 +53,7 @@
   box-shadow: var(--ams-password-input-invalid-box-shadow);
 
   &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
   }
 }
diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss
@@ -130,6 +130,7 @@
 // Invalid hover
 .ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
   .ams-radio__circle {
+    // TODO: this should be the (currently non-existent) dark red hover color
     stroke: var(--ams-radio-circle-invalid-hover-stroke);
   }
 
@@ -139,6 +140,7 @@
   }
 
   .ams-radio__checked-indicator {
+    // TODO: this should be the (currently non-existent) dark red hover color
     fill: var(--ams-radio-checked-indicator-invalid-hover-fill);
   }
 }

diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss
@@ -50,6 +50,7 @@
   box-shadow: var(--ams-search-field-input-invalid-box-shadow);
 
   &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
   }
 }

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/css/src/components/text-area/text-area.scss b/packages/css/src/components/text-area/text-area.scss
@@ -55,6 +55,7 @@
   box-shadow: var(--ams-text-area-invalid-box-shadow);
 
   &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
   }
 }

diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss
@@ -53,6 +53,7 @@
   box-shadow: var(--ams-text-input-invalid-box-shadow);
 
   &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
   }
 }
diff --git a/packages/css/src/components/time-input/time-input.scss b/packages/css/src/components/time-input/time-input.scss
@@ -72,6 +72,7 @@
   box-shadow: var(--ams-time-input-invalid-box-shadow);
 
   &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
   }
 }
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,7 @@ 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-green', 'green', 'magenta', 'orange', 'yellow'] as const
 
 type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor
 

diff --git a/proprietary/tokens/README.md b/proprietary/tokens/README.md
@@ -80,7 +80,7 @@ Examples:
 
 ```css
 :root {
-  --ams-brand-color-red-60: #ec0000;
+  --ams-color-primary-red: #ec0000;
   --ams-space-md: 1rem;
   --ams-aspect-ratio-wide: 4/3;
   --ams-border-width-lg: 0.1875rem;
@@ -174,9 +174,8 @@ Use ‘dot notation’ or square brackets to access the tokens.
 ```tsx
 import tokens from "@amsterdam/design-system-tokens/dist/index.json"
 
-const { ams } = tokens
-const buttonBackgroundColor = ams.brand.color.blue['60']
-const rowGap = ams.space.md
+const buttonBackgroundColor = tokens.ams.color["primary-blue"]
+const rowGap = tokens.ams.space.md
 ```
 
 Import and merge the compact tokens if you need them.
@@ -187,7 +186,7 @@ Then you can use the tokens in scripting or css-in-js libraries.
 import compactTokens from "@amsterdam/design-system-tokens/dist/compact.json"
 import spaciousTokens from "@amsterdam/design-system-tokens/dist/index.json"
 
-const { ams } = { ...spaciousTokens, ...compactTokens }
+const tokens = { ...spaciousTokens, ...compactTokens }
 ```
 
 ## Usage in Figma