From 2b1f4ad140ea2c97107ddfea42a756e075a2b4a5 Mon Sep 17 00:00:00 2001 From: David Ryan Date: Thu, 30 Mar 2023 10:20:15 -0700 Subject: [PATCH 1/5] New color tokens from UX --- src/OnboardingSPA/styles/_branding.scss | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 6938f8069..e7dd36876 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -117,22 +117,22 @@ 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; + --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); --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; @@ -140,7 +140,7 @@ body { --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; --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); From 6dd9b5f07ffee13bab4f89ff922f0c3ce0531b85 Mon Sep 17 00:00:00 2001 From: David Ryan Date: Thu, 30 Mar 2023 12:48:06 -0700 Subject: [PATCH 2/5] fix hex lints --- src/OnboardingSPA/styles/_branding.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index e7dd36876..0e47c2892 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -117,7 +117,7 @@ body { } &.nfd-brand-crazy-domains { - --wp-admin-theme-color: #0D8821; + --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; @@ -129,10 +129,10 @@ body { --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: #C3CBD8; - --nfd-onboarding-secondary-alt: #1D2A3B; - --nfd-onboarding-tertiary: #196BDE; - --nfd-onboarding-tertiary-alt: #C77D1C; + --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; @@ -140,7 +140,7 @@ body { --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-light-gray-highlighted: #e2e9f4; - --nfd-onboarding-dark: #1D2A3B; + --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); From 4c2f4430c1175071c93ee52003659eb6cc078127 Mon Sep 17 00:00:00 2001 From: David Ryan Date: Tue, 11 Apr 2023 16:00:34 -0700 Subject: [PATCH 3/5] push requested branding updates for team review --- src/Brands/crazy-domains/icon-empty.svg | 0 src/Brands/crazy-domains/icon-z.svg | 1 - src/Brands/crazy-domains/icon.svg | 2 +- src/OnboardingSPA/styles/_branding.scss | 81 +++++++++++++++++++++---- 4 files changed, 70 insertions(+), 14 deletions(-) create mode 100644 src/Brands/crazy-domains/icon-empty.svg delete mode 100644 src/Brands/crazy-domains/icon-z.svg 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 0e47c2892..2bde4a933 100644 --- 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); + } + } } } From 005c71f5e8f1e4ea2f636a0c9d23df0ea445bfbf Mon Sep 17 00:00:00 2001 From: David Ryan Date: Tue, 11 Apr 2023 16:07:55 -0700 Subject: [PATCH 4/5] sass lint fixes --- src/OnboardingSPA/styles/_branding.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 2bde4a933..57c2540eb 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -158,10 +158,13 @@ body { .nfd-onboarding-drawer__toggle { background-color: transparent; + &-button { background-color: transparent; } + border-bottom: 1px solid #e0e0e0; + &.is-open { border-bottom: none; } @@ -169,12 +172,15 @@ body { .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 { @@ -183,9 +189,11 @@ body { border-color: var(--nfd-onboarding-primary); } } + .custom-palette { color: var(--nfd-onboarding-light); } + .drawer-palette--button { border: 1px solid var(--nfd-onboarding-secondary); &:hover { @@ -198,12 +206,15 @@ body { } .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); } From 41ee3207453f28c3616eab92632c4bfaff492ea4 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 12 Apr 2023 11:42:39 +0530 Subject: [PATCH 5/5] fix sass lint --- src/OnboardingSPA/styles/_branding.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 57c2540eb..f85b9b32d 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -169,6 +169,7 @@ body { 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); @@ -183,6 +184,7 @@ body { &-menu-link { color: var(--nfd-onboarding-light-gray-4); + &.active { background-color: var(--nfd-onboarding-drawer-bg); color: var(--nfd-onboarding-primary); @@ -196,8 +198,10 @@ body { .drawer-palette--button { border: 1px solid var(--nfd-onboarding-secondary); + &:hover { background-color: var(--nfd-onboarding-primary); + * { color: var(--nfd-onboarding-light); } @@ -206,7 +210,7 @@ body { } .nfd-onboarding-layout { - + &.is-bg-primary { background-color: var(--nfd-onboarding-light); }