@shuriken-ui/tailwind 0.0.3 → 0.0.5
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/LICENSE.md +21 -0
- package/README.md +54 -0
- package/dist/config.cjs +2 -0
- package/dist/config.d.ts +7 -12
- package/dist/config.mjs +2 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +19 -36
- package/dist/index.mjs +1 -0
- package/dist/options-cff79ff9.d.ts +5 -0
- package/dist/preset.cjs +547 -120
- package/dist/preset.d.ts +7 -12
- package/dist/preset.mjs +546 -120
- package/package.json +1 -1
package/dist/preset.mjs
CHANGED
|
@@ -1,196 +1,627 @@
|
|
|
1
|
+
import defaultTheme from 'tailwindcss/defaultTheme';
|
|
1
2
|
import colors from 'tailwindcss/colors';
|
|
2
3
|
import typography from '@tailwindcss/typography';
|
|
3
4
|
import aspectRatio from '@tailwindcss/aspect-ratio';
|
|
4
5
|
import plugin from 'tailwindcss/plugin';
|
|
6
|
+
import { defu } from 'defu';
|
|
5
7
|
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
const shurikenUIBase = plugin(function({ addBase }) {
|
|
9
|
+
addBase({
|
|
10
|
+
".dark": { colorScheme: "dark" }
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
const defaultPluginOptions = {
|
|
15
|
+
prefix: "nui"
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const defaultDropdownDividerConfig = {
|
|
19
|
+
space: "2",
|
|
20
|
+
border: "muted-200",
|
|
21
|
+
borderDark: "muted-600"
|
|
22
|
+
};
|
|
23
|
+
const dropdown = plugin.withOptions(
|
|
24
|
+
function(options) {
|
|
25
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
26
|
+
return function({ addComponents, theme }) {
|
|
27
|
+
const config = theme(
|
|
28
|
+
"shurikenUi.dropdownDivider"
|
|
29
|
+
);
|
|
9
30
|
addComponents({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
background: "linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%)",
|
|
13
|
-
backgroundSize: "1200px 104px"
|
|
14
|
-
},
|
|
15
|
-
".dark .placeload": {
|
|
16
|
-
position: "relative",
|
|
17
|
-
background: "linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%)",
|
|
18
|
-
backgroundSize: "1200px 104px"
|
|
31
|
+
[`.${prefix}-dropdown-divider`]: {
|
|
32
|
+
[`@apply my-${config.space} block h-px w-full border-t border-${config.border} dark:border-${config.borderDark}`]: {}
|
|
19
33
|
}
|
|
20
34
|
});
|
|
35
|
+
};
|
|
36
|
+
},
|
|
37
|
+
function() {
|
|
38
|
+
return {
|
|
39
|
+
theme: {
|
|
40
|
+
shurikenUi: {
|
|
41
|
+
dropdownDivider: defaultDropdownDividerConfig
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
const defaultFocusConfig = {
|
|
49
|
+
offset: "2",
|
|
50
|
+
width: "1",
|
|
51
|
+
style: "dashed",
|
|
52
|
+
color: "muted-300",
|
|
53
|
+
colorDark: "muted-600"
|
|
54
|
+
};
|
|
55
|
+
const focus = plugin.withOptions(
|
|
56
|
+
function(options) {
|
|
57
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
58
|
+
return function({ addComponents, theme }) {
|
|
59
|
+
const config = theme(
|
|
60
|
+
"shurikenUi.focus"
|
|
61
|
+
);
|
|
21
62
|
addComponents({
|
|
22
|
-
|
|
23
|
-
|
|
63
|
+
[`.${prefix}-focus`]: {
|
|
64
|
+
[`@apply outline-${config.width} outline-${config.style} outline-offset-${config.offset}`]: {},
|
|
24
65
|
"@apply outline-transparent": {},
|
|
25
66
|
"&:focus-within": {
|
|
26
|
-
|
|
27
|
-
|
|
67
|
+
[`@apply outline-${config.color} dark:outline-${config.colorDark}`]: {},
|
|
68
|
+
[`@apply outline-${config.style} ring-0`]: {}
|
|
28
69
|
},
|
|
29
70
|
"&:focus-visible": {
|
|
30
|
-
|
|
71
|
+
[`@apply outline-${config.width}`]: {}
|
|
31
72
|
}
|
|
32
73
|
}
|
|
33
74
|
});
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
function() {
|
|
78
|
+
return {
|
|
79
|
+
theme: {
|
|
80
|
+
shurikenUi: {
|
|
81
|
+
focus: defaultFocusConfig
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
const defaultLabelConfig = {
|
|
89
|
+
font: "alt",
|
|
90
|
+
text: "muted-400",
|
|
91
|
+
textDark: "muted-400/80"
|
|
92
|
+
};
|
|
93
|
+
const label = plugin.withOptions(
|
|
94
|
+
function(options) {
|
|
95
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
96
|
+
return function({ addComponents, theme }) {
|
|
97
|
+
const config = theme(
|
|
98
|
+
"shurikenUi.label"
|
|
99
|
+
);
|
|
34
100
|
addComponents({
|
|
35
|
-
|
|
101
|
+
[`.${prefix}-label`]: {
|
|
102
|
+
[`@apply inline-block font-${config.font} leading-none text-${config.text} dark:text-${config.textDark}`]: {}
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
},
|
|
107
|
+
function() {
|
|
108
|
+
return {
|
|
109
|
+
theme: {
|
|
110
|
+
shurikenUi: {
|
|
111
|
+
label: defaultLabelConfig
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
|
|
118
|
+
const defaultMarkConfig = {
|
|
119
|
+
bg: "primary-100",
|
|
120
|
+
bgDark: "primary-800",
|
|
121
|
+
text: "primary-800",
|
|
122
|
+
textDark: "primary-200"
|
|
123
|
+
};
|
|
124
|
+
const mark = plugin.withOptions(
|
|
125
|
+
function(options) {
|
|
126
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
127
|
+
return function({ addComponents, theme }) {
|
|
128
|
+
const config = theme("shurikenUi.mark");
|
|
129
|
+
addComponents({
|
|
130
|
+
[`.${prefix}-mark`]: {
|
|
131
|
+
[`@apply bg-${config.bg} dark:bg-${config.bgDark}`]: {},
|
|
132
|
+
[`@apply text-${config.text} dark:text-${config.textDark}`]: {}
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
};
|
|
136
|
+
},
|
|
137
|
+
function() {
|
|
138
|
+
return {
|
|
139
|
+
theme: {
|
|
140
|
+
shurikenUi: {
|
|
141
|
+
mark: defaultMarkConfig
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
|
|
148
|
+
const mask = plugin.withOptions(
|
|
149
|
+
function(options) {
|
|
150
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
151
|
+
return function({ addComponents }) {
|
|
152
|
+
addComponents({
|
|
153
|
+
[`.${prefix}-mask`]: {
|
|
36
154
|
"mask-size": "contain",
|
|
37
155
|
"mask-repeat": "no-repeat",
|
|
38
156
|
"mask-position": "center"
|
|
39
157
|
},
|
|
40
|
-
|
|
158
|
+
[`.${prefix}-mask-hex`]: {
|
|
41
159
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')"
|
|
42
160
|
},
|
|
43
|
-
|
|
161
|
+
[`.${prefix}-mask-hexed`]: {
|
|
44
162
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')"
|
|
45
163
|
},
|
|
46
|
-
|
|
164
|
+
[`.${prefix}-mask-deca`]: {
|
|
47
165
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')"
|
|
48
166
|
},
|
|
49
|
-
|
|
167
|
+
[`.${prefix}-mask-blob`]: {
|
|
50
168
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')"
|
|
51
169
|
},
|
|
52
|
-
|
|
170
|
+
[`.${prefix}-mask-diamond`]: {
|
|
53
171
|
"mask-image": "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')"
|
|
54
172
|
}
|
|
55
173
|
});
|
|
174
|
+
};
|
|
175
|
+
},
|
|
176
|
+
function() {
|
|
177
|
+
return {};
|
|
178
|
+
}
|
|
179
|
+
);
|
|
180
|
+
|
|
181
|
+
const placeload = plugin.withOptions(
|
|
182
|
+
function(options) {
|
|
183
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
184
|
+
return function({ addComponents }) {
|
|
56
185
|
addComponents({
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"@apply text-muted-50 dark:text-muted-900": {}
|
|
62
|
-
},
|
|
63
|
-
".nui-text-100": {
|
|
64
|
-
"@apply text-muted-100 dark:text-muted-900": {}
|
|
65
|
-
},
|
|
66
|
-
".nui-text-200": {
|
|
67
|
-
"@apply text-muted-200 dark:text-muted-800": {}
|
|
68
|
-
},
|
|
69
|
-
".nui-text-300": {
|
|
70
|
-
"@apply text-muted-300 dark:text-muted-700": {}
|
|
71
|
-
},
|
|
72
|
-
".nui-text-400": {
|
|
73
|
-
"@apply text-muted-400 dark:text-muted-600": {}
|
|
74
|
-
},
|
|
75
|
-
".nui-text-500": {
|
|
76
|
-
"@apply text-muted-500 dark:text-muted-500": {}
|
|
186
|
+
[`.${prefix}-placeload`]: {
|
|
187
|
+
position: "relative",
|
|
188
|
+
background: "linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%)",
|
|
189
|
+
backgroundSize: "1200px 104px"
|
|
77
190
|
},
|
|
78
|
-
|
|
79
|
-
|
|
191
|
+
[`.dark .${prefix}-placeload`]: {
|
|
192
|
+
position: "relative",
|
|
193
|
+
background: "linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%)",
|
|
194
|
+
backgroundSize: "1200px 104px"
|
|
195
|
+
}
|
|
196
|
+
});
|
|
197
|
+
};
|
|
198
|
+
},
|
|
199
|
+
function(options) {
|
|
200
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
201
|
+
return {
|
|
202
|
+
theme: {
|
|
203
|
+
keyframes: {
|
|
204
|
+
[`${prefix}-placeload`]: {
|
|
205
|
+
"0%": { "background-position": "-468px 0" },
|
|
206
|
+
"100%": { "background-position": "468px 0" }
|
|
207
|
+
}
|
|
80
208
|
},
|
|
81
|
-
|
|
82
|
-
|
|
209
|
+
animation: {
|
|
210
|
+
[`${prefix}-placeload`]: `${prefix}-placeload 1s linear infinite forwards`
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
};
|
|
214
|
+
}
|
|
215
|
+
);
|
|
216
|
+
|
|
217
|
+
const defaultSlimscrollConfig = {
|
|
218
|
+
width: "[6px]",
|
|
219
|
+
bg: "black/5",
|
|
220
|
+
bgDark: "white/5",
|
|
221
|
+
bgHover: "black/20",
|
|
222
|
+
bgHoverDark: "white/20"
|
|
223
|
+
};
|
|
224
|
+
const slimscroll = plugin.withOptions(
|
|
225
|
+
function(options) {
|
|
226
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
227
|
+
return function({ addComponents, theme }) {
|
|
228
|
+
const config = theme(
|
|
229
|
+
"shurikenUi.slimscroll"
|
|
230
|
+
);
|
|
231
|
+
addComponents({
|
|
232
|
+
[`.${prefix}-slimscroll::-webkit-scrollbar, .${prefix}-slimscroll-opaque::-webkit-scrollbar`]: {
|
|
233
|
+
scrollBehavior: "smooth",
|
|
234
|
+
scrollbarGutter: "stable",
|
|
235
|
+
[`@apply w-${config.width}`]: {}
|
|
83
236
|
},
|
|
84
|
-
|
|
85
|
-
|
|
237
|
+
[`.${prefix}-slimscroll::-webkit-scrollbar-thumb`]: {
|
|
238
|
+
[`@apply rounded-lg bg-${config.bg} dark:bg-${config.bgDark} duration-300 transition-all`]: {}
|
|
86
239
|
},
|
|
87
|
-
|
|
88
|
-
|
|
240
|
+
[`.${prefix}-slimscroll-opaque::-webkit-scrollbar-thumb`]: {
|
|
241
|
+
[`@apply rounded-lg bg-transparent duration-300 transition-all`]: {}
|
|
89
242
|
},
|
|
90
|
-
|
|
91
|
-
|
|
243
|
+
[`.${prefix}-slimscroll:hover::-webkit-scrollbar-thumb, .${prefix}-slimscroll-opaque:hover::-webkit-scrollbar-thumb`]: {
|
|
244
|
+
[`@apply bg-${config.bgHover} dark:bg-${config.bgHoverDark}`]: {}
|
|
92
245
|
}
|
|
93
246
|
});
|
|
247
|
+
};
|
|
248
|
+
},
|
|
249
|
+
function() {
|
|
250
|
+
return {
|
|
251
|
+
theme: {
|
|
252
|
+
shurikenUi: {
|
|
253
|
+
slimscroll: defaultSlimscrollConfig
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
};
|
|
257
|
+
}
|
|
258
|
+
);
|
|
259
|
+
|
|
260
|
+
const defaultTooltipConfig = {
|
|
261
|
+
font: "sans",
|
|
262
|
+
bg: "[#1e293b]",
|
|
263
|
+
bgDark: "[#ec4899]",
|
|
264
|
+
text: "[#fff]",
|
|
265
|
+
textDark: "[#fff]",
|
|
266
|
+
minWidth: "3rem",
|
|
267
|
+
maxWidth: "21rem"
|
|
268
|
+
};
|
|
269
|
+
const tooltip = plugin.withOptions(
|
|
270
|
+
function(options) {
|
|
271
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
272
|
+
return function({ addComponents, theme }) {
|
|
273
|
+
const config = theme(
|
|
274
|
+
"shurikenUi.tooltip"
|
|
275
|
+
);
|
|
276
|
+
const tooltip = `data-${prefix}-tooltip`;
|
|
277
|
+
const position = `data-${prefix}-tooltip-position`;
|
|
94
278
|
addComponents({
|
|
95
|
-
|
|
279
|
+
[`[${tooltip}]`]: {
|
|
280
|
+
position: "relative"
|
|
281
|
+
},
|
|
282
|
+
[`[${tooltip}]::before, [${tooltip}]::after`]: {
|
|
283
|
+
textTransform: "none",
|
|
284
|
+
fontSize: "0.9em",
|
|
285
|
+
lineHeight: "1",
|
|
286
|
+
userSelect: "none",
|
|
287
|
+
pointerEvents: "none",
|
|
288
|
+
position: "absolute",
|
|
289
|
+
display: "none",
|
|
290
|
+
opacity: "0"
|
|
291
|
+
},
|
|
292
|
+
[`[${tooltip}]::before`]: {
|
|
293
|
+
content: "''",
|
|
294
|
+
border: "5px solid transparent",
|
|
295
|
+
zIndex: "1001"
|
|
296
|
+
},
|
|
297
|
+
[`[${tooltip}]::after`]: {
|
|
298
|
+
content: `attr(${tooltip})`,
|
|
299
|
+
textAlign: "center",
|
|
300
|
+
minWidth: config.minWidth,
|
|
301
|
+
maxWidth: config.maxWidth,
|
|
302
|
+
whiteSpace: "pre",
|
|
303
|
+
overflow: "hidden",
|
|
304
|
+
padding: "1ch 1.5ch",
|
|
305
|
+
borderRadius: "0.5ch",
|
|
306
|
+
zIndex: "1000",
|
|
307
|
+
[`@apply font-${config.font} text-xs shadow-lg`]: {},
|
|
308
|
+
[`@apply text-${config.text}`]: {},
|
|
309
|
+
[`@apply bg-${config.bg}`]: {}
|
|
310
|
+
},
|
|
311
|
+
[`.dark [${tooltip}]::after`]: {
|
|
312
|
+
[`@apply text-${config.textDark}`]: {},
|
|
313
|
+
[`@apply bg-${config.bgDark}`]: {}
|
|
314
|
+
},
|
|
315
|
+
[`[${tooltip}]:hover::before, [${tooltip}]:hover::after, [${tooltip}]:focus-visible::before, [${tooltip}]:focus-visible::after`]: {
|
|
316
|
+
display: "block"
|
|
317
|
+
},
|
|
318
|
+
[`[${tooltip}='']::before, [${tooltip}='']::after`]: {
|
|
319
|
+
display: "none !important"
|
|
320
|
+
},
|
|
321
|
+
/* position up (default) */
|
|
322
|
+
[`[${tooltip}]:not([${position}])::before, [${tooltip}][${position}^='up']::before`]: {
|
|
323
|
+
bottom: "calc(100% + 8px)",
|
|
324
|
+
borderBottomWidth: "0",
|
|
325
|
+
borderTopColor: "currentColor",
|
|
326
|
+
[`@apply text-${config.bg}`]: {}
|
|
327
|
+
},
|
|
328
|
+
[`.dark [${tooltip}]:not([${position}])::before, .dark [${tooltip}][${position}^='up']::before`]: {
|
|
329
|
+
[`@apply text-${config.bgDark}`]: {}
|
|
330
|
+
},
|
|
331
|
+
[`[${tooltip}]:not([${position}])::after, [${tooltip}][${position}^='up']::after`]: {
|
|
332
|
+
bottom: "calc(100% + 13px)"
|
|
333
|
+
},
|
|
334
|
+
[`[${tooltip}]:not([${position}])::before, [${tooltip}][${position}^='up']::before, [${tooltip}]:not([${position}])::after, [${tooltip}][${position}^='up']::after`]: {
|
|
335
|
+
left: "50%",
|
|
336
|
+
// insetInlineStart
|
|
337
|
+
transform: "translate(-50%, -0.5em)"
|
|
338
|
+
},
|
|
339
|
+
/* position down */
|
|
340
|
+
[`[${tooltip}][${position}^='down']::before`]: {
|
|
341
|
+
top: "100%",
|
|
342
|
+
borderTopWidth: "0",
|
|
343
|
+
borderBottomColor: "currentColor",
|
|
344
|
+
[`@apply text-${config.bg}`]: {}
|
|
345
|
+
},
|
|
346
|
+
[`.dark [${tooltip}][${position}^='down']::before`]: {
|
|
347
|
+
[`@apply text-${config.bgDark}`]: {}
|
|
348
|
+
},
|
|
349
|
+
[`[${tooltip}][${position}^='down']::after`]: {
|
|
350
|
+
top: "calc(100% + 5px)"
|
|
351
|
+
},
|
|
352
|
+
[`[${tooltip}][${position}^='down']::before, [${tooltip}][${position}^='down']::after`]: {
|
|
353
|
+
left: "50%",
|
|
354
|
+
// insetInlineStart
|
|
355
|
+
transform: "translate(-50%, 0.5em)"
|
|
356
|
+
},
|
|
357
|
+
/* position start (left) */
|
|
358
|
+
[`[${tooltip}][${position}^='start']::before, [${tooltip}][${position}^='left']::before`]: {
|
|
359
|
+
top: "50%",
|
|
360
|
+
borderEndWidth: "0",
|
|
361
|
+
borderStartColor: "currentColor",
|
|
362
|
+
insetInlineStart: "calc(0em - 5px)",
|
|
363
|
+
transform: "translate(-0.5em, -50%)",
|
|
364
|
+
[`@apply text-${config.bg}`]: {}
|
|
365
|
+
},
|
|
366
|
+
[`[${tooltip}][${position}^='start']::before, [${tooltip}][${position}^='left']::before`]: {
|
|
367
|
+
[`@apply text-${config.bgDark}`]: {}
|
|
368
|
+
},
|
|
369
|
+
[`[${tooltip}][${position}^='start']::after, [${tooltip}][${position}^='left']::after`]: {
|
|
370
|
+
top: "50%",
|
|
371
|
+
insetInlineEnd: "calc(100% + 5px)",
|
|
372
|
+
transform: "translate(-0.5em, -50%)"
|
|
373
|
+
},
|
|
374
|
+
/* position end (right) */
|
|
375
|
+
[`[${tooltip}][${position}^='end']::before, [${tooltip}][${position}^='right']::before`]: {
|
|
376
|
+
top: "50%",
|
|
377
|
+
borderStartWidth: "0",
|
|
378
|
+
borderEndColor: "currentColor",
|
|
379
|
+
insetInlineEnd: "calc(0em - 5px)",
|
|
380
|
+
transform: "translate(0.5em, -50%)",
|
|
381
|
+
[`@apply text-${config.bg}`]: {}
|
|
382
|
+
},
|
|
383
|
+
[`[${tooltip}][${position}^='end']::before, [${tooltip}][${position}^='right']::before`]: {
|
|
384
|
+
[`@apply text-${config.bgDark}`]: {}
|
|
385
|
+
},
|
|
386
|
+
[`[${tooltip}][${position}^='end']::after, [${tooltip}][${position}^='right']::after`]: {
|
|
387
|
+
top: "50%",
|
|
388
|
+
insetInlineStart: "calc(100% + 5px)",
|
|
389
|
+
transform: "translate(0.5em, -50%)"
|
|
390
|
+
},
|
|
391
|
+
[`${[
|
|
392
|
+
`[${tooltip}]:not([${position}]):hover::before`,
|
|
393
|
+
`[${tooltip}]:not([${position}]):hover::after`,
|
|
394
|
+
`[${tooltip}][${position}^='up']:hover::before`,
|
|
395
|
+
`[${tooltip}][${position}^='up']:hover::after`,
|
|
396
|
+
`[${tooltip}][${position}^='down']:hover::before`,
|
|
397
|
+
`[${tooltip}][${position}^='down']:hover::after`,
|
|
398
|
+
`[${tooltip}]:not([${position}]):focus-visible::before`,
|
|
399
|
+
`[${tooltip}]:not([${position}]):focus-visible::after`,
|
|
400
|
+
`[${tooltip}][${position}^='up']:focus-visible::before`,
|
|
401
|
+
`[${tooltip}][${position}^='up']:focus-visible::after`,
|
|
402
|
+
`[${tooltip}][${position}^='down']:focus-visible::before`,
|
|
403
|
+
`[${tooltip}][${position}^='down']:focus-visible::after`
|
|
404
|
+
].join(",")}`]: {
|
|
405
|
+
[`@apply animate-${prefix}-tooltip-x`]: {}
|
|
406
|
+
},
|
|
407
|
+
[`${[
|
|
408
|
+
`[${tooltip}][${position}^='left']:hover::before`,
|
|
409
|
+
`[${tooltip}][${position}^='left']:hover::after`,
|
|
410
|
+
`[${tooltip}][${position}^='right']:hover::before`,
|
|
411
|
+
`[${tooltip}][${position}^='right']:hover::after`,
|
|
412
|
+
`[${tooltip}][${position}^='start']:hover::before`,
|
|
413
|
+
`[${tooltip}][${position}^='start']:hover::after`,
|
|
414
|
+
`[${tooltip}][${position}^='end']:hover::before`,
|
|
415
|
+
`[${tooltip}][${position}^='end']:hover::after`,
|
|
416
|
+
`[${tooltip}][${position}^='left']:focus-visible::before`,
|
|
417
|
+
`[${tooltip}][${position}^='left']:focus-visible::after`,
|
|
418
|
+
`[${tooltip}][${position}^='right']:focus-visible::before`,
|
|
419
|
+
`[${tooltip}][${position}^='right']:focus-visible::after`,
|
|
420
|
+
`[${tooltip}][${position}^='start']:focus-visible::before`,
|
|
421
|
+
`[${tooltip}][${position}^='start']:focus-visible::after`,
|
|
422
|
+
`[${tooltip}][${position}^='end']:focus-visible::before`,
|
|
423
|
+
`[${tooltip}][${position}^='end']:focus-visible::after`
|
|
424
|
+
].join(",")}`]: {
|
|
425
|
+
[`@apply animate-${prefix}-tooltip-y`]: {}
|
|
426
|
+
}
|
|
427
|
+
});
|
|
428
|
+
};
|
|
429
|
+
},
|
|
430
|
+
function(options) {
|
|
431
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
432
|
+
return {
|
|
433
|
+
theme: {
|
|
434
|
+
keyframes: {
|
|
435
|
+
[`${prefix}-tooltip-x`]: {
|
|
436
|
+
to: {
|
|
437
|
+
opacity: "1",
|
|
438
|
+
transform: "translate(-50%, 0)"
|
|
439
|
+
}
|
|
440
|
+
},
|
|
441
|
+
[`${prefix}-tooltip-y`]: {
|
|
442
|
+
to: {
|
|
443
|
+
opacity: "1",
|
|
444
|
+
transform: "translate(0, -50%)"
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
},
|
|
448
|
+
animation: {
|
|
449
|
+
[`${prefix}-tooltip-x`]: `${prefix}-tooltip-x 300ms ease-out forwards`,
|
|
450
|
+
[`${prefix}-tooltip-y`]: `${prefix}-tooltip-y 300ms ease-out forwards`
|
|
451
|
+
},
|
|
452
|
+
shurikenUi: {
|
|
453
|
+
tooltip: defaultTooltipConfig
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
};
|
|
457
|
+
}
|
|
458
|
+
);
|
|
459
|
+
|
|
460
|
+
const components = [
|
|
461
|
+
dropdown,
|
|
462
|
+
focus,
|
|
463
|
+
label,
|
|
464
|
+
mark,
|
|
465
|
+
mask,
|
|
466
|
+
placeload,
|
|
467
|
+
slimscroll,
|
|
468
|
+
tooltip
|
|
469
|
+
];
|
|
470
|
+
const shurikenUIComponents = plugin.withOptions(
|
|
471
|
+
function(options) {
|
|
472
|
+
return function(api) {
|
|
473
|
+
for (const component of components) {
|
|
474
|
+
component(options).handler(api);
|
|
475
|
+
}
|
|
476
|
+
};
|
|
477
|
+
},
|
|
478
|
+
function(options) {
|
|
479
|
+
let config = {};
|
|
480
|
+
for (const component of components) {
|
|
481
|
+
config = defu(config, component(options).config);
|
|
482
|
+
}
|
|
483
|
+
return config;
|
|
484
|
+
}
|
|
485
|
+
);
|
|
486
|
+
|
|
487
|
+
const bg = plugin.withOptions(
|
|
488
|
+
function(options) {
|
|
489
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
490
|
+
return function({ addUtilities }) {
|
|
491
|
+
addUtilities({
|
|
492
|
+
[`.${prefix}-bg-white`]: {
|
|
96
493
|
"@apply bg-white dark:bg-muted-900": {}
|
|
97
494
|
},
|
|
98
|
-
|
|
99
|
-
"@apply bg-muted-50 dark:bg-muted-
|
|
495
|
+
[`.${prefix}-bg-50`]: {
|
|
496
|
+
"@apply bg-muted-50 dark:bg-muted-950": {}
|
|
100
497
|
},
|
|
101
|
-
|
|
498
|
+
[`.${prefix}-bg-100`]: {
|
|
102
499
|
"@apply bg-muted-100 dark:bg-muted-900": {}
|
|
103
500
|
},
|
|
104
|
-
|
|
501
|
+
[`.${prefix}-bg-200`]: {
|
|
105
502
|
"@apply bg-muted-200 dark:bg-muted-800": {}
|
|
106
503
|
},
|
|
107
|
-
|
|
504
|
+
[`.${prefix}-bg-300`]: {
|
|
108
505
|
"@apply bg-muted-300 dark:bg-muted-700": {}
|
|
109
506
|
},
|
|
110
|
-
|
|
507
|
+
[`.${prefix}-bg-400`]: {
|
|
111
508
|
"@apply bg-muted-400 dark:bg-muted-600": {}
|
|
112
509
|
},
|
|
113
|
-
|
|
510
|
+
[`.${prefix}-bg-500`]: {
|
|
114
511
|
"@apply bg-muted-500 dark:bg-muted-500": {}
|
|
115
512
|
},
|
|
116
|
-
|
|
513
|
+
[`.${prefix}-bg-600`]: {
|
|
117
514
|
"@apply bg-muted-600 dark:bg-muted-400": {}
|
|
118
515
|
},
|
|
119
|
-
|
|
516
|
+
[`.${prefix}-bg-700`]: {
|
|
120
517
|
"@apply bg-muted-700 dark:bg-muted-300": {}
|
|
121
518
|
},
|
|
122
|
-
|
|
519
|
+
[`.${prefix}-bg-800`]: {
|
|
123
520
|
"@apply bg-muted-800 dark:bg-muted-200": {}
|
|
124
521
|
},
|
|
125
|
-
|
|
522
|
+
[`.${prefix}-bg-900`]: {
|
|
126
523
|
"@apply bg-muted-900 dark:bg-muted-100": {}
|
|
127
524
|
},
|
|
128
|
-
|
|
525
|
+
[`.${prefix}-bg-950`]: {
|
|
526
|
+
"@apply bg-muted-950 dark:bg-muted-50": {}
|
|
527
|
+
},
|
|
528
|
+
[`.${prefix}-bg-black`]: {
|
|
129
529
|
"@apply bg-muted-900 dark:bg-white": {}
|
|
130
530
|
}
|
|
131
531
|
});
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
532
|
+
};
|
|
533
|
+
},
|
|
534
|
+
function(options) {
|
|
535
|
+
return {};
|
|
536
|
+
}
|
|
537
|
+
);
|
|
538
|
+
|
|
539
|
+
const text = plugin.withOptions(
|
|
540
|
+
function(options) {
|
|
541
|
+
const { prefix } = defu(options, defaultPluginOptions);
|
|
542
|
+
return function({ addUtilities }) {
|
|
543
|
+
addUtilities({
|
|
544
|
+
[`.${prefix}-text-white`]: {
|
|
545
|
+
"@apply text-white dark:text-black": {}
|
|
546
|
+
},
|
|
547
|
+
[`.${prefix}-text-50`]: {
|
|
548
|
+
"@apply text-muted-50 dark:text-muted-950": {}
|
|
549
|
+
},
|
|
550
|
+
[`.${prefix}-text-100`]: {
|
|
551
|
+
"@apply text-muted-100 dark:text-muted-900": {}
|
|
552
|
+
},
|
|
553
|
+
[`.${prefix}-text-200`]: {
|
|
554
|
+
"@apply text-muted-200 dark:text-muted-800": {}
|
|
555
|
+
},
|
|
556
|
+
[`.${prefix}-text-300`]: {
|
|
557
|
+
"@apply text-muted-300 dark:text-muted-700": {}
|
|
558
|
+
},
|
|
559
|
+
[`.${prefix}-text-400`]: {
|
|
560
|
+
"@apply text-muted-400 dark:text-muted-600": {}
|
|
561
|
+
},
|
|
562
|
+
[`.${prefix}-text-500`]: {
|
|
563
|
+
"@apply text-muted-500 dark:text-muted-500": {}
|
|
564
|
+
},
|
|
565
|
+
[`.${prefix}-text-600`]: {
|
|
566
|
+
"@apply text-muted-600 dark:text-muted-400": {}
|
|
567
|
+
},
|
|
568
|
+
[`.${prefix}-text-700`]: {
|
|
569
|
+
"@apply text-muted-700 dark:text-muted-300": {}
|
|
570
|
+
},
|
|
571
|
+
[`.${prefix}-text-800`]: {
|
|
572
|
+
"@apply text-muted-800 dark:text-muted-200": {}
|
|
573
|
+
},
|
|
574
|
+
[`.${prefix}-text-900`]: {
|
|
575
|
+
"@apply text-muted-900 dark:text-muted-100": {}
|
|
576
|
+
},
|
|
577
|
+
[`.${prefix}-text-950`]: {
|
|
578
|
+
"@apply text-muted-950 dark:text-muted-50": {}
|
|
579
|
+
},
|
|
580
|
+
[`.${prefix}-text-black`]: {
|
|
581
|
+
"@apply text-black dark:text-white": {}
|
|
145
582
|
}
|
|
146
583
|
});
|
|
147
584
|
};
|
|
148
585
|
},
|
|
586
|
+
function() {
|
|
587
|
+
return {};
|
|
588
|
+
}
|
|
589
|
+
);
|
|
590
|
+
|
|
591
|
+
const utilities = [bg, text];
|
|
592
|
+
const shurikenUIUtilities = plugin.withOptions(
|
|
149
593
|
function(options) {
|
|
150
|
-
return {
|
|
151
|
-
|
|
152
|
-
|
|
594
|
+
return function(api) {
|
|
595
|
+
for (const utility of utilities) {
|
|
596
|
+
utility(options).handler(api);
|
|
153
597
|
}
|
|
154
598
|
};
|
|
599
|
+
},
|
|
600
|
+
function(options) {
|
|
601
|
+
let config = {};
|
|
602
|
+
for (const utility of utilities) {
|
|
603
|
+
config = defu(config, utility(options).config);
|
|
604
|
+
}
|
|
605
|
+
return config;
|
|
155
606
|
}
|
|
156
607
|
);
|
|
157
608
|
|
|
158
|
-
const sansSystemFont = [
|
|
159
|
-
"ui-sans-serif",
|
|
160
|
-
"system-ui",
|
|
161
|
-
"-apple-system",
|
|
162
|
-
"BlinkMacSystemFont",
|
|
163
|
-
'"Segoe UI"',
|
|
164
|
-
"Roboto",
|
|
165
|
-
'"Helvetica Neue"',
|
|
166
|
-
"Arial",
|
|
167
|
-
'"Noto Sans"',
|
|
168
|
-
"sans-serif",
|
|
169
|
-
'"Apple Color Emoji"',
|
|
170
|
-
'"Segoe UI Emoji"',
|
|
171
|
-
'"Segoe UI Symbol"',
|
|
172
|
-
'"Noto Color Emoji"'
|
|
173
|
-
];
|
|
174
|
-
const monoSystemFont = [
|
|
175
|
-
"ui-monospace",
|
|
176
|
-
"SFMono-Regular",
|
|
177
|
-
"Menlo",
|
|
178
|
-
"Monaco",
|
|
179
|
-
"Consolas",
|
|
180
|
-
'"Liberation Mono"',
|
|
181
|
-
'"Courier New"',
|
|
182
|
-
"monospace"
|
|
183
|
-
];
|
|
184
609
|
const shurikenUIPreset = {
|
|
185
610
|
darkMode: "class",
|
|
186
611
|
content: [],
|
|
187
|
-
plugins: [
|
|
612
|
+
plugins: [
|
|
613
|
+
typography,
|
|
614
|
+
aspectRatio,
|
|
615
|
+
shurikenUIBase,
|
|
616
|
+
shurikenUIComponents,
|
|
617
|
+
shurikenUIUtilities
|
|
618
|
+
],
|
|
188
619
|
theme: {
|
|
189
620
|
fontFamily: {
|
|
190
|
-
sans:
|
|
191
|
-
heading:
|
|
192
|
-
alt:
|
|
193
|
-
mono:
|
|
621
|
+
sans: defaultTheme.fontFamily.sans,
|
|
622
|
+
heading: defaultTheme.fontFamily.sans,
|
|
623
|
+
alt: defaultTheme.fontFamily.sans,
|
|
624
|
+
mono: defaultTheme.fontFamily.mono
|
|
194
625
|
},
|
|
195
626
|
extend: {
|
|
196
627
|
colors: {
|
|
@@ -291,18 +722,13 @@ const shurikenUIPreset = {
|
|
|
291
722
|
}
|
|
292
723
|
}),
|
|
293
724
|
keyframes: {
|
|
294
|
-
indeterminate: {
|
|
725
|
+
"nui-indeterminate": {
|
|
295
726
|
"0%": { "margin-left": "-10%" },
|
|
296
727
|
"100%": { "margin-left": "100%" }
|
|
297
|
-
},
|
|
298
|
-
placeload: {
|
|
299
|
-
"0%": { "background-position": "-468px 0" },
|
|
300
|
-
"100%": { "background-position": "468px 0" }
|
|
301
728
|
}
|
|
302
729
|
},
|
|
303
730
|
animation: {
|
|
304
|
-
indeterminate: "indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite"
|
|
305
|
-
placeload: "placeload 1s linear infinite forwards"
|
|
731
|
+
"nui-indeterminate": "nui-indeterminate 1s cubic-bezier(0.4, 0, 0.2, 1) infinite"
|
|
306
732
|
}
|
|
307
733
|
}
|
|
308
734
|
}
|