jk-ui-cli 0.0.1
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/dist/index.cjs +374 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1 -0
- package/package.json +43 -0
- package/stubs/astro/layout.stub +17 -0
- package/stubs/astro/seo.stub +60 -0
- package/stubs/astro/tsconfig.stub +24 -0
- package/stubs/css/all-themes.stub +61 -0
- package/stubs/css/buttons.stub +164 -0
- package/stubs/css/dark/buttons.stub +97 -0
- package/stubs/css/dark/utilities.stub +71 -0
- package/stubs/css/flexiwind/base.stub +36 -0
- package/stubs/css/flexiwind/button.stub +100 -0
- package/stubs/css/flexiwind/form.stub +189 -0
- package/stubs/css/flexiwind/grid-bg.stub +128 -0
- package/stubs/css/flexiwind/ui.stub +171 -0
- package/stubs/css/flexiwind/utils.stub +189 -0
- package/stubs/css/jk-ui/base.stub +42 -0
- package/stubs/css/jk-ui/button.stub +100 -0
- package/stubs/css/jk-ui/form.stub +258 -0
- package/stubs/css/jk-ui/grid-bg.stub +128 -0
- package/stubs/css/jk-ui/ui.stub +186 -0
- package/stubs/css/jk-ui/utils.stub +214 -0
- package/stubs/css/light/buttons.stub +114 -0
- package/stubs/css/light/utilities.stub +71 -0
- package/stubs/css/scroll-config.stub +30 -0
- package/stubs/css/utilities.stub +178 -0
- package/stubs/rasengan/config.stub +9 -0
- package/stubs/themes/air.stub +104 -0
- package/stubs/themes/earth.stub +89 -0
- package/stubs/themes/fire.stub +100 -0
- package/stubs/themes/jk-ui.stub +100 -0
- package/stubs/themes/water.stub +90 -0
- package/stubs/uno.config.stub +5 -0
- package/stubs/utls/lib.stub +17 -0
- package/stubs/vite/vuelayout.stub +0 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "jk-ui-cli",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "A CLI tool for ReactJS based projects",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"jk-ui-cli": "./dist/index.cjs"
|
|
8
|
+
},
|
|
9
|
+
"files": [
|
|
10
|
+
"dist",
|
|
11
|
+
"readme.md",
|
|
12
|
+
"stubs",
|
|
13
|
+
"package.json"
|
|
14
|
+
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"build": "tsup",
|
|
17
|
+
"dev": "tsup --watch",
|
|
18
|
+
"clean": "rimraf dist"
|
|
19
|
+
},
|
|
20
|
+
"keywords": [
|
|
21
|
+
"cli",
|
|
22
|
+
"react",
|
|
23
|
+
"tools"
|
|
24
|
+
],
|
|
25
|
+
"author": "Johnkat MJ",
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@types/node": "^20.0.0",
|
|
29
|
+
"@types/prompts": "^2.4.9",
|
|
30
|
+
"rimraf": "^6.0.1",
|
|
31
|
+
"tsup": "^8.0.0",
|
|
32
|
+
"typescript": "^5.0.0"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"commander": "^12.0.0",
|
|
36
|
+
"chalk": "4.1.2",
|
|
37
|
+
"prompts": "^2.4.2",
|
|
38
|
+
"zod": "^4.1.9"
|
|
39
|
+
},
|
|
40
|
+
"engines": {
|
|
41
|
+
"node": ">=18.0.0"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
import "@assets/css/app.css";
|
|
3
|
+
import { ViewTransitions } from "astro:transitions";
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<!doctype html>
|
|
8
|
+
<html lang="en" class="scroll-smooth">
|
|
9
|
+
<head>
|
|
10
|
+
<ViewTransitions />
|
|
11
|
+
</head>
|
|
12
|
+
<body
|
|
13
|
+
class=""
|
|
14
|
+
>
|
|
15
|
+
<slot/>
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
---
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
export type Props = {
|
|
5
|
+
seo: type SeoType = {
|
|
6
|
+
ogImage: {
|
|
7
|
+
src: string;
|
|
8
|
+
alt: string;
|
|
9
|
+
};
|
|
10
|
+
keywords: string;
|
|
11
|
+
title: string;
|
|
12
|
+
description: string;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const siteUrl = site_domain = ''
|
|
17
|
+
const {
|
|
18
|
+
seo: { title, ogImage, description, keywords },
|
|
19
|
+
} = Astro.props;
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
<meta charset="UTF-8" />
|
|
23
|
+
<meta
|
|
24
|
+
name="viewport"
|
|
25
|
+
content="width=device-width, initial-scale=1"
|
|
26
|
+
/>
|
|
27
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
28
|
+
<title>{title}</title>
|
|
29
|
+
<meta name="description" content={description} />
|
|
30
|
+
<meta name="title" content={`${title}`} />
|
|
31
|
+
<meta property="og:url" content={siteUrl} />
|
|
32
|
+
<meta property="og:type" content="website" />
|
|
33
|
+
<meta property="og:title" content={title} />
|
|
34
|
+
<meta property="og:description" content={description} />
|
|
35
|
+
<meta property="og:image" content={ogImage.src} />
|
|
36
|
+
<meta property="og:image:type" content="image/png">
|
|
37
|
+
<meta property="og:image:alt" content={ogImage.alt} />
|
|
38
|
+
<meta name="og:image:width" content="1181" />
|
|
39
|
+
<meta name="og:image:height" content="578" />
|
|
40
|
+
|
|
41
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
42
|
+
<meta property="twitter:domain" content={site_domain} />
|
|
43
|
+
<meta property="twitter:url" content={siteUrl} />
|
|
44
|
+
<meta name="twitter:title" content={title} />
|
|
45
|
+
<meta name="twitter:description" content={description} />
|
|
46
|
+
<meta name="twitter:image" content={ogImage.src} />
|
|
47
|
+
<meta name="twitter:image:type" content="image/png">
|
|
48
|
+
<meta name="twitter:image:alt" content={ogImage.alt} />
|
|
49
|
+
<meta name="twitter:image:width" content="1181" />
|
|
50
|
+
<meta name="twitter:image:height" content="578" />
|
|
51
|
+
<meta name="twitter:creator" content="@johnkat-mj" />
|
|
52
|
+
|
|
53
|
+
<meta name="application-name" content="UnifyUI Website" />
|
|
54
|
+
<meta name="keywords" content={keywords} />
|
|
55
|
+
<meta name="generator" content={Astro.generator} />
|
|
56
|
+
<meta name="author" content="Johnkat-MJ" />
|
|
57
|
+
<link rel="creator" href="https://github.com/Johnkat-Mj" />
|
|
58
|
+
<meta name="author" content="unifyui-dev" />
|
|
59
|
+
<link rel="author" href="https://github.com/unify-ui-dev" />
|
|
60
|
+
<slot/>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "astro/tsconfigs/strict",
|
|
3
|
+
"include": [
|
|
4
|
+
".astro/types.d.ts",
|
|
5
|
+
"**/*"
|
|
6
|
+
],
|
|
7
|
+
"exclude": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"compilerOptions": {
|
|
11
|
+
"baseUrl": ".",
|
|
12
|
+
"paths": {
|
|
13
|
+
"@components/*": [
|
|
14
|
+
"src/components/*"
|
|
15
|
+
],
|
|
16
|
+
"@layouts/*": [
|
|
17
|
+
"src/layouts/*"
|
|
18
|
+
],
|
|
19
|
+
"@assets/*": [
|
|
20
|
+
"src/assets/*"
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
|
|
2
|
+
:root {
|
|
3
|
+
--c-primary: var(--color-primary-600);
|
|
4
|
+
--c-secondary: var(--color-secondary-600);
|
|
5
|
+
--c-accent: var(--color-accent-600);
|
|
6
|
+
--c-info: var(--color-info-600);
|
|
7
|
+
--c-warning: var(--color-warning-600);
|
|
8
|
+
--c-danger: var(--color-danger-600);
|
|
9
|
+
--c-success: var(--color-success-600);
|
|
10
|
+
|
|
11
|
+
--c-fg-title: var(--color-gray-900);
|
|
12
|
+
--c-fg-subtitle: var(--color-gray-800);
|
|
13
|
+
--c-fg: var(--color-gray-700);
|
|
14
|
+
--c-fg-muted: var(--color-gray-600);
|
|
15
|
+
|
|
16
|
+
--c-bg: var(--color-white);
|
|
17
|
+
--c-bg-subtle: var(--color-gray-100);
|
|
18
|
+
--c-bg-surface: var(--color-gray-50);
|
|
19
|
+
--c-bg-muted: var(--color-gray-200);
|
|
20
|
+
--c-bg-surface-elevated: var(--color-gray-300);
|
|
21
|
+
--c-card: var(--color-bg);
|
|
22
|
+
--c-card-gray: var(--color-bg-subtle);
|
|
23
|
+
--c-overlay: var(--c-bg);
|
|
24
|
+
--c-overlay-gray: var(--c-bg-subtle);
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
--c-border-strong: var(--color-gray-300);
|
|
28
|
+
--c-border-amphasis: var(--color-gray-400);
|
|
29
|
+
--c-border: var(--color-gray-200);
|
|
30
|
+
--c-border-sub: var(--color-gray-100);
|
|
31
|
+
--c-border-card:var(--color-gray-200);
|
|
32
|
+
--c-border-input: var(--color-gray-200);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
.dark {
|
|
37
|
+
--c-primary: var(--color-primary-500);
|
|
38
|
+
--c-secondary: var(--color-secondary-500);
|
|
39
|
+
--c-accent: var(--color-accent-500);
|
|
40
|
+
--c-info: var(--color-info-500);
|
|
41
|
+
--c-warning: var(--color-warning-500);
|
|
42
|
+
--c-danger: var(--color-danger-500);
|
|
43
|
+
--c-success: var(--color-success-500);
|
|
44
|
+
|
|
45
|
+
--c-fg-title: var(--color-white);
|
|
46
|
+
--c-fg-subtitle: var(--color-gray-100);
|
|
47
|
+
--c-fg: var(--color-gray-300);
|
|
48
|
+
--c-fg-muted: var(--color-gray-400);
|
|
49
|
+
|
|
50
|
+
--c-bg: var(--color-gray-950);
|
|
51
|
+
--c-bg-subtle: var(--color-gray-900);
|
|
52
|
+
|
|
53
|
+
--c-bg-muted: var(--color-gray-800);
|
|
54
|
+
--c-bg-surface-elevated: var(--color-gray-700);
|
|
55
|
+
|
|
56
|
+
--c-border-strong: var(--color-gray-700);
|
|
57
|
+
--c-border-amphasis: var(--color-gray-600);
|
|
58
|
+
--c-border: var(--color-gray-900);
|
|
59
|
+
--c-border-sub: var(--color-gray-900);
|
|
60
|
+
--c-border-card:var(--color-gray-800);
|
|
61
|
+
}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
@utility btn-solid-primary {
|
|
2
|
+
--btn-solid-top-shadow: var(--color-primary-500);
|
|
3
|
+
--btn-solid-bottom-shadow: var(--color-primary-700);
|
|
4
|
+
--btn-solid-top-shadow-hover: var(--color-primary-600);
|
|
5
|
+
--btn-solid-bottom-shadow-hover: var(--color-primary-800);
|
|
6
|
+
--btn-solid-color: var(--color-primary-600);
|
|
7
|
+
--btn-solid-color-hover: var(--color-primary-700);
|
|
8
|
+
--btn-solid-color-press: var(--color-primary-800);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@utility btn-solid-secondary {
|
|
12
|
+
--btn-solid-top-shadow: var(--color-secondary-500);
|
|
13
|
+
--btn-solid-bottom-shadow: var(--color-secondary-700);
|
|
14
|
+
--btn-solid-top-shadow-hover: var(--color-secondary-600);
|
|
15
|
+
--btn-solid-bottom-shadow-hover: var(--color-secondary-800);
|
|
16
|
+
--btn-solid-color: var(--color-secondary-600);
|
|
17
|
+
--btn-solid-color-hover: var(--color-secondary-700);
|
|
18
|
+
--btn-solid-color-press: var(--color-secondary-800);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@utility btn-solid-neutral {
|
|
22
|
+
--btn-solid-top-shadow: var(--color-gray-800);
|
|
23
|
+
--btn-solid-bottom-shadow: var(--color-gray-700);
|
|
24
|
+
--btn-solid-top-shadow-hover: var(--color-gray-800);
|
|
25
|
+
--btn-solid-bottom-shadow-hover: var(--color-gray-900);
|
|
26
|
+
--btn-solid-color: var(--color-gray-900);
|
|
27
|
+
--btn-solid-color-hover: var(--color-gray-950);
|
|
28
|
+
--btn-solid-color-press: var(--color-gray-900);
|
|
29
|
+
|
|
30
|
+
&:is(.dark *) {
|
|
31
|
+
--btn-solid-top-shadow: var(--color-gray-200);
|
|
32
|
+
--btn-solid-bottom-shadow: var(--color-gray-100);
|
|
33
|
+
--btn-solid-top-shadow-hover: var(--color-gray-300);
|
|
34
|
+
--btn-solid-bottom-shadow-hover: var(--color-gray-200);
|
|
35
|
+
--btn-solid-color: var(--color-gray-100);
|
|
36
|
+
--btn-solid-color-hover: var(--color-white);
|
|
37
|
+
--btn-solid-color-press: var(--color-gray-200);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@utility btn-flexi-white {
|
|
42
|
+
--btn-flexi-bg: var(--color-white);
|
|
43
|
+
--btn-flexi-hover-bg: var(--color-gray-100);
|
|
44
|
+
--btn-flexi-active-bg: var(--color-gray-50);
|
|
45
|
+
--btn-flexi-shadow-a: var(--color-gray-300);
|
|
46
|
+
--btn-flexi-shadow-b: var(--color-gray-200);
|
|
47
|
+
--btn-flexi-shadow-c: var(--color-gray-50);
|
|
48
|
+
--btn-flexi-shadow-active-a: var(--color-gray-400);
|
|
49
|
+
--btn-flexi-shadow-active-b: var(--color-gray-300);
|
|
50
|
+
--btn-flexi-shadow-active-c: var(--color-gray-500);
|
|
51
|
+
|
|
52
|
+
&:is(.dark *) {
|
|
53
|
+
--btn-flexi-bg: var(--color-gray-900);
|
|
54
|
+
--btn-flexi-hover-bg: var(--color-gray-800);
|
|
55
|
+
--btn-flexi-active-bg: var(--color-gray-900);
|
|
56
|
+
--btn-flexi-shadow-a: var(--color-gray-800);
|
|
57
|
+
--btn-flexi-shadow-b: var(--color-gray-900);
|
|
58
|
+
--btn-flexi-shadow-c: var(--color-gray-800);
|
|
59
|
+
--btn-flexi-shadow-active-a: var(--color-gray-700);
|
|
60
|
+
--btn-flexi-shadow-active-b: var(--color-gray-800);
|
|
61
|
+
--btn-flexi-shadow-active-c: var(--color-gray-900);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@utility btn-flexi-neutral {
|
|
66
|
+
--btn-flexi-bg: var(--color-gray-900);
|
|
67
|
+
--btn-flexi-hover-bg: var(--color-gray-800);
|
|
68
|
+
--btn-flexi-active-bg: var(--color-gray-950);
|
|
69
|
+
--btn-flexi-shadow-a: var(--color-gray-700);
|
|
70
|
+
--btn-flexi-shadow-b: var(--color-gray-500);
|
|
71
|
+
--btn-flexi-shadow-c: var(--color-gray-400);
|
|
72
|
+
--btn-flexi-shadow-active-a: var(--color-gray-700);
|
|
73
|
+
--btn-flexi-shadow-active-b: var(--color-gray-600);
|
|
74
|
+
--btn-flexi-shadow-active-c: var(--color-gray-500);
|
|
75
|
+
|
|
76
|
+
&:is(.dark *) {
|
|
77
|
+
--btn-flexi-bg: var(--color-white);
|
|
78
|
+
--btn-flexi-hover-bg: var(--color-gray-100);
|
|
79
|
+
--btn-flexi-active-bg: var(--color-gray-50);
|
|
80
|
+
--btn-flexi-shadow-a: var(--color-gray-100);
|
|
81
|
+
--btn-flexi-shadow-b: var(--color-gray-200);
|
|
82
|
+
--btn-flexi-shadow-c: var(--color-gray-50);
|
|
83
|
+
--btn-flexi-shadow-active-a: var(--color-gray-200);
|
|
84
|
+
--btn-flexi-shadow-active-b: var(--color-gray-300);
|
|
85
|
+
--btn-flexi-shadow-active-c: var(--color-gray-50);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
@utility btn-outline-danger {
|
|
91
|
+
--btn-outline-bg: var(--color-danger-50);
|
|
92
|
+
--btn-outline-color: var(--color-danger-200);
|
|
93
|
+
--btn-outline-text-color: var(--color-danger-800);
|
|
94
|
+
--btn-outline-bg-hover: --alpha(var(--color-danger-100) / 60%);
|
|
95
|
+
|
|
96
|
+
&:is(.dark *) {
|
|
97
|
+
--btn-outline-color: --alpha(var(--color-danger-500) / 30%);
|
|
98
|
+
--btn-outline-text-color: var(--color-danger-300);
|
|
99
|
+
--btn-outline-bg: --alpha(var(--color-danger-500) / 5%);
|
|
100
|
+
--btn-outline-bg-hover: --alpha(var(--color-danger-500) / 10%);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@utility btn-outline-gray {
|
|
105
|
+
--btn-outline-bg: var(--color-gray-50);
|
|
106
|
+
--btn-outline-color: var(--color-gray-200);
|
|
107
|
+
--btn-outline-text-color: var(--color-gray-800);
|
|
108
|
+
--btn-outline-bg-hover: --alpha(var(--color-gray-100) / 60%);
|
|
109
|
+
|
|
110
|
+
&:is(.dark *) {
|
|
111
|
+
--btn-outline-color: --alpha(var(--color-gray-500) / 30%);
|
|
112
|
+
--btn-outline-text-color: var(--color-gray-300);
|
|
113
|
+
--btn-outline-bg: --alpha(var(--color-gray-500) / 5%);
|
|
114
|
+
--btn-outline-bg-hover: --alpha(var(--color-gray-500) / 15%);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
@utility btn-soft-primary {
|
|
120
|
+
--btn-soft-bg-color: var(--color-primary-50);
|
|
121
|
+
--btn-soft-bg-color-hover: --alpha(var(--color-primary-400) / 60%);
|
|
122
|
+
--btn-soft-bg-color-press: --alpha(var(--color-primary-400) / 40%);
|
|
123
|
+
--btn-soft-text-color: var(--color-primary-600);
|
|
124
|
+
--btn-soft-text-color-hover: var(--color-primary-700);
|
|
125
|
+
|
|
126
|
+
&:is(.dark *) {
|
|
127
|
+
--btn-soft-bg-color: --alpha(var(--color-primary-600) / 15%);
|
|
128
|
+
--btn-soft-bg-color-hover: --alpha(var(--color-primary-600) / 30%);
|
|
129
|
+
--btn-soft-bg-color-press: --alpha(var(--color-primary-600) / 25%);
|
|
130
|
+
--btn-soft-text-color: var(--color-primary-300);
|
|
131
|
+
--btn-soft-text-color-hover: var(--color-primary-300);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
@utility btn-soft-gray {
|
|
136
|
+
--btn-soft-bg-color: var(--color-gray-50);
|
|
137
|
+
--btn-soft-bg-color-hover: --alpha(var(--color-gray-200) / 75%);
|
|
138
|
+
--btn-soft-bg-color-press: --alpha(var(--color-gray-200) / 80%);
|
|
139
|
+
--btn-soft-text-color: var(--color-gray-800);
|
|
140
|
+
--btn-soft-text-color-hover: var(--color-gray-900);
|
|
141
|
+
|
|
142
|
+
&:is(.dark *) {
|
|
143
|
+
--btn-soft-bg-color: --alpha(var(--color-gray-600) / 20%);
|
|
144
|
+
--btn-soft-bg-color-hover: --alpha(var(--color-gray-600) / 40%);
|
|
145
|
+
--btn-soft-bg-color-press: --alpha(var(--color-gray-600) / 25%);
|
|
146
|
+
--btn-soft-text-color: var(--color-gray-100);
|
|
147
|
+
--btn-soft-text-color-hover: var(--color-gray-50);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
@utility btn-ghost-primary {
|
|
153
|
+
--btn-ghost-bg-color-hover: --alpha(var(--color-primary-100) / 50%);
|
|
154
|
+
--btn-ghost-bg-color-press: --alpha(var(--color-primary-100) / 70%);
|
|
155
|
+
--btn-ghost-text-color: var(--color-primary-600);
|
|
156
|
+
--btn-ghost-text-color-hover: var(--color-primary-700);
|
|
157
|
+
|
|
158
|
+
&:is(.dark *) {
|
|
159
|
+
--btn-ghost-bg-color-hover: --alpha(var(--color-primary-600) / 30%);
|
|
160
|
+
--btn-ghost-bg-color-press: --alpha(var(--color-primary-600) / 25%);
|
|
161
|
+
--btn-ghost-text-color: var(--color-primary-300);
|
|
162
|
+
--btn-ghost-text-color-hover: var(--color-primary-200);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
@utility btn-solid-primary {
|
|
2
|
+
--btn-solid-top-shadow: var(--color-primary-500);
|
|
3
|
+
--btn-solid-bottom-shadow: var(--color-primary-700);
|
|
4
|
+
--btn-solid-top-shadow-hover: var(--color-primary-600);
|
|
5
|
+
--btn-solid-bottom-shadow-hover: var(--color-primary-800);
|
|
6
|
+
--btn-solid-color: var(--color-primary-600);
|
|
7
|
+
--btn-solid-color-hover: var(--color-primary-700);
|
|
8
|
+
--btn-solid-color-press: var(--color-primary-800);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@utility btn-solid-secondary {
|
|
12
|
+
--btn-solid-top-shadow: var(--color-secondary-500);
|
|
13
|
+
--btn-solid-bottom-shadow: var(--color-secondary-700);
|
|
14
|
+
--btn-solid-top-shadow-hover: var(--color-secondary-600);
|
|
15
|
+
--btn-solid-bottom-shadow-hover: var(--color-secondary-800);
|
|
16
|
+
--btn-solid-color: var(--color-secondary-600);
|
|
17
|
+
--btn-solid-color-hover: var(--color-secondary-700);
|
|
18
|
+
--btn-solid-color-press: var(--color-secondary-800);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@utility btn-solid-neutral {
|
|
22
|
+
--btn-solid-top-shadow: var(--color-gray-200);
|
|
23
|
+
--btn-solid-bottom-shadow: var(--color-gray-100);
|
|
24
|
+
--btn-solid-top-shadow-hover: var(--color-gray-300);
|
|
25
|
+
--btn-solid-bottom-shadow-hover: var(--color-gray-200);
|
|
26
|
+
--btn-solid-color: var(--color-gray-100);
|
|
27
|
+
--btn-solid-color-hover: var(--color-white);
|
|
28
|
+
--btn-solid-color-press: var(--color-gray-200);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@utility btn-flexi-white {
|
|
32
|
+
--btn-flexi-bg: var(--color-gray-900);
|
|
33
|
+
--btn-flexi-hover-bg: var(--color-gray-800);
|
|
34
|
+
--btn-flexi-active-bg: var(--color-gray-900);
|
|
35
|
+
--btn-flexi-shadow-a: var(--color-gray-800);
|
|
36
|
+
--btn-flexi-shadow-b: var(--color-gray-900);
|
|
37
|
+
--btn-flexi-shadow-c: var(--color-gray-800);
|
|
38
|
+
--btn-flexi-shadow-active-a: var(--color-gray-700);
|
|
39
|
+
--btn-flexi-shadow-active-b: var(--color-gray-800);
|
|
40
|
+
--btn-flexi-shadow-active-c: var(--color-gray-900);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@utility btn-flexi-neutral {
|
|
44
|
+
--btn-flexi-bg: var(--color-white);
|
|
45
|
+
--btn-flexi-hover-bg: var(--color-gray-100);
|
|
46
|
+
--btn-flexi-active-bg: var(--color-gray-50);
|
|
47
|
+
--btn-flexi-shadow-a: var(--color-gray-100);
|
|
48
|
+
--btn-flexi-shadow-b: var(--color-gray-200);
|
|
49
|
+
--btn-flexi-shadow-c: var(--color-gray-50);
|
|
50
|
+
--btn-flexi-shadow-active-a: var(--color-gray-200);
|
|
51
|
+
--btn-flexi-shadow-active-b: var(--color-gray-300);
|
|
52
|
+
--btn-flexi-shadow-active-c: var(--color-gray-50);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@utility btn-outline-danger {
|
|
56
|
+
--btn-outline-color: --alpha(var(--color-danger-500) / 30%);
|
|
57
|
+
--btn-outline-text-color: var(--color-danger-300);
|
|
58
|
+
--btn-outline-bg: --alpha(var(--color-danger-500) / 5%);
|
|
59
|
+
--btn-outline-bg-hover: --alpha(var(--color-danger-500) / 10%);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@utility btn-outline-gray {
|
|
63
|
+
--btn-outline-color: --alpha(var(--color-gray-500) / 30%);
|
|
64
|
+
--btn-outline-text-color: var(--color-gray-300);
|
|
65
|
+
--btn-outline-bg: --alpha(var(--color-gray-500) / 5%);
|
|
66
|
+
--btn-outline-bg-hover: --alpha(var(--color-gray-500) / 15%);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@utility btn-soft-primary {
|
|
70
|
+
--btn-soft-bg-color: --alpha(var(--color-primary-600) / 15%);
|
|
71
|
+
--btn-soft-bg-color-hover: --alpha(var(--color-primary-600) / 30%);
|
|
72
|
+
--btn-soft-bg-color-press: --alpha(var(--color-primary-600) / 25%);
|
|
73
|
+
--btn-soft-text-color: var(--color-primary-300);
|
|
74
|
+
--btn-soft-text-color-hover: var(--color-primary-300);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@utility btn-soft-gray {
|
|
78
|
+
--btn-soft-bg-color: --alpha(var(--color-gray-600) / 20%);
|
|
79
|
+
--btn-soft-bg-color-hover: --alpha(var(--color-gray-600) / 40%);
|
|
80
|
+
--btn-soft-bg-color-press: --alpha(var(--color-gray-600) / 25%);
|
|
81
|
+
--btn-soft-text-color: var(--color-gray-100);
|
|
82
|
+
--btn-soft-text-color-hover: var(--color-gray-50);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@utility btn-ghost-danger {
|
|
86
|
+
--btn-ghost-bg-color-hover: --alpha(var(--color-danger-600) / 30%);
|
|
87
|
+
--btn-ghost-bg-color-press: --alpha(var(--color-danger-600) / 25%);
|
|
88
|
+
--btn-ghost-text-color: var(--color-danger-300);
|
|
89
|
+
--btn-ghost-text-color-hover: var(--color-danger-200);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@utility btn-ghost-gray {
|
|
93
|
+
--btn-ghost-bg-color-hover: --alpha(var(--color-gray-700) / 70%);
|
|
94
|
+
--btn-ghost-bg-color-press: --alpha(var(--color-gray-800) / 60%);
|
|
95
|
+
--btn-ghost-text-color: var(--color-gray-100);
|
|
96
|
+
--btn-ghost-text-color-hover: var(--color-gray-50);
|
|
97
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@utility ui-solid-gray {
|
|
2
|
+
--ui-solid-bg: var(--color-gray-900);
|
|
3
|
+
--ui-solid-text: var(--color-gray-300);
|
|
4
|
+
}
|
|
5
|
+
@utility ui-solid-success {
|
|
6
|
+
--ui-solid-text: var(--color-white);
|
|
7
|
+
--ui-solid-bg: var(--color-success-500);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@utility ui-solid-warning {
|
|
11
|
+
--ui-solid-text: var(--color-white);
|
|
12
|
+
--ui-solid-bg: var(--color-warning-500);
|
|
13
|
+
|
|
14
|
+
}
|
|
15
|
+
@utility ui-solid-danger {
|
|
16
|
+
--ui-solid-text: var(--color-white);
|
|
17
|
+
--ui-solid-bg: var(--color-danger-500);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@utility ui-solid-neutral {
|
|
21
|
+
` --ui-solid-bg: var(--color-white);
|
|
22
|
+
--ui-solid-text: var(--color-gray-900);`
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@utility ui-outline-success {
|
|
26
|
+
--ui-outline-border: var(--color-secondary-500);
|
|
27
|
+
--ui-outline-text: var(--color-secondary-500);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@utility ui-outline-warning {
|
|
31
|
+
--ui-outline-border: var(--color-warning-500);
|
|
32
|
+
--ui-outline-text: var(--color-warning-500);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@utility ui-outline-danger {
|
|
36
|
+
--ui-outline-border: var(--color-danger-500);
|
|
37
|
+
--ui-outline-text: var(--color-danger-500);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@utility ui-soft-success {
|
|
41
|
+
--ui-soft-bg: --alpha(var(--color-success-900) / 30%);
|
|
42
|
+
--ui-soft-text: var(--color-success-300);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@utility ui-soft-warning {
|
|
46
|
+
--ui-soft-bg: --alpha(var(--color-warning-900) / 30%);
|
|
47
|
+
--ui-soft-text: var(--color-warning-300);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@utility ui-soft-danger {
|
|
51
|
+
--ui-soft-bg: --alpha(var(--color-danger-900) / 30%);
|
|
52
|
+
--ui-soft-text: var(--color-danger-300);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@utility ui-subtle-success {
|
|
56
|
+
--ui-subtle-bg: --alpha(var(--color-success-900) / 30%);
|
|
57
|
+
--ui-subtle-text: var(--color-success-300);
|
|
58
|
+
--ui-subtle-border: --alpha(var(--color-success-900) / 60%);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@utility ui-subtle-warning {
|
|
62
|
+
--ui-subtle-bg: --alpha(var(--color-warning-900) / 30%);
|
|
63
|
+
--ui-subtle-text: var(--color-warning-300);
|
|
64
|
+
--ui-subtle-border: --alpha(var(--color-warning-900) / 60%);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@utility ui-subtle-danger {
|
|
68
|
+
--ui-subtle-bg: --alpha(var(--color-danger-900) / 30%);
|
|
69
|
+
--ui-subtle-text: var(--color-danger-300);
|
|
70
|
+
--ui-subtle-border: --alpha(var(--color-danger-900) / 60%);
|
|
71
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@custom-variant fx-open (&[data-state="open"]);
|
|
2
|
+
@custom-variant fx-close (&[data-state="close"]);
|
|
3
|
+
@custom-variant fx-visible (&[data-state="visible"]);
|
|
4
|
+
@custom-variant fx-hidden (&[data-state="hidden"]);
|
|
5
|
+
@custom-variant fx-opened (&[data-state="opened"]);
|
|
6
|
+
@custom-variant fx-closed (&[data-state="closed"]);
|
|
7
|
+
@custom-variant fx-resized (&[data-resized="true"]);
|
|
8
|
+
@custom-variant fx-active (&[data-state="active"]);
|
|
9
|
+
@custom-variant fx-inactive (&[data-state="inactive"]);
|
|
10
|
+
@custom-variant fx-focus-active (&[data-focus="active"]);
|
|
11
|
+
|
|
12
|
+
@custom-variant fx-selected (&[data-selected]);
|
|
13
|
+
@custom-variant fx-checked (&[data-checked="true"]);
|
|
14
|
+
@custom-variant fx-indeterminate (&[data-indeterminate="true"]);
|
|
15
|
+
@custom-variant fx-inert (&[data-inert]);
|
|
16
|
+
@custom-variant fx-focused (&[data-focus="true"]);
|
|
17
|
+
@custom-variant fx-focus-visible (&[data-focus-visible="true"]);
|
|
18
|
+
@custom-variant fx-invalid (&[data-invalid="true"]);
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
@custom-variant slot-icon (&[slot="icon"]);
|
|
22
|
+
@custom-variant slot-label (&[slot="label"]);
|
|
23
|
+
@custom-variant slot-description (&[slot="description"]);
|
|
24
|
+
@custom-variant slot-kbd (&[slot="kbd"]);
|
|
25
|
+
|
|
26
|
+
@custom-variant fx-slide-x (&[data-ax="x"]);
|
|
27
|
+
@custom-variant fx-slide-y (&[data-ax="y"]);
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
@custom-variant placement-left (&[data-placement="left"]);
|
|
31
|
+
@custom-variant placement-right (&[data-placement="right"]);
|
|
32
|
+
@custom-variant placement-top (&[data-placement="top"]);
|
|
33
|
+
@custom-variant placement-bottom (&[data-placement="bottom"]);
|
|
34
|
+
|
|
35
|
+
@custom-variant exiting (&[data-exiting]);
|
|
36
|
+
@custom-variant entering (&[data-entering]);
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
@utility btn {
|
|
4
|
+
@apply flex items-center disabled:opacity-90 disabled:cursor-not-allowed disabled:hover:opacity-70 transition-colors ease-linear outline-offset-2 outline-2 outline-transparent focus-visible:outline-(--btn-focus-outline-color);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@utility btn-xs {
|
|
8
|
+
@apply h-6 px-3.5 text-xs;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@utility btn-icon-xs {
|
|
12
|
+
@apply size-6 text-xs justify-center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@utility btn-sm {
|
|
16
|
+
@apply h-8 px-4 text-sm;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@utility btn-icon-sm {
|
|
20
|
+
@apply size-8 text-sm justify-center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@utility btn-md {
|
|
24
|
+
@apply h-10 px-5 text-sm;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@utility btn-icon-md {
|
|
28
|
+
@apply size-10 justify-center text-sm;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@utility btn-lg {
|
|
32
|
+
@apply h-12 px-6 text-sm;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@utility btn-icon-lg {
|
|
36
|
+
@apply size-12 justify-center text-sm;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@utility btn-xl {
|
|
40
|
+
@apply h-14 px-7 text-sm;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@utility btn-icon-xl {
|
|
44
|
+
@apply size-14 justify-center text-sm;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
@utility btn-solid {
|
|
49
|
+
@apply bg-(--btn-solid-color) hover:bg-(--btn-solid-color-hover) active:bg-(--btn-solid-color-press) focus-visible:outline-(--btn-solid-color-hover) [--btn-focus-outline-color:var(--btn-solid-color-hover)];
|
|
50
|
+
background-image: radial-gradient(farthest-corner at 50% -50%, rgba(255, 255, 255, .1) 0%, transparent 100%);
|
|
51
|
+
box-shadow: inset 0px 2px 0 var(--btn-solid-top-shadow), inset 0px -2px 0 var(--btn-solid-bottom-shadow);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@utility btn-flexi {
|
|
55
|
+
@apply bg-(--btn-flexi-bg) hover:bg-(--btn-flexi-hover-bg) active:bg-(--btn-flexi-active-bg) active:[--btn-flexi-shadow-a:--btn-flexi-shadow-active-a] active:[--btn-flexi-shadow-b:--btn-flexi-shadow-active-b] active:[--btn-flexi-shadow-c:--btn-flexi-shadow-active-c] [--btn-focus-outline-color:--btn-flexi-hover-bg];
|
|
56
|
+
--tw-shadow: 0 -1px 0 0px var(--tw-shadow-color, var(--btn-flexi-shadow-a)) inset, 0 0 0 1px var(--tw-shadow-color, var(--btn-flexi-shadow-b)) inset, 0 0.5px 0 1.5px var(--tw-shadow-color, var(--btn-flexi-shadow-c)) inset;
|
|
57
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@utility btn-outline {
|
|
61
|
+
background-image: radial-gradient(76% 151% at 52% -52%, rgba(255, 255, 255, var(--outline-radial-opacity)) 0%, transparent 100%);
|
|
62
|
+
box-shadow: rgba(255, 255, 255, var(--inner-border-color)) 0px 1px 0px 0px inset, var(--btn-outline-color) 0px 0px 0px 1px, 0px 1px 2px rgba(0, 0, 0, 0.1);
|
|
63
|
+
@apply hover:brightness-[0.98] active:brightness-100 bg-(--btn-outline-bg) hover:bg-(--btn-outline-bg-hover) active:bg-(--btn-outline-bg) [--outline-radial-opacity:0.6] [--inner-border-color:1] text-(--btn-outline-text-color) focus-visible:outline-(--btn-outline-color-hover);
|
|
64
|
+
|
|
65
|
+
&:is(.dark *) {
|
|
66
|
+
background-image: none;
|
|
67
|
+
--inner-border-color: 0;
|
|
68
|
+
--outline-radial-opacity: 0.2;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@utility btn-soft {
|
|
73
|
+
@apply bg-(--btn-soft-bg-color) hover:bg-(--btn-soft-bg-color-hover) active:bg-(--btn-soft-bg-color-press) text-(--btn-soft-text-color) [--btn-focus-outline-color:--btn-soft-text-color];
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
@media (hover: hover) {
|
|
77
|
+
color: var(--btn-soft-text-color-hover, --btn-soft-text-color);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&:active {
|
|
82
|
+
color: var(--btn-soft-text-color-hover, --btn-soft-text-color);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
@utility btn-ghost {
|
|
89
|
+
@apply hover:bg-(--btn-ghost-bg-color-hover) active:bg-(--btn-ghost-bg-color-press) text-(--btn-ghost-text-color) [--btn-focus-outline-color:--btn-ghost-text-color];
|
|
90
|
+
|
|
91
|
+
&:hover {
|
|
92
|
+
@media (hover: hover) {
|
|
93
|
+
color: var(--btn-ghost-text-color-hover, --btn-ghost-text-color);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&:active {
|
|
98
|
+
color: var(--btn-ghost-text-color-hover, --btn-ghost-text-color);
|
|
99
|
+
}
|
|
100
|
+
}
|