@uselets/ui 1.0.0 → 1.1.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.
Files changed (20) hide show
  1. package/README.md +16 -8
  2. package/dist/cli/uselets.mjs +2 -2
  3. package/dist/cli/uselets.mjs.map +1 -1
  4. package/dist/components/card.js +1 -1
  5. package/dist/components/card.js.map +1 -1
  6. package/dist/skills/uselets-ui/SKILL.md +2 -3
  7. package/dist/skills/uselets-ui/references/package-guide.md +8 -9
  8. package/dist/skills/uselets-ui/scripts/print-public-api.mjs +0 -1
  9. package/dist/styles/base.css +13 -0
  10. package/dist/styles/globals.css +8 -0
  11. package/dist/styles/gomax.css +202 -0
  12. package/dist/styles/max.css +203 -0
  13. package/dist/styles/theme.css +195 -0
  14. package/dist/themes/gomax.css +3 -2
  15. package/dist/themes/max.css +3 -2
  16. package/package.json +1 -2
  17. package/skills/uselets-ui/SKILL.md +2 -3
  18. package/skills/uselets-ui/references/package-guide.md +8 -9
  19. package/skills/uselets-ui/scripts/print-public-api.mjs +0 -1
  20. package/dist/styles.css +0 -2
package/dist/styles/max.css ADDED
@@ -0,0 +1,203 @@
1
+ :root {
2
+ /* palette tokens */
3
+ --primary-50: oklch(0.969 0.015 17.418); /* #FFF1F1 */
4
+ --primary-100: oklch(0.932 0.034 17.784); /* #FFE0E0 */
5
+ --primary-200: oklch(0.857 0.078 17.808); /* #FFBCBD */
6
+ --primary-300: oklch(0.759 0.144 17.923); /* #FF888E */
7
+ --primary-400: oklch(0.678 0.201 19.93); /* #FB5562 */
8
+ --primary-500: oklch(0.644 0.226 23.049); /* #F93846 */
9
+ --primary-600: oklch(0.576 0.226 25.087); /* #E01429 */
10
+ --primary-700: oklch(0.507 0.2 24.989); /* #BD0E21 */
11
+ --primary-800: oklch(0.439 0.169 24.647); /* #9A0F1C */
12
+ --primary-900: oklch(0.381 0.142 23.935); /* #7D1019 */
13
+ --primary-950: oklch(0.248 0.092 23.922); /* #430509 */
14
+
15
+ --brand-50: oklch(0.973 0.011 39.44); /* #FDF4F1 */
16
+ --brand-100: oklch(0.93 0.033 38.63); /* #FDE1D8 */
17
+ --brand-200: oklch(0.864 0.072 39.865); /* #FDC3AF */
18
+ --brand-300: oklch(0.794 0.121 39); /* #FEA081 */
19
+ --brand-400: oklch(0.739 0.164 38.91); /* #FF8157 */
20
+ --brand-500: oklch(0.686 0.205 34.607); /* #FF5C35 */
21
+ --brand-600: oklch(0.637 0.213 35.811); /* #F0470F */
22
+ --brand-700: oklch(0.537 0.172 36.579); /* #BC3B10 */
23
+ --brand-800: oklch(0.423 0.128 37.154); /* #852C0F */
24
+ --brand-900: oklch(0.309 0.087 38.386); /* #531C09 */
25
+ --brand-950: oklch(0.216 0.051 40.042); /* #2D1006 */
26
+
27
+ --gray-50: oklch(1 0 0); /* #FFFFFF */
28
+ --gray-100: oklch(0.981 0.005 247.876); /* #F6F9FC */
29
+ --gray-200: oklch(0.952 0.01 247.935); /* #EAF0F6 */
30
+ --gray-300: oklch(0.915 0.016 247.999); /* #DBE4ED */
31
+ --gray-400: oklch(0.821 0.028 244.747); /* #B6C7D6 */
32
+ --gray-500: oklch(0.744 0.039 247.107); /* #99AFC4 */
33
+ --gray-600: oklch(0.646 0.052 249.575); /* #7691AD */
34
+ --gray-700: oklch(0.532 0.063 251.386); /* #516F90 */
35
+ --gray-800: oklch(0.454 0.055 249.121); /* #3E5974 */
36
+ --gray-900: oklch(0.313 0.037 246.164); /* #213343 */
37
+ --gray-950: oklch(0.266 0.03 245.1); /* #192733 */
38
+
39
+ --zinc-50: oklch(1 0 0); /* #FFFFFF */
40
+ --zinc-100: oklch(0.979 0 0); /* #F8F8F8 */
41
+ --zinc-200: oklch(0.952 0 0); /* #EFEFEF */
42
+ --zinc-300: oklch(0.885 0 0); /* #D9D9D9 */
43
+ --zinc-400: oklch(0.798 0 0); /* #BDBDBD */
44
+ --zinc-500: oklch(0.68 0 0); /* #989898 */
45
+ --zinc-600: oklch(0.586 0 0); /* #7C7C7C */
46
+ --zinc-700: oklch(0.507 0 0); /* #656565 */
47
+ --zinc-800: oklch(0.394 0 0); /* #464646 */
48
+ --zinc-900: oklch(0.305 0.002 106.504); /* #2F2F2E */
49
+ --zinc-950: oklch(0.207 0.004 48.535); /* #191716 */
50
+
51
+ --red-50: oklch(0.974 0.004 359.996); /* #F9F5F6 */
52
+ --red-100: oklch(0.928 0.016 12.798); /* #F2E3E4 */
53
+ --red-200: oklch(0.84 0.05 11.897); /* #E9BEC2 */
54
+ --red-300: oklch(0.741 0.105 13.147); /* #E58F98 */
55
+ --red-400: oklch(0.647 0.181 17.734); /* #E75564 */
56
+ --red-500: oklch(0.585 0.218 23.835); /* #E02535 */
57
+ --red-600: oklch(0.524 0.189 22.069); /* #BF2434 */
58
+ --red-700: oklch(0.45 0.161 21.978); /* #9B1C29 */
59
+ --red-800: oklch(0.368 0.128 20.619); /* #741520 */
60
+ --red-900: oklch(0.284 0.093 19.546); /* #4E0F16 */
61
+ --red-950: oklch(0.207 0.058 20.395); /* #2D0A0C */
62
+
63
+ --yellow-50: oklch(0.988 0.014 88.681); /* #FFFBF1 */
64
+ --yellow-100: oklch(0.974 0.029 89.569); /* #FEF6E1 */
65
+ --yellow-200: oklch(0.944 0.059 84.511); /* #FFEAC0 */
66
+ --yellow-300: oklch(0.885 0.104 78.009); /* #FFD189 */
67
+ --yellow-400: oklch(0.827 0.142 71.92); /* #FFB652 */
68
+ --yellow-500: oklch(0.798 0.158 67.669); /* #FFA736 */
69
+ --yellow-600: oklch(0.709 0.171 55.903); /* #EF7F0A */
70
+ --yellow-700: oklch(0.564 0.138 53.071); /* #B25A0E */
71
+ --yellow-800: oklch(0.433 0.1 52.359); /* #7A3E11 */
72
+ --yellow-900: oklch(0.324 0.069 50.591); /* #4F280F */
73
+ --yellow-950: oklch(0.249 0.046 47.281); /* #331A0D */
74
+
75
+ --green-50: oklch(0.98 0.003 145.55); /* #F7F9F7 */
76
+ --green-100: oklch(0.957 0.012 145.482); /* #ECF3EC */
77
+ --green-200: oklch(0.912 0.032 143.849); /* #D6E8D5 */
78
+ --green-300: oklch(0.838 0.073 143.695); /* #AED7AC */
79
+ --green-400: oklch(0.767 0.12 142.694); /* #85C780 */
80
+ --green-500: oklch(0.675 0.165 142.096); /* #52AF4A */
81
+ --green-600: oklch(0.567 0.13 141.644); /* #45893D */
82
+ --green-700: oklch(0.467 0.097 140.77); /* #396731 */
83
+ --green-800: oklch(0.366 0.066 140.101); /* #2B4725 */
84
+ --green-900: oklch(0.281 0.041 139.471); /* #1E2E1A */
85
+ --green-950: oklch(0.222 0.026 138.012); /* #151E12 */
86
+
87
+ --blue-50: oklch(0.976 0.002 247.839); /* #F6F7F8 */
88
+ --blue-100: oklch(0.948 0.006 255.476); /* #EBEEF2 */
89
+ --blue-200: oklch(0.891 0.018 240.018); /* #D1DDE6 */
90
+ --blue-300: oklch(0.8 0.044 240.87); /* #A5C2D8 */
91
+ --blue-400: oklch(0.715 0.077 240.176); /* #76AACF */
92
+ --blue-500: oklch(0.622 0.113 242.424); /* #408EC5 */
93
+ --blue-600: oklch(0.538 0.097 239.26); /* #2F75A0 */
94
+ --blue-700: oklch(0.452 0.072 234.642); /* #275C78 */
95
+ --blue-800: oklch(0.363 0.05 228.7); /* #1E4353 */
96
+ --blue-900: oklch(0.282 0.032 222.574); /* #162D35 */
97
+ --blue-950: oklch(0.224 0.021 217.756); /* #101E22 */
98
+
99
+ --indigo-50: oklch(0.969 0.009 286.225); /* #F4F4FB */
100
+ --indigo-100: oklch(0.924 0.026 283.478); /* #E3E4F7 */
101
+ --indigo-200: oklch(0.845 0.057 282.903); /* #C6C8F1 */
102
+ --indigo-300: oklch(0.737 0.105 281.065); /* #9EA2EB */
103
+ --indigo-400: oklch(0.624 0.155 278.421); /* #747AE2 */
104
+ --indigo-500: oklch(0.532 0.184 276.037); /* #545AD4 */
105
+ --indigo-600: oklch(0.46 0.163 275.857); /* #4348B0 */
106
+ --indigo-700: oklch(0.383 0.14 275.071); /* #31368C */
107
+ --indigo-800: oklch(0.3 0.109 275.563); /* #212463 */
108
+ --indigo-900: oklch(0.225 0.073 276.527); /* #14163D */
109
+ --indigo-950: oklch(0.172 0.043 278.782); /* #0C0D22 */
110
+
111
+ --pink-50: oklch(0.893 0.047 335.372);
112
+ --pink-100: oklch(0.839 0.076 336.368);
113
+ --pink-200: oklch(0.732 0.133 338.361);
114
+ --pink-300: oklch(0.624 0.191 340.354);
115
+ --pink-400: oklch(0.581 0.205 342.54);
116
+ --pink-500: oklch(0.538 0.22 344.727);
117
+ --pink-600: oklch(0.478 0.195 344.211);
118
+ --pink-700: oklch(0.418 0.17 343.696);
119
+ --pink-800: oklch(0.358 0.144 343.18);
120
+ --pink-900: oklch(0.298 0.119 342.664);
121
+ --pink-950: oklch(0.268 0.106 342.406);
122
+
123
+ /* gradient tokens */
124
+ --gradient-primary: linear-gradient(
125
+ 87.14044870021029deg,
126
+ oklch(0.644 0.226 23.049) 0%,
127
+ oklch(0.686 0.205 34.607) 50%,
128
+ oklch(0.71 0.167 13.3) 100%
129
+ );
130
+
131
+ /* semantic tokens */
132
+ --background: var(--zinc-50);
133
+ --foreground: var(--zinc-950);
134
+ --card: var(--zinc-50);
135
+ --card-foreground: var(--zinc-950);
136
+ --popover: var(--zinc-50);
137
+ --popover-foreground: var(--zinc-950);
138
+ --primary: var(--primary-500);
139
+ --primary-foreground: var(--zinc-50);
140
+ --brand: var(--brand-500);
141
+ --brand-foreground: var(--zinc-50);
142
+ --secondary: var(--zinc-100);
143
+ --secondary-foreground: var(--zinc-900);
144
+ --muted: var(--zinc-100);
145
+ --muted-foreground: var(--zinc-600);
146
+ --accent: var(--zinc-200);
147
+ --accent-foreground: var(--zinc-950);
148
+ --destructive: var(--red-500);
149
+ --destructive-foreground: var(--zinc-50);
150
+ --border: var(--zinc-200);
151
+ --input: var(--zinc-200);
152
+ --ring: var(--primary-300);
153
+ --chart-1: var(--primary-500);
154
+ --chart-2: var(--green-500);
155
+ --chart-3: var(--blue-500);
156
+ --chart-4: var(--indigo-500);
157
+ --chart-5: var(--pink-500);
158
+ --sidebar: var(--zinc-100);
159
+ --sidebar-foreground: var(--zinc-950);
160
+ --sidebar-primary: var(--primary-500);
161
+ --sidebar-primary-foreground: var(--zinc-50);
162
+ --sidebar-accent: var(--zinc-200);
163
+ --sidebar-accent-foreground: var(--zinc-900);
164
+ --sidebar-border: var(--zinc-200);
165
+ --sidebar-ring: var(--primary-300);
166
+ }
167
+
168
+ .dark {
169
+ --background: var(--zinc-950);
170
+ --foreground: var(--zinc-50);
171
+ --card: var(--zinc-900);
172
+ --card-foreground: var(--zinc-50);
173
+ --popover: var(--zinc-900);
174
+ --popover-foreground: var(--zinc-50);
175
+ --primary: var(--primary-400);
176
+ --primary-foreground: var(--zinc-50);
177
+ --brand: var(--brand-400);
178
+ --brand-foreground: var(--zinc-50);
179
+ --secondary: var(--zinc-800);
180
+ --secondary-foreground: var(--zinc-50);
181
+ --muted: var(--zinc-800);
182
+ --muted-foreground: var(--zinc-300);
183
+ --accent: var(--zinc-800);
184
+ --accent-foreground: var(--zinc-50);
185
+ --destructive: var(--red-400);
186
+ --destructive-foreground: var(--zinc-950);
187
+ --border: var(--zinc-800);
188
+ --input: var(--zinc-700);
189
+ --ring: var(--primary-400);
190
+ --chart-1: var(--primary-400);
191
+ --chart-2: var(--green-400);
192
+ --chart-3: var(--blue-400);
193
+ --chart-4: var(--indigo-400);
194
+ --chart-5: var(--pink-300);
195
+ --sidebar: var(--zinc-900);
196
+ --sidebar-foreground: var(--zinc-50);
197
+ --sidebar-primary: var(--primary-400);
198
+ --sidebar-primary-foreground: var(--zinc-50);
199
+ --sidebar-accent: var(--zinc-800);
200
+ --sidebar-accent-foreground: var(--zinc-50);
201
+ --sidebar-border: var(--zinc-800);
202
+ --sidebar-ring: var(--primary-400);
203
+ }
package/dist/styles/theme.css ADDED
@@ -0,0 +1,195 @@
1
+ @import "tw-animate-css";
2
+ @import "shadcn/tailwind.css";
3
+
4
+ @custom-variant dark (&:is(.dark *));
5
+
6
+ :root {
7
+ --radius: 0.875rem;
8
+ }
9
+
10
+ @theme inline {
11
+ --font-sans: "Inter Variable", sans-serif;
12
+ --text-xs: 0.75rem;
13
+ --text-xs--line-height: 1.125rem;
14
+ --text-sm: 0.875rem;
15
+ --text-sm--line-height: 1.3125rem;
16
+ --text-base: 1rem;
17
+ --text-base--line-height: 1.5rem;
18
+ --text-lg: 1.125rem;
19
+ --text-lg--line-height: 1.6875rem;
20
+ --text-xl: 1.25rem;
21
+ --text-xl--line-height: 1.875rem;
22
+ --text-2xl: 1.5rem;
23
+ --text-2xl--line-height: 2.25rem;
24
+ --text-3xl: 1.875rem;
25
+ --text-3xl--line-height: 2.8125rem;
26
+ --text-4xl: 2.25rem;
27
+ --text-4xl--line-height: 3.375rem;
28
+ --text-5xl: 3rem;
29
+ --text-5xl--line-height: 4.5rem;
30
+ --text-6xl: 3.75rem;
31
+ --text-6xl--line-height: 5.625rem;
32
+
33
+ --color-primary-50: var(--primary-50);
34
+ --color-primary-100: var(--primary-100);
35
+ --color-primary-200: var(--primary-200);
36
+ --color-primary-300: var(--primary-300);
37
+ --color-primary-400: var(--primary-400);
38
+ --color-primary-500: var(--primary-500);
39
+ --color-primary-600: var(--primary-600);
40
+ --color-primary-700: var(--primary-700);
41
+ --color-primary-800: var(--primary-800);
42
+ --color-primary-900: var(--primary-900);
43
+ --color-primary-950: var(--primary-950);
44
+
45
+ --color-brand-50: var(--brand-50);
46
+ --color-brand-100: var(--brand-100);
47
+ --color-brand-200: var(--brand-200);
48
+ --color-brand-300: var(--brand-300);
49
+ --color-brand-400: var(--brand-400);
50
+ --color-brand-500: var(--brand-500);
51
+ --color-brand-600: var(--brand-600);
52
+ --color-brand-700: var(--brand-700);
53
+ --color-brand-800: var(--brand-800);
54
+ --color-brand-900: var(--brand-900);
55
+ --color-brand-950: var(--brand-950);
56
+
57
+ --color-gray-50: var(--gray-50);
58
+ --color-gray-100: var(--gray-100);
59
+ --color-gray-200: var(--gray-200);
60
+ --color-gray-300: var(--gray-300);
61
+ --color-gray-400: var(--gray-400);
62
+ --color-gray-500: var(--gray-500);
63
+ --color-gray-600: var(--gray-600);
64
+ --color-gray-700: var(--gray-700);
65
+ --color-gray-800: var(--gray-800);
66
+ --color-gray-900: var(--gray-900);
67
+ --color-gray-950: var(--gray-950);
68
+
69
+ --color-zinc-50: var(--zinc-50);
70
+ --color-zinc-100: var(--zinc-100);
71
+ --color-zinc-200: var(--zinc-200);
72
+ --color-zinc-300: var(--zinc-300);
73
+ --color-zinc-400: var(--zinc-400);
74
+ --color-zinc-500: var(--zinc-500);
75
+ --color-zinc-600: var(--zinc-600);
76
+ --color-zinc-700: var(--zinc-700);
77
+ --color-zinc-800: var(--zinc-800);
78
+ --color-zinc-900: var(--zinc-900);
79
+ --color-zinc-950: var(--zinc-950);
80
+
81
+ --color-blue-50: var(--blue-50);
82
+ --color-blue-100: var(--blue-100);
83
+ --color-blue-200: var(--blue-200);
84
+ --color-blue-300: var(--blue-300);
85
+ --color-blue-400: var(--blue-400);
86
+ --color-blue-500: var(--blue-500);
87
+ --color-blue-600: var(--blue-600);
88
+ --color-blue-700: var(--blue-700);
89
+ --color-blue-800: var(--blue-800);
90
+ --color-blue-900: var(--blue-900);
91
+ --color-blue-950: var(--blue-950);
92
+
93
+ --color-indigo-50: var(--indigo-50);
94
+ --color-indigo-100: var(--indigo-100);
95
+ --color-indigo-200: var(--indigo-200);
96
+ --color-indigo-300: var(--indigo-300);
97
+ --color-indigo-400: var(--indigo-400);
98
+ --color-indigo-500: var(--indigo-500);
99
+ --color-indigo-600: var(--indigo-600);
100
+ --color-indigo-700: var(--indigo-700);
101
+ --color-indigo-800: var(--indigo-800);
102
+ --color-indigo-900: var(--indigo-900);
103
+ --color-indigo-950: var(--indigo-950);
104
+
105
+ --color-pink-50: var(--pink-50);
106
+ --color-pink-100: var(--pink-100);
107
+ --color-pink-200: var(--pink-200);
108
+ --color-pink-300: var(--pink-300);
109
+ --color-pink-400: var(--pink-400);
110
+ --color-pink-500: var(--pink-500);
111
+ --color-pink-600: var(--pink-600);
112
+ --color-pink-700: var(--pink-700);
113
+ --color-pink-800: var(--pink-800);
114
+ --color-pink-900: var(--pink-900);
115
+ --color-pink-950: var(--pink-950);
116
+
117
+ --color-red-50: var(--red-50);
118
+ --color-red-100: var(--red-100);
119
+ --color-red-200: var(--red-200);
120
+ --color-red-300: var(--red-300);
121
+ --color-red-400: var(--red-400);
122
+ --color-red-500: var(--red-500);
123
+ --color-red-600: var(--red-600);
124
+ --color-red-700: var(--red-700);
125
+ --color-red-800: var(--red-800);
126
+ --color-red-900: var(--red-900);
127
+ --color-red-950: var(--red-950);
128
+
129
+ --color-yellow-50: var(--yellow-50);
130
+ --color-yellow-100: var(--yellow-100);
131
+ --color-yellow-200: var(--yellow-200);
132
+ --color-yellow-300: var(--yellow-300);
133
+ --color-yellow-400: var(--yellow-400);
134
+ --color-yellow-500: var(--yellow-500);
135
+ --color-yellow-600: var(--yellow-600);
136
+ --color-yellow-700: var(--yellow-700);
137
+ --color-yellow-800: var(--yellow-800);
138
+ --color-yellow-900: var(--yellow-900);
139
+ --color-yellow-950: var(--yellow-950);
140
+
141
+ --color-green-50: var(--green-50);
142
+ --color-green-100: var(--green-100);
143
+ --color-green-200: var(--green-200);
144
+ --color-green-300: var(--green-300);
145
+ --color-green-400: var(--green-400);
146
+ --color-green-500: var(--green-500);
147
+ --color-green-600: var(--green-600);
148
+ --color-green-700: var(--green-700);
149
+ --color-green-800: var(--green-800);
150
+ --color-green-900: var(--green-900);
151
+ --color-green-950: var(--green-950);
152
+
153
+ --color-sidebar-ring: var(--sidebar-ring);
154
+ --color-sidebar-border: var(--sidebar-border);
155
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
156
+ --color-sidebar-accent: var(--sidebar-accent);
157
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
158
+ --color-sidebar-primary: var(--sidebar-primary);
159
+ --color-sidebar-foreground: var(--sidebar-foreground);
160
+ --color-sidebar: var(--sidebar);
161
+ --color-chart-5: var(--chart-5);
162
+ --color-chart-4: var(--chart-4);
163
+ --color-chart-3: var(--chart-3);
164
+ --color-chart-2: var(--chart-2);
165
+ --color-chart-1: var(--chart-1);
166
+ --color-ring: var(--ring);
167
+ --color-input: var(--input);
168
+ --color-border: var(--border);
169
+ --color-destructive-foreground: var(--destructive-foreground);
170
+ --color-destructive: var(--destructive);
171
+ --color-accent-foreground: var(--accent-foreground);
172
+ --color-accent: var(--accent);
173
+ --color-muted-foreground: var(--muted-foreground);
174
+ --color-muted: var(--muted);
175
+ --color-secondary-foreground: var(--secondary-foreground);
176
+ --color-secondary: var(--secondary);
177
+ --color-primary-foreground: var(--primary-foreground);
178
+ --color-primary: var(--primary);
179
+ --color-brand-foreground: var(--brand-foreground);
180
+ --color-brand: var(--brand);
181
+ --color-popover-foreground: var(--popover-foreground);
182
+ --color-popover: var(--popover);
183
+ --color-card-foreground: var(--card-foreground);
184
+ --color-card: var(--card);
185
+ --color-foreground: var(--foreground);
186
+ --color-background: var(--background);
187
+ --radius-xs: calc(var(--radius) - 4px);
188
+ --radius-sm: calc(var(--radius) - 2px);
189
+ --radius-md: var(--radius);
190
+ --radius-lg: calc(var(--radius) + 2px);
191
+ --radius-xl: calc(var(--radius) + 4px);
192
+ --radius-2xl: calc(var(--radius) + 8px);
193
+ --radius-3xl: calc(var(--radius) + 12px);
194
+ --radius-4xl: calc(var(--radius) + 16px);
195
+ }