@appmax_npm/ds-prime 1.0.0-alpha.39 → 1.0.0-alpha.40
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/components/AmText/AmText.variants.d.ts +10 -0
- package/components/AmText/AmText.variants.js +33 -0
- package/config/colors.d.ts +76 -0
- package/config/colors.js +76 -0
- package/config/preset.d.ts +1 -0
- package/config/preset.js +73 -0
- package/config/theme.d.ts +2 -0
- package/config/theme.js +9 -0
- package/index.d.ts +4 -0
- package/index.js +12 -0
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
declare const amTextVariants: (props?: ({
|
|
3
|
+
variant?: "caption" | "body" | "subtitle" | "title" | "display" | null | undefined;
|
|
4
|
+
isStrong?: boolean | null | undefined;
|
|
5
|
+
size?: "small" | "medium" | "large" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
7
|
+
export interface AmTextVariants extends VariantProps<typeof amTextVariants> {
|
|
8
|
+
}
|
|
9
|
+
export declare const amText: (variants: AmTextVariants) => string;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
const amTextVariants = cva('am-text font-normal text-color text-base [&strong]:font-bold [&>strong]:font-bold', {
|
|
4
|
+
variants: {
|
|
5
|
+
variant: {
|
|
6
|
+
caption: 'text-xs text-muted-color font-medium',
|
|
7
|
+
body: 'text-sm [&strong]:font-medium [&>strong]:font-medium [&p]text-base',
|
|
8
|
+
subtitle: '',
|
|
9
|
+
title: 'text-2xl',
|
|
10
|
+
display: 'text-5xl [&strong]:font-semibold [&>strong]:font-semibold'
|
|
11
|
+
},
|
|
12
|
+
isStrong: { false: '', true: '' },
|
|
13
|
+
size: { small: '', medium: '', large: '' }
|
|
14
|
+
},
|
|
15
|
+
compoundVariants: [
|
|
16
|
+
// caption
|
|
17
|
+
{ variant: 'caption', isStrong: true, class: 'font-bold' },
|
|
18
|
+
// body
|
|
19
|
+
{ variant: 'body', isStrong: true, class: 'font-medium' },
|
|
20
|
+
// subtitle
|
|
21
|
+
{ variant: 'subtitle', isStrong: true, class: 'font-bold' },
|
|
22
|
+
// title
|
|
23
|
+
{ variant: 'title', size: 'small', class: 'text-lg' },
|
|
24
|
+
// { variant: 'title', size: 'medium', class: 'text-2xl' },
|
|
25
|
+
{ variant: 'title', size: 'large', class: 'text-3xl' },
|
|
26
|
+
{ variant: 'title', isStrong: true, class: 'font-bold' },
|
|
27
|
+
// display
|
|
28
|
+
{ variant: 'display', size: 'small', class: 'text-4xl' },
|
|
29
|
+
// { variant: 'display', size: 'medium', class: 'text-5xl' }
|
|
30
|
+
{ variant: 'display', isStrong: true, class: 'font-bold' }
|
|
31
|
+
]
|
|
32
|
+
});
|
|
33
|
+
export const amText = (variants) => twMerge(amTextVariants(variants));
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
export declare const AmColors: {
|
|
2
|
+
blue: {
|
|
3
|
+
50: string;
|
|
4
|
+
100: string;
|
|
5
|
+
200: string;
|
|
6
|
+
300: string;
|
|
7
|
+
400: string;
|
|
8
|
+
500: string;
|
|
9
|
+
600: string;
|
|
10
|
+
700: string;
|
|
11
|
+
800: string;
|
|
12
|
+
900: string;
|
|
13
|
+
};
|
|
14
|
+
red: {
|
|
15
|
+
50: string;
|
|
16
|
+
100: string;
|
|
17
|
+
200: string;
|
|
18
|
+
300: string;
|
|
19
|
+
400: string;
|
|
20
|
+
500: string;
|
|
21
|
+
600: string;
|
|
22
|
+
700: string;
|
|
23
|
+
800: string;
|
|
24
|
+
900: string;
|
|
25
|
+
};
|
|
26
|
+
green: {
|
|
27
|
+
50: string;
|
|
28
|
+
100: string;
|
|
29
|
+
200: string;
|
|
30
|
+
300: string;
|
|
31
|
+
400: string;
|
|
32
|
+
500: string;
|
|
33
|
+
600: string;
|
|
34
|
+
700: string;
|
|
35
|
+
800: string;
|
|
36
|
+
900: string;
|
|
37
|
+
};
|
|
38
|
+
yellow: {
|
|
39
|
+
50: string;
|
|
40
|
+
100: string;
|
|
41
|
+
200: string;
|
|
42
|
+
300: string;
|
|
43
|
+
400: string;
|
|
44
|
+
500: string;
|
|
45
|
+
600: string;
|
|
46
|
+
700: string;
|
|
47
|
+
800: string;
|
|
48
|
+
900: string;
|
|
49
|
+
};
|
|
50
|
+
grape: {
|
|
51
|
+
50: string;
|
|
52
|
+
100: string;
|
|
53
|
+
200: string;
|
|
54
|
+
300: string;
|
|
55
|
+
400: string;
|
|
56
|
+
500: string;
|
|
57
|
+
600: string;
|
|
58
|
+
700: string;
|
|
59
|
+
800: string;
|
|
60
|
+
900: string;
|
|
61
|
+
950: string;
|
|
62
|
+
};
|
|
63
|
+
oil: {
|
|
64
|
+
50: string;
|
|
65
|
+
100: string;
|
|
66
|
+
200: string;
|
|
67
|
+
300: string;
|
|
68
|
+
400: string;
|
|
69
|
+
500: string;
|
|
70
|
+
600: string;
|
|
71
|
+
700: string;
|
|
72
|
+
800: string;
|
|
73
|
+
900: string;
|
|
74
|
+
950: string;
|
|
75
|
+
};
|
|
76
|
+
};
|
package/config/colors.js
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
export const AmColors = {
|
|
2
|
+
blue: {
|
|
3
|
+
50: 'var(--blue-50)',
|
|
4
|
+
100: 'var(--blue-100)',
|
|
5
|
+
200: 'var(--blue-200)',
|
|
6
|
+
300: 'var(--blue-300)',
|
|
7
|
+
400: 'var(--blue-400)',
|
|
8
|
+
500: 'var(--blue-500)',
|
|
9
|
+
600: 'var(--blue-600)',
|
|
10
|
+
700: 'var(--blue-700)',
|
|
11
|
+
800: 'var(--blue-800)',
|
|
12
|
+
900: 'var(--blue-900)'
|
|
13
|
+
},
|
|
14
|
+
red: {
|
|
15
|
+
50: 'var(--red-50)',
|
|
16
|
+
100: 'var(--red-100)',
|
|
17
|
+
200: 'var(--red-200)',
|
|
18
|
+
300: 'var(--red-300)',
|
|
19
|
+
400: 'var(--red-400)',
|
|
20
|
+
500: 'var(--red-500)',
|
|
21
|
+
600: 'var(--red-600)',
|
|
22
|
+
700: 'var(--red-700)',
|
|
23
|
+
800: 'var(--red-800)',
|
|
24
|
+
900: 'var(--red-900)'
|
|
25
|
+
},
|
|
26
|
+
green: {
|
|
27
|
+
50: 'var(--green-50)',
|
|
28
|
+
100: 'var(--green-100)',
|
|
29
|
+
200: 'var(--green-200)',
|
|
30
|
+
300: 'var(--green-300)',
|
|
31
|
+
400: 'var(--green-400)',
|
|
32
|
+
500: 'var(--green-500)',
|
|
33
|
+
600: 'var(--green-600)',
|
|
34
|
+
700: 'var(--green-700)',
|
|
35
|
+
800: 'var(--green-800)',
|
|
36
|
+
900: 'var(--green-900)'
|
|
37
|
+
},
|
|
38
|
+
yellow: {
|
|
39
|
+
50: 'var(--yellow-50)',
|
|
40
|
+
100: 'var(--yellow-100)',
|
|
41
|
+
200: 'var(--yellow-200)',
|
|
42
|
+
300: 'var(--yellow-300)',
|
|
43
|
+
400: 'var(--yellow-400)',
|
|
44
|
+
500: 'var(--yellow-500)',
|
|
45
|
+
600: 'var(--yellow-600)',
|
|
46
|
+
700: 'var(--yellow-700)',
|
|
47
|
+
800: 'var(--yellow-800)',
|
|
48
|
+
900: 'var(--yellow-900)'
|
|
49
|
+
},
|
|
50
|
+
grape: {
|
|
51
|
+
50: 'var(--grape-50)',
|
|
52
|
+
100: 'var(--grape-100)',
|
|
53
|
+
200: 'var(--grape-200)',
|
|
54
|
+
300: 'var(--grape-300)',
|
|
55
|
+
400: 'var(--grape-400)',
|
|
56
|
+
500: 'var(--grape-500)',
|
|
57
|
+
600: 'var(--grape-600)',
|
|
58
|
+
700: 'var(--grape-700)',
|
|
59
|
+
800: 'var(--grape-800)',
|
|
60
|
+
900: 'var(--grape-900)',
|
|
61
|
+
950: 'var(--grape-950)'
|
|
62
|
+
},
|
|
63
|
+
oil: {
|
|
64
|
+
50: 'var(--oil-50)',
|
|
65
|
+
100: 'var(--oil-100)',
|
|
66
|
+
200: 'var(--oil-200)',
|
|
67
|
+
300: 'var(--oil-300)',
|
|
68
|
+
400: 'var(--oil-400)',
|
|
69
|
+
500: 'var(--oil-500)',
|
|
70
|
+
600: 'var(--oil-600)',
|
|
71
|
+
700: 'var(--oil-700)',
|
|
72
|
+
800: 'var(--oil-800)',
|
|
73
|
+
900: 'var(--oil-900)',
|
|
74
|
+
950: 'var(--oil-950)'
|
|
75
|
+
}
|
|
76
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const AmPreset: any;
|
package/config/preset.js
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { definePreset } from '@primevue/themes';
|
|
2
|
+
import Lara from '@primevue/themes/lara';
|
|
3
|
+
import { AmColors } from './colors';
|
|
4
|
+
export const AmPreset = definePreset(Lara, {
|
|
5
|
+
primitive: {
|
|
6
|
+
...AmColors
|
|
7
|
+
},
|
|
8
|
+
semantic: {
|
|
9
|
+
primary: {
|
|
10
|
+
50: '{grape.50}',
|
|
11
|
+
100: '{grape.100}',
|
|
12
|
+
200: '{grape.200}',
|
|
13
|
+
300: '{grape.300}',
|
|
14
|
+
400: '{grape.400}',
|
|
15
|
+
500: '{grape.500}',
|
|
16
|
+
600: '{grape.600}',
|
|
17
|
+
700: '{grape.700}',
|
|
18
|
+
800: '{grape.800}',
|
|
19
|
+
900: '{grape.900}',
|
|
20
|
+
950: '{grape.950}'
|
|
21
|
+
},
|
|
22
|
+
colorScheme: {
|
|
23
|
+
light: {
|
|
24
|
+
surface: {
|
|
25
|
+
0: '#FFFFFF',
|
|
26
|
+
50: '{oil.50}',
|
|
27
|
+
100: '{oil.100}',
|
|
28
|
+
200: '{oil.200}',
|
|
29
|
+
300: '{oil.300}',
|
|
30
|
+
400: '{oil.400}',
|
|
31
|
+
500: '{oil.500}',
|
|
32
|
+
600: '{oil.600}',
|
|
33
|
+
700: '{oil.700}',
|
|
34
|
+
800: '{oil.800}',
|
|
35
|
+
900: '{oil.900}',
|
|
36
|
+
950: '{oil.950}'
|
|
37
|
+
},
|
|
38
|
+
primary: {
|
|
39
|
+
color: '{primary.500}',
|
|
40
|
+
contrastColor: '{surface.0}',
|
|
41
|
+
hoverColor: '{primary.600}',
|
|
42
|
+
activeColor: '{primary.700}'
|
|
43
|
+
},
|
|
44
|
+
highlight: {
|
|
45
|
+
background: '{primary.50}',
|
|
46
|
+
focusBackground: '{primary.100}',
|
|
47
|
+
color: '{primary.700}',
|
|
48
|
+
focusColor: '{primary.800}'
|
|
49
|
+
},
|
|
50
|
+
text: {
|
|
51
|
+
color: '{oil.900}',
|
|
52
|
+
hoverColor: '{oil.800}',
|
|
53
|
+
mutedColor: '{oil.600}',
|
|
54
|
+
hoverMutedColor: '{oil.700}'
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
dark: {
|
|
58
|
+
primary: {
|
|
59
|
+
color: '{primary.400}',
|
|
60
|
+
contrastColor: '{surface.900}',
|
|
61
|
+
hoverColor: '{primary.300}',
|
|
62
|
+
activeColor: '{primary.200}'
|
|
63
|
+
},
|
|
64
|
+
highlight: {
|
|
65
|
+
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
|
|
66
|
+
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
|
|
67
|
+
color: 'rgba(255,255,255,.87)',
|
|
68
|
+
focusColor: 'rgba(255,255,255,.87)'
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
});
|
package/config/theme.js
ADDED
package/index.d.ts
ADDED
package/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import Primevue from 'primevue/config';
|
|
2
|
+
import { AmDSPrimeConfig } from './config/theme';
|
|
3
|
+
import ToastService from 'primevue/toastservice';
|
|
4
|
+
import './css/index.css';
|
|
5
|
+
export const AmDSPrime = {
|
|
6
|
+
install(app) {
|
|
7
|
+
app.use(Primevue, AmDSPrimeConfig);
|
|
8
|
+
// @ts-ignore
|
|
9
|
+
app.use(ToastService);
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
export default AmDSPrime;
|