feat!: Use inline SVGs for Radio icon

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

@@ -12,28 +12,7 @@
   @include input-label-focus;
 }
 
-.ams-radio__circle {
-  align-items: center;
-  block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
-  display: flex;
-  flex-shrink: 0;
-  inline-size: 1.5rem;
-
-  &::after {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    block-size: 1.5rem;
-    border-color: var(--ams-radio-circle-border-color);
-    border-radius: 100%;
-    border-style: solid;
-    border-width: var(--ams-radio-circle-border-width);
-    box-sizing: border-box;
-    content: "";
-    inline-size: 100%;
-  }
-}
-
+// Default
 .ams-radio__label {
   color: var(--ams-radio-color);
   cursor: pointer;
@@ -44,111 +23,181 @@
   gap: var(--ams-radio-gap);
   line-height: var(--ams-radio-line-height);
   outline-offset: var(--ams-radio-outline-offset);
+  position: relative;
+  text-decoration-thickness: var(--ams-radio-text-decoration-thickness);
+  text-underline-offset: var(--ams-radio-text-underline-offset);
+
+  @include text-rendering;
+}
 
-  &:hover {
-    color: var(--ams-radio-hover-color);
-    text-decoration-line: underline;
-    text-decoration-thickness: var(--ams-radio-hover-text-decoration-thickness);
-    text-underline-offset: 0.375rem;
+.ams-radio__icon-container {
+  block-size: var(--ams-radio-icon-container-block-size);
+  display: flex;
+  flex-shrink: 0;
+  inline-size: var(--ams-radio-icon-container-inline-size);
+}
 
-    .ams-radio__circle::after {
-      border-color: var(--ams-radio-circle-hover-border-color);
-    }
+.ams-radio__icon {
+  circle:first-child {
+    stroke: var(--ams-radio-icon-outer-stroke);
+    stroke-width: 0.15rem;
   }
 
-  @include text-rendering;
+  circle:nth-child(2) {
+    display: none;
+    fill: var(--ams-radio-icon-inner-fill);
+  }
 }
 
-// Default checked
-.ams-radio__input:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    background-image: var(--ams-radio-circle-checked-background-image);
+// Default hover
+.ams-radio__label:hover {
+  color: var(--ams-radio-hover-color);
+  text-decoration-line: var(--ams-radio-hover-text-decoration-line);
+
+  .ams-radio__icon circle:first-child {
+    stroke: var(--ams-radio-icon-hover-outer-stroke);
   }
-}
 
-// Invalid unchecked
-.ams-radio__input[aria-invalid="true"] {
-  + .ams-radio__label .ams-radio__circle::after {
-    border-color: var(--ams-radio-circle-invalid-border-color);
+  .ams-radio__icon circle:nth-child(2) {
+    fill: var(--ams-radio-icon-hover-inner-fill);
   }
 }
 
-// Disabled unchecked
-.ams-radio__input:disabled {
-  + .ams-radio__label {
-    color: var(--ams-radio-disabled-color);
-    cursor: not-allowed;
+// Invalid
+.ams-radio__input[aria-invalid="true"] + .ams-radio__label {
+  .ams-radio__icon circle:first-child {
+    stroke: var(--ams-radio-icon-invalid-outer-stroke);
+  }
 
-    .ams-radio__circle::after {
-      border-color: var(--ams-radio-circle-disabled-border-color);
-      border-width: var(--ams-radio-circle-disabled-border-width);
-    }
+  .ams-radio__icon circle:nth-child(2) {
+    fill: var(--ams-radio-icon-invalid-inner-fill);
   }
 }
 
-// Invalid checked
-.ams-radio__input[aria-invalid="true"]:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    background-image: var(--ams-radio-circle-invalid-checked-background-image);
+// Checked
+.ams-radio__input:checked + .ams-radio__label {
+  .ams-radio__icon circle:nth-child(2) {
+    display: block;
   }
 }
 
-// Disabled label
-.ams-radio__input:disabled + .ams-radio__label:hover {
-  text-decoration: none;
-}
+// Disabled
+.ams-radio__input:disabled + .ams-radio__label {
+  color: var(--ams-radio-disabled-color);
+  cursor: not-allowed;
+
+  .ams-radio__icon circle:first-child {
+    stroke: var(--ams-radio-icon-disabled-outer-stroke);
+  }
 
-// Disabled checked
-.ams-radio__input:disabled:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    background-image: var(--ams-radio-circle-disabled-checked-background-image);
+  .ams-radio__icon circle:nth-child(2) {
+    fill: var(--ams-radio-icon-disabled-inner-fill);
   }
 }
 
-// Disabled invalid unchecked
+// Disabled invalid
 .ams-radio__input[aria-invalid="true"]:disabled {
-  + .ams-radio__label .ams-radio__circle::after {
-    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    border-color: var(--ams-radio-circle-disabled-border-color);
+  + .ams-radio__label {
+    .ams-radio__icon circle:first-child {
+      // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+      stroke: var(--ams-radio-icon-disabled-invalid-outer-stroke);
+    }
+
+    .ams-radio__icon circle:nth-child(2) {
+      // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+      fill: var(--ams-radio-icon-disabled-invalid-inner-fill);
+    }
   }
 }
 
-// HOVER STATES
+// HOVER
 
-// Invalid unchecked hover
-.ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover .ams-radio__circle::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
-  border-color: var(--ams-radio-circle-invalid-hover-border-color);
+// Disabled label hover
+.ams-radio__input:disabled + .ams-radio__label:hover {
+  text-decoration: none;
 }
 
-// Default checked hover
-.ams-radio__input:checked + .ams-radio__label:hover .ams-radio__circle::after {
-  background-image: var(--ams-radio-circle-checked-hover-background-image);
-}
+// Invalid hover
+.ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
+  .ams-radio__icon circle:first-child {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    stroke: var(--ams-radio-icon-invalid-hover-outer-stroke);
+  }
 
-// Invalid checked hover
-.ams-radio__input[aria-invalid="true"]:checked + .ams-radio__label:hover .ams-radio__circle::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
-  background-image: var(--ams-radio-circle-invalid-checked-hover-background-image);
+  .ams-radio__icon circle:nth-child(2) {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    fill: var(--ams-radio-icon-invalid-hover-inner-fill);
+  }
 }
 
-// Disabled checked hover
-.ams-radio__input:disabled:checked + .ams-radio__label:hover .ams-radio__circle::after {
-  background-image: var(--ams-radio-circle-disabled-checked-hover-background-image);
+// Disabled invalid hover
+.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover {
+  .ams-radio__icon circle:first-child {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    stroke: var(--ams-radio-icon-disabled-invalid-hover-outer-stroke);
+  }
+
+  .ams-radio__icon circle:nth-child(2) {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    fill: var(--ams-radio-icon-disabled-invalid-hover-inner-fill);
+  }
 }
 
-// Disabled invalid unchecked hover
-.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover .ams-radio__circle::after {
-  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-  border-color: var(--ams-radio-circle-disabled-border-color);
+// FORCED COLORS
+
+// Default
+@media (forced-colors: active) {
+  .ams-radio__label,
+  .ams-radio__label:hover,
+  .ams-radio__input[aria-invalid="true"] + .ams-radio__label,
+  .ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
+    .ams-radio__icon {
+      circle:first-child {
+        stroke: FieldText;
+      }
+
+      // These two selectors never target the same element, so it's safe to disable the linter here.
+      /* stylelint-disable-next-line no-descending-specificity */
+      circle:nth-child(2) {
+        fill: FieldText;
+      }
+    }
+  }
 }
 
-// DISABLED INVALID STATES
+// Checked
+@media (forced-colors: active) {
+  .ams-radio__input:checked + .ams-radio__label,
+  .ams-radio__input[aria-invalid="true"]:checked + .ams-radio__label:hover {
+    .ams-radio__icon {
+      circle:first-child {
+        stroke: ActiveText;
+      }
+
+      // These two selectors never target the same element, so it's safe to disable the linter here.
+      /* stylelint-disable-next-line no-descending-specificity */
+      circle:nth-child(2) {
+        fill: ActiveText;
+      }
+    }
+  }
+}
 
-// Disabled invalid checked
-.ams-radio__input[aria-invalid="true"]:disabled:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    background-image: var(--ams-radio-circle-disabled-checked-background-image);
+// Disabled
+@media (forced-colors: active) {
+  .ams-radio__input:disabled + .ams-radio__label,
+  .ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label,
+  .ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover {
+    .ams-radio__icon {
+      circle:first-child {
+        stroke: GrayText;
+      }
+
+      // These two selectors never target the same element, so it's safe to disable the linter here.
+      /* stylelint-disable-next-line no-descending-specificity */
+      circle:nth-child(2) {
+        fill: GrayText;
+      }
+    }
   }
 }

packages/react/src/Radio/Radio.test.tsx

@@ -1,3 +1,4 @@
+import { FavouriteIcon } from '@amsterdam/design-system-react-icons'
 import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { Radio } from './Radio'
@@ -150,6 +151,14 @@ describe('Radio', () => {
     expect(handleChange).toHaveBeenCalled()
   })
 
+  it('shows a custom icon', () => {
+    const { container } = render(<Radio icon={<FavouriteIcon className="test-class" />} />)
+
+    const icon = container.querySelector('svg')
+
+    expect(icon).toHaveClass('test-class')
+  })
+
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLInputElement>()
 

packages/react/src/Radio/Radio.tsx

@@ -3,17 +3,20 @@
  * Copyright Gemeente Amsterdam
  */
 
+import { RadioIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
 import { forwardRef, useId } from 'react'
-import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren } from 'react'
+import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react'
 
 export type RadioProps = {
+  /** An icon to display instead of the default icon. */
+  icon?: ReactNode
   /** Whether the value fails a validation rule. */
   invalid?: boolean
 } & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>
 
 export const Radio = forwardRef(
-  ({ children, className, invalid, ...restProps }: RadioProps, ref: ForwardedRef<HTMLInputElement>) => {
+  ({ children, className, icon, invalid, ...restProps }: RadioProps, ref: ForwardedRef<HTMLInputElement>) => {
     const id = useId()
 
     return (
@@ -29,7 +32,7 @@ export const Radio = forwardRef(
           type="radio"
         />
         <label className="ams-radio__label" htmlFor={id}>
-          <span className="ams-radio__circle" />
+          <span className="ams-radio__icon-container">{icon ?? <RadioIcon className="ams-radio__icon" />}</span>
           {children}
         </label>
       </div>