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.
tektoncd · Sep 25, 2024 · 4304240 · 4304240
1 parent 8967eac
commit 4304240
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <link rel="icon" href="./src/images/favicon.png" />
     <title>Tekton Dashboard</title>
   </head>
-  <body>
+  <body class="tkn--dashboard">
     <div id="root"></div>
     <script type="module" src="./index.jsx"></script>
   </body>

diff --git a/packages/components/src/scss/_common.scss b/packages/components/src/scss/_common.scss
@@ -14,20 +14,20 @@ 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);
 }
 
 @mixin tkn--theme-dark {
   @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;
   }
 }