feat!: Use inline SVGs for Radio icon

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

@@ -12,28 +12,19 @@
   @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;
+@mixin forced-colors {
+  @media (forced-colors: active) {
+    background-color: FieldText; // Use default input text color for radio button
+  }
+}
 
-  &::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%;
+@mixin forced-colors-disabled-input {
+  @media (forced-colors: active) {
+    background-color: GrayText;
   }
 }
 
+// Default
 .ams-radio__label {
   color: var(--ams-radio-color);
   cursor: pointer;
@@ -44,111 +35,158 @@
   gap: var(--ams-radio-gap);
   line-height: var(--ams-radio-line-height);
   outline-offset: var(--ams-radio-outline-offset);
+  position: relative;
 
-  &: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;
+  // Radio button check mark
+  &::after {
+    background-color: var(--ams-radio-button-checked-background-color);
+    block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
+    flex-shrink: 0;
+    inline-size: 1.5rem;
+    -webkit-mask-image: var(--ams-radio-button-checked-mask-image);
+    mask-image: var(--ams-radio-button-checked-mask-image);
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    position: absolute;
+
+    @include forced-colors;
+  }
 
-    .ams-radio__circle::after {
-      border-color: var(--ams-radio-circle-hover-border-color);
-    }
+  // Radio button
+  &::before {
+    background-color: var(--ams-radio-button-background-color);
+    block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
+    content: "";
+    flex-shrink: 0;
+    inline-size: 1.5rem;
+    -webkit-mask-image: var(--ams-radio-button-mask-image);
+    mask-image: var(--ams-radio-button-mask-image);
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+
+    @include forced-colors;
   }
 
   @include text-rendering;
 }
 
-// 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: underline;
+  text-decoration-thickness: var(--ams-radio-hover-text-decoration-thickness);
+  text-underline-offset: 0.375rem;
+
+  &::after {
+    background-color: var(--ams-radio-button-checked-hover-background-color);
+
+    @include forced-colors;
   }
-}
 
-// Invalid unchecked
-.ams-radio__input[aria-invalid="true"] {
-  + .ams-radio__label .ams-radio__circle::after {
-    border-color: var(--ams-radio-circle-invalid-border-color);
+  &::before {
+    background-color: var(--ams-radio-button-hover-background-color);
+
+    @include forced-colors;
   }
 }
 
-// Disabled unchecked
-.ams-radio__input:disabled {
-  + .ams-radio__label {
-    color: var(--ams-radio-disabled-color);
-    cursor: not-allowed;
+// Checked
+.ams-radio__input:checked + .ams-radio__label::after {
+  content: "";
+}
 
-    .ams-radio__circle::after {
-      border-color: var(--ams-radio-circle-disabled-border-color);
-      border-width: var(--ams-radio-circle-disabled-border-width);
-    }
+// Invalid
+.ams-radio__input[aria-invalid="true"] + .ams-radio__label {
+  &::after {
+    background-color: var(--ams-radio-button-checked-invalid-background-color);
+
+    @include forced-colors;
   }
-}
 
-// 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);
+  &::before {
+    background-color: var(--ams-radio-button-invalid-background-color);
+
+    @include forced-colors;
   }
 }
 
-// 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;
 
-// Disabled checked
-.ams-radio__input:disabled:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    background-image: var(--ams-radio-circle-disabled-checked-background-image);
+  &::after {
+    background-color: var(--ams-radio-button-checked-disabled-background-color);
+
+    @include forced-colors-disabled-input;
+  }
+
+  &::before {
+    background-color: var(--ams-radio-button-disabled-background-color);
+
+    @include forced-colors-disabled-input;
   }
 }
 
-// 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 {
+    &::after {
+      // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+      background-color: var(--ams-radio-button-checked-disabled-invalid-background-color);
+
+      @include forced-colors-disabled-input;
+    }
+    &::before {
+      // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+      background-color: var(--ams-radio-button-disabled-invalid-background-color);
+
+      @include forced-colors-disabled-input;
+    }
   }
 }
 
-// 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 {
+  &::after {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    background-color: var(--ams-radio-button-checked-invalid-hover-background-color);
 
-// 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);
-}
+    @include forced-colors;
+  }
 
-// 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);
-}
+  &::before {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    background-color: var(--ams-radio-button-invalid-hover-background-color);
 
-// 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);
+    @include forced-colors;
+  }
 }
 
-// DISABLED INVALID STATES
+// Disabled invalid hover
+.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover {
+  &::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    background-color: var(--ams-radio-button-checked-disabled-invalid-background-color);
 
-// Disabled invalid checked
-.ams-radio__input[aria-invalid="true"]:disabled:checked {
-  + .ams-radio__label .ams-radio__circle::after {
+    @include forced-colors-disabled-input;
+  }
+
+  &::before {
     // 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);
+    background-color: var(--ams-radio-button-disabled-invalid-background-color);
+
+    @include forced-colors-disabled-input;
   }
 }

packages/react/src/Radio/Radio.tsx

@@ -29,7 +29,6 @@ export const Radio = forwardRef(
           type="radio"
         />
         <label className="ams-radio__label" htmlFor={id}>
-          <span className="ams-radio__circle" />
           {children}
         </label>
       </div>

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

@@ -8,50 +8,45 @@
       "gap": { "value": "{ams.space.sm}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "circle": {
-        "border-color": { "value": "{ams.color.primary-blue}" },
-        "border-width": { "value": "{ams.border.width.md}" },
+      "button": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "mask-image": {
+          "value": "url(\"data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><circle r='0.925rem' cx='1rem' cy='1rem' stroke-width='0.15rem' stroke='black' fill='none' /></svg>\")"
+        },
         "checked": {
-          "background-image": {
-            "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
+          "background-color": { "value": "{ams.color.primary-blue}" },
+          "mask-image": {
+            "value": "url(\"data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><circle r='0.7rem' cx='1rem' cy='1rem' fill='black' /></svg>\")"
+          },
+          "disabled": {
+            "background-color": { "value": "{ams.color.neutral-grey3}" }
+          },
+          "disabled-invalid": {
+            "background-color": { "value": "{ams.color.neutral-grey3}" }
           },
           "hover": {
-            "background-image": {
-              "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
+            "background-color": { "value": "{ams.color.dark-blue}" }
+          },
+          "invalid": {
+            "background-color": { "value": "{ams.color.primary-red}" },
+            "hover": {
+              "background-color": { "value": "{ams.color.primary-red}" }
             }
           }
         },
         "disabled": {
-          "border-color": { "value": "{ams.color.neutral-grey3}" },
-          "border-width": { "value": "{ams.border.width.md}" },
-          "checked": {
-            "background-image": {
-              "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
-            },
-            "hover": {
-              "background-image": {
-                "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
-              }
-            }
-          }
+          "background-color": { "value": "{ams.color.neutral-grey3}" }
+        },
+        "disabled-invalid": {
+          "background-color": { "value": "{ams.color.neutral-grey3}" }
         },
         "hover": {
-          "border-color": { "value": "{ams.color.dark-blue}" }
+          "background-color": { "value": "{ams.color.dark-blue}" }
         },
         "invalid": {
-          "border-color": { "value": "{ams.color.primary-red}" },
-          "checked": {
-            "background-image": {
-              "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
-            },
-            "hover": {
-              "background-image": {
-                "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
-              }
-            }
-          },
+          "background-color": { "value": "{ams.color.primary-red}" },
           "hover": {
-            "border-color": { "value": "{ams.color.primary-red}" }
+            "background-color": { "value": "{ams.color.primary-red}" }
           }
         }
       },