@cryptlex/web-components 2.0.0 → 2.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/lib/tailwind.base.css +52 -0
- package/lib/tailwind.theme.css +238 -0
- package/package.json +3 -2
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
* {
|
|
3
|
+
@apply border-border outline-ring/50;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
a {
|
|
7
|
+
@apply link;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
h1 {
|
|
11
|
+
@apply h1;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
h2 {
|
|
15
|
+
@apply h2;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
h3 {
|
|
19
|
+
@apply h3;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
h4 {
|
|
23
|
+
@apply h4;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
h5 {
|
|
27
|
+
@apply h5;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h6 {
|
|
31
|
+
@apply h6;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
body {
|
|
35
|
+
@apply bg-background text-foreground;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
*::-webkit-scrollbar {
|
|
39
|
+
width: 6px;
|
|
40
|
+
height: 6px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
*::-webkit-scrollbar-track {
|
|
44
|
+
background: white;
|
|
45
|
+
border-radius: 2px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
*::-webkit-scrollbar-thumb {
|
|
49
|
+
background-color: gray;
|
|
50
|
+
border: 3px solid gray;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
/** https://tailwindcss.com/docs/theme#theme-variable-namespaces */
|
|
2
|
+
|
|
3
|
+
@plugin "tailwindcss-animate";
|
|
4
|
+
|
|
5
|
+
@theme static {
|
|
6
|
+
/* Radius */
|
|
7
|
+
--radius: 0.25rem;
|
|
8
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
9
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
10
|
+
--radius-lg: var(--radius);
|
|
11
|
+
|
|
12
|
+
/* Text Sizes */
|
|
13
|
+
--text-*: initial;
|
|
14
|
+
--text-xs: 0.75rem;
|
|
15
|
+
--text-xs--line-height: calc(1 / 0.75);
|
|
16
|
+
--text-sm: 0.875rem;
|
|
17
|
+
--text-sm--line-height: calc(1.25 / 0.875);
|
|
18
|
+
--text-base: 1rem;
|
|
19
|
+
--text-base--line-height: calc(1.5 / 1);
|
|
20
|
+
--text-lg: 1.125rem;
|
|
21
|
+
--text-lg--line-height: calc(1.75 / 1.125);
|
|
22
|
+
--text-xl: 1.25rem;
|
|
23
|
+
--text-xl--line-height: calc(1.75 / 1.25);
|
|
24
|
+
--text-2xl: 1.5rem;
|
|
25
|
+
--text-2xl--line-height: calc(2 / 1.5);
|
|
26
|
+
--text-3xl: 1.875rem;
|
|
27
|
+
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
28
|
+
--text-4xl: 2.25rem;
|
|
29
|
+
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
30
|
+
|
|
31
|
+
/* Colors */
|
|
32
|
+
--color-*: initial;
|
|
33
|
+
--color-primary-1: var(--primary-1);
|
|
34
|
+
--color-primary-2: var(--primary-2);
|
|
35
|
+
--color-primary-3: var(--primary-3);
|
|
36
|
+
--color-primary-4: var(--primary-4);
|
|
37
|
+
--color-primary-5: var(--primary-5);
|
|
38
|
+
--color-primary-6: var(--primary-6);
|
|
39
|
+
--color-primary-7: var(--primary-7);
|
|
40
|
+
--color-primary-8: var(--primary-8);
|
|
41
|
+
--color-primary-9: var(--primary-9);
|
|
42
|
+
--color-primary-10: var(--primary-10);
|
|
43
|
+
|
|
44
|
+
--color-secondary-1: var(--secondary-1);
|
|
45
|
+
--color-secondary-2: var(--secondary-2);
|
|
46
|
+
--color-secondary-3: var(--secondary-3);
|
|
47
|
+
--color-secondary-4: var(--secondary-4);
|
|
48
|
+
--color-secondary-5: var(--secondary-5);
|
|
49
|
+
--color-secondary-6: var(--secondary-6);
|
|
50
|
+
--color-secondary-7: var(--secondary-7);
|
|
51
|
+
--color-secondary-8: var(--secondary-8);
|
|
52
|
+
--color-secondary-9: var(--secondary-9);
|
|
53
|
+
--color-secondary-10: var(--secondary-10);
|
|
54
|
+
|
|
55
|
+
--color-neutral-1: var(--neutral-1);
|
|
56
|
+
--color-neutral-2: var(--neutral-2);
|
|
57
|
+
--color-neutral-3: var(--neutral-3);
|
|
58
|
+
--color-neutral-4: var(--neutral-4);
|
|
59
|
+
--color-neutral-5: var(--neutral-5);
|
|
60
|
+
--color-neutral-6: var(--neutral-6);
|
|
61
|
+
--color-neutral-7: var(--neutral-7);
|
|
62
|
+
--color-neutral-8: var(--neutral-8);
|
|
63
|
+
--color-neutral-9: var(--neutral-9);
|
|
64
|
+
--color-neutral-10: var(--neutral-10);
|
|
65
|
+
|
|
66
|
+
--color-destructive-1: var(--destructive-1);
|
|
67
|
+
--color-destructive-2: var(--destructive-2);
|
|
68
|
+
--color-destructive-3: var(--destructive-3);
|
|
69
|
+
--color-destructive-4: var(--destructive-4);
|
|
70
|
+
--color-destructive-5: var(--destructive-5);
|
|
71
|
+
--color-destructive-6: var(--destructive-6);
|
|
72
|
+
--color-destructive-7: var(--destructive-7);
|
|
73
|
+
--color-destructive-8: var(--destructive-8);
|
|
74
|
+
--color-destructive-9: var(--destructive-9);
|
|
75
|
+
--color-destructive-10: var(--destructive-10);
|
|
76
|
+
|
|
77
|
+
--color-success-1: var(--success-1);
|
|
78
|
+
--color-success-2: var(--success-2);
|
|
79
|
+
--color-success-3: var(--success-3);
|
|
80
|
+
--color-success-4: var(--success-4);
|
|
81
|
+
--color-success-5: var(--success-5);
|
|
82
|
+
--color-success-6: var(--success-6);
|
|
83
|
+
--color-success-7: var(--success-7);
|
|
84
|
+
--color-success-8: var(--success-8);
|
|
85
|
+
--color-success-9: var(--success-9);
|
|
86
|
+
--color-success-10: var(--success-10);
|
|
87
|
+
|
|
88
|
+
--color-background: var(--color-neutral-2);
|
|
89
|
+
--color-foreground: var(--color-neutral-8);
|
|
90
|
+
|
|
91
|
+
--color-card: var(--color-neutral-1);
|
|
92
|
+
--color-card-foreground: var(--color-foreground);
|
|
93
|
+
/* Assuming popovers only show up over cards ??? */
|
|
94
|
+
--color-popover: var(--color-background);
|
|
95
|
+
--color-popover-foreground: var(--color-foreground);
|
|
96
|
+
|
|
97
|
+
--color-primary: var(--color-primary-7);
|
|
98
|
+
--color-primary-foreground: var(--color-primary-2);
|
|
99
|
+
--color-secondary: var(--color-secondary-7);
|
|
100
|
+
--color-secondary-foreground: var(--color-secondary-2);
|
|
101
|
+
--color-muted: var(--color-neutral-7);
|
|
102
|
+
--color-muted-foreground: var(--color-neutral-4);
|
|
103
|
+
--color-accent: var(--color-neutral-7);
|
|
104
|
+
--color-accent-foreground: var(--color-neutral-4);
|
|
105
|
+
--color-destructive: var(--color-destructive-7);
|
|
106
|
+
--color-destructive-foreground: var(--color-destructive-2);
|
|
107
|
+
--color-success: var(--color-success-7);
|
|
108
|
+
--color-success-foreground: var(--color-success-2);
|
|
109
|
+
|
|
110
|
+
--color-border: var(--color-neutral-3);
|
|
111
|
+
--color-input: var(--color-border);
|
|
112
|
+
--color-ring: var(--color-neutral-5);
|
|
113
|
+
|
|
114
|
+
--color-chart-1: var(--color-primary-5);
|
|
115
|
+
--color-chart-2: var(--color-primary-4);
|
|
116
|
+
--color-chart-3: var(--color-secondary-5);
|
|
117
|
+
--color-chart-4: var(--color-secondary-4);
|
|
118
|
+
--color-chart-5: var(--color-secondary-2);
|
|
119
|
+
|
|
120
|
+
--color-sidebar-background: var(--color-background);
|
|
121
|
+
--color-sidebar-foreground: var(--color-foreground);
|
|
122
|
+
|
|
123
|
+
/* // TODO */
|
|
124
|
+
--color-sidebar-primary: 240 5.9% 10%;
|
|
125
|
+
--color-sidebar-primary-foreground: 0 0% 98%;
|
|
126
|
+
|
|
127
|
+
--color-sidebar-accent: 240 4.8% 95.9%;
|
|
128
|
+
--color-sidebar-accent-foreground: 240 5.9% 10%;
|
|
129
|
+
|
|
130
|
+
--color-sidebar-border: var(--color-border);
|
|
131
|
+
--color-sidebar-ring: var(--color-ring);
|
|
132
|
+
|
|
133
|
+
/* Minimum length for fluid grid containers */
|
|
134
|
+
--fluid-grid-min: var(--container-3xs);
|
|
135
|
+
|
|
136
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
137
|
+
|
|
138
|
+
@keyframes accordion-down {
|
|
139
|
+
from {
|
|
140
|
+
height: 0;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
to {
|
|
144
|
+
height: var(--radix-accordion-content-height);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
149
|
+
|
|
150
|
+
@keyframes accordion-up {
|
|
151
|
+
from {
|
|
152
|
+
height: var(--radix-accordion-content-height);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
to {
|
|
156
|
+
height: 0;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
--animate-collapsible-down: collapsible-down 0.2s ease-out;
|
|
161
|
+
|
|
162
|
+
@keyframes collapsible-down {
|
|
163
|
+
from {
|
|
164
|
+
height: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
to {
|
|
168
|
+
height: var(--radix-collapsible-content-height);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
--animate-collapsible-up: collapsible-up 0.2s ease-out;
|
|
173
|
+
|
|
174
|
+
@keyframes collapsible-up {
|
|
175
|
+
from {
|
|
176
|
+
height: var(--radix-collapsible-content-height);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
to {
|
|
180
|
+
height: 0;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@utility link {
|
|
186
|
+
@apply text-primary underline hover:underline-offset-2 hover:text-primary/70;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
@utility caption {
|
|
190
|
+
@apply text-xs font-medium;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@utility body {
|
|
194
|
+
@apply text-sm;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
@utility h6 {
|
|
198
|
+
@apply text-base font-bold;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@utility h5 {
|
|
202
|
+
@apply text-lg font-semibold;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
@utility h4 {
|
|
206
|
+
@apply text-xl font-medium;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
@utility h3 {
|
|
210
|
+
@apply text-2xl font-normal;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
@utility h2 {
|
|
214
|
+
@apply text-3xl font-light;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
@utility h1 {
|
|
218
|
+
@apply text-4xl font-extralight;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* Standard height for inputs ~32px */
|
|
222
|
+
@utility h-input {
|
|
223
|
+
@apply h-8;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/* Standard size for icons */
|
|
227
|
+
@utility size-icon {
|
|
228
|
+
@apply size-4;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* Fluid grid with minimum width */
|
|
232
|
+
@utility grid-fluid {
|
|
233
|
+
@apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-4;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
@utility input {
|
|
237
|
+
@apply w-full rounded-md border border-input bg-background px-3 py-2 body placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
|
|
238
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cryptlex/web-components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "React component library for Cryptlex web applications",
|
|
5
5
|
"author": "Cryptlex",
|
|
6
6
|
"type": "module",
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
|
21
21
|
"dist",
|
|
22
|
-
"lib/tailwind.
|
|
22
|
+
"lib/tailwind.theme.css",
|
|
23
|
+
"lib/tailwind.base.css",
|
|
23
24
|
"lib/tokens.css",
|
|
24
25
|
"lib/index.css"
|
|
25
26
|
],
|