@automattic/onboarding 1.0.0

package/src/utils/flows.ts

@@ -0,0 +1,232 @@
+export const ACCOUNT_FLOW = 'account';
+export const AI_ASSEMBLER_FLOW = 'ai-assembler';
+export const NEWSLETTER_FLOW = 'newsletter';
+export const NEWSLETTER_POST_SETUP_FLOW = 'newsletter-post-setup';
+export const HOSTING_LP_FLOW = 'hosting-start';
+export const NEW_HOSTED_SITE_FLOW = 'new-hosted-site';
+export const NEW_HOSTED_SITE_FLOW_USER_INCLUDED = 'new-hosted-site-user-included';
+export const TRANSFERRING_HOSTED_SITE_FLOW = 'transferring-hosted-site';
+export const LINK_IN_BIO_FLOW = 'link-in-bio';
+export const LINK_IN_BIO_TLD_FLOW = 'link-in-bio-tld';
+export const LINK_IN_BIO_POST_SETUP_FLOW = 'link-in-bio-post-setup';
+export const CONNECT_DOMAIN_FLOW = 'connect-domain';
+export const VIDEOPRESS_FLOW = 'videopress';
+export const VIDEOPRESS_ACCOUNT = 'videopress-account';
+export const VIDEOPRESS_TV_FLOW = 'videopress-tv';
+export const VIDEOPRESS_TV_PURCHASE_FLOW = 'videopress-tv-purchase';
+export const IMPORT_FOCUSED_FLOW = 'import-focused';
+export const IMPORT_HOSTED_SITE_FLOW = 'import-hosted-site';
+export const SENSEI_FLOW = 'sensei';
+export const ECOMMERCE_FLOW = 'ecommerce';
+export const ENTREPRENEUR_FLOW = 'entrepreneur';
+export const WOOEXPRESS_FLOW = 'wooexpress';
+export const FREE_FLOW = 'free';
+export const FREE_POST_SETUP_FLOW = 'free-post-setup';
+export const MIGRATION_FLOW = 'import-focused';
+export const SITE_MIGRATION_FLOW = 'site-migration';
+export const MIGRATION_SIGNUP_FLOW = 'migration-signup';
+export const HOSTED_SITE_MIGRATION_FLOW = 'hosted-site-migration';
+export const COPY_SITE_FLOW = 'copy-site';
+export const BUILD_FLOW = 'build';
+export const WRITE_FLOW = 'write';
+export const START_WRITING_FLOW = 'start-writing';
+export const DESIGN_FIRST_FLOW = 'design-first';
+export const SITE_SETUP_FLOW = 'site-setup';
+export const WITH_THEME_FLOW = 'with-theme';
+export const WITH_THEME_ASSEMBLER_FLOW = 'with-theme-assembler';
+export const ASSEMBLER_FIRST_FLOW = 'assembler-first';
+
+export const READYMADE_TEMPLATE_FLOW = 'readymade-template';
+
+export const UPDATE_DESIGN_FLOW = 'update-design';
+export const DOMAIN_UPSELL_FLOW = 'domain-upsell';
+export const DOMAIN_TRANSFER = 'domain-transfer';
+export const GOOGLE_TRANSFER = 'google-transfer';
+export const HUNDRED_YEAR_PLAN_FLOW = 'hundred-year-plan';
+export const REBLOGGING_FLOW = 'reblogging';
+export const DOMAIN_FOR_GRAVATAR_FLOW = 'domain-for-gravatar';
+export const ONBOARDING_GUIDED_FLOW = 'onboarding';
+export const EMAIL_SUBSCRIPTION_FLOW = 'email-subscription';
+
+export const isLinkInBioFlow = ( flowName: string | null | undefined ) => {
+	return Boolean(
+		flowName &&
+			[ LINK_IN_BIO_FLOW, LINK_IN_BIO_TLD_FLOW, LINK_IN_BIO_POST_SETUP_FLOW ].includes( flowName )
+	);
+};
+
+export const isNewsletterFlow = ( flowName: string | null ) => {
+	return Boolean(
+		flowName && [ NEWSLETTER_FLOW, NEWSLETTER_POST_SETUP_FLOW ].includes( flowName )
+	);
+};
+
+export const isFreeFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ FREE_FLOW, FREE_POST_SETUP_FLOW ].includes( flowName ) );
+};
+
+export const isNewsletterOrLinkInBioFlow = ( flowName: string | null ) => {
+	return Boolean(
+		flowName &&
+			[
+				NEWSLETTER_FLOW,
+				NEWSLETTER_POST_SETUP_FLOW,
+				LINK_IN_BIO_FLOW,
+				LINK_IN_BIO_TLD_FLOW,
+				LINK_IN_BIO_POST_SETUP_FLOW,
+			].includes( flowName )
+	);
+};
+
+export const isTailoredSignupFlow = ( flowName: string | null ) => {
+	return Boolean(
+		flowName &&
+			( isNewsletterOrLinkInBioFlow( flowName ) ||
+				VIDEOPRESS_FLOW === flowName ||
+				VIDEOPRESS_TV_FLOW === flowName ||
+				VIDEOPRESS_TV_PURCHASE_FLOW === flowName ||
+				ECOMMERCE_FLOW === flowName ||
+				FREE_FLOW === flowName )
+	);
+};
+
+export const isEntrepreneurSignupFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && ENTREPRENEUR_FLOW === flowName );
+};
+
+export const isHostingSignupFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && HOSTING_LP_FLOW === flowName );
+};
+
+export const isNewHostedSiteCreationFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && NEW_HOSTED_SITE_FLOW === flowName );
+};
+
+export const isTransferringHostedSiteCreationFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && TRANSFERRING_HOSTED_SITE_FLOW === flowName );
+};
+
+export const isAnyHostingFlow = ( flowName?: string | null ) => {
+	return Boolean(
+		flowName &&
+			[ HOSTING_LP_FLOW, NEW_HOSTED_SITE_FLOW, TRANSFERRING_HOSTED_SITE_FLOW ].includes( flowName )
+	);
+};
+
+export const isAnyMigrationFlow = ( flowName?: string | null ) => {
+	return Boolean(
+		flowName &&
+			[ MIGRATION_FLOW, IMPORT_FOCUSED_FLOW, IMPORT_HOSTED_SITE_FLOW ].includes( flowName )
+	);
+};
+
+export const isMigrationFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ MIGRATION_FLOW ].includes( flowName ) );
+};
+
+export const isCopySiteFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ COPY_SITE_FLOW ].includes( flowName ) );
+};
+
+export const isEntrepreneurFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ ENTREPRENEUR_FLOW ].includes( flowName ) );
+};
+
+export const isWooExpressFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ WOOEXPRESS_FLOW ].includes( flowName ) );
+};
+
+export const isNewSiteMigrationFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ SITE_MIGRATION_FLOW ].includes( flowName ) );
+};
+
+export const isMigrationSignupFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ MIGRATION_SIGNUP_FLOW ].includes( flowName ) );
+};
+
+export const isHostedSiteMigrationFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ HOSTED_SITE_MIGRATION_FLOW ].includes( flowName ) );
+};
+
+export const isBuildFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ BUILD_FLOW ].includes( flowName ) );
+};
+
+export const isWriteFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ WRITE_FLOW ].includes( flowName ) );
+};
+
+export const isUpdateDesignFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ UPDATE_DESIGN_FLOW ].includes( flowName ) );
+};
+
+export const isStartWritingFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ START_WRITING_FLOW ].includes( flowName ) );
+};
+
+export const isDesignFirstFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ DESIGN_FIRST_FLOW ].includes( flowName ) );
+};
+
+export const isBlogOnboardingFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ START_WRITING_FLOW, DESIGN_FIRST_FLOW ].includes( flowName ) );
+};
+
+export const isOnboardingGuidedFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ ONBOARDING_GUIDED_FLOW ].includes( flowName ) );
+};
+
+export const isDomainUpsellFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && [ DOMAIN_UPSELL_FLOW ].includes( flowName ) );
+};
+
+export const isSiteAssemblerFlow = ( flowName: string | null ) => {
+	const SITE_ASSEMBLER_FLOWS = [
+		WITH_THEME_ASSEMBLER_FLOW,
+		AI_ASSEMBLER_FLOW,
+		ASSEMBLER_FIRST_FLOW,
+	];
+
+	return !! flowName && SITE_ASSEMBLER_FLOWS.includes( flowName );
+};
+
+export const isReadymadeFlow = ( flowName: string | null ) => flowName === READYMADE_TEMPLATE_FLOW;
+
+export const isWithThemeAssemblerFlow = ( flowName: string | null ) => {
+	return !! flowName && WITH_THEME_ASSEMBLER_FLOW === flowName;
+};
+
+export const isWithThemeFlow = ( flowName: string | null ) => {
+	const WITH_THEME_FLOWS = [ WITH_THEME_FLOW, WITH_THEME_ASSEMBLER_FLOW ];
+
+	return !! flowName && WITH_THEME_FLOWS.includes( flowName );
+};
+
+export const isSiteSetupFlow = ( flowName: string | null ) => {
+	return !! flowName && SITE_SETUP_FLOW === flowName;
+};
+
+export const isSenseiFlow = ( flowName: string | null ) => {
+	return Boolean( flowName && SENSEI_FLOW === flowName );
+};
+
+export const ecommerceFlowRecurTypes = {
+	YEARLY: 'yearly',
+	MONTHLY: 'monthly',
+	'2Y': '2Y',
+	'3Y': '3Y',
+};
+
+export const isVideoPressFlow = ( flowName: string | null ) => {
+	return !! flowName && [ VIDEOPRESS_FLOW, VIDEOPRESS_ACCOUNT ].includes( flowName );
+};
+
+export const isVideoPressTVFlow = ( flowName: string | null | undefined ) => {
+	return Boolean(
+		flowName && [ VIDEOPRESS_TV_FLOW, VIDEOPRESS_TV_PURCHASE_FLOW ].includes( flowName )
+	);
+};
+
+export const isDomainForGravatarFlow = ( flowName: string | null | undefined ) => {
+	return Boolean( flowName && [ DOMAIN_FOR_GRAVATAR_FLOW ].includes( flowName ) );
+};

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+export * from './contrastChecker';
+export * from './flows';
+export * from './use-data-loss-warning';
+export { doesStringResembleDomain } from './is-domain';
+export { suggestEmailCorrection, extractDomainWithExtension } from './domain-suggester';

package/src/utils/is-domain.ts

@@ -0,0 +1,18 @@
+export function doesStringResembleDomain( domainOrProduct: string ): boolean {
+	try {
+		// Domain names should all contain a dot.
+		const hasDot = domainOrProduct.includes( '.' );
+		if ( ! hasDot ) {
+			return false;
+		}
+
+		// Subdomain site slugs contain the install path after two colons.
+		const domainBeforeColons = domainOrProduct.split( '::' )[ 0 ];
+
+		// Domains should be able to become a valid URL.
+		// eslint-disable-next-line no-new
+		new URL( 'http://' + domainBeforeColons );
+		return true;
+	} catch {}
+	return false;
+}

package/src/utils/test/domain-suggester.ts

@@ -0,0 +1,87 @@
+import { suggestEmailCorrection } from '../domain-suggester';
+
+describe( 'suggestEmailCorrection', () => {
+	test( 'should return correct result and ignores processing for a domain included in valid email domain list', () => {
+		const result = suggestEmailCorrection( 'example@gmail.com' );
+		expect( result ).toEqual( {
+			oldEmail: 'example@gmail.com',
+			oldDomain: 'gmail.com',
+			newDomain: null,
+			newEmail: null,
+			distance: Infinity,
+			wasCorrected: false,
+		} );
+	} );
+
+	test( 'should suggest a correction for an invalid email domain within the Levenshtein distance limit of 2', () => {
+		const result = suggestEmailCorrection( 'example@gnail.com' );
+		expect( result ).toEqual( {
+			oldEmail: 'example@gnail.com',
+			oldDomain: 'gnail.com',
+			newDomain: 'gmail.com',
+			newEmail: 'example@gmail.com',
+			distance: 1,
+			wasCorrected: true,
+		} );
+	} );
+
+	test( 'should not suggest a correction for an invalid email domain beyond the default Levenshtein distance limit of 2', () => {
+		const result = suggestEmailCorrection( 'example@ggggl.com' );
+		expect( result ).toEqual( {
+			oldEmail: 'example@ggggl.com',
+			oldDomain: 'ggggl.com',
+			newDomain: null,
+			newEmail: null,
+			distance: Infinity,
+			wasCorrected: false,
+		} );
+	} );
+
+	test( 'should suggest a correction for a captialized invalid email domain within the Levenshtein distance limit of 2', () => {
+		const result = suggestEmailCorrection( 'EXAMPLE@HOTMAAL.COM' );
+		expect( result ).toEqual( {
+			oldEmail: 'EXAMPLE@HOTMAAL.COM',
+			oldDomain: 'hotmaal.com',
+			newDomain: 'hotmail.com',
+			newEmail: 'example@hotmail.com',
+			distance: 1,
+			wasCorrected: true,
+		} );
+	} );
+
+	test( 'should not suggest a correction for a capitalized invalid email domain beyond the default Levenshtein distance limit of 2', () => {
+		const result = suggestEmailCorrection( 'EXAMPLE@ZZZZL.COM' );
+		expect( result ).toEqual( {
+			oldEmail: 'EXAMPLE@ZZZZL.COM',
+			oldDomain: 'zzzzl.com',
+			newDomain: null,
+			newEmail: null,
+			distance: Infinity,
+			wasCorrected: false,
+		} );
+	} );
+
+	test( 'should not suggest a correction for a domain included in the domain avoid list', () => {
+		const result = suggestEmailCorrection( 'example@mail.com' );
+		expect( result ).toEqual( {
+			oldEmail: 'example@mail.com',
+			oldDomain: 'mail.com',
+			newDomain: null,
+			newEmail: null,
+			distance: Infinity,
+			wasCorrected: false,
+		} );
+	} );
+
+	test( 'should not suggest a correction for a domain if user is still typing', () => {
+		const result = suggestEmailCorrection( 'example@gmail.co' );
+		expect( result ).toEqual( {
+			oldEmail: 'example@gmail.co',
+			oldDomain: 'gmail.co',
+			newDomain: null,
+			newEmail: null,
+			distance: Infinity,
+			wasCorrected: false,
+		} );
+	} );
+} );

package/src/utils/use-data-loss-warning.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+export function useDataLossWarning( enabled: boolean ) {
+	useEffect( () => {
+		const handleBeforeUnload = ( event: BeforeUnloadEvent ) => {
+			event.preventDefault();
+			event.returnValue = '';
+		};
+		if ( enabled ) {
+			window.addEventListener( 'beforeunload', handleBeforeUnload );
+
+			return () => {
+				window.removeEventListener( 'beforeunload', handleBeforeUnload );
+			};
+		}
+	}, [ enabled ] );
+}

package/src/videopress-logo/index.tsx

@@ -0,0 +1,36 @@
+type Props = {
+	className?: string;
+	size?: number;
+};
+
+const VideoPressLogo: React.FunctionComponent< Props > = ( {
+	className = 'videopress-logo',
+	size = 24,
+} ) => {
+	return (
+		<svg
+			className={ className }
+			height={ size }
+			width={ size }
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g clipPath="url(#clip0_817_8325)">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.13433 8.15456C6.93894 7.4713 6.3119 7 5.59826 7C4.51438 7 3.7453 8.05189 4.07851 9.07862L6.43154 16.3292C6.80857 17.4909 7.89509 18.2781 9.12151 18.2781C10.3479 18.2781 11.4344 17.4909 11.8115 16.3292L12.2319 15.0337H14.3959H16.0752C18.6214 15.0337 20.328 13.4995 20.328 11.0392C20.328 8.60674 18.665 7 16.1842 7H12.6448H11.3643L9.07552 14.929C9.07144 14.9236 9.06828 14.9173 9.06634 14.9104L7.13433 8.15456ZM15.4645 12.6236H13.014L14.0352 9.47706H15.4645C16.5277 9.47706 17.1656 10.0573 17.1656 11.0392C17.1656 12.0155 16.5277 12.6236 15.4645 12.6236Z"
+					fill="white"
+				/>
+			</g>
+			<defs>
+				<clipPath id="clip0_817_8325">
+					<rect width="24" height="24" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+};
+
+export default VideoPressLogo;

package/styles/base-styles.scss

@@ -0,0 +1,7 @@
+@import "@wordpress/base-styles/z-index";
+@import "@wordpress/base-styles/colors";
+@import "@wordpress/base-styles/variables";
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "@wordpress/base-styles/animations";
+@import "@automattic/typography/styles/fonts";

package/styles/mixins.scss

@@ -0,0 +1,262 @@
+@import "./base-styles";
+@import "./variables";
+
+@mixin onboarding-font-recoleta {
+	font-family: $brand-serif;
+	font-weight: 400;
+	letter-spacing: -0.4px;
+}
+
+@mixin onboarding-heading-text {
+	@include onboarding-font-recoleta;
+	font-size: 42px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	line-height: 57px;
+}
+
+@mixin onboarding-heading-text-tablet {
+	@include onboarding-font-recoleta;
+	font-size: 36px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	line-height: 40px;
+}
+
+@mixin onboarding-heading-text-mobile {
+	@include onboarding-font-recoleta;
+	font-size: 32px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	line-height: 40px;
+}
+
+@mixin onboarding-heading-title {
+	@include onboarding-heading-text-mobile;
+	color: var(--mainColor);
+
+	@include break-mobile {
+		@include onboarding-heading-text-tablet;
+	}
+
+	@include break-xlarge {
+		@include onboarding-heading-text;
+	}
+}
+
+@mixin onboarding-large-text {
+	font-size: 16px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	line-height: 24px;
+}
+
+@mixin onboarding-medium-text {
+	font-size: $font-body-small;
+	line-height: 17px;
+}
+
+@mixin onboarding-small-text {
+	font-size: $font-body-extra-small;
+	line-height: 14px;
+}
+
+@mixin onboarding-x-small-text {
+	font-size: $font-body-extra-small;
+	line-height: 13px;
+}
+
+@mixin onboarding-block-margin {
+	margin-left: $onboarding-block-margin-mobile;
+	margin-right: $onboarding-block-margin-mobile;
+
+	@include break-small {
+		margin-left: $onboarding-block-margin-small;
+		margin-right: $onboarding-block-margin-small;
+	}
+
+	@include break-medium {
+		margin-left: $onboarding-block-margin-medium;
+		margin-right: $onboarding-block-margin-medium;
+	}
+}
+
+@mixin onboarding-block-margin-wide {
+	@include break-medium {
+		margin-left: $onboarding-block-margin-small;
+		margin-right: $onboarding-block-margin-small;
+	}
+}
+
+@mixin onboarding-heading-padding {
+	margin: $onboarding-heading-margin-mobile;
+
+	@include break-small {
+		margin: $onboarding-heading-margin-small;
+	}
+
+	@include break-medium {
+		margin: $onboarding-heading-margin-medium;
+	}
+}
+
+@mixin onboarding-body-margin {
+	margin: $onboarding-body-margin-mobile;
+
+	@include break-small {
+		margin: $onboarding-body-margin-small;
+	}
+
+	@include break-medium {
+		margin: $onboarding-body-margin-medium;
+	}
+}
+
+/* (2560x1440) 2K resolution */
+@mixin onboarding-break-2k() {
+	@media (min-width: 2560px) {
+		@content;
+	}
+}
+
+/* (1920x1080) Full HD Display */
+@mixin onboarding-break-full-hd() {
+	@media (min-width: 1920px) {
+		@content;
+	}
+}
+
+@mixin onboarding-break-mobile-tall() {
+	@media (min-height: 750px) {
+		@content;
+	}
+}
+
+@mixin onboarding-break-mobile-landscape() {
+	// very narrow wide screens (mobile landscape)
+	@media screen and (max-height: 512px) {
+		@content;
+	}
+}
+
+@mixin onboarding-modal-overlay {
+	// Absolute positioning allows the modal
+	// to reuse the <body> element's scrollbar.
+	position: absolute;
+
+	// This positions the domain picker modal
+	// right below the gutenboarding header,
+	// keeping the header clickable.
+	top: $onboarding-header-height;
+	left: 0;
+
+	// Using min-height lets the overlay cover
+	// the entire viewport ensuring nothing behind
+	// it can be seen.
+	//
+	// When the domain picker's content is taller
+	// than the viewport height, it will expand taller
+	// than the provided min-height, triggering
+	// the appearance of the <body> element's scrollbar.
+	min-height: calc(100vh - #{$onboarding-header-height});
+	width: 100%;
+
+	background: var(--studio-white);
+}
+
+@mixin onboarding-block-edge2edge {
+	margin-left: #{$onboarding-block-margin-mobile * -1};
+	margin-right: #{$onboarding-block-margin-mobile * -1};
+
+	@include break-small {
+		margin-left: #{$onboarding-block-margin-small * -1};
+		margin-right: #{$onboarding-block-margin-small * -1};
+	}
+
+	@include break-medium {
+		margin-left: #{$onboarding-block-margin-medium * -1};
+		margin-right: #{$onboarding-block-margin-medium * -1};
+	}
+}
+
+@mixin onboarding-block-edge2edge-container {
+	@include onboarding-block-edge2edge;
+
+	width: auto;
+}
+
+@mixin onboarding-block-edge2edge-content {
+	border-left: $onboarding-block-margin-mobile solid transparent;
+	border-right: $onboarding-block-margin-mobile solid transparent;
+
+	@include break-small {
+		border-left: $onboarding-block-margin-small solid transparent;
+		border-right: $onboarding-block-margin-small solid transparent;
+	}
+
+	@include break-medium {
+		border-left: $onboarding-block-margin-medium solid transparent;
+		border-right: $onboarding-block-margin-medium solid transparent;
+	}
+}
+
+@mixin onboarding-block-edge2edge-columns {
+	&:first-child {
+		border-left: $onboarding-block-margin-mobile solid transparent;
+	}
+	&:last-child {
+		border-right: $onboarding-block-margin-mobile solid transparent;
+	}
+
+	@include break-small {
+		&:first-child {
+			border-left: $onboarding-block-margin-small solid transparent;
+		}
+		&:last-child {
+			border-right: $onboarding-block-margin-small solid transparent;
+		}
+	}
+
+	@include break-medium {
+		&:first-child {
+			border-left: $onboarding-block-margin-medium solid transparent;
+		}
+		&:last-child {
+			border-right: $onboarding-block-margin-medium solid transparent;
+		}
+	}
+}
+
+// onaboarding-placeholder() mixin is a copy of 'client/assets/stylesheets/shared/mixins/placeholder'
+
+@mixin onboarding-placeholder( $color-property: $gray-100 ) {
+	@include onboarding-loading( $color-property );
+	color: transparent;
+
+	&::after {
+		content: "\00a0";
+	}
+}
+
+@mixin onboarding-loading( $color-property: $gray-100 ) {
+	animation: onboarding-loading-pulse 1.6s ease-in-out infinite;
+	background: $color-property;
+}
+
+// a pulsing animation for placeholders
+@keyframes onboarding-loading-pulse {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
+
+// Hide visually without allowing screen reader access.
+@mixin onboarding-screen-reader-text {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}

package/styles/variables.scss

@@ -0,0 +1,26 @@
+@import "./base-styles";
+
+// Reusable style variables
+$onboarding-header-height: $header-height;
+$onboarding-footer-height: $header-height;
+
+// Block margins increment by 2x
+$onboarding-block-margin-mobile: 24px;
+$onboarding-block-margin-small: 48px;
+$onboarding-block-margin-medium: 96px;
+
+// Heading margins increment by 16px
+$onboarding-heading-margin-mobile: 48px 0 ( 48px * 0.8 );
+$onboarding-heading-margin-small: 64px 0 ( 64px * 0.8 );
+$onboarding-heading-margin-medium: 80px 0 ( 80px * 0.8 );
+
+// Body margins increment by 16px
+$onboarding-body-margin-mobile: 0 0 48px 0;
+$onboarding-body-margin-small: 0 0 64px 0;
+$onboarding-body-margin-medium: 0 0 80px 0;
+
+// @TODO: refactor to common variable in onboarding
+// see https://github.com/Automattic/wp-calypso/issues/47181
+// the blue accent this is used as the primary color in focused-launch
+$onboarding-accent-blue: #117ac9;
+$onboarding-accent-blue-background: #fafcfe;