From e49eef3291710175133535900898b05bd93a67ae Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Sat, 17 Apr 2021 12:24:07 +0200
Subject: [PATCH 1/2] feat: add light theme

---
 .changeset/curly-badgers-roll.md              | 10 ++++
 packages/leva/src/index.ts                    |  2 +
 packages/leva/src/styles/index.ts             |  1 +
 packages/leva/src/styles/themes/light.ts      | 15 ++++++
 .../leva/stories/panel-options.stories.tsx    | 47 ++++++++++++++++++-
 5 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/curly-badgers-roll.md
 create mode 100644 packages/leva/src/styles/themes/light.ts

diff --git a/.changeset/curly-badgers-roll.md b/.changeset/curly-badgers-roll.md
new file mode 100644
index 00000000..d95baae3
--- /dev/null
+++ b/.changeset/curly-badgers-roll.md
@@ -0,0 +1,10 @@
+---
+'leva': patch
+---
+
+Add light theme.
+
+```tsx
+import { lightTheme, LevaPanel } from 'leva'
+;<LevaPanel theme={lightTheme} />
+```
diff --git a/packages/leva/src/index.ts b/packages/leva/src/index.ts
index 536dd29a..caec7d43 100644
--- a/packages/leva/src/index.ts
+++ b/packages/leva/src/index.ts
@@ -42,3 +42,5 @@ export { levaStore, useCreateStore } from './store'
 export * from './helpers'
 
 export { LevaInputs }
+
+export { lightTheme, LevaCustomTheme } from './styles'
diff --git a/packages/leva/src/styles/index.ts b/packages/leva/src/styles/index.ts
index 3f10bc8c..03fbe103 100644
--- a/packages/leva/src/styles/index.ts
+++ b/packages/leva/src/styles/index.ts
@@ -24,3 +24,4 @@ export function useTh<C extends keyof FullTheme>(category: C, key: keyof FullThe
 }
 
 export * from './stitches.config'
+export { lightTheme } from './themes/light'
diff --git a/packages/leva/src/styles/themes/light.ts b/packages/leva/src/styles/themes/light.ts
new file mode 100644
index 00000000..62c422ff
--- /dev/null
+++ b/packages/leva/src/styles/themes/light.ts
@@ -0,0 +1,15 @@
+import { LevaCustomTheme } from '..'
+
+export const lightTheme: LevaCustomTheme = {
+  colors: {
+    elevation1: '#f2f2f2',
+    elevation2: '#ffffff',
+    elevation3: '#f7f7f7',
+    accent1: '#ccc',
+    accent2: '#e6e6e6',
+    accent3: '#ccc',
+    highlight1: '#b3b3b3',
+    highlight2: '#000',
+    highlight3: '#000',
+  },
+}
diff --git a/packages/leva/stories/panel-options.stories.tsx b/packages/leva/stories/panel-options.stories.tsx
index c5714eb6..79b66fca 100644
--- a/packages/leva/stories/panel-options.stories.tsx
+++ b/packages/leva/stories/panel-options.stories.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import Reset from './components/decorator-reset'
 import { Story, Meta } from '@storybook/react'
 
-import { Leva, folder, useControls } from '../src'
+import { Leva, folder, useControls, lightTheme, monitor, button } from '../src'
+import { spring } from '@leva-ui/plugin-spring'
 
 export default {
   title: 'Misc/Panel options',
@@ -57,3 +58,47 @@ export const Filter: Story<any> = (args, context) => {
   return Template({ titleBar: { filter: args.filter } }, context)
 }
 Filter.args = { filter: true }
+
+export const Theme: Story<any> = (args) => {
+  const ref = React.useRef(4)
+
+  useControls({
+    number: { value: 10, step: 0.25 },
+    image: { image: undefined },
+    select: { options: ['x', 'y', ['x', 'y']] },
+    interval: { min: -100, max: 100, value: [10, 15] },
+    boolean: true,
+    refMonitor: monitor(ref, { graph: true, interval: 30 }),
+    folder2: folder(
+      {
+        color2: '#fff',
+        color: {
+          value: '#ff005b',
+          render: (get) => get('boolean'),
+        },
+        folder3: folder(
+          {
+            'Hello Button': button(() => console.log('hello')),
+            folder4: folder({
+              spring: spring(),
+              pos2d: { value: { x: 3, y: 4 } },
+              pos2dArr: { value: [100, 200], x: { max: 300 } },
+              pos3d: { value: { x: 0.3, k: 0.1, z: 0.5 }, j: { min: 0 } },
+              pos3dArr: [Math.PI / 2, 20, 4],
+            }),
+          },
+          { collapsed: false }
+        ),
+      },
+      { render: (get) => get('boolean') }
+    ),
+    colorObj: { r: 1, g: 2, b: 3 },
+  })
+
+  return (
+    <div>
+      <Leva theme={args.light ? lightTheme : undefined} />
+    </div>
+  )
+}
+Theme.args = { light: true }

From d83904276d53a31a79ecec2cd5c167b11da21f13 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Sat, 17 Apr 2021 12:34:09 +0200
Subject: [PATCH 2/2] fix: circular imports?

---
 packages/leva/src/styles/themes/light.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/leva/src/styles/themes/light.ts b/packages/leva/src/styles/themes/light.ts
index 62c422ff..84e54fbe 100644
--- a/packages/leva/src/styles/themes/light.ts
+++ b/packages/leva/src/styles/themes/light.ts
@@ -1,4 +1,4 @@
-import { LevaCustomTheme } from '..'
+import { LevaCustomTheme } from '../stitches.config'
 
 export const lightTheme: LevaCustomTheme = {
   colors: {