From 8d91d728c16626dc6d0af5568e0e15395f581113 Mon Sep 17 00:00:00 2001 From: Wes Ruvalcaba Date: Thu, 25 Mar 2021 11:39:51 -0400 Subject: [PATCH 01/14] fix: #1490: Make pfe-icon set CSS properties instead of overriding local vars Overriding local vars is overriding author's intentions in some cases, making pfe-icon set the CSS properties the vars effect instead of overriding the vars --- elements/pfe-icon/src/pfe-icon.scss | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/elements/pfe-icon/src/pfe-icon.scss b/elements/pfe-icon/src/pfe-icon.scss index 001c5d1456..c3ac37255f 100644 --- a/elements/pfe-icon/src/pfe-icon.scss +++ b/elements/pfe-icon/src/pfe-icon.scss @@ -31,7 +31,7 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, ( } :host { - --context: #{pfe-local(context)}; + --context: #{pfe-local(context)}; position: relative; display: inline-block; @@ -113,7 +113,9 @@ $sizing: ( @each $level in (critical, important, moderate, success, info, default) { :host([color="#{$level}"]) { - --pfe-icon--color: #{pfe-var(feedback--#{$level})}; + filter feFlood { + flood-color: #{pfe-var(feedback--#{$level})}; + } @if $level != "moderate" { --pfe-icon--context: dark; } @@ -130,11 +132,14 @@ $sizing: ( // May need Feedback Darkest colors too. :host([circled]:not([circled="false"])) { - --pfe-icon--BackgroundColor: #{pfe-local(color, $fallback: pfe-var(surface--lightest))}; - --pfe-icon--Color: #{pfe-broadcasted(text)}; - --pfe-icon--Padding: .5em; - --pfe-icon--BorderWidth: #{pfe-var(ui--border-width)}; - --pfe-icon--BorderColor: #{pfe-local(color, $fallback: pfe-var(surface--border))}; + padding: pfe-local(Padding, $fallback: .5em); + border-width: pfe-local(BorderWidth, $fallback: pfe-var(ui--border-width)); + border-color: pfe-local(color, $fallback: pfe-var(surface--border)); + background-color: pfe-local(BackgroundColor, pfe-local(color, $fallback: pfe-var(surface--lightest))); + + filter feFlood { + flood-color: pfe-local(Color, $fallback: pfe-broadcasted(text)); + } } :host(.load-failed) svg image { From 9633cde233db822920f96e7927cf8659245f4aff Mon Sep 17 00:00:00 2001 From: wesruv Date: Thu, 25 Mar 2021 12:34:47 -0400 Subject: [PATCH 02/14] Update elements/pfe-icon/src/pfe-icon.scss Co-authored-by: [ Cassondra ] --- elements/pfe-icon/src/pfe-icon.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/pfe-icon/src/pfe-icon.scss b/elements/pfe-icon/src/pfe-icon.scss index c3ac37255f..dc3d6f2560 100644 --- a/elements/pfe-icon/src/pfe-icon.scss +++ b/elements/pfe-icon/src/pfe-icon.scss @@ -114,7 +114,7 @@ $sizing: ( @each $level in (critical, important, moderate, success, info, default) { :host([color="#{$level}"]) { filter feFlood { - flood-color: #{pfe-var(feedback--#{$level})}; + flood-color: pfe-local(color, $fallback: pfe-var(feedback--#{$level})); } @if $level != "moderate" { --pfe-icon--context: dark; From 1987edcd2bfa20cdfd40754b0de2e9e879ae0514 Mon Sep 17 00:00:00 2001 From: wesruv Date: Thu, 25 Mar 2021 12:38:20 -0400 Subject: [PATCH 03/14] Update elements/pfe-icon/src/pfe-icon.scss Co-authored-by: [ Cassondra ] --- elements/pfe-icon/src/pfe-icon.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/pfe-icon/src/pfe-icon.scss b/elements/pfe-icon/src/pfe-icon.scss index dc3d6f2560..c2e9618412 100644 --- a/elements/pfe-icon/src/pfe-icon.scss +++ b/elements/pfe-icon/src/pfe-icon.scss @@ -138,7 +138,7 @@ $sizing: ( background-color: pfe-local(BackgroundColor, pfe-local(color, $fallback: pfe-var(surface--lightest))); filter feFlood { - flood-color: pfe-local(Color, $fallback: pfe-broadcasted(text)); + flood-color: pfe-local(color, $fallback: pfe-broadcasted(text)); } } From 6ec316eb0ade71ec4cafc85a98083050e8befe0f Mon Sep 17 00:00:00 2001 From: Wes Ruvalcaba Date: Fri, 26 Mar 2021 12:40:56 -0400 Subject: [PATCH 04/14] fix: #1490: Fixing bugs and updating more areas where local vars are hardcoded --- elements/pfe-icon/demo/index.html | 4 ++-- elements/pfe-icon/src/pfe-icon.scss | 32 ++++++++++++++++++++++++++--- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/elements/pfe-icon/demo/index.html b/elements/pfe-icon/demo/index.html index ed232655bb..204df4e777 100644 --- a/elements/pfe-icon/demo/index.html +++ b/elements/pfe-icon/demo/index.html @@ -125,8 +125,8 @@