Merge branch 'add/PRESS2-682-support-crazydomains-new-colors' of http…

…s://github.com/newfold-labs/wp-module-onboarding into add/PRESS2-682-support-crazydomains

src/OnboardingSPA/styles/_branding.scss

@@ -117,30 +117,30 @@ body {
 	}
 
 	&.nfd-brand-crazy-domains {
-		--wp-admin-theme-color: #6fac2f;
-		--wp-admin-theme-color--rgb: 111, 172, 47;
-		--wp-admin-theme-color-darker-10: #568f1b;
-		--wp-admin-theme-color-darker-10--rgb: 86, 143, 27;
-		--wp-admin-theme-color-darker-20: #484848;
-		--wp-admin-theme-color-darker-20--rgb: 72, 72, 72;
-		--nfd-onboarding-dark-icon: url(../../Brands/crazy-domains/icon-z.svg);
+		--wp-admin-theme-color: #548224;
+		--wp-admin-theme-color--rgb: 84, 130, 36;
+		--wp-admin-theme-color-darker-10: #4c7520;
+		--wp-admin-theme-color-darker-10--rgb: 76, 117, 32;
+		--wp-admin-theme-color-darker-20: #43681d;
+		--wp-admin-theme-color-darker-20--rgb: 67, 104, 29;
+		--nfd-onboarding-dark-icon: url(../../Brands/crazy-domains/icon-empty.svg);
 		--nfd-onboarding-icon: url(../../Brands/crazy-domains/icon.svg);
 		--nfd-onboarding-logo: url(../../Brands/crazy-domains/logo.svg);
 		--nfd-onboarding-primary: var(--wp-admin-theme-color);
 		--nfd-onboarding-highlighted--rgb: var(--wp-admin-theme-color-darker-10--rgb);
 		--nfd-onboarding-primary-alt: var(--wp-admin-theme-color-darker-10);
-		--nfd-onboarding-secondary: var(--wp-admin-theme-color-darker-10);
-		--nfd-onboarding-secondary-alt: var(--wp-admin-theme-color-darker-20);
-		--nfd-onboarding-tertiary: var(--nfd-onboarding-primary);
-		--nfd-onboarding-tertiary-alt: var(--nfd-onboarding-primary-alt);
+		--nfd-onboarding-secondary: #c3cbd8;
+		--nfd-onboarding-secondary-alt: #1d2a3b;
+		--nfd-onboarding-tertiary: #196bde;
+		--nfd-onboarding-tertiary-alt: #c77d1c;
 		--nfd-onboarding-light: #fff;
-		--nfd-onboarding-light-gray: #f0f0f0;
-		--nfd-onboarding-light-gray-2: #efefef;
-		--nfd-onboarding-light-gray-3: #f2f2f2;
-		--nfd-onboarding-light-gray-4: #a7a7a7;
-		--nfd-onboarding-light-gray-5: #eee;
+		--nfd-onboarding-light-gray: #fcfff9;
+		--nfd-onboarding-light-gray-2: #fcfff9;
+		--nfd-onboarding-light-gray-3: #fcfff9;
+		--nfd-onboarding-light-gray-4: #5c5c5c;
+		--nfd-onboarding-light-gray-5: var(--nfd-onboarding-light);
 		--nfd-onboarding-light-gray-highlighted: #e2e9f4;
-		--nfd-onboarding-dark: var(--wp-admin-theme-color-darker-20);
+		--nfd-onboarding-dark: #1d2a3b;
 		--nfd-onboarding-border: 219, 219, 219;
 		--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary);
 		--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light);
@@ -151,5 +151,77 @@ body {
 		--nfd-onboarding-step-what-next-img-3: url(../../Brands/crazy-domains/full-service.png);
 		--nfd-onboarding-step-what-next-img-1: url(../../Brands/crazy-domains/wp-admin.png);
 		--nfd-onboarding-step-what-next-img-2: url(../static/images/help.png);
+
+		--nfd-onboarding-drawer-bg: var(--nfd-onboarding-light);
+		--nfd-onboarding-drawer-fg: var(--nfd-onboarding-dark);
+		--nfd-onboarding-content-bg: var(--nfd-onboarding-light);
+
+		.nfd-onboarding-drawer__toggle {
+			background-color: transparent;
+
+			&-button {
+				background-color: transparent;
+			}
+
+			border-bottom: 1px solid #e0e0e0;
+
+			&.is-open {
+				border-bottom: none;
+			}
+		}
+
+		.nfd-onboarding-drawer__panel {
+			--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-light-gray-4);
+			--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-primary);
+
+			&-scroll-container {
+				border-right: 1px solid #e0e0e0; // mirror header border.
+			}
+
+			&-site-title {
+				color: var(--nfd-onboarding-light-gray-4);
+			}
+
+			&-menu-link {
+				color: var(--nfd-onboarding-light-gray-4);
+
+				&.active {
+					background-color: var(--nfd-onboarding-drawer-bg);
+					color: var(--nfd-onboarding-primary);
+					border-color: var(--nfd-onboarding-primary);
+				}
+			}
+
+			.custom-palette {
+				color: var(--nfd-onboarding-light);
+			}
+
+			.drawer-palette--button {
+				border: 1px solid var(--nfd-onboarding-secondary);
+
+				&:hover {
+					background-color: var(--nfd-onboarding-primary);
+
+					* {
+						color: var(--nfd-onboarding-light);
+					}
+				}
+			}
+		}
+
+		.nfd-onboarding-layout {
+
+			&.is-bg-primary {
+				background-color: var(--nfd-onboarding-light);
+			}
+
+			.checkbox-item--selected {
+				background: rgba(var(--nfd-onboarding-highlighted--rgb), 0.05);
+			}
+
+			.tab-img {
+				background-color: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2);
+			}
+		}
 	}
 }