button colors are working

src/follow-me/button-style.js

@@ -0,0 +1,70 @@
+function presetVarColorCss( color ) {
+	return `var(--wp--preset--color--${ color })`;
+}
+
+function getBackgroundColor( color ) {
+	// if color is a string, it's a var like this.
+	if ( typeof color === 'string' ) {
+		return presetVarColorCss( color );
+	}
+
+	return color?.color?.background || null;
+}
+
+function getLinkColor( text ) {
+	// if it starts with a hash, leave it be
+	if ( typeof text === 'string' && text.match( /^#/ ) ) {
+		return text;
+	}
+	// var:preset|color|luminous-vivid-amber
+	// var(--wp--preset--color--luminous-vivid-amber)
+	// we will receive the top format, we need to output the bottom format
+	const [ , , color ] = text.split( '|' );
+	return presetVarColorCss( color );
+}
+
+function generateSelector( selector, prop, value = null, pseudo = '' ) {
+	if ( ! value ) {
+		return '';
+	}
+	return `${ selector }${ pseudo } { ${ prop }: ${ value }; }\n`;
+}
+
+export const BODY_CLASS = 'activitypub-follow-modal-active';
+
+function getBlockStyles( id, style, backgroundColor ) {
+	const selector = `#${ id } .components-button`;
+	// we grab the background color if set as a good color for our button text
+	const buttonTextColor = getBackgroundColor( backgroundColor )
+		// bg might be in this form.
+		|| style?.color?.background;
+	// we misuse the link color for the button background
+	const buttonColor = getLinkColor( style?.elements?.link?.color?.text );
+	// hover!
+	const buttonHoverColor = getLinkColor( style?.elements?.link?.[':hover']?.color?.text );
+
+	return generateSelector( selector, 'color', buttonTextColor )
+	+ generateSelector( selector, 'background-color', buttonColor )
+	+ generateSelector( selector, 'background-color', buttonHoverColor, ':hover' )
+}
+
+export function getPopupStyles( style ) {
+	const base = `.${ BODY_CLASS } .components-modal__content .components-button`;
+	const primary = `${ base }.is-primary`;
+	const secondary = `${ base }.is-tertiary`;
+	// we misuse the link color for the button background
+	const buttonColor = getLinkColor( style?.elements?.link?.color?.text );
+	// hover!
+	const buttonHoverColor = getLinkColor( style?.elements?.link?.[':hover']?.color?.text );
+
+	return generateSelector( primary, 'background-color', buttonColor )
+	+ generateSelector( primary, 'background-color', buttonHoverColor, ':hover' )
+	+ generateSelector( secondary, 'color', buttonColor )
+}
+
+export function ButtonStyle( { id, style, backgroundColor } ) {
+	const css = getBlockStyles( id, style, backgroundColor );
+	return (
+		<style>{ css }</style>
+	);
+}

src/follow-me/edit.js

@@ -7,6 +7,7 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog
 } from '@wordpress/components';
 import { useUserOptions } from '../shared/use-user-options';
+import { ButtonStyle, BODY_CLASS, getPopupStyles } from './button-style';
 import apiFetch from '@wordpress/api-fetch';
 import { useEffect, useState } from '@wordpress/element';
 const { namespace } = window._activityPubOptions;
@@ -40,36 +41,14 @@ function getNormalizedProfile( profile ) {
 
 function generateHandle( profile ) {
 	try {
-		const urlObject = new URL( profile.url );
-		const { host, pathname } = urlObject;
-		const first = pathname.replace( /^\//, '' );
-		return `${ first}@${ host }`;
+		const { host, pathname } = new URL( profile.url )
+		const first = profile.preferredUsername ?? pathname.replace( /^\//, '' );
+		return `${ first }@${ host }`;
 	} catch ( e ) {
 		return '@error@error';
 	}
 }
 
-function styleToVar( text ) {
-	// if it starts with a hash, leave it be
-	if ( text.match( /^#/ ) ) {
-		return text;
-	}
-	// var:preset|color|luminous-vivid-amber
-	// var(--wp--preset--color--luminous-vivid-amber)
-	// we will receive the top format, we need to output the bottom format
-	const [ , , color ] = text.split( '|' );
-	return `var(--wp--preset--color--${ color })`;
-}
-
-function styleToButtonStyle( style ) {
-	if ( ! style ) {
-		return {};
-	}
-	return {
-		backgroundColor: styleToVar( style.color.text )
-	}
-}
-
 export default function Edit( { attributes, setAttributes } ) {
 	const [ profile, setProfile ] = useState( getNormalizedProfile() );
 	const { selectedUser } = attributes;
@@ -83,7 +62,7 @@ export default function Edit( { attributes, setAttributes } ) {
 
 	const blockProps = useBlockProps();
 	const usersOptions = useUserOptions();
-	const style = styleToButtonStyle( attributes?.style?.elements?.link );
+	const popupStyles = getPopupStyles( attributes.style );
 
 	return (
 		<div { ...blockProps }>
@@ -97,40 +76,47 @@ export default function Edit( { attributes, setAttributes } ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<Profile { ...profile } style={ style } />
+			<ButtonStyle id={ blockProps.id } style={ attributes.style } backgroundColor={ attributes.backgroundColor } />
+			<Profile profile={ profile } popupStyles={ popupStyles } />
 		</div>
 	);
 }
 
-function Profile( profile ) {
-	const { handle, avatar, name, style } = profile;
+function Profile( { profile, popupStyles } ) {
+	const { handle, avatar, name } = profile;
 	return (
 		<div className="activitypub-profile">
 			<img className="activitypub-profile__avatar" src={ avatar } />
 			<div className="activitypub-profile__content">
-				<div className="activitpub-profile__name">{ name }</div>
+				<div className="activitypub-profile__name">{ name }</div>
 				<div className="activitypub-profile__handle">{ handle }</div>
 			</div>
-			<Follow profile={ profile } style={ style } />
+			<Follow profile={ profile } popupStyles={ popupStyles } />
 		</div>
 	);
 }
 
-function Follow( { profile, style } ) {
+function Follow( { profile, popupStyles } ) {
 	const [ isOpen, setIsOpen ] = useState( false );
+	// a function that adds/removes the activitypub-follow-modal-active class to the body
+	function setModalIsOpen( value ) {
+		const method = value ? 'add' : 'remove';
+		document.body.classList[ method ]( BODY_CLASS );
+		setIsOpen( value );
+	}
 	return (
 		<>
-			<Button style={ style } className="activitypub-profile__follow" onClick={ () => setIsOpen( true ) } >
+			<Button className="activitypub-profile__follow" onClick={ () => setModalIsOpen( true ) } >
 				{ __( 'Follow', 'fediverse' ) }
 			</Button>
 			<ConfirmDialog
 				className="activitypub-profile__confirm"
 				isOpen={ isOpen }
-				onConfirm={ () => setIsOpen( false ) }
-				onCancel={ () => setIsOpen( false ) }
+				onConfirm={ () => setModalIsOpen( false ) }
+				onCancel={ () => setModalIsOpen( false ) }
 			>
-				Todo: put the follow layout in here.
-
+				<p>Howdy let's put some dialogs here</p>
+				<style>{ popupStyles }</style>
 			</ConfirmDialog>
 		</>
 	);

src/follow-me/style.scss

@@ -12,6 +12,7 @@
 		.activitypub-profile__name {
 			margin: 0;
 			line-height: 1;
+			font-size: var( --wp--preset--font-size--large );
 		}
 		.activitypub-profile__follow {
 			margin-left: auto;