From 77ded4842060cfe8f7e5746cf53b74dd56e52371 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Thu, 20 Jul 2023 22:21:52 +0200 Subject: [PATCH 1/9] Populate CSS variables to match the design --- .../domain-transfer-domains/domains.tsx | 1 + .../domain-transfer-domains/styles.scss | 5 ---- .../domain-transfer-intro/intro.tsx | 7 +++++- .../domain-transfer-intro/styles.scss | 24 ++++++------------- 4 files changed, 14 insertions(+), 23 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/domains.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/domains.tsx index 9ca4aea353e184..0ff07c4fc67b3e 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/domains.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/domains.tsx @@ -218,6 +218,7 @@ const Domains: React.FC< Props > = ( { onSubmit } ) => { diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss index 33b42013b21f47..8f889cbaf199b6 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss @@ -4,6 +4,12 @@ $font-family: "SF Pro Text", $sans; $heading-font-family: "SF Pro Display", $sans; +:root { + --wp-components-color-accent: var(--studio-blue-50); + --wp-components-color-accent-darker-20: var(--studio-blue-60); + --wp-components-color-accent-darker-10: var(--studio-blue-60); +} + .domain-transfer { height: 100%; padding: 60px 0 0; @@ -23,26 +29,10 @@ $heading-font-family: "SF Pro Display", $sans; margin-bottom: 32px; .bulk-domain-transfer__cta { - justify-content: center; - color: var(--black-white-white, #fff); height: 48px; - /* stylelint-disable-next-line declaration-property-unit-allowed-list */ - border-radius: 0.25rem; - background: var(--blue-blue-50, #0675c4); - font-size: 0.875rem; width: 240px; font-weight: 500; - - &:hover { - background: var(--studio-blue-60); - } - - &:disabled { - /* stylelint-disable-next-line declaration-property-unit-allowed-list */ - border-radius: 0.25rem; - background: var(--gray-gray-5, #dcdcde); - opacity: 1; - } + justify-content: center; @media (max-width: $break-medium ) { width: 100%; From 0fd06fdb7ec852b3c678e2d5f4c3956a111b52e7 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 21 Jul 2023 11:03:05 +0200 Subject: [PATCH 2/9] More general solution --- .../stepper/declarative-flow/internals/global.scss | 8 ++++++++ .../steps-repository/domain-transfer-intro/styles.scss | 6 ------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss index 4e4d9c32aaf3a1..68cbc7a66f275d 100644 --- a/client/landing/stepper/declarative-flow/internals/global.scss +++ b/client/landing/stepper/declarative-flow/internals/global.scss @@ -8,6 +8,14 @@ @import "@automattic/onboarding/styles/variables"; @import "@automattic/components/src/styles/typography"; +// WordPress.org components no longer user blue-50 as primary color. +// This changes the primary color to blue-50 to match the WordPress.com colors. +:root { + --wp-components-color-accent: var(--studio-blue-50); + --wp-components-color-accent-darker-20: var(--studio-blue-60); + --wp-components-color-accent-darker-10: var(--studio-blue-60); +} + /** * General onboarding styling */ diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss index 8f889cbaf199b6..3299c120ef86d7 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss @@ -4,12 +4,6 @@ $font-family: "SF Pro Text", $sans; $heading-font-family: "SF Pro Display", $sans; -:root { - --wp-components-color-accent: var(--studio-blue-50); - --wp-components-color-accent-darker-20: var(--studio-blue-60); - --wp-components-color-accent-darker-10: var(--studio-blue-60); -} - .domain-transfer { height: 100%; padding: 60px 0 0; From d183d2aaafdaba1a10e58563f901764209ef912c Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 21 Jul 2023 11:12:47 +0200 Subject: [PATCH 3/9] Add border-radius to button --- .../internals/steps-repository/domain-transfer-intro/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss index 3299c120ef86d7..ba88646d493d52 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/styles.scss @@ -27,6 +27,7 @@ $heading-font-family: "SF Pro Display", $sans; width: 240px; font-weight: 500; justify-content: center; + border-radius: 4px; @media (max-width: $break-medium ) { width: 100%; From ffb92f947821863cbfd6169d6a08cadb72fdbd8a Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 21 Jul 2023 11:13:55 +0200 Subject: [PATCH 4/9] Fix comment --- client/landing/stepper/declarative-flow/internals/global.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss index 68cbc7a66f275d..88dbba413ae79d 100644 --- a/client/landing/stepper/declarative-flow/internals/global.scss +++ b/client/landing/stepper/declarative-flow/internals/global.scss @@ -8,8 +8,8 @@ @import "@automattic/onboarding/styles/variables"; @import "@automattic/components/src/styles/typography"; -// WordPress.org components no longer user blue-50 as primary color. -// This changes the primary color to blue-50 to match the WordPress.com colors. +// WordPress.org components no longer use blue-50 as the primary color. +// This changes the primary color to blue-50 to conform to the WordPress.com colors. :root { --wp-components-color-accent: var(--studio-blue-50); --wp-components-color-accent-darker-20: var(--studio-blue-60); From 05ae6dd2258eb273287cacc929a6f798028dcddd Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 21 Jul 2023 11:21:08 +0200 Subject: [PATCH 5/9] Remove extraneous props --- .../steps-repository/domain-transfer-intro/intro.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/intro.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/intro.tsx index 8ee8635c54ef07..0530fd58740843 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/intro.tsx +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-intro/intro.tsx @@ -63,12 +63,7 @@ const Intro: React.FC< Props > = ( { onSubmit } ) => { onSelect={ onSubmit } />
-
From a7177e3ce3dfbaac26dd8e2159da8f82ab99b84e Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 21 Jul 2023 12:03:05 +0200 Subject: [PATCH 6/9] Fix the root cause --- .../assets/stylesheets/_wp-components-overrides.scss | 12 ++++++++---- .../stepper/declarative-flow/internals/global.scss | 8 -------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/client/assets/stylesheets/_wp-components-overrides.scss b/client/assets/stylesheets/_wp-components-overrides.scss index 9c6f47b6443b42..3a034914d4172b 100644 --- a/client/assets/stylesheets/_wp-components-overrides.scss +++ b/client/assets/stylesheets/_wp-components-overrides.scss @@ -11,14 +11,16 @@ } /* @wordpress/components Button overrides */ -.components-button { +a.components-button, +button.components-button { &, &:hover:not(:disabled) { color: var(--color-neutral-70); } } -.components-button.is-primary { +a.components-button.is-primary, +button.components-button.is-primary { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverted); @@ -40,7 +42,8 @@ } } -.components-button.is-secondary { +a.components-button.is-secondary, +button.components-button.is-secondary { background-color: var(--color-surface); color: var(--color-neutral-70); box-shadow: inset 0 0 0 1px var(--color-neutral-10); @@ -64,7 +67,8 @@ } } -.components-button.is-tertiary { +a.components-button.is-tertiary, +button.components-button.is-tertiary { color: var(--color-accent); &:active:not(:disabled), diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss index 88dbba413ae79d..4e4d9c32aaf3a1 100644 --- a/client/landing/stepper/declarative-flow/internals/global.scss +++ b/client/landing/stepper/declarative-flow/internals/global.scss @@ -8,14 +8,6 @@ @import "@automattic/onboarding/styles/variables"; @import "@automattic/components/src/styles/typography"; -// WordPress.org components no longer use blue-50 as the primary color. -// This changes the primary color to blue-50 to conform to the WordPress.com colors. -:root { - --wp-components-color-accent: var(--studio-blue-50); - --wp-components-color-accent-darker-20: var(--studio-blue-60); - --wp-components-color-accent-darker-10: var(--studio-blue-60); -} - /** * General onboarding styling */ From 6789223f87c5ad81c598f67fa452f7e7edbfc7d4 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 21 Jul 2023 12:07:59 +0200 Subject: [PATCH 7/9] Revert "Fix the root cause" This reverts commit a7177e3ce3dfbaac26dd8e2159da8f82ab99b84e. --- .../assets/stylesheets/_wp-components-overrides.scss | 12 ++++-------- .../stepper/declarative-flow/internals/global.scss | 8 ++++++++ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/client/assets/stylesheets/_wp-components-overrides.scss b/client/assets/stylesheets/_wp-components-overrides.scss index 3a034914d4172b..9c6f47b6443b42 100644 --- a/client/assets/stylesheets/_wp-components-overrides.scss +++ b/client/assets/stylesheets/_wp-components-overrides.scss @@ -11,16 +11,14 @@ } /* @wordpress/components Button overrides */ -a.components-button, -button.components-button { +.components-button { &, &:hover:not(:disabled) { color: var(--color-neutral-70); } } -a.components-button.is-primary, -button.components-button.is-primary { +.components-button.is-primary { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverted); @@ -42,8 +40,7 @@ button.components-button.is-primary { } } -a.components-button.is-secondary, -button.components-button.is-secondary { +.components-button.is-secondary { background-color: var(--color-surface); color: var(--color-neutral-70); box-shadow: inset 0 0 0 1px var(--color-neutral-10); @@ -67,8 +64,7 @@ button.components-button.is-secondary { } } -a.components-button.is-tertiary, -button.components-button.is-tertiary { +.components-button.is-tertiary { color: var(--color-accent); &:active:not(:disabled), diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss index 4e4d9c32aaf3a1..88dbba413ae79d 100644 --- a/client/landing/stepper/declarative-flow/internals/global.scss +++ b/client/landing/stepper/declarative-flow/internals/global.scss @@ -8,6 +8,14 @@ @import "@automattic/onboarding/styles/variables"; @import "@automattic/components/src/styles/typography"; +// WordPress.org components no longer use blue-50 as the primary color. +// This changes the primary color to blue-50 to conform to the WordPress.com colors. +:root { + --wp-components-color-accent: var(--studio-blue-50); + --wp-components-color-accent-darker-20: var(--studio-blue-60); + --wp-components-color-accent-darker-10: var(--studio-blue-60); +} + /** * General onboarding styling */ From ff5d1f2bfb2b9b26fa9b46f56199e3ee1ba1cd39 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 21 Jul 2023 14:24:03 +0200 Subject: [PATCH 8/9] Revert "Revert "Fix the root cause"" This reverts commit 6789223f87c5ad81c598f67fa452f7e7edbfc7d4. --- .../assets/stylesheets/_wp-components-overrides.scss | 12 ++++++++---- .../stepper/declarative-flow/internals/global.scss | 8 -------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/client/assets/stylesheets/_wp-components-overrides.scss b/client/assets/stylesheets/_wp-components-overrides.scss index 9c6f47b6443b42..3a034914d4172b 100644 --- a/client/assets/stylesheets/_wp-components-overrides.scss +++ b/client/assets/stylesheets/_wp-components-overrides.scss @@ -11,14 +11,16 @@ } /* @wordpress/components Button overrides */ -.components-button { +a.components-button, +button.components-button { &, &:hover:not(:disabled) { color: var(--color-neutral-70); } } -.components-button.is-primary { +a.components-button.is-primary, +button.components-button.is-primary { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverted); @@ -40,7 +42,8 @@ } } -.components-button.is-secondary { +a.components-button.is-secondary, +button.components-button.is-secondary { background-color: var(--color-surface); color: var(--color-neutral-70); box-shadow: inset 0 0 0 1px var(--color-neutral-10); @@ -64,7 +67,8 @@ } } -.components-button.is-tertiary { +a.components-button.is-tertiary, +button.components-button.is-tertiary { color: var(--color-accent); &:active:not(:disabled), diff --git a/client/landing/stepper/declarative-flow/internals/global.scss b/client/landing/stepper/declarative-flow/internals/global.scss index 88dbba413ae79d..4e4d9c32aaf3a1 100644 --- a/client/landing/stepper/declarative-flow/internals/global.scss +++ b/client/landing/stepper/declarative-flow/internals/global.scss @@ -8,14 +8,6 @@ @import "@automattic/onboarding/styles/variables"; @import "@automattic/components/src/styles/typography"; -// WordPress.org components no longer use blue-50 as the primary color. -// This changes the primary color to blue-50 to conform to the WordPress.com colors. -:root { - --wp-components-color-accent: var(--studio-blue-50); - --wp-components-color-accent-darker-20: var(--studio-blue-60); - --wp-components-color-accent-darker-10: var(--studio-blue-60); -} - /** * General onboarding styling */ From f157e200a208fc658e346b77b8ec40fde84ce8a2 Mon Sep 17 00:00:00 2001 From: Omar Alshaker Date: Fri, 21 Jul 2023 14:30:20 +0200 Subject: [PATCH 9/9] Style disabled state in the step --- .../steps-repository/domain-transfer-domains/styles.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/styles.scss index 7a082aaef6d2d8..1b43ed060b08c7 100644 --- a/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/styles.scss +++ b/client/landing/stepper/declarative-flow/internals/steps-repository/domain-transfer-domains/styles.scss @@ -413,4 +413,10 @@ width: 150px; @include placeholder(); } + + button.components-button.bulk-domain-transfer__cta { + &:disabled { + background: var(--studio-gray-5); + } + } }