feat: Make border of Radio thicker when hovering (#1696)

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

@@ -37,9 +37,15 @@
 }
 
 .ams-radio__circle {
-  fill: none;
+  fill: var(--ams-radio-circle-fill);
   stroke: var(--ams-radio-circle-stroke);
-  stroke-width: 0.125rem;
+  stroke-width: var(--ams-radio-circle-stroke-width);
+}
+
+.ams-radio__hover-indicator {
+  fill: none;
+  stroke: transparent;
+  stroke-width: var(--ams-radio-hover-indicator-stroke-width);
 }
 
 .ams-radio__checked-indicator {
@@ -56,6 +62,10 @@
     stroke: var(--ams-radio-circle-hover-stroke);
   }
 
+  .ams-radio__hover-indicator {
+    stroke: var(--ams-radio-hover-indicator-hover-stroke);
+  }
+
   .ams-radio__checked-indicator {
     fill: var(--ams-radio-checked-indicator-hover-fill);
   }
@@ -108,9 +118,13 @@
 
 // HOVER
 
-// Disabled label hover
+// Disabled hover
 .ams-radio__input:disabled + .ams-radio__label:hover {
   text-decoration: none;
+
+  .ams-radio__hover-indicator {
+    stroke: transparent;
+  }
 }
 
 // Invalid hover
@@ -119,6 +133,11 @@
     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 {
     fill: var(--ams-radio-checked-indicator-invalid-hover-fill);
   }
@@ -131,6 +150,9 @@
     stroke: var(--ams-radio-circle-disabled-invalid-hover-stroke);
   }
 
+  .ams-radio__hover-indicator {
+    stroke: transparent;
+  }
   .ams-radio__checked-indicator {
     // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
     fill: var(--ams-radio-checked-indicator-disabled-invalid-hover-fill);

packages/react/src/Radio/Radio.tsx

@@ -3,10 +3,10 @@
  * 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, ReactNode } from 'react'
+import RadioIcon from './RadioIcon'
 
 export type RadioProps = {
   /** An icon to display instead of the default icon. */

packages/react/src/Radio/RadioIcon.tsx

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react'
+
+const SvgRadio = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" {...props}>
+    <circle cx={12} cy={12} r={10} className="ams-radio__circle" />
+    <circle cx={12} cy={12} r={9.5} className="ams-radio__hover-indicator" />
+    <circle cx={12} cy={12} r={6} className="ams-radio__checked-indicator" />
+  </svg>
+)
+
+export default SvgRadio

proprietary/assets/package.json

@@ -22,7 +22,7 @@
     "directory": "proprietary/assets"
   },
   "scripts": {
-    "optimize-icons": "svgo -f icons --exclude=Radio.svg"
+    "optimize-icons": "svgo -f icons"
   },
   "devDependencies": {
     "svgo": "3.3.2"

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

@@ -31,8 +31,21 @@
           }
         }
       },
+      "hover-indicator": {
+        "stroke-width": { "value": "3px" },
+        "hover": {
+          "stroke": { "value": "{ams.brand.color.blue.60}" }
+        },
+        "invalid": {
+          "hover": {
+            "stroke": { "value": "{ams.brand.color.red}" }
+          }
+        }
+      },
       "circle": {
+        "fill": { "value": "{ams.brand.color.neutral.0}" },
         "stroke": { "value": "{ams.brand.color.blue.60}" },
+        "stroke-width": { "value": "2px" },
         "disabled": {
           "stroke": { "value": "{ams.brand.color.neutral.60}" }
         },