From 97d38d3e07739d340b5858df394ddd7961825b76 Mon Sep 17 00:00:00 2001 From: Alan Greene Date: Tue, 24 Sep 2024 14:40:11 +0100 Subject: [PATCH] Ensure common styles for app theme don't leak to consumers Scope the light theme to ensure it only affects the Dashboard app, rather than applying to all consumers who haven't set the `tkn--theme-dark` class on some wrapper. Consumers may choose to use a different theme, e.g. `white` as their light theme so we need to make sure this is respected. --- index.html | 2 +- packages/components/src/scss/_common.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 2d37848a9..49980768c 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ Tekton Dashboard - +
diff --git a/packages/components/src/scss/_common.scss b/packages/components/src/scss/_common.scss index 2e58a0bd2..c451f7ca7 100644 --- a/packages/components/src/scss/_common.scss +++ b/packages/components/src/scss/_common.scss @@ -14,7 +14,7 @@ limitations under the License. @use '@carbon/react/scss/themes'; @use '@carbon/react/scss/theme' as *; -:root, .tkn--theme-light { +body.tkn--dashboard, .tkn--theme-light { @include theme(themes.$g10); } @@ -22,12 +22,12 @@ limitations under the License. @include theme(themes.$g90); } -.tkn--theme-dark { +body.tkn--dashboard.tkn--theme-dark, .tkn--theme-dark { @include tkn--theme-dark; } @media (prefers-color-scheme: dark) { - .tkn--theme-system { + body.tkn--dashboard.tkn--theme-system, .tkn--theme-system { @include tkn--theme-dark; } }