adsf

coinbase · Oct 21, 2024 · ed7c71f · ed7c71f
1 parent 7b543a3
commit ed7c71f
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 124 deletions.
diff --git a/playground/nextjs-app-router/app/globals.css b/playground/nextjs-app-router/app/globals.css
@@ -77,54 +77,74 @@
 
 
 /* Create your own custom Theme*/
-/* @layer base {
-  .custom {
-    --ock-font-family: 'your-custom-value';
-    --ock-border-radius: 'your-custom-value';
-    --ock-text-foreground: 'your-custom-value';
-    --ock-text-foreground-muted: 'your-custom-value';
-    --ock-text-error: 'your-custom-value';
-    --ock-text-primary: 'your-custom-value';
-    --ock-text-success: 'your-custom-value';
-    --ock-text-warning: 'your-custom-value';
-    --ock-text-disabled: 'your-custom-value';
+/* 
+Usage: 
+  config={{
+    appearance: {
+      mode: 'auto',
+      theme: 'custom',
+    },
+  }}
 
-    --ock-bg-default: 'your-custom-value';
-    --ock-bg-default-hover: 'your-custom-value';
-    --ock-bg-default-active: 'your-custom-value';
-    --ock-bg-alternate: 'your-custom-value';
-    --ock-bg-alternate-hover: 'your-custom-value';
-    --ock-bg-alternate-active: 'your-custom-value';
-    --ock-bg-inverse: 'your-custom-value';
-    --ock-bg-inverse-hover: 'your-custom-value';
-    --ock-bg-inverse-active: 'your-custom-value';
-    --ock-bg-primary: 'your-custom-value';
-    --ock-bg-primary-hover: 'your-custom-value';
-    --ock-bg-primary-active: 'your-custom-value';
-    --ock-bg-primary-washed: 'your-custom-value';
-    --ock-bg-primary-disabled: 'your-custom-value';
-    --ock-bg-secondary: 'your-custom-value';
-    --ock-bg-secondary-hover: 'your-custom-value';
-    --ock-bg-secondary-active: 'your-custom-value';
-    --ock-bg-error: 'your-custom-value';
-    --ock-bg-warning: 'your-custom-value';
-    --ock-bg-success: 'your-custom-value';
-    --ock-bg-default-reverse: 'your-custom-value';
+  config={{
+    appearance: {
+      mode: 'light', // To use custom-light only.
+      theme: 'custom',
+    },
+  }}
+*/
+.custom-light {
+  --ock-bg-primary: red;
+}
 
-    --ock-icon-color-primary: 'your-custom-value';
-    --ock-icon-color-foreground: 'your-custom-value';
-    --ock-icon-color-foreground-muted: 'your-custom-value';
-    --ock-icon-color-inverse: 'your-custom-value';
-    --ock-icon-color-error: 'your-custom-value';
-    --ock-icon-color-success: 'your-custom-value';
-    --ock-icon-color-warning: 'your-custom-value';
+.custom-dark {
+  --ock-font-family: 'DM Sans', sans-serif;
+  --ock-border-radius: 0.5rem;
+  --ock-border-radius-inner: 0.25rem;
+  --ock-text-inverse: #1f2937;
+  --ock-text-foreground: #f9fafb;
+  --ock-text-foreground-muted: #9ca3af;
+  --ock-text-error: #d1d5db;
+  --ock-text-primary: #f3f4f6;
+  --ock-text-success: #9ca3af;
+  --ock-text-warning: #d1d5db;
+  --ock-text-disabled: #4b5563;
 
-    --ock-line-primary: 'your-custom-value';
-    --ock-line-default: 'your-custom-value';
-    --ock-line-heavy: 'your-custom-value';
-    --ock-line-inverse: 'your-custom-value';
-  }
-} */
+  --ock-bg-default: #111827;
+  --ock-bg-default-hover: #1f2937;
+  --ock-bg-default-active: #374151;
+  --ock-bg-alternate: #1f2937;
+  --ock-bg-alternate-hover: #374151;
+  --ock-bg-alternate-active: #4b5563;
+  --ock-bg-inverse: #0f172a;
+  --ock-bg-inverse-hover: #1e293b;
+  --ock-bg-inverse-active: #334155;
+  --ock-bg-primary: green;
+  --ock-bg-primary-hover: #6b7280;
+  --ock-bg-primary-active: #9ca3af;
+  --ock-bg-primary-washed: #1f2937;
+  --ock-bg-primary-disabled: #374151;
+  --ock-bg-secondary: #1f2937;
+  --ock-bg-secondary-hover: #374151;
+  --ock-bg-secondary-active: #4b5563;
+  --ock-bg-error: #991b1b;
+  --ock-bg-warning: #92400e;
+  --ock-bg-success: #065f46;
+  --ock-bg-default-reverse: #f9fafb;
+
+  --ock-icon-color-primary: #9ca3af;
+  --ock-icon-color-foreground: #f9fafb;
+  --ock-icon-color-foreground-muted: #9ca3af;
+  --ock-icon-color-inverse: #1f2937;
+  --ock-icon-color-error: #f87171;
+  --ock-icon-color-success: #34d399;
+  --ock-icon-color-warning: #fbbf24;
+
+  --ock-line-primary: #6b7280;
+  --ock-line-default: #374151;
+  --ock-line-heavy: #4b5563;
+  --ock-line-inverse: #e5e7eb;
+}
 
 @layer base {
   * {

diff --git a/playground/nextjs-app-router/components/AppProvider.tsx b/playground/nextjs-app-router/components/AppProvider.tsx
@@ -35,7 +35,6 @@ export type ComponentTheme =
   | 'cyberpunk'
   | 'default'
   | 'hacker'
-  | 'custom'
   | 'none'; // Simulates an undefined theme field
 
 export type ComponentMode = 'auto' | 'light' | 'dark';

diff --git a/playground/nextjs-app-router/onchainkit/package.json b/playground/nextjs-app-router/onchainkit/package.json
@@ -119,12 +119,6 @@
       "import": "./esm/api/index.js",
       "default": "./esm/api/index.js"
     },
-    "./checkout": {
-      "types": "./esm/checkout/index.d.ts",
-      "module": "./esm/checkout/index.js",
-      "import": "./esm/checkout/index.js",
-      "default": "./esm/checkout/index.js"
-    },
     "./core": {
       "types": "./esm/core/index.d.ts",
       "module": "./esm/core/index.js",
@@ -155,6 +149,12 @@
       "import": "./esm/identity/index.js",
       "default": "./esm/identity/index.js"
     },
+    "./pay": {
+      "types": "./esm/pay/index.d.ts",
+      "module": "./esm/pay/index.js",
+      "import": "./esm/pay/index.js",
+      "default": "./esm/pay/index.js"
+    },
     "./swap": {
       "types": "./esm/swap/index.d.ts",
       "module": "./esm/swap/index.js",

diff --git a/playground/nextjs-app-router/package.json b/playground/nextjs-app-router/package.json
@@ -14,6 +14,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@coinbase/onchainkit": "^0.34.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",

diff --git a/site/docs/pages/guides/themes.mdx b/site/docs/pages/guides/themes.mdx
@@ -37,7 +37,7 @@ If no theme is selected, the **`default`** theme is applied automatically.
   config={{ // [!code focus]
     appearance: { // [!code focus]
       mode: 'auto', // 'auto' | 'light' | 'dark'
-      theme: 'default', // 'default' | 'base' | 'cyberpunk' | 'hacker' | 'custom' // [!code focus]
+      theme: 'default', // 'default' | 'base' | 'cyberpunk' | 'hacker' // [!code focus]
     }, // [!code focus]
   }} // [!code focus]
 >
@@ -61,16 +61,16 @@ If no mode is specified, `auto` mode will be applied by default.
   config={{
     appearance: {
       mode: 'auto', // 'auto' | 'light' | 'dark' // [!code focus]
-      theme: 'default', // 'default' | 'base' | 'cyberpunk' | 'hacker' | 'custom'
+      theme: 'default', // 'default' | 'base' | 'cyberpunk' | 'hacker' | 'your-custom-theme'
     },
   }}
 >
 ```
 
 ## CSS Overrides
 
-CSS Overrides allow you to fine-tune specific aspects of an existing theme. 
-This is useful when you want to make minor adjustments to the appearance of individual components without creating an entirely new theme.
+Fine-tune specific aspects of an existing theme. 
+This is useful when you want to make adjustments to the appearance of the components without creating an entirely new theme.
 
 ```css
 @layer base {
@@ -88,19 +88,46 @@ This is useful when you want to make minor adjustments to the appearance of indi
 }
 ```
 
-
 ## Custom Theme
 
-Creating a custom theme allows you to define an entirely new look and feel for your application. 
+Define an entirely new look and feel for your application. 
 This gives you complete control over all aspects of the design, including colors, fonts, and other visual properties.
 
+Usage Options:
+
+Automatic Light/Dark Mode Switching:
+To automatically switch between light and dark versions of your custom theme:
+
+```tsx twoslash
+  config={{
+    appearance: {
+      mode: 'auto', 
+      theme: 'custom',
+    },
+  }}
+```
+
+Single Theme Version:
+To use only one version of your custom theme at all times:
+
+```tsx twoslash
+  config={{
+    appearance: {
+      mode: 'light', // or 'dark'
+      theme: 'custom',
+    },
+  }}
+```
 
 ```css
 @layer base {
-  .custom {
+  .custom-light {
+    /* Font and Shape */
     --ock-font-family: 'your-custom-value';
     --ock-border-radius: 'your-custom-value';
     --ock-border-radius-inner: 'your-custom-value';
+
+    /* Text Colors */
     --ock-text-inverse: 'your-custom-value';
     --ock-text-foreground: 'your-custom-value';
     --ock-text-foreground-muted: 'your-custom-value';
@@ -110,6 +137,7 @@ This gives you complete control over all aspects of the design, including colors
     --ock-text-warning: 'your-custom-value';
     --ock-text-disabled: 'your-custom-value';
 
+    /* Background Colors */
     --ock-bg-default: 'your-custom-value';
     --ock-bg-default-hover: 'your-custom-value';
     --ock-bg-default-active: 'your-custom-value';
@@ -132,6 +160,7 @@ This gives you complete control over all aspects of the design, including colors
     --ock-bg-success: 'your-custom-value';
     --ock-bg-default-reverse: 'your-custom-value';
 
+    /* Icon Colors */
     --ock-icon-color-primary: 'your-custom-value';
     --ock-icon-color-foreground: 'your-custom-value';
     --ock-icon-color-foreground-muted: 'your-custom-value';
@@ -140,10 +169,15 @@ This gives you complete control over all aspects of the design, including colors
     --ock-icon-color-success: 'your-custom-value';
     --ock-icon-color-warning: 'your-custom-value';
 
+    /* Line Colors */
     --ock-line-primary: 'your-custom-value';
     --ock-line-default: 'your-custom-value';
     --ock-line-heavy: 'your-custom-value';
     --ock-line-inverse: 'your-custom-value';
   }
+
+  .custom-dark {
+    /* Define dark mode custom classes here */
+  }
 }
 ```
diff --git a/src/styles/tailwind-base.css b/src/styles/tailwind-base.css
@@ -248,55 +248,6 @@
     --ock-line-heavy: theme(colors.zinc.500);
     --ock-line-inverse: theme(colors.zinc.700);
   }
-
-  .custom {
-    --ock-font-family: 'DM Sans', sans-serif;
-    --ock-border-radius: 0.5rem;
-    --ock-border-radius-inner: 0.25rem;
-    --ock-text-inverse: theme(colors.gray.50);
-    --ock-text-foreground: theme(colors.gray.950);
-    --ock-text-foreground-muted: theme(colors.gray.600);
-    --ock-text-error: theme(colors.gray.700);
-    --ock-text-primary: theme(colors.gray.800);
-    --ock-text-success: theme(colors.gray.600);
-    --ock-text-warning: theme(colors.gray.700);
-    --ock-text-disabled: theme(colors.gray.400);
-
-    --ock-bg-default: theme(colors.gray.50);
-    --ock-bg-default-hover: theme(colors.gray.200);
-    --ock-bg-default-active: theme(colors.gray.300);
-    --ock-bg-alternate: theme(colors.gray.200);
-    --ock-bg-alternate-hover: theme(colors.gray.300);
-    --ock-bg-alternate-active: theme(colors.gray.400);
-    --ock-bg-inverse: theme(colors.gray.100);
-    --ock-bg-inverse-hover: theme(colors.gray.200);
-    --ock-bg-inverse-active: theme(colors.gray.300);
-    --ock-bg-primary: theme(colors.gray.600);
-    --ock-bg-primary-hover: theme(colors.gray.700);
-    --ock-bg-primary-active: theme(colors.gray.800);
-    --ock-bg-primary-washed: theme(colors.gray.100);
-    --ock-bg-primary-disabled: theme(colors.gray.300);
-    --ock-bg-secondary: theme(colors.gray.200);
-    --ock-bg-secondary-hover: theme(colors.gray.300);
-    --ock-bg-secondary-active: theme(colors.gray.400);
-    --ock-bg-error: theme(colors.gray.600);
-    --ock-bg-warning: theme(colors.gray.500);
-    --ock-bg-success: theme(colors.gray.400);
-    --ock-bg-default-reverse: theme(colors.gray.950);
-
-    --ock-icon-color-primary: theme(colors.gray.600);
-    --ock-icon-color-foreground: theme(colors.gray.950);
-    --ock-icon-color-foreground-muted: theme(colors.gray.600);
-    --ock-icon-color-inverse: theme(colors.gray.50);
-    --ock-icon-color-error: theme(colors.gray.700);
-    --ock-icon-color-success: theme(colors.gray.600);
-    --ock-icon-color-warning: theme(colors.gray.700);
-
-    --ock-line-primary: theme(colors.gray.600);
-    --ock-line-default: theme(colors.gray.300);
-    --ock-line-heavy: theme(colors.gray.500);
-    --ock-line-inverse: theme(colors.gray.700);
-  }
 }
 
 @tailwind utilities;

diff --git a/src/types.ts b/src/types.ts
@@ -26,17 +26,17 @@ export type ComponentTheme =
   | 'cyberpunk'
   | 'default'
   | 'hacker'
-  | 'custom';
+  | string;
 
 // Internal theme options, including light/dark variants for 'default'
 export type UseThemeReact =
   | 'base'
   | 'cyberpunk'
   | 'default'
   | 'hacker'
-  | 'custom'
   | 'default-light'
-  | 'default-dark';
+  | 'default-dark'
+  | string;
 
 /**
  * Note: exported as public Type

diff --git a/src/useTheme.test.ts b/src/useTheme.test.ts
@@ -90,18 +90,12 @@ describe('useTheme', () => {
       'cyberpunk',
       'base',
       'hacker',
-      'custom',
       'default-light',
       'default-dark',
     ];
 
     for (const theme of allThemes) {
-      if (
-        theme === 'cyberpunk' ||
-        theme === 'base' ||
-        theme === 'hacker' ||
-        theme === 'custom'
-      ) {
+      if (theme === 'cyberpunk' || theme === 'base' || theme === 'hacker') {
         mockUseOnchainKit(theme, 'auto');
       } else {
         const [baseTheme, mode] = theme.split('-');

diff --git a/src/useTheme.ts b/src/useTheme.ts
@@ -9,12 +9,7 @@ export function useTheme(): UseThemeReact {
   } = useOnchainKit();
   const { theme = 'default', mode = 'auto' } = appearance || {};
 
-  if (
-    theme === 'cyberpunk' ||
-    theme === 'base' ||
-    theme === 'hacker' ||
-    theme === 'custom'
-  ) {
+  if (theme === 'cyberpunk' || theme === 'base' || theme === 'hacker') {
     return theme;
   }