@gradient-ui/core 0.4.0 → 0.5.0-rc.0
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 +58 -2
- package/dist/GLoading.vue_vue_type_style_index_0_lang-Bv3dWEq8.cjs +1 -0
- package/dist/GLoading.vue_vue_type_style_index_0_lang-CBB_GocW.js +466 -0
- package/dist/GSwitch.vue_vue_type_script_setup_true_lang-BS6bb1XY.cjs +1 -0
- package/dist/GSwitch.vue_vue_type_script_setup_true_lang-UTBNFP5X.js +7015 -0
- package/dist/{default-585QCoXx.js → camelToKebabCase-6qY6WHvl.js} +987 -1194
- package/dist/camelToKebabCase-BQDotaQm.cjs +316 -0
- package/dist/components.cjs +1 -1
- package/dist/components.mjs +56 -53
- package/dist/default-BhuY-A3o.cjs +4 -0
- package/dist/default-OTmCd0Aq.js +131 -0
- package/dist/directives.cjs +1 -1
- package/dist/directives.mjs +6 -5
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +183 -113
- package/dist/mask-BbofdFd4.cjs +1 -0
- package/dist/mask-CZX-I_iy.js +936 -0
- package/dist/material-Ca7ZZAiO.cjs +194 -0
- package/dist/material-okvXHenb.js +1162 -0
- package/dist/materialSurface-BBrP9ltj.js +591 -0
- package/dist/materialSurface-CK8LN_dU.cjs +1 -0
- package/dist/services.cjs +1 -1
- package/dist/services.mjs +1 -1
- package/dist/style.css +1 -1
- package/dist/surface-8z3gR7vF.cjs +1 -0
- package/dist/surface-BKu4KfkY.js +288 -0
- package/dist/theme.cjs +1 -1
- package/dist/theme.mjs +55 -9
- package/dist/types/components/index.d.ts +3 -1
- package/dist/types/components/ui/BaseOverlay/BaseOverlay.vue.d.ts +1 -1
- package/dist/types/components/ui/GAlert/GAlert.vue.d.ts +675 -9
- package/dist/types/components/ui/GAlert/types.d.ts +352 -4
- package/dist/types/components/ui/GAside/GAside.vue.d.ts +7 -5
- package/dist/types/components/ui/GAside/types.d.ts +17 -6
- package/dist/types/components/ui/GBadge/GBadge.vue.d.ts +679 -13
- package/dist/types/components/ui/GBadge/types.d.ts +350 -3
- package/dist/types/components/ui/GButton/GButton.vue.d.ts +295 -25
- package/dist/types/components/ui/GButton/types.d.ts +194 -49
- package/dist/types/components/ui/GCheckControl/GCheckControl.vue.d.ts +24 -24
- package/dist/types/components/ui/GCheckControl/GCheckGroup.vue.d.ts +24 -24
- package/dist/types/components/ui/GCheckbox/GCheckbox.vue.d.ts +24 -24
- package/dist/types/components/ui/GChip/GChip.vue.d.ts +295 -25
- package/dist/types/components/ui/GChip/types.d.ts +188 -43
- package/dist/types/components/ui/GDrawer/GDrawer.vue.d.ts +1 -1
- package/dist/types/components/ui/GExpansion/GExpansion.vue.d.ts +47 -13
- package/dist/types/components/ui/GExpansion/types.d.ts +284 -22
- package/dist/types/components/ui/GFAB/GFAB.vue.d.ts +220 -7
- package/dist/types/components/ui/GFAB/types.d.ts +122 -3
- package/dist/types/components/ui/GFieldBase/GFieldBase.vue.d.ts +15 -15
- package/dist/types/components/ui/GFieldBase/props.d.ts +10 -10
- package/dist/types/components/ui/GForm/GForm.vue.d.ts +156 -0
- package/dist/types/components/ui/GForm/index.d.ts +2 -0
- package/dist/types/components/ui/GForm/types.d.ts +107 -0
- package/dist/types/components/ui/GGradient/GGradient.vue.d.ts +165 -66
- package/dist/types/components/ui/GGradient/GGradientBorderLayer.vue.d.ts +11 -0
- package/dist/types/components/ui/GGradient/index.d.ts +1 -0
- package/dist/types/components/ui/GGradient/types.d.ts +10 -1
- package/dist/types/components/ui/GGradientMaterial/GGradientMaterial.vue.d.ts +257 -0
- package/dist/types/components/ui/GGradientMaterial/index.d.ts +2 -0
- package/dist/types/components/ui/GGradientMaterial/types.d.ts +140 -0
- package/dist/types/components/ui/GInput/GInput.vue.d.ts +15 -15
- package/dist/types/components/ui/GLoading/GLoading.vue.d.ts +5 -5
- package/dist/types/components/ui/GLoading/types.d.ts +3 -2
- package/dist/types/components/ui/GMenu/GSubmenu.vue.d.ts +14 -14
- package/dist/types/components/ui/GMenuItem/GMenuItem.vue.d.ts +11 -11
- package/dist/types/components/ui/GMenuItem/types.d.ts +4 -4
- package/dist/types/components/ui/GModal/GModal.vue.d.ts +1 -1
- package/dist/types/components/ui/GNavList/GNavList.vue.d.ts +7 -5
- package/dist/types/components/ui/GNavList/types.d.ts +17 -6
- package/dist/types/components/ui/GNavbar/GNavbar.vue.d.ts +4 -4
- package/dist/types/components/ui/GNavbar/types.d.ts +6 -6
- package/dist/types/components/ui/GProgress/GProgress.vue.d.ts +41 -20
- package/dist/types/components/ui/GProgress/types.d.ts +23 -10
- package/dist/types/components/ui/GQuickActions/GQuickActions.vue.d.ts +1 -1
- package/dist/types/components/ui/GSelectItem.vue.d.ts +5 -3
- package/dist/types/components/ui/GSnackbar/GSnackbar.vue.d.ts +681 -15
- package/dist/types/components/ui/GSnackbar/types.d.ts +350 -3
- package/dist/types/components/ui/GSquircle/GSquircle.vue.d.ts +2 -2
- package/dist/types/components/ui/GSquircle/types.d.ts +8 -2
- package/dist/types/components/ui/GSwitch/GSwitch.vue.d.ts +24 -24
- package/dist/types/components/ui/GTable/GTable.vue.d.ts +51 -3
- package/dist/types/components/ui/GTable/types.d.ts +351 -3
- package/dist/types/components/ui/GTabs/GTabs.vue.d.ts +4 -4
- package/dist/types/components/ui/GTabs/types.d.ts +6 -6
- package/dist/types/components/ui/GTextarea/GTextarea.vue.d.ts +15 -15
- package/dist/types/components/ui/GToggleButton/GToggleButton.vue.d.ts +490 -16
- package/dist/types/components/ui/GToggleButton/types.d.ts +284 -32
- package/dist/types/directives/index.d.ts +2 -0
- package/dist/types/directives/ripple.d.ts +1 -1
- package/dist/types/directives/specular.d.ts +34 -0
- package/dist/types/theme/color.d.ts +11 -0
- package/dist/types/theme/colorSeeds.d.ts +21 -20
- package/dist/types/theme/colorSystem.d.ts +12 -0
- package/dist/types/theme/cssTokens.d.ts +7 -0
- package/dist/types/theme/default.d.ts +26 -80
- package/dist/types/theme/gradient/animation/css.d.ts +12 -0
- package/dist/types/theme/gradient/animation/index.d.ts +1 -0
- package/dist/types/theme/gradient/colorMath.d.ts +3 -0
- package/dist/types/theme/gradient/constants.d.ts +3 -0
- package/dist/types/theme/gradient/core.d.ts +1 -0
- package/dist/types/theme/gradient/effects/index.d.ts +1 -0
- package/dist/types/theme/gradient/effects/morph.d.ts +5 -0
- package/dist/types/theme/gradient/effects/shadow.d.ts +3 -0
- package/dist/types/theme/gradient/formatters/canvas.d.ts +2 -0
- package/dist/types/theme/gradient/formatters/css.d.ts +3 -0
- package/dist/types/theme/gradient/formatters/index.d.ts +1 -0
- package/dist/types/theme/gradient/formatters/svg.d.ts +5 -0
- package/dist/types/theme/gradient/index.d.ts +1 -0
- package/dist/types/theme/gradient/material.d.ts +1 -0
- package/dist/types/theme/gradient/model.d.ts +5 -0
- package/dist/types/theme/gradient/presets.d.ts +158 -0
- package/dist/types/theme/gradient/recipes.d.ts +14 -0
- package/dist/types/theme/gradient/tokens.d.ts +72 -0
- package/dist/types/theme/gradient/types.d.ts +117 -0
- package/dist/types/theme/gradient/utils.d.ts +10 -0
- package/dist/types/theme/gradient.d.ts +1 -0
- package/dist/types/theme/index.d.ts +12 -1
- package/dist/types/theme/palette.d.ts +13 -0
- package/dist/types/theme/scheme.d.ts +2 -0
- package/dist/types/theme/types.d.ts +11 -0
- package/dist/types/use/actionSurface.d.ts +1742 -20
- package/dist/types/use/check/booleanControl.d.ts +9 -9
- package/dist/types/use/check/optionGroup.d.ts +9 -7
- package/dist/types/use/check/types.d.ts +26 -26
- package/dist/types/use/color.d.ts +2 -2
- package/dist/types/use/colorResolver.d.ts +15 -5
- package/dist/types/use/form/context.d.ts +8 -0
- package/dist/types/use/form/control.d.ts +4 -0
- package/dist/types/use/form/props.d.ts +4 -4
- package/dist/types/use/form/textFieldControl.d.ts +1 -1
- package/dist/types/use/glass.d.ts +24 -0
- package/dist/types/use/gradient.d.ts +1759 -43
- package/dist/types/use/gradientGlow.d.ts +4 -4
- package/dist/types/use/gradientMaterial.d.ts +21 -0
- package/dist/types/use/gradientRuntime.d.ts +11 -0
- package/dist/types/use/gradientRuntimeRegistry.d.ts +8 -0
- package/dist/types/use/gradientSurface.d.ts +31 -4
- package/dist/types/use/index.d.ts +8 -0
- package/dist/types/use/input/props.d.ts +11 -11
- package/dist/types/use/material.d.ts +112 -0
- package/dist/types/use/materialSurface.d.ts +376 -0
- package/dist/types/use/surface.d.ts +67 -19
- package/dist/types/use/surfaceColor.d.ts +1 -1
- package/dist/types/use/textarea/props.d.ts +11 -11
- package/dist/types/use/variant.d.ts +1 -1
- package/dist/use.cjs +1 -1
- package/dist/use.mjs +42 -22
- package/dist/useSnackbar-BHQshEZ8.cjs +1 -0
- package/dist/useSnackbar-DeNHZH8v.js +908 -0
- package/package.json +11 -4
- package/dist/GLoading.vue_vue_type_style_index_0_lang-CPzo3WD3.js +0 -680
- package/dist/GLoading.vue_vue_type_style_index_0_lang-cokm-HBh.cjs +0 -1
- package/dist/GSwitch.vue_vue_type_script_setup_true_lang-BmbKqNgm.js +0 -6421
- package/dist/GSwitch.vue_vue_type_script_setup_true_lang-By_7hZOW.cjs +0 -4
- package/dist/camelToKebabCase-BAESShJ1.cjs +0 -1
- package/dist/camelToKebabCase-KgkZ7-1F.js +0 -28
- package/dist/default-BcPApP1Q.cjs +0 -318
- package/dist/mask-Bu8cjwwH.js +0 -817
- package/dist/mask-D1vJj5Hl.cjs +0 -1
- package/dist/propsFactory-DyyboUaC.cjs +0 -1
- package/dist/propsFactory-UhcvubZJ.js +0 -13
- package/dist/tagName-CYG1CUfd.js +0 -103
- package/dist/tagName-CbsvFHGg.cjs +0 -1
- package/dist/types/theme/changeTone.d.ts +0 -1
- package/dist/types/theme/colorPallete.d.ts +0 -2
- package/dist/types/theme/generateColors.d.ts +0 -1
- package/dist/types/theme/generateGradient.d.ts +0 -9
- package/dist/types/theme/getComplementaryColor.d.ts +0 -1
- package/dist/types/utils/color.d.ts +0 -3
- package/dist/types/utils/colors/normaliseColor.d.ts +0 -5
- package/dist/useSnackbar-2iJU4bdd.js +0 -769
- package/dist/useSnackbar-3QuH25xm.cjs +0 -1
|
@@ -1,97 +1,43 @@
|
|
|
1
|
+
import type { ThemeColorExtensions, ThemeMode, ThemeTokens } from './types';
|
|
1
2
|
import type { ColorInput } from '@/types/Colors';
|
|
2
3
|
import { type App, type Ref, type ShallowRef } from 'vue';
|
|
3
4
|
export declare const DEFAULT_SEED = "#4e51ff";
|
|
4
5
|
export interface SeedTheme {
|
|
5
6
|
seedColor: ColorInput;
|
|
6
7
|
}
|
|
7
|
-
export type ThemeMode
|
|
8
|
+
export type { ThemeMode } from './types';
|
|
8
9
|
export interface GradientUIThemeOptions {
|
|
9
10
|
seed?: ColorInput;
|
|
10
11
|
mode?: ThemeMode;
|
|
11
12
|
autoApply?: boolean;
|
|
13
|
+
colors?: ThemeColorExtensions;
|
|
12
14
|
}
|
|
13
|
-
export interface
|
|
14
|
-
|
|
15
|
-
mode: Ref<ThemeMode>;
|
|
16
|
-
result: ShallowRef<ReturnType<typeof createDefaultTheme> | null>;
|
|
17
|
-
apply: () => ReturnType<typeof createDefaultTheme> | null;
|
|
18
|
-
setSeed: (seed: ColorInput) => ReturnType<typeof createDefaultTheme> | null;
|
|
19
|
-
setMode: (mode: ThemeMode) => ReturnType<typeof createDefaultTheme> | null;
|
|
20
|
-
toggleMode: () => ReturnType<typeof createDefaultTheme> | null;
|
|
15
|
+
export interface CreateDefaultThemeOptions {
|
|
16
|
+
colors?: ThemeColorExtensions;
|
|
21
17
|
}
|
|
22
|
-
export
|
|
23
|
-
tokens: {
|
|
24
|
-
theme: {
|
|
25
|
-
warning: string;
|
|
26
|
-
onWarning: string;
|
|
27
|
-
warningContainer: string;
|
|
28
|
-
onWarningContainer: string;
|
|
29
|
-
success: string;
|
|
30
|
-
onSuccess: string;
|
|
31
|
-
successContainer: string;
|
|
32
|
-
onSuccessContainer: string;
|
|
33
|
-
};
|
|
34
|
-
colors: Record<string, string>;
|
|
35
|
-
gradient: {
|
|
36
|
-
main: string;
|
|
37
|
-
error: string;
|
|
38
|
-
warning: string;
|
|
39
|
-
success: string;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
themeCSS: HTMLStyleElement;
|
|
43
|
-
colorsCSS: HTMLStyleElement;
|
|
44
|
-
gradientCSS: HTMLStyleElement;
|
|
45
|
-
};
|
|
46
|
-
export declare function createDefaultDarkTheme(seed?: ColorInput): {
|
|
47
|
-
tokens: {
|
|
48
|
-
theme: {
|
|
49
|
-
warning: string;
|
|
50
|
-
onWarning: string;
|
|
51
|
-
warningContainer: string;
|
|
52
|
-
onWarningContainer: string;
|
|
53
|
-
success: string;
|
|
54
|
-
onSuccess: string;
|
|
55
|
-
successContainer: string;
|
|
56
|
-
onSuccessContainer: string;
|
|
57
|
-
};
|
|
58
|
-
colors: Record<string, string>;
|
|
59
|
-
gradient: {
|
|
60
|
-
main: string;
|
|
61
|
-
error: string;
|
|
62
|
-
warning: string;
|
|
63
|
-
success: string;
|
|
64
|
-
};
|
|
65
|
-
};
|
|
66
|
-
themeCSS: HTMLStyleElement;
|
|
67
|
-
colorsCSS: HTMLStyleElement;
|
|
68
|
-
gradientCSS: HTMLStyleElement;
|
|
69
|
-
};
|
|
70
|
-
export declare function createDefaultTheme(seed?: ColorInput, mode?: ThemeMode): {
|
|
18
|
+
export interface GeneratedTheme {
|
|
71
19
|
tokens: {
|
|
72
|
-
theme:
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
warningContainer: string;
|
|
76
|
-
onWarningContainer: string;
|
|
77
|
-
success: string;
|
|
78
|
-
onSuccess: string;
|
|
79
|
-
successContainer: string;
|
|
80
|
-
onSuccessContainer: string;
|
|
81
|
-
};
|
|
82
|
-
colors: Record<string, string>;
|
|
83
|
-
gradient: {
|
|
84
|
-
main: string;
|
|
85
|
-
error: string;
|
|
86
|
-
warning: string;
|
|
87
|
-
success: string;
|
|
88
|
-
};
|
|
20
|
+
theme: ThemeTokens;
|
|
21
|
+
colors: ThemeTokens;
|
|
22
|
+
gradients: ThemeTokens;
|
|
89
23
|
};
|
|
90
24
|
themeCSS: HTMLStyleElement;
|
|
91
25
|
colorsCSS: HTMLStyleElement;
|
|
92
26
|
gradientCSS: HTMLStyleElement;
|
|
93
|
-
}
|
|
94
|
-
export
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
27
|
+
}
|
|
28
|
+
export interface GradientUITheme {
|
|
29
|
+
seed: Ref<ColorInput>;
|
|
30
|
+
mode: Ref<ThemeMode>;
|
|
31
|
+
result: ShallowRef<GeneratedTheme | null>;
|
|
32
|
+
apply: () => GeneratedTheme | null;
|
|
33
|
+
setSeed: (seed: ColorInput) => GeneratedTheme | null;
|
|
34
|
+
setMode: (mode: ThemeMode) => GeneratedTheme | null;
|
|
35
|
+
toggleMode: () => GeneratedTheme | null;
|
|
36
|
+
}
|
|
37
|
+
export declare const createDefaultLightTheme: (seed?: ColorInput, options?: CreateDefaultThemeOptions) => GeneratedTheme;
|
|
38
|
+
export declare const createDefaultDarkTheme: (seed?: ColorInput, options?: CreateDefaultThemeOptions) => GeneratedTheme;
|
|
39
|
+
export declare const createDefaultTheme: (seed?: ColorInput, mode?: ThemeMode, options?: CreateDefaultThemeOptions) => GeneratedTheme;
|
|
40
|
+
export declare const createTheme: (options?: GradientUIThemeOptions) => GradientUITheme;
|
|
41
|
+
export declare const provideTheme: (theme?: GradientUITheme) => GradientUITheme;
|
|
42
|
+
export declare const installTheme: (app: App, theme: GradientUITheme) => void;
|
|
43
|
+
export declare const useTheme: () => GradientUITheme | null;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { GradientAnimationOptions } from '../types';
|
|
2
|
+
export declare const getGradientAnimationOptions: (options?: GradientAnimationOptions) => {
|
|
3
|
+
duration: string;
|
|
4
|
+
easing: string;
|
|
5
|
+
name: string;
|
|
6
|
+
preset: import("../types").GradientAnimationPreset;
|
|
7
|
+
selector: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const toGradientAnimationKeyframes: (options?: GradientAnimationOptions) => string;
|
|
10
|
+
export declare const toGradientAnimationValue: (options?: GradientAnimationOptions) => string;
|
|
11
|
+
export declare const toGradientAnimationStyles: (options?: GradientAnimationOptions) => string;
|
|
12
|
+
export declare const toGradientAnimationCSS: (options?: GradientAnimationOptions) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@gradient-ui/gradient-engine/animation';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@gradient-ui/gradient-engine/core';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@gradient-ui/gradient-engine/effects';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { GradientModel, GradientMorphBlob, GradientMorphOptions } from '../types';
|
|
2
|
+
export declare const createGradientMorphBlobs: (model: GradientModel, options?: GradientMorphOptions) => GradientMorphBlob[];
|
|
3
|
+
export declare const toGradientMorphFilter: (options?: GradientMorphOptions) => string;
|
|
4
|
+
export declare const toGradientMorphFilterMarkup: (options?: GradientMorphOptions) => string;
|
|
5
|
+
export declare const toGradientMorphCSS: (model: GradientModel, options?: GradientMorphOptions) => string;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { GradientModel, GradientShadowOptions } from '../types';
|
|
2
|
+
export declare const toGradientBoxShadow: (model: GradientModel, options?: GradientShadowOptions) => string;
|
|
3
|
+
export declare const toGradientDropShadow: (model: GradientModel, options?: GradientShadowOptions) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@gradient-ui/gradient-engine/formatters';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { GradientModel, SvgGradientOptions, SvgPathAnimationOptions, SvgSourceAnimationOptions } from '../types';
|
|
2
|
+
export declare const toSvgGradient: (model: GradientModel, options?: SvgGradientOptions) => string;
|
|
3
|
+
export declare const toSvgGradientMarkup: (model: GradientModel, options?: SvgGradientOptions) => string;
|
|
4
|
+
export declare const toSvgSourceAnimationMarkup: (sourceSvg: string, model: GradientModel, options?: SvgSourceAnimationOptions) => string;
|
|
5
|
+
export declare const toSvgPathAnimationMarkup: (model: GradientModel, options?: SvgPathAnimationOptions) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@gradient-ui/gradient-engine';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@gradient-ui/gradient-engine/material';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type ColorPalette } from '../palette';
|
|
2
|
+
import type { GradientModel, GradientOptions } from './types';
|
|
3
|
+
import type { ColorInput } from '@/types/Colors';
|
|
4
|
+
export declare const createGradientModel: (palette: ColorPalette, options?: GradientOptions) => GradientModel;
|
|
5
|
+
export declare const createGradientModelFromColor: (color: ColorInput, options?: GradientOptions) => GradientModel;
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import type { GradientAnimationOptions, GradientAnimationPreset, GradientOptions, GradientRecipe, GradientShadowOptions, GradientType } from './types';
|
|
2
|
+
export interface GradientPreset {
|
|
3
|
+
label: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
gradient: Omit<GradientOptions, 'shade' | 'colors'> & {
|
|
6
|
+
recipe: GradientRecipe;
|
|
7
|
+
type?: GradientType;
|
|
8
|
+
};
|
|
9
|
+
shadow?: GradientShadowOptions;
|
|
10
|
+
dropShadow?: GradientShadowOptions;
|
|
11
|
+
animation?: Omit<GradientAnimationOptions, 'name' | 'selector'> & {
|
|
12
|
+
preset: GradientAnimationPreset;
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
export type GradientPresetRegistry = Record<string, GradientPreset>;
|
|
16
|
+
export declare const defineGradientPreset: <T extends GradientPreset>(preset: T) => T;
|
|
17
|
+
export declare const defineGradientPresetRegistry: <T extends GradientPresetRegistry>(presets: T) => T;
|
|
18
|
+
export declare const gradientPresets: {
|
|
19
|
+
brandGlare: {
|
|
20
|
+
label: string;
|
|
21
|
+
description: string;
|
|
22
|
+
gradient: {
|
|
23
|
+
recipe: "glare";
|
|
24
|
+
type: "linear";
|
|
25
|
+
direction: number;
|
|
26
|
+
};
|
|
27
|
+
shadow: {
|
|
28
|
+
layers: number;
|
|
29
|
+
opacity: number;
|
|
30
|
+
blur: number;
|
|
31
|
+
y: number;
|
|
32
|
+
spread: number;
|
|
33
|
+
};
|
|
34
|
+
dropShadow: {
|
|
35
|
+
layers: number;
|
|
36
|
+
opacity: number;
|
|
37
|
+
blur: number;
|
|
38
|
+
y: number;
|
|
39
|
+
};
|
|
40
|
+
animation: {
|
|
41
|
+
preset: "shift";
|
|
42
|
+
duration: number;
|
|
43
|
+
easing: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
softMono: {
|
|
47
|
+
label: string;
|
|
48
|
+
description: string;
|
|
49
|
+
gradient: {
|
|
50
|
+
recipe: "monochrome";
|
|
51
|
+
type: "linear";
|
|
52
|
+
direction: number;
|
|
53
|
+
};
|
|
54
|
+
shadow: {
|
|
55
|
+
layers: number;
|
|
56
|
+
opacity: number;
|
|
57
|
+
blur: number;
|
|
58
|
+
y: number;
|
|
59
|
+
spread: number;
|
|
60
|
+
};
|
|
61
|
+
dropShadow: {
|
|
62
|
+
layers: number;
|
|
63
|
+
opacity: number;
|
|
64
|
+
blur: number;
|
|
65
|
+
y: number;
|
|
66
|
+
};
|
|
67
|
+
animation: {
|
|
68
|
+
preset: "pulse";
|
|
69
|
+
duration: number;
|
|
70
|
+
easing: string;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
neonDuo: {
|
|
74
|
+
label: string;
|
|
75
|
+
description: string;
|
|
76
|
+
gradient: {
|
|
77
|
+
recipe: "duotone";
|
|
78
|
+
type: "linear";
|
|
79
|
+
direction: number;
|
|
80
|
+
};
|
|
81
|
+
shadow: {
|
|
82
|
+
layers: number;
|
|
83
|
+
opacity: number;
|
|
84
|
+
blur: number;
|
|
85
|
+
y: number;
|
|
86
|
+
spread: number;
|
|
87
|
+
};
|
|
88
|
+
dropShadow: {
|
|
89
|
+
layers: number;
|
|
90
|
+
opacity: number;
|
|
91
|
+
blur: number;
|
|
92
|
+
y: number;
|
|
93
|
+
};
|
|
94
|
+
animation: {
|
|
95
|
+
preset: "shift";
|
|
96
|
+
duration: number;
|
|
97
|
+
easing: string;
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
orbitalConic: {
|
|
101
|
+
label: string;
|
|
102
|
+
description: string;
|
|
103
|
+
gradient: {
|
|
104
|
+
recipe: "triadic";
|
|
105
|
+
type: "conic";
|
|
106
|
+
direction: number;
|
|
107
|
+
position: string;
|
|
108
|
+
};
|
|
109
|
+
shadow: {
|
|
110
|
+
layers: number;
|
|
111
|
+
opacity: number;
|
|
112
|
+
blur: number;
|
|
113
|
+
y: number;
|
|
114
|
+
spread: number;
|
|
115
|
+
};
|
|
116
|
+
dropShadow: {
|
|
117
|
+
layers: number;
|
|
118
|
+
opacity: number;
|
|
119
|
+
blur: number;
|
|
120
|
+
y: number;
|
|
121
|
+
};
|
|
122
|
+
animation: {
|
|
123
|
+
preset: "rotate";
|
|
124
|
+
duration: number;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
auroraRadial: {
|
|
128
|
+
label: string;
|
|
129
|
+
description: string;
|
|
130
|
+
gradient: {
|
|
131
|
+
recipe: "analogous";
|
|
132
|
+
type: "radial";
|
|
133
|
+
direction: number;
|
|
134
|
+
position: string;
|
|
135
|
+
shape: "circle";
|
|
136
|
+
};
|
|
137
|
+
shadow: {
|
|
138
|
+
layers: number;
|
|
139
|
+
opacity: number;
|
|
140
|
+
blur: number;
|
|
141
|
+
y: number;
|
|
142
|
+
spread: number;
|
|
143
|
+
};
|
|
144
|
+
dropShadow: {
|
|
145
|
+
layers: number;
|
|
146
|
+
opacity: number;
|
|
147
|
+
blur: number;
|
|
148
|
+
y: number;
|
|
149
|
+
};
|
|
150
|
+
animation: {
|
|
151
|
+
preset: "hue-rotate";
|
|
152
|
+
duration: number;
|
|
153
|
+
easing: string;
|
|
154
|
+
};
|
|
155
|
+
};
|
|
156
|
+
};
|
|
157
|
+
export type GradientPresetName = keyof typeof gradientPresets;
|
|
158
|
+
export declare const getGradientPreset: (name: GradientPresetName | string, registry?: GradientPresetRegistry) => GradientPreset;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { GradientRecipe } from './types';
|
|
2
|
+
export declare const gradientRecipes: {
|
|
3
|
+
glare: (base: string) => import("./types").GradientStop[];
|
|
4
|
+
monochrome: (base: string) => import("./types").GradientStop[];
|
|
5
|
+
complementary: (base: string) => import("./types").GradientStop[];
|
|
6
|
+
'split-complementary': (base: string) => import("./types").GradientStop[];
|
|
7
|
+
analogous: (base: string) => import("./types").GradientStop[];
|
|
8
|
+
triadic: (base: string) => import("./types").GradientStop[];
|
|
9
|
+
tetradic: (base: string) => import("./types").GradientStop[];
|
|
10
|
+
rectangle: (base: string) => import("./types").GradientStop[];
|
|
11
|
+
square: (base: string) => import("./types").GradientStop[];
|
|
12
|
+
duotone: (base: string, colors: readonly string[] | undefined) => import("./types").GradientStop[];
|
|
13
|
+
};
|
|
14
|
+
export declare const createRecipeStops: (base: string, recipe: GradientRecipe, colors?: readonly string[]) => import("./types").GradientStop[];
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import type { ColorInput } from '@/types/Colors';
|
|
2
|
+
import { type GradientPresetName, type GradientPresetRegistry } from './presets';
|
|
3
|
+
import type { GradientAnimationOptions, GradientMorphOptions, GradientModel, GradientOptions, GradientRecipe, GradientShadowOptions, GradientStop } from './types';
|
|
4
|
+
export type GradientTokenRecipe = GradientRecipe | GradientPresetName | 'mesh' | 'soft';
|
|
5
|
+
export interface GradientTokenEntry {
|
|
6
|
+
value: string;
|
|
7
|
+
cssVar: string;
|
|
8
|
+
model?: GradientModel;
|
|
9
|
+
layers?: string[];
|
|
10
|
+
stops?: GradientStop[];
|
|
11
|
+
svg?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface GradientEffectTokenEntry {
|
|
14
|
+
boxShadow?: {
|
|
15
|
+
value: string;
|
|
16
|
+
cssVar: string;
|
|
17
|
+
};
|
|
18
|
+
dropShadow?: {
|
|
19
|
+
value: string;
|
|
20
|
+
cssVar: string;
|
|
21
|
+
};
|
|
22
|
+
morph?: {
|
|
23
|
+
value: string;
|
|
24
|
+
cssVar: string;
|
|
25
|
+
svg: string;
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
export interface GradientAnimationTokenEntry {
|
|
29
|
+
name: string;
|
|
30
|
+
value: string;
|
|
31
|
+
css: string;
|
|
32
|
+
keyframes: string;
|
|
33
|
+
cssVar: string;
|
|
34
|
+
}
|
|
35
|
+
export interface CreatedGradientPreset {
|
|
36
|
+
name: string;
|
|
37
|
+
label: string;
|
|
38
|
+
description?: string;
|
|
39
|
+
gradient: GradientTokenEntry;
|
|
40
|
+
effects?: GradientEffectTokenEntry;
|
|
41
|
+
animation?: GradientAnimationTokenEntry;
|
|
42
|
+
cssVars: Record<string, string>;
|
|
43
|
+
cssText: string;
|
|
44
|
+
keyframes: string;
|
|
45
|
+
}
|
|
46
|
+
export interface GradientTokenOptions {
|
|
47
|
+
recipes?: readonly GradientTokenRecipe[];
|
|
48
|
+
effects?: boolean;
|
|
49
|
+
animations?: boolean;
|
|
50
|
+
morph?: GradientMorphOptions;
|
|
51
|
+
registry?: GradientPresetRegistry;
|
|
52
|
+
prefix?: string;
|
|
53
|
+
}
|
|
54
|
+
export interface CreatedGradientTokens {
|
|
55
|
+
gradients: Record<string, GradientTokenEntry>;
|
|
56
|
+
effects: Record<string, GradientEffectTokenEntry>;
|
|
57
|
+
animations: Record<string, GradientAnimationTokenEntry>;
|
|
58
|
+
cssVars: Record<string, string>;
|
|
59
|
+
cssText: string;
|
|
60
|
+
keyframes: string;
|
|
61
|
+
}
|
|
62
|
+
export declare const createGradientPreset: (seed: ColorInput, recipe?: GradientTokenRecipe, options?: GradientOptions & {
|
|
63
|
+
animation?: GradientAnimationOptions;
|
|
64
|
+
dropShadow?: GradientShadowOptions;
|
|
65
|
+
effects?: boolean;
|
|
66
|
+
morph?: GradientMorphOptions;
|
|
67
|
+
prefix?: string;
|
|
68
|
+
registry?: GradientPresetRegistry;
|
|
69
|
+
shadow?: GradientShadowOptions;
|
|
70
|
+
animations?: boolean;
|
|
71
|
+
}) => CreatedGradientPreset;
|
|
72
|
+
export declare const createGradientTokens: (seed: ColorInput, options?: GradientTokenOptions) => CreatedGradientTokens;
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import type { ColorShade } from '../palette';
|
|
2
|
+
export type GradientDirection = number | string;
|
|
3
|
+
export type GradientType = 'linear' | 'radial' | 'conic';
|
|
4
|
+
export type GradientRecipe = 'glare' | 'monochrome' | 'complementary' | 'split-complementary' | 'analogous' | 'triadic' | 'tetradic' | 'rectangle' | 'square' | 'duotone';
|
|
5
|
+
export type GradientShape = 'circle' | 'ellipse';
|
|
6
|
+
export type GradientAnimationPreset = 'shift' | 'pulse' | 'rotate' | 'hue-rotate';
|
|
7
|
+
export interface GradientStop {
|
|
8
|
+
color: string;
|
|
9
|
+
position: number;
|
|
10
|
+
opacity?: number;
|
|
11
|
+
}
|
|
12
|
+
export interface GradientModel {
|
|
13
|
+
type: GradientType;
|
|
14
|
+
stops: GradientStop[];
|
|
15
|
+
direction: GradientDirection;
|
|
16
|
+
shape?: GradientShape;
|
|
17
|
+
position?: string;
|
|
18
|
+
size?: string;
|
|
19
|
+
}
|
|
20
|
+
export interface GradientOptions {
|
|
21
|
+
direction?: GradientDirection;
|
|
22
|
+
recipe?: GradientRecipe;
|
|
23
|
+
shade?: ColorShade;
|
|
24
|
+
type?: GradientType;
|
|
25
|
+
shape?: GradientShape;
|
|
26
|
+
position?: string;
|
|
27
|
+
size?: string;
|
|
28
|
+
colors?: readonly string[];
|
|
29
|
+
}
|
|
30
|
+
export interface GradientShadowOptions {
|
|
31
|
+
x?: number | string;
|
|
32
|
+
y?: number | string;
|
|
33
|
+
blur?: number | string;
|
|
34
|
+
spread?: number | string;
|
|
35
|
+
opacity?: number;
|
|
36
|
+
layers?: number;
|
|
37
|
+
}
|
|
38
|
+
export type GradientMorphPreset = 'soft' | 'liquid' | 'ripple';
|
|
39
|
+
export interface GradientMorphOptions {
|
|
40
|
+
id?: string;
|
|
41
|
+
preset?: GradientMorphPreset;
|
|
42
|
+
blobCount?: number;
|
|
43
|
+
blur?: number;
|
|
44
|
+
contrast?: number;
|
|
45
|
+
duration?: number | string;
|
|
46
|
+
opacity?: number;
|
|
47
|
+
scale?: number;
|
|
48
|
+
selector?: string;
|
|
49
|
+
}
|
|
50
|
+
export interface GradientMorphBlob {
|
|
51
|
+
animationName: string;
|
|
52
|
+
blur: number;
|
|
53
|
+
color: string;
|
|
54
|
+
delay: number;
|
|
55
|
+
dx: number;
|
|
56
|
+
dx2: number;
|
|
57
|
+
dy: number;
|
|
58
|
+
dy2: number;
|
|
59
|
+
duration: number | string;
|
|
60
|
+
opacity: number;
|
|
61
|
+
originX: string;
|
|
62
|
+
originY: string;
|
|
63
|
+
rotateMid: number;
|
|
64
|
+
rotateTo: number;
|
|
65
|
+
scaleMid: number;
|
|
66
|
+
scaleTo: number;
|
|
67
|
+
size: number;
|
|
68
|
+
x: number;
|
|
69
|
+
y: number;
|
|
70
|
+
}
|
|
71
|
+
export interface SvgGradientOptions {
|
|
72
|
+
id?: string;
|
|
73
|
+
width?: number;
|
|
74
|
+
height?: number;
|
|
75
|
+
rx?: number;
|
|
76
|
+
x1?: string;
|
|
77
|
+
x2?: string;
|
|
78
|
+
y1?: string;
|
|
79
|
+
y2?: string;
|
|
80
|
+
cx?: string;
|
|
81
|
+
cy?: string;
|
|
82
|
+
r?: string;
|
|
83
|
+
}
|
|
84
|
+
export interface SvgPathAnimationOptions extends SvgGradientOptions {
|
|
85
|
+
path?: string;
|
|
86
|
+
strokeWidth?: number;
|
|
87
|
+
linecap?: 'butt' | 'round' | 'square';
|
|
88
|
+
duration?: number | string;
|
|
89
|
+
repeatCount?: number | string;
|
|
90
|
+
backgroundStroke?: string;
|
|
91
|
+
activeStroke?: string;
|
|
92
|
+
backgroundOpacity?: number;
|
|
93
|
+
}
|
|
94
|
+
export interface SvgSourceAnimationOptions extends SvgPathAnimationOptions {
|
|
95
|
+
normalizeStrokeWidth?: boolean;
|
|
96
|
+
sourceOpacity?: number;
|
|
97
|
+
viewBoxPadding?: number | false;
|
|
98
|
+
strokeWidthBase?: number;
|
|
99
|
+
}
|
|
100
|
+
export interface CanvasGradientOptions {
|
|
101
|
+
x0?: number;
|
|
102
|
+
y0?: number;
|
|
103
|
+
x1?: number;
|
|
104
|
+
y1?: number;
|
|
105
|
+
r0?: number;
|
|
106
|
+
r1?: number;
|
|
107
|
+
startAngle?: number;
|
|
108
|
+
width?: number;
|
|
109
|
+
height?: number;
|
|
110
|
+
}
|
|
111
|
+
export interface GradientAnimationOptions {
|
|
112
|
+
name?: string;
|
|
113
|
+
preset?: GradientAnimationPreset;
|
|
114
|
+
duration?: number | string;
|
|
115
|
+
easing?: string;
|
|
116
|
+
selector?: string;
|
|
117
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { GradientDirection, GradientStop } from './types';
|
|
2
|
+
export declare const normalizeDirection: (direction?: GradientDirection) => string;
|
|
3
|
+
export declare const toCssLength: (value: number | string) => string;
|
|
4
|
+
export declare const addCssLength: (value: number | string, offset: number) => string;
|
|
5
|
+
export declare const toCssDuration: (value: number | string) => string;
|
|
6
|
+
export declare const clamp: (value: number, min?: number, max?: number) => number;
|
|
7
|
+
export declare const toCssColor: (color: string, opacity?: number) => string;
|
|
8
|
+
export declare const formatStop: ({ color, opacity, position }: GradientStop) => string;
|
|
9
|
+
export declare const createStop: (color: string, position: number, opacity?: number) => GradientStop;
|
|
10
|
+
export declare const getConicStops: (stops: readonly GradientStop[]) => readonly GradientStop[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './gradient/index';
|
|
@@ -1 +1,12 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { colorToHex, getContrastingColor, parseColor, rgbToChannels, rgbToHex, type RgbColor } from './color';
|
|
2
|
+
export { COLOR_SHADES, ON_SHADE_TONES, SHADE_TONES, createOnPalette, createPalette, createPalettePair, type ColorPalette, type ColorPalettePair, type ColorShade } from './palette';
|
|
3
|
+
export * as gradientAnimation from './gradient/animation';
|
|
4
|
+
export * as gradientCore from './gradient/core';
|
|
5
|
+
export * as gradientEffects from './gradient/effects';
|
|
6
|
+
export * as gradientFormatters from './gradient/formatters';
|
|
7
|
+
export * as gradientMaterial from './gradient/material';
|
|
8
|
+
export { createGradient, createGradientModel, createGradientModelFromColor, createGradientFromColor, createGradientMaterial, createGradientPreset, createGradientTokens, createLinearGradient, defineGradientPreset, defineGradientPresetRegistry, getGradientPreset, gradientPresets, toCssGradient, toGradientAnimationCSS, toGradientBoxShadow, toGradientDropShadow, createGradientMorphBlobs, toGradientMorphCSS, toGradientMorphFilter, toGradientMorphFilterMarkup, toCanvasGradient, toSvgGradient, toSvgGradientMarkup, toSvgPathAnimationMarkup, toSvgSourceAnimationMarkup, type GradientAnimationOptions, type GradientAnimationPreset, type CanvasGradientOptions, type CreatedGradientPreset, type CreatedGradientTokens, type CreatedGradientMaterial, type GradientAnimationTokenEntry, type GradientDirection, type GradientEffectTokenEntry, type GradientModel, type GradientMaterialOptions, type GradientMorphBlob, type GradientMorphOptions, type GradientMorphPreset, type GradientOptions, type GradientPreset, type GradientPresetName, type GradientPresetRegistry, type GradientRecipe, type GradientShadowOptions, type GradientShape, type GradientStop, type GradientTokenEntry, type GradientTokenOptions, type GradientTokenRecipe, type GradientType, type SvgGradientOptions, type SvgPathAnimationOptions, type SvgSourceAnimationOptions } from './gradient';
|
|
9
|
+
export { createColorSystem, type ColorSystem, type ColorSystemOptions } from './colorSystem';
|
|
10
|
+
export { createSemanticTokens } from './scheme';
|
|
11
|
+
export { DEFAULT_SEED, createDefaultDarkTheme, createDefaultLightTheme, createDefaultTheme, createTheme, installTheme, provideTheme, useTheme, type CreateDefaultThemeOptions, type GeneratedTheme, type GradientUITheme, type GradientUIThemeOptions, type SeedTheme, type ThemeMode } from './default';
|
|
12
|
+
export type { ThemeColorDefinition, ThemeColorExtensions, ThemeColorValue, ThemeTokens } from './types';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { ColorInput } from '@/types/Colors';
|
|
2
|
+
export declare const COLOR_SHADES: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
3
|
+
export type ColorShade = (typeof COLOR_SHADES)[number];
|
|
4
|
+
export type ColorPalette = Record<ColorShade, string>;
|
|
5
|
+
export interface ColorPalettePair {
|
|
6
|
+
colors: ColorPalette;
|
|
7
|
+
onColors: ColorPalette;
|
|
8
|
+
}
|
|
9
|
+
export declare const SHADE_TONES: Record<ColorShade, number>;
|
|
10
|
+
export declare const ON_SHADE_TONES: Record<ColorShade, number>;
|
|
11
|
+
export declare const createPalette: (seed: ColorInput) => ColorPalette;
|
|
12
|
+
export declare const createOnPalette: (seed: ColorInput) => ColorPalette;
|
|
13
|
+
export declare const createPalettePair: (seed: ColorInput) => ColorPalettePair;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ColorInput } from '@/types/Colors';
|
|
2
|
+
export type ThemeMode = 'light' | 'dark';
|
|
3
|
+
export type ThemeTokens = Record<string, string>;
|
|
4
|
+
export interface ThemeColorDefinition {
|
|
5
|
+
color: ColorInput;
|
|
6
|
+
onColor?: ColorInput;
|
|
7
|
+
palette?: boolean;
|
|
8
|
+
gradient?: string | false;
|
|
9
|
+
}
|
|
10
|
+
export type ThemeColorValue = ColorInput | ThemeColorDefinition;
|
|
11
|
+
export type ThemeColorExtensions = Record<string, ThemeColorValue>;
|