@moubing/bing-ui 0.5.1 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -51
- package/dist/bing-ui.css +1 -1
- package/dist/bing-ui.es.js +253 -254
- package/dist/bing-ui.umd.js +4 -4
- package/package.json +15 -16
package/README.md
CHANGED
|
@@ -23,63 +23,63 @@ pnpm dev
|
|
|
23
23
|
## Scripts
|
|
24
24
|
|
|
25
25
|
```powershell
|
|
26
|
-
pnpm test:run
|
|
27
|
-
pnpm test:browser
|
|
26
|
+
pnpm test:run
|
|
27
|
+
pnpm test:browser
|
|
28
28
|
pnpm test:visual
|
|
29
29
|
pnpm build
|
|
30
30
|
pnpm storybook
|
|
31
|
-
pnpm build-storybook
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
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.
|
|
35
|
-
|
|
36
|
-
## Package Entry
|
|
31
|
+
pnpm build-storybook
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
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.
|
|
35
|
+
|
|
36
|
+
## Package Entry
|
|
37
37
|
|
|
38
38
|
```ts
|
|
39
39
|
import { BingButton } from '@moubing/bing-ui'
|
|
40
|
-
import '@moubing/bing-ui/style.css'
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Themes
|
|
44
|
-
|
|
45
|
-
The bundled stylesheet includes `light`, `dark`, and `system` themes. Light remains the
|
|
46
|
-
default when no theme attribute is present. The light theme uses the library's signature
|
|
47
|
-
pink interaction accent, while dark mode shifts the semantic accent toward night purple;
|
|
48
|
-
the original pink palette remains available for brand and decorative details.
|
|
49
|
-
|
|
50
|
-
Set the theme on the document element so components teleported to `body` inherit the
|
|
51
|
-
same tokens as their triggers:
|
|
52
|
-
|
|
53
|
-
```ts
|
|
54
|
-
document.documentElement.dataset.bingTheme = 'dark'
|
|
55
|
-
|
|
56
|
-
// Follow the operating-system preference.
|
|
57
|
-
document.documentElement.dataset.bingTheme = 'system'
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
Apply a persisted theme before mounting Vue to avoid a light-to-dark flash during startup.
|
|
61
|
-
Applications can override any semantic token after importing the library stylesheet:
|
|
62
|
-
|
|
63
|
-
```css
|
|
64
|
-
html[data-bing-theme='dark'] {
|
|
65
|
-
--bing-accent-rgb: 251 113 133;
|
|
66
|
-
--bing-accent-strong-rgb: 254 205 211;
|
|
67
|
-
--bing-accent-solid-rgb: 253 164 175;
|
|
68
|
-
--bing-accent: #fb7185;
|
|
69
|
-
--bing-accent-strong: #fecdd3;
|
|
70
|
-
--bing-accent-solid: #fda4af;
|
|
71
|
-
--bing-focus: rgb(var(--bing-accent-rgb) / 0.62);
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
The first theme release intentionally uses the document element as its scope. This keeps
|
|
76
|
-
regular components and overlays teleported to `body` on the same theme.
|
|
77
|
-
|
|
78
|
-
`BingCodeBlock` uses `theme="auto"` by default, mapping light mode to `vitesse-light`
|
|
79
|
-
and dark mode to the higher-contrast `github-dark` palette. Pass an explicit Shiki theme
|
|
80
|
-
name when a code sample must remain fixed independently of the application theme.
|
|
81
|
-
|
|
82
|
-
## Project Layout
|
|
40
|
+
import '@moubing/bing-ui/style.css'
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Themes
|
|
44
|
+
|
|
45
|
+
The bundled stylesheet includes `light`, `dark`, and `system` themes. Light remains the
|
|
46
|
+
default when no theme attribute is present. The light theme uses the library's signature
|
|
47
|
+
pink interaction accent, while dark mode shifts the semantic accent toward night purple;
|
|
48
|
+
the original pink palette remains available for brand and decorative details.
|
|
49
|
+
|
|
50
|
+
Set the theme on the document element so components teleported to `body` inherit the
|
|
51
|
+
same tokens as their triggers:
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
document.documentElement.dataset.bingTheme = 'dark'
|
|
55
|
+
|
|
56
|
+
// Follow the operating-system preference.
|
|
57
|
+
document.documentElement.dataset.bingTheme = 'system'
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Apply a persisted theme before mounting Vue to avoid a light-to-dark flash during startup.
|
|
61
|
+
Applications can override any semantic token after importing the library stylesheet:
|
|
62
|
+
|
|
63
|
+
```css
|
|
64
|
+
html[data-bing-theme='dark'] {
|
|
65
|
+
--bing-accent-rgb: 251 113 133;
|
|
66
|
+
--bing-accent-strong-rgb: 254 205 211;
|
|
67
|
+
--bing-accent-solid-rgb: 253 164 175;
|
|
68
|
+
--bing-accent: #fb7185;
|
|
69
|
+
--bing-accent-strong: #fecdd3;
|
|
70
|
+
--bing-accent-solid: #fda4af;
|
|
71
|
+
--bing-focus: rgb(var(--bing-accent-rgb) / 0.62);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
The first theme release intentionally uses the document element as its scope. This keeps
|
|
76
|
+
regular components and overlays teleported to `body` on the same theme.
|
|
77
|
+
|
|
78
|
+
`BingCodeBlock` uses `theme="auto"` by default, mapping light mode to `vitesse-light`
|
|
79
|
+
and dark mode to the higher-contrast `github-dark` palette. Pass an explicit Shiki theme
|
|
80
|
+
name when a code sample must remain fixed independently of the application theme.
|
|
81
|
+
|
|
82
|
+
## Project Layout
|
|
83
83
|
|
|
84
84
|
```txt
|
|
85
85
|
src/
|