@kjaniec-dev/design 0.4.1 → 0.6.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 +1 -1
- package/src/tailwind.css +16 -0
- package/src/theme.css +37 -0
- package/tokens.json +125 -1
package/package.json
CHANGED
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-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
|
@@ -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;
|
|
@@ -61,6 +71,23 @@
|
|
|
61
71
|
--kj-shadow-md: 0 8px 30px rgb(15 23 42 / 0.08);
|
|
62
72
|
--kj-shadow-lg: 0 20px 60px rgb(15 23 42 / 0.12);
|
|
63
73
|
--kj-shadow-glow: 0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18);
|
|
74
|
+
--kj-density-default: 1.0;
|
|
75
|
+
--kj-density-compact: 0.82;
|
|
76
|
+
--kj-density-comfortable: 1.18;
|
|
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);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
[data-density="compact"] {
|
|
87
|
+
--kj-density: var(--kj-density-compact);
|
|
88
|
+
}
|
|
89
|
+
[data-density="comfortable"] {
|
|
90
|
+
--kj-density: var(--kj-density-comfortable);
|
|
64
91
|
}
|
|
65
92
|
|
|
66
93
|
.dark {
|
|
@@ -89,6 +116,16 @@
|
|
|
89
116
|
--kj-danger-surface: #4c0519;
|
|
90
117
|
--kj-info: #0ea5e9;
|
|
91
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;
|
|
92
129
|
}
|
|
93
130
|
|
|
94
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": {
|
|
@@ -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
|
}
|
|
@@ -550,5 +630,49 @@
|
|
|
550
630
|
"$type": "shadow",
|
|
551
631
|
"$value": "0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18)"
|
|
552
632
|
}
|
|
633
|
+
},
|
|
634
|
+
"density": {
|
|
635
|
+
"default": {
|
|
636
|
+
"$type": "dimension",
|
|
637
|
+
"$value": "1.0"
|
|
638
|
+
},
|
|
639
|
+
"compact": {
|
|
640
|
+
"$type": "dimension",
|
|
641
|
+
"$value": "0.82"
|
|
642
|
+
},
|
|
643
|
+
"comfortable": {
|
|
644
|
+
"$type": "dimension",
|
|
645
|
+
"$value": "1.18"
|
|
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
|
+
}
|
|
553
677
|
}
|
|
554
678
|
}
|