@codemonster-ru/vueforge-core 1.0.0 → 1.1.1
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 +39 -1
- package/dist/breakpoints-hxAiWC8U.js +11 -0
- package/dist/components/dialog/VfDialog.vue.d.ts.map +1 -1
- package/dist/foundation/breakpoints.d.ts +13 -0
- package/dist/foundation/breakpoints.d.ts.map +1 -0
- package/dist/foundation/breakpoints.json.d.ts +11 -0
- package/dist/foundation/index.d.ts +10 -0
- package/dist/foundation/index.d.ts.map +1 -0
- package/dist/foundation/useBreakpoint.d.ts +7 -0
- package/dist/foundation/useBreakpoint.d.ts.map +1 -0
- package/dist/foundation/useBreakpointValue.d.ts +7 -0
- package/dist/foundation/useBreakpointValue.d.ts.map +1 -0
- package/dist/foundation/useBreakpoints.d.ts +4 -0
- package/dist/foundation/useBreakpoints.d.ts.map +1 -0
- package/dist/foundation/useScrollLock.d.ts +8 -0
- package/dist/foundation/useScrollLock.d.ts.map +1 -0
- package/dist/foundation-api.d.ts +2 -0
- package/dist/foundation-api.js +10 -0
- package/dist/foundation.css +2 -0
- package/dist/generated-breakpoints.css +9 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/public-D2viaiWv.js +202 -0
- package/dist/styles.css +1 -1
- package/dist/theme/default-preset.d.ts.map +1 -1
- package/dist/theme/public.d.ts +2 -0
- package/dist/theme/public.d.ts.map +1 -0
- package/dist/theme-api.d.ts +2 -0
- package/dist/theme-api.js +5 -0
- package/dist/theme.css +29 -0
- package/dist/tokens.css +97 -0
- package/dist/types/theme.d.ts +6 -0
- package/dist/types/theme.d.ts.map +1 -1
- package/dist/useScrollLock-B7pq1ybb.js +96 -0
- package/dist/vueforge-core.js +675 -852
- package/package.json +45 -3
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Stable foundation layer for the VueForge design system.
|
|
|
8
8
|
|
|
9
9
|
## Current scope
|
|
10
10
|
|
|
11
|
-
Version `1.
|
|
11
|
+
Version `1.1.0` focuses on:
|
|
12
12
|
|
|
13
13
|
- Vue 3 library build with Vite
|
|
14
14
|
- TypeScript declarations
|
|
@@ -47,6 +47,43 @@ app.use(VueForge, {
|
|
|
47
47
|
|
|
48
48
|
For the full theme runtime and preset API, see [Theme API](./docs/theme-api.md).
|
|
49
49
|
|
|
50
|
+
## Foundation Usage
|
|
51
|
+
|
|
52
|
+
Use the full package when you need VueForge components, styles, and theme runtime together.
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
import VueForge from "@codemonster-ru/vueforge-core";
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Use foundation-only entry points when another package, such as `vueforge-layouts`, needs shared responsive or platform helpers without depending on the full UI surface.
|
|
59
|
+
|
|
60
|
+
```ts
|
|
61
|
+
import {
|
|
62
|
+
vfBreakpoints,
|
|
63
|
+
useBreakpoint,
|
|
64
|
+
useBreakpoints,
|
|
65
|
+
useBreakpointValue,
|
|
66
|
+
useScrollLock,
|
|
67
|
+
} from "@codemonster-ru/vueforge-core/foundation";
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Available subpaths:
|
|
71
|
+
|
|
72
|
+
- `@codemonster-ru/vueforge-core`
|
|
73
|
+
- `@codemonster-ru/vueforge-core/styles.css`
|
|
74
|
+
- `@codemonster-ru/vueforge-core/tokens.css`
|
|
75
|
+
- `@codemonster-ru/vueforge-core/foundation.css`
|
|
76
|
+
- `@codemonster-ru/vueforge-core/foundation`
|
|
77
|
+
- `@codemonster-ru/vueforge-core/theme`
|
|
78
|
+
|
|
79
|
+
### Stability
|
|
80
|
+
|
|
81
|
+
- Stable UI API: components exported from the root package
|
|
82
|
+
- Stable theme API: `VueForge`, `createVueForge`, `defaultThemePreset`, `createThemePreset`
|
|
83
|
+
- Stable foundation API: breakpoint constants and foundation composables from `./foundation`
|
|
84
|
+
|
|
85
|
+
For the full foundation contract, see [Foundation API](./docs/foundation-api.md).
|
|
86
|
+
|
|
50
87
|
## Development
|
|
51
88
|
|
|
52
89
|
```bash
|
|
@@ -59,6 +96,7 @@ npm run test
|
|
|
59
96
|
|
|
60
97
|
- [Visual Baseline 1.0](./docs/visual-baseline.md)
|
|
61
98
|
- [Theme API](./docs/theme-api.md)
|
|
99
|
+
- [Foundation API](./docs/foundation-api.md)
|
|
62
100
|
- [Release Checklist](./docs/release-checklist.md)
|
|
63
101
|
|
|
64
102
|
## License
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VfDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/VfDialog.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"VfDialog.vue.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/VfDialog.vue"],"names":[],"mappings":"AAwMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEtD,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAkDD,iBAAS,KAAK,SAEb;AAoFD,iBAAS,cAAc;WAiIT,OAAO,IAA6B;;wBAftB,GAAG;6BACE,GAAG;;;YACP,GAAG;;;YACF,GAAG;;;YACJ,GAAG;;;;;;EAgB/B;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;WA1SX,MAAM;UAFP,OAAO;iBACA,OAAO;UAGd,YAAY;iBADL,MAAM;yBAEE,OAAO;mBACb,OAAO;cACZ,OAAO;;;OA+SlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const vfBreakpoints: {
|
|
2
|
+
xs: number;
|
|
3
|
+
sm: number;
|
|
4
|
+
md: number;
|
|
5
|
+
lg: number;
|
|
6
|
+
xl: number;
|
|
7
|
+
"2xl": number;
|
|
8
|
+
};
|
|
9
|
+
export type VfBreakpointName = keyof typeof vfBreakpoints;
|
|
10
|
+
export type VfBreakpointValue = (typeof vfBreakpoints)[VfBreakpointName];
|
|
11
|
+
export declare function toMinWidthQuery(value: number): string;
|
|
12
|
+
export declare function toMaxWidthQuery(value: number): string;
|
|
13
|
+
//# sourceMappingURL=breakpoints.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/foundation/breakpoints.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;;;;;CAAmB,CAAA;AAE7C,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,aAAa,CAAA;AACzD,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAA;AAExE,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,UAE5C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,UAE5C"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { vfBreakpoints, toMaxWidthQuery, toMinWidthQuery } from './breakpoints';
|
|
2
|
+
export type { VfBreakpointName, VfBreakpointValue } from './breakpoints';
|
|
3
|
+
export { useBreakpoint } from './useBreakpoint';
|
|
4
|
+
export { useBreakpoints } from './useBreakpoints';
|
|
5
|
+
export { useBreakpointValue } from './useBreakpointValue';
|
|
6
|
+
export type { VfBreakpointValues } from './useBreakpointValue';
|
|
7
|
+
export { useScrollLock } from './useScrollLock';
|
|
8
|
+
export type { UseBreakpointOptions } from './useBreakpoint';
|
|
9
|
+
export type { UseScrollLockOptions } from './useScrollLock';
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/foundation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/E,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { MaybeRefOrGetter } from 'vue';
|
|
2
|
+
import { VfBreakpointName } from './breakpoints';
|
|
3
|
+
export interface UseBreakpointOptions {
|
|
4
|
+
direction?: 'min' | 'max';
|
|
5
|
+
}
|
|
6
|
+
export declare function useBreakpoint(breakpoint: MaybeRefOrGetter<VfBreakpointName | number>, options?: UseBreakpointOptions): import('vue').Ref<boolean, boolean>;
|
|
7
|
+
//# sourceMappingURL=useBreakpoint.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/foundation/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,gBAAgB,EAAe,MAAM,KAAK,CAAA;AAClG,OAAO,EAAmD,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAEtG,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CAC1B;AAED,wBAAgB,aAAa,CAC3B,UAAU,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,MAAM,CAAC,EACvD,OAAO,GAAE,oBAAyB,uCAyCnC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { MaybeRefOrGetter } from 'vue';
|
|
2
|
+
import { VfBreakpointName } from './breakpoints';
|
|
3
|
+
export type VfBreakpointValues<T> = Partial<Record<VfBreakpointName, T>> & {
|
|
4
|
+
base: T;
|
|
5
|
+
};
|
|
6
|
+
export declare function useBreakpointValue<T>(values: MaybeRefOrGetter<VfBreakpointValues<T>>): import('vue').ComputedRef<T>;
|
|
7
|
+
//# sourceMappingURL=useBreakpointValue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBreakpointValue.d.ts","sourceRoot":"","sources":["../../src/foundation/useBreakpointValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAC9D,OAAO,EAAiB,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAGpE,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,GAAG;IACzE,IAAI,EAAE,CAAC,CAAA;CACR,CAAA;AAID,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,gCAepF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBreakpoints.d.ts","sourceRoot":"","sources":["../../src/foundation/useBreakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,KAAK,CAAA;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAGrD,wBAAgB,cAAc,IAmBvB,WAAW,CAAC,MAAM,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CACpD"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { MaybeRefOrGetter } from 'vue';
|
|
2
|
+
export interface UseScrollLockOptions {
|
|
3
|
+
target?: MaybeRefOrGetter<HTMLElement | null | undefined>;
|
|
4
|
+
}
|
|
5
|
+
export declare function useScrollLock(enabled: MaybeRefOrGetter<boolean>, options?: UseScrollLockOptions): {
|
|
6
|
+
unlock: () => void;
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=useScrollLock.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollLock.d.ts","sourceRoot":"","sources":["../../src/foundation/useScrollLock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAElF,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,gBAAgB,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,CAAA;CAC1D;AAED,wBAAgB,aAAa,CAC3B,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAClC,OAAO,GAAE,oBAAyB;;EAwDnC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { t as e, a as o, u as t, b as r, c as u, d as i, v as k } from "./useScrollLock-B7pq1ybb.js";
|
|
2
|
+
export {
|
|
3
|
+
e as toMaxWidthQuery,
|
|
4
|
+
o as toMinWidthQuery,
|
|
5
|
+
t as useBreakpoint,
|
|
6
|
+
r as useBreakpointValue,
|
|
7
|
+
u as useBreakpoints,
|
|
8
|
+
i as useScrollLock,
|
|
9
|
+
k as vfBreakpoints
|
|
10
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,9 @@ export { default, VueForge, createVueForge } from './plugin';
|
|
|
2
2
|
export { default as VfThemeProvider } from './providers/VfThemeProvider.vue';
|
|
3
3
|
export { VfAccordion, VfAlert, VfBadge, VfButton, VfCard, VfDialog, VfDivider, VfDropdown, VfIconButton, VfInput, VfLink, VfPanel, VfPopover, VfTag, VfTabs, VfTextarea, VfTooltip } from './components';
|
|
4
4
|
export { useClickOutside, useDisclosure, useEscapeKey, useFloating, useFocusTrap, useId, useTheme } from './composables';
|
|
5
|
-
export {
|
|
5
|
+
export { vfBreakpoints, toMaxWidthQuery, toMinWidthQuery, useBreakpoint, useBreakpoints, useBreakpointValue, useScrollLock } from './foundation';
|
|
6
|
+
export { createThemePreset, defaultThemePreset } from './theme/public';
|
|
6
7
|
export type { VfBadgeTone, VfButtonVariant, VfControlSize, VfDialogSize, VfDividerOrientation, VfDropdownPlacement, VfFeedbackTone, VfTabItem, VfTooltipPlacement, VfLinkTone } from './types/components';
|
|
7
8
|
export type { VfResolvedTheme, VfThemeConfig, VfThemeContext, VfThemeMode, VfThemePreset, VfThemePresetOptions, VfThemeProviderProps, VfThemeTokens, VfVueForgeOptions } from './types/theme';
|
|
9
|
+
export type { UseBreakpointOptions, UseScrollLockOptions, VfBreakpointName, VfBreakpointValue, VfBreakpointValues } from './foundation';
|
|
8
10
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iCAAiC,CAAA;AAC5E,OAAO,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,EACV,SAAS,EACV,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxH,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,iCAAiC,CAAA;AAC5E,OAAO,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,EACV,SAAS,EACV,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxH,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAChJ,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACtE,YAAY,EACV,WAAW,EACX,eAAe,EACf,aAAa,EACb,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACnB,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,UAAU,EACX,MAAM,oBAAoB,CAAA;AAC3B,YAAY,EACV,eAAe,EACf,aAAa,EACb,cAAc,EACd,WAAW,EACX,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EAClB,MAAM,eAAe,CAAA;AACtB,YAAY,EACV,oBAAoB,EACpB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import { b as t } from "./breakpoints-hxAiWC8U.js";
|
|
2
|
+
const m = {
|
|
3
|
+
breakpointXs: `${t.xs}px`,
|
|
4
|
+
breakpointSm: `${t.sm}px`,
|
|
5
|
+
breakpointMd: `${t.md}px`,
|
|
6
|
+
breakpointLg: `${t.lg}px`,
|
|
7
|
+
breakpointXl: `${t.xl}px`,
|
|
8
|
+
breakpoint2xl: `${t["2xl"]}px`
|
|
9
|
+
}, d = {
|
|
10
|
+
name: "vueforge-default",
|
|
11
|
+
tokens: {
|
|
12
|
+
colorBg: "#fcfcfd",
|
|
13
|
+
colorSurface: "#ffffff",
|
|
14
|
+
colorSurfaceMuted: "#f5f7fb",
|
|
15
|
+
colorText: "#172033",
|
|
16
|
+
colorMuted: "#69738a",
|
|
17
|
+
colorBorder: "#d8e0ef",
|
|
18
|
+
colorPrimary: "#0b63f6",
|
|
19
|
+
colorPrimaryContrast: "#ffffff",
|
|
20
|
+
colorPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface))",
|
|
21
|
+
colorPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
|
|
22
|
+
colorFocusRing: "color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface))",
|
|
23
|
+
colorSuccess: "#16a34a",
|
|
24
|
+
colorDanger: "#dc2626",
|
|
25
|
+
colorSuccessSoft: "color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface))",
|
|
26
|
+
colorDangerSoft: "color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface))",
|
|
27
|
+
colorSuccessBorderSoft: "color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border))",
|
|
28
|
+
colorDangerBorderSoft: "color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border))",
|
|
29
|
+
radius: "0.75rem",
|
|
30
|
+
radiusControl: "calc(var(--vf-radius) - 0.125rem)",
|
|
31
|
+
radiusControlTight: "calc(var(--vf-radius) - 0.25rem)",
|
|
32
|
+
radiusSurface: "var(--vf-radius)",
|
|
33
|
+
radiusOverlay: "calc(var(--vf-radius) + 0.125rem)",
|
|
34
|
+
...m,
|
|
35
|
+
controlHeightSm: "1.75rem",
|
|
36
|
+
controlHeightMd: "2.25rem",
|
|
37
|
+
controlHeightLg: "2.5rem",
|
|
38
|
+
controlFontSizeSm: "0.875rem",
|
|
39
|
+
controlFontSizeMd: "0.9375rem",
|
|
40
|
+
controlFontSizeLg: "1rem",
|
|
41
|
+
buttonPaddingSm: "0.25rem 0.55rem",
|
|
42
|
+
buttonPaddingMd: "0.375rem 0.75rem",
|
|
43
|
+
buttonPaddingLg: "0.5rem 0.875rem",
|
|
44
|
+
buttonGap: "0.5rem",
|
|
45
|
+
fieldPaddingSm: "0.25rem 0.55rem",
|
|
46
|
+
fieldPaddingMd: "0.375rem 0.65rem",
|
|
47
|
+
fieldPaddingLg: "0.5rem 0.75rem",
|
|
48
|
+
textareaMinHeightSm: "4.5rem",
|
|
49
|
+
textareaMinHeightMd: "6rem",
|
|
50
|
+
textareaMinHeightLg: "7rem",
|
|
51
|
+
overlayPadding: "0.875rem",
|
|
52
|
+
overlayGap: "0.75rem",
|
|
53
|
+
overlayViewportPadding: "1rem",
|
|
54
|
+
menuPadding: "0.4rem",
|
|
55
|
+
menuGap: "0.2rem",
|
|
56
|
+
menuMinWidth: "12rem",
|
|
57
|
+
surfacePadding: "0.95rem",
|
|
58
|
+
surfaceGap: "0.625rem",
|
|
59
|
+
surfacePaddingCompact: "0.7rem",
|
|
60
|
+
surfaceGapCompact: "0.5rem",
|
|
61
|
+
sectionPadding: "0.75rem 0.9rem",
|
|
62
|
+
sectionGap: "0.75rem",
|
|
63
|
+
tabsGap: "0.875rem",
|
|
64
|
+
tabsListGap: "0.375rem",
|
|
65
|
+
tabsListPadding: "0.25rem",
|
|
66
|
+
tabsTabPaddingInline: "0.8rem",
|
|
67
|
+
tabsPanelPaddingTop: "0.75rem",
|
|
68
|
+
badgeHeight: "1.625rem",
|
|
69
|
+
badgePadding: "0.2rem 0.55rem",
|
|
70
|
+
badgeGap: "0.375rem",
|
|
71
|
+
badgeRadius: "999px",
|
|
72
|
+
badgeFontSize: "0.8125rem",
|
|
73
|
+
badgeLineHeight: "1.2",
|
|
74
|
+
tagHeight: "1.75rem",
|
|
75
|
+
tagPadding: "0.25rem 0.6rem",
|
|
76
|
+
tagFontSize: "0.8125rem",
|
|
77
|
+
tagLineHeight: "1.2",
|
|
78
|
+
tooltipPadding: "0.45rem 0.65rem",
|
|
79
|
+
tooltipMaxWidth: "16rem",
|
|
80
|
+
tooltipFontSize: "0.8125rem",
|
|
81
|
+
tooltipLineHeight: "1.4",
|
|
82
|
+
dialogWidthSm: "28rem",
|
|
83
|
+
dialogWidthMd: "36rem",
|
|
84
|
+
dialogWidthLg: "48rem",
|
|
85
|
+
dialogMaxHeight: "min(85vh, 48rem)",
|
|
86
|
+
dialogTitleFontSize: "1.125rem",
|
|
87
|
+
dialogHeaderGap: "0.75rem",
|
|
88
|
+
dialogActionsGap: "0.5rem",
|
|
89
|
+
popoverWidth: "min(100vw - 2rem, 22rem)",
|
|
90
|
+
floatingArrowSize: "0.625rem",
|
|
91
|
+
overlayBackdrop: "rgba(15, 23, 42, 0.56)",
|
|
92
|
+
overlayBackdropBlur: "6px",
|
|
93
|
+
alertPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 8%, var(--vf-color-surface))",
|
|
94
|
+
alertPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
|
|
95
|
+
alertContentGap: "0.25rem",
|
|
96
|
+
alertTitleFontSize: "0.9375rem",
|
|
97
|
+
cardTitleFontSize: "1rem",
|
|
98
|
+
panelTitleFontSize: "0.9375rem",
|
|
99
|
+
textLineHeight: "1.5",
|
|
100
|
+
headingLineHeight: "1.3",
|
|
101
|
+
tabsLineHeight: "1.2",
|
|
102
|
+
spacing: "1rem",
|
|
103
|
+
shadow: "none"
|
|
104
|
+
},
|
|
105
|
+
dark: {
|
|
106
|
+
colorBg: "#0f172a",
|
|
107
|
+
colorSurface: "#162033",
|
|
108
|
+
colorSurfaceMuted: "#1b2840",
|
|
109
|
+
colorText: "#eff4ff",
|
|
110
|
+
colorMuted: "#9fb0cf",
|
|
111
|
+
colorBorder: "#2d405f",
|
|
112
|
+
colorPrimary: "#6ea8fe",
|
|
113
|
+
colorPrimaryContrast: "#081120",
|
|
114
|
+
colorPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface))",
|
|
115
|
+
colorPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
|
|
116
|
+
colorFocusRing: "color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface))",
|
|
117
|
+
colorSuccess: "#4ade80",
|
|
118
|
+
colorDanger: "#f87171",
|
|
119
|
+
colorSuccessSoft: "color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface))",
|
|
120
|
+
colorDangerSoft: "color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface))",
|
|
121
|
+
colorSuccessBorderSoft: "color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border))",
|
|
122
|
+
colorDangerBorderSoft: "color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border))",
|
|
123
|
+
shadow: "none"
|
|
124
|
+
}
|
|
125
|
+
}, f = "vf-theme", g = "data-vf-theme";
|
|
126
|
+
function T(r) {
|
|
127
|
+
return r === "light" || r === "dark" || r === "system";
|
|
128
|
+
}
|
|
129
|
+
function y(r, e) {
|
|
130
|
+
return r === "system" ? e : r;
|
|
131
|
+
}
|
|
132
|
+
const l = "vf", v = "vf-theme-preset", u = ":root";
|
|
133
|
+
function p(r) {
|
|
134
|
+
return r.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
|
|
135
|
+
}
|
|
136
|
+
function c(...r) {
|
|
137
|
+
return Object.assign({}, ...r);
|
|
138
|
+
}
|
|
139
|
+
function P(r) {
|
|
140
|
+
return r;
|
|
141
|
+
}
|
|
142
|
+
function b(r = {}) {
|
|
143
|
+
const e = r.prefix ?? l, o = r.rootSelector ?? u, a = r.attribute ?? g;
|
|
144
|
+
return {
|
|
145
|
+
prefix: e,
|
|
146
|
+
rootSelector: o,
|
|
147
|
+
darkModeSelector: r.darkModeSelector ?? `${o}[${a}='dark']`,
|
|
148
|
+
attribute: a,
|
|
149
|
+
storageKey: r.storageKey ?? f,
|
|
150
|
+
styleId: r.styleId ?? v
|
|
151
|
+
};
|
|
152
|
+
}
|
|
153
|
+
function S(r = {}) {
|
|
154
|
+
const e = r.preset ?? d, o = r.extend, a = c(e.tokens, o, r.light), i = c(e.tokens, e.dark, o, r.dark);
|
|
155
|
+
return {
|
|
156
|
+
name: e.name,
|
|
157
|
+
light: a,
|
|
158
|
+
dark: i
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
function k(r = {}) {
|
|
162
|
+
return {
|
|
163
|
+
preset: S(r),
|
|
164
|
+
options: b(r.options)
|
|
165
|
+
};
|
|
166
|
+
}
|
|
167
|
+
function n(r, e = l) {
|
|
168
|
+
return Object.fromEntries(
|
|
169
|
+
Object.entries(r).map(([o, a]) => [`--${e}-${p(o)}`, a])
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
function s(r) {
|
|
173
|
+
return Object.entries(r).map(([e, o]) => ` ${e}: ${o};`).join(`
|
|
174
|
+
`);
|
|
175
|
+
}
|
|
176
|
+
function h(r) {
|
|
177
|
+
const { preset: e, options: o } = r, a = s(n(e.light, o.prefix)), i = s(n(e.dark, o.prefix));
|
|
178
|
+
return [
|
|
179
|
+
`${o.rootSelector} {
|
|
180
|
+
${a}
|
|
181
|
+
}`,
|
|
182
|
+
`${o.darkModeSelector} {
|
|
183
|
+
${i}
|
|
184
|
+
}`
|
|
185
|
+
].join(`
|
|
186
|
+
|
|
187
|
+
`);
|
|
188
|
+
}
|
|
189
|
+
function M(r, e = document) {
|
|
190
|
+
const o = r.options.styleId, a = e.getElementById(o) ?? Object.assign(e.createElement("style"), { id: o });
|
|
191
|
+
return a.textContent = h(r), a.parentNode || e.head.appendChild(a), a;
|
|
192
|
+
}
|
|
193
|
+
export {
|
|
194
|
+
f as D,
|
|
195
|
+
M as a,
|
|
196
|
+
y as b,
|
|
197
|
+
g as c,
|
|
198
|
+
P as d,
|
|
199
|
+
d as e,
|
|
200
|
+
T as i,
|
|
201
|
+
k as r
|
|
202
|
+
};
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--vf-color-bg: #fcfcfd;--vf-color-surface: #ffffff;--vf-color-surface-muted: #f5f7fb;--vf-color-text: #172033;--vf-color-muted: #69738a;--vf-color-border: #d8e0ef;--vf-color-primary: #0b63f6;--vf-color-primary-contrast: #ffffff;--vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));--vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));--vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface));--vf-color-success: #16a34a;--vf-color-danger: #dc2626;--vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));--vf-color-danger-soft: color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface));--vf-color-success-border-soft: color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border));--vf-color-danger-border-soft: color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border));--vf-radius: .75rem;--vf-radius-control: calc(var(--vf-radius) - .125rem);--vf-radius-control-tight: calc(var(--vf-radius) - .25rem);--vf-radius-surface: var(--vf-radius);--vf-radius-overlay: calc(var(--vf-radius) + .125rem);--vf-control-height-sm: 1.75rem;--vf-control-height-md: 2.25rem;--vf-control-height-lg: 2.5rem;--vf-control-font-size-sm: .875rem;--vf-control-font-size-md: .9375rem;--vf-control-font-size-lg: 1rem;--vf-button-padding-sm: .25rem .55rem;--vf-button-padding-md: .375rem .75rem;--vf-button-padding-lg: .5rem .875rem;--vf-button-gap: .5rem;--vf-field-padding-sm: .25rem .55rem;--vf-field-padding-md: .375rem .65rem;--vf-field-padding-lg: .5rem .75rem;--vf-textarea-min-height-sm: 4.5rem;--vf-textarea-min-height-md: 6rem;--vf-textarea-min-height-lg: 7rem;--vf-overlay-padding: .875rem;--vf-overlay-gap: .75rem;--vf-overlay-viewport-padding: 1rem;--vf-menu-padding: .4rem;--vf-menu-gap: .2rem;--vf-menu-min-width: 12rem;--vf-surface-padding: .95rem;--vf-surface-gap: .625rem;--vf-surface-padding-compact: .7rem;--vf-surface-gap-compact: .5rem;--vf-section-padding: .75rem .9rem;--vf-section-gap: .75rem;--vf-tabs-gap: .875rem;--vf-tabs-list-gap: .375rem;--vf-tabs-list-padding: .25rem;--vf-tabs-tab-padding-inline: .8rem;--vf-tabs-panel-padding-top: .75rem;--vf-badge-height: 1.625rem;--vf-badge-padding: .2rem .55rem;--vf-badge-gap: .375rem;--vf-badge-radius: 999px;--vf-badge-font-size: .8125rem;--vf-badge-line-height: 1.2;--vf-tag-height: 1.75rem;--vf-tag-padding: .25rem .6rem;--vf-tag-font-size: .8125rem;--vf-tag-line-height: 1.2;--vf-tooltip-padding: .45rem .65rem;--vf-tooltip-max-width: 16rem;--vf-tooltip-font-size: .8125rem;--vf-tooltip-line-height: 1.4;--vf-dialog-width-sm: 28rem;--vf-dialog-width-md: 36rem;--vf-dialog-width-lg: 48rem;--vf-dialog-max-height: min(85vh, 48rem);--vf-dialog-title-font-size: 1.125rem;--vf-dialog-header-gap: .75rem;--vf-dialog-actions-gap: .5rem;--vf-popover-width: min(100vw - 2rem, 22rem);--vf-floating-arrow-size: .625rem;--vf-overlay-backdrop: rgba(15, 23, 42, .56);--vf-overlay-backdrop-blur: 6px;--vf-alert-primary-soft: color-mix(in srgb, var(--vf-color-primary) 8%, var(--vf-color-surface));--vf-alert-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));--vf-alert-content-gap: .25rem;--vf-alert-title-font-size: .9375rem;--vf-card-title-font-size: 1rem;--vf-panel-title-font-size: .9375rem;--vf-text-line-height: 1.5;--vf-heading-line-height: 1.3;--vf-tabs-line-height: 1.2;--vf-spacing: 1rem;--vf-shadow: none}:root{color-scheme:light;background-color:var(--vf-color-bg);color:var(--vf-color-text)}:root[data-vf-theme=dark]{color-scheme:dark;--vf-color-bg: #0f172a;--vf-color-surface: #162033;--vf-color-surface-muted: #1b2840;--vf-color-text: #eff4ff;--vf-color-muted: #9fb0cf;--vf-color-border: #2d405f;--vf-color-primary: #6ea8fe;--vf-color-primary-contrast: #081120;--vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));--vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));--vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface));--vf-color-success: #4ade80;--vf-color-danger: #f87171;--vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));--vf-color-danger-soft: color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface));--vf-color-success-border-soft: color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border));--vf-color-danger-border-soft: color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border));--vf-shadow: none}.vf-button,.vf-link,.vf-input,.vf-card,.vf-textarea,.vf-panel,.vf-badge,.vf-divider,.vf-dialog,.vf-dialog__overlay,.vf-dialog__content,.vf-dropdown,.vf-dropdown__trigger,.vf-dropdown__menu,.vf-accordion,.vf-accordion__trigger,.vf-tooltip,.vf-tooltip__trigger,.vf-tooltip__content,.vf-tabs,.vf-tabs__list,.vf-tabs__tab,.vf-tabs__panel{box-sizing:border-box;font:inherit}.vf-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--vf-button-gap);min-height:var(--vf-control-height-md);padding:var(--vf-button-padding-md);border:1px solid transparent;border-radius:var(--vf-radius-control);background:var(--vf-color-primary);color:var(--vf-color-primary-contrast);cursor:pointer;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.vf-icon-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--vf-control-height-md);height:var(--vf-control-height-md);padding:0;border:1px solid transparent;border-radius:var(--vf-radius-control);background:transparent;color:var(--vf-color-text);cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.vf-button:hover:not(:disabled){background:var(--vf-color-primary);filter:brightness(.96)}.vf-button:focus-visible,.vf-icon-button:focus-visible{outline:none;border-color:var(--vf-color-primary);border-radius:var(--vf-radius-control);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-button:disabled,.vf-icon-button:disabled{opacity:.65;cursor:not-allowed}.vf-button--secondary{background:var(--vf-color-surface-muted);border-color:var(--vf-color-border);color:var(--vf-color-text)}.vf-icon-button--primary{background:var(--vf-color-primary);color:var(--vf-color-primary-contrast)}.vf-icon-button--secondary{background:var(--vf-color-surface-muted);border-color:var(--vf-color-border);color:var(--vf-color-text)}.vf-button--ghost,.vf-icon-button--ghost{background:transparent;color:var(--vf-color-text)}.vf-button--secondary:hover:not(:disabled),.vf-button--ghost:hover:not(:disabled),.vf-icon-button--secondary:hover:not(:disabled),.vf-icon-button--ghost:hover:not(:disabled){background:var(--vf-color-surface-muted);border-color:var(--vf-color-primary)}.vf-icon-button--primary:hover:not(:disabled){background:var(--vf-color-primary);filter:brightness(.96)}.vf-button--sm{min-height:var(--vf-control-height-sm);padding:var(--vf-button-padding-sm);font-size:var(--vf-control-font-size-sm)}.vf-icon-button--sm{width:var(--vf-control-height-sm);height:var(--vf-control-height-sm)}.vf-button--lg{min-height:var(--vf-control-height-lg);padding:var(--vf-button-padding-lg);font-size:var(--vf-control-font-size-lg)}.vf-icon-button--lg{width:var(--vf-control-height-lg);height:var(--vf-control-height-lg)}.vf-button--block{width:100%}.vf-link{display:inline-flex;width:fit-content;max-width:100%;align-self:flex-start;border:1px solid transparent;color:var(--vf-color-primary);text-decoration:none;text-underline-offset:.2em;transition:color .18s ease}.vf-link:hover{color:var(--vf-color-primary)}.vf-link:focus-visible{outline:none;border-color:var(--vf-color-primary);border-radius:var(--vf-radius-control);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-link--muted{color:var(--vf-color-muted)}.vf-link--underline{text-decoration:underline}.vf-link--underline:focus-visible{text-decoration:none}.vf-input,.vf-textarea{width:100%}.vf-input{min-height:var(--vf-control-height-md);padding:var(--vf-field-padding-md);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-control);background:var(--vf-color-surface);color:var(--vf-color-text);transition:border-color .18s ease}.vf-input::placeholder{color:var(--vf-color-muted)}.vf-input:focus,.vf-input:focus-visible{border-color:var(--vf-color-primary)}.vf-input:focus-visible,.vf-textarea:focus-visible{outline:none;border-radius:var(--vf-radius-control);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-input--sm{min-height:var(--vf-control-height-sm);padding:var(--vf-field-padding-sm);font-size:var(--vf-control-font-size-sm)}.vf-input--lg{min-height:var(--vf-control-height-lg);padding:var(--vf-field-padding-lg)}.vf-input--invalid{border-color:var(--vf-color-danger)}.vf-textarea{min-height:var(--vf-textarea-min-height-md);padding:var(--vf-field-padding-md);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-control);background:var(--vf-color-surface);color:var(--vf-color-text);resize:vertical;transition:border-color .18s ease}.vf-textarea::placeholder{color:var(--vf-color-muted)}.vf-textarea:focus,.vf-textarea:focus-visible{border-color:var(--vf-color-primary)}.vf-textarea--sm{min-height:var(--vf-textarea-min-height-sm);padding:var(--vf-field-padding-sm);font-size:var(--vf-control-font-size-sm)}.vf-textarea--lg{min-height:var(--vf-textarea-min-height-lg);padding:var(--vf-field-padding-lg)}.vf-textarea--invalid{border-color:var(--vf-color-danger)}.vf-input:disabled,.vf-textarea:disabled{opacity:.65;cursor:not-allowed}.vf-card{display:flex;flex-direction:column;gap:var(--vf-surface-gap);padding:var(--vf-surface-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-surface);background:var(--vf-color-surface);color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-card--compact{padding:var(--vf-surface-padding-compact);gap:var(--vf-surface-gap-compact)}.vf-card__title{margin:0;font-size:var(--vf-card-title-font-size);font-weight:600;line-height:var(--vf-heading-line-height)}.vf-card__body{color:var(--vf-color-muted)}.vf-panel{display:flex;flex-direction:column;gap:var(--vf-surface-gap);padding:var(--vf-surface-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-surface);background:var(--vf-color-surface);color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-panel--subtle{background:transparent;box-shadow:none}.vf-panel__title{margin:0;font-size:var(--vf-panel-title-font-size);font-weight:600;line-height:var(--vf-heading-line-height)}.vf-badge{display:inline-flex;align-items:center;gap:var(--vf-badge-gap);min-height:var(--vf-badge-height);padding:var(--vf-badge-padding);border-radius:var(--vf-badge-radius);font-size:var(--vf-badge-font-size);font-weight:600;line-height:var(--vf-badge-line-height);white-space:nowrap;background:var(--vf-color-surface-muted);border:1px solid var(--vf-color-border);color:var(--vf-color-text)}.vf-badge--primary{background:var(--vf-color-primary-soft);border-color:var(--vf-color-primary);color:var(--vf-color-primary)}.vf-badge--success{background:var(--vf-color-success-soft);border-color:var(--vf-color-success);color:var(--vf-color-success)}.vf-badge--danger{background:var(--vf-color-danger-soft);border-color:var(--vf-color-danger);color:var(--vf-color-danger)}.vf-tag{display:inline-flex;align-items:center;min-height:var(--vf-tag-height);padding:var(--vf-tag-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-control-tight);background:var(--vf-color-surface);color:var(--vf-color-text);font-size:var(--vf-tag-font-size);line-height:var(--vf-tag-line-height);white-space:nowrap}.vf-tag--primary{border-color:var(--vf-color-primary);color:var(--vf-color-primary)}.vf-tag--success{border-color:var(--vf-color-success);color:var(--vf-color-success)}.vf-tag--danger{border-color:var(--vf-color-danger);color:var(--vf-color-danger)}.vf-alert{display:grid;grid-template-columns:auto 1fr;gap:var(--vf-section-gap);padding:var(--vf-section-padding);border:1px solid var(--vf-alert-primary-border-soft);border-radius:var(--vf-radius-surface);background:var(--vf-alert-primary-soft);color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-alert--success{border-color:var(--vf-color-success-border-soft);background:var(--vf-color-success-soft)}.vf-alert--danger{border-color:var(--vf-color-danger-border-soft);background:var(--vf-color-danger-soft)}.vf-alert__icon{display:inline-flex;align-items:center;justify-content:center;align-self:start;color:var(--vf-color-primary)}.vf-alert--success .vf-alert__icon{color:var(--vf-color-success)}.vf-alert--danger .vf-alert__icon{color:var(--vf-color-danger)}.vf-alert__content{display:grid;gap:var(--vf-alert-content-gap)}.vf-alert__title{margin:0;font-size:var(--vf-alert-title-font-size);font-weight:600;line-height:var(--vf-heading-line-height)}.vf-alert__body{color:var(--vf-color-muted);line-height:var(--vf-text-line-height)}.vf-divider{margin:0;border:0;background:var(--vf-color-border);flex-shrink:0}.vf-divider--horizontal{width:100%;height:1px}.vf-divider--vertical{width:1px;align-self:stretch}.vf-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--vf-overlay-viewport-padding)}.vf-dialog__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--vf-overlay-backdrop);-webkit-backdrop-filter:blur(var(--vf-overlay-backdrop-blur));backdrop-filter:blur(var(--vf-overlay-backdrop-blur))}.vf-dialog__content{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--vf-overlay-gap);width:min(100%,var(--vf-dialog-width-md));max-height:var(--vf-dialog-max-height);overflow:auto;padding:var(--vf-overlay-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-overlay);background:var(--vf-color-surface);color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-dialog__content:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-dialog__content--sm{width:min(100%,var(--vf-dialog-width-sm))}.vf-dialog__content--lg{width:min(100%,var(--vf-dialog-width-lg))}.vf-dialog__header,.vf-dialog__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--vf-dialog-header-gap)}.vf-dialog__actions{display:inline-flex;align-items:center;gap:var(--vf-dialog-actions-gap)}.vf-dialog__title{margin:0;font-size:var(--vf-dialog-title-font-size);font-weight:700;line-height:var(--vf-heading-line-height)}.vf-dialog__description{margin:0;color:var(--vf-color-muted);line-height:var(--vf-text-line-height)}.vf-dialog__body{color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-dropdown,.vf-popover{position:relative;display:inline-flex;flex-direction:column}.vf-dropdown__trigger,.vf-popover__trigger{width:fit-content;border:1px solid transparent;border-radius:var(--vf-radius-control)}.vf-dropdown__trigger:focus-visible,.vf-popover__trigger:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-dropdown__menu{position:fixed;top:0;left:0;z-index:900;display:flex;flex-direction:column;gap:var(--vf-menu-gap);min-width:var(--vf-menu-min-width);padding:var(--vf-menu-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-control);background:var(--vf-color-surface);will-change:left,top}.vf-dropdown__arrow{position:absolute;z-index:0;width:var(--vf-floating-arrow-size);height:var(--vf-floating-arrow-size);background:var(--vf-color-surface);border-left:1px solid var(--vf-color-border);border-top:1px solid var(--vf-color-border);transform:rotate(45deg);pointer-events:none}.vf-dropdown__arrow--bottom{margin-top:-1px}.vf-dropdown__arrow--top{margin-top:1px}.vf-popover__content{position:fixed;left:0;top:0;z-index:925;width:var(--vf-popover-width);padding:var(--vf-section-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-surface);background:var(--vf-color-surface);color:var(--vf-color-text);line-height:var(--vf-text-line-height);will-change:left,top}.vf-popover__arrow{position:absolute;width:var(--vf-floating-arrow-size);height:var(--vf-floating-arrow-size);background:var(--vf-color-surface);border-left:1px solid var(--vf-color-border);border-top:1px solid var(--vf-color-border);transform:rotate(45deg);pointer-events:none}.vf-popover__arrow--bottom{margin-top:-1px}.vf-popover__arrow--top{margin-top:1px}.vf-dropdown__item{position:relative;z-index:1;display:flex;align-items:center;width:100%;min-height:var(--vf-control-height-sm);padding:var(--vf-field-padding-sm);border:1px solid transparent;border-radius:var(--vf-radius-control-tight);background:transparent;color:var(--vf-color-text);text-align:left;cursor:pointer}.vf-dropdown__item:hover{background:transparent;color:var(--vf-color-primary)}.vf-dropdown__item:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring);background:transparent;color:var(--vf-color-primary)}.vf-tooltip{position:relative;display:inline-flex;width:fit-content;max-width:100%;align-self:flex-start}.vf-tooltip__trigger{display:inline-flex;width:fit-content;max-width:100%}.vf-tooltip__content{position:fixed;left:0;top:0;z-index:950;max-width:var(--vf-tooltip-max-width);padding:var(--vf-tooltip-padding);border-radius:var(--vf-radius-control-tight);background:var(--vf-color-text);color:var(--vf-color-bg);font-size:var(--vf-tooltip-font-size);line-height:var(--vf-tooltip-line-height);will-change:left,top}.vf-tooltip__arrow{position:absolute;width:var(--vf-floating-arrow-size);height:var(--vf-floating-arrow-size);background:var(--vf-color-text);transform:rotate(45deg);pointer-events:none}.vf-accordion{border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-surface);background:var(--vf-color-surface);color:var(--vf-color-text)}.vf-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--vf-spacing);position:relative;z-index:1;width:100%;padding:var(--vf-section-padding);border:1px solid transparent;border-radius:inherit;background:transparent;color:inherit;cursor:pointer;text-align:left}.vf-accordion__trigger[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.vf-accordion__trigger:hover:not(:disabled){background:transparent;color:var(--vf-color-primary)}.vf-accordion__trigger:focus-visible{z-index:2;outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-accordion__icon{flex-shrink:0;color:var(--vf-color-muted);transition:transform .18s ease}.vf-accordion__icon--open{transform:rotate(180deg)}.vf-accordion__content{position:relative;z-index:1;border-top:1px solid var(--vf-color-border);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;padding:var(--vf-section-padding);background:var(--vf-color-surface);color:var(--vf-color-muted);line-height:var(--vf-text-line-height)}.vf-tabs{display:flex;flex-direction:column;gap:var(--vf-tabs-gap)}.vf-tabs__list{display:inline-flex;align-items:center;gap:var(--vf-tabs-list-gap);width:fit-content;padding:var(--vf-tabs-list-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-overlay);background:var(--vf-color-surface-muted)}.vf-tabs__tab{display:inline-flex;align-items:center;justify-content:center;min-height:var(--vf-control-height-md);padding:0 var(--vf-tabs-tab-padding-inline);border:1px solid transparent;border-radius:var(--vf-radius-control-tight);background:transparent;color:var(--vf-color-muted);cursor:pointer;white-space:nowrap;line-height:var(--vf-tabs-line-height)}.vf-tabs__tab:hover:not(:disabled){color:var(--vf-color-primary);background:transparent}.vf-tabs__tab[aria-selected=true]{background:var(--vf-color-surface);color:var(--vf-color-primary);border:1px solid var(--vf-color-primary)}.vf-tabs__tab:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.vf-tabs__panel{border:1px solid transparent;border-radius:var(--vf-radius-control);padding:var(--vf-tabs-panel-padding-top) 0 0;color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-tabs__panel:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}
|
|
1
|
+
:root{--vf-breakpoint-xs: 480px;--vf-breakpoint-sm: 640px;--vf-breakpoint-md: 768px;--vf-breakpoint-lg: 1024px;--vf-breakpoint-xl: 1280px;--vf-breakpoint-2xl: 1536px}:root{--vf-color-bg: #fcfcfd;--vf-color-surface: #ffffff;--vf-color-surface-muted: #f5f7fb;--vf-color-text: #172033;--vf-color-muted: #69738a;--vf-color-border: #d8e0ef;--vf-color-primary: #0b63f6;--vf-color-primary-contrast: #ffffff;--vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));--vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));--vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface));--vf-color-success: #16a34a;--vf-color-danger: #dc2626;--vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));--vf-color-danger-soft: color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface));--vf-color-success-border-soft: color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border));--vf-color-danger-border-soft: color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border));--vf-radius: .75rem;--vf-radius-control: calc(var(--vf-radius) - .125rem);--vf-radius-control-tight: calc(var(--vf-radius) - .25rem);--vf-radius-surface: var(--vf-radius);--vf-radius-overlay: calc(var(--vf-radius) + .125rem);--vf-control-height-sm: 1.75rem;--vf-control-height-md: 2.25rem;--vf-control-height-lg: 2.5rem;--vf-control-font-size-sm: .875rem;--vf-control-font-size-md: .9375rem;--vf-control-font-size-lg: 1rem;--vf-button-padding-sm: .25rem .55rem;--vf-button-padding-md: .375rem .75rem;--vf-button-padding-lg: .5rem .875rem;--vf-button-gap: .5rem;--vf-field-padding-sm: .25rem .55rem;--vf-field-padding-md: .375rem .65rem;--vf-field-padding-lg: .5rem .75rem;--vf-textarea-min-height-sm: 4.5rem;--vf-textarea-min-height-md: 6rem;--vf-textarea-min-height-lg: 7rem;--vf-overlay-padding: .875rem;--vf-overlay-gap: .75rem;--vf-overlay-viewport-padding: 1rem;--vf-menu-padding: .4rem;--vf-menu-gap: .2rem;--vf-menu-min-width: 12rem;--vf-surface-padding: .95rem;--vf-surface-gap: .625rem;--vf-surface-padding-compact: .7rem;--vf-surface-gap-compact: .5rem;--vf-section-padding: .75rem .9rem;--vf-section-gap: .75rem;--vf-tabs-gap: .875rem;--vf-tabs-list-gap: .375rem;--vf-tabs-list-padding: .25rem;--vf-tabs-tab-padding-inline: .8rem;--vf-tabs-panel-padding-top: .75rem;--vf-badge-height: 1.625rem;--vf-badge-padding: .2rem .55rem;--vf-badge-gap: .375rem;--vf-badge-radius: 999px;--vf-badge-font-size: .8125rem;--vf-badge-line-height: 1.2;--vf-tag-height: 1.75rem;--vf-tag-padding: .25rem .6rem;--vf-tag-font-size: .8125rem;--vf-tag-line-height: 1.2;--vf-tooltip-padding: .45rem .65rem;--vf-tooltip-max-width: 16rem;--vf-tooltip-font-size: .8125rem;--vf-tooltip-line-height: 1.4;--vf-dialog-width-sm: 28rem;--vf-dialog-width-md: 36rem;--vf-dialog-width-lg: 48rem;--vf-dialog-max-height: min(85vh, 48rem);--vf-dialog-title-font-size: 1.125rem;--vf-dialog-header-gap: .75rem;--vf-dialog-actions-gap: .5rem;--vf-popover-width: min(100vw - 2rem, 22rem);--vf-floating-arrow-size: .625rem;--vf-overlay-backdrop: rgba(15, 23, 42, .56);--vf-overlay-backdrop-blur: 6px;--vf-alert-primary-soft: color-mix(in srgb, var(--vf-color-primary) 8%, var(--vf-color-surface));--vf-alert-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));--vf-alert-content-gap: .25rem;--vf-alert-title-font-size: .9375rem;--vf-card-title-font-size: 1rem;--vf-panel-title-font-size: .9375rem;--vf-text-line-height: 1.5;--vf-heading-line-height: 1.3;--vf-tabs-line-height: 1.2;--vf-spacing: 1rem;--vf-shadow: none}:root{color-scheme:light;background-color:var(--vf-color-bg);color:var(--vf-color-text)}:root[data-vf-theme=dark]{color-scheme:dark;--vf-color-bg: #0f172a;--vf-color-surface: #162033;--vf-color-surface-muted: #1b2840;--vf-color-text: #eff4ff;--vf-color-muted: #9fb0cf;--vf-color-border: #2d405f;--vf-color-primary: #6ea8fe;--vf-color-primary-contrast: #081120;--vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));--vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));--vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface));--vf-color-success: #4ade80;--vf-color-danger: #f87171;--vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));--vf-color-danger-soft: color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface));--vf-color-success-border-soft: color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border));--vf-color-danger-border-soft: color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border));--vf-shadow: none}.vf-button,.vf-link,.vf-input,.vf-card,.vf-textarea,.vf-panel,.vf-badge,.vf-divider,.vf-dialog,.vf-dialog__overlay,.vf-dialog__content,.vf-dropdown,.vf-dropdown__trigger,.vf-dropdown__menu,.vf-accordion,.vf-accordion__trigger,.vf-tooltip,.vf-tooltip__trigger,.vf-tooltip__content,.vf-tabs,.vf-tabs__list,.vf-tabs__tab,.vf-tabs__panel{box-sizing:border-box;font:inherit}.vf-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--vf-button-gap);min-height:var(--vf-control-height-md);padding:var(--vf-button-padding-md);border:1px solid transparent;border-radius:var(--vf-radius-control);background:var(--vf-color-primary);color:var(--vf-color-primary-contrast);cursor:pointer;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.vf-icon-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--vf-control-height-md);height:var(--vf-control-height-md);padding:0;border:1px solid transparent;border-radius:var(--vf-radius-control);background:transparent;color:var(--vf-color-text);cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.vf-button:hover:not(:disabled){background:var(--vf-color-primary);filter:brightness(.96)}.vf-button:focus-visible,.vf-icon-button:focus-visible{outline:none;border-color:var(--vf-color-primary);border-radius:var(--vf-radius-control);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-button:disabled,.vf-icon-button:disabled{opacity:.65;cursor:not-allowed}.vf-button--secondary{background:var(--vf-color-surface-muted);border-color:var(--vf-color-border);color:var(--vf-color-text)}.vf-icon-button--primary{background:var(--vf-color-primary);color:var(--vf-color-primary-contrast)}.vf-icon-button--secondary{background:var(--vf-color-surface-muted);border-color:var(--vf-color-border);color:var(--vf-color-text)}.vf-button--ghost,.vf-icon-button--ghost{background:transparent;color:var(--vf-color-text)}.vf-button--secondary:hover:not(:disabled),.vf-button--ghost:hover:not(:disabled),.vf-icon-button--secondary:hover:not(:disabled),.vf-icon-button--ghost:hover:not(:disabled){background:var(--vf-color-surface-muted);border-color:var(--vf-color-primary)}.vf-icon-button--primary:hover:not(:disabled){background:var(--vf-color-primary);filter:brightness(.96)}.vf-button--sm{min-height:var(--vf-control-height-sm);padding:var(--vf-button-padding-sm);font-size:var(--vf-control-font-size-sm)}.vf-icon-button--sm{width:var(--vf-control-height-sm);height:var(--vf-control-height-sm)}.vf-button--lg{min-height:var(--vf-control-height-lg);padding:var(--vf-button-padding-lg);font-size:var(--vf-control-font-size-lg)}.vf-icon-button--lg{width:var(--vf-control-height-lg);height:var(--vf-control-height-lg)}.vf-button--block{width:100%}.vf-link{display:inline-flex;width:fit-content;max-width:100%;align-self:flex-start;border:1px solid transparent;color:var(--vf-color-primary);text-decoration:none;text-underline-offset:.2em;transition:color .18s ease}.vf-link:hover{color:var(--vf-color-primary)}.vf-link:focus-visible{outline:none;border-color:var(--vf-color-primary);border-radius:var(--vf-radius-control);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-link--muted{color:var(--vf-color-muted)}.vf-link--underline{text-decoration:underline}.vf-link--underline:focus-visible{text-decoration:none}.vf-input,.vf-textarea{width:100%}.vf-input{min-height:var(--vf-control-height-md);padding:var(--vf-field-padding-md);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-control);background:var(--vf-color-surface);color:var(--vf-color-text);transition:border-color .18s ease}.vf-input::placeholder{color:var(--vf-color-muted)}.vf-input:focus,.vf-input:focus-visible{border-color:var(--vf-color-primary)}.vf-input:focus-visible,.vf-textarea:focus-visible{outline:none;border-radius:var(--vf-radius-control);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-input--sm{min-height:var(--vf-control-height-sm);padding:var(--vf-field-padding-sm);font-size:var(--vf-control-font-size-sm)}.vf-input--lg{min-height:var(--vf-control-height-lg);padding:var(--vf-field-padding-lg)}.vf-input--invalid{border-color:var(--vf-color-danger)}.vf-textarea{min-height:var(--vf-textarea-min-height-md);padding:var(--vf-field-padding-md);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-control);background:var(--vf-color-surface);color:var(--vf-color-text);resize:vertical;transition:border-color .18s ease}.vf-textarea::placeholder{color:var(--vf-color-muted)}.vf-textarea:focus,.vf-textarea:focus-visible{border-color:var(--vf-color-primary)}.vf-textarea--sm{min-height:var(--vf-textarea-min-height-sm);padding:var(--vf-field-padding-sm);font-size:var(--vf-control-font-size-sm)}.vf-textarea--lg{min-height:var(--vf-textarea-min-height-lg);padding:var(--vf-field-padding-lg)}.vf-textarea--invalid{border-color:var(--vf-color-danger)}.vf-input:disabled,.vf-textarea:disabled{opacity:.65;cursor:not-allowed}.vf-card{display:flex;flex-direction:column;gap:var(--vf-surface-gap);padding:var(--vf-surface-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-surface);background:var(--vf-color-surface);color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-card--compact{padding:var(--vf-surface-padding-compact);gap:var(--vf-surface-gap-compact)}.vf-card__title{margin:0;font-size:var(--vf-card-title-font-size);font-weight:600;line-height:var(--vf-heading-line-height)}.vf-card__body{color:var(--vf-color-muted)}.vf-panel{display:flex;flex-direction:column;gap:var(--vf-surface-gap);padding:var(--vf-surface-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-surface);background:var(--vf-color-surface);color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-panel--subtle{background:transparent;box-shadow:none}.vf-panel__title{margin:0;font-size:var(--vf-panel-title-font-size);font-weight:600;line-height:var(--vf-heading-line-height)}.vf-badge{display:inline-flex;align-items:center;gap:var(--vf-badge-gap);min-height:var(--vf-badge-height);padding:var(--vf-badge-padding);border-radius:var(--vf-badge-radius);font-size:var(--vf-badge-font-size);font-weight:600;line-height:var(--vf-badge-line-height);white-space:nowrap;background:var(--vf-color-surface-muted);border:1px solid var(--vf-color-border);color:var(--vf-color-text)}.vf-badge--primary{background:var(--vf-color-primary-soft);border-color:var(--vf-color-primary);color:var(--vf-color-primary)}.vf-badge--success{background:var(--vf-color-success-soft);border-color:var(--vf-color-success);color:var(--vf-color-success)}.vf-badge--danger{background:var(--vf-color-danger-soft);border-color:var(--vf-color-danger);color:var(--vf-color-danger)}.vf-tag{display:inline-flex;align-items:center;min-height:var(--vf-tag-height);padding:var(--vf-tag-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-control-tight);background:var(--vf-color-surface);color:var(--vf-color-text);font-size:var(--vf-tag-font-size);line-height:var(--vf-tag-line-height);white-space:nowrap}.vf-tag--primary{border-color:var(--vf-color-primary);color:var(--vf-color-primary)}.vf-tag--success{border-color:var(--vf-color-success);color:var(--vf-color-success)}.vf-tag--danger{border-color:var(--vf-color-danger);color:var(--vf-color-danger)}.vf-alert{display:grid;grid-template-columns:auto 1fr;gap:var(--vf-section-gap);padding:var(--vf-section-padding);border:1px solid var(--vf-alert-primary-border-soft);border-radius:var(--vf-radius-surface);background:var(--vf-alert-primary-soft);color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-alert--success{border-color:var(--vf-color-success-border-soft);background:var(--vf-color-success-soft)}.vf-alert--danger{border-color:var(--vf-color-danger-border-soft);background:var(--vf-color-danger-soft)}.vf-alert__icon{display:inline-flex;align-items:center;justify-content:center;align-self:start;color:var(--vf-color-primary)}.vf-alert--success .vf-alert__icon{color:var(--vf-color-success)}.vf-alert--danger .vf-alert__icon{color:var(--vf-color-danger)}.vf-alert__content{display:grid;gap:var(--vf-alert-content-gap)}.vf-alert__title{margin:0;font-size:var(--vf-alert-title-font-size);font-weight:600;line-height:var(--vf-heading-line-height)}.vf-alert__body{color:var(--vf-color-muted);line-height:var(--vf-text-line-height)}.vf-divider{margin:0;border:0;background:var(--vf-color-border);flex-shrink:0}.vf-divider--horizontal{width:100%;height:1px}.vf-divider--vertical{width:1px;align-self:stretch}.vf-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--vf-overlay-viewport-padding)}.vf-dialog__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--vf-overlay-backdrop);-webkit-backdrop-filter:blur(var(--vf-overlay-backdrop-blur));backdrop-filter:blur(var(--vf-overlay-backdrop-blur))}.vf-dialog__content{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--vf-overlay-gap);width:min(100%,var(--vf-dialog-width-md));max-height:var(--vf-dialog-max-height);overflow:auto;padding:var(--vf-overlay-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-overlay);background:var(--vf-color-surface);color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-dialog__content:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-dialog__content--sm{width:min(100%,var(--vf-dialog-width-sm))}.vf-dialog__content--lg{width:min(100%,var(--vf-dialog-width-lg))}.vf-dialog__header,.vf-dialog__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--vf-dialog-header-gap)}.vf-dialog__actions{display:inline-flex;align-items:center;gap:var(--vf-dialog-actions-gap)}.vf-dialog__title{margin:0;font-size:var(--vf-dialog-title-font-size);font-weight:700;line-height:var(--vf-heading-line-height)}.vf-dialog__description{margin:0;color:var(--vf-color-muted);line-height:var(--vf-text-line-height)}.vf-dialog__body{color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-dropdown,.vf-popover{position:relative;display:inline-flex;flex-direction:column}.vf-dropdown__trigger,.vf-popover__trigger{width:fit-content;border:1px solid transparent;border-radius:var(--vf-radius-control)}.vf-dropdown__trigger:focus-visible,.vf-popover__trigger:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-dropdown__menu{position:fixed;top:0;left:0;z-index:900;display:flex;flex-direction:column;gap:var(--vf-menu-gap);min-width:var(--vf-menu-min-width);padding:var(--vf-menu-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-control);background:var(--vf-color-surface);will-change:left,top}.vf-dropdown__arrow{position:absolute;z-index:0;width:var(--vf-floating-arrow-size);height:var(--vf-floating-arrow-size);background:var(--vf-color-surface);border-left:1px solid var(--vf-color-border);border-top:1px solid var(--vf-color-border);transform:rotate(45deg);pointer-events:none}.vf-dropdown__arrow--bottom{margin-top:-1px}.vf-dropdown__arrow--top{margin-top:1px}.vf-popover__content{position:fixed;left:0;top:0;z-index:925;width:var(--vf-popover-width);padding:var(--vf-section-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-surface);background:var(--vf-color-surface);color:var(--vf-color-text);line-height:var(--vf-text-line-height);will-change:left,top}.vf-popover__arrow{position:absolute;width:var(--vf-floating-arrow-size);height:var(--vf-floating-arrow-size);background:var(--vf-color-surface);border-left:1px solid var(--vf-color-border);border-top:1px solid var(--vf-color-border);transform:rotate(45deg);pointer-events:none}.vf-popover__arrow--bottom{margin-top:-1px}.vf-popover__arrow--top{margin-top:1px}.vf-dropdown__item{position:relative;z-index:1;display:flex;align-items:center;width:100%;min-height:var(--vf-control-height-sm);padding:var(--vf-field-padding-sm);border:1px solid transparent;border-radius:var(--vf-radius-control-tight);background:transparent;color:var(--vf-color-text);text-align:left;cursor:pointer}.vf-dropdown__item:hover{background:transparent;color:var(--vf-color-primary)}.vf-dropdown__item:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring);background:transparent;color:var(--vf-color-primary)}.vf-tooltip{position:relative;display:inline-flex;width:fit-content;max-width:100%;align-self:flex-start}.vf-tooltip__trigger{display:inline-flex;width:fit-content;max-width:100%}.vf-tooltip__content{position:fixed;left:0;top:0;z-index:950;max-width:var(--vf-tooltip-max-width);padding:var(--vf-tooltip-padding);border-radius:var(--vf-radius-control-tight);background:var(--vf-color-text);color:var(--vf-color-bg);font-size:var(--vf-tooltip-font-size);line-height:var(--vf-tooltip-line-height);will-change:left,top}.vf-tooltip__arrow{position:absolute;width:var(--vf-floating-arrow-size);height:var(--vf-floating-arrow-size);background:var(--vf-color-text);transform:rotate(45deg);pointer-events:none}.vf-accordion{border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-surface);background:var(--vf-color-surface);color:var(--vf-color-text)}.vf-accordion__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--vf-spacing);position:relative;z-index:1;width:100%;padding:var(--vf-section-padding);border:1px solid transparent;border-radius:inherit;background:transparent;color:inherit;cursor:pointer;text-align:left}.vf-accordion__trigger[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.vf-accordion__trigger:hover:not(:disabled){background:transparent;color:var(--vf-color-primary)}.vf-accordion__trigger:focus-visible{z-index:2;outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-accordion__icon{flex-shrink:0;color:var(--vf-color-muted);transition:transform .18s ease}.vf-accordion__icon--open{transform:rotate(180deg)}.vf-accordion__content{position:relative;z-index:1;border-top:1px solid var(--vf-color-border);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;padding:var(--vf-section-padding);background:var(--vf-color-surface);color:var(--vf-color-muted);line-height:var(--vf-text-line-height)}.vf-tabs{display:flex;flex-direction:column;gap:var(--vf-tabs-gap)}.vf-tabs__list{display:inline-flex;align-items:center;gap:var(--vf-tabs-list-gap);width:fit-content;padding:var(--vf-tabs-list-padding);border:1px solid var(--vf-color-border);border-radius:var(--vf-radius-overlay);background:var(--vf-color-surface-muted)}.vf-tabs__tab{display:inline-flex;align-items:center;justify-content:center;min-height:var(--vf-control-height-md);padding:0 var(--vf-tabs-tab-padding-inline);border:1px solid transparent;border-radius:var(--vf-radius-control-tight);background:transparent;color:var(--vf-color-muted);cursor:pointer;white-space:nowrap;line-height:var(--vf-tabs-line-height)}.vf-tabs__tab:hover:not(:disabled){color:var(--vf-color-primary);background:transparent}.vf-tabs__tab[aria-selected=true]{background:var(--vf-color-surface);color:var(--vf-color-primary);border:1px solid var(--vf-color-primary)}.vf-tabs__tab:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}.vf-tabs__tab:disabled{cursor:not-allowed;opacity:.5}.vf-tabs__panel{border:1px solid transparent;border-radius:var(--vf-radius-control);padding:var(--vf-tabs-panel-padding-top) 0 0;color:var(--vf-color-text);line-height:var(--vf-text-line-height)}.vf-tabs__panel:focus-visible{outline:none;border-color:var(--vf-color-primary);box-shadow:0 0 0 2px var(--vf-color-focus-ring)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-preset.d.ts","sourceRoot":"","sources":["../../src/theme/default-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"default-preset.d.ts","sourceRoot":"","sources":["../../src/theme/default-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAYlD,eAAO,MAAM,kBAAkB,EAAE,aAoHhC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/theme/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA"}
|
package/dist/theme.css
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* Fallback mode styles for package CSS consumers.
|
|
2
|
+
Runtime preset injection is the primary theme API. */
|
|
3
|
+
:root {
|
|
4
|
+
color-scheme: light;
|
|
5
|
+
background-color: var(--vf-color-bg);
|
|
6
|
+
color: var(--vf-color-text);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
:root[data-vf-theme='dark'] {
|
|
10
|
+
color-scheme: dark;
|
|
11
|
+
--vf-color-bg: #0f172a;
|
|
12
|
+
--vf-color-surface: #162033;
|
|
13
|
+
--vf-color-surface-muted: #1b2840;
|
|
14
|
+
--vf-color-text: #eff4ff;
|
|
15
|
+
--vf-color-muted: #9fb0cf;
|
|
16
|
+
--vf-color-border: #2d405f;
|
|
17
|
+
--vf-color-primary: #6ea8fe;
|
|
18
|
+
--vf-color-primary-contrast: #081120;
|
|
19
|
+
--vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));
|
|
20
|
+
--vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));
|
|
21
|
+
--vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface));
|
|
22
|
+
--vf-color-success: #4ade80;
|
|
23
|
+
--vf-color-danger: #f87171;
|
|
24
|
+
--vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));
|
|
25
|
+
--vf-color-danger-soft: color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface));
|
|
26
|
+
--vf-color-success-border-soft: color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border));
|
|
27
|
+
--vf-color-danger-border-soft: color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border));
|
|
28
|
+
--vf-shadow: none;
|
|
29
|
+
}
|