From 2d24bf08fe5f8afdab98d65ce74758c095ce8795 Mon Sep 17 00:00:00 2001 From: jungcome7 Date: Tue, 31 Mar 2026 20:47:48 +0900 Subject: [PATCH 1/2] docs: add design system claude rule KEPLR-2053 Co-Authored-By: Claude Opus 4.6 (1M context) --- .claude/rules/design-system.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .claude/rules/design-system.md diff --git a/.claude/rules/design-system.md b/.claude/rules/design-system.md new file mode 100644 index 0000000000..0daaa08d36 --- /dev/null +++ b/.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/` From 04f2436b9ba3784b1232046ccb31e4b20471f890 Mon Sep 17 00:00:00 2001 From: jungcome7 Date: Tue, 31 Mar 2026 20:47:54 +0900 Subject: [PATCH 2/2] feat: integrate DSThemeProvider into AppThemeProvider - Add DSThemeProvider between AppThemeContext and ThemeProvider - Simplify DSThemeProvider: remove unnecessary useState/useEffect, inject stylesheet once - Add @keplr-wallet/design-system dependency to extension KEPLR-2052 Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/extension/package.json | 1 + apps/extension/src/theme/index.tsx | 7 +++- .../src/theme/ds-theme-provider.tsx | 41 +++++++------------ yarn.lock | 3 +- 4 files changed, 24 insertions(+), 28 deletions(-) diff --git a/apps/extension/package.json b/apps/extension/package.json index f9b3fba97e..a10094bbd3 100644 --- a/apps/extension/package.json +++ b/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", diff --git a/apps/extension/src/theme/index.tsx b/apps/extension/src/theme/index.tsx index eda3afda12..05107b15a0 100644 --- a/apps/extension/src/theme/index.tsx +++ b/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 = ({ setTheme, }} > - {children} + + + {children} + + ); }; diff --git a/packages/design-system/src/theme/ds-theme-provider.tsx b/packages/design-system/src/theme/ds-theme-provider.tsx index 9d3e38266b..d1b46280ed 100644 --- a/packages/design-system/src/theme/ds-theme-provider.tsx +++ b/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({ theme: "dark", - // eslint-disable-next-line @typescript-eslint/no-empty-function - setTheme: () => {}, }); export interface DSThemeProviderProps { @@ -31,28 +23,25 @@ export const DSThemeProvider: React.FC = ({ defaultTheme = "dark", externalMode = false, }) => { - const [theme, setTheme] = useState(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 ( - + {children} ); diff --git a/yarn.lock b/yarn.lock index e76a5dec29..31050ed17a 100644 --- a/yarn.lock +++ b/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