Update: Refactor ColorPalette by extracting its design

assets/stylesheets/_z-index.scss

@@ -115,7 +115,11 @@ $z-layers: (
 	".components-resizable-box__corner-handle": 2,
 
 	// Make sure block manager sticky category titles appear above the options
-	".edit-post-manage-blocks-modal__category-title": 1
+	".edit-post-manage-blocks-modal__category-title": 1,
+
+	".components-circular-option-picker__option.is-active": 1,
+	// Needs to be higher than .components-circular-option-picker__option.is-active.
+	".components-circular-option-picker__option.is-active + .dashicons-saved": 2
 );
 
 @function z-index( $key ) {

packages/components/src/circular-option-picker/index.js

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import Dropdown from '../dropdown';
+import Tooltip from '../tooltip';
+import Dashicon from '../dashicon';
+
+function Option( {
+	className,
+	isSelected,
+	tooltipText,
+	...additionalProps
+} ) {
+	const optionButton = (
+		<button
+			type="button"
+			aria-pressed={ isSelected }
+			className={ classnames(
+				className,
+				'components-circular-option-picker__option',
+				{ 'is-active': isSelected }
+			) }
+			{ ...additionalProps }
+		/>
+	);
+	return (
+		<div className="components-circular-option-picker__option-wrapper">
+			{ tooltipText ?
+				( <Tooltip text={ tooltipText }>{ optionButton }</Tooltip> ) :
+				optionButton
+			}
+			{ isSelected && <Dashicon icon="saved" /> }
+		</div>
+	);
+}
+
+function DropdownLinkAction( {
+	buttonProps,
+	className,
+	dropdownProps,
+	linkText,
+} ) {
+	return (
+		<Dropdown
+			className={ classnames(
+				'components-circular-option-picker__dropdown-link-action',
+				className
+			) }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					aria-expanded={ isOpen }
+					onClick={ onToggle }
+					isLink
+					{ ...buttonProps }
+				>
+					{ linkText }
+				</Button>
+			) }
+			{ ...dropdownProps }
+		/>
+	);
+}
+
+function ButtonAction( {
+	className,
+	children,
+	...additionalProps
+} ) {
+	return (
+		<Button
+			className={ classnames(
+				'components-circular-option-picker__clear',
+				className
+			) }
+			type="button"
+			isSmall
+			isDefault
+			{ ...additionalProps }
+		>
+			{ children }
+		</Button>
+	);
+}
+
+export default function CircularOptionPicker( {
+	actions,
+	className,
+	options,
+} ) {
+	return (
+		<div className={ classnames( 'components-circular-option-picker', className ) }>
+			{ options }
+			{ actions && (
+				<div className="components-circular-option-picker__custom-clear-wrapper">
+					{ actions }
+				</div>
+			) }
+		</div>
+	);
+}
+
+CircularOptionPicker.Option = Option;
+CircularOptionPicker.ButtonAction = ButtonAction;
+CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;

packages/components/src/circular-option-picker/style.scss

@@ -0,0 +1,106 @@
+$color-palette-circle-size: 28px;
+$color-palette-circle-spacing: 14px;
+
+.components-circular-option-picker {
+	margin-right: -14px;
+	width: calc(100% + 14px);
+
+	.components-circular-option-picker__custom-clear-wrapper {
+		width: calc(100% - 14px);
+		display: flex;
+		justify-content: flex-end;
+	}
+}
+
+.components-circular-option-picker__option-wrapper {
+	display: inline-block;
+	height: $color-palette-circle-size;
+	width: $color-palette-circle-size;
+	margin-right: $color-palette-circle-spacing;
+	margin-bottom: $color-palette-circle-spacing;
+	vertical-align: top;
+	transform: scale(1);
+	transition: 100ms transform ease;
+	@include reduce-motion("transition");
+	&:hover {
+		transform: scale(1.2);
+	}
+
+	// Ensure that the <div> that <Dropdown> wraps our toggle button with is full height
+	& > div {
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.components-circular-option-picker__option {
+	display: inline-block;
+	vertical-align: top;
+	height: 100%;
+	width: 100%;
+	border: none;
+	border-radius: 50%;
+	background: transparent;
+	box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
+	transition: 100ms box-shadow ease;
+	@include reduce-motion("transition");
+	cursor: pointer;
+
+	&.is-active {
+		box-shadow: inset 0 0 0 4px;
+		position: relative;
+		z-index: z-index(".components-circular-option-picker__option.is-active");
+
+		& + .dashicons-saved {
+			position: absolute;
+			left: 4px;
+			top: 4px;
+			border-radius: 50%;
+			z-index: z-index(".components-circular-option-picker__option.is-active + .dashicons-saved");
+			background: $white;
+			pointer-events: none;
+		}
+	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: -1px;
+		left: -1px;
+		bottom: -1px;
+		right: -1px;
+		border-radius: $radius-round;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+		// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
+		border: 1px solid transparent;
+	}
+
+	&:focus {
+		outline: none;
+		&::after {
+			content: "";
+			border: #{ $border-width * 2 } solid $dark-gray-400;
+			width: 32px;
+			height: 32px;
+			position: absolute;
+			top: -2px;
+			left: -2px;
+			border-radius: $radius-round;
+			box-shadow: inset 0 0 0 2px $white;
+		}
+	}
+}
+
+.components-circular-option-picker__button-action .components-circular-option-picker__option {
+	color: $white;
+	background: $white;
+}
+
+
+.components-circular-option-picker__dropdown-link-action {
+	margin-right: $grid-size-large;
+
+	.components-button {
+		line-height: 22px;
+	}
+}