Merge branch 'develop' into feature/DES-981-radio-button-hover-border

Amsterdam · Nov 20, 2024 · 64e07bd · 64e07bd
2 parents e0e619a + 5c8132a
commit 64e07bd
Show file tree

Hide file tree

Showing 16 changed files with 139 additions and 126 deletions.
diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss
@@ -23,17 +23,21 @@
 }
 
 .ams-alert--error {
+  background-color: var(--ams-alert-error-background-color);
   border-color: var(--ams-alert-error-border-color);
 }
 
 .ams-alert--info {
+  background-color: var(--ams-alert-info-background-color);
   border-color: var(--ams-alert-info-border-color);
 }
 
 .ams-alert--success {
+  background-color: var(--ams-alert-success-background-color);
   border-color: var(--ams-alert-success-border-color);
 }
 
 .ams-alert--warning {
+  background-color: var(--ams-alert-warning-background-color);
   border-color: var(--ams-alert-warning-border-color);
 }
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/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx
@@ -68,7 +68,7 @@ export const Alert = forwardRef(
           )}
           {children}
         </div>
-        {closeable && <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />}
+        {closeable && <IconButton contrastColor label={closeButtonLabel} size={alertSize} onClick={onClose} />}
       </Tag>
     )
   },

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/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -7,23 +7,21 @@
       "padding-block": { "value": "{ams.space.md}" },
       "padding-inline": { "value": "{ams.space.lg}" },
       "error": {
+        "background-color": { "value": "{ams.brand.color.red.20}" },
         "border-color": { "value": "{ams.brand.color.red.60}" }
       },
       "info": {
-        "border-color": { "value": "{ams.brand.color.blue.60}" }
+        "background-color": { "value": "{ams.brand.color.azure.20}" },
+        "border-color": { "value": "{ams.brand.color.azure.60}" }
       },
       "success": {
+        "background-color": { "value": "{ams.brand.color.green.20}" },
         "border-color": { "value": "{ams.brand.color.green.60}" }
       },
       "warning": {
+        "background-color": { "value": "{ams.brand.color.orange.20}" },
         "border-color": { "value": "{ams.brand.color.orange.60}" }
       },
-      "close": {
-        "fill": { "value": "{ams.brand.color.neutral.100}" },
-        "hover": {
-          "fill": { "value": "{ams.brand.color.blue.60}" }
-        }
-      },
       "content": {
         "gap": { "value": "{ams.space.sm}" }
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,7 +68,7 @@ export const Alert = forwardRef( @@
               )}
               {children}
             </div>
-            {closeable && <IconButton label={closeButtonLabel} size={alertSize} onClick={onClose} />}
+            {closeable && <IconButton contrastColor label={closeButtonLabel} size={alertSize} onClick={onClose} />}
           </Tag>
         )
       },
@@ Expand Down @@