From e4d8c3b1d02125ad2b4e5fb1d9af54122a3bb50f Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 11 Apr 2022 10:04:26 +0100 Subject: [PATCH 1/2] Fallback icons to currentColor --- .../consul-ui/app/styles/base/icons/base-keyframes.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss index dab94ecee..37d328afc 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss @@ -8,12 +8,12 @@ *::before { animation-name: var(--icon-name-start, var(--icon-name)), var(--icon-size-start, var(--icon-size, icon-000)); - background-color: var(--icon-color-start, var(--icon-color)); + background-color: var(--icon-color-start, var(--icon-color, currentColor)); } *::after { animation-name: var(--icon-name-end, var(--icon-name)), var(--icon-size-end, var(--icon-size, icon-000)); - background-color: var(--icon-color-end, var(--icon-color)); + background-color: var(--icon-color-end, var(--icon-color, currentColor)); } [style*='--icon-color-start']::before { From 42a0f204ac5c9798288675461ed20f497041f034 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 11 Apr 2022 10:05:02 +0100 Subject: [PATCH 2/2] Fixup any psuedo elements that don't need currentColor --- ui/packages/consul-ui/app/components/breadcrumbs/skin.scss | 1 + ui/packages/consul-ui/app/components/csv-list/index.scss | 1 + ui/packages/consul-ui/app/components/empty-state/skin.scss | 2 +- .../consul-ui/app/components/main-nav-vertical/skin.scss | 1 + .../consul-ui/app/components/secret-button/layout.scss | 1 + ui/packages/consul-ui/app/components/tooltip-panel/skin.scss | 2 +- ui/packages/consul-ui/app/components/tooltip/index.scss | 5 +++++ 7 files changed, 11 insertions(+), 2 deletions(-) diff --git a/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss b/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss index 966cf886e..55a32e5c9 100644 --- a/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss +++ b/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss @@ -8,6 +8,7 @@ } %crumbs::before { text-decoration: none; + background-color: var(--transparent); } %breadcrumb-milestone::before { @extend %with-chevron-left-mask, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/csv-list/index.scss b/ui/packages/consul-ui/app/components/csv-list/index.scss index 4c64a7c87..a5141fe18 100644 --- a/ui/packages/consul-ui/app/components/csv-list/index.scss +++ b/ui/packages/consul-ui/app/components/csv-list/index.scss @@ -14,4 +14,5 @@ content: var(--csv-list-separator); vertical-align: initial; margin-right: 0.3em; + background-color: var(--transparent); } diff --git a/ui/packages/consul-ui/app/components/empty-state/skin.scss b/ui/packages/consul-ui/app/components/empty-state/skin.scss index 9e09d9368..22d9fcae4 100644 --- a/ui/packages/consul-ui/app/components/empty-state/skin.scss +++ b/ui/packages/consul-ui/app/components/empty-state/skin.scss @@ -23,7 +23,7 @@ %empty-state[class*='status-'] header::before { @extend %as-pseudo; } -%empty-state header::before { +%empty-state[class*='status-'] header::before { @extend %with-alert-circle-outline-mask; } %empty-state.status-404 header::before { diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss index e1930d8bf..abd048df9 100644 --- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss +++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss @@ -47,6 +47,7 @@ display: block; margin-top: -0.5rem; margin-bottom: 0.5rem; + background-color: var(--transparent); } %main-nav-vertical-popover-menu-trigger { border: var(--decor-border-100); diff --git a/ui/packages/consul-ui/app/components/secret-button/layout.scss b/ui/packages/consul-ui/app/components/secret-button/layout.scss index 1393e5efe..fe223180e 100644 --- a/ui/packages/consul-ui/app/components/secret-button/layout.scss +++ b/ui/packages/consul-ui/app/components/secret-button/layout.scss @@ -17,6 +17,7 @@ display: inline; visibility: visible; content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■'; + background-color: var(--transparent); } %secret-button input:checked ~ em::before { display: none; diff --git a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss index 619da5172..7e65c6292 100644 --- a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss +++ b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss @@ -6,7 +6,7 @@ @extend %as-pseudo; width: 12px; height: 12px; - background: white; + background-color: rgb(var(--tone-gray-000)); border-top: 1px solid rgb(var(--tone-gray-300)); border-right: 1px solid rgb(var(--tone-gray-300)); transform: rotate(-45deg); diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss index 333faed35..1f8802a11 100644 --- a/ui/packages/consul-ui/app/components/tooltip/index.scss +++ b/ui/packages/consul-ui/app/components/tooltip/index.scss @@ -45,6 +45,7 @@ &::before { border-color: var(--transparent); border-style: solid; + background-color: var(--transparent); } } @@ -52,23 +53,27 @@ &::before { border-width: var(--size) var(--size) 0; border-top-color: initial; + background-color: var(--transparent); } } %tooltip-tail-bottom { &::before { border-width: 0 var(--size) var(--size); border-bottom-color: initial; + background-color: var(--transparent); } } %tooltip-tail-left { &::before { border-width: var(--size) 0 var(--size) var(--size); border-left-color: initial; + background-color: var(--transparent); } } %tooltip-tail-right { &::before { border-width: var(--size) var(--size) var(--size) 0; border-right-color: initial; + background-color: var(--transparent); } }