@empoweredvote/ev-ui 0.9.7 → 0.9.8
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 +111 -111
- package/dist/index.js +28 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -3
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/tailwind-preset.js +81 -81
- package/src/tokens.js +415 -415
package/package.json
CHANGED
package/src/tailwind-preset.js
CHANGED
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Empowered Vote Tailwind CSS Preset
|
|
3
|
-
* Import in any app's tailwind config or CSS:
|
|
4
|
-
*
|
|
5
|
-
* Tailwind v4 (CSS):
|
|
6
|
-
* @import "@empoweredvote/ev-ui/tailwind-preset";
|
|
7
|
-
*
|
|
8
|
-
* Tailwind v3 (config):
|
|
9
|
-
* presets: [require('@empoweredvote/ev-ui/tailwind-preset')]
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
import {
|
|
13
|
-
colorScales, colors, fontSizes, fonts, spacing, borderRadius, breakpoints,
|
|
14
|
-
shadows, duration, easing, zIndex, opacity,
|
|
15
|
-
} from './tokens.js';
|
|
16
|
-
|
|
17
|
-
// Flatten color scales for Tailwind: ev-coral-500, ev-teal-050, etc.
|
|
18
|
-
const flatColors = {};
|
|
19
|
-
for (const [hue, shades] of Object.entries(colorScales)) {
|
|
20
|
-
for (const [step, value] of Object.entries(shades)) {
|
|
21
|
-
flatColors[`ev-${hue}-${step}`] = value;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export default {
|
|
26
|
-
theme: {
|
|
27
|
-
extend: {
|
|
28
|
-
colors: {
|
|
29
|
-
...flatColors,
|
|
30
|
-
'ev-coral': colors.evCoral,
|
|
31
|
-
'ev-muted-blue': colors.evMutedBlue,
|
|
32
|
-
'ev-light-blue': colors.evLightBlue,
|
|
33
|
-
'ev-yellow': colors.evYellow,
|
|
34
|
-
'ev-yellow-light': colors.evYellowLight,
|
|
35
|
-
'ev-yellow-dark': colors.evYellowDark,
|
|
36
|
-
// Legacy aliases
|
|
37
|
-
'ev-teal': colors.evTeal,
|
|
38
|
-
'ev-teal-dark': colors.evTealDark,
|
|
39
|
-
'ev-black': colors.black,
|
|
40
|
-
'ev-bg-light': colors.bgLight,
|
|
41
|
-
// State colors
|
|
42
|
-
'ev-error': colors.error,
|
|
43
|
-
'ev-error-light': colors.errorLight,
|
|
44
|
-
'ev-success': colors.success,
|
|
45
|
-
'ev-success-light': colors.successLight,
|
|
46
|
-
'ev-warning': colors.warning,
|
|
47
|
-
'ev-warning-light': colors.warningLight,
|
|
48
|
-
'ev-info': colors.info,
|
|
49
|
-
'ev-info-light': colors.infoLight,
|
|
50
|
-
},
|
|
51
|
-
fontFamily: {
|
|
52
|
-
manrope: [fonts.primary],
|
|
53
|
-
},
|
|
54
|
-
fontSize: fontSizes,
|
|
55
|
-
spacing,
|
|
56
|
-
borderRadius,
|
|
57
|
-
screens: breakpoints,
|
|
58
|
-
boxShadow: shadows,
|
|
59
|
-
zIndex,
|
|
60
|
-
opacity,
|
|
61
|
-
transitionDuration: duration,
|
|
62
|
-
transitionTimingFunction: easing,
|
|
63
|
-
animation: {
|
|
64
|
-
'fade-in': 'ev-fade-in 200ms cubic-bezier(0, 0, 0.2, 1)',
|
|
65
|
-
'fade-out': 'ev-fade-out 150ms cubic-bezier(0.4, 0, 1, 1)',
|
|
66
|
-
'slide-up': 'ev-slide-up 350ms cubic-bezier(0, 0, 0.2, 1)',
|
|
67
|
-
'slide-down': 'ev-slide-down 350ms cubic-bezier(0, 0, 0.2, 1)',
|
|
68
|
-
'scale-in': 'ev-scale-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
69
|
-
'skeleton': 'ev-skeleton 1.5s ease-in-out infinite',
|
|
70
|
-
},
|
|
71
|
-
keyframes: {
|
|
72
|
-
'ev-fade-in': { from: { opacity: '0' }, to: { opacity: '1' } },
|
|
73
|
-
'ev-fade-out': { from: { opacity: '1' }, to: { opacity: '0' } },
|
|
74
|
-
'ev-slide-up': { from: { opacity: '0', transform: 'translateY(8px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
|
|
75
|
-
'ev-slide-down': { from: { opacity: '0', transform: 'translateY(-8px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
|
|
76
|
-
'ev-scale-in': { from: { opacity: '0', transform: 'scale(0.95)' }, to: { opacity: '1', transform: 'scale(1)' } },
|
|
77
|
-
'ev-skeleton': { '0%, 100%': { opacity: '0.4' }, '50%': { opacity: '1' } },
|
|
78
|
-
},
|
|
79
|
-
},
|
|
80
|
-
},
|
|
81
|
-
};
|
|
1
|
+
/**
|
|
2
|
+
* Empowered Vote Tailwind CSS Preset
|
|
3
|
+
* Import in any app's tailwind config or CSS:
|
|
4
|
+
*
|
|
5
|
+
* Tailwind v4 (CSS):
|
|
6
|
+
* @import "@empoweredvote/ev-ui/tailwind-preset";
|
|
7
|
+
*
|
|
8
|
+
* Tailwind v3 (config):
|
|
9
|
+
* presets: [require('@empoweredvote/ev-ui/tailwind-preset')]
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
import {
|
|
13
|
+
colorScales, colors, fontSizes, fonts, spacing, borderRadius, breakpoints,
|
|
14
|
+
shadows, duration, easing, zIndex, opacity,
|
|
15
|
+
} from './tokens.js';
|
|
16
|
+
|
|
17
|
+
// Flatten color scales for Tailwind: ev-coral-500, ev-teal-050, etc.
|
|
18
|
+
const flatColors = {};
|
|
19
|
+
for (const [hue, shades] of Object.entries(colorScales)) {
|
|
20
|
+
for (const [step, value] of Object.entries(shades)) {
|
|
21
|
+
flatColors[`ev-${hue}-${step}`] = value;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export default {
|
|
26
|
+
theme: {
|
|
27
|
+
extend: {
|
|
28
|
+
colors: {
|
|
29
|
+
...flatColors,
|
|
30
|
+
'ev-coral': colors.evCoral,
|
|
31
|
+
'ev-muted-blue': colors.evMutedBlue,
|
|
32
|
+
'ev-light-blue': colors.evLightBlue,
|
|
33
|
+
'ev-yellow': colors.evYellow,
|
|
34
|
+
'ev-yellow-light': colors.evYellowLight,
|
|
35
|
+
'ev-yellow-dark': colors.evYellowDark,
|
|
36
|
+
// Legacy aliases
|
|
37
|
+
'ev-teal': colors.evTeal,
|
|
38
|
+
'ev-teal-dark': colors.evTealDark,
|
|
39
|
+
'ev-black': colors.black,
|
|
40
|
+
'ev-bg-light': colors.bgLight,
|
|
41
|
+
// State colors
|
|
42
|
+
'ev-error': colors.error,
|
|
43
|
+
'ev-error-light': colors.errorLight,
|
|
44
|
+
'ev-success': colors.success,
|
|
45
|
+
'ev-success-light': colors.successLight,
|
|
46
|
+
'ev-warning': colors.warning,
|
|
47
|
+
'ev-warning-light': colors.warningLight,
|
|
48
|
+
'ev-info': colors.info,
|
|
49
|
+
'ev-info-light': colors.infoLight,
|
|
50
|
+
},
|
|
51
|
+
fontFamily: {
|
|
52
|
+
manrope: [fonts.primary],
|
|
53
|
+
},
|
|
54
|
+
fontSize: fontSizes,
|
|
55
|
+
spacing,
|
|
56
|
+
borderRadius,
|
|
57
|
+
screens: breakpoints,
|
|
58
|
+
boxShadow: shadows,
|
|
59
|
+
zIndex,
|
|
60
|
+
opacity,
|
|
61
|
+
transitionDuration: duration,
|
|
62
|
+
transitionTimingFunction: easing,
|
|
63
|
+
animation: {
|
|
64
|
+
'fade-in': 'ev-fade-in 200ms cubic-bezier(0, 0, 0.2, 1)',
|
|
65
|
+
'fade-out': 'ev-fade-out 150ms cubic-bezier(0.4, 0, 1, 1)',
|
|
66
|
+
'slide-up': 'ev-slide-up 350ms cubic-bezier(0, 0, 0.2, 1)',
|
|
67
|
+
'slide-down': 'ev-slide-down 350ms cubic-bezier(0, 0, 0.2, 1)',
|
|
68
|
+
'scale-in': 'ev-scale-in 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
69
|
+
'skeleton': 'ev-skeleton 1.5s ease-in-out infinite',
|
|
70
|
+
},
|
|
71
|
+
keyframes: {
|
|
72
|
+
'ev-fade-in': { from: { opacity: '0' }, to: { opacity: '1' } },
|
|
73
|
+
'ev-fade-out': { from: { opacity: '1' }, to: { opacity: '0' } },
|
|
74
|
+
'ev-slide-up': { from: { opacity: '0', transform: 'translateY(8px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
|
|
75
|
+
'ev-slide-down': { from: { opacity: '0', transform: 'translateY(-8px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
|
|
76
|
+
'ev-scale-in': { from: { opacity: '0', transform: 'scale(0.95)' }, to: { opacity: '1', transform: 'scale(1)' } },
|
|
77
|
+
'ev-skeleton': { '0%, 100%': { opacity: '0.4' }, '50%': { opacity: '1' } },
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
};
|