RadioControl: Use CSS-in-JS

packages/components/src/radio-control/index.js

@@ -12,7 +12,11 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import BaseControl from '../base-control';
+import {
+	RadioControlWrapper,
+	RadioControlInput,
+	RadioControlOption,
+} from './styles/radio-control-styles';
 
 export default function RadioControl( {
 	label,
@@ -28,7 +32,7 @@ export default function RadioControl( {
 
 	return (
 		! isEmpty( options ) && (
-			<BaseControl
+			<RadioControlWrapper
 				label={ label }
 				id={ id }
 				help={ help }
@@ -38,11 +42,11 @@ export default function RadioControl( {
 				) }
 			>
 				{ options.map( ( option, index ) => (
-					<div
+					<RadioControlOption
 						key={ `${ id }-${ index }` }
 						className="components-radio-control__option"
 					>
-						<input
+						<RadioControlInput
 							id={ `${ id }-${ index }` }
 							className="components-radio-control__input"
 							type="radio"
@@ -57,9 +61,9 @@ export default function RadioControl( {
 						<label htmlFor={ `${ id }-${ index }` }>
 							{ option.label }
 						</label>
-					</div>
+					</RadioControlOption>
 				) ) }
-			</BaseControl>
+			</RadioControlWrapper>
 		)
 	);
 }

packages/components/src/radio-control/styles/radio-control-styles.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+
+/**
+ * Internal dependencies
+ */
+import { breakpoint, config, color } from '../../utils';
+import { inputControl } from '../../utils/input';
+import {
+	StyledHelp as BaseControlHelp,
+	StyledField as BaseControlField,
+} from '../../base-control/styles/base-control-styles';
+import BaseControl from '../../base-control';
+
+export const RadioControlWrapper = styled( BaseControl )`
+	display: flex;
+	flex-direction: column;
+
+	${ BaseControlHelp } {
+		margin-top: 0;
+	}
+
+	${ BaseControlField } {
+		margin-bottom: 0;
+	}
+`;
+
+export const RadioControlOption = styled.div`
+	&:not( :last-child ) {
+		margin-bottom: 4px;
+	}
+`;
+
+const appearBoxShadow = () => {
+	const boxShadow = [
+		`0 0 0 calc( ${ config( 'borderWidth' ) } * 2 ) ${ color( 'white' ) }`,
+		`0 0 0 calc( ${ config( 'borderWidth' ) } * 2 + ${ config(
+			'borderWidthFocus'
+		) } )
+					var( --wp-admin-theme-color )`,
+	].join( ',' );
+
+	return css( { boxShadow } );
+};
+
+export const RadioControlInput = styled.input`
+	&,
+	&[type='radio'] {
+		${ inputControl }
+
+		border: ${ config( 'borderWidth' ) } solid ${ color( 'gray.900' ) };
+		margin-top: 0;
+		margin-right: 6px;
+		transition: none;
+		border-radius: ${ config( 'radiusRound' ) };
+
+		&:checked::before {
+			width: 7px;
+			height: 7px;
+			margin: 8px 0 0 8px;
+			background-color: ${ color( 'white' ) };
+
+			// This border serves as a background color in Windows High Contrast mode.
+			border: 3px solid ${ color( 'white' ) };
+
+			${ breakpoint( 'medium' ) } {
+				width: 6px;
+				height: 6px;
+				margin: 4px 0 0 4px;
+			}
+		}
+
+		&:focus {
+			${ appearBoxShadow() }
+
+			// Only visible in Windows High Contrast mode.
+			outline: 2px solid transparent;
+		}
+
+		&:checked {
+			background: var( --wp-admin-theme-color );
+			border-color: var( --wp-admin-theme-color );
+		}
+	}
+`;

packages/components/src/style.scss

@@ -29,7 +29,6 @@
 @import "./panel/style.scss";
 @import "./placeholder/style.scss";
 @import "./popover/style.scss";
-@import "./radio-control/style.scss";
 @import "./resizable-box/style.scss";
 @import "./responsive-wrapper/style.scss";
 @import "./sandbox/style.scss";

packages/components/src/utils/config-values.js

@@ -1,5 +1,6 @@
 export default {
 	radiusBlockUi: '2px',
+	radiusRound: '50%',
 	borderWidth: '1px',
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',