theme context

microsoft · Apr 26, 2022 · 938e7e8 · 938e7e8
1 parent 64f35a8
commit 938e7e8
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 55 deletions.
diff --git a/packages/devtools/src/DefaultMessage.tsx b/packages/devtools/src/DefaultMessage.tsx
@@ -12,7 +12,6 @@ const useStyles = makeStyles({
     textDecorationLine: 'none',
     position: 'relative',
     top: '-5px',
-    zIndex: 1,
   },
   text: {
     '::after': {
@@ -25,6 +24,7 @@ const useStyles = makeStyles({
       position: 'relative',
       top: 'calc(-100%)',
       left: '-10px',
+      zIndex: -1,
       ...shorthands.border('1px', 'dotted', 'deepskyblue'),
     },
   },

diff --git a/packages/devtools/src/HighlightedCSS.tsx b/packages/devtools/src/HighlightedCSS.tsx
@@ -5,47 +5,51 @@ import * as React from 'react';
 
 import { makeStyles, shorthands } from '@griffel/react';
 
-import { browserTheme, DARK_THEME_COLOR_TOKENS, LIGHT_THEME_COLOR_TOKENS } from './colorTokens';
+import { DARK_THEME_COLOR_TOKENS, LIGHT_THEME_COLOR_TOKENS } from './colorTokens';
+import { useThemeContext } from './ThemeContext';
+import type { BrowserTheme } from './types';
 
-const colortokens = browserTheme === 'dark' ? DARK_THEME_COLOR_TOKENS : LIGHT_THEME_COLOR_TOKENS;
-const customTheme: PrismTheme = {
-  plain: {
-    color: colortokens.foreground,
-  },
-  styles: [
-    ...(browserTheme === 'dark' ? themeDark.styles : themeLight.styles),
-    {
-      types: ['keyword', 'atrule'],
-      style: {
-        color: colortokens.foreground,
-      },
+function getCustomTheme(theme?: BrowserTheme): PrismTheme {
+  const colortokens = theme === 'dark' ? DARK_THEME_COLOR_TOKENS : LIGHT_THEME_COLOR_TOKENS;
+  return {
+    plain: {
+      color: colortokens.foreground,
     },
-    {
-      types: ['rule'],
-      style: {
-        color: colortokens.cssAtRule,
+    styles: [
+      ...(theme === 'dark' ? themeDark.styles : themeLight.styles),
+      {
+        types: ['keyword', 'atrule'],
+        style: {
+          color: colortokens.foreground,
+        },
       },
-    },
-    {
-      types: ['property'],
-      style: {
-        color: colortokens.cssProperty,
+      {
+        types: ['rule'],
+        style: {
+          color: colortokens.cssAtRule,
+        },
       },
-    },
-    {
-      types: ['punctuation'],
-      style: {
-        color: colortokens.cssPunctuation,
+      {
+        types: ['property'],
+        style: {
+          color: colortokens.cssProperty,
+        },
       },
-    },
-    {
-      types: ['selector'],
-      style: {
-        color: colortokens.cssSelector,
+      {
+        types: ['punctuation'],
+        style: {
+          color: colortokens.cssPunctuation,
+        },
       },
-    },
-  ],
-};
+      {
+        types: ['selector'],
+        style: {
+          color: colortokens.cssSelector,
+        },
+      },
+    ],
+  };
+}
 
 const useColorIndicatorStyles = makeStyles({
   colorIndicator: {
@@ -59,6 +63,9 @@ const useColorIndicatorStyles = makeStyles({
 });
 
 export const HighlightedCSS: React.FC<{ code: string }> = ({ code }) => {
+  const theme = useThemeContext();
+  const customTheme = React.useMemo(() => getCustomTheme(theme), [theme]);
+
   const { colorIndicator } = useColorIndicatorStyles();
 
   return (

diff --git a/packages/devtools/src/SlotCSSRules.tsx b/packages/devtools/src/SlotCSSRules.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 
-import { browserTheme, DARK_THEME_COLOR_TOKENS, LIGHT_THEME_COLOR_TOKENS } from './colorTokens';
+import { DARK_THEME_COLOR_TOKENS, LIGHT_THEME_COLOR_TOKENS } from './colorTokens';
 import { getMonolithicCSSRules } from './getMonolithicCSSRules';
 import { MonolithicRulesView } from './MonolithicRulesView';
+import { useThemeContext } from './ThemeContext';
 import { useViewContext } from './ViewContext';
 
 import type { AtomicRules } from './types';
@@ -29,8 +30,9 @@ const useStyles = makeStyles({
 export const SlotCSSRules: React.FC<{ slot: string; atomicRules: AtomicRules[] }> = ({ slot, atomicRules }) => {
   const rules = React.useMemo(() => getMonolithicCSSRules(atomicRules), [atomicRules]);
 
+  const theme = useThemeContext();
   const classes = useStyles();
-  const slotNameClassName = mergeClasses(classes.slotName, browserTheme === 'dark' && classes.slotNameDark);
+  const slotNameClassName = mergeClasses(classes.slotName, theme === 'dark' && classes.slotNameDark);
 
   const { setHighlightedClass } = useViewContext();
   const undoHighlight = () => setHighlightedClass('');

diff --git a/packages/devtools/src/ThemeContext.ts b/packages/devtools/src/ThemeContext.ts
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { BrowserTheme } from './types';
+
+export const ThemeContext = React.createContext<BrowserTheme>('light');
+
+export function useThemeContext() {
+  return React.useContext(ThemeContext);
+}
diff --git a/packages/devtools/src/colorTokens.ts b/packages/devtools/src/colorTokens.ts
@@ -1,7 +1,5 @@
 import type { ColorTokens } from './types';
 
-export const browserTheme = chrome.devtools?.panels?.themeName === 'dark' ? 'dark' : 'light';
-
 export const LIGHT_THEME_COLOR_TOKENS: ColorTokens = {
   foreground: 'rgb(34, 34, 34)',
   background: 'white',

diff --git a/packages/devtools/src/index.tsx b/packages/devtools/src/index.tsx
@@ -1,20 +1,16 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { makeStyles, mergeClasses } from '@griffel/react';
 
-import { browserTheme, DARK_THEME_COLOR_TOKENS, LIGHT_THEME_COLOR_TOKENS } from './colorTokens';
+import { makeStyles } from '@griffel/react';
+
+import { DARK_THEME_COLOR_TOKENS, LIGHT_THEME_COLOR_TOKENS } from './colorTokens';
 import { DefaultMessage } from './DefaultMessage';
 import { FlattenView } from './FlattenView';
+import { ThemeContext } from './ThemeContext';
 import { useMakeStylesState } from './useMakeStylesState';
 
 const useStyles = makeStyles({
   root: {
-    width: '100%',
-    height: '100%',
-    minHeight: '100vh',
-    position: 'absolute',
-    top: 0,
-    left: 0,
     color: LIGHT_THEME_COLOR_TOKENS.foreground,
     backgroundColor: LIGHT_THEME_COLOR_TOKENS.background,
   },
@@ -28,14 +24,22 @@ const DevTools: React.FC = () => {
   const state = useMakeStylesState();
 
   const classes = useStyles();
-  const rootClassName = mergeClasses(classes.root, browserTheme === 'dark' && classes.rootDark);
+  const browserTheme = chrome.devtools?.panels?.themeName === 'dark' ? 'dark' : 'light';
+
+  React.useLayoutEffect(() => {
+    if (browserTheme === 'dark') {
+      document.body.classList.add(...classes.rootDark.split(' '));
+    } else {
+      document.body.classList.add(...classes.root.split(' '));
+    }
+  }, []);
 
   let children = <DefaultMessage />;
   if (state && Object.keys(state).length > 0) {
     children = <FlattenView debugResultRoot={state} />;
   }
 
-  return <div className={rootClassName}>{children}</div>;
+  return <ThemeContext.Provider value={browserTheme}>{children}</ThemeContext.Provider>;
 };
 
 ReactDOM.render(

diff --git a/packages/devtools/src/stories/FlattenView.stories.tsx b/packages/devtools/src/stories/FlattenView.stories.tsx
@@ -1,7 +1,13 @@
 import * as React from 'react';
-import { FlattenView } from '../FlattenView';
+import { Story } from '@storybook/react';
 import type { DebugResult } from '@griffel/core';
 
+import { DARK_THEME_COLOR_TOKENS, LIGHT_THEME_COLOR_TOKENS } from '../colorTokens';
+import { FlattenView } from '../FlattenView';
+import { ThemeContext } from '../ThemeContext';
+
+import type { BrowserTheme } from '../types';
+
 const debugResultRoot: DebugResult = {
   sequenceHash: '___29aowz0_1rg0tlg',
   direction: 'ltr',
@@ -93,12 +99,31 @@ const debugResultRoot: DebugResult = {
   ],
 };
 
-export const Default = () => (
-  <div style={{ border: '3px solid gray', width: 400 }}>
-    <FlattenView debugResultRoot={debugResultRoot} />
-  </div>
+export const Default: Story<{ theme: BrowserTheme }> = ({ theme }) => (
+  <ThemeContext.Provider value={theme}>
+    <div
+      style={{
+        border: '3px solid gray',
+        width: 400,
+        color: theme === 'dark' ? DARK_THEME_COLOR_TOKENS.foreground : LIGHT_THEME_COLOR_TOKENS.foreground,
+        backgroundColor: theme === 'dark' ? DARK_THEME_COLOR_TOKENS.background : LIGHT_THEME_COLOR_TOKENS.background,
+      }}
+    >
+      <FlattenView debugResultRoot={debugResultRoot} />
+    </div>
+  </ThemeContext.Provider>
 );
 
+Default.args = {
+  theme: 'light',
+};
+
 export default {
   title: 'FlattenView',
+  argTypes: {
+    theme: {
+      options: ['light', 'dark'],
+      control: { type: 'radio' },
+    },
+  },
 };