@kjaniec-dev/design 0.5.0 → 0.7.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.
- package/package.json +3 -2
- package/src/tailwind.css +16 -0
- package/src/theme.css +33 -7
- package/tokens.json +118 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kjaniec-dev/design",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Design tokens and Tailwind v4 theme for the KJ Product Kit",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "kjaniec-dev",
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"directory": "packages/design"
|
|
11
11
|
},
|
|
12
12
|
"scripts": {
|
|
13
|
-
"build": "node build-tokens.js"
|
|
13
|
+
"build": "node build-tokens.js",
|
|
14
|
+
"prepublishOnly": "npm run build"
|
|
14
15
|
},
|
|
15
16
|
"publishConfig": {
|
|
16
17
|
"access": "public"
|
package/src/tailwind.css
CHANGED
|
@@ -25,6 +25,16 @@
|
|
|
25
25
|
--color-danger-surface: var(--kj-danger-surface);
|
|
26
26
|
--color-info: var(--kj-info);
|
|
27
27
|
--color-info-surface: var(--kj-info-surface);
|
|
28
|
+
--color-canvas: var(--kj-bg-canvas);
|
|
29
|
+
--color-subtle: var(--kj-bg-subtle);
|
|
30
|
+
--color-bg-surface: var(--kj-bg-surface);
|
|
31
|
+
--color-elevated: var(--kj-bg-elevated);
|
|
32
|
+
--color-overlay: var(--kj-bg-overlay);
|
|
33
|
+
--color-border-subtle: var(--kj-border-subtle);
|
|
34
|
+
--color-border-strong: var(--kj-border-strong);
|
|
35
|
+
--color-chart1: var(--kj-chart1);
|
|
36
|
+
--color-chart2: var(--kj-chart2);
|
|
37
|
+
--color-chart3: var(--kj-chart3);
|
|
28
38
|
--color-primary-50: var(--kj-primary-50);
|
|
29
39
|
--color-primary-100: var(--kj-primary-100);
|
|
30
40
|
--color-primary-200: var(--kj-primary-200);
|
|
@@ -60,4 +70,10 @@
|
|
|
60
70
|
--shadow-kj-md: var(--kj-shadow-md);
|
|
61
71
|
--shadow-kj-lg: var(--kj-shadow-lg);
|
|
62
72
|
--shadow-kj-glow: var(--kj-shadow-glow);
|
|
73
|
+
--animate-duration-fast: var(--kj-duration-fast);
|
|
74
|
+
--animate-duration-normal: var(--kj-duration-normal);
|
|
75
|
+
--animate-duration-slow: var(--kj-duration-slow);
|
|
76
|
+
--animate-ease-standard: var(--kj-ease-standard);
|
|
77
|
+
--animate-ease-out: var(--kj-ease-out);
|
|
78
|
+
--animate-ease-spring: var(--kj-ease-spring);
|
|
63
79
|
}
|
package/src/theme.css
CHANGED
|
@@ -5,17 +5,17 @@
|
|
|
5
5
|
--kj-surface: #ffffff;
|
|
6
6
|
--kj-card: #ffffff;
|
|
7
7
|
--kj-card-foreground: #09090b;
|
|
8
|
-
--kj-primary: #
|
|
9
|
-
--kj-primary-hover: #
|
|
10
|
-
--kj-primary-foreground: #
|
|
11
|
-
--kj-secondary: #
|
|
12
|
-
--kj-secondary-hover: #
|
|
8
|
+
--kj-primary: #b45309;
|
|
9
|
+
--kj-primary-hover: #92400e;
|
|
10
|
+
--kj-primary-foreground: #ffffff;
|
|
11
|
+
--kj-secondary: #0f766e;
|
|
12
|
+
--kj-secondary-hover: #115e59;
|
|
13
13
|
--kj-secondary-foreground: #ffffff;
|
|
14
14
|
--kj-muted: #f4f4f5;
|
|
15
|
-
--kj-muted-foreground: #
|
|
15
|
+
--kj-muted-foreground: #52525b;
|
|
16
16
|
--kj-border: #e4e4e7;
|
|
17
17
|
--kj-input: #e4e4e7;
|
|
18
|
-
--kj-ring: #
|
|
18
|
+
--kj-ring: #b45309;
|
|
19
19
|
--kj-success: #059669;
|
|
20
20
|
--kj-success-surface: #ecfdf5;
|
|
21
21
|
--kj-warning: #d97706;
|
|
@@ -24,6 +24,16 @@
|
|
|
24
24
|
--kj-danger-surface: #fff1f2;
|
|
25
25
|
--kj-info: #0284c7;
|
|
26
26
|
--kj-info-surface: #f0f9ff;
|
|
27
|
+
--kj-bg-canvas: #f4f4f5;
|
|
28
|
+
--kj-bg-subtle: #fafafa;
|
|
29
|
+
--kj-bg-surface: #ffffff;
|
|
30
|
+
--kj-bg-elevated: #ffffff;
|
|
31
|
+
--kj-bg-overlay: rgba(9, 9, 11, 0.4);
|
|
32
|
+
--kj-border-subtle: #f4f4f5;
|
|
33
|
+
--kj-border-strong: #e4e4e7;
|
|
34
|
+
--kj-chart1: #f59e0b;
|
|
35
|
+
--kj-chart2: #14b8a6;
|
|
36
|
+
--kj-chart3: #0284c7;
|
|
27
37
|
/* Primary (amber) scale */
|
|
28
38
|
--kj-primary-50: #fffbeb;
|
|
29
39
|
--kj-primary-100: #fef3c7;
|
|
@@ -65,6 +75,12 @@
|
|
|
65
75
|
--kj-density-compact: 0.82;
|
|
66
76
|
--kj-density-comfortable: 1.18;
|
|
67
77
|
--kj-density: var(--kj-density-default);
|
|
78
|
+
--kj-duration-fast: 120ms;
|
|
79
|
+
--kj-duration-normal: 180ms;
|
|
80
|
+
--kj-duration-slow: 280ms;
|
|
81
|
+
--kj-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
|
82
|
+
--kj-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
83
|
+
--kj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
68
84
|
}
|
|
69
85
|
|
|
70
86
|
[data-density="compact"] {
|
|
@@ -100,6 +116,16 @@
|
|
|
100
116
|
--kj-danger-surface: #4c0519;
|
|
101
117
|
--kj-info: #0ea5e9;
|
|
102
118
|
--kj-info-surface: #082f49;
|
|
119
|
+
--kj-bg-canvas: #09090b;
|
|
120
|
+
--kj-bg-subtle: #121214;
|
|
121
|
+
--kj-bg-surface: #18181b;
|
|
122
|
+
--kj-bg-elevated: #27272a;
|
|
123
|
+
--kj-bg-overlay: rgba(9, 9, 11, 0.7);
|
|
124
|
+
--kj-border-subtle: #1f1f23;
|
|
125
|
+
--kj-border-strong: #27272a;
|
|
126
|
+
--kj-chart1: #fbbf24;
|
|
127
|
+
--kj-chart2: #2dd4bf;
|
|
128
|
+
--kj-chart3: #0ea5e9;
|
|
103
129
|
}
|
|
104
130
|
|
|
105
131
|
html {
|
package/tokens.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
3
3
|
"name": "KJ Product Kit",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.6.0",
|
|
5
5
|
"description": "Personal product design system tokens for KJ apps, portfolio, dashboards and SaaS tools.",
|
|
6
6
|
"color": {
|
|
7
7
|
"primitive": {
|
|
@@ -222,23 +222,23 @@
|
|
|
222
222
|
},
|
|
223
223
|
"primary": {
|
|
224
224
|
"$type": "color",
|
|
225
|
-
"$value": "#
|
|
225
|
+
"$value": "#b45309"
|
|
226
226
|
},
|
|
227
227
|
"primaryHover": {
|
|
228
228
|
"$type": "color",
|
|
229
|
-
"$value": "#
|
|
229
|
+
"$value": "#92400e"
|
|
230
230
|
},
|
|
231
231
|
"primaryForeground": {
|
|
232
232
|
"$type": "color",
|
|
233
|
-
"$value": "#
|
|
233
|
+
"$value": "#ffffff"
|
|
234
234
|
},
|
|
235
235
|
"secondary": {
|
|
236
236
|
"$type": "color",
|
|
237
|
-
"$value": "#
|
|
237
|
+
"$value": "#0f766e"
|
|
238
238
|
},
|
|
239
239
|
"secondaryHover": {
|
|
240
240
|
"$type": "color",
|
|
241
|
-
"$value": "#
|
|
241
|
+
"$value": "#115e59"
|
|
242
242
|
},
|
|
243
243
|
"secondaryForeground": {
|
|
244
244
|
"$type": "color",
|
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
},
|
|
251
251
|
"mutedForeground": {
|
|
252
252
|
"$type": "color",
|
|
253
|
-
"$value": "#
|
|
253
|
+
"$value": "#52525b"
|
|
254
254
|
},
|
|
255
255
|
"border": {
|
|
256
256
|
"$type": "color",
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
},
|
|
263
263
|
"ring": {
|
|
264
264
|
"$type": "color",
|
|
265
|
-
"$value": "#
|
|
265
|
+
"$value": "#b45309"
|
|
266
266
|
},
|
|
267
267
|
"success": {
|
|
268
268
|
"$type": "color",
|
|
@@ -295,6 +295,46 @@
|
|
|
295
295
|
"infoSurface": {
|
|
296
296
|
"$type": "color",
|
|
297
297
|
"$value": "#f0f9ff"
|
|
298
|
+
},
|
|
299
|
+
"bgCanvas": {
|
|
300
|
+
"$type": "color",
|
|
301
|
+
"$value": "#f4f4f5"
|
|
302
|
+
},
|
|
303
|
+
"bgSubtle": {
|
|
304
|
+
"$type": "color",
|
|
305
|
+
"$value": "#fafafa"
|
|
306
|
+
},
|
|
307
|
+
"bgSurface": {
|
|
308
|
+
"$type": "color",
|
|
309
|
+
"$value": "#ffffff"
|
|
310
|
+
},
|
|
311
|
+
"bgElevated": {
|
|
312
|
+
"$type": "color",
|
|
313
|
+
"$value": "#ffffff"
|
|
314
|
+
},
|
|
315
|
+
"bgOverlay": {
|
|
316
|
+
"$type": "color",
|
|
317
|
+
"$value": "rgba(9, 9, 11, 0.4)"
|
|
318
|
+
},
|
|
319
|
+
"borderSubtle": {
|
|
320
|
+
"$type": "color",
|
|
321
|
+
"$value": "#f4f4f5"
|
|
322
|
+
},
|
|
323
|
+
"borderStrong": {
|
|
324
|
+
"$type": "color",
|
|
325
|
+
"$value": "#e4e4e7"
|
|
326
|
+
},
|
|
327
|
+
"chart1": {
|
|
328
|
+
"$type": "color",
|
|
329
|
+
"$value": "#f59e0b"
|
|
330
|
+
},
|
|
331
|
+
"chart2": {
|
|
332
|
+
"$type": "color",
|
|
333
|
+
"$value": "#14b8a6"
|
|
334
|
+
},
|
|
335
|
+
"chart3": {
|
|
336
|
+
"$type": "color",
|
|
337
|
+
"$value": "#0284c7"
|
|
298
338
|
}
|
|
299
339
|
},
|
|
300
340
|
"dark": {
|
|
@@ -393,6 +433,46 @@
|
|
|
393
433
|
"infoSurface": {
|
|
394
434
|
"$type": "color",
|
|
395
435
|
"$value": "#082f49"
|
|
436
|
+
},
|
|
437
|
+
"bgCanvas": {
|
|
438
|
+
"$type": "color",
|
|
439
|
+
"$value": "#09090b"
|
|
440
|
+
},
|
|
441
|
+
"bgSubtle": {
|
|
442
|
+
"$type": "color",
|
|
443
|
+
"$value": "#121214"
|
|
444
|
+
},
|
|
445
|
+
"bgSurface": {
|
|
446
|
+
"$type": "color",
|
|
447
|
+
"$value": "#18181b"
|
|
448
|
+
},
|
|
449
|
+
"bgElevated": {
|
|
450
|
+
"$type": "color",
|
|
451
|
+
"$value": "#27272a"
|
|
452
|
+
},
|
|
453
|
+
"bgOverlay": {
|
|
454
|
+
"$type": "color",
|
|
455
|
+
"$value": "rgba(9, 9, 11, 0.7)"
|
|
456
|
+
},
|
|
457
|
+
"borderSubtle": {
|
|
458
|
+
"$type": "color",
|
|
459
|
+
"$value": "#1f1f23"
|
|
460
|
+
},
|
|
461
|
+
"borderStrong": {
|
|
462
|
+
"$type": "color",
|
|
463
|
+
"$value": "#27272a"
|
|
464
|
+
},
|
|
465
|
+
"chart1": {
|
|
466
|
+
"$type": "color",
|
|
467
|
+
"$value": "#fbbf24"
|
|
468
|
+
},
|
|
469
|
+
"chart2": {
|
|
470
|
+
"$type": "color",
|
|
471
|
+
"$value": "#2dd4bf"
|
|
472
|
+
},
|
|
473
|
+
"chart3": {
|
|
474
|
+
"$type": "color",
|
|
475
|
+
"$value": "#0ea5e9"
|
|
396
476
|
}
|
|
397
477
|
}
|
|
398
478
|
}
|
|
@@ -564,5 +644,35 @@
|
|
|
564
644
|
"$type": "dimension",
|
|
565
645
|
"$value": "1.18"
|
|
566
646
|
}
|
|
647
|
+
},
|
|
648
|
+
"motion": {
|
|
649
|
+
"duration": {
|
|
650
|
+
"fast": {
|
|
651
|
+
"$type": "duration",
|
|
652
|
+
"$value": "120ms"
|
|
653
|
+
},
|
|
654
|
+
"normal": {
|
|
655
|
+
"$type": "duration",
|
|
656
|
+
"$value": "180ms"
|
|
657
|
+
},
|
|
658
|
+
"slow": {
|
|
659
|
+
"$type": "duration",
|
|
660
|
+
"$value": "280ms"
|
|
661
|
+
}
|
|
662
|
+
},
|
|
663
|
+
"ease": {
|
|
664
|
+
"standard": {
|
|
665
|
+
"$type": "easing",
|
|
666
|
+
"$value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
667
|
+
},
|
|
668
|
+
"out": {
|
|
669
|
+
"$type": "easing",
|
|
670
|
+
"$value": "cubic-bezier(0, 0, 0.2, 1)"
|
|
671
|
+
},
|
|
672
|
+
"spring": {
|
|
673
|
+
"$type": "easing",
|
|
674
|
+
"$value": "cubic-bezier(0.34, 1.56, 0.64, 1)"
|
|
675
|
+
}
|
|
676
|
+
}
|
|
567
677
|
}
|
|
568
678
|
}
|