From dd4d5519cf79a5d003796651bf5466007d732cc1 Mon Sep 17 00:00:00 2001 From: abhijitb Date: Thu, 13 Apr 2023 14:19:24 +0530 Subject: [PATCH 01/21] renaming light to white and dark to black with linting --- .../Button/ButtonBlue/stylesheet.scss | 3 +- .../Button/ButtonWhite/stylesheet.scss | 3 +- .../CheckboxItem/stylesheet.scss | 6 +- .../components/Drawer/stylesheet.scss | 22 +- .../components/MiniPreview/stylesheet.scss | 424 +++++++++--------- .../components/NeedHelpTag/stylesheet.scss | 5 +- .../components/Tooltip/stylesheet.scss | 90 ++-- .../SecondarySite/stylesheet.scss | 108 ++--- src/OnboardingSPA/styles/_branding.scss | 3 + 9 files changed, 335 insertions(+), 329 deletions(-) diff --git a/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss b/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss index 3ce2b592a..bdfcda874 100644 --- a/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss +++ b/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss @@ -1,4 +1,3 @@ -$button-blue-text-color : #fff; .nfd-onboarding-button { @@ -6,7 +5,7 @@ $button-blue-text-color : #fff; justify-content: center; align-items: center; width: 100%; - color: $button-blue-text-color; + color: var(--nfd-onboarding-white); height: 36px; border: none; margin: 10px 0; diff --git a/src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss b/src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss index 3071a9cd9..729f5e5a0 100644 --- a/src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss +++ b/src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss @@ -1,4 +1,3 @@ -$button-white-background-color : #fff; .nfd-onboarding-button { @@ -6,7 +5,7 @@ $button-white-background-color : #fff; justify-content: center; align-items: center; width: 100%; - background: $button-white-background-color; + background: var(--nfd-onboarding-white); color: var(--wp-admin-theme-color); border: 1px solid var(--wp-admin-theme-color); height: 36px; diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss index 5a607410f..eebe67ebb 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss @@ -1,5 +1,5 @@ /*COLOR VARIABLES*/ -$white-offset: rgb(224, 224, 224); +$white-offset: var(--nfd-onboarding-light-gray-6); $main-color-dark: var(--wp-admin-theme-color); $main-color-light: var(--nfd-onboarding-white); $main-color: var(--nfd-onboarding-highlighted--rgb); @@ -41,7 +41,7 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); margin-right: 16px; border-radius: 50%; align-items: center; - background: #f0f0f0; + background: var(--nfd-onboarding-light-gray); justify-content: center; &--selected { @@ -49,7 +49,7 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); } &--shown { - background: #f0f0f0; + background: var(--nfd-onboarding-light-gray); } } diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index db5aecf45..c7210bee5 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -351,11 +351,11 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); text-align: center; align-items: center; justify-content: center; - background-color: white; + background-color: var(--nfd-onboarding-white); color: var(--nfd-onboarding-primary); &:hover { - color: $black; + color: var(--nfd-onboarding-black); background-color: #ededed; } } @@ -424,7 +424,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); } &__text { - color: black; + color: var(--nfd-onboarding-black); font-size: 12px; font-weight: 700; line-height: 16px; @@ -463,11 +463,11 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); &-row { height: 50px; - color: black; + color: var(--nfd-onboarding-black); display: flex; cursor: pointer; align-items: center; - background-color: white; + background-color: var(--nfd-onboarding-white); justify-content: flex-start; border: 0.5px solid rgba(0, 0, 0, 0.3); @@ -492,14 +492,14 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 25px; height: 25px; display: flex; - color: black; + color: var(--nfd-onboarding-black); cursor: pointer; font-weight: 900; border-radius: 50%; align-items: center; justify-content: center; - border: 1px solid black; - background-color: white; + border: 1px solid var(--nfd-onboarding-black); + background-color: var(--nfd-onboarding-white); } } @@ -512,13 +512,13 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 40%; height: 30px; display: flex; - color: black; + color: var(--nfd-onboarding-black); cursor: pointer; margin-left: 4px; text-align: center; align-items: center; justify-content: center; - background-color: white; + background-color: var(--nfd-onboarding-white); &:hover { background-color: var(--nfd-onboarding-drawer-icon-fill); @@ -529,7 +529,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); .font-palette { &__icon { - color: black; + color: var(--nfd-onboarding-black); font-weight: 700; margin-right: 16px; } diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss index 24dd803ab..7d324a1ba 100644 --- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss @@ -1,230 +1,230 @@ -$white: #FFFFFF; -$black: #000000; -$browser-dark: #CACACA; -$browser-light: #F2F2F2; +$white: var(--nfd-onboarding-white); +$black: var(--nfd-onboarding-black); +$browser-dark: #cacaca; +$browser-light: var(--nfd-onboarding-light-gray-3); $link-browser-color: #007017; -$title-browser-color: #3858E9; +$title-browser-color: #3858e9; .mini-preview { - margin: 0px 0px 10px 0px; - font-weight: 500; - font-size: 1rem; + margin: 0 0 10px 0; + font-weight: 500; + font-size: 1rem; } .browser-container { - width: 100%; - background-color: $browser-dark; + width: 100%; + background-color: $browser-dark; } -.browser-icon{ - width: 24px; - height: 24px; - padding: 4px; - background-position: center; - background-repeat: no-repeat; - background-clip: padding-box; - - &-title{ - width: 18px; - height: 18px; - padding: 5px; - background-position: center; - background-repeat: no-repeat; - background-clip: padding-box; - } +.browser-icon { + width: 24px; + height: 24px; + padding: 4px; + background-position: center; + background-repeat: no-repeat; + background-clip: padding-box; + + &-title { + width: 18px; + height: 18px; + padding: 5px; + background-position: center; + background-repeat: no-repeat; + background-clip: padding-box; + } } .browser-dot { - width: 12px; - height: 12px; - margin: 4px; - border-radius: 50%; - display: inline-block; - - @media (max-width: 400px) { - width: 8px; - margin: 2.8px; - height: 8px; - margin-top: 3px; - } + width: 12px; + height: 12px; + margin: 4px; + border-radius: 50%; + display: inline-block; + + @media (max-width: 400px) { + width: 8px; + margin: 2.8px; + height: 8px; + margin-top: 3px; + } } .browser-content { - padding: 10px; - word-break: break-all; - background-color: $white; - - &_top-row{ - - margin-top: 8px; - - &-name{ - cursor: pointer; - font-weight: 600; - font-size: 1.2rem; - margin: 0px 0px 6px 0px; - color: $title-browser-color; - } - - &-link { - margin: 0px; - font-size: 1rem; - cursor: pointer; - color: $link-browser-color; - } - } - &_desc{ - color: $black; - text-align: left; - max-width: 450px; - font-weight: 400; - line-height: 1.58; - font-size: 0.88rem; - margin: 16px 0px 0px 0px; - } - &_social{ - display: flex; - margin-top: 4px; - justify-content: flex-start; - - &_icon{ - opacity: 1; - width: 24px; - height: 24px; - filter: none; - cursor: pointer; - text-align: center; - padding-right: 6px; - background-position: center; - background-repeat: no-repeat; - background-clip: padding-box; - transition: opacity 0.4s ease-in-out; - - &.--no-url { - opacity: 0.5; - filter: grayscale(1); - } - - &.--invalid-url { - opacity: 0.75; - filter: none; - } - } - } + padding: 10px; + word-break: break-all; + background-color: $white; + + &_top-row { + + margin-top: 8px; + + &-name { + cursor: pointer; + font-weight: 600; + font-size: 1.2rem; + margin: 0 0 6px 0; + color: $title-browser-color; + } + + &-link { + margin: 0; + font-size: 1rem; + cursor: pointer; + color: $link-browser-color; + } + } + + &_desc { + color: $black; + text-align: left; + max-width: 450px; + font-weight: 400; + line-height: 1.58; + font-size: 0.88rem; + margin: 16px 0 0 0; + } + + &_social { + display: flex; + margin-top: 4px; + justify-content: flex-start; + + &_icon { + opacity: 1; + width: 24px; + height: 24px; + filter: none; + cursor: pointer; + text-align: center; + padding-right: 6px; + background-position: center; + background-repeat: no-repeat; + background-clip: padding-box; + transition: opacity 0.4s ease-in-out; + + &.--no-url { + opacity: 0.5; + filter: grayscale(1); + } + + &.--invalid-url { + opacity: 0.75; + filter: none; + } + } + } } .browser-row { - &-title { - display: flex; - align-items: flex-end; - background-color: $browser-dark; - - &_main{ - height: 100%; - margin-left: 6px; - } - - &_buttons{ - padding: 2px 8px 3px 2px; - } - - &_bar { - display: flex; - align-items: flex-end; - - &_before { - background-color: $browser-light; - - &-curve { - opacity: 1; - width: 10px; - height: 10px; - content: " "; - display: flex; - align-items: center; - pointer-events: none; - justify-content: center; - border-radius: 0 0 8px 0; - background-color: $browser-dark; - } - } - - &_after { - background-color: $browser-light; - - &-curve { - opacity: 1; - width: 10px; - height: 10px; - content: " "; - display: flex; - align-items: center; - pointer-events: none; - justify-content: center; - border-radius: 0 0 0 8px; - background-color: $browser-dark; - } - } - - &_main { - z-index: 4; - height: 30px; - display: flex; - margin-top: 5px; - min-width: 150px; - padding-left: 5px; - padding-right: 10px; - align-items: center; - border-radius: 8px 8px 0px 0px; - background-color: $browser-light; - - &-text { - flex: 1; - content: " "; - margin-left: 2px; - max-width: 140px; - font-size: 0.8rem; - line-clamp: 1; - white-space: nowrap; - text-overflow: ellipsis; - background: -webkit-linear-gradient(left, #000 50%, #fff); - background-clip: text; - -webkit-text-fill-color: transparent; - } - } - } - - - } - - &-search { - display: flex; - align-items: center; - justify-content: center; - background-color: $browser-light; - - &__icons { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - } - - &__search-box { - flex: 10; - padding: 5px; - - &_input { - width: 100%; - font-size: 0.8rem; - border: none !important; - background-color: $white; - } - } - - &__more { - flex: 1; - } - } -} \ No newline at end of file + &-title { + display: flex; + align-items: flex-end; + background-color: $browser-dark; + + &_main { + height: 100%; + margin-left: 6px; + } + + &_buttons { + padding: 2px 8px 3px 2px; + } + + &_bar { + display: flex; + align-items: flex-end; + + &_before { + background-color: $browser-light; + + &-curve { + opacity: 1; + width: 10px; + height: 10px; + content: " "; + display: flex; + align-items: center; + pointer-events: none; + justify-content: center; + border-radius: 0 0 8px 0; + background-color: $browser-dark; + } + } + + &_after { + background-color: $browser-light; + + &-curve { + opacity: 1; + width: 10px; + height: 10px; + content: " "; + display: flex; + align-items: center; + pointer-events: none; + justify-content: center; + border-radius: 0 0 0 8px; + background-color: $browser-dark; + } + } + + &_main { + z-index: 4; + height: 30px; + display: flex; + margin-top: 5px; + min-width: 150px; + padding-left: 5px; + padding-right: 10px; + align-items: center; + border-radius: 8px 8px 0 0; + background-color: $browser-light; + + &-text { + flex: 1; + content: " "; + margin-left: 2px; + max-width: 140px; + font-size: 0.8rem; + line-clamp: 1; + white-space: nowrap; + text-overflow: ellipsis; + background: -webkit-linear-gradient(left, var(--nfd-onboarding-black) 50%, var(--nfd-onboarding-light)); + background-clip: text; + -webkit-text-fill-color: transparent; + } + } + } + } + + &-search { + display: flex; + align-items: center; + justify-content: center; + background-color: $browser-light; + + &__icons { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + } + + &__search-box { + flex: 10; + padding: 5px; + + &_input { + width: 100%; + font-size: 0.8rem; + border: none !important; + background-color: $white; + } + } + + &__more { + flex: 1; + } + } +} diff --git a/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss b/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss index 4cdf41e0a..defd93d33 100644 --- a/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss +++ b/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss @@ -1,13 +1,14 @@ .nfd-card-need-help-tag { - color: black; + color: var(--nfd-onboarding-black); padding: 20px; font-weight: 200; text-align: center; font-style: italic; font-size: clamp(0.6rem, 1.5vw, 0.9rem); + a { text-decoration: none; - padding: 0px 0.4rem; + padding: 0 0.4rem; } @media (max-width: #{($break-medium)}) { diff --git a/src/OnboardingSPA/components/Tooltip/stylesheet.scss b/src/OnboardingSPA/components/Tooltip/stylesheet.scss index 3c55dd52f..b33e2c8ba 100644 --- a/src/OnboardingSPA/components/Tooltip/stylesheet.scss +++ b/src/OnboardingSPA/components/Tooltip/stylesheet.scss @@ -1,92 +1,92 @@ -$tooltip-text-color: white; +$tooltip-text-color: var(--nfd-onboarding-white); $tooltip-background-color: rgba(0, 0, 0, 0.75); $tooltip-margin: 35px; $tooltip-arrow-size: 6px; /* Wrapping */ .Tooltip-Wrapper { - display: inline-block; - position: relative; - width: 100%; + display: inline-block; + position: relative; + width: 100%; } /* Absolute positioning */ .Tooltip-Tip { - position: absolute; - border-radius: 4px; - left: 50%; - transform: translateX(-40%); - padding: 6px; - color: $tooltip-text-color; - background: $tooltip-background-color; - font-size: 12px; - white-space: nowrap; + position: absolute; + border-radius: 4px; + left: 50%; + transform: translateX(-40%); + padding: 6px; + color: $tooltip-text-color; + background: $tooltip-background-color; + font-size: 12px; + white-space: nowrap; } /* CSS border triangles */ .Tooltip-Tip::before { - content: " "; - left: 50%; - border: solid transparent; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-width: $tooltip-arrow-size; - margin-left: calc($tooltip-arrow-size * -1); + content: " "; + left: 50%; + border: solid transparent; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-width: $tooltip-arrow-size; + margin-left: calc($tooltip-arrow-size * -1); } /* Absolute positioning */ .Tooltip-Tip.top { - top: calc($tooltip-margin * -1); + top: calc($tooltip-margin * -1); } /* CSS border triangles */ .Tooltip-Tip.top::before { - top: 100%; - border-top-color: $tooltip-background-color; + top: 100%; + border-top-color: $tooltip-background-color; } /* Absolute positioning */ .Tooltip-Tip.right { - left: calc(100% + $tooltip-margin); - top: 50%; - transform: translateX(0) translateY(-50%); + left: calc(100% + $tooltip-margin); + top: 50%; + transform: translateX(0) translateY(-50%); } /* CSS border triangles */ .Tooltip-Tip.right::before { - left: calc($tooltip-arrow-size * -1); - top: 50%; - transform: translateX(0) translateY(-50%); - border-right-color: $tooltip-background-color; + left: calc($tooltip-arrow-size * -1); + top: 50%; + transform: translateX(0) translateY(-50%); + border-right-color: $tooltip-background-color; } /* Absolute positioning */ .Tooltip-Tip.bottom { - bottom: calc($tooltip-margin * -1); + bottom: calc($tooltip-margin * -1); } /* CSS border triangles */ .Tooltip-Tip.bottom::before { - bottom: 100%; - border-bottom-color: $tooltip-background-color; + bottom: 100%; + border-bottom-color: $tooltip-background-color; } /* Absolute positioning */ .Tooltip-Tip.left { - left: auto; - right: calc(100% + $tooltip-margin); - top: 50%; - transform: translateX(0) translateY(-50%); + left: auto; + right: calc(100% + $tooltip-margin); + top: 50%; + transform: translateX(0) translateY(-50%); } /* CSS border triangles */ .Tooltip-Tip.left::before { - left: auto; - right: calc($tooltip-arrow-size * -2); - top: 50%; - transform: translateX(0) translateY(-50%); - border-left-color: $tooltip-background-color; -} \ No newline at end of file + left: auto; + right: calc($tooltip-arrow-size * -2); + top: 50%; + transform: translateX(0) translateY(-50%); + border-left-color: $tooltip-background-color; +} diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss index 23349a5ee..afb3a8927 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss @@ -1,60 +1,64 @@ .nfd-setup-secondary { + &-categories { - text-align: center; - margin-top: 1rem; - - .nfd-card-category-wrapper { - display: inline-flex; - margin-bottom: 2rem; - border-bottom: 2px solid #00568c; - - .category-scrolling-wrapper { - width: 15vw; - display: flex; - justify-content: center; - } - } - - button { - display: inline-block; - } - - .categName { - display: inline-block; - color: black; - font-size: 0.8rem; - font-weight: 400; - margin-top: 0; - text-transform: uppercase; - margin-bottom: 0.3rem; - } - - .iconSiteType { - background-repeat: no-repeat; - display: inline-block; - width: 1vw; - height: 2vh; - cursor: pointer; + text-align: center; + margin-top: 1rem; + + .nfd-card-category-wrapper { + display: inline-flex; + margin-bottom: 2rem; + border-bottom: 2px solid #00568c; + + .category-scrolling-wrapper { + width: 15vw; + display: flex; + justify-content: center; } - - .icon { - width: 25px; - height: 24px; - display: inline-block; - background-repeat: no-repeat; - @media (max-width:500px) { - display: none; - } + } + + button { + display: inline-block; + } + + .categName { + display: inline-block; + color: var(--nfd-onboarding-black); + font-size: 0.8rem; + font-weight: 400; + margin-top: 0; + text-transform: uppercase; + margin-bottom: 0.3rem; + } + + .iconSiteType { + background-repeat: no-repeat; + display: inline-block; + width: 1vw; + height: 2vh; + cursor: pointer; + } + + .icon { + width: 25px; + height: 24px; + display: inline-block; + background-repeat: no-repeat; + + @media (max-width: 500px) { + display: none; } - - .subCategoriesSection { - .nfd-card-category { - &.chosenSecondaryCategory { - background-color: var(--wp-admin-theme-color-darker-10); - color: var(--nfd-onboarding-light); - } + } + + .subCategoriesSection { + + .nfd-card-category { + + &.chosenSecondaryCategory { + background-color: var(--wp-admin-theme-color-darker-10); + color: var(--nfd-onboarding-light); } } + } } &-second { @@ -67,4 +71,4 @@ margin-top: 20px; } } -} \ No newline at end of file +} diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 61b324678..9aed6a40f 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -24,6 +24,7 @@ body { --nfd-onboarding-light-gray-3: #f2f2f2; --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; + --nfd-onboarding-light-gray-6: rgb(224, 224, 224); --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-dark: #1d2a3b; --nfd-onboarding-border: 219, 219, 219; @@ -58,6 +59,7 @@ body { --nfd-onboarding-light-gray-3: #f2f2f2; --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; + --nfd-onboarding-light-gray-6: rgb(224, 224, 224); --nfd-onboarding-dark: #1e2044; --nfd-onboarding-border: 245, 246, 248; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); @@ -89,6 +91,7 @@ body { --nfd-onboarding-light-gray-3: #f2f2f2; --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; + --nfd-onboarding-light-gray-6: rgb(224, 224, 224); --nfd-onboarding-dark: #000; --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary-alt); From 959c71f8b90d16cde07883a001eafdfb209ea779 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 19 Apr 2023 16:12:23 +0530 Subject: [PATCH 02/21] removed references to $white and $black also removed redundant vars --- .../CheckboxItem/stylesheet.scss | 33 ++++++++----------- .../CheckboxListSkeleton/stylesheet.scss | 4 +-- .../components/Drawer/stylesheet.scss | 23 +++++-------- .../HeadingWithSubHeading/stylesheet.scss | 7 ++-- .../LivePreview/BlockPreview/stylesheet.scss | 6 ++-- .../SelectableCard/stylesheet.scss | 11 ++----- .../SelectableCardWithInfo/stylesheet.scss | 5 --- .../components/MiniPreview/stylesheet.scss | 8 ++--- .../components/SelectableCard/stylesheet.scss | 24 +++++--------- .../LearnMore/Skeleton/stylesheet.scss | 1 - .../components/TextInput/stylesheet.scss | 1 - .../Steps/DesignHomepageMenu/stylesheet.scss | 9 ++--- .../DesignThemeStyles/Menu/stylesheet.scss | 11 ++----- src/OnboardingSPA/styles/_branding.scss | 1 + src/OnboardingSPA/styles/_interface.scss | 2 +- src/OnboardingSPA/styles/app.scss | 2 +- 16 files changed, 50 insertions(+), 98 deletions(-) diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss index 3ddd7a473..0258548cf 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss @@ -1,9 +1,4 @@ /*COLOR VARIABLES*/ -$white-offset: var(--nfd-onboarding-light-gray-6); -$main-color-dark: var(--wp-admin-theme-color); -$main-color-light: var(--nfd-onboarding-white); -$main-color: var(--nfd-onboarding-highlighted--rgb); -$main-border-main: var(--nfd-onboarding-primary-alt); $box-shadow: var(--nfd-onboarding-light-gray-highlighted); .checkbox-item { @@ -15,8 +10,8 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); margin: 12px; padding: 16px; margin-top: 16px; - background: $main-color-light; - border: 1px solid $white-offset; + background: var(--nfd-onboarding-white); + border: 1px solid var(--nfd-onboarding-light-gray-6); width: clamp(15rem, 25vw, 35rem); box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); @@ -50,7 +45,7 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); justify-content: center; &--selected { - background: $main-color-dark !important; + background: var(--wp-admin-theme-color) !important; } &--shown { @@ -72,7 +67,7 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); font-size: clamp(0.9rem, 2vw, 1rem); &--selected { - color: $main-color-dark; + color: var(--wp-admin-theme-color); } } @@ -96,18 +91,18 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); } &--selected { - background: rgba($main-color, 0.2); - border: 1px solid rgba($main-color, 0.6); - box-shadow: 0 2px 8px 2px rgba($white-offset, 0.8); + background: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2); + border: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.6); + box-shadow: 0 2px 8px 2px rgba(var(--nfd-onboarding-light-gray-6), 0.8); } &--shown { border-bottom: none; background: $box-shadow; border-radius: 2px 2px 0 0; - border-top: 1px solid rgba($main-color, 0.1); - border-left: 1px solid rgba($main-color, 0.1); - border-right: 1px solid rgba($main-color, 0.1); + border-top: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); + border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); + border-right: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); } &__dropdown { @@ -128,9 +123,9 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); transform-origin: top center; width: clamp(15rem, 25vw, 35rem); font-size: clamp(0.82rem, 2vw, 0.9rem); - border-left: 1px solid rgba($main-color, 0.1); - border-right: 1px solid rgba($main-color, 0.1); - border-bottom: 1px solid rgba($main-color, 0.1); - box-shadow: 0 11px 8px -3px rgba($main-color, 0.37); + border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); + border-right: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); + border-bottom: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); + box-shadow: 0 11px 8px -3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.37); } } diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss index 46837e114..8b4995e0b 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss @@ -1,6 +1,4 @@ /*COLOR VARIABLES*/ -$white-offset: rgb(224, 224, 224); -$main-color-light: var(--nfd-onboarding-white); $grey-color: #f6f7f8; .checkbox-skeleton-item { @@ -8,7 +6,7 @@ $grey-color: #f6f7f8; margin: 12px; padding: 16px; margin-top: 16px; - border: 0.5px solid $white-offset; + border: 0.5px solid var(--nfd-onboarding-light-gray-6); cursor: not-allowed; width: clamp(15rem, 25vw, 35rem); box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index ce1c32280..f71df0557 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -229,13 +229,6 @@ } } -/*COLOR VARIABLES*/ -$main-color-dark: var(--nfd-onboarding-dark); -$main-color-light: var(--nfd-onboarding-white); -$main-border-light: var(--nfd-onboarding-border); -$main-border-main: var(--nfd-onboarding-primary-alt); -$main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); - .theme-styles-preview--drawer__list__item__live-preview-container .live-preview__container-custom { width: 100%; overflow: hidden; @@ -318,10 +311,10 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); align-items: center; justify-content: center; background-clip: padding-box; - background-color: $main-border-main; + background-color: var(--nfd-onboarding-primary-alt); &__path { - fill: $main-color-light; + fill: var(--nfd-onboarding-white); transform: scale(0.7); } } @@ -422,7 +415,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); } &__text { - color: $main-color-dark; + color: var(--nfd-onboarding-dark); font-size: 12px; font-weight: 700; line-height: 16px; @@ -442,7 +435,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 88%; margin: 30px 2px; padding: 20px 16px; - background: $main-border-main; + background: var(--nfd-onboarding-primary-alt); &__top { display: flex; @@ -488,7 +481,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); border: 1px solid rgba(0, 0, 0, 0.3); &_selected_border { - box-shadow: 0 0 5px 3px rgba($main-border-main--rgb, 0.5); + box-shadow: 0 0 5px 3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.5); } } } @@ -545,7 +538,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); width: 88%; margin: 30px 2px; padding: 20px 16px; - background: $main-border-main; + background: var(--nfd-onboarding-primary-alt); &--hidden { display: none; @@ -621,10 +614,10 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); align-items: center; justify-content: center; background-clip: padding-box; - background-color: $main-border-main; + background-color: var(--nfd-onboarding-primary-alt); &__path { - fill: $main-color-light; + fill: var(--nfd-onboarding-white); transform: scale(0.7); } } diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss b/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss index daf7f201f..a25504f69 100644 --- a/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss @@ -1,6 +1,3 @@ -/*COLOR VARIABLES*/ -$black: var(--nfd-onboarding-black); -$primary-color: var(--nfd-onboarding-primary); .nfd-main-heading { width: 96%; @@ -10,13 +7,13 @@ $primary-color: var(--nfd-onboarding-primary); &__title { font-weight: 700; text-align: center; - color: $primary-color; + color: var(--nfd-onboarding-primary); margin: 35px !important; font-size: clamp(1.6rem, 4vw, 3.6rem); } &__subtitle { - color: $black; + color: var(--nfd-onboarding-black); font-weight: 400; text-align: center; font-size: clamp(0.85rem, 3.2vw, 1.7rem); diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss index 2a4d255d8..2e24b67c7 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss @@ -1,6 +1,4 @@ -$main-color-grey: var(--nfd-onboarding-light-gray); $main-color-grey-other: #e2e2e2; -$main-color-light-rgb: var(--nfd-onboarding-white-rgb); .live-preview { @@ -38,7 +36,7 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb); cursor: not-allowed; align-items: center; flex-direction: column; - background-color: $main-color-grey; + background-color: var(--nfd-onboarding-light-gray); &--box { width: 90%; @@ -68,7 +66,7 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb); height: 100%; position: absolute; background-image: - linear-gradient(90deg, rgba($main-color-light-rgb, 0) 0, rgba($main-color-light-rgb, 0.4) 20%, rgba($main-color-light-rgb, 0.6) 60%, rgba($main-color-light-rgb, 0.4) 90%, rgba($main-color-light-rgb, 0.02) 100%, $main-color-grey); + linear-gradient(90deg, rgba(var(--nfd-onboarding-white-rgb), 0) 0, rgba(var(--nfd-onboarding-white-rgb), 0.4) 20%, rgba(var(--nfd-onboarding-white-rgb), 0.6) 60%, rgba(var(--nfd-onboarding-white-rgb), 0.4) 90%, rgba(var(--nfd-onboarding-white-rgb), 0.02) 100%, var(--nfd-onboarding-light-gray)); } } } diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss index 7249ef8db..2ee21e2b1 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss @@ -1,8 +1,3 @@ -/*COLOR VARIABLES*/ -$main-color-dark: var(--nfd-onboarding-dark); -$main-color-light: var(--nfd-onboarding-white); -$main-border-light: var(--nfd-onboarding-border); -$main-border-main: var(--nfd-onboarding-primary-alt); .live-preview--selectable-card { flex: 1; @@ -48,10 +43,10 @@ $main-border-main: var(--nfd-onboarding-primary-alt); align-items: center; justify-content: center; background-clip: padding-box; - background-color: $main-border-main; + background-color: var(--nfd-onboarding-primary-alt); &__path { - fill: $main-color-light; + fill: var(--nfd-onboarding-white); transform: scale(0.7); } } @@ -95,7 +90,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); rgb(var(--wp-admin-theme-color-darker-10--rgb)) &__icon{ - fill: $main-color-light; + fill: var(--nfd-onboarding-white); font-size: 20px; position: absolute; top: 50%; diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss index 1dfcf0724..eecf0cd28 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss @@ -1,8 +1,3 @@ -/*COLOR VARIABLES*/ -$main-color-dark: var(--nfd-onboarding-dark); -$main-color-light: var(--nfd-onboarding-white); -$main-border-light: var(--nfd-onboarding-border); -$main-border-main: var(--nfd-onboarding-primary-alt); .live-preview--selectable-card { flex: 1; diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss index 7d324a1ba..69f4fe975 100644 --- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss @@ -1,5 +1,3 @@ -$white: var(--nfd-onboarding-white); -$black: var(--nfd-onboarding-black); $browser-dark: #cacaca; $browser-light: var(--nfd-onboarding-light-gray-3); $link-browser-color: #007017; @@ -52,7 +50,7 @@ $title-browser-color: #3858e9; .browser-content { padding: 10px; word-break: break-all; - background-color: $white; + background-color: var(--nfd-onboarding-white); &_top-row { @@ -75,7 +73,7 @@ $title-browser-color: #3858e9; } &_desc { - color: $black; + color: var(--nfd-onboarding-black); text-align: left; max-width: 450px; font-weight: 400; @@ -219,7 +217,7 @@ $title-browser-color: #3858e9; width: 100%; font-size: 0.8rem; border: none !important; - background-color: $white; + background-color: var(--nfd-onboarding-white); } } diff --git a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss index 90ee0bf54..adc82a9bb 100644 --- a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss @@ -1,9 +1,3 @@ -/*COLOR VARIABLES*/ -$main-color-dark: var(--nfd-onboarding-dark); -$main-color-light: var(--nfd-onboarding-white); -$main-border-light: var(--nfd-onboarding-border); -$main-border-main: var(--nfd-onboarding-primary-alt); -$main-color: var(--nfd-onboarding-highlighted--rgb); /*BORDER RADIUS*/ $radius: 0.2rem; @@ -38,12 +32,12 @@ $radius: 0.2rem; padding-top: 20px; border-radius: $radius; background-color: transparent; - border: 1px solid rgba($main-border-light, 0.6); + border: 1px solid rgba(var(--nfd-onboarding-border), 0.6); &_title { font-weight: 700; margin-top: 30px; - color: $main-color-dark; + color: var(--nfd-onboarding-dark); padding: 14px 0px 10px 0px; transition: color 300ms ease-in; font-size: clamp(1rem, 2.5vw, 1.5rem); @@ -53,7 +47,7 @@ $radius: 0.2rem; font-weight: 400; text-align: center; letter-spacing: 0.5px; - color: $main-color-dark; + color: var(--nfd-onboarding-dark); font-size: clamp(0.8rem, 2vw, 0.87rem); } } @@ -73,11 +67,11 @@ $radius: 0.2rem; background-position: center; background-repeat: no-repeat; background-clip: padding-box; - background-color: $main-color-dark; - border: 4px solid rgba($main-color, 0.10544); + background-color: var(--nfd-onboarding-dark); + border: 4px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.10544); &-selected{ - background-color: $main-border-main !important; + background-color: var(--nfd-onboarding-primary-alt) !important; } } } @@ -91,10 +85,10 @@ $radius: 0.2rem; margin-top: 20px; justify-content: center; background-clip: padding-box; - background-color: $main-border-main; + background-color: var(--nfd-onboarding-primary-alt); &_path { - fill: $main-color-light; + fill: var(--nfd-onboarding-white); transform: scale(0.7); } } @@ -108,7 +102,7 @@ $radius: 0.2rem; .nfd-selected-card{ transition: all .2s ease-in-out; - background-color: rgba($main-color, 0.18) !important; + background-color: rgba(var(--nfd-onboarding-highlighted--rgb), 0.18) !important; } .nfd-selected-card-box{ diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss index 0b2022807..78d97a7a3 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss @@ -1,7 +1,6 @@ $grey-color: #f6f7f8; $main-color: var(--wp-admin-theme-color--rgb); $main-color-grey: var(--nfd-onboarding-light-gray); -$main-color-light-rgb: var(--nfd-onboarding-white-rgb); .sidebar-skeleton { width: 100%; diff --git a/src/OnboardingSPA/components/TextInput/stylesheet.scss b/src/OnboardingSPA/components/TextInput/stylesheet.scss index a6d82d87c..6cc7cafd1 100644 --- a/src/OnboardingSPA/components/TextInput/stylesheet.scss +++ b/src/OnboardingSPA/components/TextInput/stylesheet.scss @@ -1,4 +1,3 @@ -$white: var(--nfd-onboarding-white); $error: rgba(255, 0, 0, 0.26); $border: #D6D6D6; $letter-spacing: 0.5px; diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss index 8cfac5805..9a5b60ec5 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss @@ -1,8 +1,3 @@ -/*COLOR VARIABLES*/ -$main-color-dark: var(--nfd-onboarding-dark); -$main-color-light: var(--nfd-onboarding-white); -$main-border-light: var(--nfd-onboarding-border); -$main-border-main: var(--nfd-onboarding-primary-alt); .homepage_preview { display: flex; @@ -67,10 +62,10 @@ $main-border-main: var(--nfd-onboarding-primary-alt); align-items: center; justify-content: center; background-clip: padding-box; - background-color: $main-border-main; + background-color: var(--nfd-onboarding-primary-alt); &__path { - fill: $main-color-light; + fill: var(--nfd-onboarding-white); transform: scale(0.7); } } diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss index 2244eb809..07c444a73 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss @@ -1,8 +1,3 @@ -/*COLOR VARIABLES*/ -$main-color-dark: var(--nfd-onboarding-dark); -$main-color-light: var(--nfd-onboarding-white); -$main-border-light: var(--nfd-onboarding-border); -$main-border-main: var(--nfd-onboarding-primary-alt); .theme-styles-menu { display: flex; @@ -67,10 +62,10 @@ $main-border-main: var(--nfd-onboarding-primary-alt); align-items: center; justify-content: center; background-clip: padding-box; - background-color: $main-border-main; + background-color: var(--nfd-onboarding-primary-alt); &__path { - fill: $main-color-light; + fill: var(--nfd-onboarding-white); transform: scale(0.7); } } @@ -114,7 +109,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); background-color: rgb(var(--wp-admin-theme-color-darker-10--rgb)); &__icon { - fill: $main-color-light; + fill: var(--nfd-onboarding-white); font-size: 20px; position: absolute; top: 50%; diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 9b96b4621..acb470ee7 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -142,6 +142,7 @@ body { --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-6: rgb(224, 224, 224); --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-dark: #1d2a3b; --nfd-onboarding-border: 219, 219, 219; diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index 078af0be1..4ef4eb1d7 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -2,7 +2,7 @@ $header-height: 60px; $nav-sidebar-width: 300px; html.wp-toolbar { - background: $white; + background: var(--nfd-onboarding-white); } body { diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 8dad365f7..a152ce9f5 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -55,7 +55,7 @@ .nfd-onboarding-container { display: flex; - background-color: $white; + background-color: var(--nfd-onboarding-white); @include break-small { bottom: 0; From 317a97e3c9e9017f3fe944aacb21c30be4a071ec Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 19 Apr 2023 16:31:03 +0530 Subject: [PATCH 03/21] lint changes --- .../CheckboxListSkeleton/stylesheet.scss | 3 +- .../LivePreview/BlockPreview/stylesheet.scss | 3 +- .../components/SelectableCard/stylesheet.scss | 186 ++++++------ .../LearnMore/Skeleton/stylesheet.scss | 286 +++++++++--------- .../components/TextInput/stylesheet.scss | 102 +++---- 5 files changed, 284 insertions(+), 296 deletions(-) diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss index 8b4995e0b..a483ce9b0 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss @@ -12,6 +12,5 @@ $grey-color: #f6f7f8; box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); background: $grey-color; background-repeat: no-repeat; - background-image: - linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%); } diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss index 2e24b67c7..1ee2b924e 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss @@ -65,8 +65,7 @@ $main-color-grey-other: #e2e2e2; width: 100%; height: 100%; position: absolute; - background-image: - linear-gradient(90deg, rgba(var(--nfd-onboarding-white-rgb), 0) 0, rgba(var(--nfd-onboarding-white-rgb), 0.4) 20%, rgba(var(--nfd-onboarding-white-rgb), 0.6) 60%, rgba(var(--nfd-onboarding-white-rgb), 0.4) 90%, rgba(var(--nfd-onboarding-white-rgb), 0.02) 100%, var(--nfd-onboarding-light-gray)); + background-image: linear-gradient(90deg, rgba(var(--nfd-onboarding-white-rgb), 0) 0, rgba(var(--nfd-onboarding-white-rgb), 0.4) 20%, rgba(var(--nfd-onboarding-white-rgb), 0.6) 60%, rgba(var(--nfd-onboarding-white-rgb), 0.4) 90%, rgba(var(--nfd-onboarding-white-rgb), 0.02) 100%, var(--nfd-onboarding-light-gray)); } } } diff --git a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss index adc82a9bb..d1a32d541 100644 --- a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss @@ -1,111 +1,109 @@ - /*BORDER RADIUS*/ $radius: 0.2rem; .nfd-card { - display: flex; - cursor: pointer; - width: 290px; - padding-left: 10px; - margin-right: 10px; - align-items: center; - flex-direction: column; - justify-content: center; - box-shadow: none !important; - background-color: transparent !important; + display: flex; + cursor: pointer; + width: 290px; + padding-left: 10px; + margin-right: 10px; + align-items: center; + flex-direction: column; + justify-content: center; + box-shadow: none !important; + background-color: transparent !important; - &__top_row { - width: 100%; - display: flex; - position: absolute; - align-items: center; - justify-content: center; - } + &__top_row { + width: 100%; + display: flex; + position: absolute; + align-items: center; + justify-content: center; + } - &__body { - height: 200px; - padding: 8px; - text-align: center; - margin-top: 50px; - border-radius: 6px; - margin-right: 15px; - padding-top: 20px; - border-radius: $radius; - background-color: transparent; - border: 1px solid rgba(var(--nfd-onboarding-border), 0.6); + &__body { + height: 200px; + padding: 8px; + text-align: center; + margin-top: 50px; + margin-right: 15px; + padding-top: 20px; + border-radius: $radius; + background-color: transparent; + border: 1px solid rgba(var(--nfd-onboarding-border), 0.6); - &_title { - font-weight: 700; - margin-top: 30px; - color: var(--nfd-onboarding-dark); - padding: 14px 0px 10px 0px; - transition: color 300ms ease-in; - font-size: clamp(1rem, 2.5vw, 1.5rem); - } - - &_description { - font-weight: 400; - text-align: center; - letter-spacing: 0.5px; - color: var(--nfd-onboarding-dark); - font-size: clamp(0.8rem, 2vw, 0.87rem); - } - } - &__icon{ - flex: 1; - display: flex; - margin-top: 10px; - margin-right: -25px; - align-items: center; - justify-content: center; + &_title { + font-weight: 700; + margin-top: 30px; + color: var(--nfd-onboarding-dark); + padding: 14px 0 10px 0; + transition: color 300ms ease-in; + font-size: clamp(1rem, 2.5vw, 1.5rem); + } - &_box { - width: 64px; - height: 64px; - border-radius: 50%; - text-align: center; - background-position: center; - background-repeat: no-repeat; - background-clip: padding-box; - background-color: var(--nfd-onboarding-dark); - border: 4px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.10544); + &_description { + font-weight: 400; + text-align: center; + letter-spacing: 0.5px; + color: var(--nfd-onboarding-dark); + font-size: clamp(0.8rem, 2vw, 0.87rem); + } + } - &-selected{ - background-color: var(--nfd-onboarding-primary-alt) !important; - } - } - } + &__icon { + flex: 1; + display: flex; + margin-top: 10px; + margin-right: -25px; + align-items: center; + justify-content: center; - &__icon_selected{ - width: 40px; - height: 40px; - display: flex; - border-radius: 50%; - align-items: center; - margin-top: 20px; - justify-content: center; - background-clip: padding-box; - background-color: var(--nfd-onboarding-primary-alt); + &_box { + width: 64px; + height: 64px; + border-radius: 50%; + text-align: center; + background-position: center; + background-repeat: no-repeat; + background-clip: padding-box; + background-color: var(--nfd-onboarding-dark); + border: 4px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.10544); - &_path { - fill: var(--nfd-onboarding-white); - transform: scale(0.7); - } - } + &-selected { + background-color: var(--nfd-onboarding-primary-alt) !important; + } + } + } - &__icon_unselected { - width: 40px; - height: 40px; - opacity: 0; - } -} + &__icon_selected { + width: 40px; + height: 40px; + display: flex; + border-radius: 50%; + align-items: center; + margin-top: 20px; + justify-content: center; + background-clip: padding-box; + background-color: var(--nfd-onboarding-primary-alt); -.nfd-selected-card{ - transition: all .2s ease-in-out; - background-color: rgba(var(--nfd-onboarding-highlighted--rgb), 0.18) !important; + &_path { + fill: var(--nfd-onboarding-white); + transform: scale(0.7); + } + } + + &__icon_unselected { + width: 40px; + height: 40px; + opacity: 0; + } } -.nfd-selected-card-box{ - transform: scale(1.05); +.nfd-selected-card { + transition: all 0.2s ease-in-out; + background-color: rgba( ar(--nfd-onboarding-highlighted--rgb), 0.18) !important; } +.nfd-selected-card-box { + transform: scale(1.05); +} diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss index 78d97a7a3..d90996fa2 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss @@ -3,156 +3,148 @@ $main-color: var(--wp-admin-theme-color--rgb); $main-color-grey: var(--nfd-onboarding-light-gray); .sidebar-skeleton { - width: 100%; - - &-divider { - width: 100%; - margin: 20px 0px; - border-top: 1px solid #bbb; - } - - &-header { - width: 95%; - padding: 16px; - - &-top { - width: 80%; - margin: 8px; - display: flex; - align-items: center; - - &-profile { - width: 25px; - height: 25px; - margin-right: 15px; - } - - &-header { - width: 40%; - height: 15px; - } - } - - &-below { - width: 100%; - margin: 8px; - margin-left: 45px; - - &-subheading-1 { - width: 70%; - margin: 4px; - height: 15px; - } - - &-subheading-2 { - margin: 4px; - width: 50%; - height: 15px; - } - } - } - - &-body { - width: 90%; - height: 250px; - display: flex; - padding: 16px; - margin-top: 20px; - margin-bottom: 20px; - align-items: center; - justify-content: center; - - &-image{ - width: 95%; - height: 100% - } - } - - &-footer { - width: 85%; - margin: 8px; - padding: 16px; - - &-line-1 { - width: 45%; - height: 15px; - margin-bottom: 15px - } - - &-line-2 { - width: 70%; - height: 15px; - margin-bottom: 5px - } - - &-line-3 { - width: 90%; - height: 15px; - margin-bottom: 5px - } - - &-line-4 { - width: 80%; - height: 15px; - margin-bottom: 5px - } - - &-line-5 { - width: 30%; - height: 15px; - margin-bottom: 5px - } - - &-buttons { - width: 100%; - display: flex; - margin-top: 50px; - align-items: center; - flex-direction: column; - justify-content: center; - - &-button-1 { - width: 100%; - margin: 8px; - height: 40px; - display: flex; - align-items: center; - margin-bottom: 20px; - justify-content: center; - border: 1px solid rgba($main-color, 0.4) !important; - } - - &-button-2 { - width: 70%; - height: 15px; - background-color: rgba($main-color, 0.4) !important; - } - - &-button-3 { - width: 30%; - height: 15px; - background-color: rgba($main-color, 0.4) !important; - } - } - } + width: 100%; + + &-divider { + width: 100%; + margin: 20px 0; + border-top: 1px solid #bbb; + } + + &-header { + width: 95%; + padding: 16px; + + &-top { + width: 80%; + margin: 8px; + display: flex; + align-items: center; + + &-profile { + width: 25px; + height: 25px; + margin-right: 15px; + } + + &-header { + width: 40%; + height: 15px; + } + } + + &-below { + width: 100%; + margin: 8px; + margin-left: 45px; + + &-subheading-1 { + width: 70%; + margin: 4px; + height: 15px; + } + + &-subheading-2 { + margin: 4px; + width: 50%; + height: 15px; + } + } + } + + &-body { + width: 90%; + height: 250px; + display: flex; + padding: 16px; + margin-top: 20px; + margin-bottom: 20px; + align-items: center; + justify-content: center; + + &-image { + width: 95%; + height: 100%; + } + } + + &-footer { + width: 85%; + margin: 8px; + padding: 16px; + + &-line-1 { + width: 45%; + height: 15px; + margin-bottom: 15px; + } + + &-line-2 { + width: 70%; + height: 15px; + margin-bottom: 5px; + } + + &-line-3 { + width: 90%; + height: 15px; + margin-bottom: 5px; + } + + &-line-4 { + width: 80%; + height: 15px; + margin-bottom: 5px; + } + + &-line-5 { + width: 30%; + height: 15px; + margin-bottom: 5px; + } + + &-buttons { + width: 100%; + display: flex; + margin-top: 50px; + align-items: center; + flex-direction: column; + justify-content: center; + + &-button-1 { + width: 100%; + margin: 8px; + height: 40px; + display: flex; + align-items: center; + margin-bottom: 20px; + justify-content: center; + border: 1px solid rgba($main-color, 0.4) !important; + } + + &-button-2 { + width: 70%; + height: 15px; + background-color: rgba($main-color, 0.4) !important; + } + + &-button-3 { + width: 30%; + height: 15px; + background-color: rgba($main-color, 0.4) !important; + } + } + } } .shimmer { - background: $grey-color; - background-repeat: no-repeat; - background-image: linear-gradient(to right, - $grey-color 0%, - $main-color-grey 20%, - $grey-color 40%, - $grey-color 100%); + background: $grey-color; + background-repeat: no-repeat; + background-image: linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%); } .shimmer-1 { - background: rgba($main-color, 0.4); - background-repeat: no-repeat; - background-image: linear-gradient(to right, - rgba($main-color, 0.4) 0%, - rgba($main-color, 0.6) 20%, - rgba($main-color, 0.4) 40%, - rgba($main-color, 0.4) 100%); -} \ No newline at end of file + background: rgba($main-color, 0.4); + background-repeat: no-repeat; + background-image: linear-gradient(to right, rgba($main-color, 0.4) 0%, rgba($main-color, 0.6) 20%, rgba($main-color, 0.4) 40%, rgba($main-color, 0.4) 100%); +} diff --git a/src/OnboardingSPA/components/TextInput/stylesheet.scss b/src/OnboardingSPA/components/TextInput/stylesheet.scss index 6cc7cafd1..18a61e49e 100644 --- a/src/OnboardingSPA/components/TextInput/stylesheet.scss +++ b/src/OnboardingSPA/components/TextInput/stylesheet.scss @@ -1,55 +1,55 @@ $error: rgba(255, 0, 0, 0.26); -$border: #D6D6D6; +$border: #d6d6d6; $letter-spacing: 0.5px; .nfd-input { - margin-bottom: 25px; - width: 100% !important; - - &__field { - padding: 14px; - margin: 6px 0px; - font-size: 0.9rem; - letter-spacing: $letter-spacing; - - width: 100%; - resize: none; - overflow: hidden; - border-radius: 6px; - max-height: 150px; - border: 1px solid $border; - - &_error{ - background-color: $error !important; - } - } - - &__label{ - display: flex; - padding: 4px 2px; - align-items: center; - justify-content: space-between; - - &_title{ - margin: 0px; - font-size: 1rem; - font-weight: 500; - letter-spacing: $letter-spacing; - } - - &_maxChar { - margin: 0px; - font-size: 0.81rem; - letter-spacing: $letter-spacing; - } - } - - &__hint{ - margin: 0px; - font-weight: 300; - font-size: 0.87rem; - padding: 0px 1.5px; - font-style: italic; - letter-spacing: $letter-spacing; - } -} \ No newline at end of file + margin-bottom: 25px; + width: 100% !important; + + &__field { + padding: 14px; + margin: 6px 0; + font-size: 0.9rem; + letter-spacing: $letter-spacing; + + width: 100%; + resize: none; + overflow: hidden; + border-radius: 6px; + max-height: 150px; + border: 1px solid $border; + + &_error { + background-color: $error !important; + } + } + + &__label { + display: flex; + padding: 4px 2px; + align-items: center; + justify-content: space-between; + + &_title { + margin: 0; + font-size: 1rem; + font-weight: 500; + letter-spacing: $letter-spacing; + } + + &_maxChar { + margin: 0; + font-size: 0.81rem; + letter-spacing: $letter-spacing; + } + } + + &__hint { + margin: 0; + font-weight: 300; + font-size: 0.87rem; + padding: 0 1.5px; + font-style: italic; + letter-spacing: $letter-spacing; + } +} From d48dbbf6ecad656b173389516712d4bc4d834daa Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 19 Apr 2023 16:37:47 +0530 Subject: [PATCH 04/21] some more liint --- .../CheckboxTemplate/CheckboxItem/stylesheet.scss | 6 ++---- .../CheckboxListSkeleton/stylesheet.scss | 2 +- .../components/LearnMore/Skeleton/stylesheet.scss | 14 ++++++-------- 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss index 0258548cf..b13919c54 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss @@ -1,5 +1,3 @@ -/*COLOR VARIABLES*/ -$box-shadow: var(--nfd-onboarding-light-gray-highlighted); .checkbox-item { @@ -98,7 +96,7 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); &--shown { border-bottom: none; - background: $box-shadow; + background: var(--nfd-onboarding-light-gray-highlighted); border-radius: 2px 2px 0 0; border-top: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); @@ -118,7 +116,7 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted); margin-top: -12px; position: absolute; font-style: italic; - background: $box-shadow; + background: var(--nfd-onboarding-light-gray-highlighted); border-radius: 0 0 2px 2px; transform-origin: top center; width: clamp(15rem, 25vw, 35rem); diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss index a483ce9b0..60c1e24ed 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss @@ -12,5 +12,5 @@ $grey-color: #f6f7f8; box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); background: $grey-color; background-repeat: no-repeat; - background-image: linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-light-gray) 20%, $grey-color 40%, $grey-color 100%); } diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss index d90996fa2..178dc6758 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss @@ -1,6 +1,4 @@ $grey-color: #f6f7f8; -$main-color: var(--wp-admin-theme-color--rgb); -$main-color-grey: var(--nfd-onboarding-light-gray); .sidebar-skeleton { width: 100%; @@ -119,19 +117,19 @@ $main-color-grey: var(--nfd-onboarding-light-gray); align-items: center; margin-bottom: 20px; justify-content: center; - border: 1px solid rgba($main-color, 0.4) !important; + border: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.4) !important; } &-button-2 { width: 70%; height: 15px; - background-color: rgba($main-color, 0.4) !important; + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.4) !important; } &-button-3 { width: 30%; height: 15px; - background-color: rgba($main-color, 0.4) !important; + background-color: rgba(var(--wp-admin-theme-color--rgb), 0.4) !important; } } } @@ -140,11 +138,11 @@ $main-color-grey: var(--nfd-onboarding-light-gray); .shimmer { background: $grey-color; background-repeat: no-repeat; - background-image: linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-light-gray) 20%, $grey-color 40%, $grey-color 100%); } .shimmer-1 { - background: rgba($main-color, 0.4); + background: rgba(var(--wp-admin-theme-color--rgb), 0.4); background-repeat: no-repeat; - background-image: linear-gradient(to right, rgba($main-color, 0.4) 0%, rgba($main-color, 0.6) 20%, rgba($main-color, 0.4) 40%, rgba($main-color, 0.4) 100%); + background-image: linear-gradient(to right, rgba(var(--wp-admin-theme-color--rgb), 0.4) 0%, rgba(var(--wp-admin-theme-color--rgb), 0.6) 20%, rgba(var(--wp-admin-theme-color--rgb), 0.4) 40%, rgba(var(--wp-admin-theme-color--rgb), 0.4) 100%); } From be7fd231b3a0ad0d07e8565ff0d92d3289a225f2 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 19 Apr 2023 16:45:40 +0530 Subject: [PATCH 05/21] renamed vars from light to base --- .../components/Accordion/stylesheet.scss | 2 +- .../CheckboxItem/stylesheet.scss | 12 +-- .../CheckboxListSkeleton/stylesheet.scss | 4 +- .../components/Drawer/stylesheet.scss | 4 +- .../LivePreview/BlockPreview/stylesheet.scss | 4 +- .../components/MiniPreview/stylesheet.scss | 4 +- .../NewfoldLargeCard/stylesheet.scss | 2 +- .../LearnMore/Skeleton/stylesheet.scss | 2 +- .../components/StepOverview/stylesheet.scss | 2 +- .../pages/Steps/DesignColors/stylesheet.scss | 2 +- .../Steps/DesignHeaderMenu/stylesheet.scss | 2 +- .../DesignThemeStyles/Preview/stylesheet.scss | 2 +- .../Steps/DesignTypography/stylesheet.scss | 2 +- .../GetStartedExperience/stylesheet.scss | 4 +- .../SiteTypeSetup/PrimarySite/stylesheet.scss | 4 +- .../SecondarySite/stylesheet.scss | 2 +- .../Steps/GetStarted/Welcome/stylesheet.scss | 2 +- .../pages/Steps/SitePages/stylesheet.scss | 4 +- .../pages/Steps/WhatNext/stylesheet.scss | 2 +- src/OnboardingSPA/styles/_branding.scss | 80 +++++++++---------- src/OnboardingSPA/styles/_interface.scss | 14 ++-- src/OnboardingSPA/styles/_utilities.scss | 4 +- 22 files changed, 80 insertions(+), 80 deletions(-) diff --git a/src/OnboardingSPA/components/Accordion/stylesheet.scss b/src/OnboardingSPA/components/Accordion/stylesheet.scss index 26dab1ae9..6e6cc772f 100644 --- a/src/OnboardingSPA/components/Accordion/stylesheet.scss +++ b/src/OnboardingSPA/components/Accordion/stylesheet.scss @@ -14,7 +14,7 @@ } &__summary { - background-color: var(--nfd-onboarding-light); + background-color: var(--nfd-onboarding-base); color: var(--nfd-onboarding-dark); cursor: pointer; font-weight: 700; diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss index b13919c54..7d283bb26 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss @@ -9,7 +9,7 @@ padding: 16px; margin-top: 16px; background: var(--nfd-onboarding-white); - border: 1px solid var(--nfd-onboarding-light-gray-6); + border: 1px solid var(--nfd-onboarding-base-gray-6); width: clamp(15rem, 25vw, 35rem); box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); @@ -39,7 +39,7 @@ margin-right: 16px; border-radius: 50%; align-items: center; - background: var(--nfd-onboarding-light-gray); + background: var(--nfd-onboarding-base-gray); justify-content: center; &--selected { @@ -47,7 +47,7 @@ } &--shown { - background: var(--nfd-onboarding-light-gray); + background: var(--nfd-onboarding-base-gray); } } @@ -91,12 +91,12 @@ &--selected { background: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2); border: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.6); - box-shadow: 0 2px 8px 2px rgba(var(--nfd-onboarding-light-gray-6), 0.8); + box-shadow: 0 2px 8px 2px rgba(var(--nfd-onboarding-base-gray-6), 0.8); } &--shown { border-bottom: none; - background: var(--nfd-onboarding-light-gray-highlighted); + background: var(--nfd-onboarding-base-gray-highlighted); border-radius: 2px 2px 0 0; border-top: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); @@ -116,7 +116,7 @@ margin-top: -12px; position: absolute; font-style: italic; - background: var(--nfd-onboarding-light-gray-highlighted); + background: var(--nfd-onboarding-base-gray-highlighted); border-radius: 0 0 2px 2px; transform-origin: top center; width: clamp(15rem, 25vw, 35rem); diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss index 60c1e24ed..34252301c 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss @@ -6,11 +6,11 @@ $grey-color: #f6f7f8; margin: 12px; padding: 16px; margin-top: 16px; - border: 0.5px solid var(--nfd-onboarding-light-gray-6); + border: 0.5px solid var(--nfd-onboarding-base-gray-6); cursor: not-allowed; width: clamp(15rem, 25vw, 35rem); box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); background: $grey-color; background-repeat: no-repeat; - background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-light-gray) 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-base-gray) 20%, $grey-color 40%, $grey-color 100%); } diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index f71df0557..2bba89567 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -138,7 +138,7 @@ display: flex; padding: $grid-unit-10 $grid-unit-20; text-decoration: none; - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); align-items: center; border-radius: 2px; transition: background-color 100ms linear; @@ -165,7 +165,7 @@ &.active { background-color: var(--nfd-onboarding-primary); - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); svg { fill: var(--nfd-onboarding-drawer-icon-active-fill); diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss index 1ee2b924e..e653e1e47 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss @@ -36,7 +36,7 @@ $main-color-grey-other: #e2e2e2; cursor: not-allowed; align-items: center; flex-direction: column; - background-color: var(--nfd-onboarding-light-gray); + background-color: var(--nfd-onboarding-base-gray); &--box { width: 90%; @@ -65,7 +65,7 @@ $main-color-grey-other: #e2e2e2; width: 100%; height: 100%; position: absolute; - background-image: linear-gradient(90deg, rgba(var(--nfd-onboarding-white-rgb), 0) 0, rgba(var(--nfd-onboarding-white-rgb), 0.4) 20%, rgba(var(--nfd-onboarding-white-rgb), 0.6) 60%, rgba(var(--nfd-onboarding-white-rgb), 0.4) 90%, rgba(var(--nfd-onboarding-white-rgb), 0.02) 100%, var(--nfd-onboarding-light-gray)); + background-image: linear-gradient(90deg, rgba(var(--nfd-onboarding-white-rgb), 0) 0, rgba(var(--nfd-onboarding-white-rgb), 0.4) 20%, rgba(var(--nfd-onboarding-white-rgb), 0.6) 60%, rgba(var(--nfd-onboarding-white-rgb), 0.4) 90%, rgba(var(--nfd-onboarding-white-rgb), 0.02) 100%, var(--nfd-onboarding-base-gray)); } } } diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss index 69f4fe975..18c14d6d6 100644 --- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss @@ -1,5 +1,5 @@ $browser-dark: #cacaca; -$browser-light: var(--nfd-onboarding-light-gray-3); +$browser-light: var(--nfd-onboarding-base-gray-3); $link-browser-color: #007017; $title-browser-color: #3858e9; @@ -188,7 +188,7 @@ $title-browser-color: #3858e9; line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; - background: -webkit-linear-gradient(left, var(--nfd-onboarding-black) 50%, var(--nfd-onboarding-light)); + background: -webkit-linear-gradient(left, var(--nfd-onboarding-black) 50%, var(--nfd-onboarding-base)); background-clip: text; -webkit-text-fill-color: transparent; } diff --git a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss index 8c77d18e9..cdc36cb2e 100644 --- a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss +++ b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss @@ -3,7 +3,7 @@ max-width: 960px; width: 60vw; min-height: 60vh; - background: var(--nfd-onboarding-light); + background: var(--nfd-onboarding-base); position: relative; transform-style: preserve-3d; align-items: center; diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss index 178dc6758..9d85f437c 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss @@ -138,7 +138,7 @@ $grey-color: #f6f7f8; .shimmer { background: $grey-color; background-repeat: no-repeat; - background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-light-gray) 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-base-gray) 20%, $grey-color 40%, $grey-color 100%); } .shimmer-1 { diff --git a/src/OnboardingSPA/components/StepOverview/stylesheet.scss b/src/OnboardingSPA/components/StepOverview/stylesheet.scss index 5161625c1..3e3cdd866 100644 --- a/src/OnboardingSPA/components/StepOverview/stylesheet.scss +++ b/src/OnboardingSPA/components/StepOverview/stylesheet.scss @@ -1,7 +1,7 @@ .nfd-onboarding-overview { width: 100%; max-width: 960px; - background-color: var(--nfd-onboarding-light); + background-color: var(--nfd-onboarding-base); padding: 20px; &__header { display: flex; diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss index fbf135cca..906c6091c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: var(--nfd-onboarding-light-gray-5); + background-color: var(--nfd-onboarding-base-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss index 4b15fe650..f512f4948 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: var(--nfd-onboarding-light-gray-5); + background-color: var(--nfd-onboarding-base-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss index d9d13f198..dc2a4c07e 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: var(--nfd-onboarding-light-gray-5); + background-color: var(--nfd-onboarding-base-gray-5); &__checkbox { margin: 20px 0; diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss index 2117eb11f..3fcd78a94 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: var(--nfd-onboarding-light-gray-5); + background-color: var(--nfd-onboarding-base-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss index e61041c7d..99c352891 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss @@ -5,12 +5,12 @@ flex-direction: column; &-tabs label { - border: 1px solid var(--nfd-onboarding-light-gray-2); + border: 1px solid var(--nfd-onboarding-base-gray-2); display: flex; justify-content: flex-start; padding: 10px 190px 10px 15px; color: var(--nfd-onboarding-black); - background: var(--nfd-onboarding-light-gray); + background: var(--nfd-onboarding-base-gray); font-weight: 350; font-size: clamp(0.8rem, 1.5vw, 1.2rem); line-height: 1.5; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index 745e77ee8..ab0329cd5 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -7,7 +7,7 @@ .nfd-card-category { &.chosenPrimaryCategory { background-color: var(--wp-admin-theme-color-darker-10); - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); } .nfd-card-category-wrapper { @@ -45,7 +45,7 @@ .nfd-card-category { color: var(--nfd-onboarding-black); padding: 1rem; - background-color: var(--nfd-onboarding-light-gray-3); + background-color: var(--nfd-onboarding-base-gray-3); background-position: center; display: inline-flex; margin: auto 0rem 1rem 1rem; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss index afb3a8927..b187291fb 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss @@ -55,7 +55,7 @@ &.chosenSecondaryCategory { background-color: var(--wp-admin-theme-color-darker-10); - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); } } } diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss index 4a2bf0d2a..4ab13c2fa 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss @@ -1,7 +1,7 @@ .nfd-onboarding-overview { width: 100%; max-width: 960px; - background-color: var(--nfd-onboarding-light); + background-color: var(--nfd-onboarding-base); padding: 20px; &__header { display: flex; diff --git a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss index 926be2323..5964cc8a3 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss @@ -6,11 +6,11 @@ justify-content: center; .highlighted { - background-color: var(--nfd-onboarding-light-gray-highlighted); + background-color: var(--nfd-onboarding-base-gray-highlighted); } .not-highlighted { - background-color: var(--nfd-onboarding-light-gray-3); + background-color: var(--nfd-onboarding-base-gray-3); } &__list { diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss index a69f91d6e..37e6f21a1 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss @@ -3,7 +3,7 @@ .nfd-onboarding-overview { width: 100%; max-width: 960px; - background-color: var(--nfd-onboarding-light); + background-color: var(--nfd-onboarding-base); padding: 20px; &__header { diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index acb470ee7..9a5e5572f 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -18,18 +18,18 @@ body { --nfd-onboarding-secondary-alt: #304663; --nfd-onboarding-tertiary: #7bb1fd; --nfd-onboarding-tertiary-alt: #84c0fc; - --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-6: rgb(224, 224, 224); - --nfd-onboarding-light-gray-highlighted: #e2e9f4; + --nfd-onboarding-base: #fff; + --nfd-onboarding-base-gray: #f0f0f0; + --nfd-onboarding-base-gray-2: #efefef; + --nfd-onboarding-base-gray-3: #f2f2f2; + --nfd-onboarding-base-gray-4: #a7a7a7; + --nfd-onboarding-base-gray-5: #eee; + --nfd-onboarding-base-gray-6: rgb(224, 224, 224); + --nfd-onboarding-base-gray-highlighted: #e2e9f4; --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); + --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); --nfd-onboarding-loader-start: var(--nfd-onboarding-primary); --nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary); --nfd-onboarding-step-loader-icon: url(../../Brands/bluehost/step-loader-logo.svg); @@ -72,17 +72,17 @@ body { --nfd-onboarding-secondary-alt: #363636; --nfd-onboarding-tertiary: #ffcf00; --nfd-onboarding-tertiary-alt: #ff9144; - --nfd-onboarding-light: #f5f6f8; - --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-6: rgb(224, 224, 224); + --nfd-onboarding-base: #f5f6f8; + --nfd-onboarding-base-gray: #f0f0f0; + --nfd-onboarding-base-gray-2: #efefef; + --nfd-onboarding-base-gray-3: #f2f2f2; + --nfd-onboarding-base-gray-4: #a7a7a7; + --nfd-onboarding-base-gray-5: #eee; + --nfd-onboarding-base-gray-6: rgb(224, 224, 224); --nfd-onboarding-dark: #1e2044; --nfd-onboarding-border: 245, 246, 248; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); - --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light); + --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); --nfd-onboarding-loader-start: var(--nfd-onboarding-primary); --nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary); } @@ -104,13 +104,13 @@ body { --nfd-onboarding-secondary-alt: #171003; --nfd-onboarding-tertiary: #fed96a; --nfd-onboarding-tertiary-alt: #fec101; - --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-6: rgb(224, 224, 224); + --nfd-onboarding-base: #fff; + --nfd-onboarding-base-gray: #f0f0f0; + --nfd-onboarding-base-gray-2: #efefef; + --nfd-onboarding-base-gray-3: #f2f2f2; + --nfd-onboarding-base-gray-4: #a7a7a7; + --nfd-onboarding-base-gray-5: #eee; + --nfd-onboarding-base-gray-6: rgb(224, 224, 224); --nfd-onboarding-dark: #000; --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary-alt); @@ -136,17 +136,17 @@ body { --nfd-onboarding-secondary-alt: #1d2a3b; --nfd-onboarding-tertiary: #196bde; --nfd-onboarding-tertiary-alt: #c77d1c; - --nfd-onboarding-light: #fff; - --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-6: rgb(224, 224, 224); - --nfd-onboarding-light-gray-highlighted: #e2e9f4; + --nfd-onboarding-base: #fff; + --nfd-onboarding-base-gray: #fcfff9; + --nfd-onboarding-base-gray-2: #fcfff9; + --nfd-onboarding-base-gray-3: #fcfff9; + --nfd-onboarding-base-gray-4: #5c5c5c; + --nfd-onboarding-base-gray-5: var(--nfd-onboarding-base); + --nfd-onboarding-base-gray-6: rgb(224, 224, 224); + --nfd-onboarding-base-gray-highlighted: #e2e9f4; --nfd-onboarding-dark: #1d2a3b; --nfd-onboarding-border: 219, 219, 219; - --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-light-gray-4); + --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-base-gray-4); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-primary); --nfd-onboarding-loader-start: var(--nfd-onboarding-primary); --nfd-onboarding-loader-end: var(--nfd-onboarding-secondary); @@ -156,9 +156,9 @@ body { --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-bg: var(--nfd-onboarding-base); --nfd-onboarding-drawer-fg: var(--nfd-onboarding-dark); - --nfd-onboarding-content-bg: var(--nfd-onboarding-light); + --nfd-onboarding-content-bg: var(--nfd-onboarding-base); .nfd-onboarding-drawer__toggle { background-color: transparent; @@ -181,11 +181,11 @@ body { } &-site-title { - color: var(--nfd-onboarding-light-gray-4); + color: var(--nfd-onboarding-base-gray-4); } &-menu-link { - color: var(--nfd-onboarding-light-gray-4); + color: var(--nfd-onboarding-base-gray-4); &.active { background-color: var(--nfd-onboarding-drawer-bg); @@ -195,7 +195,7 @@ body { } .custom-palette { - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); } .drawer-palette--button { @@ -205,7 +205,7 @@ body { background-color: var(--nfd-onboarding-primary); * { - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); } } } @@ -214,7 +214,7 @@ body { .nfd-onboarding-layout { &.is-bg-primary { - background-color: var(--nfd-onboarding-light); + background-color: var(--nfd-onboarding-base); } .checkbox-item--selected { diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index 4ef4eb1d7..4e7a7af79 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -9,22 +9,22 @@ body { --nfd-onboarding-icon: url(../../Brands/newfold/icon.svg); --nfd-onboarding-logo: url(../../Brands/newfold/logo.svg); --nfd-onboarding-primary: #dd5228; - --nfd-onboarding-light: #f2f2f2; + --nfd-onboarding-base: #f2f2f2; --nfd-onboarding-dark: #1e2223; --nfd-onboarding-white: #fff; --nfd-onboarding-white-rgb: 255, 255, 255; --nfd-onboarding-black: #000; - --nfd-onboarding-header-bg: var(--nfd-onboarding-light); + --nfd-onboarding-header-bg: var(--nfd-onboarding-base); --nfd-onboarding-header-fg: var(--nfd-onboarding-dark); - --nfd-onboarding-content-bg: var(--nfd-onboarding-light); + --nfd-onboarding-content-bg: var(--nfd-onboarding-base); --nfd-onboarding-content-fg: var(--nfd-onboarding-dark); --nfd-onboarding-drawer-bg: var(--nfd-onboarding-dark); - --nfd-onboarding-drawer-fg: var(--nfd-onboarding-light); + --nfd-onboarding-drawer-fg: var(--nfd-onboarding-base); --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-dark); - --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light); + --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); --nfd-onboarding-footer-fg: var(--nfd-onboarding-dark); - --nfd-onboarding-footer-bg: var(--nfd-onboarding-light); - --nfd-onboarding-light-gray-5: #eee; + --nfd-onboarding-footer-bg: var(--nfd-onboarding-base); + --nfd-onboarding-base-gray-5: #eee; &:not(.is-fullscreen-mode) { opacity: 0; diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss index 29f5ee105..747d6f6ec 100644 --- a/src/OnboardingSPA/styles/_utilities.scss +++ b/src/OnboardingSPA/styles/_utilities.scss @@ -13,7 +13,7 @@ .is-bg-primary { background-color: var(--nfd-onboarding-primary); - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); } .center { @@ -22,5 +22,5 @@ input::placeholder { font-size: 0.75rem; - color: var(--nfd-onboarding-light-gray-4); + color: var(--nfd-onboarding-base-gray-4); } From c77c40b43401bb0537d078e6621077e6b96e32e5 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 19 Apr 2023 16:47:17 +0530 Subject: [PATCH 06/21] renamed css vars in JS file --- .../LivePreview/SelectableCardWithInfo/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js index c7bf3d46f..e3a871831 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js @@ -46,8 +46,8 @@ const SelectableCardWithInfo = ( { className={ `${ className }__information` } style={ { backgroundColor: showDescription - ? 'var(--nfd-onboarding-light-gray-highlighted)' - : 'var(--nfd-onboarding-light-gray-3)', + ? 'var(--nfd-onboarding-base-gray-highlighted)' + : 'var(--nfd-onboarding-base-gray-3)', } } >

From 78adc8fc9549c075412f29710d22f17c40be5bd9 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 19 Apr 2023 16:49:03 +0530 Subject: [PATCH 07/21] renamed css vars from dark to contrast --- .../components/Accordion/stylesheet.scss | 6 +++--- .../components/Drawer/stylesheet.scss | 2 +- .../NewfoldLargeCard/stylesheet.scss | 2 +- .../components/SelectableCard/stylesheet.scss | 6 +++--- .../components/StepOverview/stylesheet.scss | 4 ++-- .../Steps/GetStarted/Welcome/stylesheet.scss | 6 +++--- .../pages/Steps/WhatNext/stylesheet.scss | 6 +++--- src/OnboardingSPA/styles/_branding.scss | 18 +++++++++--------- src/OnboardingSPA/styles/_interface.scss | 12 ++++++------ 9 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/OnboardingSPA/components/Accordion/stylesheet.scss b/src/OnboardingSPA/components/Accordion/stylesheet.scss index 6e6cc772f..45cc5f84a 100644 --- a/src/OnboardingSPA/components/Accordion/stylesheet.scss +++ b/src/OnboardingSPA/components/Accordion/stylesheet.scss @@ -1,5 +1,5 @@ .nfd-onboarding-accordion { - border: $border-width solid var(--nfd-onboarding-dark); + border: $border-width solid var(--nfd-onboarding-contrast); margin-bottom: $grid-unit-05; margin-top: $grid-unit-05; opacity: 0.8; @@ -15,7 +15,7 @@ &__summary { background-color: var(--nfd-onboarding-base); - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); cursor: pointer; font-weight: 700; padding: $grid-unit-05 $grid-unit-10; @@ -28,7 +28,7 @@ &__content { margin: 0 $grid-unit-20; padding: $grid-unit-10 0; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } } \ No newline at end of file diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 2bba89567..75006f330 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -415,7 +415,7 @@ } &__text { - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); font-size: 12px; font-weight: 700; line-height: 16px; diff --git a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss index cdc36cb2e..1326773e9 100644 --- a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss +++ b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss @@ -21,7 +21,7 @@ &::before { content: ""; - background: var(--nfd-onboarding-dark-icon) no-repeat; + background: var(--nfd-onboarding-contrast-icon) no-repeat; width: 600px; min-height: 500px; transform: rotate(-14deg) translateZ(-1px); diff --git a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss index d1a32d541..325852088 100644 --- a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss @@ -35,7 +35,7 @@ $radius: 0.2rem; &_title { font-weight: 700; margin-top: 30px; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); padding: 14px 0 10px 0; transition: color 300ms ease-in; font-size: clamp(1rem, 2.5vw, 1.5rem); @@ -45,7 +45,7 @@ $radius: 0.2rem; font-weight: 400; text-align: center; letter-spacing: 0.5px; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); font-size: clamp(0.8rem, 2vw, 0.87rem); } } @@ -66,7 +66,7 @@ $radius: 0.2rem; background-position: center; background-repeat: no-repeat; background-clip: padding-box; - background-color: var(--nfd-onboarding-dark); + background-color: var(--nfd-onboarding-contrast); border: 4px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.10544); &-selected { diff --git a/src/OnboardingSPA/components/StepOverview/stylesheet.scss b/src/OnboardingSPA/components/StepOverview/stylesheet.scss index 3e3cdd866..eee2049c3 100644 --- a/src/OnboardingSPA/components/StepOverview/stylesheet.scss +++ b/src/OnboardingSPA/components/StepOverview/stylesheet.scss @@ -16,10 +16,10 @@ } &-heading { margin: 0 0 6px 0; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } &-subheading { - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } } } \ No newline at end of file diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss index 4ab13c2fa..aff88d571 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss @@ -16,17 +16,17 @@ } &-heading { margin: 0 0 6px 0; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } &-subheading { - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } } &__tab-panel { width: 90%; padding-bottom: 40px; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } } diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss index 37e6f21a1..d8f4930ea 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss @@ -22,18 +22,18 @@ &-heading { margin: 0 0 6px 0; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } &-subheading { - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } } &__tab-panel { width: 90%; padding-bottom: 40px; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-contrast); } } diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 9a5e5572f..74903e749 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -8,7 +8,7 @@ body { --wp-admin-theme-color-darker-10--rgb: 28, 92, 186; --wp-admin-theme-color-darker-20: #0242a0; --wp-admin-theme-color-darker-20--rgb: 2, 66, 160; - --nfd-onboarding-dark-icon: url(../../Brands/bluehost/dark.svg); + --nfd-onboarding-contrast-icon: url(../../Brands/bluehost/dark.svg); --nfd-onboarding-icon: url(../../Brands/bluehost/icon.svg); --nfd-onboarding-logo: url(../../Brands/bluehost/logo.svg); --nfd-onboarding-primary: #3575d3; @@ -26,7 +26,7 @@ body { --nfd-onboarding-base-gray-5: #eee; --nfd-onboarding-base-gray-6: rgb(224, 224, 224); --nfd-onboarding-base-gray-highlighted: #e2e9f4; - --nfd-onboarding-dark: #1d2a3b; + --nfd-onboarding-contrast: #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-base); @@ -62,7 +62,7 @@ body { --wp-admin-theme-color-darker-10--rgb: 20, 133, 236; --wp-admin-theme-color-darker-20: #1177d2; --wp-admin-theme-color-darker-20--rgb: 17, 119, 210; - --nfd-onboarding-dark-icon: url(../../Brands/hostgator/dark.svg); + --nfd-onboarding-contrast-icon: url(../../Brands/hostgator/dark.svg); --nfd-onboarding-icon: url(../../Brands/hostgator/icon.svg); --nfd-onboarding-logo: url(../../Brands/hostgator/logo.svg); --nfd-onboarding-primary: #2e93ee; @@ -79,7 +79,7 @@ body { --nfd-onboarding-base-gray-4: #a7a7a7; --nfd-onboarding-base-gray-5: #eee; --nfd-onboarding-base-gray-6: rgb(224, 224, 224); - --nfd-onboarding-dark: #1e2044; + --nfd-onboarding-contrast: #1e2044; --nfd-onboarding-border: 245, 246, 248; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); @@ -94,7 +94,7 @@ body { --wp-admin-theme-color-darker-10--rgb: 43, 92, 251; --wp-admin-theme-color-darker-20: #0b44fb; --wp-admin-theme-color-darker-20--rgb: 11, 68, 251; - --nfd-onboarding-dark-icon: url(../../Brands/webcom/dark.svg); + --nfd-onboarding-contrast-icon: url(../../Brands/webcom/dark.svg); --nfd-onboarding-icon: url(../../Brands/webcom/icon.svg); --nfd-onboarding-logo: url(../../Brands/webcom/logo.svg); --nfd-onboarding-primary: #4b75fc; @@ -111,7 +111,7 @@ body { --nfd-onboarding-base-gray-4: #a7a7a7; --nfd-onboarding-base-gray-5: #eee; --nfd-onboarding-base-gray-6: rgb(224, 224, 224); - --nfd-onboarding-dark: #000; + --nfd-onboarding-contrast: #000; --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary-alt); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-tertiary-alt); @@ -126,7 +126,7 @@ body { --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-contrast-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); @@ -144,7 +144,7 @@ body { --nfd-onboarding-base-gray-5: var(--nfd-onboarding-base); --nfd-onboarding-base-gray-6: rgb(224, 224, 224); --nfd-onboarding-base-gray-highlighted: #e2e9f4; - --nfd-onboarding-dark: #1d2a3b; + --nfd-onboarding-contrast: #1d2a3b; --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-base-gray-4); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-primary); @@ -157,7 +157,7 @@ body { --nfd-onboarding-step-what-next-img-2: url(../static/images/help.png); --nfd-onboarding-drawer-bg: var(--nfd-onboarding-base); - --nfd-onboarding-drawer-fg: var(--nfd-onboarding-dark); + --nfd-onboarding-drawer-fg: var(--nfd-onboarding-contrast); --nfd-onboarding-content-bg: var(--nfd-onboarding-base); .nfd-onboarding-drawer__toggle { diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index 4e7a7af79..70aadbc6f 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -10,19 +10,19 @@ body { --nfd-onboarding-logo: url(../../Brands/newfold/logo.svg); --nfd-onboarding-primary: #dd5228; --nfd-onboarding-base: #f2f2f2; - --nfd-onboarding-dark: #1e2223; + --nfd-onboarding-contrast: #1e2223; --nfd-onboarding-white: #fff; --nfd-onboarding-white-rgb: 255, 255, 255; --nfd-onboarding-black: #000; --nfd-onboarding-header-bg: var(--nfd-onboarding-base); - --nfd-onboarding-header-fg: var(--nfd-onboarding-dark); + --nfd-onboarding-header-fg: var(--nfd-onboarding-contrast); --nfd-onboarding-content-bg: var(--nfd-onboarding-base); - --nfd-onboarding-content-fg: var(--nfd-onboarding-dark); - --nfd-onboarding-drawer-bg: var(--nfd-onboarding-dark); + --nfd-onboarding-content-fg: var(--nfd-onboarding-contrast); + --nfd-onboarding-drawer-bg: var(--nfd-onboarding-contrast); --nfd-onboarding-drawer-fg: var(--nfd-onboarding-base); - --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-dark); + --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-contrast); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); - --nfd-onboarding-footer-fg: var(--nfd-onboarding-dark); + --nfd-onboarding-footer-fg: var(--nfd-onboarding-contrast); --nfd-onboarding-footer-bg: var(--nfd-onboarding-base); --nfd-onboarding-base-gray-5: #eee; From 3306f3736c40cf7e70528b8a539100cce97a1d34 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 19 Apr 2023 17:47:39 +0530 Subject: [PATCH 08/21] Js lint fixes --- .../components/LivePreview/SelectableCardWithInfo/index.js | 3 +-- src/OnboardingSPA/components/SelectableCard/stylesheet.scss | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js index e3a871831..186fc3db5 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js @@ -18,7 +18,6 @@ const SelectableCardWithInfo = ( { description = false, slug, } ) => { - const [ loadingParent, setIsLoadingParent ] = useState( true ); const [ showDescription, setShowDescription ] = useState( false ); const handleCheck = ( isChecked ) => { @@ -32,13 +31,13 @@ const SelectableCardWithInfo = ( {

handleCheck( ! selected ) } + role="presentation" >
diff --git a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss index 325852088..851823efb 100644 --- a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss @@ -101,7 +101,7 @@ $radius: 0.2rem; .nfd-selected-card { transition: all 0.2s ease-in-out; - background-color: rgba( ar(--nfd-onboarding-highlighted--rgb), 0.18) !important; + background-color: rgba( var(--nfd-onboarding-highlighted--rgb), 0.18) !important; } .nfd-selected-card-box { From f6f625cd86d5f4efe12dfa905d721241e698d185 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 19 Apr 2023 18:07:17 +0530 Subject: [PATCH 09/21] SCSS linting --- .../components/Accordion/stylesheet.scss | 56 ++--- .../NewfoldLargeCard/stylesheet.scss | 5 +- .../components/SelectableCard/stylesheet.scss | 2 +- .../components/StepOverview/stylesheet.scss | 53 +++-- .../GetStartedExperience/stylesheet.scss | 9 +- .../SiteTypeSetup/PrimarySite/stylesheet.scss | 68 +++--- .../Steps/GetStarted/Welcome/stylesheet.scss | 207 +++++++++--------- 7 files changed, 212 insertions(+), 188 deletions(-) diff --git a/src/OnboardingSPA/components/Accordion/stylesheet.scss b/src/OnboardingSPA/components/Accordion/stylesheet.scss index 45cc5f84a..2dacfccff 100644 --- a/src/OnboardingSPA/components/Accordion/stylesheet.scss +++ b/src/OnboardingSPA/components/Accordion/stylesheet.scss @@ -1,34 +1,34 @@ .nfd-onboarding-accordion { - border: $border-width solid var(--nfd-onboarding-contrast); - margin-bottom: $grid-unit-05; - margin-top: $grid-unit-05; - opacity: 0.8; - padding: $border-width; - transition: opacity 233ms ease; - @include reduce-motion("transition"); + border: $border-width solid var(--nfd-onboarding-contrast); + margin-bottom: $grid-unit-05; + margin-top: $grid-unit-05; + opacity: 0.8; + padding: $border-width; + transition: opacity 233ms ease; - &:hover, - &:focus, - &[open] { - opacity: 1; - } + @include reduce-motion("transition"); - &__summary { - background-color: var(--nfd-onboarding-base); - color: var(--nfd-onboarding-contrast); - cursor: pointer; - font-weight: 700; - padding: $grid-unit-05 $grid-unit-10; + &:hover, + &:focus, + &[open] { + opacity: 1; + } - p { - display: inline; - } - } + &__summary { + background-color: var(--nfd-onboarding-base); + color: var(--nfd-onboarding-contrast); + cursor: pointer; + font-weight: 700; + padding: $grid-unit-05 $grid-unit-10; - &__content { - margin: 0 $grid-unit-20; - padding: $grid-unit-10 0; - color: var(--nfd-onboarding-contrast); - } + p { + display: inline; + } + } -} \ No newline at end of file + &__content { + margin: 0 $grid-unit-20; + padding: $grid-unit-10 0; + color: var(--nfd-onboarding-contrast); + } +} diff --git a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss index 1326773e9..bf49a52c8 100644 --- a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss +++ b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss @@ -36,12 +36,14 @@ transform-style: flat; padding: 20px; margin: 30px; + &::before { display: none; } } @media (min-width: #{ ($break-medium) }) and (max-width: 1300px) { + &::before { width: 400px; height: 350px; @@ -53,6 +55,7 @@ max-width: 100%; width: 50vw; min-height: 960px; + &::before { width: 860px; min-height: 600px; @@ -63,4 +66,4 @@ ¬::before { justify-content: center; } -} \ No newline at end of file +} diff --git a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss index 851823efb..540fe1691 100644 --- a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss @@ -101,7 +101,7 @@ $radius: 0.2rem; .nfd-selected-card { transition: all 0.2s ease-in-out; - background-color: rgba( var(--nfd-onboarding-highlighted--rgb), 0.18) !important; + background-color: rgba(var(--nfd-onboarding-highlighted--rgb), 0.18) !important; } .nfd-selected-card-box { diff --git a/src/OnboardingSPA/components/StepOverview/stylesheet.scss b/src/OnboardingSPA/components/StepOverview/stylesheet.scss index eee2049c3..b9e39aec0 100644 --- a/src/OnboardingSPA/components/StepOverview/stylesheet.scss +++ b/src/OnboardingSPA/components/StepOverview/stylesheet.scss @@ -1,25 +1,30 @@ .nfd-onboarding-overview { - width: 100%; - max-width: 960px; - background-color: var(--nfd-onboarding-base); - padding: 20px; - &__header { - display: flex; - align-items: center; - column-gap: 1rem; - &-icon { - display: flex; - place-items: center; - svg { - fill: var(--nfd-onboarding-primary); - } - } - &-heading { - margin: 0 0 6px 0; - color: var(--nfd-onboarding-contrast); - } - &-subheading { - color: var(--nfd-onboarding-contrast); - } - } -} \ No newline at end of file + width: 100%; + max-width: 960px; + background-color: var(--nfd-onboarding-base); + padding: 20px; + + &__header { + display: flex; + align-items: center; + column-gap: 1rem; + + &-icon { + display: flex; + place-items: center; + + svg { + fill: var(--nfd-onboarding-primary); + } + } + + &-heading { + margin: 0 0 6px 0; + color: var(--nfd-onboarding-contrast); + } + + &-subheading { + color: var(--nfd-onboarding-contrast); + } + } +} diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss index 99c352891..c3d839e8c 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss @@ -16,9 +16,11 @@ line-height: 1.5; margin: 5px; white-space: nowrap; + @media (max-width: #{ ($break-medium) - 1 }) { padding-right: 100px; } + @media (min-width: 3700px) { font-size: clamp(3.7rem, -0.27vw + 3.5rem, 3rem); margin: 25px; @@ -33,10 +35,11 @@ } .components-radio-control { + &__input input { - display: none !important; + display: none !important; } - margin: 32px 0px 48px; + margin: 32px 0 48px; align-items: center; } -} \ No newline at end of file +} diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index ab0329cd5..7931ba1db 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -1,28 +1,42 @@ +.nfd-card-category { + color: var(--nfd-onboarding-black); + padding: 1rem; + background-color: var(--nfd-onboarding-base-gray-3); + background-position: center; + display: inline-flex; + margin: auto 0 1rem 1rem; + border-radius: 2.5rem; + cursor: pointer; + align-items: center; +} + .nfd-setup-primary { + &-categories { - margin-top: 2rem; - width: 40vw; - text-align: center; - - .nfd-card-category { - &.chosenPrimaryCategory { - background-color: var(--wp-admin-theme-color-darker-10); - color: var(--nfd-onboarding-base); - } - - .nfd-card-category-wrapper { - display: inline-flex; - align-items: center; - } + margin-top: 2rem; + width: 40vw; + text-align: center; + + .nfd-card-category { + + &.chosenPrimaryCategory { + background-color: var(--wp-admin-theme-color-darker-10); + color: var(--nfd-onboarding-base); } - - .icon { - width: 25px; - height: 24px; - display: inline-block; - background-repeat: no-repeat; - background-position: center; + + .nfd-card-category-wrapper { + display: inline-flex; + align-items: center; } + } + + .icon { + width: 25px; + height: 24px; + display: inline-block; + background-repeat: no-repeat; + background-position: center; + } } &-second { @@ -42,18 +56,6 @@ } } -.nfd-card-category { - color: var(--nfd-onboarding-black); - padding: 1rem; - background-color: var(--nfd-onboarding-base-gray-3); - background-position: center; - display: inline-flex; - margin: auto 0rem 1rem 1rem; - border-radius: 2.5rem; - cursor: pointer; - align-items: center; -} - .blackText { color: var(--nfd-onboarding-black); font-size: 1rem; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss index aff88d571..be2e9d3dd 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss @@ -1,135 +1,146 @@ .nfd-onboarding-overview { - width: 100%; - max-width: 960px; - background-color: var(--nfd-onboarding-base); - padding: 20px; - &__header { - display: flex; - align-items: center; - column-gap: 1rem; - &-icon { - display: flex; - place-items: center; - svg { - fill: var(--nfd-onboarding-primary); - } - } - &-heading { - margin: 0 0 6px 0; - color: var(--nfd-onboarding-contrast); - } - &-subheading { - color: var(--nfd-onboarding-contrast); - } - } - - &__tab-panel { - width: 90%; - padding-bottom: 40px; - color: var(--nfd-onboarding-contrast); - } + width: 100%; + max-width: 960px; + background-color: var(--nfd-onboarding-base); + padding: 20px; + + &__header { + display: flex; + align-items: center; + column-gap: 1rem; + + &-icon { + display: flex; + place-items: center; + + svg { + fill: var(--nfd-onboarding-primary); + } + } + + &-heading { + margin: 0 0 6px 0; + color: var(--nfd-onboarding-contrast); + } + + &-subheading { + color: var(--nfd-onboarding-contrast); + } + } + + &__tab-panel { + width: 90%; + padding-bottom: 40px; + color: var(--nfd-onboarding-contrast); + } } .nfd-step-card-subheading { - display: flex; - justify-content: space-around; + display: flex; + justify-content: space-around; } .components-tab-panel__tabs { - justify-content: space-around; - @media screen and ( max-width: 480px ) { - width: 100%; - } + justify-content: space-around; + + @media screen and (max-width: 480px) { + width: 100%; + } } .components-tab-panel__tabs > .components-button:focus:not(:disabled), .components-tab-panel__tabs > .components-button.is-pressed:focus:not(:disabled) { - box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); + box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); } .components-tab-panel__tabs-item { - justify-content: center; - border-bottom: 1px solid #CCCCCC; - width: 100%; - font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem); - line-height: 1.5; - - &.is-active { - color: var(--wp-admin-theme-color); - box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); - } - - &.is-not-active { - box-shadow: none !important; - } + justify-content: center; + border-bottom: 1px solid #ccc; + width: 100%; + font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem); + line-height: 1.5; + + &.is-active { + color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color); + } + + &.is-not-active { + box-shadow: none !important; + } } -.tab-data{ - width: 100%; - padding-top: 40px; - display: flex; - flex-direction: row; - align-items: stretch; - justify-content: space-between; +.tab-data { + width: 100%; + padding-top: 40px; + display: flex; + flex-direction: row; + align-items: stretch; + justify-content: space-between; } -.tab-text{ - padding-right: 10px; - font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem); - line-height: 1.6; +.tab-text { + padding-right: 10px; + font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem); + line-height: 1.6; } .tab-img { - background-color: var(--nfd-onboarding-tertiary); - overflow: hidden; + background-color: var(--nfd-onboarding-tertiary); + overflow: hidden; } -.tab-img-base { - background-size: contain; - background-repeat: no-repeat; - height: 228px; - width: clamp(180px, 50vw, 400px); +%tab-img-base { + background-size: contain; + background-repeat: no-repeat; + height: 228px; + width: clamp(180px, 50vw, 400px); } -.content-img{ - @extend .tab-img-base; - background-image: var(--get-started-content-img); +.content-img { + + @extend %tab-img-base; + background-image: var(--get-started-content-img); } -.features-img{ - @extend .tab-img-base; - background-image: var(--get-started-features-img); +.features-img { + + @extend %tab-img-base; + background-image: var(--get-started-features-img); } -.design-img{ - @extend .tab-img-base; - background-image: var(--get-started-design-img); +.design-img { + + @extend %tab-img-base; + background-image: var(--get-started-design-img); } .welcome-card { display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - height: clamp(560px, 59vh, 800px); - width: 100%; - padding-bottom: 10px; + flex-direction: column; + align-items: center; + justify-content: space-around; + height: clamp(560px, 59vh, 800px); + width: 100%; + padding-bottom: 10px; } - @media screen and ( max-width: #{ ($break-medium)} ) { - .tab-data { - flex-direction: column-reverse; - align-items: center; - } - - .content-text { - text-align: center; - width: 100%; - min-height: 10px; - } - - .content-img, .design-img, .features-img { - max-height: 100px; - } + + .tab-data { + flex-direction: column-reverse; + align-items: center; + } + + .content-text { + text-align: center; + width: 100%; + min-height: 10px; + } + + .content-img, + .design-img, + .features-img { + max-height: 100px; + } } From b665b3b19da4e7bddfd3a63652ad3858752802f7 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Thu, 27 Apr 2023 18:09:46 +0530 Subject: [PATCH 10/21] reverted light -> base for gray color CSS --- .../CheckboxItem/stylesheet.scss | 12 ++-- .../CheckboxListSkeleton/stylesheet.scss | 4 +- .../LivePreview/BlockPreview/stylesheet.scss | 4 +- .../SelectableCardWithInfo/index.js | 8 +-- .../components/MiniPreview/stylesheet.scss | 2 +- .../LearnMore/Skeleton/stylesheet.scss | 2 +- .../pages/Steps/DesignColors/stylesheet.scss | 2 +- .../Steps/DesignHeaderMenu/stylesheet.scss | 2 +- .../DesignThemeStyles/Preview/stylesheet.scss | 2 +- .../Steps/DesignTypography/stylesheet.scss | 2 +- .../GetStartedExperience/stylesheet.scss | 4 +- .../SiteTypeSetup/PrimarySite/stylesheet.scss | 2 +- .../pages/Steps/SitePages/stylesheet.scss | 4 +- src/OnboardingSPA/styles/_branding.scss | 58 +++++++++---------- src/OnboardingSPA/styles/_interface.scss | 2 +- src/OnboardingSPA/styles/_utilities.scss | 2 +- 16 files changed, 56 insertions(+), 56 deletions(-) diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss index 7d283bb26..b13919c54 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss @@ -9,7 +9,7 @@ padding: 16px; margin-top: 16px; background: var(--nfd-onboarding-white); - border: 1px solid var(--nfd-onboarding-base-gray-6); + border: 1px solid var(--nfd-onboarding-light-gray-6); width: clamp(15rem, 25vw, 35rem); box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); @@ -39,7 +39,7 @@ margin-right: 16px; border-radius: 50%; align-items: center; - background: var(--nfd-onboarding-base-gray); + background: var(--nfd-onboarding-light-gray); justify-content: center; &--selected { @@ -47,7 +47,7 @@ } &--shown { - background: var(--nfd-onboarding-base-gray); + background: var(--nfd-onboarding-light-gray); } } @@ -91,12 +91,12 @@ &--selected { background: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2); border: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.6); - box-shadow: 0 2px 8px 2px rgba(var(--nfd-onboarding-base-gray-6), 0.8); + box-shadow: 0 2px 8px 2px rgba(var(--nfd-onboarding-light-gray-6), 0.8); } &--shown { border-bottom: none; - background: var(--nfd-onboarding-base-gray-highlighted); + background: var(--nfd-onboarding-light-gray-highlighted); border-radius: 2px 2px 0 0; border-top: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1); @@ -116,7 +116,7 @@ margin-top: -12px; position: absolute; font-style: italic; - background: var(--nfd-onboarding-base-gray-highlighted); + background: var(--nfd-onboarding-light-gray-highlighted); border-radius: 0 0 2px 2px; transform-origin: top center; width: clamp(15rem, 25vw, 35rem); diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss index 34252301c..60c1e24ed 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss @@ -6,11 +6,11 @@ $grey-color: #f6f7f8; margin: 12px; padding: 16px; margin-top: 16px; - border: 0.5px solid var(--nfd-onboarding-base-gray-6); + border: 0.5px solid var(--nfd-onboarding-light-gray-6); cursor: not-allowed; width: clamp(15rem, 25vw, 35rem); box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); background: $grey-color; background-repeat: no-repeat; - background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-base-gray) 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-light-gray) 20%, $grey-color 40%, $grey-color 100%); } diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss index e653e1e47..1ee2b924e 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss @@ -36,7 +36,7 @@ $main-color-grey-other: #e2e2e2; cursor: not-allowed; align-items: center; flex-direction: column; - background-color: var(--nfd-onboarding-base-gray); + background-color: var(--nfd-onboarding-light-gray); &--box { width: 90%; @@ -65,7 +65,7 @@ $main-color-grey-other: #e2e2e2; width: 100%; height: 100%; position: absolute; - background-image: linear-gradient(90deg, rgba(var(--nfd-onboarding-white-rgb), 0) 0, rgba(var(--nfd-onboarding-white-rgb), 0.4) 20%, rgba(var(--nfd-onboarding-white-rgb), 0.6) 60%, rgba(var(--nfd-onboarding-white-rgb), 0.4) 90%, rgba(var(--nfd-onboarding-white-rgb), 0.02) 100%, var(--nfd-onboarding-base-gray)); + background-image: linear-gradient(90deg, rgba(var(--nfd-onboarding-white-rgb), 0) 0, rgba(var(--nfd-onboarding-white-rgb), 0.4) 20%, rgba(var(--nfd-onboarding-white-rgb), 0.6) 60%, rgba(var(--nfd-onboarding-white-rgb), 0.4) 90%, rgba(var(--nfd-onboarding-white-rgb), 0.02) 100%, var(--nfd-onboarding-light-gray)); } } } diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js index 186fc3db5..7562e070a 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js @@ -45,8 +45,8 @@ const SelectableCardWithInfo = ( { className={ `${ className }__information` } style={ { backgroundColor: showDescription - ? 'var(--nfd-onboarding-base-gray-highlighted)' - : 'var(--nfd-onboarding-base-gray-3)', + ? 'var(--nfd-onboarding-light-gray-highlighted)' + : 'var(--nfd-onboarding-light-gray-3)', } } >

diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss index 18c14d6d6..0ca8b0348 100644 --- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss @@ -1,5 +1,5 @@ $browser-dark: #cacaca; -$browser-light: var(--nfd-onboarding-base-gray-3); +$browser-light: var(--nfd-onboarding-light-gray-3); $link-browser-color: #007017; $title-browser-color: #3858e9; diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss index 9d85f437c..178dc6758 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss @@ -138,7 +138,7 @@ $grey-color: #f6f7f8; .shimmer { background: $grey-color; background-repeat: no-repeat; - background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-base-gray) 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-light-gray) 20%, $grey-color 40%, $grey-color 100%); } .shimmer-1 { diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss index 906c6091c..fbf135cca 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: var(--nfd-onboarding-base-gray-5); + background-color: var(--nfd-onboarding-light-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss index f512f4948..4b15fe650 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: var(--nfd-onboarding-base-gray-5); + background-color: var(--nfd-onboarding-light-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss index dc2a4c07e..d9d13f198 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: var(--nfd-onboarding-base-gray-5); + background-color: var(--nfd-onboarding-light-gray-5); &__checkbox { margin: 20px 0; diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss index 3fcd78a94..2117eb11f 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss @@ -5,7 +5,7 @@ align-items: center; flex-direction: column; justify-content: center; - background-color: var(--nfd-onboarding-base-gray-5); + background-color: var(--nfd-onboarding-light-gray-5); padding-top: 20px; &__title-bar { diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss index c3d839e8c..5bcacf227 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss @@ -5,12 +5,12 @@ flex-direction: column; &-tabs label { - border: 1px solid var(--nfd-onboarding-base-gray-2); + border: 1px solid var(--nfd-onboarding-light-gray-2); display: flex; justify-content: flex-start; padding: 10px 190px 10px 15px; color: var(--nfd-onboarding-black); - background: var(--nfd-onboarding-base-gray); + background: var(--nfd-onboarding-light-gray); font-weight: 350; font-size: clamp(0.8rem, 1.5vw, 1.2rem); line-height: 1.5; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index 7931ba1db..bc1b329c0 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -1,7 +1,7 @@ .nfd-card-category { color: var(--nfd-onboarding-black); padding: 1rem; - background-color: var(--nfd-onboarding-base-gray-3); + background-color: var(--nfd-onboarding-light-gray-3); background-position: center; display: inline-flex; margin: auto 0 1rem 1rem; diff --git a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss index 5964cc8a3..926be2323 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss @@ -6,11 +6,11 @@ justify-content: center; .highlighted { - background-color: var(--nfd-onboarding-base-gray-highlighted); + background-color: var(--nfd-onboarding-light-gray-highlighted); } .not-highlighted { - background-color: var(--nfd-onboarding-base-gray-3); + background-color: var(--nfd-onboarding-light-gray-3); } &__list { diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 74903e749..570b55982 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -19,13 +19,13 @@ body { --nfd-onboarding-tertiary: #7bb1fd; --nfd-onboarding-tertiary-alt: #84c0fc; --nfd-onboarding-base: #fff; - --nfd-onboarding-base-gray: #f0f0f0; - --nfd-onboarding-base-gray-2: #efefef; - --nfd-onboarding-base-gray-3: #f2f2f2; - --nfd-onboarding-base-gray-4: #a7a7a7; - --nfd-onboarding-base-gray-5: #eee; - --nfd-onboarding-base-gray-6: rgb(224, 224, 224); - --nfd-onboarding-base-gray-highlighted: #e2e9f4; + --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-6: rgb(224, 224, 224); + --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-contrast: #1d2a3b; --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); @@ -73,12 +73,12 @@ body { --nfd-onboarding-tertiary: #ffcf00; --nfd-onboarding-tertiary-alt: #ff9144; --nfd-onboarding-base: #f5f6f8; - --nfd-onboarding-base-gray: #f0f0f0; - --nfd-onboarding-base-gray-2: #efefef; - --nfd-onboarding-base-gray-3: #f2f2f2; - --nfd-onboarding-base-gray-4: #a7a7a7; - --nfd-onboarding-base-gray-5: #eee; - --nfd-onboarding-base-gray-6: rgb(224, 224, 224); + --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-6: rgb(224, 224, 224); --nfd-onboarding-contrast: #1e2044; --nfd-onboarding-border: 245, 246, 248; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); @@ -105,12 +105,12 @@ body { --nfd-onboarding-tertiary: #fed96a; --nfd-onboarding-tertiary-alt: #fec101; --nfd-onboarding-base: #fff; - --nfd-onboarding-base-gray: #f0f0f0; - --nfd-onboarding-base-gray-2: #efefef; - --nfd-onboarding-base-gray-3: #f2f2f2; - --nfd-onboarding-base-gray-4: #a7a7a7; - --nfd-onboarding-base-gray-5: #eee; - --nfd-onboarding-base-gray-6: rgb(224, 224, 224); + --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-6: rgb(224, 224, 224); --nfd-onboarding-contrast: #000; --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary-alt); @@ -137,16 +137,16 @@ body { --nfd-onboarding-tertiary: #196bde; --nfd-onboarding-tertiary-alt: #c77d1c; --nfd-onboarding-base: #fff; - --nfd-onboarding-base-gray: #fcfff9; - --nfd-onboarding-base-gray-2: #fcfff9; - --nfd-onboarding-base-gray-3: #fcfff9; - --nfd-onboarding-base-gray-4: #5c5c5c; - --nfd-onboarding-base-gray-5: var(--nfd-onboarding-base); - --nfd-onboarding-base-gray-6: rgb(224, 224, 224); - --nfd-onboarding-base-gray-highlighted: #e2e9f4; + --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-base); + --nfd-onboarding-light-gray-6: rgb(224, 224, 224); + --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-contrast: #1d2a3b; --nfd-onboarding-border: 219, 219, 219; - --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-base-gray-4); + --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-light-gray-4); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-primary); --nfd-onboarding-loader-start: var(--nfd-onboarding-primary); --nfd-onboarding-loader-end: var(--nfd-onboarding-secondary); @@ -181,11 +181,11 @@ body { } &-site-title { - color: var(--nfd-onboarding-base-gray-4); + color: var(--nfd-onboarding-light-gray-4); } &-menu-link { - color: var(--nfd-onboarding-base-gray-4); + color: var(--nfd-onboarding-light-gray-4); &.active { background-color: var(--nfd-onboarding-drawer-bg); diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index 70aadbc6f..eedeef946 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -24,7 +24,7 @@ body { --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); --nfd-onboarding-footer-fg: var(--nfd-onboarding-contrast); --nfd-onboarding-footer-bg: var(--nfd-onboarding-base); - --nfd-onboarding-base-gray-5: #eee; + --nfd-onboarding-light-gray-5: #eee; &:not(.is-fullscreen-mode) { opacity: 0; diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss index 747d6f6ec..20ab33b55 100644 --- a/src/OnboardingSPA/styles/_utilities.scss +++ b/src/OnboardingSPA/styles/_utilities.scss @@ -22,5 +22,5 @@ input::placeholder { font-size: 0.75rem; - color: var(--nfd-onboarding-base-gray-4); + color: var(--nfd-onboarding-light-gray-4); } From de1120bea9084948b800fe2d6324303afb8b5946 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Fri, 28 Apr 2023 12:37:51 +0530 Subject: [PATCH 11/21] replaced bg -> base and fg -> contrast --- .../components/Content/stylesheet.scss | 4 +-- .../components/Drawer/stylesheet.scss | 32 +++++++++---------- .../components/Header/stylesheet.scss | 6 ++-- src/OnboardingSPA/styles/_branding.scss | 8 ++--- src/OnboardingSPA/styles/_interface.scss | 16 +++++----- 5 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/OnboardingSPA/components/Content/stylesheet.scss b/src/OnboardingSPA/components/Content/stylesheet.scss index f3f5f13c8..0322ac421 100644 --- a/src/OnboardingSPA/components/Content/stylesheet.scss +++ b/src/OnboardingSPA/components/Content/stylesheet.scss @@ -1,4 +1,4 @@ .interface-interface-skeleton__content { - background-color: var(--nfd-onboarding-content-bg); - color: var(--nfd-onboarding-content-fg); + background-color: var(--nfd-onboarding-content-base); + color: var(--nfd-onboarding-content-contrast); } \ No newline at end of file diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 75006f330..9a891a14a 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -1,6 +1,6 @@ .nfd-onboarding-drawer__toggle { align-items: center; - background: var(--nfd-onboarding-drawer-bg); + background: var(--nfd-onboarding-drawer-base); border-radius: 0; display: flex; position: absolute; @@ -13,9 +13,9 @@ &-button { align-items: center; - background: var(--nfd-onboarding-drawer-bg); + background: var(--nfd-onboarding-drawer-base); border-radius: 0; - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); height: $header-height + $border-width; width: $header-height; z-index: 1; @@ -26,7 +26,7 @@ &:hover, &:active { - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); } &.is-suppressed { @@ -49,7 +49,7 @@ bottom: 9px; left: 9px; border-radius: $radius-block-ui + $border-width + $border-width; - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--nfd-onboarding-drawer-bg); + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--nfd-onboarding-drawer-base); } &:hover::before { @@ -57,7 +57,7 @@ } &:focus::before { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(var(--nfd-onboarding-drawer-fg), 0.1); + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(var(--nfd-onboarding-drawer-contrast), 0.1); } } } @@ -68,8 +68,8 @@ position: relative; width: 0; overflow: auto; - background: var(--nfd-onboarding-drawer-bg); - color: var(--nfd-onboarding-drawer-fg); + background: var(--nfd-onboarding-drawer-base); + color: var(--nfd-onboarding-drawer-contrast); transition: width 100ms linear; @include reduce-motion("transition"); @@ -116,7 +116,7 @@ overflow-x: hidden; overflow-y: auto; height: calc(100% - #{$header-height}); - background-color: var(--nfd-onboarding-drawer-bg); + background-color: var(--nfd-onboarding-drawer-base); -ms-overflow-style: none; scrollbar-width: none; @@ -127,10 +127,10 @@ &-inside { padding: 0 $grid-unit-20; - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); h2 { - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); } } @@ -156,11 +156,11 @@ &:focus { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); outline: 3px solid transparent; - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); } &:hover { - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); } &.active { @@ -174,7 +174,7 @@ } .components-button.nfd-onboarding-drawer__panel-back.is-tertiary { - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); opacity: 0.7; height: $button-size; margin-top: $grid-unit-30; @@ -199,7 +199,7 @@ margin: $grid-unit-30 0; h3 { - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); font-size: 20.28px; line-height: 1.2; padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-20; @@ -215,7 +215,7 @@ &-menu-item { display: block; width: 100%; - color: var(--nfd-onboarding-drawer-fg); + color: var(--nfd-onboarding-drawer-contrast); font-size: 14px; line-height: 20px; } diff --git a/src/OnboardingSPA/components/Header/stylesheet.scss b/src/OnboardingSPA/components/Header/stylesheet.scss index 2d541d0c4..97fe200c1 100644 --- a/src/OnboardingSPA/components/Header/stylesheet.scss +++ b/src/OnboardingSPA/components/Header/stylesheet.scss @@ -1,9 +1,9 @@ .nfd-onboarding-header { align-items: center; - background-color: var(--nfd-onboarding-header-bg); - color: var(--nfd-onboarding-header-fg); + background-color: var(--nfd-onboarding-header-base); + color: var(--nfd-onboarding-header-contrast); h2, h3, h4 { - color: var(--nfd-onboarding-header-fg); + color: var(--nfd-onboarding-header-contrast); } display: flex; height: $header-height; diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 570b55982..e43643cc8 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -156,9 +156,9 @@ body { --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-base); - --nfd-onboarding-drawer-fg: var(--nfd-onboarding-contrast); - --nfd-onboarding-content-bg: var(--nfd-onboarding-base); + --nfd-onboarding-drawer-base: var(--nfd-onboarding-base); + --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-contrast); + --nfd-onboarding-content-base: var(--nfd-onboarding-base); .nfd-onboarding-drawer__toggle { background-color: transparent; @@ -188,7 +188,7 @@ body { color: var(--nfd-onboarding-light-gray-4); &.active { - background-color: var(--nfd-onboarding-drawer-bg); + background-color: var(--nfd-onboarding-drawer-base); color: var(--nfd-onboarding-primary); border-color: var(--nfd-onboarding-primary); } diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index eedeef946..aca662d15 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -14,16 +14,16 @@ body { --nfd-onboarding-white: #fff; --nfd-onboarding-white-rgb: 255, 255, 255; --nfd-onboarding-black: #000; - --nfd-onboarding-header-bg: var(--nfd-onboarding-base); - --nfd-onboarding-header-fg: var(--nfd-onboarding-contrast); - --nfd-onboarding-content-bg: var(--nfd-onboarding-base); - --nfd-onboarding-content-fg: var(--nfd-onboarding-contrast); - --nfd-onboarding-drawer-bg: var(--nfd-onboarding-contrast); - --nfd-onboarding-drawer-fg: var(--nfd-onboarding-base); + --nfd-onboarding-header-base: var(--nfd-onboarding-base); + --nfd-onboarding-header-contrast: var(--nfd-onboarding-contrast); + --nfd-onboarding-content-base: var(--nfd-onboarding-base); + --nfd-onboarding-content-contrast: var(--nfd-onboarding-contrast); + --nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast); + --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base); --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-contrast); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); - --nfd-onboarding-footer-fg: var(--nfd-onboarding-contrast); - --nfd-onboarding-footer-bg: var(--nfd-onboarding-base); + --nfd-onboarding-footer-contrast: var(--nfd-onboarding-contrast); + --nfd-onboarding-footer-base: var(--nfd-onboarding-base); --nfd-onboarding-light-gray-5: #eee; &:not(.is-fullscreen-mode) { From 36e2ff9af401894fdb8ecdb7e4c3a9ea029142ca Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Fri, 28 Apr 2023 12:43:39 +0530 Subject: [PATCH 12/21] lint fix --- .../components/Content/stylesheet.scss | 6 +- .../components/Header/stylesheet.scss | 200 +++++++++--------- 2 files changed, 107 insertions(+), 99 deletions(-) diff --git a/src/OnboardingSPA/components/Content/stylesheet.scss b/src/OnboardingSPA/components/Content/stylesheet.scss index 0322ac421..49d63c26e 100644 --- a/src/OnboardingSPA/components/Content/stylesheet.scss +++ b/src/OnboardingSPA/components/Content/stylesheet.scss @@ -1,4 +1,4 @@ .interface-interface-skeleton__content { - background-color: var(--nfd-onboarding-content-base); - color: var(--nfd-onboarding-content-contrast); -} \ No newline at end of file + background-color: var(--nfd-onboarding-content-base); + color: var(--nfd-onboarding-content-contrast); +} diff --git a/src/OnboardingSPA/components/Header/stylesheet.scss b/src/OnboardingSPA/components/Header/stylesheet.scss index 97fe200c1..0d0b9da26 100644 --- a/src/OnboardingSPA/components/Header/stylesheet.scss +++ b/src/OnboardingSPA/components/Header/stylesheet.scss @@ -1,104 +1,112 @@ .nfd-onboarding-header { - align-items: center; - background-color: var(--nfd-onboarding-header-base); - color: var(--nfd-onboarding-header-contrast); - h2, h3, h4 { - color: var(--nfd-onboarding-header-contrast); - } - display: flex; - height: $header-height; - box-sizing: border-box; - width: 100%; - justify-content: space-between; - - padding-right: $grid-unit-20; - - body.is-fullscreen-mode & { - padding-left: $header-height; - transition: padding-left 20ms linear; - transition-delay: 80ms; - @include reduce-motion('transition'); - } - - &__start, - &__end { - display: flex; - } - - &__start { - align-items: center; - margin-left: $grid-unit-20; - } - - &__center { - display: flex; - align-items: center; - height: 100%; - flex-grow: 1; - justify-content: center; - min-width: 5px; - font-weight: 600; - font-size: 20px; - line-height: $grid-unit-30; - svg { - margin-right: $grid-unit-10; - } - } - - &__end { - justify-content: flex-end; - } - - &__step-navigation { - display: flex; - column-gap: $grid-unit-10; - } - - &__step-progress { - &:-webkit-progress-inner-element { - background-color: #999; - } - &:-moz-progress-bar, - &:-webkit-progress-bar { - background-color: var(--nfd-onboarding-primary); - } - } + align-items: center; + background-color: var(--nfd-onboarding-header-base); + color: var(--nfd-onboarding-header-contrast); + + h2, + h3, + h4 { + color: var(--nfd-onboarding-header-contrast); + } + display: flex; + height: $header-height; + box-sizing: border-box; + width: 100%; + justify-content: space-between; + + padding-right: $grid-unit-20; + + body.is-fullscreen-mode & { + padding-left: $header-height; + transition: padding-left 20ms linear; + transition-delay: 80ms; + + @include reduce-motion("transition"); + } + + &__start, + &__end { + display: flex; + } + + &__start { + align-items: center; + margin-left: $grid-unit-20; + } + + &__center { + display: flex; + align-items: center; + height: 100%; + flex-grow: 1; + justify-content: center; + min-width: 5px; + font-weight: 600; + font-size: 20px; + line-height: $grid-unit-30; + + svg { + margin-right: $grid-unit-10; + } + } + + &__end { + justify-content: flex-end; + } + + &__step-navigation { + display: flex; + column-gap: $grid-unit-10; + } + + &__step-progress { + + &:-webkit-progress-inner-element { + background-color: #999; + } + + &:-moz-progress-bar, + &:-webkit-progress-bar { + background-color: var(--nfd-onboarding-primary); + } + } } .nfd-onboarding-skeleton.is-drawer-open { - .nfd-onboarding-header { - padding-left: 0; - transition: padding-left 20ms linear; - transition-delay: 0ms; - @include reduce-motion("transition"); - } + + .nfd-onboarding-header { + padding-left: 0; + transition: padding-left 20ms linear; + transition-delay: 0ms; + + @include reduce-motion("transition"); + } } .navigation-buttons { - font-size: 14px; - line-height: 40px; - align-items: center; - letter-spacing: 0.8px; - display: flex !important; - justify-content: space-evenly; - border-radius: 2px !important; - padding: 20px 14px !important; - - &_back { - padding-right: 22px !important; - } - - &_next { - padding-left: 22px !important; - } - - &_finish { - padding-left: 22px !important; - } - - @media screen and (max-width: #{ ($break-medium) }) { - font-size: 13px; - padding: 15px 10px !important; - } -} + font-size: 14px; + line-height: 40px; + align-items: center; + letter-spacing: 0.8px; + display: flex !important; + justify-content: space-evenly; + border-radius: 2px !important; + padding: 20px 14px !important; + + &_back { + padding-right: 22px !important; + } + + &_next { + padding-left: 22px !important; + } + &_finish { + padding-left: 22px !important; + } + + @media screen and (max-width: #{ ($break-medium) }) { + font-size: 13px; + padding: 15px 10px !important; + } +} From fb45fd305721087b7592556ad492802c0fc19457 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 3 May 2023 13:57:28 +0530 Subject: [PATCH 13/21] fixed renaming css class issue --- src/OnboardingSPA/styles/_branding.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 3a30861ca..38123edbe 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -28,6 +28,10 @@ body { --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-dark: var(--wp-admin-theme-color-darker-20); --nfd-onboarding-border: 219, 219, 219; + --nfd-onboarding-base: var(--nfd-onboarding-light); + --nfd-onboarding-contrast: var(--nfd-onboarding-dark); + --nfd-onboarding-drawer-base: var(--nfd-onboarding-dark); + --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-light); --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light); --nfd-onboarding-loader-start: var(--nfd-onboarding-primary); @@ -66,6 +70,8 @@ body { --nfd-onboarding-light-gray-6: rgb(224, 224, 224); --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-contrast: #1d2a3b; + --nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast); + --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base); --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); @@ -119,6 +125,8 @@ body { --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-light-gray-6: rgb(224, 224, 224); --nfd-onboarding-contrast: #1e2044; + --nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast); + --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base); --nfd-onboarding-border: 245, 246, 248; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base); @@ -151,6 +159,8 @@ body { --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-light-gray-6: rgb(224, 224, 224); --nfd-onboarding-contrast: #000; + --nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast); + --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base); --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary-alt); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-tertiary-alt); From 263ebd13e72adcac2b1f03e54360af911d5a7137 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 3 May 2023 17:46:17 +0530 Subject: [PATCH 14/21] added new CSS vars and renamed some --- .../CheckboxListSkeleton/stylesheet.scss | 7 ++----- src/OnboardingSPA/components/Drawer/stylesheet.scss | 6 +++--- .../components/MiniPreview/stylesheet.scss | 9 ++++----- .../components/LearnMore/Skeleton/stylesheet.scss | 6 ++---- src/OnboardingSPA/components/Tooltip/stylesheet.scss | 3 +-- .../pages/Steps/DesignColors/stylesheet.scss | 2 +- .../pages/Steps/DesignHeaderMenu/stylesheet.scss | 2 +- .../Steps/DesignThemeStyles/Preview/stylesheet.scss | 2 +- .../pages/Steps/DesignTypography/stylesheet.scss | 2 +- .../pages/Steps/GetStarted/Welcome/stylesheet.scss | 2 +- .../pages/Steps/WhatNext/stylesheet.scss | 2 +- src/OnboardingSPA/styles/_branding.scss | 11 +++++++++++ 12 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss index 60c1e24ed..395cadece 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss @@ -1,6 +1,3 @@ -/*COLOR VARIABLES*/ -$grey-color: #f6f7f8; - .checkbox-skeleton-item { height: 45px; margin: 12px; @@ -10,7 +7,7 @@ $grey-color: #f6f7f8; cursor: not-allowed; width: clamp(15rem, 25vw, 35rem); box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295); - background: $grey-color; + background: var(--nfd-onboarding-light-gray-7); background-repeat: no-repeat; - background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-light-gray) 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, var(--nfd-onboarding-light-gray-7) 0%, var(--nfd-onboarding-light-gray) 20%, var(--nfd-onboarding-light-gray-7) 40%, var(--nfd-onboarding-light-gray-7) 100%); } diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 9a891a14a..03badebc4 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -281,7 +281,7 @@ height: 15px; display: flex; align-items: center; - background-color: #ccc; + background-color: var(--nfd-onboarding-light-gray-8); justify-content: space-between; border: 1px solid transparent; @@ -415,7 +415,7 @@ } &__text { - color: var(--nfd-onboarding-contrast); + color: var(--nfd-onboarding-black); font-size: 12px; font-weight: 700; line-height: 16px; @@ -601,7 +601,7 @@ height: 0; display: flex; align-items: center; - background-color: #ccc; + background-color: var(--nfd-onboarding-light-gray-8); justify-content: space-between; &--selected { diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss index 0ca8b0348..e27c7f05f 100644 --- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss @@ -1,5 +1,4 @@ $browser-dark: #cacaca; -$browser-light: var(--nfd-onboarding-light-gray-3); $link-browser-color: #007017; $title-browser-color: #3858e9; @@ -134,7 +133,7 @@ $title-browser-color: #3858e9; align-items: flex-end; &_before { - background-color: $browser-light; + background-color: var(--nfd-onboarding-light-gray-3); &-curve { opacity: 1; @@ -151,7 +150,7 @@ $title-browser-color: #3858e9; } &_after { - background-color: $browser-light; + background-color: var(--nfd-onboarding-light-gray-3); &-curve { opacity: 1; @@ -177,7 +176,7 @@ $title-browser-color: #3858e9; padding-right: 10px; align-items: center; border-radius: 8px 8px 0 0; - background-color: $browser-light; + background-color: var(--nfd-onboarding-light-gray-3); &-text { flex: 1; @@ -200,7 +199,7 @@ $title-browser-color: #3858e9; display: flex; align-items: center; justify-content: center; - background-color: $browser-light; + background-color: var(--nfd-onboarding-light-gray-3); &__icons { flex: 1; diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss index 178dc6758..3525cf234 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss @@ -1,5 +1,3 @@ -$grey-color: #f6f7f8; - .sidebar-skeleton { width: 100%; @@ -136,9 +134,9 @@ $grey-color: #f6f7f8; } .shimmer { - background: $grey-color; + background: var(--nfd-onboarding-light-gray-7); background-repeat: no-repeat; - background-image: linear-gradient(to right, $grey-color 0%, var(--nfd-onboarding-light-gray) 20%, $grey-color 40%, $grey-color 100%); + background-image: linear-gradient(to right, var(--nfd-onboarding-light-gray-7) 0%, var(--nfd-onboarding-light-gray) 20%, var(--nfd-onboarding-light-gray-7) 40%, var(--nfd-onboarding-light-gray-7) 100%); } .shimmer-1 { diff --git a/src/OnboardingSPA/components/Tooltip/stylesheet.scss b/src/OnboardingSPA/components/Tooltip/stylesheet.scss index b33e2c8ba..68c711cbd 100644 --- a/src/OnboardingSPA/components/Tooltip/stylesheet.scss +++ b/src/OnboardingSPA/components/Tooltip/stylesheet.scss @@ -1,5 +1,4 @@ -$tooltip-text-color: var(--nfd-onboarding-white); $tooltip-background-color: rgba(0, 0, 0, 0.75); $tooltip-margin: 35px; $tooltip-arrow-size: 6px; @@ -18,7 +17,7 @@ $tooltip-arrow-size: 6px; left: 50%; transform: translateX(-40%); padding: 6px; - color: $tooltip-text-color; + color: var(--nfd-onboarding-white); background: $tooltip-background-color; font-size: 12px; white-space: nowrap; diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss index fbf135cca..e7bf3054a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss @@ -13,7 +13,7 @@ height: 15px; display: flex; align-items: center; - background-color: #ccc; + background-color: var(--nfd-onboarding-light-gray-8); justify-content: space-between; border: 1px solid transparent; diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss index 4b15fe650..891a00c1b 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss @@ -13,7 +13,7 @@ height: 15px; display: flex; align-items: center; - background-color: #ccc; + background-color: var(--nfd-onboarding-light-gray-8); justify-content: space-between; border: 1px solid transparent; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss index d9d13f198..cae461124 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss @@ -63,7 +63,7 @@ height: 15px; display: flex; align-items: center; - background-color: #ccc; + background-color: var(--nfd-onboarding-light-gray-8); justify-content: space-between; border: 1px solid transparent; diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss index 2117eb11f..ae288f4f4 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss @@ -13,7 +13,7 @@ height: 15px; display: flex; align-items: center; - background-color: #ccc; + background-color: var(--nfd-onboarding-light-gray-8); justify-content: space-between; border: 1px solid transparent; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss index be2e9d3dd..fc5907c62 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss @@ -55,7 +55,7 @@ .components-tab-panel__tabs-item { justify-content: center; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--nfd-onboarding-light-gray-8); width: 100%; font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem); line-height: 1.5; diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss index d8f4930ea..692c4d678 100644 --- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss @@ -57,7 +57,7 @@ .components-tab-panel__tabs-item { justify-content: center; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--nfd-onboarding-light-gray-8); width: 100%; font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem); line-height: 1.5; diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 38123edbe..531b63647 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -25,6 +25,9 @@ body { --nfd-onboarding-light-gray-3: #f2f2f2; --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; + --nfd-onboarding-light-gray-6: rgb(224, 224, 224); + --nfd-onboarding-light-gray-7: #f6f7f8; + --nfd-onboarding-light-gray-8: #ccc; --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-dark: var(--wp-admin-theme-color-darker-20); --nfd-onboarding-border: 219, 219, 219; @@ -68,6 +71,8 @@ body { --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-light-gray-6: rgb(224, 224, 224); + --nfd-onboarding-light-gray-7: #f6f7f8; + --nfd-onboarding-light-gray-8: #ccc; --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-contrast: #1d2a3b; --nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast); @@ -124,6 +129,8 @@ body { --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-light-gray-6: rgb(224, 224, 224); + --nfd-onboarding-light-gray-7: #f6f7f8; + --nfd-onboarding-light-gray-8: #ccc; --nfd-onboarding-contrast: #1e2044; --nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast); --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base); @@ -158,6 +165,8 @@ body { --nfd-onboarding-light-gray-4: #a7a7a7; --nfd-onboarding-light-gray-5: #eee; --nfd-onboarding-light-gray-6: rgb(224, 224, 224); + --nfd-onboarding-light-gray-7: #f6f7f8; + --nfd-onboarding-light-gray-8: #ccc; --nfd-onboarding-contrast: #000; --nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast); --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base); @@ -192,6 +201,8 @@ body { --nfd-onboarding-light-gray-4: #5c5c5c; --nfd-onboarding-light-gray-5: var(--nfd-onboarding-base); --nfd-onboarding-light-gray-6: rgb(224, 224, 224); + --nfd-onboarding-light-gray-7: #f6f7f8; + --nfd-onboarding-light-gray-8: #ccc; --nfd-onboarding-light-gray-highlighted: #e2e9f4; --nfd-onboarding-contrast: #1d2a3b; --nfd-onboarding-border: 219, 219, 219; From 03c35725a4356f98a2c471316fbc2d988eab3f1f Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 3 May 2023 21:04:15 +0530 Subject: [PATCH 15/21] using css var instead of hex code --- .../components/LearnMore/HeadingWithDescription/stylesheet.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss index 176d9f14b..fa72f6781 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss @@ -5,7 +5,7 @@ &__heading { font-size: 14px; font-weight: 600; - color: #1e1e1e; + color: var(--wp-admin-theme-color-darker-20); line-height: 20px; } From 726685aebe66902e15d4d6ff72965b16666eb737 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 3 May 2023 22:22:32 +0530 Subject: [PATCH 16/21] renaming bg to base and fg to contrast --- src/OnboardingSPA/styles/_interface.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss index a212792ec..9a5554fd5 100644 --- a/src/OnboardingSPA/styles/_interface.scss +++ b/src/OnboardingSPA/styles/_interface.scss @@ -25,12 +25,12 @@ body { --nfd-onboarding-white: #fff; --nfd-onboarding-white-rgb: 255, 255, 255; --nfd-onboarding-black: #000; - --nfd-onboarding-header-bg: var(--nfd-onboarding-light); - --nfd-onboarding-header-fg: var(--nfd-onboarding-dark); - --nfd-onboarding-content-bg: var(--nfd-onboarding-light); - --nfd-onboarding-content-fg: var(--nfd-onboarding-dark); - --nfd-onboarding-drawer-bg: var(--nfd-onboarding-dark); - --nfd-onboarding-drawer-fg: var(--nfd-onboarding-light); - --nfd-onboarding-footer-fg: var(--nfd-onboarding-dark); - --nfd-onboarding-footer-bg: var(--nfd-onboarding-light); + --nfd-onboarding-header-base: var(--nfd-onboarding-light); + --nfd-onboarding-header-contrast: var(--nfd-onboarding-dark); + --nfd-onboarding-content-base: var(--nfd-onboarding-light); + --nfd-onboarding-content-contrast: var(--nfd-onboarding-dark); + --nfd-onboarding-drawer-base: var(--nfd-onboarding-dark); + --nfd-onboarding-drawer-contrast: var(--nfd-onboarding-light); + --nfd-onboarding-footer-contrast: var(--nfd-onboarding-dark); + --nfd-onboarding-footer-base: var(--nfd-onboarding-light); } From f41d334aadc929edc622224528a572bbfd0e35a0 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Thu, 4 May 2023 22:11:23 +0530 Subject: [PATCH 17/21] fix box shadow not working with CSS var --- .../components/CheckboxTemplate/CheckboxItem/stylesheet.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss index b13919c54..1eea99738 100644 --- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss +++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss @@ -91,7 +91,7 @@ &--selected { background: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2); border: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.6); - box-shadow: 0 2px 8px 2px rgba(var(--nfd-onboarding-light-gray-6), 0.8); + box-shadow: 0 2px 8px 2px rgba(224, 224, 224, 0.8); } &--shown { From 7f8f330a24cf6dcd56a1a4f0c603245a4f2ca2bf Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Fri, 5 May 2023 13:41:02 +0530 Subject: [PATCH 18/21] hardcoding sidebar subheading color since --wp-admin-theme-color-darker-20 is being overridden in different brands we cant use this for the text color in sidebar --- .../components/LearnMore/HeadingWithDescription/stylesheet.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss index fa72f6781..176d9f14b 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/HeadingWithDescription/stylesheet.scss @@ -5,7 +5,7 @@ &__heading { font-size: 14px; font-weight: 600; - color: var(--wp-admin-theme-color-darker-20); + color: #1e1e1e; line-height: 20px; } From 3622babc8509fcd4084b8ed64323dd64d9e4905f Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Mon, 8 May 2023 21:21:08 +0530 Subject: [PATCH 19/21] fixed issues reported in QA --- src/OnboardingSPA/components/App/index.js | 2 +- .../CheckboxTemplate/CheckboxItem/stylesheet.scss | 2 +- src/OnboardingSPA/components/MiniPreview/stylesheet.scss | 8 ++++---- .../Steps/GetStarted/GetStartedExperience/stylesheet.scss | 2 +- .../GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss | 2 +- .../SiteTypeSetup/SecondarySite/stylesheet.scss | 2 +- src/OnboardingSPA/styles/_branding.scss | 2 +- src/OnboardingSPA/styles/_interface.scss | 2 ++ 8 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/OnboardingSPA/components/App/index.js b/src/OnboardingSPA/components/App/index.js index e30870881..3b34627a1 100644 --- a/src/OnboardingSPA/components/App/index.js +++ b/src/OnboardingSPA/components/App/index.js @@ -237,7 +237,7 @@ const App = () => { return ( - \ + Date: Mon, 8 May 2023 21:22:51 +0530 Subject: [PATCH 20/21] missed updating in CSS var --- .../pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss index 6ff0300cc..0fc48734e 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss @@ -10,7 +10,7 @@ justify-content: flex-start; padding: 10px 190px 10px 15px; color: var(--nfd-onboarding-black); - background: var(--nfd-onboarding-light-gray); + background: var(--nfd-onboarding-base-gray); font-weight: 350; font-size: clamp(0.8rem, 1.5vw, 1.2rem); line-height: 1.5; From 9571a7cf8a00351bda1d5a7bbef11a60cb0be730 Mon Sep 17 00:00:00 2001 From: Abhijit Bhatnagar Date: Wed, 10 May 2023 12:11:27 +0530 Subject: [PATCH 21/21] fixed merge conflicts and CSS vars --- .../SiteTypeSetup/PrimarySite/stylesheet.scss | 4 ++-- .../SiteTypeSetup/SecondarySite/stylesheet.scss | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss index 1eaf36fd2..27d72cf86 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss @@ -70,7 +70,7 @@ &.chosenPrimaryCategory { background-color: var(--wp-admin-theme-color-darker-10); - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); } &-wrapper { @@ -95,7 +95,7 @@ &:hover { transition: all 0.2s ease-in; background-color: rgba($color: var(--wp-admin-theme-color-darker-10--rgb), $alpha: 0.7); - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); .nfd-card-pri-category-wrapper-icon { transition: all 0.2s ease-in; diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss index 6dc018d71..c45cbc502 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss @@ -56,23 +56,23 @@ margin: auto 0.2rem 1.15rem 1rem; background-position: center; color: var(--nfd-onboarding-black); - background-color: var(--nfd-onboarding-light-gray-3); + background-color: var(--nfd-onboarding-base-gray); &.chosenSecondaryCategory { background-color: var(--wp-admin-theme-color-darker-10); - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); } &:hover { transition: all 0.2s ease-in; background-color: rgba($color: var(--wp-admin-theme-color-darker-10--rgb), $alpha: 0.7); - color: var(--nfd-onboarding-light); + color: var(--nfd-onboarding-base); } &-wrapper { display: inline-flex; margin-bottom: 2rem; - border-bottom: 2px solid #00568c; + border-bottom: 2px solid var(--wp-admin-theme-color-darker-10); } } @@ -129,7 +129,7 @@ &-text { display: inline-block; - color: var(--nfd-onboarding-dark); + color: var(--nfd-onboarding-black); font-size: 0.85rem; font-weight: 400; margin: 0;