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