@lessly/ui 0.4.0 → 0.5.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 (7) hide show
  1. package/README.md +29 -12
  2. package/dist/index.d.ts +76 -2
  3. package/dist/index.js +223 -33
  4. package/dist/styles.css +690 -102
  5. package/dist/tailwind-preset.d.ts +4 -393
  6. package/dist/tailwind-preset.js +4 -424
  7. package/package.json +9 -2
package/dist/tailwind-preset.js CHANGED
@@ -1,430 +1,10 @@
1
1
  // src/tailwind-preset.ts
2
+ import tokensPreset from "@lessly/tokens/tailwind-preset";
2
3
  var lesslyPreset = {
3
- darkMode: "class",
4
- theme: {
5
- screens: {
6
- "sm": "640px",
7
- "md": "768px",
8
- "lg": "1024px",
9
- "xl": "1280px",
10
- "2xl": "1536px"
11
- },
12
- spacing: {
13
- "0": "0px",
14
- "1": "4px",
15
- "2": "8px",
16
- "3": "12px",
17
- "4": "16px",
18
- "5": "20px",
19
- "6": "24px",
20
- "7": "28px",
21
- "8": "32px",
22
- "9": "36px",
23
- "10": "40px",
24
- "12": "48px",
25
- "14": "56px",
26
- "16": "64px",
27
- "20": "80px",
28
- "24": "96px",
29
- "28": "112px",
30
- "32": "128px",
31
- "40": "160px",
32
- "48": "192px",
33
- "56": "224px",
34
- "64": "256px",
35
- "80": "320px",
36
- "96": "384px",
37
- "0.5": "2px",
38
- "1.5": "6px",
39
- "2.5": "10px"
40
- },
41
- borderRadius: {
42
- "none": "0",
43
- "xs": "2px",
44
- "sm": "4px",
45
- "md": "6px",
46
- "lg": "8px",
47
- "xl": "12px",
48
- "2xl": "16px",
49
- "full": "9999px"
50
- },
51
- borderWidth: {
52
- "none": "0",
53
- "thin": "1px",
54
- "medium": "1.5px",
55
- "thick": "2px",
56
- "heavy": "3px"
57
- },
58
- fontFamily: {
59
- "sans": '"Inter", system-ui, -apple-system, sans-serif',
60
- "serif": '"Instrument Serif", Georgia, "Times New Roman", serif',
61
- "mono": '"Fira Mono", "Fira Code", "Cascadia Code", monospace'
62
- },
63
- fontSize: {
64
- "xs": [
65
- "0.6875rem",
66
- {
67
- "lineHeight": "1.5",
68
- "letterSpacing": "0.02em"
69
- }
70
- ],
71
- "sm": [
72
- "0.8125rem",
73
- {
74
- "lineHeight": "1.5",
75
- "letterSpacing": "0.01em"
76
- }
77
- ],
78
- "base": [
79
- "1.0rem",
80
- {
81
- "lineHeight": "1.5",
82
- "letterSpacing": "0"
83
- }
84
- ],
85
- "lg": [
86
- "1.1875rem",
87
- {
88
- "lineHeight": "1.4",
89
- "letterSpacing": "-0.005em"
90
- }
91
- ],
92
- "xl": [
93
- "1.4375rem",
94
- {
95
- "lineHeight": "1.35",
96
- "letterSpacing": "-0.01em"
97
- }
98
- ],
99
- "2xl": [
100
- "1.75rem",
101
- {
102
- "lineHeight": "1.3",
103
- "letterSpacing": "-0.015em"
104
- }
105
- ],
106
- "3xl": [
107
- "2.0625rem",
108
- {
109
- "lineHeight": "1.25",
110
- "letterSpacing": "-0.02em"
111
- }
112
- ],
113
- "4xl": [
114
- "2.5rem",
115
- {
116
- "lineHeight": "1.2",
117
- "letterSpacing": "-0.025em"
118
- }
119
- ],
120
- "5xl": [
121
- "3.0rem",
122
- {
123
- "lineHeight": "1.15",
124
- "letterSpacing": "-0.03em"
125
- }
126
- ],
127
- "display": [
128
- "3.5625rem",
129
- {
130
- "lineHeight": "1.1",
131
- "letterSpacing": "-0.035em"
132
- }
133
- ]
134
- },
135
- fontWeight: {
136
- "regular": "400",
137
- "medium": "500",
138
- "semibold": "600",
139
- "bold": "700",
140
- "extrabold": "800"
141
- },
142
- zIndex: {
143
- "base": "0",
144
- "raised": "10",
145
- "dropdown": "100",
146
- "sticky": "200",
147
- "overlay": "300",
148
- "modal": "400",
149
- "toast": "500",
150
- "tooltip": "600",
151
- "max": "9999"
152
- },
153
- opacity: {
154
- "0": "0",
155
- "5": "0.05",
156
- "10": "0.10",
157
- "20": "0.20",
158
- "40": "0.40",
159
- "60": "0.60",
160
- "80": "0.80",
161
- "100": "1"
162
- },
163
- boxShadow: {
164
- "sm": "0 1px 2px rgba(0,0,0,0.4)",
165
- "md": "0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4)",
166
- "lg": "0 8px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4)",
167
- "xl": "0 16px 48px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5)",
168
- "inner": "inset 0 1px 3px rgba(0,0,0,0.4)",
169
- "glow-brand": "0 0 12px rgba(6,41,125,0.5)"
170
- },
171
- transitionDuration: {
172
- "instant": "0ms",
173
- "fast": "100ms",
174
- "normal": "200ms",
175
- "slow": "300ms",
176
- "slower": "500ms",
177
- "slowest": "800ms"
178
- },
179
- transitionTimingFunction: {
180
- "default": "cubic-bezier(0.25, 0.1, 0.25, 1)",
181
- "in": "cubic-bezier(0.42, 0, 1, 1)",
182
- "out": "cubic-bezier(0, 0, 0.58, 1)",
183
- "in-out": "cubic-bezier(0.42, 0, 0.58, 1)",
184
- "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
185
- "linear": "cubic-bezier(0, 0, 1, 1)"
186
- },
187
- extend: {
188
- colors: {
189
- ...{
190
- "blue": {
191
- "50": "#f4f6f9",
192
- "100": "#eaeef4",
193
- "150": "#dae0eb",
194
- "200": "#becce9",
195
- "250": "#a3b7e0",
196
- "300": "#6394f6",
197
- "350": "#3d7af4",
198
- "400": "#165ff2",
199
- "450": "#0b4cd5",
200
- "500": "#0940b8",
201
- "550": "#08349b",
202
- "600": "#06297d",
203
- "650": "#05226a",
204
- "700": "#0e204c",
205
- "750": "#0c1a40",
206
- "800": "#091533",
207
- "850": "#0a1123",
208
- "900": "#080d1b",
209
- "950": "#04070f"
210
- },
211
- "teal": {
212
- "50": "#f5f9f8",
213
- "100": "#ebf3f2",
214
- "150": "#dbeae8",
215
- "200": "#c1e5e0",
216
- "250": "#a8dbd4",
217
- "300": "#70eada",
218
- "350": "#4ce5d1",
219
- "400": "#28e0c7",
220
- "450": "#1cc4ae",
221
- "500": "#18a997",
222
- "550": "#148e80",
223
- "600": "#107469",
224
- "650": "#0e6259",
225
- "700": "#144742",
226
- "750": "#103b37",
227
- "800": "#0d2f2c",
228
- "850": "#0c211f",
229
- "900": "#091918",
230
- "950": "#050e0d"
231
- },
232
- "violet": {
233
- "50": "#f7f5f9",
234
- "100": "#efebf3",
235
- "150": "#e2dbea",
236
- "200": "#d3c0e6",
237
- "250": "#c1a6dc",
238
- "300": "#ad6cee",
239
- "350": "#9847ea",
240
- "400": "#8422e6",
241
- "450": "#7116c9",
242
- "500": "#6313ae",
243
- "550": "#541092",
244
- "600": "#450d77",
245
- "650": "#3b0b64",
246
- "700": "#301249",
247
- "750": "#280f3d",
248
- "800": "#200c30",
249
- "850": "#180b21",
250
- "900": "#12091a",
251
- "950": "#0a050f"
252
- },
253
- "rose": {
254
- "50": "#f9f5f6",
255
- "100": "#f4ebed",
256
- "150": "#ebdade",
257
- "200": "#e7c0c7",
258
- "250": "#dda6b1",
259
- "300": "#f06a85",
260
- "350": "#ec4566",
261
- "400": "#e82048",
262
- "450": "#cc1437",
263
- "500": "#b0112f",
264
- "550": "#940e27",
265
- "600": "#780b1f",
266
- "650": "#660a19",
267
- "700": "#4a111b",
268
- "750": "#3d0e16",
269
- "800": "#310b11",
270
- "850": "#220b0f",
271
- "900": "#1a090b",
272
- "950": "#0f0506"
273
- },
274
- "green": {
275
- "50": "#f5f9f7",
276
- "100": "#ebf3ef",
277
- "150": "#dce9e1",
278
- "200": "#c2e4d0",
279
- "250": "#aad9bd",
280
- "300": "#74e6a3",
281
- "350": "#51e08d",
282
- "400": "#2eda76",
283
- "450": "#21be63",
284
- "500": "#1da456",
285
- "550": "#188a49",
286
- "600": "#13703c",
287
- "650": "#105f33",
288
- "700": "#15452a",
289
- "750": "#123a23",
290
- "800": "#0e2e1c",
291
- "850": "#0d2015",
292
- "900": "#0a1911",
293
- "950": "#050e09"
294
- },
295
- "amber": {
296
- "50": "#f9f7f5",
297
- "100": "#f4f0eb",
298
- "150": "#ebe5da",
299
- "200": "#e7d9bf",
300
- "250": "#dec9a5",
301
- "300": "#f2bf68",
302
- "350": "#efb042",
303
- "400": "#eca01c",
304
- "450": "#cf8a10",
305
- "500": "#b3780e",
306
- "550": "#96660c",
307
- "600": "#7a5409",
308
- "650": "#674708",
309
- "700": "#4b3710",
310
- "750": "#3e2e0d",
311
- "800": "#32250b",
312
- "850": "#221b0b",
313
- "900": "#1a1508",
314
- "950": "#0f0c04"
315
- },
316
- "red": {
317
- "50": "#f9f5f5",
318
- "100": "#f4ebeb",
319
- "150": "#ebdada",
320
- "200": "#e7c0c0",
321
- "250": "#dda6a6",
322
- "300": "#f06a6a",
323
- "350": "#ec4545",
324
- "400": "#e82020",
325
- "450": "#cc1614",
326
- "500": "#b01411",
327
- "550": "#94120e",
328
- "600": "#78100b",
329
- "650": "#660e0a",
330
- "700": "#4a1411",
331
- "750": "#3d110e",
332
- "800": "#310e0b",
333
- "850": "#220d0b",
334
- "900": "#1a0a09",
335
- "950": "#0f0505"
336
- },
337
- "neutral": {
338
- "50": "#f6f7f7",
339
- "100": "#eeeff0",
340
- "150": "#e1e2e4",
341
- "200": "#cfd1d7",
342
- "250": "#bbbec7",
343
- "300": "#a5a9b5",
344
- "350": "#8a91a7",
345
- "400": "#737c95",
346
- "450": "#60687f",
347
- "500": "#535a6e",
348
- "550": "#464b5d",
349
- "600": "#393d4b",
350
- "650": "#30343f",
351
- "700": "#252936",
352
- "750": "#1f222d",
353
- "800": "#191b24",
354
- "850": "#12141b",
355
- "900": "#0e1015",
356
- "950": "#08090c"
357
- }
358
- },
359
- "bg-primary": "var(--color-bg-primary)",
360
- "bg-secondary": "var(--color-bg-secondary)",
361
- "bg-surface": "var(--color-bg-surface)",
362
- "bg-elevated": "var(--color-bg-elevated)",
363
- "bg-sunken": "var(--color-bg-sunken)",
364
- "bg-brand": "var(--color-bg-brand)",
365
- "bg-brand-subtle": "var(--color-bg-brand-subtle)",
366
- "bg-brand-bright": "var(--color-bg-brand-bright)",
367
- "bg-brand-hover": "var(--color-bg-brand-hover)",
368
- "bg-success": "var(--color-bg-success)",
369
- "bg-success-subtle": "var(--color-bg-success-subtle)",
370
- "bg-warning": "var(--color-bg-warning)",
371
- "bg-warning-subtle": "var(--color-bg-warning-subtle)",
372
- "bg-danger": "var(--color-bg-danger)",
373
- "bg-danger-subtle": "var(--color-bg-danger-subtle)",
374
- "bg-teal-subtle": "var(--color-bg-teal-subtle)",
375
- "bg-violet-subtle": "var(--color-bg-violet-subtle)",
376
- "bg-rose-subtle": "var(--color-bg-rose-subtle)",
377
- "text-primary": "var(--color-text-primary)",
378
- "text-secondary": "var(--color-text-secondary)",
379
- "text-tertiary": "var(--color-text-tertiary)",
380
- "text-disabled": "var(--color-text-disabled)",
381
- "text-inverse": "var(--color-text-inverse)",
382
- "text-on-brand": "var(--color-text-on-brand)",
383
- "text-on-success": "var(--color-text-on-success)",
384
- "text-on-warning": "var(--color-text-on-warning)",
385
- "text-on-danger": "var(--color-text-on-danger)",
386
- "text-brand": "var(--color-text-brand)",
387
- "text-success": "var(--color-text-success)",
388
- "text-warning": "var(--color-text-warning)",
389
- "text-danger": "var(--color-text-danger)",
390
- "text-link": "var(--color-text-link)",
391
- "text-link-hover": "var(--color-text-link-hover)",
392
- "icon-primary": "var(--color-icon-primary)",
393
- "icon-secondary": "var(--color-icon-secondary)",
394
- "icon-disabled": "var(--color-icon-disabled)",
395
- "icon-brand": "var(--color-icon-brand)",
396
- "icon-success": "var(--color-icon-success)",
397
- "icon-warning": "var(--color-icon-warning)",
398
- "icon-danger": "var(--color-icon-danger)",
399
- "border-subtle": "var(--color-border-subtle)",
400
- "border-default": "var(--color-border-default)",
401
- "border-strong": "var(--color-border-strong)",
402
- "border-brand": "var(--color-border-brand)",
403
- "border-focus": "var(--color-border-focus)",
404
- "border-success": "var(--color-border-success)",
405
- "border-warning": "var(--color-border-warning)",
406
- "border-danger": "var(--color-border-danger)"
407
- },
408
- size: {
409
- "4": "16px",
410
- "5": "20px",
411
- "6": "24px",
412
- "8": "32px",
413
- "9": "36px",
414
- "10": "40px",
415
- "11": "44px",
416
- "12": "48px",
417
- "14": "56px",
418
- "16": "64px",
419
- "20": "80px",
420
- "60": "240px",
421
- "72": "288px"
422
- }
423
- }
424
- }
4
+ // Spread first: darkMode must keep winning even if upstream ever adds one.
5
+ ...tokensPreset,
6
+ darkMode: "class"
425
7
  };
426
- var tailwind_preset_default = lesslyPreset;
427
8
  export {
428
- tailwind_preset_default as default,
429
9
  lesslyPreset
430
10
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lessly/ui",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Lessly design system — shared UI primitives, tokens, and theme",
5
5
  "type": "module",
6
6
  "packageManager": "pnpm@10.30.3",
@@ -48,9 +48,16 @@
48
48
  "peerDependencies": {
49
49
  "react": "^19.0.0",
50
50
  "react-dom": "^19.0.0",
51
- "react-router": "^7.0.0"
51
+ "react-router": "^7.0.0",
52
+ "tailwindcss": ">=3.4.0"
53
+ },
54
+ "peerDependenciesMeta": {
55
+ "tailwindcss": {
56
+ "optional": true
57
+ }
52
58
  },
53
59
  "dependencies": {
60
+ "@lessly/tokens": "^0.1.0",
54
61
  "@radix-ui/react-accordion": "^1.2.16",
55
62
  "@radix-ui/react-alert-dialog": "^1.1.19",
56
63
  "@radix-ui/react-aspect-ratio": "^1.1.11",