@lark-apaas/coding-template-vite-react 0.1.6 → 0.1.7
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/package.json +1 -1
- package/template/src/index.css +90 -71
- package/template/src/tailwind-theme.css +75 -0
package/package.json
CHANGED
package/template/src/index.css
CHANGED
|
@@ -1,77 +1,10 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
@import "tw-animate-css";
|
|
3
|
+
/* tailwind-theme.css 仅含 :root 设计变量，改颜色只需改那个文件 */
|
|
4
|
+
@import "./tailwind-theme.css";
|
|
3
5
|
|
|
4
|
-
:root
|
|
5
|
-
|
|
6
|
-
--badge-outline: rgba(0,0,0, .05);
|
|
7
|
-
--opaque-button-border-intensity: -8;
|
|
8
|
-
--elevate-1: rgba(0,0,0, .03);
|
|
9
|
-
--elevate-2: rgba(0,0,0, .08);
|
|
10
|
-
|
|
11
|
-
--background: hsl(0 0% 100%);
|
|
12
|
-
--foreground: hsl(220 14% 14%);
|
|
13
|
-
--card: hsl(0 0% 100%);
|
|
14
|
-
--card-foreground: hsl(220 14% 14%);
|
|
15
|
-
--popover: hsl(0 0% 100%);
|
|
16
|
-
--popover-foreground: hsl(220 14% 14%);
|
|
17
|
-
--primary: hsl(221 83% 53%);
|
|
18
|
-
--primary-foreground: hsl(220 14% 98%);
|
|
19
|
-
--secondary: hsl(220 14% 96%);
|
|
20
|
-
--secondary-foreground: hsl(220 14% 14%);
|
|
21
|
-
--muted: hsl(220 14% 96%);
|
|
22
|
-
--muted-foreground: hsl(218 7% 59%);
|
|
23
|
-
--accent: hsl(220 14% 96%);
|
|
24
|
-
--accent-foreground: hsl(220 14% 14%);
|
|
25
|
-
--info: hsl(221 83% 53%);
|
|
26
|
-
--info-foreground: hsl(230 100% 98%);
|
|
27
|
-
--destructive: hsl(2 84% 62%);
|
|
28
|
-
--destructive-foreground: hsl(0 0% 100%);
|
|
29
|
-
--success: hsl(130 54% 42%);
|
|
30
|
-
--success-foreground: hsl(115 77% 97%);
|
|
31
|
-
--warning: hsl(26 90% 49%);
|
|
32
|
-
--warning-foreground: hsl(33 100% 96%);
|
|
33
|
-
--border: hsl(220 14% 89%);
|
|
34
|
-
--input: hsl(220 14% 89%);
|
|
35
|
-
--ring: hsl(221 83% 53%);
|
|
36
|
-
--chart-1: hsl(222 82% 56%);
|
|
37
|
-
--chart-2: hsl(174 77% 46%);
|
|
38
|
-
--chart-3: hsl(46 100% 52%);
|
|
39
|
-
--chart-4: hsl(27 92% 49%);
|
|
40
|
-
--chart-5: hsl(292 54% 76%);
|
|
41
|
-
--sidebar: hsl(220 14% 96%);
|
|
42
|
-
--sidebar-foreground: hsl(220 14% 14%);
|
|
43
|
-
--sidebar-primary: hsl(221 83% 53%);
|
|
44
|
-
--sidebar-primary-foreground: hsl(220 14% 98%);
|
|
45
|
-
--sidebar-accent: hsl(222 100% 94%);
|
|
46
|
-
--sidebar-accent-foreground: hsl(221 83% 53%);
|
|
47
|
-
--sidebar-border: hsl(220 14% 89%);
|
|
48
|
-
--sidebar-ring: hsl(221 83% 53%);
|
|
49
|
-
|
|
50
|
-
--primary-border: hsl(from hsl(221 83% 53%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
51
|
-
--secondary-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
52
|
-
--destructive-border: hsl(from hsl(2 84% 62%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
53
|
-
--accent-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
54
|
-
--muted-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
55
|
-
|
|
56
|
-
--font-sans:
|
|
57
|
-
-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, 'PingFang SC',
|
|
58
|
-
'Microsoft Yahei', Arial, 'Hiragino Sans GB', sans-serif,
|
|
59
|
-
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
60
|
-
--font-mono: Source Code Pro, monospace;
|
|
61
|
-
--radius: 0.5rem;
|
|
62
|
-
--spacing: 0.25rem;
|
|
63
|
-
|
|
64
|
-
--shadow-2xs: 0px 2px 12px 0px hsl(0 0% 0% / 0.01);
|
|
65
|
-
--shadow-xs: 0px 2px 12px 0px hsl(0 0% 0% / 0.01);
|
|
66
|
-
--shadow-sm: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
|
|
67
|
-
--shadow: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
|
|
68
|
-
--shadow-md: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 2px 4px -1px hsl(0 0% 0% / 0.02);
|
|
69
|
-
--shadow-lg: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 4px 6px -1px hsl(0 0% 0% / 0.02);
|
|
70
|
-
--shadow-xl: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 8px 10px -1px hsl(0 0% 0% / 0.02);
|
|
71
|
-
--shadow-2xl: 0px 2px 12px 0px hsl(0 0% 0% / 0.05);
|
|
72
|
-
--tracking-normal: 0em;
|
|
73
|
-
}
|
|
74
|
-
|
|
6
|
+
/* 把 :root 变量注册为 Tailwind 工具类（bg-primary / text-foreground 等）。
|
|
7
|
+
结构固定，无需修改；颜色值在 tailwind-theme.css 的 :root 中定义。 */
|
|
75
8
|
@theme inline {
|
|
76
9
|
--color-background: var(--background);
|
|
77
10
|
--color-foreground: var(--foreground);
|
|
@@ -129,3 +62,89 @@
|
|
|
129
62
|
--shadow-xl: var(--shadow-xl);
|
|
130
63
|
--shadow-2xl: var(--shadow-2xl);
|
|
131
64
|
}
|
|
65
|
+
|
|
66
|
+
@layer base {
|
|
67
|
+
* {
|
|
68
|
+
border-color: var(--border);
|
|
69
|
+
outline-color: var(--ring);
|
|
70
|
+
|
|
71
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
72
|
+
outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
body {
|
|
77
|
+
background-color: var(--background);
|
|
78
|
+
color: var(--foreground);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@layer utilities {
|
|
83
|
+
input[type="search"]::-webkit-search-cancel-button {
|
|
84
|
+
@apply hidden;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
[contenteditable][data-placeholder]:empty::before {
|
|
88
|
+
content: attr(data-placeholder);
|
|
89
|
+
color: var(--muted-foreground);
|
|
90
|
+
pointer-events: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.no-default-hover-elevate {}
|
|
94
|
+
.no-default-active-elevate {}
|
|
95
|
+
|
|
96
|
+
.toggle-elevate::before,
|
|
97
|
+
.toggle-elevate-2::before {
|
|
98
|
+
content: "";
|
|
99
|
+
pointer-events: none;
|
|
100
|
+
position: absolute;
|
|
101
|
+
inset: 0px;
|
|
102
|
+
border-radius: inherit;
|
|
103
|
+
z-index: -1;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.toggle-elevate.toggle-elevated::before {
|
|
107
|
+
background-color: var(--elevate-2);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.border.toggle-elevate::before {
|
|
111
|
+
inset: -1px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.hover-elevate:not(.no-default-hover-elevate),
|
|
115
|
+
.active-elevate:not(.no-default-active-elevate),
|
|
116
|
+
.hover-elevate-2:not(.no-default-hover-elevate),
|
|
117
|
+
.active-elevate-2:not(.no-default-active-elevate) {
|
|
118
|
+
position: relative;
|
|
119
|
+
z-index: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.hover-elevate:not(.no-default-hover-elevate)::after,
|
|
123
|
+
.active-elevate:not(.no-default-active-elevate)::after,
|
|
124
|
+
.hover-elevate-2:not(.no-default-hover-elevate)::after,
|
|
125
|
+
.active-elevate-2:not(.no-default-active-elevate)::after {
|
|
126
|
+
content: "";
|
|
127
|
+
pointer-events: none;
|
|
128
|
+
position: absolute;
|
|
129
|
+
inset: 0px;
|
|
130
|
+
border-radius: inherit;
|
|
131
|
+
z-index: 999;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.hover-elevate:hover:not(.no-default-hover-elevate)::after,
|
|
135
|
+
.active-elevate:active:not(.no-default-active-elevate)::after {
|
|
136
|
+
background-color: var(--elevate-1);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
|
|
140
|
+
.active-elevate-2:active:not(.no-default-active-elevate)::after {
|
|
141
|
+
background-color: var(--elevate-2);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
|
|
145
|
+
.border.active-elevate:not(.no-active-interaction-elevate)::after,
|
|
146
|
+
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
|
|
147
|
+
.border.active-elevate-2:not(.no-active-interaction-elevate)::after {
|
|
148
|
+
inset: -1px;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Design tokens — 模型可以安全 write / multi_edit 整个文件改 :root 颜色变量。
|
|
3
|
+
* 注意：@theme inline（把 :root 变量注册为 Tailwind 工具类）在 index.css 中，
|
|
4
|
+
* 结构固定无需改动，改颜色只需改本文件的 :root 值即可。
|
|
5
|
+
*/
|
|
6
|
+
:root {
|
|
7
|
+
--button-outline: rgba(0,0,0, .10);
|
|
8
|
+
--badge-outline: rgba(0,0,0, .05);
|
|
9
|
+
--opaque-button-border-intensity: -8;
|
|
10
|
+
--elevate-1: rgba(0,0,0, .03);
|
|
11
|
+
--elevate-2: rgba(0,0,0, .08);
|
|
12
|
+
|
|
13
|
+
--background: hsl(0 0% 100%);
|
|
14
|
+
--foreground: hsl(220 14% 14%);
|
|
15
|
+
--card: hsl(0 0% 100%);
|
|
16
|
+
--card-foreground: hsl(220 14% 14%);
|
|
17
|
+
--popover: hsl(0 0% 100%);
|
|
18
|
+
--popover-foreground: hsl(220 14% 14%);
|
|
19
|
+
--primary: hsl(221 83% 53%);
|
|
20
|
+
--primary-foreground: hsl(220 14% 98%);
|
|
21
|
+
--secondary: hsl(220 14% 96%);
|
|
22
|
+
--secondary-foreground: hsl(220 14% 14%);
|
|
23
|
+
--muted: hsl(220 14% 96%);
|
|
24
|
+
--muted-foreground: hsl(218 7% 59%);
|
|
25
|
+
--accent: hsl(220 14% 96%);
|
|
26
|
+
--accent-foreground: hsl(220 14% 14%);
|
|
27
|
+
--info: hsl(221 83% 53%);
|
|
28
|
+
--info-foreground: hsl(230 100% 98%);
|
|
29
|
+
--destructive: hsl(2 84% 62%);
|
|
30
|
+
--destructive-foreground: hsl(0 0% 100%);
|
|
31
|
+
--success: hsl(130 54% 42%);
|
|
32
|
+
--success-foreground: hsl(115 77% 97%);
|
|
33
|
+
--warning: hsl(26 90% 49%);
|
|
34
|
+
--warning-foreground: hsl(33 100% 96%);
|
|
35
|
+
--border: hsl(220 14% 89%);
|
|
36
|
+
--input: hsl(220 14% 89%);
|
|
37
|
+
--ring: hsl(221 83% 53%);
|
|
38
|
+
--chart-1: hsl(222 82% 56%);
|
|
39
|
+
--chart-2: hsl(174 77% 46%);
|
|
40
|
+
--chart-3: hsl(46 100% 52%);
|
|
41
|
+
--chart-4: hsl(27 92% 49%);
|
|
42
|
+
--chart-5: hsl(292 54% 76%);
|
|
43
|
+
--sidebar: hsl(220 14% 96%);
|
|
44
|
+
--sidebar-foreground: hsl(220 14% 14%);
|
|
45
|
+
--sidebar-primary: hsl(221 83% 53%);
|
|
46
|
+
--sidebar-primary-foreground: hsl(220 14% 98%);
|
|
47
|
+
--sidebar-accent: hsl(222 100% 94%);
|
|
48
|
+
--sidebar-accent-foreground: hsl(221 83% 53%);
|
|
49
|
+
--sidebar-border: hsl(220 14% 89%);
|
|
50
|
+
--sidebar-ring: hsl(221 83% 53%);
|
|
51
|
+
|
|
52
|
+
--primary-border: hsl(from hsl(221 83% 53%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
53
|
+
--secondary-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
54
|
+
--destructive-border: hsl(from hsl(2 84% 62%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
55
|
+
--accent-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
56
|
+
--muted-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
|
|
57
|
+
|
|
58
|
+
--font-sans:
|
|
59
|
+
-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, 'PingFang SC',
|
|
60
|
+
'Microsoft Yahei', Arial, 'Hiragino Sans GB', sans-serif,
|
|
61
|
+
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
62
|
+
--font-mono: Source Code Pro, monospace;
|
|
63
|
+
--radius: 0.5rem;
|
|
64
|
+
--spacing: 0.25rem;
|
|
65
|
+
|
|
66
|
+
--shadow-2xs: 0px 2px 12px 0px hsl(0 0% 0% / 0.01);
|
|
67
|
+
--shadow-xs: 0px 2px 12px 0px hsl(0 0% 0% / 0.01);
|
|
68
|
+
--shadow-sm: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
|
|
69
|
+
--shadow: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
|
|
70
|
+
--shadow-md: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 2px 4px -1px hsl(0 0% 0% / 0.02);
|
|
71
|
+
--shadow-lg: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 4px 6px -1px hsl(0 0% 0% / 0.02);
|
|
72
|
+
--shadow-xl: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 8px 10px -1px hsl(0 0% 0% / 0.02);
|
|
73
|
+
--shadow-2xl: 0px 2px 12px 0px hsl(0 0% 0% / 0.05);
|
|
74
|
+
--tracking-normal: 0em;
|
|
75
|
+
}
|