@moubing/bing-ui 0.3.1 → 0.5.0

package/README.md

@@ -23,22 +23,63 @@ pnpm dev
 ## Scripts
 
 ```powershell
-pnpm test:run
-pnpm test:browser -- --run
+pnpm test:run
+pnpm test:browser
 pnpm test:visual
 pnpm build
 pnpm storybook
-pnpm build-storybook
-```
-
-## Package Entry
+pnpm build-storybook
+```
+
+Browser-mode tests always run headlessly. To reuse an installed Chrome when Playwright's bundled Chromium is unavailable, set `BING_UI_BROWSER_CHANNEL=chrome` for the test command.
+
+## Package Entry
 
 ```ts
-import { BingButton } from '@moubing/bing-ui'
+import { BingButton } from '@moubing/bing-ui'
 import '@moubing/bing-ui/style.css'
-```
-
-## Project Layout
+```
+
+## Themes
+
+The bundled stylesheet includes `light`, `dark`, and `system` themes. Light remains the
+default when no theme attribute is present. The light theme uses the library's signature
+pink interaction accent, while dark mode shifts the semantic accent toward night purple;
+the original pink palette remains available for brand and decorative details.
+
+Set the theme on the document element so components teleported to `body` inherit the
+same tokens as their triggers:
+
+```ts
+document.documentElement.dataset.bingTheme = 'dark'
+
+// Follow the operating-system preference.
+document.documentElement.dataset.bingTheme = 'system'
+```
+
+Apply a persisted theme before mounting Vue to avoid a light-to-dark flash during startup.
+Applications can override any semantic token after importing the library stylesheet:
+
+```css
+html[data-bing-theme='dark'] {
+  --bing-accent-rgb: 251 113 133;
+  --bing-accent-strong-rgb: 254 205 211;
+  --bing-accent-solid-rgb: 253 164 175;
+  --bing-accent: #fb7185;
+  --bing-accent-strong: #fecdd3;
+  --bing-accent-solid: #fda4af;
+  --bing-focus: rgb(var(--bing-accent-rgb) / 0.62);
+}
+```
+
+The first theme release intentionally uses the document element as its scope. This keeps
+regular components and overlays teleported to `body` on the same theme.
+
+`BingCodeBlock` uses `theme="auto"` by default, mapping light mode to `vitesse-light`
+and dark mode to the higher-contrast `github-dark` palette. Pass an explicit Shiki theme
+name when a code sample must remain fixed independently of the application theme.
+
+## Project Layout
 
 ```txt
 src/