@una-ui/preset 0.1.1-beta.1 → 0.2.0-beta.0
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 +24 -13
- package/dist/index.cjs +20 -0
- package/dist/index.mjs +20 -0
- package/dist/prefixes.cjs +5 -0
- package/dist/prefixes.d.ts +3 -0
- package/dist/prefixes.mjs +3 -0
- package/dist/shortcuts.cjs +118 -17
- package/dist/shortcuts.mjs +118 -17
- package/package.json +13 -8
- package/prefixes.d.ts +1 -0
- package/una.css +1 -1
package/README.md
CHANGED
|
@@ -1,22 +1,33 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ✨ Una UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> **Warning**: This project is heavily working in progress.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 🏗️ Release Status
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- [ ]
|
|
10
|
-
- [ ]
|
|
11
|
-
- [ ] Nuxt 3 modules
|
|
7
|
+
| Branch | Version | Status | Downloads |
|
|
8
|
+
| --- | --- | --- | --- |
|
|
9
|
+
| Main (Edge) | [![npm-edge][npm-edge-src]][npm-edge-href] | [![github-status][github-status-src-main]][github-status-href-main] | [![npm-edge-downloads][npm-edge-downloads-src]][npm-edge-downloads-href] |
|
|
10
|
+
| Release | [![npm-version][npm-version-src]][npm-version-href] | [![github-status][github-status-src-release]][github-status-href-release] | [![npm-downloads][npm-downloads-src]][npm-downloads-href] |
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
## 📙 Documentation
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<!-- <p align="center">
|
|
18
|
-
</p> -->
|
|
14
|
+
Visit https://www.unaui.com for full documentation.
|
|
19
15
|
|
|
20
16
|
## 🏛️ License
|
|
21
17
|
|
|
22
18
|
[MIT](./LICENSE) License © 2023 [Phojie](https://github.com/phojie)
|
|
19
|
+
|
|
20
|
+
<!-- Badge Variables -->
|
|
21
|
+
|
|
22
|
+
[npm-version-src]: https://img.shields.io/npm/v/@una-ui/preset?style=flat&colorA=18181B&colorB=CA8A04
|
|
23
|
+
[npm-version-href]: https://npmjs.com/package/@una-ui/preset
|
|
24
|
+
[npm-edge-src]: https://img.shields.io/npm/v/@una-ui/preset-edge?style=flat&colorA=18181B&colorB=CA8A04
|
|
25
|
+
[npm-edge-href]: https://npmjs.com/package/@una-ui/preset-edge
|
|
26
|
+
[npm-downloads-src]: https://img.shields.io/npm/dm/@una-ui/preset?style=flat&colorA=18181B&colorB=CA8A04
|
|
27
|
+
[npm-downloads-href]: https://npmjs.com/package/@una-ui/preset
|
|
28
|
+
[npm-edge-downloads-src]: https://img.shields.io/npm/dm/@una-ui/preset-edge?style=flat&colorA=18181B&colorB=CA8A04
|
|
29
|
+
[npm-edge-downloads-href]: https://npmjs.com/package/@una-ui/preset-edge
|
|
30
|
+
[github-status-src-main]: https://img.shields.io/github/checks-status/una-ui/una-ui/main?style=flat&colorA=18181B&colorB=CA8A04
|
|
31
|
+
[github-status-src-release]: https://img.shields.io/github/checks-status/una-ui/una-ui/release?style=flat&colorA=18181B&colorB=CA8A04
|
|
32
|
+
[github-status-href-main]: https://github.com/una-ui/una-ui/actions/workflows/ci.yml
|
|
33
|
+
[github-status-href-release]: https://github.com/una-ui/una-ui/actions/workflows/release.yml
|
package/dist/index.cjs
CHANGED
|
@@ -68,6 +68,26 @@ function presetUna(options = {
|
|
|
68
68
|
"pointer-events": "none"
|
|
69
69
|
}]
|
|
70
70
|
],
|
|
71
|
+
variants: [
|
|
72
|
+
(input) => {
|
|
73
|
+
const prefix = "n-disabled:";
|
|
74
|
+
if (input.startsWith(prefix)) {
|
|
75
|
+
return {
|
|
76
|
+
matcher: input.slice(prefix.length),
|
|
77
|
+
selector: (input2) => `[disabled] ${input2}, ${input2}[disabled]`
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
(input) => {
|
|
82
|
+
const prefix = "n-checked:";
|
|
83
|
+
if (input.startsWith(prefix)) {
|
|
84
|
+
return {
|
|
85
|
+
matcher: input.slice(prefix.length),
|
|
86
|
+
selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
],
|
|
71
91
|
preflights: [
|
|
72
92
|
{
|
|
73
93
|
getCSS: () => `
|
package/dist/index.mjs
CHANGED
|
@@ -66,6 +66,26 @@ function presetUna(options = {
|
|
|
66
66
|
"pointer-events": "none"
|
|
67
67
|
}]
|
|
68
68
|
],
|
|
69
|
+
variants: [
|
|
70
|
+
(input) => {
|
|
71
|
+
const prefix = "n-disabled:";
|
|
72
|
+
if (input.startsWith(prefix)) {
|
|
73
|
+
return {
|
|
74
|
+
matcher: input.slice(prefix.length),
|
|
75
|
+
selector: (input2) => `[disabled] ${input2}, ${input2}[disabled]`
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
(input) => {
|
|
80
|
+
const prefix = "n-checked:";
|
|
81
|
+
if (input.startsWith(prefix)) {
|
|
82
|
+
return {
|
|
83
|
+
matcher: input.slice(prefix.length),
|
|
84
|
+
selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
],
|
|
69
89
|
preflights: [
|
|
70
90
|
{
|
|
71
91
|
getCSS: () => `
|
package/dist/shortcuts.cjs
CHANGED
|
@@ -2,6 +2,51 @@
|
|
|
2
2
|
|
|
3
3
|
const utils = require('@unocss/preset-mini/utils');
|
|
4
4
|
|
|
5
|
+
const staticLink = {
|
|
6
|
+
// base
|
|
7
|
+
link: ""
|
|
8
|
+
};
|
|
9
|
+
const dynamicLink = [
|
|
10
|
+
// dynamic preset
|
|
11
|
+
];
|
|
12
|
+
const link = [
|
|
13
|
+
...dynamicLink,
|
|
14
|
+
staticLink
|
|
15
|
+
];
|
|
16
|
+
|
|
17
|
+
const staticNavLinkGroup = {
|
|
18
|
+
// base
|
|
19
|
+
"nav-link-group": "w-60 flex flex-col border-2 border-base rounded-md border-dashed p-2 space-y-1",
|
|
20
|
+
// panel
|
|
21
|
+
"nav-link-group-panel": "mt-1 px-2 space-y-1"
|
|
22
|
+
};
|
|
23
|
+
const dynamicNavLinkGroup = [];
|
|
24
|
+
const navLinkGroup = [
|
|
25
|
+
...dynamicNavLinkGroup,
|
|
26
|
+
staticNavLinkGroup
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const staticNavLink = {
|
|
30
|
+
// config
|
|
31
|
+
"nav-link-variant": "nav-link-text-primary",
|
|
32
|
+
"nav-link-active": "nav-link-active-text-primary",
|
|
33
|
+
"nav-link-inactive": "nav-link-inactive-text-gray",
|
|
34
|
+
// base
|
|
35
|
+
"nav-link": "leading-6 justify-start gap-x-3 rounded-md",
|
|
36
|
+
// badge
|
|
37
|
+
"nav-link-badge": "min-w-max whitespace-nowrap rounded-full px-2.5 py-.5 leading-5"
|
|
38
|
+
};
|
|
39
|
+
const dynamicNavLink = [
|
|
40
|
+
// text-variant
|
|
41
|
+
[/^nav-link-active-text(-(\S+))?$/, ([, , c = "primary"]) => `bg-muted text-${c}-600 dark:text-${c}-500`],
|
|
42
|
+
[/^nav-link-inactive-text(-(\S+))?$/, ([, , c = "primary"]) => `text-${c}-800 dark:text-${c}-100`],
|
|
43
|
+
[/^nav-link-text(-(\S+))?$/, ([, , c = "primary"]) => `hover:bg-muted hover:text-${c}-600 dark:hover:text-${c}-500`]
|
|
44
|
+
];
|
|
45
|
+
const navLink = [
|
|
46
|
+
...dynamicNavLink,
|
|
47
|
+
staticNavLink
|
|
48
|
+
];
|
|
49
|
+
|
|
5
50
|
const staticIcon = {
|
|
6
51
|
// base
|
|
7
52
|
"icon-base": "flex-none"
|
|
@@ -40,7 +85,7 @@ const accordion = [
|
|
|
40
85
|
staticAccordion
|
|
41
86
|
];
|
|
42
87
|
|
|
43
|
-
const
|
|
88
|
+
const staticBtn = {
|
|
44
89
|
// config
|
|
45
90
|
"btn-default-variant": "btn-solid",
|
|
46
91
|
"btn-loading-icon": "i-loading",
|
|
@@ -61,27 +106,28 @@ const staticButton = {
|
|
|
61
106
|
"btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
|
|
62
107
|
"btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
|
|
63
108
|
"btn-solid-gray": "bg-$c-gray-50 text-$c-gray-800 ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-$c-gray-100",
|
|
64
|
-
"btn-ghost-gray": "text-$c-gray-
|
|
65
|
-
"btn-soft-gray": "text-$c-gray-
|
|
109
|
+
"btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
|
|
110
|
+
"btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
|
|
66
111
|
"btn-link-gray": "text-$c-gray-500 btn-focus hover:text-$c-gray-950 hover:underline underline-offset-4",
|
|
67
112
|
"btn-solid-black": "bg-$c-gray-950 text-inverted shadow-sm btn-focus hover:bg-$c-gray-900",
|
|
68
113
|
"btn-link-black": "text-$c-gray-950 btn-focus hover:underline underline-offset-4",
|
|
69
|
-
"btn-text-black": "text-
|
|
114
|
+
"btn-text-black": "text-$c-gray-950 btn-focus hover:text-$c-gray-900",
|
|
115
|
+
"btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900"
|
|
70
116
|
};
|
|
71
|
-
const
|
|
117
|
+
const dynamicBtn = [
|
|
72
118
|
// base
|
|
73
|
-
[/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-${c}-
|
|
119
|
+
[/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-${c}-600 dark:focus-visible:outline-${c}-500 focus-visible:outline-2 focus-visible:outline-offset-2`],
|
|
74
120
|
// variants
|
|
75
121
|
[/^btn-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-inverted shadow-sm bg-${c}-600 hover:bg-${c}-500 dark:bg-${c}-500 dark:hover:bg-${c}-400`],
|
|
76
122
|
[/^btn-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:text-${c}-500 dark:hover:text-${c}-400`],
|
|
77
123
|
[/^btn-outline(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent btn-focus-${c} text-${c}-500 dark:text-${c}-400 ring-1 ring-inset ring-${c}-500 dark:ring-${c}-400 hover:bg-${c}-50 dark:hover:bg-${c}-950`],
|
|
78
|
-
[/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-
|
|
79
|
-
[/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-
|
|
124
|
+
[/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 bg-${c}-50 dark:bg-${c}-950 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
|
|
125
|
+
[/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
|
|
80
126
|
[/^btn-link(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-500 dark:text-${c}-400 hover:underline underline-offset-4`]
|
|
81
127
|
];
|
|
82
|
-
const
|
|
83
|
-
...
|
|
84
|
-
|
|
128
|
+
const btn = [
|
|
129
|
+
...dynamicBtn,
|
|
130
|
+
staticBtn
|
|
85
131
|
];
|
|
86
132
|
|
|
87
133
|
const staticFormGroup = {
|
|
@@ -133,12 +179,12 @@ const staticInput = {
|
|
|
133
179
|
"input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-$c-gray-400",
|
|
134
180
|
"input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-$c-gray-400",
|
|
135
181
|
// variants
|
|
136
|
-
"input-outline-gray": "focus:ring-2
|
|
137
|
-
"input-outline-black": "
|
|
182
|
+
"input-outline-gray": "focus:ring-2 ring-1",
|
|
183
|
+
"input-outline-black": "ring-1 focus:ring-$c-foreground"
|
|
138
184
|
};
|
|
139
185
|
const dynamicInput = [
|
|
140
186
|
// config
|
|
141
|
-
[/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-2 focus:ring-${c}-500 dark:focus:ring-${c}-400
|
|
187
|
+
[/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-2 focus:ring-${c}-500 dark:focus:ring-${c}-400`],
|
|
142
188
|
[/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-400/70 dark:placeholder-${c}-300/70`],
|
|
143
189
|
// variants
|
|
144
190
|
[/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `ring-1 input-focus-${c}`],
|
|
@@ -180,7 +226,10 @@ const staticGeneral = {
|
|
|
180
226
|
"i-error": "i-heroicons-exclamation-circle-20-solid",
|
|
181
227
|
"i-success": "i-heroicons-check-circle-20-solid",
|
|
182
228
|
"i-info": "i-heroicons-information-circle-20-solid",
|
|
183
|
-
"i-close": "i-heroicons-x-mark-20-solid"
|
|
229
|
+
"i-close": "i-heroicons-x-mark-20-solid",
|
|
230
|
+
"i-dot": "i-tabler-circle-filled",
|
|
231
|
+
// transition
|
|
232
|
+
"transition-base": "transition-all duration-300 ease-in-out"
|
|
184
233
|
};
|
|
185
234
|
const dynamicGeneral = [
|
|
186
235
|
// TODO: n-text-<color><-number><-number>
|
|
@@ -351,10 +400,57 @@ const indicator = [
|
|
|
351
400
|
staticIndicator
|
|
352
401
|
];
|
|
353
402
|
|
|
403
|
+
const staticKbd = {
|
|
404
|
+
// config
|
|
405
|
+
"kbd-default-variant": "kbd-solid-gray",
|
|
406
|
+
// base
|
|
407
|
+
"kbd": "inline-flex text-nowrap items-center h-1.8181818181818181em min-w-1.8181818181818181em font-sans justify-center rounded px-0.5454545454545454em py-0.18181818181818182em text-0.6875em font-normal"
|
|
408
|
+
};
|
|
409
|
+
const dynamicKbd = [
|
|
410
|
+
// modifiers
|
|
411
|
+
[/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring ring-inset ring-${c}-200 dark:ring-${c}-700`],
|
|
412
|
+
// variants
|
|
413
|
+
[/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-950 dark:text-${c}-400`],
|
|
414
|
+
[/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
|
|
415
|
+
];
|
|
416
|
+
const kbd = [
|
|
417
|
+
...dynamicKbd,
|
|
418
|
+
staticKbd
|
|
419
|
+
];
|
|
420
|
+
|
|
421
|
+
const staticRadio = {
|
|
422
|
+
// base
|
|
423
|
+
"radio": "radio-primary transition-base border border-$c-ring rounded-full p-0.19em n-checked:border-brand n-checked:bg-brand",
|
|
424
|
+
"radio-disabled": "n-disabled",
|
|
425
|
+
"radio-label": "block text-sm font-medium leading-6",
|
|
426
|
+
"radio-input": "absolute w-full opacity-0",
|
|
427
|
+
"radio-reverse": "flex-row-reverse",
|
|
428
|
+
"radio-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
|
|
429
|
+
// wrappers
|
|
430
|
+
"radio-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
|
|
431
|
+
"radio-icon-wrapper": "grid place-items-center w-0.5em h-0.5em",
|
|
432
|
+
// icon
|
|
433
|
+
"radio-icon-base": "text-transparent w-full h-full transition-base",
|
|
434
|
+
"radio-icon": "i-dot",
|
|
435
|
+
// refer to general.ts
|
|
436
|
+
"radio-icon-checked": "n-checked:text-inverted n-checked:w-full n-checked:h-full"
|
|
437
|
+
};
|
|
438
|
+
const dynamicRadio = [
|
|
439
|
+
[/^radio-(.*)$/, ([, body], { theme }) => {
|
|
440
|
+
const color = utils.parseColor(body, theme);
|
|
441
|
+
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
442
|
+
return `n-${body}-600 dark:n-${body}-500`;
|
|
443
|
+
}]
|
|
444
|
+
];
|
|
445
|
+
const radio = [
|
|
446
|
+
...dynamicRadio,
|
|
447
|
+
staticRadio
|
|
448
|
+
];
|
|
449
|
+
|
|
354
450
|
const shortcuts = [
|
|
355
451
|
...general,
|
|
356
452
|
...accordion,
|
|
357
|
-
...
|
|
453
|
+
...btn,
|
|
358
454
|
...formGroup,
|
|
359
455
|
...input,
|
|
360
456
|
...icon,
|
|
@@ -363,7 +459,12 @@ const shortcuts = [
|
|
|
363
459
|
...badge,
|
|
364
460
|
...avatarGroup,
|
|
365
461
|
...avatar,
|
|
366
|
-
...indicator
|
|
462
|
+
...indicator,
|
|
463
|
+
...kbd,
|
|
464
|
+
...navLink,
|
|
465
|
+
...navLinkGroup,
|
|
466
|
+
...link,
|
|
467
|
+
...radio
|
|
367
468
|
];
|
|
368
469
|
|
|
369
470
|
exports.shortcuts = shortcuts;
|
package/dist/shortcuts.mjs
CHANGED
|
@@ -1,5 +1,50 @@
|
|
|
1
1
|
import { parseColor } from '@unocss/preset-mini/utils';
|
|
2
2
|
|
|
3
|
+
const staticLink = {
|
|
4
|
+
// base
|
|
5
|
+
link: ""
|
|
6
|
+
};
|
|
7
|
+
const dynamicLink = [
|
|
8
|
+
// dynamic preset
|
|
9
|
+
];
|
|
10
|
+
const link = [
|
|
11
|
+
...dynamicLink,
|
|
12
|
+
staticLink
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
const staticNavLinkGroup = {
|
|
16
|
+
// base
|
|
17
|
+
"nav-link-group": "w-60 flex flex-col border-2 border-base rounded-md border-dashed p-2 space-y-1",
|
|
18
|
+
// panel
|
|
19
|
+
"nav-link-group-panel": "mt-1 px-2 space-y-1"
|
|
20
|
+
};
|
|
21
|
+
const dynamicNavLinkGroup = [];
|
|
22
|
+
const navLinkGroup = [
|
|
23
|
+
...dynamicNavLinkGroup,
|
|
24
|
+
staticNavLinkGroup
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
const staticNavLink = {
|
|
28
|
+
// config
|
|
29
|
+
"nav-link-variant": "nav-link-text-primary",
|
|
30
|
+
"nav-link-active": "nav-link-active-text-primary",
|
|
31
|
+
"nav-link-inactive": "nav-link-inactive-text-gray",
|
|
32
|
+
// base
|
|
33
|
+
"nav-link": "leading-6 justify-start gap-x-3 rounded-md",
|
|
34
|
+
// badge
|
|
35
|
+
"nav-link-badge": "min-w-max whitespace-nowrap rounded-full px-2.5 py-.5 leading-5"
|
|
36
|
+
};
|
|
37
|
+
const dynamicNavLink = [
|
|
38
|
+
// text-variant
|
|
39
|
+
[/^nav-link-active-text(-(\S+))?$/, ([, , c = "primary"]) => `bg-muted text-${c}-600 dark:text-${c}-500`],
|
|
40
|
+
[/^nav-link-inactive-text(-(\S+))?$/, ([, , c = "primary"]) => `text-${c}-800 dark:text-${c}-100`],
|
|
41
|
+
[/^nav-link-text(-(\S+))?$/, ([, , c = "primary"]) => `hover:bg-muted hover:text-${c}-600 dark:hover:text-${c}-500`]
|
|
42
|
+
];
|
|
43
|
+
const navLink = [
|
|
44
|
+
...dynamicNavLink,
|
|
45
|
+
staticNavLink
|
|
46
|
+
];
|
|
47
|
+
|
|
3
48
|
const staticIcon = {
|
|
4
49
|
// base
|
|
5
50
|
"icon-base": "flex-none"
|
|
@@ -38,7 +83,7 @@ const accordion = [
|
|
|
38
83
|
staticAccordion
|
|
39
84
|
];
|
|
40
85
|
|
|
41
|
-
const
|
|
86
|
+
const staticBtn = {
|
|
42
87
|
// config
|
|
43
88
|
"btn-default-variant": "btn-solid",
|
|
44
89
|
"btn-loading-icon": "i-loading",
|
|
@@ -59,27 +104,28 @@ const staticButton = {
|
|
|
59
104
|
"btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
|
|
60
105
|
"btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
|
|
61
106
|
"btn-solid-gray": "bg-$c-gray-50 text-$c-gray-800 ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-$c-gray-100",
|
|
62
|
-
"btn-ghost-gray": "text-$c-gray-
|
|
63
|
-
"btn-soft-gray": "text-$c-gray-
|
|
107
|
+
"btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
|
|
108
|
+
"btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
|
|
64
109
|
"btn-link-gray": "text-$c-gray-500 btn-focus hover:text-$c-gray-950 hover:underline underline-offset-4",
|
|
65
110
|
"btn-solid-black": "bg-$c-gray-950 text-inverted shadow-sm btn-focus hover:bg-$c-gray-900",
|
|
66
111
|
"btn-link-black": "text-$c-gray-950 btn-focus hover:underline underline-offset-4",
|
|
67
|
-
"btn-text-black": "text-
|
|
112
|
+
"btn-text-black": "text-$c-gray-950 btn-focus hover:text-$c-gray-900",
|
|
113
|
+
"btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900"
|
|
68
114
|
};
|
|
69
|
-
const
|
|
115
|
+
const dynamicBtn = [
|
|
70
116
|
// base
|
|
71
|
-
[/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-${c}-
|
|
117
|
+
[/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-${c}-600 dark:focus-visible:outline-${c}-500 focus-visible:outline-2 focus-visible:outline-offset-2`],
|
|
72
118
|
// variants
|
|
73
119
|
[/^btn-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-inverted shadow-sm bg-${c}-600 hover:bg-${c}-500 dark:bg-${c}-500 dark:hover:bg-${c}-400`],
|
|
74
120
|
[/^btn-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:text-${c}-500 dark:hover:text-${c}-400`],
|
|
75
121
|
[/^btn-outline(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent btn-focus-${c} text-${c}-500 dark:text-${c}-400 ring-1 ring-inset ring-${c}-500 dark:ring-${c}-400 hover:bg-${c}-50 dark:hover:bg-${c}-950`],
|
|
76
|
-
[/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-
|
|
77
|
-
[/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-
|
|
122
|
+
[/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 bg-${c}-50 dark:bg-${c}-950 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
|
|
123
|
+
[/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
|
|
78
124
|
[/^btn-link(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-500 dark:text-${c}-400 hover:underline underline-offset-4`]
|
|
79
125
|
];
|
|
80
|
-
const
|
|
81
|
-
...
|
|
82
|
-
|
|
126
|
+
const btn = [
|
|
127
|
+
...dynamicBtn,
|
|
128
|
+
staticBtn
|
|
83
129
|
];
|
|
84
130
|
|
|
85
131
|
const staticFormGroup = {
|
|
@@ -131,12 +177,12 @@ const staticInput = {
|
|
|
131
177
|
"input-leading-wrapper": "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-0.75em text-$c-gray-400",
|
|
132
178
|
"input-trailing-wrapper": "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-0.75em text-$c-gray-400",
|
|
133
179
|
// variants
|
|
134
|
-
"input-outline-gray": "focus:ring-2
|
|
135
|
-
"input-outline-black": "
|
|
180
|
+
"input-outline-gray": "focus:ring-2 ring-1",
|
|
181
|
+
"input-outline-black": "ring-1 focus:ring-$c-foreground"
|
|
136
182
|
};
|
|
137
183
|
const dynamicInput = [
|
|
138
184
|
// config
|
|
139
|
-
[/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-2 focus:ring-${c}-500 dark:focus:ring-${c}-400
|
|
185
|
+
[/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-2 focus:ring-${c}-500 dark:focus:ring-${c}-400`],
|
|
140
186
|
[/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder-${c}-400/70 dark:placeholder-${c}-300/70`],
|
|
141
187
|
// variants
|
|
142
188
|
[/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `ring-1 input-focus-${c}`],
|
|
@@ -178,7 +224,10 @@ const staticGeneral = {
|
|
|
178
224
|
"i-error": "i-heroicons-exclamation-circle-20-solid",
|
|
179
225
|
"i-success": "i-heroicons-check-circle-20-solid",
|
|
180
226
|
"i-info": "i-heroicons-information-circle-20-solid",
|
|
181
|
-
"i-close": "i-heroicons-x-mark-20-solid"
|
|
227
|
+
"i-close": "i-heroicons-x-mark-20-solid",
|
|
228
|
+
"i-dot": "i-tabler-circle-filled",
|
|
229
|
+
// transition
|
|
230
|
+
"transition-base": "transition-all duration-300 ease-in-out"
|
|
182
231
|
};
|
|
183
232
|
const dynamicGeneral = [
|
|
184
233
|
// TODO: n-text-<color><-number><-number>
|
|
@@ -349,10 +398,57 @@ const indicator = [
|
|
|
349
398
|
staticIndicator
|
|
350
399
|
];
|
|
351
400
|
|
|
401
|
+
const staticKbd = {
|
|
402
|
+
// config
|
|
403
|
+
"kbd-default-variant": "kbd-solid-gray",
|
|
404
|
+
// base
|
|
405
|
+
"kbd": "inline-flex text-nowrap items-center h-1.8181818181818181em min-w-1.8181818181818181em font-sans justify-center rounded px-0.5454545454545454em py-0.18181818181818182em text-0.6875em font-normal"
|
|
406
|
+
};
|
|
407
|
+
const dynamicKbd = [
|
|
408
|
+
// modifiers
|
|
409
|
+
[/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring ring-inset ring-${c}-200 dark:ring-${c}-700`],
|
|
410
|
+
// variants
|
|
411
|
+
[/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-950 dark:text-${c}-400`],
|
|
412
|
+
[/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
|
|
413
|
+
];
|
|
414
|
+
const kbd = [
|
|
415
|
+
...dynamicKbd,
|
|
416
|
+
staticKbd
|
|
417
|
+
];
|
|
418
|
+
|
|
419
|
+
const staticRadio = {
|
|
420
|
+
// base
|
|
421
|
+
"radio": "radio-primary transition-base border border-$c-ring rounded-full p-0.19em n-checked:border-brand n-checked:bg-brand",
|
|
422
|
+
"radio-disabled": "n-disabled",
|
|
423
|
+
"radio-label": "block text-sm font-medium leading-6",
|
|
424
|
+
"radio-input": "absolute w-full opacity-0",
|
|
425
|
+
"radio-reverse": "flex-row-reverse",
|
|
426
|
+
"radio-peer-focus": "peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)",
|
|
427
|
+
// wrappers
|
|
428
|
+
"radio-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
|
|
429
|
+
"radio-icon-wrapper": "grid place-items-center w-0.5em h-0.5em",
|
|
430
|
+
// icon
|
|
431
|
+
"radio-icon-base": "text-transparent w-full h-full transition-base",
|
|
432
|
+
"radio-icon": "i-dot",
|
|
433
|
+
// refer to general.ts
|
|
434
|
+
"radio-icon-checked": "n-checked:text-inverted n-checked:w-full n-checked:h-full"
|
|
435
|
+
};
|
|
436
|
+
const dynamicRadio = [
|
|
437
|
+
[/^radio-(.*)$/, ([, body], { theme }) => {
|
|
438
|
+
const color = parseColor(body, theme);
|
|
439
|
+
if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
|
|
440
|
+
return `n-${body}-600 dark:n-${body}-500`;
|
|
441
|
+
}]
|
|
442
|
+
];
|
|
443
|
+
const radio = [
|
|
444
|
+
...dynamicRadio,
|
|
445
|
+
staticRadio
|
|
446
|
+
];
|
|
447
|
+
|
|
352
448
|
const shortcuts = [
|
|
353
449
|
...general,
|
|
354
450
|
...accordion,
|
|
355
|
-
...
|
|
451
|
+
...btn,
|
|
356
452
|
...formGroup,
|
|
357
453
|
...input,
|
|
358
454
|
...icon,
|
|
@@ -361,7 +457,12 @@ const shortcuts = [
|
|
|
361
457
|
...badge,
|
|
362
458
|
...avatarGroup,
|
|
363
459
|
...avatar,
|
|
364
|
-
...indicator
|
|
460
|
+
...indicator,
|
|
461
|
+
...kbd,
|
|
462
|
+
...navLink,
|
|
463
|
+
...navLinkGroup,
|
|
464
|
+
...link,
|
|
465
|
+
...radio
|
|
365
466
|
];
|
|
366
467
|
|
|
367
468
|
export { shortcuts };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@una-ui/preset",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0-beta.0",
|
|
4
4
|
"description": "The default preset for @una-ui",
|
|
5
5
|
"author": "Phojie Rengel <phojrengel@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,13 +22,18 @@
|
|
|
22
22
|
"exports": {
|
|
23
23
|
".": {
|
|
24
24
|
"types": "./dist/index.d.ts",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
25
|
+
"require": "./dist/index.cjs",
|
|
26
|
+
"import": "./dist/index.mjs"
|
|
27
27
|
},
|
|
28
28
|
"./shortcuts": {
|
|
29
29
|
"types": "./dist/shortcuts.d.ts",
|
|
30
|
-
"
|
|
31
|
-
"
|
|
30
|
+
"require": "./dist/shortcuts.cjs",
|
|
31
|
+
"import": "./dist/shortcuts.mjs"
|
|
32
|
+
},
|
|
33
|
+
"./prefixes": {
|
|
34
|
+
"types": "./dist/prefixes.d.ts",
|
|
35
|
+
"require": "./dist/prefixes.cjs",
|
|
36
|
+
"import": "./dist/prefixes.mjs"
|
|
32
37
|
},
|
|
33
38
|
"./*": "./*"
|
|
34
39
|
},
|
|
@@ -44,9 +49,9 @@
|
|
|
44
49
|
"access": "public"
|
|
45
50
|
},
|
|
46
51
|
"dependencies": {
|
|
47
|
-
"@unocss/core": "^0.55.
|
|
48
|
-
"@unocss/preset-mini": "^0.55.
|
|
49
|
-
"unocss": "^0.55.
|
|
52
|
+
"@unocss/core": "^0.55.7",
|
|
53
|
+
"@unocss/preset-mini": "^0.55.7",
|
|
54
|
+
"unocss": "^0.55.7"
|
|
50
55
|
},
|
|
51
56
|
"scripts": {
|
|
52
57
|
"build": "unbuild",
|
package/prefixes.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './dist/prefixes';
|
package/una.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
@import"@unocss/reset/tailwind-compat.css";:root{--una-primary-hex: #ca8a04;--una-primary-50: 254, 252, 232;--una-primary-100: 254, 249, 195;--una-primary-200: 254, 240, 138;--una-primary-300: 253, 224, 71;--una-primary-400: 250, 204, 21;--una-primary-500: 234, 179, 8;--una-primary-600: 202, 138, 4;--una-primary-700: 161, 98, 7;--una-primary-800: 133, 77, 14;--una-primary-900: 113, 63, 18;--una-primary-950: 66, 32, 6;--una-gray-hex: #57534e;--una-gray-50: 250, 250, 249;--una-gray-100: 245, 245, 244;--una-gray-200: 231, 229, 228;--una-gray-300: 214, 211, 209;--una-gray-400: 168, 162, 158;--una-gray-500: 120, 113, 108;--una-gray-600: 87, 83, 78;--una-gray-700: 68, 64, 60;--una-gray-800: 41, 37, 36;--una-gray-900: 28, 25, 23;--una-gray-950: 12, 10, 9}:root{--una-primary: var(--una-primary-600);--una-primary-active: var(--una-primary-500);--una-gray: var(--una-gray-600);--una-gray-active: var(--una-gray-500);--c-brand: rgb(var(--una-primary-600));--c-background: var(--c-gray-0);--c-foreground: var(--c-gray-950);--c-muted: var(--c-gray-50);--c-muted-foreground: var(--c-gray-900);--c-bg-selection: rgba(var(--una-primary-600), 0.2);--c-border: rgb(var(--una-gray-200));--c-ring: rgb(var(--una-gray-200));--c-divider: rgb(var(--una-gray-200));--c-gray-0: rgb(255 255 255);--c-gray-50: rgb(var(--una-gray-50));--c-gray-100: rgb(var(--una-gray-100));--c-gray-200: rgb(var(--una-gray-200));--c-gray-300: rgb(var(--una-gray-300));--c-gray-400: rgb(var(--una-gray-400));--c-gray-500: rgb(var(--una-gray-500));--c-gray-600: rgb(var(--una-gray-600));--c-gray-700: rgb(var(--una-gray-700));--c-gray-800: rgb(var(--una-gray-800));--c-gray-900: rgb(var(--una-gray-900));--c-gray-950: rgb(var(--una-gray-950))}.dark{--una-primary: var(--una-primary-500);--una-primary-active: var(--una-primary-400);--una-gray: var(--una-gray-500);--una-gray-active: var(--una-gray-400);--c-brand: rgb(var(--una-primary-500));--c-border: rgba(var(--una-gray-700), .68);--c-ring: rgba(var(--una-gray-700), .68);--c-divider: rgba(var(--una-gray-700), .68);--c-gray-0: rgb(var(--una-gray-950));--c-gray-50: rgb(var(--una-gray-900));--c-gray-100: rgb(var(--una-gray-800));--c-gray-200: rgb(var(--una-gray-700));--c-gray-300: rgb(var(--una-gray-600));--c-gray-400: rgb(var(--una-gray-500));--c-gray-500: rgb(var(--una-gray-400));--c-gray-600: rgb(var(--una-gray-300));--c-gray-700: rgb(var(--una-gray-200));--c-gray-800: rgb(var(--una-gray-100));--c-gray-900: rgb(var(--una-gray-50));--c-gray-950: rgb(255 255 255)}html{font-size:var(--font-size, 16px);background-color:var(--c-background);color:var(--c-foreground);height:100dvh}html.dark{color-scheme:dark}::-moz-selection{background:var(--c-bg-selection)}::selection{background:var(--c-bg-selection)}*{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}
|