@tapizlabs/ui 0.1.6 → 0.2.3
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/CHANGELOG.md +16 -16
- package/LICENSE +21 -21
- package/README.md +358 -358
- package/dist/fonts.css +161 -161
- package/dist/fonts.js.map +1 -1
- package/dist/index.d.ts +881 -30
- package/dist/index.js +1685 -160
- package/dist/index.js.map +1 -1
- package/dist/tailwind-theme.css +113 -113
- package/dist/theme.css +418 -772
- package/package.json +5 -5
- package/FRAMEWORK_BOUNDARY.md +0 -47
package/dist/tailwind-theme.css
CHANGED
|
@@ -1,113 +1,113 @@
|
|
|
1
|
-
/* stylelint-disable */
|
|
2
|
-
/*
|
|
3
|
-
Tapiz Design System — Tailwind 4 theme integration.
|
|
4
|
-
Import this AFTER `@import "tailwindcss"` to expose all Tapiz tokens
|
|
5
|
-
as Tailwind CSS variables (text-primary-300, bg-ink-200, etc.)
|
|
6
|
-
|
|
7
|
-
Usage:
|
|
8
|
-
@import "tailwindcss";
|
|
9
|
-
@import "@tapizlabs/ui/tailwind-theme.css";
|
|
10
|
-
*/
|
|
11
|
-
@theme {
|
|
12
|
-
/* Grid Brutalism Electric Cyan + Signal Lime */
|
|
13
|
-
--color-ink-000: #050608;
|
|
14
|
-
--color-ink-100: #06080c;
|
|
15
|
-
--color-ink-200: #0c0f16;
|
|
16
|
-
--color-ink-300: #11151e;
|
|
17
|
-
--color-ink-400: #1d222d;
|
|
18
|
-
--color-ink-500: #262d3b;
|
|
19
|
-
--color-border: #1d2330;
|
|
20
|
-
--color-border-hi: #2a3346;
|
|
21
|
-
--color-txt-1: #f1f4f9;
|
|
22
|
-
--color-txt-2: #aab3c2;
|
|
23
|
-
--color-txt-3: #6b7686;
|
|
24
|
-
--color-txt-4: #7a8496;
|
|
25
|
-
|
|
26
|
-
/* Accent ramp electric cyan */
|
|
27
|
-
--color-primary-50: #e8fbff;
|
|
28
|
-
--color-primary-100: #c7f5ff;
|
|
29
|
-
--color-primary-200: #99eeff;
|
|
30
|
-
--color-primary-300: #5ee7ff;
|
|
31
|
-
--color-primary-400: #38d4f0;
|
|
32
|
-
--color-primary-500: #1eb5d4;
|
|
33
|
-
--color-primary-600: #1496b3;
|
|
34
|
-
--color-primary-700: #0e7088;
|
|
35
|
-
--color-primary-800: #0a4f60;
|
|
36
|
-
--color-primary-900: #062f3b;
|
|
37
|
-
--color-primary-950: #03161c;
|
|
38
|
-
|
|
39
|
-
/* Signal lime */
|
|
40
|
-
--color-signal-300: #e4ff66;
|
|
41
|
-
--color-signal-400: #d4ff3a;
|
|
42
|
-
--color-signal-500: #b8e620;
|
|
43
|
-
|
|
44
|
-
--color-warn: #ff7a4d;
|
|
45
|
-
--color-good: #4dd6a3;
|
|
46
|
-
--color-icon-bg: #03161c;
|
|
47
|
-
--btn-primary-color: #000;
|
|
48
|
-
|
|
49
|
-
--font-display: 'IBM Plex Sans', system-ui, sans-serif;
|
|
50
|
-
--font-body: 'IBM Plex Sans', system-ui, sans-serif;
|
|
51
|
-
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
|
|
52
|
-
|
|
53
|
-
/* Kill all rounding */
|
|
54
|
-
--radius-none: 0;
|
|
55
|
-
--radius-sm: 0;
|
|
56
|
-
--radius-md: 0;
|
|
57
|
-
--radius-lg: 0;
|
|
58
|
-
--radius-xl: 0;
|
|
59
|
-
--radius-2xl: 0;
|
|
60
|
-
--radius-full: 9999px;
|
|
61
|
-
|
|
62
|
-
/* Animations */
|
|
63
|
-
--animate-fade-in-up: fade-in-up 0.5s ease both;
|
|
64
|
-
--animate-fade-in-down: fade-in-down 0.4s ease both;
|
|
65
|
-
--animate-fade-in: fade-in 0.3s ease both;
|
|
66
|
-
--animate-fade-out: fade-out 0.25s ease both;
|
|
67
|
-
--animate-count-up: count-up 0.5s ease both;
|
|
68
|
-
--animate-slide-in-right: slide-in-right 0.35s ease both;
|
|
69
|
-
--animate-slide-in-left: slide-in-left 0.35s ease both;
|
|
70
|
-
--animate-scale-in: scale-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
|
|
71
|
-
--animate-progress-fill: progress-fill 1s ease both;
|
|
72
|
-
--animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
|
|
73
|
-
--animate-shake: shake 0.4s ease both;
|
|
74
|
-
--animate-bounce-in: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
|
75
|
-
--animate-flip-in: flip-in 0.4s ease both;
|
|
76
|
-
--animate-blur-in: blur-in 0.35s ease both;
|
|
77
|
-
--animate-slide-up-fade: slide-up-fade 0.3s ease both;
|
|
78
|
-
|
|
79
|
-
@keyframes fade-in-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
|
|
80
|
-
@keyframes fade-in-down { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
|
|
81
|
-
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
|
|
82
|
-
@keyframes fade-out { from { opacity:1; } to { opacity:0; } }
|
|
83
|
-
@keyframes count-up { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
|
|
84
|
-
@keyframes slide-in-right { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
|
|
85
|
-
@keyframes slide-in-left { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
|
|
86
|
-
@keyframes scale-in { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
|
|
87
|
-
@keyframes progress-fill { from { width: 0%; } }
|
|
88
|
-
@keyframes pulse-soft { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
|
|
89
|
-
@keyframes shake {
|
|
90
|
-
0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); }
|
|
91
|
-
40% { transform:translateX(6px); } 60% { transform:translateX(-4px); }
|
|
92
|
-
80% { transform:translateX(4px); }
|
|
93
|
-
}
|
|
94
|
-
@keyframes bounce-in { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
|
|
95
|
-
@keyframes flip-in { from { opacity:0; transform:rotateX(-30deg) translateY(8px); } to { opacity:1; transform:rotateX(0deg) translateY(0); } }
|
|
96
|
-
@keyframes blur-in { from { opacity:0; filter:blur(6px); transform:scale(0.97); } to { opacity:1; filter:blur(0px); transform:scale(1); } }
|
|
97
|
-
@keyframes slide-up-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
|
|
98
|
-
@keyframes accordion-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
|
|
99
|
-
@keyframes accordion-close { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; opacity: 0; } }
|
|
100
|
-
@keyframes tz-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
|
|
101
|
-
@keyframes tz-bar-grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
|
|
102
|
-
@keyframes skeleton-shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
|
|
103
|
-
@keyframes slowSlideFade {
|
|
104
|
-
0% { transform:translateX(-120px); opacity:0; }
|
|
105
|
-
15% { transform:translateX(-80px); opacity:1; }
|
|
106
|
-
85% { transform:translateX(80px); opacity:1; }
|
|
107
|
-
100% { transform:translateX(120px); opacity:0; }
|
|
108
|
-
}
|
|
109
|
-
@keyframes thinPulse {
|
|
110
|
-
0%,100% { box-shadow:0 0 4px rgba(94,231,255,.15); background:rgba(94,231,255,.05); width:70px; height:2px; }
|
|
111
|
-
50% { box-shadow:0 0 14px rgba(94,231,255,.4); background:rgba(94,231,255,.15); width:90px; height:3px; }
|
|
112
|
-
}
|
|
113
|
-
}
|
|
1
|
+
/* stylelint-disable */
|
|
2
|
+
/*
|
|
3
|
+
Tapiz Design System — Tailwind 4 theme integration.
|
|
4
|
+
Import this AFTER `@import "tailwindcss"` to expose all Tapiz tokens
|
|
5
|
+
as Tailwind CSS variables (text-primary-300, bg-ink-200, etc.)
|
|
6
|
+
|
|
7
|
+
Usage:
|
|
8
|
+
@import "tailwindcss";
|
|
9
|
+
@import "@tapizlabs/ui/tailwind-theme.css";
|
|
10
|
+
*/
|
|
11
|
+
@theme {
|
|
12
|
+
/* Grid Brutalism Electric Cyan + Signal Lime */
|
|
13
|
+
--color-ink-000: #050608;
|
|
14
|
+
--color-ink-100: #06080c;
|
|
15
|
+
--color-ink-200: #0c0f16;
|
|
16
|
+
--color-ink-300: #11151e;
|
|
17
|
+
--color-ink-400: #1d222d;
|
|
18
|
+
--color-ink-500: #262d3b;
|
|
19
|
+
--color-border: #1d2330;
|
|
20
|
+
--color-border-hi: #2a3346;
|
|
21
|
+
--color-txt-1: #f1f4f9;
|
|
22
|
+
--color-txt-2: #aab3c2;
|
|
23
|
+
--color-txt-3: #6b7686;
|
|
24
|
+
--color-txt-4: #7a8496;
|
|
25
|
+
|
|
26
|
+
/* Accent ramp electric cyan */
|
|
27
|
+
--color-primary-50: #e8fbff;
|
|
28
|
+
--color-primary-100: #c7f5ff;
|
|
29
|
+
--color-primary-200: #99eeff;
|
|
30
|
+
--color-primary-300: #5ee7ff;
|
|
31
|
+
--color-primary-400: #38d4f0;
|
|
32
|
+
--color-primary-500: #1eb5d4;
|
|
33
|
+
--color-primary-600: #1496b3;
|
|
34
|
+
--color-primary-700: #0e7088;
|
|
35
|
+
--color-primary-800: #0a4f60;
|
|
36
|
+
--color-primary-900: #062f3b;
|
|
37
|
+
--color-primary-950: #03161c;
|
|
38
|
+
|
|
39
|
+
/* Signal lime */
|
|
40
|
+
--color-signal-300: #e4ff66;
|
|
41
|
+
--color-signal-400: #d4ff3a;
|
|
42
|
+
--color-signal-500: #b8e620;
|
|
43
|
+
|
|
44
|
+
--color-warn: #ff7a4d;
|
|
45
|
+
--color-good: #4dd6a3;
|
|
46
|
+
--color-icon-bg: #03161c;
|
|
47
|
+
--btn-primary-color: #000;
|
|
48
|
+
|
|
49
|
+
--font-display: 'IBM Plex Sans', system-ui, sans-serif;
|
|
50
|
+
--font-body: 'IBM Plex Sans', system-ui, sans-serif;
|
|
51
|
+
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
|
|
52
|
+
|
|
53
|
+
/* Kill all rounding */
|
|
54
|
+
--radius-none: 0;
|
|
55
|
+
--radius-sm: 0;
|
|
56
|
+
--radius-md: 0;
|
|
57
|
+
--radius-lg: 0;
|
|
58
|
+
--radius-xl: 0;
|
|
59
|
+
--radius-2xl: 0;
|
|
60
|
+
--radius-full: 9999px;
|
|
61
|
+
|
|
62
|
+
/* Animations */
|
|
63
|
+
--animate-fade-in-up: fade-in-up 0.5s ease both;
|
|
64
|
+
--animate-fade-in-down: fade-in-down 0.4s ease both;
|
|
65
|
+
--animate-fade-in: fade-in 0.3s ease both;
|
|
66
|
+
--animate-fade-out: fade-out 0.25s ease both;
|
|
67
|
+
--animate-count-up: count-up 0.5s ease both;
|
|
68
|
+
--animate-slide-in-right: slide-in-right 0.35s ease both;
|
|
69
|
+
--animate-slide-in-left: slide-in-left 0.35s ease both;
|
|
70
|
+
--animate-scale-in: scale-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
|
|
71
|
+
--animate-progress-fill: progress-fill 1s ease both;
|
|
72
|
+
--animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
|
|
73
|
+
--animate-shake: shake 0.4s ease both;
|
|
74
|
+
--animate-bounce-in: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
|
75
|
+
--animate-flip-in: flip-in 0.4s ease both;
|
|
76
|
+
--animate-blur-in: blur-in 0.35s ease both;
|
|
77
|
+
--animate-slide-up-fade: slide-up-fade 0.3s ease both;
|
|
78
|
+
|
|
79
|
+
@keyframes fade-in-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
|
|
80
|
+
@keyframes fade-in-down { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
|
|
81
|
+
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
|
|
82
|
+
@keyframes fade-out { from { opacity:1; } to { opacity:0; } }
|
|
83
|
+
@keyframes count-up { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
|
|
84
|
+
@keyframes slide-in-right { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
|
|
85
|
+
@keyframes slide-in-left { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
|
|
86
|
+
@keyframes scale-in { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
|
|
87
|
+
@keyframes progress-fill { from { width: 0%; } }
|
|
88
|
+
@keyframes pulse-soft { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
|
|
89
|
+
@keyframes shake {
|
|
90
|
+
0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); }
|
|
91
|
+
40% { transform:translateX(6px); } 60% { transform:translateX(-4px); }
|
|
92
|
+
80% { transform:translateX(4px); }
|
|
93
|
+
}
|
|
94
|
+
@keyframes bounce-in { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
|
|
95
|
+
@keyframes flip-in { from { opacity:0; transform:rotateX(-30deg) translateY(8px); } to { opacity:1; transform:rotateX(0deg) translateY(0); } }
|
|
96
|
+
@keyframes blur-in { from { opacity:0; filter:blur(6px); transform:scale(0.97); } to { opacity:1; filter:blur(0px); transform:scale(1); } }
|
|
97
|
+
@keyframes slide-up-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
|
|
98
|
+
@keyframes accordion-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
|
|
99
|
+
@keyframes accordion-close { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; opacity: 0; } }
|
|
100
|
+
@keyframes tz-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
|
|
101
|
+
@keyframes tz-bar-grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
|
|
102
|
+
@keyframes skeleton-shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
|
|
103
|
+
@keyframes slowSlideFade {
|
|
104
|
+
0% { transform:translateX(-120px); opacity:0; }
|
|
105
|
+
15% { transform:translateX(-80px); opacity:1; }
|
|
106
|
+
85% { transform:translateX(80px); opacity:1; }
|
|
107
|
+
100% { transform:translateX(120px); opacity:0; }
|
|
108
|
+
}
|
|
109
|
+
@keyframes thinPulse {
|
|
110
|
+
0%,100% { box-shadow:0 0 4px rgba(94,231,255,.15); background:rgba(94,231,255,.05); width:70px; height:2px; }
|
|
111
|
+
50% { box-shadow:0 0 14px rgba(94,231,255,.4); background:rgba(94,231,255,.15); width:90px; height:3px; }
|
|
112
|
+
}
|
|
113
|
+
}
|