push requested branding updates for team review

newfold-labs · Apr 11, 2023 · 4c2f443 · 4c2f443
1 parent 6dd9b5f
commit 4c2f443
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 14 deletions.
diff --git a/src/Brands/crazy-domains/icon-empty.svg b/src/Brands/crazy-domains/icon-empty.svg
diff --git a/src/Brands/crazy-domains/icon-z.svg b/src/Brands/crazy-domains/icon-z.svg
diff --git a/src/Brands/crazy-domains/icon.svg b/src/Brands/crazy-domains/icon.svg
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
@@ -117,13 +117,13 @@ body {
 	}
 
 	&.nfd-brand-crazy-domains {
-		--wp-admin-theme-color: #0d8821;
-		--wp-admin-theme-color--rgb: 13, 136, 33;
-		--wp-admin-theme-color-darker-10: #0c7a1e;
-		--wp-admin-theme-color-darker-10--rgb: 12, 122, 30;
-		--wp-admin-theme-color-darker-20: #0a6d1a;
-		--wp-admin-theme-color-darker-20--rgb: 10, 109, 26;
-		--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);
@@ -134,11 +134,11 @@ body {
 		--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: #1d2a3b;
 		--nfd-onboarding-border: 219, 219, 219;
@@ -151,5 +151,62 @@ 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);
+			}
+		}
 	}
 }