Merge branch 'develop' into feat/apply-hyphenation

packages/css/src/components/avatar/README.md

@@ -6,11 +6,11 @@ A circular badge representing a person.
 
 ## Design
 
-The avatar contains 1 or 2 initial letters from the person’s full name, a picture, or a generic icon.
-To personalize the avatar, the user can be allowed to choose one of the highlight colours.
-The default background colour is purple.
+- The avatar contains 1 or 2 initial letters from the person’s full name, a picture, or a generic icon.
 
 ## Guidelines
 
-- Show an avatar for the user of the application,
-  or to associate a person with a content item.
+- Show an avatar for the user of the application, or to associate a person with a content item.
+- To personalize the Avatar, the user can be allowed to choose one of the [highlight colours](/docs/brand-design-tokens-colour--docs).
+  The default is purple.
+  The design system does not define a meaning to any of these background colours.

packages/css/src/components/avatar/avatar.scss

@@ -39,19 +39,19 @@
   vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
 }
 
-.ams-avatar--dark-green {
-  background-color: var(--ams-avatar-dark-green-background-color);
-  color: var(--ams-avatar-dark-green-color);
+.ams-avatar--azure {
+  background-color: var(--ams-avatar-azure-background-color);
+  color: var(--ams-avatar-azure-color);
 }
 
 .ams-avatar--green {
   background-color: var(--ams-avatar-green-background-color);
   color: var(--ams-avatar-green-color);
 }
 
-.ams-avatar--light-blue {
-  background-color: var(--ams-avatar-light-blue-background-color);
-  color: var(--ams-avatar-light-blue-color);
+.ams-avatar--lime {
+  background-color: var(--ams-avatar-lime-background-color);
+  color: var(--ams-avatar-lime-color);
 }
 
 .ams-avatar--magenta {

packages/css/src/components/badge/README.md

@@ -2,11 +2,12 @@
 
 # Badge
 
-A prominently coloured box containing 1 or 2 words.
-Guides the user in taking a specific action or describes its surrounding content.
+A prominent label that indicates a category, property or instruction.
 
-## Design
+## Guidelines
 
-The badge can contain a short text or a number.
-Any colour from the ‘highlight’ and ‘feedback’ groups can be used as a background colour.
-The default is dark green.
+- Let the badge contain a short text or a number.
+- Use any of the feedback or highlight [colours](/docs/brand-design-tokens-colour--docs) for the background.
+  The default is green.
+  Red, orange and green are especially useful for showing an error, warning, or success.
+  However, they can also be combined with the other colours without carrying these meanings.

packages/css/src/components/badge/badge.scss

@@ -20,14 +20,14 @@
   @include text-rendering;
 }
 
-.ams-badge--green {
-  background-color: var(--ams-badge-green-background-color);
-  color: var(--ams-badge-green-color);
+.ams-badge--azure {
+  background-color: var(--ams-badge-azure-background-color);
+  color: var(--ams-badge-azure-color);
 }
 
-.ams-badge--light-blue {
-  background-color: var(--ams-badge-light-blue-background-color);
-  color: var(--ams-badge-light-blue-color);
+.ams-badge--lime {
+  background-color: var(--ams-badge-lime-background-color);
+  color: var(--ams-badge-lime-color);
 }
 
 .ams-badge--magenta {

packages/css/src/components/checkbox/checkbox.scss

@@ -153,7 +153,6 @@
 :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);
 }
 
@@ -171,15 +170,13 @@
 :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);
 }
 

packages/css/src/components/date-input/date-input.scss

@@ -71,7 +71,6 @@
   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);
   }
 }

packages/css/src/components/gap/README.md

@@ -9,7 +9,7 @@ Adds white space between a set of elements.
 The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the width or height of the gap.
 
 | Class name    | Example                                                                                   |
-| ------------- | ----------------------------------------------------------------------------------------- |
+| :------------ | :---------------------------------------------------------------------------------------- |
 | `ams-gap--xs` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-xs);" /> |
 | `ams-gap--sm` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-sm);" /> |
 | `ams-gap--md` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-md);" /> |

packages/css/src/components/margin/README.md

@@ -9,7 +9,7 @@ Adds white space below a single element.
 The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the height of the bottom margin.
 
 | Class name   | Example                                                                                      |
-| ------------ | -------------------------------------------------------------------------------------------- |
+| :----------- | :------------------------------------------------------------------------------------------- |
 | `ams-mb--xs` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-xs);" /> |
 | `ams-mb--sm` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-sm);" /> |
 | `ams-mb--md` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-md);" /> |

packages/css/src/components/password-input/password-input.scss

@@ -53,7 +53,6 @@
   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);
   }
 }

packages/css/src/components/radio/radio.scss

@@ -132,17 +132,14 @@
 // 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);
   }
 
   .ams-radio__hover-indicator {
-    // TODO: this should be the (currently non-existent) dark red hover color
     stroke: var(--ams-radio-hover-indicator-invalid-hover-stroke);
   }
 
   .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);
   }
 }

packages/css/src/components/search-field/search-field.scss

@@ -50,7 +50,6 @@
   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);
   }
 }

packages/css/src/components/spotlight/README.md

@@ -8,8 +8,11 @@ Emphasizes a section on a page through a distinctive background colour.
 
 - 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).
 - Add a Grid with medium vertical padding inside the Spotlight to add whitespace around the content, even for a single element.
-- 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.
+- Use any of the [highlight colours](/docs/brand-design-tokens-colour--docs) for the background.
+  The design system does not prescribe a meaning to any of these colours.
+  The default is purple.
+- Use the default text colour (black) on an azure, lime, orange or yellow background.
+  Use the inverse text colour (white) on a green, magenta or purple background.
 
 ## Relevant WCAG requirements
 

packages/css/src/components/spotlight/spotlight.scss

@@ -7,18 +7,18 @@
   background-color: var(--ams-spotlight-background-color);
 }
 
-.ams-spotlight--blue {
-  background-color: var(--ams-spotlight-blue-background-color);
-}
-
-.ams-spotlight--dark-green {
-  background-color: var(--ams-spotlight-dark-green-background-color);
+.ams-spotlight--azure {
+  background-color: var(--ams-spotlight-azure-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);
 }

packages/css/src/components/text-area/text-area.scss

@@ -55,7 +55,6 @@
   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);
   }
 }

packages/css/src/components/text-input/text-input.scss

@@ -53,7 +53,6 @@
   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);
   }
 }

packages/css/src/components/time-input/time-input.scss

@@ -72,7 +72,6 @@
   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);
   }
 }

packages/react/src/Avatar/Avatar.tsx

@@ -9,7 +9,7 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon'
 
-export const avatarColors = ['dark-green', 'green', 'light-blue', 'magenta', 'orange', 'yellow'] as const
+export const avatarColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'] as const
 
 type AvatarColor = (typeof avatarColors)[number]
 

packages/react/src/Badge/Badge.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
-export const badgeColors = ['green', 'light-blue', 'magenta', 'orange', 'purple', 'red', 'yellow'] as const
+export const badgeColors = ['azure', 'lime', 'magenta', 'orange', 'purple', 'red', 'yellow'] as const
 
 type BadgeColor = (typeof badgeColors)[number]
 

packages/react/src/Spotlight/Spotlight.tsx

@@ -6,10 +6,9 @@
 import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-const defaultColor = 'purple'
-export const spotlightColors = ['blue', 'dark-green', 'green', 'magenta', 'orange', 'yellow'] as const
+export const spotlightColors = ['azure', 'green', 'lime', 'magenta', 'orange', 'yellow'] as const
 
-type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor
+type SpotlightColor = (typeof spotlightColors)[number]
 
 export type SpotlightProps = {
   /** The HTML element to use. */
@@ -19,12 +18,8 @@ export type SpotlightProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Spotlight = forwardRef(
-  ({ as: Tag = 'div', children, className, color = defaultColor, ...restProps }: SpotlightProps, ref: any) => (
-    <Tag
-      {...restProps}
-      className={clsx('ams-spotlight', color !== defaultColor && `ams-spotlight--${color}`, className)}
-      ref={ref}
-    >
+  ({ as: Tag = 'div', children, className, color, ...restProps }: SpotlightProps, ref: any) => (
+    <Tag {...restProps} className={clsx('ams-spotlight', color && `ams-spotlight--${color}`, className)} ref={ref}>
       {children}
     </Tag>
   ),

proprietary/tokens/src/components/ams/avatar.tokens.json

@@ -10,19 +10,19 @@
       "line-height": { "value": "{ams.text.level.6.line-height}" },
       "padding-block": { "value": "{ams.space.xs}" },
       "padding-inline": { "value": "{ams.space.xs}" },
-      "dark-green": {
-        "background-color": { "value": "{ams.color.highlight.green}" },
-        "color": { "value": "{ams.color.text.inverse}" }
-      },
       "forced-colors": {
         "border-width": { "value": "{ams.border.width.md}" }
       },
-      "green": {
-        "background-color": { "value": "{ams.color.highlight.lime}" },
+      "azure": {
+        "background-color": { "value": "{ams.color.highlight.azure}" },
         "color": { "value": "{ams.color.text.default}" }
       },
-      "light-blue": {
-        "background-color": { "value": "{ams.color.highlight.azure}" },
+      "green": {
+        "background-color": { "value": "{ams.color.highlight.green}" },
+        "color": { "value": "{ams.color.text.inverse}" }
+      },
+      "lime": {
+        "background-color": { "value": "{ams.color.highlight.lime}" },
         "color": { "value": "{ams.color.text.default}" }
       },
       "magenta": {

proprietary/tokens/src/components/ams/badge.tokens.json

@@ -1,27 +1,27 @@
 {
   "ams": {
     "badge": {
-      "background-color": { "value": "{ams.color.highlight.green}" },
+      "background-color": { "value": "{ams.color.feedback.success}" },
       "color": { "value": "{ams.color.text.inverse}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.bold}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "padding-inline": { "value": "{ams.space.xs}" },
-      "green": {
-        "background-color": { "value": "{ams.color.highlight.lime}" },
+      "azure": {
+        "background-color": { "value": "{ams.color.feedback.info}" },
         "color": { "value": "{ams.color.text.default}" }
       },
-      "light-blue": {
-        "background-color": { "value": "{ams.color.highlight.azure}" },
+      "lime": {
+        "background-color": { "value": "{ams.color.highlight.lime}" },
         "color": { "value": "{ams.color.text.default}" }
       },
       "magenta": {
         "background-color": { "value": "{ams.color.highlight.magenta}" },
         "color": { "value": "{ams.color.text.inverse}" }
       },
       "orange": {
-        "background-color": { "value": "{ams.color.highlight.orange}" },
+        "background-color": { "value": "{ams.color.feedback.warning}" },
         "color": { "value": "{ams.color.text.default}" }
       },
       "purple": {

proprietary/tokens/src/components/ams/spotlight.tokens.json

@@ -2,13 +2,13 @@
   "ams": {
     "spotlight": {
       "background-color": { "value": "{ams.color.highlight.purple}" },
-      "blue": {
+      "azure": {
         "background-color": { "value": "{ams.color.highlight.azure}" }
       },
-      "dark-green": {
+      "green": {
         "background-color": { "value": "{ams.color.highlight.green}" }
       },
-      "green": {
+      "lime": {
         "background-color": { "value": "{ams.color.highlight.lime}" }
       },
       "magenta": {

storybook/src/components/Badge/Badge.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
   argTypes: {
     color: {
       control: {
-        labels: { undefined: 'dark-green (default)' },
+        labels: { undefined: 'green (default)' },
       },
       options: [undefined, ...badgeColors],
     },

storybook/src/components/Breakout/Breakout.stories.tsx

@@ -27,7 +27,7 @@ export const Default: Story = {
   args: {
     children: [
       <Breakout.Cell colSpan="all" has="spotlight" key={1} rowSpan={{ narrow: 2, medium: 2, wide: 1 }} rowStart={2}>
-        <Spotlight color="dark-green" />
+        <Spotlight color="green" />
       </Breakout.Cell>,
       <Breakout.Cell
         colSpan={{ narrow: 4, medium: 8, wide: 6 }}

storybook/src/components/CharacterCount/CharacterCount.docs.mdx

@@ -16,6 +16,6 @@ import README from "../../../../packages/css/src/components/character-count/READ
 
 ### Error
 
-When the length exceeds the maximum length, the color of the text changes to red.
+When the length exceeds the maximum length, the colour of the text changes to red.
 
 <Canvas of={CharacterCountStories.Error} />