diff --git a/src/Brands/crazy-domains/icon-empty.svg b/src/Brands/crazy-domains/icon-empty.svg
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/Brands/crazy-domains/icon-z.svg b/src/Brands/crazy-domains/icon-z.svg
deleted file mode 100644
index 2359b74e0..000000000
--- a/src/Brands/crazy-domains/icon-z.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/Brands/crazy-domains/icon.svg b/src/Brands/crazy-domains/icon.svg
index 1f38a2859..b39ce0458 100644
--- a/src/Brands/crazy-domains/icon.svg
+++ b/src/Brands/crazy-domains/icon.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index 6938f8069..f85b9b32d 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/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);
+ }
+ }
}
}