[TODO] example theme => usage

elastic · Jul 6, 2023 · 27bf19d · 27bf19d
1 parent 91b7c8e
commit 27bf19d
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/src-docs/src/views/theme/override_simple.tsx b/src-docs/src/views/theme/override_simple.tsx
@@ -1,20 +1,37 @@
 import React, { FunctionComponent, ReactNode } from 'react';
+import { css } from '@emotion/react';
+
 import { EuiCode } from '../../../../src/components/code';
 import { EuiText } from '../../../../src/components/text';
-import { EuiThemeProvider, useEuiTheme } from '../../../../src/services';
+import { EuiThemeProvider, UseEuiTheme } from '../../../../src/services';
 
-const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
-  const { euiTheme } = useEuiTheme();
+const staticCSS = ({ euiTheme, colorMode }: UseEuiTheme) => css`
+  background: ${euiTheme.colors.lightShade};
+  padding: ${euiTheme.size.xl};
+  color: ${colorMode === 'LIGHT'
+    ? euiTheme.colors.primary
+    : euiTheme.colors.accent};
+`;
 
+const Box: FunctionComponent<{ children: ReactNode }> = () => {
   return (
-    <EuiText
-      css={{
-        background: euiTheme.colors.lightShade,
-        padding: euiTheme.size.xl,
-      }}
-    >
-      <p>{children}</p>
-    </EuiText>
+    <>
+      <EuiText
+        css={({ euiTheme, colorMode }) => ({
+          background: euiTheme.colors.lightShade,
+          padding: euiTheme.size.xl,
+          color:
+            colorMode === 'LIGHT'
+              ? euiTheme.colors.primary
+              : euiTheme.colors.accent,
+        })}
+      >
+        <p>css object notation</p>
+      </EuiText>
+      <EuiText css={staticCSS}>
+        <p>css template notation</p>
+      </EuiText>
+    </>
   );
 };