feat: integrate DSThemeProvider and add DS claude rule

.claude/rules/design-system.md

@@ -0,0 +1,15 @@
+# Design System
+
+- Use `DSColor` semantic tokens for all colors — they switch with dark/light theme automatically
+- Use `DSTypography` component for all text styling
+- Use DS icons from `@keplr-wallet/design-system` for all icons
+- Use DS components when available — check `packages/design-system/src/components/`
+- Use `DSColor` semantic tokens instead of `props.theme.mode` branching for theming
+- Generated files are synced from Figma — update with `yarn workspace @keplr-wallet/design-system sync:tokens`
+
+## Reference Paths
+
+- Colors: `packages/design-system/src/foundation/color/color.ts`
+- Typography: `packages/design-system/src/foundation/typography/typography-tokens.ts`
+- Icons: `packages/design-system/src/foundation/icon/components/`
+- Components: `packages/design-system/src/components/`

apps/extension/package.json

@@ -33,6 +33,7 @@
     "@keplr-wallet/common": "0.13.17",
     "@keplr-wallet/cosmos": "0.13.17",
     "@keplr-wallet/crypto": "0.13.17",
+    "@keplr-wallet/design-system": "0.13.17",
     "@keplr-wallet/hooks": "0.13.17",
     "@keplr-wallet/hooks-bitcoin": "0.13.17",
     "@keplr-wallet/hooks-evm": "0.13.17",

apps/extension/src/theme/index.tsx

@@ -9,6 +9,7 @@ import React, {
   useState,
 } from "react";
 import { ThemeProvider } from "styled-components";
+import { DSThemeProvider } from "@keplr-wallet/design-system";
 import { SetThemeOptionMsg } from "@keplr-wallet/background";
 import { BACKGROUND_PORT } from "@keplr-wallet/router";
 
@@ -102,7 +103,11 @@ export const AppThemeProvider: FunctionComponent<PropsWithChildren> = ({
         setTheme,
       }}
     >
-      <ThemeProvider theme={{ mode: displayTheme }}>{children}</ThemeProvider>
+      <DSThemeProvider defaultTheme={displayTheme}>
+        <ThemeProvider theme={{ mode: displayTheme }}>
+          {children}
+        </ThemeProvider>
+      </DSThemeProvider>
     </AppThemeContext.Provider>
   );
 };

packages/design-system/src/theme/ds-theme-provider.tsx

@@ -1,22 +1,14 @@
-import React, {
-  createContext,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from "react";
+import React, { createContext, useLayoutEffect } from "react";
 import { generateThemeStylesheet } from "./inject-vars";
 
 export type DSTheme = "dark" | "light";
 
 export interface DSThemeContextValue {
   theme: DSTheme;
-  setTheme: (theme: DSTheme) => void;
 }
 
 export const DSThemeContext = createContext<DSThemeContextValue>({
   theme: "dark",
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setTheme: () => {},
 });
 
 export interface DSThemeProviderProps {
@@ -31,28 +23,25 @@ export const DSThemeProvider: React.FC<DSThemeProviderProps> = ({
   defaultTheme = "dark",
   externalMode = false,
 }) => {
-  const [theme, setTheme] = useState<DSTheme>(defaultTheme);
-
-  useEffect(() => {
-    setTheme(defaultTheme);
-  }, [defaultTheme]);
-
+  // Inject static stylesheet once (contains both dark and light rules)
   useLayoutEffect(() => {
-    if (!externalMode) {
-      const styleId = "ds-theme-vars";
-      let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
-      if (!styleEl) {
-        styleEl = document.createElement("style");
-        styleEl.id = styleId;
-        document.head.appendChild(styleEl);
-      }
+    if (externalMode) return;
+    const styleId = "ds-theme-vars";
+    if (!document.getElementById(styleId)) {
+      const styleEl = document.createElement("style");
+      styleEl.id = styleId;
       styleEl.textContent = generateThemeStylesheet();
+      document.head.appendChild(styleEl);
     }
-    document.documentElement.setAttribute("data-ds-theme", theme);
-  }, [theme, externalMode]);
+  }, [externalMode]);
+
+  // Switch active theme via data attribute
+  useLayoutEffect(() => {
+    document.documentElement.setAttribute("data-ds-theme", defaultTheme);
+  }, [defaultTheme]);
 
   return (
-    <DSThemeContext.Provider value={{ theme, setTheme }}>
+    <DSThemeContext.Provider value={{ theme: defaultTheme }}>
       {children}
     </DSThemeContext.Provider>
   );

yarn.lock

@@ -6619,7 +6619,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@keplr-wallet/design-system@workspace:packages/design-system":
+"@keplr-wallet/design-system@0.13.17, @keplr-wallet/design-system@workspace:packages/design-system":
   version: 0.0.0-use.local
   resolution: "@keplr-wallet/design-system@workspace:packages/design-system"
   dependencies:
@@ -6657,6 +6657,7 @@ __metadata:
     "@keplr-wallet/common": 0.13.17
     "@keplr-wallet/cosmos": 0.13.17
     "@keplr-wallet/crypto": 0.13.17
+    "@keplr-wallet/design-system": 0.13.17
     "@keplr-wallet/hooks": 0.13.17
     "@keplr-wallet/hooks-bitcoin": 0.13.17
     "@keplr-wallet/hooks-evm": 0.13.17