@salla.sa/twilight-tailwind-theme 2.14.537 → 2.14.538
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/component-tokens.js +10 -0
- package/generator-globals.js +17 -0
- package/global-utilities.js +153 -0
- package/index.js +5 -331
- package/package.json +6 -3
- package/plugin-core.js +211 -0
- package/utilities.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// Tokens for the component CSS build. Only the default radius is themeable
|
|
2
|
+
// (--s-radius); everything else uses plain Tailwind values.
|
|
3
|
+
module.exports = {
|
|
4
|
+
container: { center: true, padding: '10px', screens: { '2xl': '1280px' } },
|
|
5
|
+
extend: {
|
|
6
|
+
borderRadius: {
|
|
7
|
+
DEFAULT: 'var(--s-radius, 0.25rem)',
|
|
8
|
+
},
|
|
9
|
+
},
|
|
10
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// Global Salla component utilities, shared by generator.js and the per-component build.
|
|
2
|
+
module.exports = {
|
|
3
|
+
'.s-has-error': {'@apply !border-red-500 !text-red-500': {}},
|
|
4
|
+
'.s-ltr': {direction: 'ltr'},
|
|
5
|
+
'.s-input': {'@apply appearance-none form-input': {}},
|
|
6
|
+
'.s-hidden': {'@apply hidden': {}},
|
|
7
|
+
'.s-block': {'@apply block': {}},
|
|
8
|
+
'.s-form-control' : {'@apply form-control': {}},
|
|
9
|
+
'.s-form-label' : {'@apply form-label': {}},
|
|
10
|
+
'.s-form-group' : {'@apply form-group': {}},
|
|
11
|
+
'.s-checkbox' : {"@apply custom-checkbox before:content-[''] cursor-pointer border-gray-300": {}},
|
|
12
|
+
'.s-font-default' : {"@apply font-default": {}},
|
|
13
|
+
'.s-form-has-error' : {"@apply has-error": {}},
|
|
14
|
+
'.text-danger' : {"@apply text-red-500": {}},
|
|
15
|
+
'.s-scrollbar': {'@apply styled-scrollbar': {}},
|
|
16
|
+
'.s-toggle': {'@apply toggle-checkbox': {}},
|
|
17
|
+
};
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
// Hand-written global utilities, shared by index.js and the per-component build.
|
|
2
|
+
// Two groups = the original two addUtilities() calls (`.font-default` repeats on purpose).
|
|
3
|
+
module.exports = [
|
|
4
|
+
{
|
|
5
|
+
// empty-state placeholders shared across components
|
|
6
|
+
'.s-products-list-placeholder': {
|
|
7
|
+
'@apply text-gray-400 pt-10 pb-20 flex items-center flex-col justify-center': {},
|
|
8
|
+
'p': { '@apply text-center text-gray-400 pt-2': {} },
|
|
9
|
+
'span': {
|
|
10
|
+
'@apply text-5xl mb-4 w-32 h-32 flex justify-center items-center rounded-full bg-gray-100 text-gray-300': {},
|
|
11
|
+
'svg': { '@apply text-center w-16 h-16 mx-auto fill-gray-300': {} },
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
'.s-loyalty-placeholder': { '@apply flex justify-center items-center': {} },
|
|
15
|
+
// load-more button rendered as raw markup (no salla-button element guaranteed)
|
|
16
|
+
'.s-button-btn': { '@apply relative transition duration-300 inline-flex flex-1 justify-center items-center px-6 pb-2.5 pt-2 text-sm font-bold rounded hover:opacity-80 whitespace-nowrap flex-row-reverse select-none border-solid': {} },
|
|
17
|
+
'.s-button-primary': { '@apply bg-primary text-primary-reverse hover:bg-primary-d border border-primary': {} },
|
|
18
|
+
'.s-button-text': { '@apply transition-opacity duration-300 items-center pointer-events-none truncate': {} },
|
|
19
|
+
'.s-button-loader': { "@apply transition flex mx-2 justify-center items-center before:content-[''] before:inline-block before:w-4 before:h-4 before:border-solid before:border-2 before:border-t-primary before:border-l-primary before:border-b-gray-100 before:border-r-gray-100 before:animate-spin before:rounded-full": {} },
|
|
20
|
+
// raw-anchor button modifiers; wrap+element must travel together (pointer-events pair)
|
|
21
|
+
'.s-button-wrap': { '@apply pointer-events-none': {} },
|
|
22
|
+
'.s-button-wrap svg': { '@apply w-5 h-5 fill-[currentColor]': {} },
|
|
23
|
+
// centered-loader variant, kept global like the pre-split build
|
|
24
|
+
'.s-button-loader-center .s-button-loader': { '@apply absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 !m-0': {} },
|
|
25
|
+
'.s-button-element:not(:disabled):not([loading])': { '@apply pointer-events-auto': {} },
|
|
26
|
+
'.s-button-wide': { '@apply w-full': {} },
|
|
27
|
+
// attach-images button, also rendered by salla-rating-modal
|
|
28
|
+
'.s-comments-item-like-btn': {
|
|
29
|
+
'@apply mt-2': {},
|
|
30
|
+
'.s-button-text': { '@apply flex flex-row-reverse gap-2': {} },
|
|
31
|
+
'span svg': { '@apply w-3 h-3': {} },
|
|
32
|
+
},
|
|
33
|
+
'.s-hidden': { '@apply hidden': {} },
|
|
34
|
+
'.s-has-error': { '@apply border-red-400 focus:border-red-500': {} },
|
|
35
|
+
'.rounded-icon': { '@apply w-16 h-16 flex justify-center items-center rounded-full text-3xl': {} },
|
|
36
|
+
'.form-input': { '@apply w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary dark:focus:border-primary sm:text-sm border-gray-200 dark:bg-gray-600 dark:border-gray-600 rounded-md': {} },
|
|
37
|
+
'.btn': { '@apply transition duration-300 flex-1 inline-flex justify-center items-center px-6 pb-2.5 pt-2 text-sm font-bold rounded-md hover:opacity-80 whitespace-nowrap': {} },
|
|
38
|
+
'.btn-primary': { '@apply text-primary-reverse border border-primary bg-primary': {} },
|
|
39
|
+
'.btn-danger': { '@apply bg-red-400 text-white hover:opacity-80': {} },
|
|
40
|
+
'.btn-outline': { '@apply text-gray-400 bg-white shadow-sm hover:text-gray-600 border border-gray-200': {} },
|
|
41
|
+
'.btn-outline-primary': { '@apply border border-primary text-primary hover:bg-primary hover:text-primary-reverse': {} },
|
|
42
|
+
'.form-control': { '@apply bg-white border border-gray-300 text-gray-900 text-sm rounded block w-full p-2 focus:ring-0 focus:border-primary': {} },
|
|
43
|
+
'.form-label': { '@apply block mb-1 text-sm font-medium text-gray-900': {} },
|
|
44
|
+
'.form-group': { '@apply my-3': {} },
|
|
45
|
+
'.font-default': { '@apply my-3': {} },
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
'.spinner-loader': {
|
|
49
|
+
'border-right-color': 'var(--color-main) !important',
|
|
50
|
+
'&.reverse': {
|
|
51
|
+
'border-right-color': '#9f7171 !important',
|
|
52
|
+
'background-color': '#f98181'
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
'.custom-checkbox': {
|
|
56
|
+
'appearance': 'none',
|
|
57
|
+
'background-color': '#fff',
|
|
58
|
+
'margin': '0',
|
|
59
|
+
'width': '18px',
|
|
60
|
+
'height': '18px',
|
|
61
|
+
'border-width': '1px',
|
|
62
|
+
'border-radius': '4px',
|
|
63
|
+
'display': 'grid',
|
|
64
|
+
'place-content': 'center',
|
|
65
|
+
'&:before': {
|
|
66
|
+
'content': "",
|
|
67
|
+
'width': '10px',
|
|
68
|
+
'height': '10px',
|
|
69
|
+
'clip-path': 'polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)',
|
|
70
|
+
'transform': 'scale(0)',
|
|
71
|
+
'transform-origin': 'bottom left',
|
|
72
|
+
'transition': '120ms transform ease-in-out',
|
|
73
|
+
'box-shadow': 'inset 1em 1em #444',
|
|
74
|
+
'background-color': '#444',
|
|
75
|
+
},
|
|
76
|
+
'&:checked:before': {
|
|
77
|
+
'transform': 'scale(1)'
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
'.font-default': {
|
|
81
|
+
'font-family': 'var(--font-main), -apple-system, BlinkMacSystemFont',
|
|
82
|
+
},
|
|
83
|
+
'.has-error': {
|
|
84
|
+
'.s-form-label': {
|
|
85
|
+
'color': '#ff443a',
|
|
86
|
+
},
|
|
87
|
+
'.s-form-control, .s-tel-input-control, .s-datetime-picker-input': {
|
|
88
|
+
'border-color': '#ff443a',
|
|
89
|
+
'color': '#ff443a',
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
'.styled-scrollbar': {
|
|
93
|
+
'&::-webkit-scrollbar': {
|
|
94
|
+
'width': '5px'
|
|
95
|
+
},
|
|
96
|
+
'&::-webkit-scrollbar-track': {
|
|
97
|
+
'background-color': '#eee'
|
|
98
|
+
},
|
|
99
|
+
'&::-webkit-scrollbar-thumb': {
|
|
100
|
+
'background-color': 'var(--color-primary)',
|
|
101
|
+
'border-radius': '10px',
|
|
102
|
+
'-webkit-border-radius': '10px',
|
|
103
|
+
'-moz-border-radius': '10px',
|
|
104
|
+
'-ms-border-radius': '10px',
|
|
105
|
+
'-o-border-radius': '10px'
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
'.toggle-checkbox': {
|
|
109
|
+
'cursor': 'pointer',
|
|
110
|
+
'display': 'inline-block',
|
|
111
|
+
'.s-toggle-input': {
|
|
112
|
+
'position': 'absolute',
|
|
113
|
+
'visibility': 'hidden'
|
|
114
|
+
},
|
|
115
|
+
'.s-toggle-label': {
|
|
116
|
+
'margin-left': '5px',
|
|
117
|
+
'position': 'relative',
|
|
118
|
+
'top': '2px'
|
|
119
|
+
},
|
|
120
|
+
'.s-toggle-switcher': {
|
|
121
|
+
'display': 'inline-block',
|
|
122
|
+
'background': '#ccc',
|
|
123
|
+
'border-radius': '16px',
|
|
124
|
+
'width': '40px',
|
|
125
|
+
'height': '25px',
|
|
126
|
+
'position': 'relative',
|
|
127
|
+
'vertical-align': 'middle',
|
|
128
|
+
'transition': 'background 0.25s',
|
|
129
|
+
'&:before,&:after': {
|
|
130
|
+
'content': '""',
|
|
131
|
+
},
|
|
132
|
+
'&:before': {
|
|
133
|
+
'display': 'block',
|
|
134
|
+
'background': '#fff',
|
|
135
|
+
'border-radius': '50%',
|
|
136
|
+
'box-shadow': '0 0 0 1px rgba(0,0,0,0.25)',
|
|
137
|
+
'width': '20px',
|
|
138
|
+
'height': '21px',
|
|
139
|
+
'position': 'absolute',
|
|
140
|
+
'top': '2.2px',
|
|
141
|
+
'left': '1px',
|
|
142
|
+
'transition': 'left 0.25s',
|
|
143
|
+
},
|
|
144
|
+
},
|
|
145
|
+
'.s-toggle-input:checked + div': {
|
|
146
|
+
'background': '#30D158',
|
|
147
|
+
'&:before': {
|
|
148
|
+
'left': '18px',
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
];
|
package/index.js
CHANGED
|
@@ -1,333 +1,7 @@
|
|
|
1
1
|
const plugin = require('tailwindcss/plugin')
|
|
2
|
+
const { handler, config } = require('./plugin-core')
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const enableThemeV2 = process.env.TWILIGHT_THEME_V2 === 'true'
|
|
8
|
-
|
|
9
|
-
const v2Keyframes = enableThemeV2 ? {
|
|
10
|
-
fadeInUp: {
|
|
11
|
-
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
12
|
-
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
13
|
-
},
|
|
14
|
-
fadeIn: {
|
|
15
|
-
'0%': { opacity: '0' },
|
|
16
|
-
'100%': { opacity: '1' },
|
|
17
|
-
},
|
|
18
|
-
fadeOut: {
|
|
19
|
-
'0%': { opacity: '1' },
|
|
20
|
-
'100%': { opacity: '0' },
|
|
21
|
-
},
|
|
22
|
-
translateLeft: {
|
|
23
|
-
'0%': { transform: 'translateX(110%)', opacity: '0' },
|
|
24
|
-
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
25
|
-
},
|
|
26
|
-
translateRight: {
|
|
27
|
-
'0%': { transform: 'translateX(-110%)', opacity: '0' },
|
|
28
|
-
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
29
|
-
},
|
|
30
|
-
translateLeftOut: {
|
|
31
|
-
'0%': { transform: 'translateX(0)', opacity: '1' },
|
|
32
|
-
'100%': { transform: 'translateX(110%)', opacity: '0' },
|
|
33
|
-
},
|
|
34
|
-
translateRightOut: {
|
|
35
|
-
'0%': { transform: 'translateX(0)', opacity: '1' },
|
|
36
|
-
'100%': { transform: 'translateX(-110%)', opacity: '0' },
|
|
37
|
-
},
|
|
38
|
-
shrinkFly: {
|
|
39
|
-
'0%': { transform: 'scale(1)', opacity: '1' },
|
|
40
|
-
'50%': { transform: 'scale(0.2)', opacity: '1' },
|
|
41
|
-
'100%': { transform: 'scale(0)', opacity: '0' },
|
|
42
|
-
},
|
|
43
|
-
expandHeight: {
|
|
44
|
-
'0%': { height: '0', opacity: '0' },
|
|
45
|
-
'100%': { opacity: '1' },
|
|
46
|
-
},
|
|
47
|
-
collapseHeight: {
|
|
48
|
-
'0%': { opacity: '1' },
|
|
49
|
-
'100%': { height: '0', opacity: '0' },
|
|
50
|
-
},
|
|
51
|
-
slideDownShare: {
|
|
52
|
-
'0%': { transform: 'translateY(-30px) scaleY(0)', opacity: '0' },
|
|
53
|
-
'100%': { transform: 'translateY(0) scaleY(1)', opacity: '1' },
|
|
54
|
-
},
|
|
55
|
-
rubberBand: {
|
|
56
|
-
'0%': { transform: 'scale(1)' },
|
|
57
|
-
'30%': { transform: 'scale(1.25, 0.75)' },
|
|
58
|
-
'40%': { transform: 'scale(0.75, 1.25)' },
|
|
59
|
-
'50%': { transform: 'scale(1.15, 0.85)' },
|
|
60
|
-
'65%': { transform: 'scale(0.95, 1.05)' },
|
|
61
|
-
'75%': { transform: 'scale(1.05, 0.95)' },
|
|
62
|
-
'100%': { transform: 'scale(1)' },
|
|
63
|
-
},
|
|
64
|
-
} : {}
|
|
65
|
-
|
|
66
|
-
const v2Animations = enableThemeV2 ? {
|
|
67
|
-
'fade-in-up': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
68
|
-
'fade-in': 'fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
69
|
-
'fade-out': 'fadeOut 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
70
|
-
'translate-left': 'translateLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
71
|
-
'translate-right': 'translateRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
72
|
-
'translate-left-out': 'translateLeftOut 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
73
|
-
'translate-right-out': 'translateRightOut 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
74
|
-
'shrink-fly': 'shrinkFly 1.7s ease-out forwards',
|
|
75
|
-
'expand-height': 'expandHeight 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards',
|
|
76
|
-
'collapse-height': 'collapseHeight 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards',
|
|
77
|
-
'slide-down-share': 'slideDownShare 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
78
|
-
'rubber-band': 'rubberBand 0.8s ease-out',
|
|
79
|
-
'stagger-0': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards',
|
|
80
|
-
'stagger-100': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards',
|
|
81
|
-
'stagger-200': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards',
|
|
82
|
-
'stagger-300': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards',
|
|
83
|
-
'stagger-400': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards',
|
|
84
|
-
'stagger-500': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards',
|
|
85
|
-
'stagger-70': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.07s forwards',
|
|
86
|
-
'stagger-140': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.14s forwards',
|
|
87
|
-
'stagger-210': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.21s forwards',
|
|
88
|
-
} : {}
|
|
89
|
-
|
|
90
|
-
module.exports = plugin(function ({ addUtilities, addVariant, matchUtilities, theme }) {
|
|
91
|
-
addVariant('border', ['&:focus'])
|
|
92
|
-
|
|
93
|
-
addUtilities({
|
|
94
|
-
'.s-hidden': { '@apply hidden': {} },
|
|
95
|
-
'.s-has-error': { '@apply border-red-400 focus:border-red-500': {} },
|
|
96
|
-
'.rounded-icon': { '@apply w-16 h-16 flex justify-center items-center rounded-full text-3xl': {} },
|
|
97
|
-
'.form-input': { '@apply w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary dark:focus:border-primary sm:text-sm border-gray-200 dark:bg-gray-600 dark:border-gray-600 rounded-md': {} },
|
|
98
|
-
'.btn': { '@apply transition duration-300 flex-1 inline-flex justify-center items-center px-6 pb-2.5 pt-2 text-sm font-bold rounded-md hover:opacity-80 whitespace-nowrap': {} },
|
|
99
|
-
'.btn-primary': { '@apply text-primary-reverse border border-primary bg-primary': {} },
|
|
100
|
-
'.btn-danger': { '@apply bg-red-400 text-white hover:opacity-80': {} },
|
|
101
|
-
'.btn-outline': { '@apply text-gray-400 bg-white shadow-sm hover:text-gray-600 border border-gray-200': {} },
|
|
102
|
-
'.btn-outline-primary': { '@apply border border-primary text-primary hover:bg-primary hover:text-primary-reverse': {} },
|
|
103
|
-
'.form-control': { '@apply bg-white border border-gray-300 text-gray-900 text-sm rounded block w-full p-2 focus:ring-0 focus:border-primary': {} },
|
|
104
|
-
'.form-label': { '@apply block mb-1 text-sm font-medium text-gray-900': {} },
|
|
105
|
-
'.form-group': { '@apply my-3': {} },
|
|
106
|
-
'.font-default': { '@apply my-3': {} },
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
// todo :: move it to global
|
|
110
|
-
addUtilities({
|
|
111
|
-
'.spinner-loader': {
|
|
112
|
-
'border-right-color': 'var(--color-main) !important',
|
|
113
|
-
'&.reverse': {
|
|
114
|
-
'border-right-color': '#9f7171 !important',
|
|
115
|
-
'background-color': '#f98181'
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
'.custom-checkbox': {
|
|
119
|
-
'appearance': 'none',
|
|
120
|
-
'background-color': '#fff',
|
|
121
|
-
'margin': '0',
|
|
122
|
-
'width': '18px',
|
|
123
|
-
'height': '18px',
|
|
124
|
-
'border-width': '1px',
|
|
125
|
-
'border-radius': '4px',
|
|
126
|
-
'display': 'grid',
|
|
127
|
-
'place-content': 'center',
|
|
128
|
-
'&:before': {
|
|
129
|
-
'content': "",
|
|
130
|
-
'width': '10px',
|
|
131
|
-
'height': '10px',
|
|
132
|
-
'clip-path': 'polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)',
|
|
133
|
-
'transform': 'scale(0)',
|
|
134
|
-
'transform-origin': 'bottom left',
|
|
135
|
-
'transition': '120ms transform ease-in-out',
|
|
136
|
-
'box-shadow': 'inset 1em 1em #444',
|
|
137
|
-
'background-color': '#444',
|
|
138
|
-
},
|
|
139
|
-
'&:checked:before': {
|
|
140
|
-
'transform': 'scale(1)'
|
|
141
|
-
}
|
|
142
|
-
},
|
|
143
|
-
'.font-default': {
|
|
144
|
-
'font-family': 'var(--font-main), -apple-system, BlinkMacSystemFont',
|
|
145
|
-
},
|
|
146
|
-
'.has-error': {
|
|
147
|
-
'.s-form-label': {
|
|
148
|
-
'color': '#ff443a',
|
|
149
|
-
},
|
|
150
|
-
'.s-form-control, .s-tel-input-control, .s-datetime-picker-input': {
|
|
151
|
-
'border-color': '#ff443a',
|
|
152
|
-
'color': '#ff443a',
|
|
153
|
-
},
|
|
154
|
-
},
|
|
155
|
-
'.styled-scrollbar': {
|
|
156
|
-
'&::-webkit-scrollbar': {
|
|
157
|
-
'width': '5px'
|
|
158
|
-
},
|
|
159
|
-
'&::-webkit-scrollbar-track': {
|
|
160
|
-
'background-color': '#eee'
|
|
161
|
-
},
|
|
162
|
-
'&::-webkit-scrollbar-thumb': {
|
|
163
|
-
'background-color': 'var(--color-primary)',
|
|
164
|
-
'border-radius': '10px',
|
|
165
|
-
'-webkit-border-radius': '10px',
|
|
166
|
-
'-moz-border-radius': '10px',
|
|
167
|
-
'-ms-border-radius': '10px',
|
|
168
|
-
'-o-border-radius': '10px'
|
|
169
|
-
}
|
|
170
|
-
},
|
|
171
|
-
'.toggle-checkbox': {
|
|
172
|
-
'cursor': 'pointer',
|
|
173
|
-
'display': 'inline-block',
|
|
174
|
-
'.s-toggle-input': {
|
|
175
|
-
'position': 'absolute',
|
|
176
|
-
'visibility': 'hidden'
|
|
177
|
-
},
|
|
178
|
-
'.s-toggle-label': {
|
|
179
|
-
'margin-left': '5px',
|
|
180
|
-
'position': 'relative',
|
|
181
|
-
'top': '2px'
|
|
182
|
-
},
|
|
183
|
-
'.s-toggle-switcher': {
|
|
184
|
-
'display': 'inline-block',
|
|
185
|
-
'background': '#ccc',
|
|
186
|
-
'border-radius': '16px',
|
|
187
|
-
'width': '40px',
|
|
188
|
-
'height': '25px',
|
|
189
|
-
'position': 'relative',
|
|
190
|
-
'vertical-align': 'middle',
|
|
191
|
-
'transition': 'background 0.25s',
|
|
192
|
-
'&:before,&:after': {
|
|
193
|
-
'content': '""',
|
|
194
|
-
},
|
|
195
|
-
'&:before': {
|
|
196
|
-
'display': 'block',
|
|
197
|
-
'background': '#fff',
|
|
198
|
-
'border-radius': '50%',
|
|
199
|
-
'box-shadow': '0 0 0 1px rgba(0,0,0,0.25)',
|
|
200
|
-
'width': '20px',
|
|
201
|
-
'height': '21px',
|
|
202
|
-
'position': 'absolute',
|
|
203
|
-
'top': '2.2px',
|
|
204
|
-
'left': '1px',
|
|
205
|
-
'transition': 'left 0.25s',
|
|
206
|
-
},
|
|
207
|
-
},
|
|
208
|
-
'.s-toggle-input:checked + div': {
|
|
209
|
-
'background': '#30D158',
|
|
210
|
-
'&:before': {
|
|
211
|
-
'left': '18px',
|
|
212
|
-
}
|
|
213
|
-
},
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
});
|
|
217
|
-
|
|
218
|
-
addUtilities(require('./utilities.json'))
|
|
219
|
-
|
|
220
|
-
// SAL-73 Phase 3: prefers-reduced-motion overrides for the v2 animation
|
|
221
|
-
// utilities. Dormant unless TWILIGHT_THEME_V2=true.
|
|
222
|
-
if (enableThemeV2) {
|
|
223
|
-
addUtilities({
|
|
224
|
-
'@media (prefers-reduced-motion: reduce)': {
|
|
225
|
-
'.animate-fade-in-up, .animate-fade-in, .animate-fade-out': {
|
|
226
|
-
'animation': 'none !important',
|
|
227
|
-
'opacity': '1 !important',
|
|
228
|
-
'transform': 'none !important',
|
|
229
|
-
},
|
|
230
|
-
'.animate-translate-left, .animate-translate-right, .animate-translate-left-out, .animate-translate-right-out': {
|
|
231
|
-
'animation': 'none !important',
|
|
232
|
-
'opacity': '1 !important',
|
|
233
|
-
'transform': 'none !important',
|
|
234
|
-
},
|
|
235
|
-
'.animate-shrink-fly': {
|
|
236
|
-
'animation': 'none !important',
|
|
237
|
-
'opacity': '1 !important',
|
|
238
|
-
'transform': 'none !important',
|
|
239
|
-
},
|
|
240
|
-
'.animate-expand-height, .animate-collapse-height': {
|
|
241
|
-
'animation': 'none !important',
|
|
242
|
-
'opacity': '1 !important',
|
|
243
|
-
'height': 'auto !important',
|
|
244
|
-
},
|
|
245
|
-
'.animate-slide-down-share': {
|
|
246
|
-
'animation': 'none !important',
|
|
247
|
-
'opacity': '1 !important',
|
|
248
|
-
'transform': 'none !important',
|
|
249
|
-
},
|
|
250
|
-
'.animate-stagger-0, .animate-stagger-100, .animate-stagger-200, .animate-stagger-300, .animate-stagger-400, .animate-stagger-500': {
|
|
251
|
-
'animation': 'none !important',
|
|
252
|
-
'opacity': '1 !important',
|
|
253
|
-
'transform': 'none !important',
|
|
254
|
-
},
|
|
255
|
-
'.animate-stagger-70, .animate-stagger-140, .animate-stagger-210': {
|
|
256
|
-
'animation': 'none !important',
|
|
257
|
-
'opacity': '1 !important',
|
|
258
|
-
'transform': 'none !important',
|
|
259
|
-
},
|
|
260
|
-
'.animate-rubber-band': {
|
|
261
|
-
'animation': 'none !important',
|
|
262
|
-
'transform': 'none !important',
|
|
263
|
-
},
|
|
264
|
-
}
|
|
265
|
-
})
|
|
266
|
-
}
|
|
267
|
-
}, {
|
|
268
|
-
important: true,
|
|
269
|
-
darkMode: 'class', // or 'media' or 'class',
|
|
270
|
-
theme: {
|
|
271
|
-
fontFamily: { // move to plugin
|
|
272
|
-
sans: [
|
|
273
|
-
'var(--font-main)',
|
|
274
|
-
'-apple-system',
|
|
275
|
-
'BlinkMacSystemFont',
|
|
276
|
-
],
|
|
277
|
-
primary: "var(--font-main)"
|
|
278
|
-
},
|
|
279
|
-
extend: {
|
|
280
|
-
colors: {
|
|
281
|
-
'inherit': 'inherit',
|
|
282
|
-
'transparent': 'transparent',
|
|
283
|
-
'primary': 'var(--color-primary)',
|
|
284
|
-
'primary-d': 'var(--color-primary-dark)',
|
|
285
|
-
'primary-l': 'var(--color-primary-light)',
|
|
286
|
-
'primary-reverse': 'var(--color-primary-reverse)',
|
|
287
|
-
'dark': 'var(--color-dark)'
|
|
288
|
-
},
|
|
289
|
-
zIndex: {
|
|
290
|
-
'1': '1',
|
|
291
|
-
},
|
|
292
|
-
fontSize: {
|
|
293
|
-
'icon-lg': '33px',
|
|
294
|
-
},
|
|
295
|
-
boxShadow: {
|
|
296
|
-
'default': '5px 10px 30px #2B2D340D;',
|
|
297
|
-
},
|
|
298
|
-
transitionTimingFunction: {
|
|
299
|
-
'elastic': 'cubic-bezier(0.55, 0, 0.1, 1)',
|
|
300
|
-
},
|
|
301
|
-
screens: {
|
|
302
|
-
'xxs': { 'min': '380px', 'max': '479px' },
|
|
303
|
-
'xs': '480px',
|
|
304
|
-
},
|
|
305
|
-
keyframes: {
|
|
306
|
-
slideUpFromBottom: {
|
|
307
|
-
'0%': { transform: 'translateY(100%)', opacity: '0' },
|
|
308
|
-
'100%': { transform: 'translateY(0%)', opacity: '1' },
|
|
309
|
-
},
|
|
310
|
-
slideDownFromBottom: {
|
|
311
|
-
'0%': { transform: 'translateY(0%)', opacity: '1' },
|
|
312
|
-
'100%': { transform: 'translateY(100%)', opacity: '0' },
|
|
313
|
-
},
|
|
314
|
-
slideUPFromTop: {
|
|
315
|
-
'0%': { transform: 'translateY(-0%)', opacity: '1' },
|
|
316
|
-
'100%': { transform: 'translateY(-100%)', opacity: '0' }
|
|
317
|
-
},
|
|
318
|
-
slideDownFromTop: {
|
|
319
|
-
'0%': { transform: 'translateY(-100%)', opacity: '0' },
|
|
320
|
-
'100%': { transform: 'translateY(-0%)', opacity: '1' }
|
|
321
|
-
},
|
|
322
|
-
...v2Keyframes,
|
|
323
|
-
},
|
|
324
|
-
animation: {
|
|
325
|
-
slideUpFromBottom: 'slideUpFromBottom .6s linear',
|
|
326
|
-
slideDownFromBottom: 'slideDownFromBottom .6s linear',
|
|
327
|
-
slideDownFromTop: 'slideDownFromTop .6s linear',
|
|
328
|
-
slideUPFromTop: 'slideUPFromTop .6s linear',
|
|
329
|
-
...v2Animations,
|
|
330
|
-
},
|
|
331
|
-
}
|
|
332
|
-
}
|
|
333
|
-
});
|
|
4
|
+
module.exports = plugin(function (api) {
|
|
5
|
+
handler(api)
|
|
6
|
+
api.addUtilities(require('./utilities.json'))
|
|
7
|
+
}, config)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salla.sa/twilight-tailwind-theme",
|
|
3
|
-
"version": "2.14.
|
|
3
|
+
"version": "2.14.538",
|
|
4
4
|
"license": "GPL-3.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"twilight",
|
|
@@ -14,11 +14,14 @@
|
|
|
14
14
|
"homepage": "https://salla.dev",
|
|
15
15
|
"scripts": {
|
|
16
16
|
"build": "node generator.js",
|
|
17
|
-
"watch": "run-when-changed --watch './../twilight-components/src/components/**/utilities.json' --exec 'npm run build' --verbose",
|
|
18
17
|
"push": "npm version patch && npm run build && npm publish --access private"
|
|
19
18
|
},
|
|
20
19
|
"files": [
|
|
21
20
|
"index.js",
|
|
21
|
+
"plugin-core.js",
|
|
22
|
+
"global-utilities.js",
|
|
23
|
+
"generator-globals.js",
|
|
24
|
+
"component-tokens.js",
|
|
22
25
|
"package.json",
|
|
23
26
|
"safe-list-css.txt",
|
|
24
27
|
"utilities.json"
|
|
@@ -31,5 +34,5 @@
|
|
|
31
34
|
"overrides": {
|
|
32
35
|
"minimatch": "3.1.5"
|
|
33
36
|
},
|
|
34
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "ecc669b4fab0447f825a89d050523ad6091fe813"
|
|
35
38
|
}
|