reorder layers (#2438)

This adjusts the layer order to allow the theme bridge to sit between foundations and component styles from v5.
iTwin · Feb 14, 2025 · 11c3c92 · 11c3c92
1 parent 6150fab
commit 11c3c92
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 16 deletions.
diff --git a/apps/css-workshop/public/assets/demo.css b/apps/css-workshop/public/assets/demo.css
@@ -107,7 +107,3 @@ ul {
   max-inline-size: revert;
   block-size: revert;
 }
-
-html {
-  background-color: revert;
-}
diff --git a/apps/css-workshop/src/components/ThemeBridge.tsx b/apps/css-workshop/src/components/ThemeBridge.tsx
@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Root as ITwinUIV5Root } from '@itwin/itwinui-react-v5/bricks';
+
+export const ThemeBridge = () => {
+  const themeBridgeEnabled = useThemeBridge();
+
+  if (!themeBridgeEnabled) {
+    return null;
+  }
+
+  // TODO: Synchronize colorScheme here instead of hardcoding 'dark'
+  return <ITwinUIV5Root colorScheme='dark' density='dense' synchronizeColorScheme />;
+};
+
+function useThemeBridge() {
+  const [enabled, setEnabled] = React.useState(false);
+
+  React.useEffect(() => {
+    const updateState = (event: CustomEvent) => {
+      setEnabled(event.detail);
+    };
+
+    // This theme-bridge event gets emitted by <theme-button>
+    window.addEventListener('theme-bridge', updateState);
+
+    return () => {
+      window.removeEventListener('theme-bridge', updateState);
+    };
+  }, []);
+
+  return enabled;
+}
diff --git a/apps/css-workshop/src/components/theme.js b/apps/css-workshop/src/components/theme.js
@@ -3,6 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 class ThemeButton extends HTMLElement {
+  #themeBridge = false;
+
   constructor() {
     super();
     const html = /* html */ `
@@ -141,11 +143,9 @@ class ThemeButton extends HTMLElement {
     ).checked = true;
 
     const root = document.body;
-    const v5Root = document.documentElement;
     const theme = prefersDark ? 'dark' : 'light';
 
     root.dataset.iuiTheme = theme;
-    v5Root.dataset.colorScheme = theme;
     root.dataset.iuiContrast = prefersHC ? 'high' : undefined;
     root.classList.toggle('iui-root', true);
   }
@@ -157,7 +157,7 @@ class ThemeButton extends HTMLElement {
     const isHighContrast = _theme.endsWith('-hc');
     const theme = isHighContrast ? _theme.split('-')[0] : _theme;
     root.dataset.iuiTheme = theme;
-    v5Root.dataset.colorScheme = theme;
+    if (this.#themeBridge) v5Root.dataset.colorScheme = theme;
     root.dataset.iuiContrast = isHighContrast ? 'high' : undefined;
     this.shadowRoot.querySelector('#theme-color-scheme').innerHTML = `
       :host {
@@ -175,7 +175,9 @@ class ThemeButton extends HTMLElement {
   };
 
   changeBridge = ({ target: { checked } }) => {
+    this.#themeBridge = checked;
     document.body.dataset.iuiBridge = checked ? 'true' : 'false';
+    window.dispatchEvent(new CustomEvent('theme-bridge', { detail: checked }));
   };
 
   connectedCallback() {

diff --git a/apps/css-workshop/src/pages/_layout.astro b/apps/css-workshop/src/pages/_layout.astro
@@ -1,5 +1,5 @@
 ---
-import { Root as ITwinUIV5Root } from '@itwin/itwinui-react-v5/bricks';
+import { ThemeBridge } from '../components/ThemeBridge.tsx';
 
 type Props = { title?: string };
 const { title } = Astro.props;
@@ -41,7 +41,7 @@ const slug = Astro.url.pathname.replace('/', '');
     <link rel='canonical' href=`https://itwin.github.io/iTwinUI/${slug}` />
 
     <style is:global>
-      @layer reset, kiwi;
+      @layer reset;
       @import '/assets/demo.css' layer(demo);
       @import '@itwin/itwinui-variables' layer(variables);
       @import '@itwin/itwinui-css/css/all.css';
@@ -54,7 +54,7 @@ const slug = Astro.url.pathname.replace('/', '');
   </head>
 
   <body class='iui-root' data-iui-theme>
-    <ITwinUIV5Root client:load colorScheme='dark' density='dense' />
+    <ThemeBridge client:load />
     <theme-button></theme-button>
     <slot />
   </body>

diff --git a/apps/react-workshop/.ladle/global.css b/apps/react-workshop/.ladle/global.css
@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-@layer reset, variables, itwinui, kiwi;
+@layer reset, variables, itwinui;
 
 @import '@itwin/itwinui-variables' layer(variables);
 

diff --git a/packages/itwinui-css/src/all.scss b/packages/itwinui-css/src/all.scss
@@ -2,8 +2,11 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use 'sass:meta';
 
-@layer itwinui.v3 {
+@layer itwinui.foundations.v3 {
   @include meta.load-css('global');
+}
+
+@layer itwinui.v3.components {
   @include meta.load-css('field');
   @include meta.load-css('alert/alert');
   @include meta.load-css('anchor/anchor');
@@ -58,6 +61,6 @@
   @include meta.load-css('workflow-diagram/workflow-diagram');
 }
 
-@layer itwinui.bridge {
+@layer itwinui.v3.bridge {
   @include meta.load-css('./bridge');
 }
diff --git a/packages/itwinui-react/src/styles.js/styles.module.css b/packages/itwinui-react/src/styles.js/styles.module.css
@@ -3,12 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-@layer reset, itwinui-v1, itwinui.v1, itwinui.v2, itwinui.v3, itwinui.bridge;
+@layer reset, itwinui-v1, itwinui.v1, itwinui.v2;
 
-@import '@itwin/itwinui-variables' layer(itwinui.v3);
+@import '@itwin/itwinui-variables' layer(itwinui.foundations.v3);
 @import '@itwin/itwinui-css';
 
-@layer itwinui {
+@layer itwinui.v3 {
   .iui-root * {
     /* When --_iui-width is set, inline-size will use it, otherwise it will be automatically reverted. */
     --_iui-width: initial;