Override default theme in docs

efoken · Dec 23, 2024 · caa64c0 · caa64c0
1 parent 38befa5
commit caa64c0
Show file tree

Hide file tree

Showing 34 changed files with 237 additions and 381 deletions.
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,10 +1,7 @@
-import { createTheme } from '@react-universal/core';
+import { AppRouterProdivder } from '@react-universal/next';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { font, theme } from './theme';
 import './globals.css';
-import { AppRouterProdivder } from '@react-universal/next';
-
-const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -18,21 +15,8 @@ export default function RootLayout({
 }>) {
   return (
     <html suppressHydrationWarning lang="en">
-      <body className={inter.className}>
-        <AppRouterProdivder
-          theme={createTheme({
-            fonts: {
-              body: {
-                family: inter.style.fontFamily,
-              } as any,
-              heading: {
-                family: inter.style.fontFamily,
-              } as any,
-            },
-          })}
-        >
-          {children}
-        </AppRouterProdivder>
+      <body className={font.className}>
+        <AppRouterProdivder theme={theme}>{children}</AppRouterProdivder>
       </body>
     </html>
   );

diff --git a/docs/app/theme.ts b/docs/app/theme.ts
@@ -0,0 +1,53 @@
+import { createTheme } from '@react-universal/core';
+import type { ThemeColor } from '@react-universal/core';
+import { Inter } from 'next/font/google';
+
+export const font = Inter({ subsets: ['latin'] });
+
+export const theme = createTheme({
+  colors: {
+    black: '#09090b',
+    white: '#ffffff',
+    background: {
+      default: { _light: '#fff', _dark: '#000' },
+      muted: { _light: '#f4f4f5', _dark: '#18181b' },
+    },
+    text: {
+      default: { _light: '#09090b', _dark: '#fafafa' },
+      muted: { _light: '#52525b', _dark: '#a1a1aa' },
+    },
+    border: {
+      default: { _light: '#e4e4e7', _dark: '#27272a' },
+      muted: { _light: '#f4f4f5', _dark: '#18181b' },
+    },
+  },
+  fonts: {
+    body: {
+      family: font.style.fontFamily,
+    },
+    heading: {
+      family: font.style.fontFamily,
+    },
+  },
+});
+
+declare module '@react-universal/core' {
+  export interface Theme {
+    colors: {
+      black: ThemeColor;
+      white: ThemeColor;
+      background: {
+        default: ThemeColor;
+        muted: ThemeColor;
+      };
+      text: {
+        default: ThemeColor;
+        muted: ThemeColor;
+      };
+      border: {
+        default: ThemeColor;
+        muted: ThemeColor;
+      };
+    };
+  }
+}
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "format": "biome format --write . && prettier --log-level error --write \"**/*.{md,mdx,yml}\"",
     "lint": "biome lint .",
     "postinstall": "manypkg check",
-    "storybook": "yarn workspace @react-universal/vite-plugin build && sb dev",
+    "storybook": "yarn workspace @react-universal/vite-plugin dev && sb dev",
     "test": "vitest",
     "typecheck": "yarn tsc && yarn workspaces foreach -Apt run typecheck"
   },

diff --git a/packages/components/src/Button/Button.stories.tsx b/packages/components/src/Button/Button.stories.tsx
@@ -14,8 +14,8 @@ export const Default: Story = {
   args: {
     children: <Text>Button</Text>,
     sx: {
-      bgColor: '#ddd',
-      borderRadius: '1',
+      bgColor: 'background.muted',
+      borderRadius: 2,
       p: 1,
     },
   },

diff --git a/packages/components/src/Heading/Heading.tsx b/packages/components/src/Heading/Heading.tsx
@@ -29,7 +29,7 @@ const HeadingRoot = styled(Text, {
 }));
 
 export const Heading = forwardRef<HTMLHeadingElement & HeadingMethods, HeadingProps>(
-  (props, ref) => <HeadingRoot ref={ref} aria-level={2} role="heading" {...props} />,
+  (props: HeadingProps, ref) => <HeadingRoot ref={ref} aria-level={2} role="heading" {...props} />,
 ) as HeadingType;
 
 Heading.displayName = 'Heading';
diff --git a/packages/components/src/Image/Image.tsx b/packages/components/src/Image/Image.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import {
+  type ForwardedProps,
   forwardedProps,
   getLocaleDirection,
   styled,
   useElementLayout,
   usePlatformMethods,
-  type ForwardedProps,
 } from '@react-universal/core';
 import type { AnyObject } from '@react-universal/utils';
 import { noop, pick } from '@react-universal/utils';
@@ -49,7 +49,7 @@ const ImageRoot = styled('img', {
 });
 
 export const Image = forwardRef<HTMLImageElement & ImageMethods, ImageProps>(
-  ({ dir, onError, onLayout, onLoad, onProgress, onPartialLoad, ...props }, ref) => {
+  ({ dir, onError, onLayout, onLoad, onProgress, onPartialLoad, ...props }: ImageProps, ref) => {
     const hostRef = useRef<HTMLImageElement>(null);
 
     useElementLayout(hostRef, onLayout);

diff --git a/packages/components/src/Link/Link.tsx b/packages/components/src/Link/Link.tsx
@@ -12,7 +12,7 @@ const LinkRoot = styled(Text, {
 })();
 
 export const Link = forwardRef<HTMLAnchorElement & TextMethods, LinkProps>(
-  ({ download, rel, target, ...props }, ref) => (
+  ({ download, rel, target, ...props }: LinkProps, ref) => (
     <LinkRoot
       ref={ref}
       hrefAttrs={{

diff --git a/packages/components/src/Modal/Modal.native.tsx b/packages/components/src/Modal/Modal.native.tsx
@@ -56,7 +56,7 @@ export const Modal = forwardRef<any, ModalProps>(
       role,
       style,
       ...props
-    },
+    }: ModalProps,
     ref,
   ) => {
     const handleAccessibilityEscape = () => {

diff --git a/packages/components/src/Modal/Modal.tsx b/packages/components/src/Modal/Modal.tsx
@@ -78,7 +78,7 @@ export const Modal = forwardRef<HTMLDialogElement & ModalMethods, ModalProps>(
       open,
       role,
       ...props
-    },
+    }: ModalProps,
     ref,
   ) => {
     const hostRef = useRef<HTMLDialogElement>(null);

diff --git a/packages/components/src/Popover/Popover.native.tsx b/packages/components/src/Popover/Popover.native.tsx
@@ -33,7 +33,7 @@ export const Popover = forwardRef<any, PopoverProps>(
       strategy: _strategy,
       style,
       ...props
-    },
+    }: PopoverProps,
     ref,
   ) => {
     const hostRef = useRef<RNView>(null);

diff --git a/packages/components/src/Popover/Popover.stories.tsx b/packages/components/src/Popover/Popover.stories.tsx
@@ -49,7 +49,12 @@ export const Default: Story = {
 
     return (
       <>
-        <Button aria-describedby={id} type="button" onPress={handlePress}>
+        <Button
+          aria-describedby={id}
+          type="button"
+          sx={{ bgColor: 'background.muted', borderRadius: 2, p: 1 }}
+          onPress={handlePress}
+        >
           <Text>Toggle Popup</Text>
         </Button>
         <Popover {...args} anchor={anchor} id={id} open={open} />

diff --git a/packages/components/src/Popover/Popover.tsx b/packages/components/src/Popover/Popover.tsx
@@ -56,7 +56,7 @@ export const Popover = forwardRef<HTMLDivElement & PopoverMethods, PopoverProps>
       role = 'tooltip',
       strategy: _strategy = 'absolute',
       ...props
-    },
+    }: PopoverProps,
     ref,
   ) => {
     const hostRef = useRef<HTMLDivElement>(null);

diff --git a/packages/components/src/PressAwayListener/PressAwayListener.tsx b/packages/components/src/PressAwayListener/PressAwayListener.tsx
diff --git a/packages/components/src/PressAwayListener/PressAwayListener.types.ts b/packages/components/src/PressAwayListener/PressAwayListener.types.ts
diff --git a/packages/components/src/ScrollView/ScrollView.native.tsx b/packages/components/src/ScrollView/ScrollView.native.tsx
@@ -39,7 +39,7 @@ export const ScrollView = forwardRef<any, ScrollViewProps>(
       role,
       style,
       ...props
-    },
+    }: ScrollViewProps,
     ref,
   ) => (
     <ScrollViewRoot

diff --git a/packages/components/src/ScrollView/ScrollView.tsx b/packages/components/src/ScrollView/ScrollView.tsx
@@ -131,7 +131,7 @@ export const ScrollView = forwardRef<HTMLElement & ScrollViewMethods, ScrollView
       stickyHeaderIndices,
       style,
       ...props
-    },
+    }: ScrollViewProps,
     ref,
   ) => {
     const scrollNodeRef = useRef<React.ElementRef<typeof View>>();
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,7 +56,7 @@ export const Modal = forwardRef<any, ModalProps>( @@
           role,
           style,
           ...props
-        },
+        }: ModalProps,
         ref,
       ) => {
         const handleAccessibilityEscape = () => {
@@ Expand Down @@