@viglet/viglet-design-system 2026.2.48 → 2026.2.50
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/dist/preset.css +4 -0
- package/dist/src/vite/boot-loader.d.ts +77 -0
- package/dist/src/vite/boot-loader.d.ts.map +1 -0
- package/dist/src/vite/index.d.ts +2 -0
- package/dist/src/vite/index.d.ts.map +1 -0
- package/dist/viglet-design-system.css +1 -1
- package/dist/vite.cjs.js +223 -0
- package/dist/vite.es.js +282 -0
- package/package.json +7 -2
package/dist/preset.css
CHANGED
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
`--border`, etc.
|
|
18
18
|
============================================================= */
|
|
19
19
|
|
|
20
|
+
/* Fonts referenced by `--font-sans` / `--font-brand` below. */
|
|
21
|
+
@import "@fontsource-variable/inter";
|
|
22
|
+
@import "@fontsource-variable/plus-jakarta-sans";
|
|
23
|
+
|
|
20
24
|
@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
|
|
21
25
|
|
|
22
26
|
@theme {
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { Plugin } from 'vite';
|
|
2
|
+
/**
|
|
3
|
+
* Options for {@link vigletBootLoader}.
|
|
4
|
+
*
|
|
5
|
+
* Only `title`, `subtitle` and `color` are required. Everything else has a
|
|
6
|
+
* sensible Viglet default so most products can keep their `vite.config.ts`
|
|
7
|
+
* short:
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* vigletBootLoader({
|
|
11
|
+
* title: "Viglet Turing ES",
|
|
12
|
+
* subtitle: "Enterprise Search Intelligence",
|
|
13
|
+
* color: "#4169E1",
|
|
14
|
+
* prefix: "turing",
|
|
15
|
+
* });
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export interface VigletBootLoaderOptions {
|
|
19
|
+
/** Product title shown under the orb, e.g. `"Viglet Turing ES"`. */
|
|
20
|
+
title: string;
|
|
21
|
+
/** Uppercase subtitle under the title, e.g. `"Enterprise Search Intelligence"`. */
|
|
22
|
+
subtitle: string;
|
|
23
|
+
/** Accent hex color (light mode), e.g. `"#4169E1"`. */
|
|
24
|
+
color: string;
|
|
25
|
+
/** Accent hex color in dark mode. Defaults to `color`. */
|
|
26
|
+
colorDark?: string;
|
|
27
|
+
/**
|
|
28
|
+
* CSS class prefix applied to every rule and keyframe to avoid collisions
|
|
29
|
+
* (rings, mark, molecules, gas, progress, etc). Default: `"viglet"`.
|
|
30
|
+
*
|
|
31
|
+
* Must be a valid CSS identifier fragment — letters, digits and `-`.
|
|
32
|
+
*/
|
|
33
|
+
prefix?: string;
|
|
34
|
+
/** `localStorage` key used to detect the stored theme. Default: `"vite-ui-theme"`. */
|
|
35
|
+
storageKey?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Global variable name read by the app's `main.tsx` to bail out of
|
|
38
|
+
* `createRoot().render()` when `?loading=1` is present, which holds the
|
|
39
|
+
* loader visible for design/regression testing.
|
|
40
|
+
*
|
|
41
|
+
* Default: `"__VIGLET_LOADING_TEST__"`.
|
|
42
|
+
*/
|
|
43
|
+
testFlag?: string;
|
|
44
|
+
/**
|
|
45
|
+
* HTML comment that the plugin replaces with the boot-loader markup. Put
|
|
46
|
+
* it inside `<div id="root">` in your `index.html` (or `marketing.html`).
|
|
47
|
+
*
|
|
48
|
+
* Default: `"<!--viglet-boot-loader-->"`. If not found, the plugin falls
|
|
49
|
+
* back to injecting right after the opening `<div id="root">` tag.
|
|
50
|
+
*/
|
|
51
|
+
placeholder?: string;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Vite plugin that injects the shared Viglet boot loader into `index.html` at
|
|
55
|
+
* build/dev time. Every product (Turing, Shio, Dumont, Cloud Marketing)
|
|
56
|
+
* consumes this plugin so the loader visuals stay identical across the
|
|
57
|
+
* ecosystem and there's a single place to evolve the design.
|
|
58
|
+
*
|
|
59
|
+
* What the plugin injects:
|
|
60
|
+
*
|
|
61
|
+
* 1. A `<style>` tag in `<head>` with every rule and keyframe used by the
|
|
62
|
+
* loader (rings, orb, gas cloud, molecule cycle, progress, fade-in,
|
|
63
|
+
* reduced-motion fallback, test-mode badge).
|
|
64
|
+
* 2. A `<script>` tag in `<head>` that runs BEFORE the React module and:
|
|
65
|
+
* - Picks the light/dark theme from `localStorage`.
|
|
66
|
+
* - Sets `globalThis.<testFlag> = true` if the URL has `?loading=1`.
|
|
67
|
+
* - Injects a visible "TEST MODE" badge when the flag is on.
|
|
68
|
+
* 3. The loader markup (rings + mark + 6-molecule SVG + title + subtitle +
|
|
69
|
+
* progress) wherever the `<!--viglet-boot-loader-->` placeholder sits
|
|
70
|
+
* inside `<div id="root">`.
|
|
71
|
+
*
|
|
72
|
+
* The consuming app's `main.tsx` should look at `globalThis.<testFlag>` and
|
|
73
|
+
* skip mounting React when the flag is set — this is what keeps the loader
|
|
74
|
+
* visible indefinitely during testing.
|
|
75
|
+
*/
|
|
76
|
+
export declare function vigletBootLoader(options: VigletBootLoaderOptions): Plugin;
|
|
77
|
+
//# sourceMappingURL=boot-loader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"boot-loader.d.ts","sourceRoot":"","sources":["../../../src/vite/boot-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA4B,MAAM,EAAE,MAAM,MAAM,CAAC;AAE7D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,uBAAuB;IACtC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sFAAsF;IACtF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,MAAM,CAsCzE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vite/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,eAAe,CAAC"}
|