@tapizlabs/ui 0.1.6 → 0.2.1
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/dist/index.d.ts +949 -8
- package/dist/index.js +1947 -89
- package/dist/index.js.map +1 -1
- package/dist/theme.css +261 -615
- package/package.json +5 -5
- package/FRAMEWORK_BOUNDARY.md +0 -47
package/dist/theme.css
CHANGED
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
/* stylelint-disable */
|
|
2
2
|
@theme {
|
|
3
|
-
/*
|
|
3
|
+
/* Core ink ramp kept for backwards compatibility with existing Tailwind classes. */
|
|
4
4
|
--color-ink-000: #050608;
|
|
5
5
|
--color-ink-100: #06080c;
|
|
6
6
|
--color-ink-200: #0c0f16;
|
|
7
7
|
--color-ink-300: #11151e;
|
|
8
8
|
--color-ink-400: #1d222d;
|
|
9
9
|
--color-ink-500: #262d3b;
|
|
10
|
-
--color-border:
|
|
10
|
+
--color-border: #1d2330;
|
|
11
11
|
--color-border-hi: #2a3346;
|
|
12
12
|
--color-txt-1: #f1f4f9;
|
|
13
13
|
--color-txt-2: #aab3c2;
|
|
14
|
-
--color-txt-3: #
|
|
15
|
-
--color-txt-4: #
|
|
14
|
+
--color-txt-3: #7f8a9b;
|
|
15
|
+
--color-txt-4: #667185;
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
--color-primary-50: #e8fbff;
|
|
17
|
+
--color-primary-50: #e8fbff;
|
|
19
18
|
--color-primary-100: #c7f5ff;
|
|
20
19
|
--color-primary-200: #99eeff;
|
|
21
20
|
--color-primary-300: #5ee7ff;
|
|
@@ -27,7 +26,6 @@
|
|
|
27
26
|
--color-primary-900: #062f3b;
|
|
28
27
|
--color-primary-950: #03161c;
|
|
29
28
|
|
|
30
|
-
/* Signal lime */
|
|
31
29
|
--color-signal-300: #e4ff66;
|
|
32
30
|
--color-signal-400: #d4ff3a;
|
|
33
31
|
--color-signal-500: #b8e620;
|
|
@@ -35,375 +33,301 @@
|
|
|
35
33
|
--color-warn: #ff7a4d;
|
|
36
34
|
--color-good: #4dd6a3;
|
|
37
35
|
|
|
38
|
-
/* Icon background for icon containers dark mode default */
|
|
39
|
-
--color-icon-bg: #03161c; /* = primary-950 */
|
|
40
|
-
/* btn-primary text color dark mode: black on bright cyan */
|
|
41
|
-
--btn-primary-color: #000;
|
|
42
|
-
|
|
43
36
|
--font-display: 'IBM Plex Sans', system-ui, sans-serif;
|
|
44
|
-
--font-body:
|
|
45
|
-
--font-mono:
|
|
37
|
+
--font-body: 'IBM Plex Sans', system-ui, sans-serif;
|
|
38
|
+
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
|
|
46
39
|
|
|
47
|
-
/* Kill all rounding */
|
|
48
40
|
--radius-none: 0;
|
|
49
|
-
--radius-sm:
|
|
50
|
-
--radius-md:
|
|
51
|
-
--radius-lg:
|
|
52
|
-
--radius-xl:
|
|
53
|
-
--radius-2xl:
|
|
41
|
+
--radius-sm: 0;
|
|
42
|
+
--radius-md: 0;
|
|
43
|
+
--radius-lg: 0;
|
|
44
|
+
--radius-xl: 0;
|
|
45
|
+
--radius-2xl: 0;
|
|
54
46
|
--radius-full: 9999px;
|
|
55
47
|
|
|
56
|
-
|
|
57
|
-
--animate-fade-in-
|
|
58
|
-
--animate-fade-in
|
|
59
|
-
--animate-fade-
|
|
60
|
-
--animate-
|
|
61
|
-
--animate-count-up: count-up 0.5s ease both;
|
|
48
|
+
--animate-fade-in-up: fade-in-up 0.5s ease both;
|
|
49
|
+
--animate-fade-in-down: fade-in-down 0.4s ease both;
|
|
50
|
+
--animate-fade-in: fade-in 0.3s ease both;
|
|
51
|
+
--animate-fade-out: fade-out 0.25s ease both;
|
|
52
|
+
--animate-count-up: count-up 0.5s ease both;
|
|
62
53
|
--animate-slide-in-right: slide-in-right 0.35s ease both;
|
|
63
|
-
--animate-slide-in-left:
|
|
64
|
-
--animate-scale-in:
|
|
65
|
-
--animate-progress-fill:
|
|
66
|
-
--animate-pulse-soft:
|
|
67
|
-
--animate-shake:
|
|
68
|
-
--animate-bounce-in:
|
|
69
|
-
--animate-flip-in:
|
|
70
|
-
--animate-blur-in:
|
|
71
|
-
--animate-slide-up-fade:
|
|
72
|
-
|
|
73
|
-
@keyframes fade-in-up
|
|
74
|
-
@keyframes fade-in-down
|
|
75
|
-
@keyframes fade-in
|
|
76
|
-
@keyframes fade-out
|
|
77
|
-
@keyframes count-up
|
|
78
|
-
@keyframes slide-in-right { from { opacity:0; transform:translateX(20px);
|
|
79
|
-
@keyframes slide-in-left
|
|
80
|
-
@keyframes scale-in
|
|
54
|
+
--animate-slide-in-left: slide-in-left 0.35s ease both;
|
|
55
|
+
--animate-scale-in: scale-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
|
|
56
|
+
--animate-progress-fill: progress-fill 1s ease both;
|
|
57
|
+
--animate-pulse-soft: pulse-soft 2s ease-in-out infinite;
|
|
58
|
+
--animate-shake: shake 0.4s ease both;
|
|
59
|
+
--animate-bounce-in: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
|
|
60
|
+
--animate-flip-in: flip-in 0.4s ease both;
|
|
61
|
+
--animate-blur-in: blur-in 0.35s ease both;
|
|
62
|
+
--animate-slide-up-fade: slide-up-fade 0.3s ease both;
|
|
63
|
+
|
|
64
|
+
@keyframes fade-in-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
|
|
65
|
+
@keyframes fade-in-down { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
|
|
66
|
+
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
|
|
67
|
+
@keyframes fade-out { from { opacity:1; } to { opacity:0; } }
|
|
68
|
+
@keyframes count-up { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
|
|
69
|
+
@keyframes slide-in-right { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
|
|
70
|
+
@keyframes slide-in-left { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
|
|
71
|
+
@keyframes scale-in { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
|
|
81
72
|
@keyframes progress-fill { from { width: 0%; } }
|
|
82
|
-
@keyframes pulse-soft
|
|
83
|
-
@keyframes shake {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
@keyframes bounce-in { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
|
|
89
|
-
@keyframes flip-in { from { opacity:0; transform:rotateX(-30deg) translateY(8px); } to { opacity:1; transform:rotateX(0deg) translateY(0); } }
|
|
90
|
-
@keyframes blur-in { from { opacity:0; filter:blur(6px); transform:scale(0.97); } to { opacity:1; filter:blur(0px); transform:scale(1); } }
|
|
73
|
+
@keyframes pulse-soft { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
|
|
74
|
+
@keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } }
|
|
75
|
+
@keyframes bounce-in { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
|
|
76
|
+
@keyframes flip-in { from { opacity:0; transform:rotateX(-30deg) translateY(8px); } to { opacity:1; transform:rotateX(0deg) translateY(0); } }
|
|
77
|
+
@keyframes blur-in { from { opacity:0; filter:blur(6px); transform:scale(0.97); } to { opacity:1; filter:blur(0px); transform:scale(1); } }
|
|
91
78
|
@keyframes slide-up-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
|
|
92
|
-
@keyframes accordion-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
|
|
93
|
-
@keyframes accordion-close { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; opacity: 0; } }
|
|
94
|
-
@keyframes tz-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
|
|
95
|
-
@keyframes tz-bar-grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
|
|
96
79
|
@keyframes skeleton-shimmer { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
|
|
97
|
-
@keyframes slowSlideFade {
|
|
98
|
-
0% { transform:translateX(-120px); opacity:0; }
|
|
99
|
-
15% { transform:translateX(-80px); opacity:1; }
|
|
100
|
-
85% { transform:translateX(80px); opacity:1; }
|
|
101
|
-
100% { transform:translateX(120px); opacity:0; }
|
|
102
|
-
}
|
|
103
|
-
@keyframes thinPulse {
|
|
104
|
-
0%,100% { box-shadow:0 0 4px rgba(94,231,255,.15); background:rgba(94,231,255,.05); width:70px; height:2px; }
|
|
105
|
-
50% { box-shadow:0 0 14px rgba(94,231,255,.4); background:rgba(94,231,255,.15); width:90px; height:3px; }
|
|
106
|
-
}
|
|
107
80
|
}
|
|
108
81
|
|
|
109
|
-
|
|
110
|
-
|
|
82
|
+
:root {
|
|
83
|
+
color-scheme: dark;
|
|
84
|
+
|
|
85
|
+
/* Semantic design tokens: use these in new components and app code. */
|
|
86
|
+
--tapiz-bg-canvas: var(--color-ink-100);
|
|
87
|
+
--tapiz-bg-page: var(--color-ink-100);
|
|
88
|
+
--tapiz-bg-surface: var(--color-ink-200);
|
|
89
|
+
--tapiz-bg-surface-muted: var(--color-ink-300);
|
|
90
|
+
--tapiz-bg-surface-raised: #10151f;
|
|
91
|
+
--tapiz-bg-surface-inverse: #f8fafc;
|
|
92
|
+
--tapiz-bg-overlay: rgba(5, 6, 8, 0.74);
|
|
93
|
+
|
|
94
|
+
--tapiz-border-subtle: var(--color-border);
|
|
95
|
+
--tapiz-border-strong: var(--color-border-hi);
|
|
96
|
+
--tapiz-border-focus: var(--color-primary-300);
|
|
97
|
+
|
|
98
|
+
--tapiz-text-primary: var(--color-txt-1);
|
|
99
|
+
--tapiz-text-secondary: var(--color-txt-2);
|
|
100
|
+
--tapiz-text-muted: var(--color-txt-3);
|
|
101
|
+
--tapiz-text-disabled: var(--color-txt-4);
|
|
102
|
+
--tapiz-text-inverse: #050608;
|
|
103
|
+
|
|
104
|
+
--tapiz-accent: var(--color-primary-300);
|
|
105
|
+
--tapiz-accent-hover: var(--color-primary-400);
|
|
106
|
+
--tapiz-accent-soft: color-mix(in srgb, var(--color-primary-300) 12%, transparent);
|
|
107
|
+
--tapiz-accent-contrast: #000000;
|
|
108
|
+
--tapiz-signal: var(--color-signal-400);
|
|
109
|
+
--tapiz-signal-soft: color-mix(in srgb, var(--color-signal-400) 14%, transparent);
|
|
110
|
+
|
|
111
|
+
--tapiz-success: var(--color-good);
|
|
112
|
+
--tapiz-success-soft: color-mix(in srgb, var(--color-good) 12%, transparent);
|
|
113
|
+
--tapiz-warning: #ffb020;
|
|
114
|
+
--tapiz-warning-soft: rgba(255, 176, 32, 0.12);
|
|
115
|
+
--tapiz-danger: var(--color-warn);
|
|
116
|
+
--tapiz-danger-soft: rgba(255, 122, 77, 0.12);
|
|
117
|
+
--tapiz-info: var(--color-primary-300);
|
|
118
|
+
--tapiz-info-soft: color-mix(in srgb, var(--color-primary-300) 12%, transparent);
|
|
119
|
+
|
|
120
|
+
--tapiz-shadow-sm: 0 1px 0 rgba(255,255,255,0.04);
|
|
121
|
+
--tapiz-shadow-md: 0 16px 44px rgba(0,0,0,0.24);
|
|
122
|
+
--tapiz-shadow-lg: 0 28px 80px rgba(0,0,0,0.34);
|
|
123
|
+
--tapiz-shadow-brutal: 4px 4px 0 var(--tapiz-border-strong);
|
|
124
|
+
--tapiz-shadow-brutal-lg: 8px 8px 0 var(--tapiz-border-strong);
|
|
125
|
+
|
|
126
|
+
--tapiz-brutal-border: 2px solid var(--tapiz-border-strong);
|
|
127
|
+
--tapiz-brutal-shadow: var(--tapiz-shadow-brutal);
|
|
128
|
+
--tapiz-brutal-shadow-lg: var(--tapiz-shadow-brutal-lg);
|
|
129
|
+
|
|
130
|
+
--tapiz-space-page-x: clamp(1rem, 2vw, 2rem);
|
|
131
|
+
--tapiz-space-section-y: clamp(3rem, 7vw, 6rem);
|
|
132
|
+
--tapiz-motion-fast: 120ms ease;
|
|
133
|
+
--tapiz-motion-base: 180ms ease;
|
|
134
|
+
--tapiz-motion-spring: 240ms cubic-bezier(.2, .8, .2, 1);
|
|
135
|
+
|
|
136
|
+
--tapiz-surface-grid:
|
|
137
|
+
linear-gradient(var(--tapiz-border-subtle) 1px, transparent 1px),
|
|
138
|
+
linear-gradient(90deg, var(--tapiz-border-subtle) 1px, transparent 1px);
|
|
139
|
+
--tapiz-surface-noise:
|
|
140
|
+
radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--tapiz-accent) 14%, transparent), transparent 28rem),
|
|
141
|
+
radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--tapiz-signal) 10%, transparent), transparent 24rem);
|
|
142
|
+
|
|
143
|
+
--color-icon-bg: var(--color-primary-950);
|
|
144
|
+
--btn-primary-color: var(--tapiz-accent-contrast);
|
|
145
|
+
}
|
|
111
146
|
|
|
112
|
-
/*
|
|
113
|
-
LIGHT MODE OVERRIDES
|
|
114
|
-
*/
|
|
115
147
|
html:not(.dark) {
|
|
148
|
+
color-scheme: light;
|
|
149
|
+
|
|
116
150
|
--color-ink-000: #ffffff;
|
|
117
|
-
--color-ink-100: #
|
|
118
|
-
--color-ink-200: #
|
|
119
|
-
--color-ink-300: #
|
|
120
|
-
--color-ink-400: #
|
|
121
|
-
--color-ink-500: #
|
|
122
|
-
--color-border:
|
|
123
|
-
--color-border-hi: #
|
|
124
|
-
--color-txt-1: #
|
|
125
|
-
--color-txt-2: #
|
|
126
|
-
--color-txt-3: #
|
|
127
|
-
--color-txt-4: #
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
--color-primary-
|
|
131
|
-
--color-primary-
|
|
132
|
-
--color-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
--color-
|
|
136
|
-
--color-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
--
|
|
140
|
-
--
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
--
|
|
151
|
+
--color-ink-100: #f7f8fb;
|
|
152
|
+
--color-ink-200: #ffffff;
|
|
153
|
+
--color-ink-300: #eef1f6;
|
|
154
|
+
--color-ink-400: #d9dee8;
|
|
155
|
+
--color-ink-500: #bcc5d3;
|
|
156
|
+
--color-border: #d7dce6;
|
|
157
|
+
--color-border-hi: #aeb7c8;
|
|
158
|
+
--color-txt-1: #0b1020;
|
|
159
|
+
--color-txt-2: #263145;
|
|
160
|
+
--color-txt-3: #566276;
|
|
161
|
+
--color-txt-4: #7a8496;
|
|
162
|
+
|
|
163
|
+
--color-primary-300: #087d9c;
|
|
164
|
+
--color-primary-400: #066d89;
|
|
165
|
+
--color-primary-500: #075e75;
|
|
166
|
+
--color-signal-300: #6f950b;
|
|
167
|
+
--color-signal-400: #53720b;
|
|
168
|
+
--color-signal-500: #3f5a08;
|
|
169
|
+
--color-warn: #c4481f;
|
|
170
|
+
--color-good: #047857;
|
|
171
|
+
|
|
172
|
+
--tapiz-bg-canvas: #f7f8fb;
|
|
173
|
+
--tapiz-bg-page: #f7f8fb;
|
|
174
|
+
--tapiz-bg-surface: #ffffff;
|
|
175
|
+
--tapiz-bg-surface-muted: #eef1f6;
|
|
176
|
+
--tapiz-bg-surface-raised: #ffffff;
|
|
177
|
+
--tapiz-bg-surface-inverse: #050608;
|
|
178
|
+
--tapiz-bg-overlay: rgba(11, 16, 32, 0.45);
|
|
179
|
+
|
|
180
|
+
--tapiz-border-subtle: #d7dce6;
|
|
181
|
+
--tapiz-border-strong: #0b1020;
|
|
182
|
+
--tapiz-border-focus: var(--color-primary-300);
|
|
183
|
+
|
|
184
|
+
--tapiz-text-primary: #0b1020;
|
|
185
|
+
--tapiz-text-secondary: #263145;
|
|
186
|
+
--tapiz-text-muted: #566276;
|
|
187
|
+
--tapiz-text-disabled: #7a8496;
|
|
188
|
+
--tapiz-text-inverse: #ffffff;
|
|
189
|
+
|
|
190
|
+
--tapiz-accent: var(--color-primary-300);
|
|
191
|
+
--tapiz-accent-hover: var(--color-primary-400);
|
|
192
|
+
--tapiz-accent-soft: color-mix(in srgb, var(--color-primary-300) 10%, transparent);
|
|
193
|
+
--tapiz-accent-contrast: #ffffff;
|
|
194
|
+
--tapiz-signal: var(--color-signal-400);
|
|
195
|
+
--tapiz-signal-soft: color-mix(in srgb, var(--color-signal-400) 12%, transparent);
|
|
196
|
+
|
|
197
|
+
--tapiz-success: var(--color-good);
|
|
198
|
+
--tapiz-success-soft: rgba(4, 120, 87, 0.10);
|
|
199
|
+
--tapiz-warning: #b45309;
|
|
200
|
+
--tapiz-warning-soft: rgba(180, 83, 9, 0.10);
|
|
201
|
+
--tapiz-danger: var(--color-warn);
|
|
202
|
+
--tapiz-danger-soft: rgba(196, 72, 31, 0.10);
|
|
203
|
+
--tapiz-info: var(--color-primary-300);
|
|
204
|
+
--tapiz-info-soft: color-mix(in srgb, var(--color-primary-300) 10%, transparent);
|
|
205
|
+
|
|
206
|
+
--tapiz-shadow-sm: 0 1px 0 rgba(11,16,32,0.08);
|
|
207
|
+
--tapiz-shadow-md: 0 18px 42px rgba(11,16,32,0.08);
|
|
208
|
+
--tapiz-shadow-lg: 0 26px 80px rgba(11,16,32,0.12);
|
|
209
|
+
--tapiz-shadow-brutal: 4px 4px 0 #0b1020;
|
|
210
|
+
--tapiz-shadow-brutal-lg: 8px 8px 0 #0b1020;
|
|
211
|
+
--tapiz-brutal-border: 2px solid #0b1020;
|
|
144
212
|
|
|
145
|
-
|
|
146
|
-
--btn-primary-color:
|
|
213
|
+
--color-icon-bg: color-mix(in srgb, var(--color-primary-300) 12%, var(--color-ink-200));
|
|
214
|
+
--btn-primary-color: var(--tapiz-accent-contrast);
|
|
147
215
|
}
|
|
148
216
|
|
|
149
|
-
/*
|
|
150
|
-
BASE
|
|
151
|
-
*/
|
|
152
217
|
@layer base {
|
|
153
218
|
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
|
154
|
-
border-color: var(--
|
|
219
|
+
border-color: var(--tapiz-border-subtle, currentcolor);
|
|
155
220
|
border-radius: 0 !important;
|
|
156
221
|
}
|
|
157
222
|
|
|
158
|
-
html {
|
|
223
|
+
html, body {
|
|
224
|
+
background: var(--tapiz-bg-page);
|
|
225
|
+
color: var(--tapiz-text-primary);
|
|
159
226
|
font-family: var(--font-body);
|
|
160
227
|
letter-spacing: 0;
|
|
161
228
|
-webkit-font-smoothing: antialiased;
|
|
162
|
-
background: var(--color-ink-100);
|
|
163
|
-
color: var(--color-txt-1);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
body {
|
|
167
|
-
background: var(--color-ink-100);
|
|
168
|
-
color: var(--color-txt-1);
|
|
169
|
-
font-family: var(--font-body);
|
|
170
229
|
}
|
|
171
230
|
|
|
172
231
|
h1, h2, h3, h4 {
|
|
173
232
|
font-family: var(--font-display);
|
|
174
233
|
font-weight: 600;
|
|
175
|
-
letter-spacing: 0;
|
|
234
|
+
letter-spacing: -0.03em;
|
|
176
235
|
}
|
|
177
236
|
|
|
178
237
|
[class*="rounded"] { border-radius: 0 !important; }
|
|
179
238
|
|
|
180
239
|
html *:not([class*="animate-"]):not(.sliding-logo):not(.pulse-line) {
|
|
181
240
|
transition:
|
|
182
|
-
background-color
|
|
183
|
-
border-color
|
|
184
|
-
color
|
|
185
|
-
|
|
241
|
+
background-color var(--tapiz-motion-base),
|
|
242
|
+
border-color var(--tapiz-motion-base),
|
|
243
|
+
color var(--tapiz-motion-fast),
|
|
244
|
+
box-shadow var(--tapiz-motion-base),
|
|
245
|
+
transform var(--tapiz-motion-base);
|
|
186
246
|
}
|
|
187
247
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
.bg-gray-200 { background-color: var(--color-ink-400) !important; }
|
|
193
|
-
|
|
194
|
-
.border-gray-100,
|
|
195
|
-
.border-gray-200,
|
|
196
|
-
.border-gray-300 { border-color: var(--color-border) !important; }
|
|
197
|
-
hr { border-color: var(--color-border) !important; }
|
|
198
|
-
|
|
199
|
-
.text-gray-900, .text-gray-800 { color: var(--color-txt-1) !important; }
|
|
200
|
-
.text-gray-700, .text-gray-600 { color: var(--color-txt-2) !important; }
|
|
201
|
-
.text-gray-500, .text-gray-400 { color: var(--color-txt-3) !important; }
|
|
202
|
-
.text-gray-300 { color: var(--color-txt-4) !important; }
|
|
203
|
-
|
|
204
|
-
.hover\:bg-gray-50:hover { background-color: var(--color-ink-300) !important; }
|
|
205
|
-
.hover\:bg-gray-100:hover { background-color: var(--color-ink-400) !important; }
|
|
206
|
-
.hover\:text-gray-900:hover,
|
|
207
|
-
.hover\:text-gray-800:hover { color: var(--color-txt-1) !important; }
|
|
208
|
-
.hover\:text-gray-600:hover { color: var(--color-txt-2) !important; }
|
|
209
|
-
|
|
210
|
-
/* Kill shadows */
|
|
211
|
-
.shadow-sm, .shadow-md, .shadow-xl, .shadow-2xl { box-shadow: none !important; }
|
|
212
|
-
|
|
213
|
-
/* Inputs */
|
|
214
|
-
input, textarea {
|
|
215
|
-
background-color: var(--color-ink-100) !important;
|
|
216
|
-
border-color: var(--color-border-hi) !important;
|
|
217
|
-
color: var(--color-txt-1) !important;
|
|
218
|
-
}
|
|
219
|
-
input::placeholder, textarea::placeholder { color: var(--color-txt-4) !important; }
|
|
220
|
-
input:focus, textarea:focus {
|
|
221
|
-
border-color: var(--color-primary-300) !important;
|
|
222
|
-
box-shadow: inset 3px 0 0 0 var(--color-signal-400), 0 0 0 1px var(--color-primary-300) !important;
|
|
223
|
-
outline: none !important;
|
|
248
|
+
input, textarea, select {
|
|
249
|
+
background-color: var(--tapiz-bg-surface) !important;
|
|
250
|
+
border-color: var(--tapiz-border-strong) !important;
|
|
251
|
+
color: var(--tapiz-text-primary) !important;
|
|
224
252
|
}
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
253
|
+
input::placeholder, textarea::placeholder { color: var(--tapiz-text-disabled) !important; }
|
|
254
|
+
input:focus, textarea:focus, select:focus {
|
|
255
|
+
border-color: var(--tapiz-border-focus) !important;
|
|
256
|
+
box-shadow: inset 3px 0 0 0 var(--tapiz-signal), 0 0 0 1px var(--tapiz-border-focus) !important;
|
|
228
257
|
outline: none !important;
|
|
229
258
|
}
|
|
230
259
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
thead, thead tr { background-color: var(--color-ink-300) !important; }
|
|
260
|
+
table { color: var(--tapiz-text-secondary) !important; }
|
|
261
|
+
thead, thead tr { background-color: var(--tapiz-bg-surface-muted) !important; }
|
|
234
262
|
thead th {
|
|
235
|
-
background-color: var(--
|
|
236
|
-
color:
|
|
237
|
-
border-color:
|
|
238
|
-
font-family: var(--font-mono);
|
|
239
|
-
font-size: 10px;
|
|
240
|
-
letter-spacing: 0.18em;
|
|
241
|
-
text-transform: uppercase;
|
|
242
|
-
font-weight: 500;
|
|
243
|
-
}
|
|
244
|
-
tbody tr { background-color: var(--color-ink-200) !important; border-color: var(--color-border) !important; }
|
|
245
|
-
tbody tr:nth-child(even) { background-color: var(--color-ink-100) !important; }
|
|
246
|
-
tbody tr:hover { background-color: var(--color-ink-300) !important; }
|
|
247
|
-
tbody td, tbody th { color: var(--color-txt-2) !important; border-color: var(--color-border) !important; }
|
|
248
|
-
|
|
249
|
-
/* Cards */
|
|
250
|
-
.card, .stat-card {
|
|
251
|
-
background-color: var(--color-ink-200) !important;
|
|
252
|
-
border-color: var(--color-border) !important;
|
|
253
|
-
box-shadow: none !important;
|
|
254
|
-
}
|
|
255
|
-
header:not(.landing-nav) { background-color: var(--color-ink-200) !important; border-color: var(--color-border) !important; }
|
|
256
|
-
|
|
257
|
-
/* Primary cyan overrides */
|
|
258
|
-
.bg-primary-50 { background-color: color-mix(in srgb, var(--color-primary-300) 8%, var(--color-ink-300)) !important; }
|
|
259
|
-
.bg-primary-100 { background-color: color-mix(in srgb, var(--color-primary-300) 14%, var(--color-ink-300)) !important; }
|
|
260
|
-
.bg-primary-200 { background-color: color-mix(in srgb, var(--color-primary-300) 22%, var(--color-ink-300)) !important; }
|
|
261
|
-
.bg-primary-500 { background-color: var(--color-primary-300) !important; }
|
|
262
|
-
.bg-primary-600 { background-color: var(--color-primary-400) !important; }
|
|
263
|
-
.bg-primary-700 { background-color: var(--color-primary-300) !important; color: #fff !important; }
|
|
264
|
-
.bg-primary-800 { background-color: var(--color-primary-400) !important; }
|
|
265
|
-
.bg-primary-900 { background-color: var(--color-primary-600) !important; }
|
|
266
|
-
|
|
267
|
-
.text-primary-800, .text-primary-700 { color: var(--color-primary-300) !important; }
|
|
268
|
-
.text-primary-600, .text-primary-500 { color: var(--color-primary-400) !important; }
|
|
269
|
-
.text-primary-400 { color: var(--color-primary-500) !important; }
|
|
270
|
-
.text-primary-50 { color: #000 !important; }
|
|
271
|
-
|
|
272
|
-
.border-primary-100 { border-color: color-mix(in srgb, var(--color-primary-300) 35%, transparent) !important; }
|
|
273
|
-
.border-primary-200 { border-color: var(--color-border-hi) !important; }
|
|
274
|
-
.border-primary-300 { border-color: var(--color-primary-300) !important; }
|
|
275
|
-
.border-primary-500 { border-color: var(--color-primary-300) !important; }
|
|
276
|
-
.border-primary-600 { border-color: var(--color-primary-400) !important; }
|
|
277
|
-
|
|
278
|
-
.hover\:bg-primary-50:hover { background-color: var(--color-ink-300) !important; }
|
|
279
|
-
.hover\:bg-primary-100:hover { background-color: var(--color-ink-300) !important; }
|
|
280
|
-
.hover\:bg-primary-200:hover { background-color: var(--color-ink-400) !important; }
|
|
281
|
-
.hover\:bg-primary-800:hover { background-color: var(--color-primary-400) !important; }
|
|
282
|
-
.hover\:text-primary-700:hover { color: var(--color-primary-300) !important; }
|
|
283
|
-
.hover\:text-primary-600:hover { color: var(--color-primary-400) !important; }
|
|
284
|
-
.hover\:border-primary-300:hover { border-color: var(--color-primary-300) !important; }
|
|
285
|
-
|
|
286
|
-
.group:hover .group-hover\:text-primary-600 { color: var(--color-primary-300) !important; }
|
|
287
|
-
[class*="bg-primary-50"][class*="text-primary"] {
|
|
288
|
-
color: var(--color-primary-400) !important;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
/* Emerald signal lime */
|
|
292
|
-
.bg-emerald-400, .bg-green-400 { background-color: var(--color-signal-400) !important; }
|
|
293
|
-
.text-emerald-600, .text-green-600 { color: var(--color-good) !important; }
|
|
294
|
-
.animate-pulse { animation: tz-pulse 1.8s ease-in-out infinite !important; }
|
|
295
|
-
|
|
296
|
-
/* Red/danger */
|
|
297
|
-
.text-red-600 { color: var(--color-warn) !important; }
|
|
298
|
-
.bg-red-50 { background-color: rgba(255,122,77,.08) !important; }
|
|
299
|
-
.border-red-100 { border-color: rgba(255,122,77,.2) !important; }
|
|
300
|
-
.text-red-700 { color: var(--color-warn) !important; }
|
|
301
|
-
.hover\:bg-red-50:hover { background-color: rgba(255,122,77,.12) !important; }
|
|
302
|
-
|
|
303
|
-
/* Role badge */
|
|
304
|
-
.bg-primary-500.text-primary-50 {
|
|
305
|
-
background-color: transparent !important;
|
|
306
|
-
border: 1px solid var(--color-primary-300) !important;
|
|
307
|
-
color: var(--color-primary-300) !important;
|
|
263
|
+
background-color: var(--tapiz-bg-surface-muted) !important;
|
|
264
|
+
color: var(--tapiz-text-muted) !important;
|
|
265
|
+
border-color: var(--tapiz-border-subtle) !important;
|
|
308
266
|
font-family: var(--font-mono);
|
|
309
|
-
font-size:
|
|
310
|
-
letter-spacing: 0.
|
|
267
|
+
font-size: 10px;
|
|
268
|
+
letter-spacing: 0.18em;
|
|
311
269
|
text-transform: uppercase;
|
|
270
|
+
font-weight: 600;
|
|
312
271
|
}
|
|
272
|
+
tbody tr { background-color: var(--tapiz-bg-surface) !important; border-color: var(--tapiz-border-subtle) !important; }
|
|
273
|
+
tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--tapiz-bg-surface-muted) 36%, var(--tapiz-bg-surface)) !important; }
|
|
274
|
+
tbody tr:hover { background-color: var(--tapiz-bg-surface-muted) !important; }
|
|
275
|
+
tbody td, tbody th { color: var(--tapiz-text-secondary) !important; border-color: var(--tapiz-border-subtle) !important; }
|
|
276
|
+
|
|
277
|
+
.bg-white { background-color: var(--tapiz-bg-surface) !important; }
|
|
278
|
+
.bg-gray-50 { background-color: var(--tapiz-bg-page) !important; }
|
|
279
|
+
.bg-gray-100 { background-color: var(--tapiz-bg-surface-muted) !important; }
|
|
280
|
+
.bg-gray-200 { background-color: var(--color-ink-400) !important; }
|
|
281
|
+
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--tapiz-border-subtle) !important; }
|
|
282
|
+
hr { border-color: var(--tapiz-border-subtle) !important; }
|
|
283
|
+
.text-gray-900, .text-gray-800 { color: var(--tapiz-text-primary) !important; }
|
|
284
|
+
.text-gray-700, .text-gray-600 { color: var(--tapiz-text-secondary) !important; }
|
|
285
|
+
.text-gray-500, .text-gray-400 { color: var(--tapiz-text-muted) !important; }
|
|
286
|
+
.text-gray-300 { color: var(--tapiz-text-disabled) !important; }
|
|
313
287
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
.bg-zinc-200, .bg-slate-200 { background-color: var(--color-ink-300) !important; }
|
|
318
|
-
.border-zinc-100, .border-slate-100, .border-zinc-200, .border-slate-200 { border-color: var(--color-border) !important; }
|
|
319
|
-
.text-zinc-900,.text-slate-900,.text-zinc-700,.text-slate-700 { color: var(--color-txt-1) !important; }
|
|
320
|
-
.text-zinc-600,.text-slate-600,.text-zinc-500,.text-slate-500 { color: var(--color-txt-3) !important; }
|
|
321
|
-
|
|
322
|
-
/* Select */
|
|
323
|
-
select {
|
|
324
|
-
display: block;
|
|
325
|
-
background-color: var(--color-ink-100) !important;
|
|
326
|
-
border: 1px solid var(--color-border-hi) !important;
|
|
327
|
-
border-radius: 0 !important;
|
|
328
|
-
font-size: 0.875rem;
|
|
329
|
-
color: var(--color-txt-1) !important;
|
|
330
|
-
appearance: none;
|
|
331
|
-
-webkit-appearance: none;
|
|
332
|
-
padding-right: 2.25rem !important;
|
|
333
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%235ee7ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
|
|
334
|
-
background-repeat: no-repeat !important;
|
|
335
|
-
background-position: right 0.65rem center !important;
|
|
336
|
-
background-size: 1rem 1rem !important;
|
|
337
|
-
background-origin: padding-box !important;
|
|
338
|
-
}
|
|
339
|
-
select::-ms-expand { display: none; }
|
|
340
|
-
select option {
|
|
341
|
-
background: var(--color-ink-200);
|
|
342
|
-
color: var(--color-txt-1);
|
|
343
|
-
}
|
|
344
|
-
select:focus {
|
|
345
|
-
outline: none;
|
|
346
|
-
border-color: var(--color-primary-300) !important;
|
|
347
|
-
box-shadow: inset 3px 0 0 0 var(--color-signal-400) !important;
|
|
288
|
+
.card, .stat-card {
|
|
289
|
+
background-color: var(--tapiz-bg-surface) !important;
|
|
290
|
+
border-color: var(--tapiz-border-subtle) !important;
|
|
348
291
|
}
|
|
349
|
-
select:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
350
292
|
}
|
|
351
293
|
|
|
352
|
-
/*
|
|
353
|
-
DARK MODE primary surface overrides
|
|
354
|
-
*/
|
|
355
|
-
html.dark .bg-primary-50 { background-color: var(--color-primary-950) !important; }
|
|
356
|
-
html.dark .bg-primary-100 { background-color: color-mix(in srgb, var(--color-primary-300) 5%, var(--color-ink-200)) !important; }
|
|
357
|
-
html.dark .bg-primary-200 { background-color: color-mix(in srgb, var(--color-primary-300) 10%, var(--color-ink-200)) !important; }
|
|
358
|
-
html.dark .border-primary-100 { border-color: color-mix(in srgb, var(--color-primary-300) 12%, transparent) !important; }
|
|
359
|
-
html.dark .text-primary-700,
|
|
360
|
-
html.dark .text-primary-800 { color: var(--color-primary-300) !important; }
|
|
361
|
-
|
|
362
|
-
/*
|
|
363
|
-
KICKER
|
|
364
|
-
*/
|
|
365
294
|
.kicker {
|
|
366
295
|
font-family: var(--font-mono);
|
|
367
296
|
font-size: 10px;
|
|
368
297
|
letter-spacing: 0.18em;
|
|
369
298
|
text-transform: uppercase;
|
|
370
|
-
font-weight:
|
|
371
|
-
color: var(--
|
|
299
|
+
font-weight: 700;
|
|
300
|
+
color: var(--tapiz-accent);
|
|
372
301
|
}
|
|
373
302
|
|
|
374
|
-
.font-mono
|
|
303
|
+
.font-mono { font-family: var(--font-mono) !important; }
|
|
375
304
|
.font-display { font-family: var(--font-display) !important; }
|
|
376
305
|
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
background-image:
|
|
380
|
-
linear-gradient(var(--color-border) 1px, transparent 1px),
|
|
381
|
-
linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
|
|
306
|
+
.grid-bg, .tapiz-grid-bg {
|
|
307
|
+
background-image: var(--tapiz-surface-grid);
|
|
382
308
|
background-size: 24px 24px;
|
|
383
309
|
background-position: -1px -1px;
|
|
384
310
|
}
|
|
385
311
|
|
|
386
|
-
.
|
|
387
|
-
.
|
|
312
|
+
.tapiz-noise-bg { background-image: var(--tapiz-surface-noise); }
|
|
313
|
+
.tapiz-enterprise-shell { background: var(--tapiz-bg-page); color: var(--tapiz-text-primary); }
|
|
314
|
+
.tapiz-focus-ring:focus-visible { outline: 2px solid var(--tapiz-border-focus); outline-offset: 2px; }
|
|
388
315
|
|
|
389
|
-
/*
|
|
390
|
-
UTILITIES
|
|
391
|
-
*/
|
|
392
316
|
@utility btn-primary {
|
|
393
317
|
display: inline-flex;
|
|
394
318
|
align-items: center;
|
|
395
319
|
justify-content: center;
|
|
396
320
|
padding: 0.5rem 1rem;
|
|
397
|
-
background: var(--
|
|
321
|
+
background: var(--tapiz-accent);
|
|
398
322
|
color: var(--btn-primary-color);
|
|
399
323
|
font-family: var(--font-display);
|
|
400
324
|
font-size: 0.875rem;
|
|
401
|
-
font-weight:
|
|
402
|
-
border
|
|
403
|
-
box-shadow:
|
|
325
|
+
font-weight: 700;
|
|
326
|
+
border: 1px solid var(--tapiz-border-strong);
|
|
327
|
+
box-shadow: var(--tapiz-brutal-shadow);
|
|
404
328
|
cursor: pointer;
|
|
405
|
-
&:hover
|
|
406
|
-
&:active { transform: translate(1px,1px); box-shadow: 2px 2px 0
|
|
329
|
+
&:hover { transform: translate(-1px,-1px); box-shadow: var(--tapiz-brutal-shadow-lg); }
|
|
330
|
+
&:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--tapiz-border-strong); }
|
|
407
331
|
&:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
|
|
408
332
|
}
|
|
409
333
|
|
|
@@ -412,16 +336,15 @@ html.dark .text-primary-800 { color: var(--color-primary-300) !important; }
|
|
|
412
336
|
align-items: center;
|
|
413
337
|
justify-content: center;
|
|
414
338
|
padding: 0.5rem 1rem;
|
|
415
|
-
background:
|
|
416
|
-
color: var(--
|
|
339
|
+
background: var(--tapiz-bg-surface);
|
|
340
|
+
color: var(--tapiz-text-secondary);
|
|
417
341
|
font-family: var(--font-mono);
|
|
418
342
|
font-size: 0.875rem;
|
|
419
|
-
font-weight:
|
|
420
|
-
border: 1px solid var(--
|
|
421
|
-
border-radius: 0 !important;
|
|
343
|
+
font-weight: 600;
|
|
344
|
+
border: 1px solid var(--tapiz-border-strong);
|
|
422
345
|
cursor: pointer;
|
|
423
|
-
&:hover
|
|
424
|
-
&:active
|
|
346
|
+
&:hover { color: var(--tapiz-text-primary); border-color: var(--tapiz-accent); }
|
|
347
|
+
&:active { background: var(--tapiz-bg-surface-muted); }
|
|
425
348
|
&:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
426
349
|
}
|
|
427
350
|
|
|
@@ -430,343 +353,66 @@ html.dark .text-primary-800 { color: var(--color-primary-300) !important; }
|
|
|
430
353
|
align-items: center;
|
|
431
354
|
justify-content: center;
|
|
432
355
|
background: transparent;
|
|
433
|
-
color: var(--
|
|
356
|
+
color: var(--tapiz-danger);
|
|
434
357
|
font-family: var(--font-mono);
|
|
435
|
-
border: 1px solid var(--
|
|
436
|
-
border-radius: 0 !important;
|
|
358
|
+
border: 1px solid var(--tapiz-danger);
|
|
437
359
|
cursor: pointer;
|
|
438
|
-
&:hover { background:
|
|
360
|
+
&:hover { background: var(--tapiz-danger-soft); }
|
|
439
361
|
}
|
|
440
362
|
|
|
441
363
|
@utility input-field {
|
|
442
364
|
display: block;
|
|
443
365
|
width: 100%;
|
|
444
366
|
padding: 0.625rem 0.875rem;
|
|
445
|
-
background: var(--
|
|
446
|
-
border: 1px solid var(--
|
|
447
|
-
border-radius: 0 !important;
|
|
367
|
+
background: var(--tapiz-bg-surface);
|
|
368
|
+
border: 1px solid var(--tapiz-border-strong);
|
|
448
369
|
font-size: 0.875rem;
|
|
449
|
-
color: var(--
|
|
370
|
+
color: var(--tapiz-text-primary);
|
|
450
371
|
outline: none;
|
|
451
|
-
&::placeholder { color: var(--
|
|
452
|
-
&:focus {
|
|
453
|
-
border-color: var(--color-primary-300);
|
|
454
|
-
box-shadow: inset 3px 0 0 0 var(--color-signal-400);
|
|
455
|
-
}
|
|
372
|
+
&::placeholder { color: var(--tapiz-text-disabled); }
|
|
373
|
+
&:focus { border-color: var(--tapiz-border-focus); box-shadow: inset 3px 0 0 0 var(--tapiz-signal); }
|
|
456
374
|
}
|
|
457
375
|
|
|
458
376
|
@utility skeleton {
|
|
459
|
-
border-radius: 0 !important;
|
|
460
377
|
background: linear-gradient(90deg, var(--color-ink-300) 25%, var(--color-ink-400) 50%, var(--color-ink-300) 75%);
|
|
461
378
|
background-size: 800px 100%;
|
|
462
379
|
animation: skeleton-shimmer 1.5s infinite linear;
|
|
463
380
|
}
|
|
464
381
|
|
|
465
382
|
@utility card {
|
|
466
|
-
background: var(--
|
|
467
|
-
border: 1px solid var(--
|
|
468
|
-
|
|
469
|
-
box-shadow: none;
|
|
383
|
+
background: var(--tapiz-bg-surface);
|
|
384
|
+
border: 1px solid var(--tapiz-border-subtle);
|
|
385
|
+
box-shadow: var(--tapiz-shadow-sm);
|
|
470
386
|
padding: 1.25rem;
|
|
471
387
|
}
|
|
472
388
|
|
|
473
389
|
@utility form-panel {
|
|
474
|
-
background: var(--
|
|
475
|
-
border: 1px solid var(--
|
|
476
|
-
border-top: 2px solid var(--
|
|
477
|
-
|
|
478
|
-
box-shadow: none;
|
|
390
|
+
background: var(--tapiz-bg-surface);
|
|
391
|
+
border: 1px solid var(--tapiz-border-strong);
|
|
392
|
+
border-top: 2px solid var(--tapiz-accent);
|
|
393
|
+
box-shadow: var(--tapiz-shadow-sm);
|
|
479
394
|
padding: 1.25rem;
|
|
480
395
|
}
|
|
481
396
|
|
|
482
397
|
@utility stat-card {
|
|
483
|
-
background: var(--
|
|
484
|
-
border: 1px solid var(--
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
padding: 1.25rem;
|
|
488
|
-
display: flex;
|
|
489
|
-
flex-direction: column;
|
|
490
|
-
gap: 0.25rem;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
@utility label {
|
|
494
|
-
display: block;
|
|
495
|
-
font-size: 0.875rem;
|
|
496
|
-
font-weight: 500;
|
|
497
|
-
margin-bottom: 0.375rem;
|
|
498
|
-
color: var(--color-txt-2);
|
|
398
|
+
background: var(--tapiz-bg-surface);
|
|
399
|
+
border: 1px solid var(--tapiz-border-subtle);
|
|
400
|
+
box-shadow: var(--tapiz-shadow-sm);
|
|
401
|
+
padding: 1rem;
|
|
499
402
|
}
|
|
500
403
|
|
|
501
|
-
@utility hover-lift {
|
|
502
|
-
&:hover { transform: translate(-1px, -1px); }
|
|
503
|
-
}
|
|
504
404
|
@utility card-hover {
|
|
505
|
-
&:hover {
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
@utility animate-delay-50 { animation-delay: 50ms; }
|
|
509
|
-
@utility animate-delay-100 { animation-delay: 100ms; }
|
|
510
|
-
@utility animate-delay-150 { animation-delay: 150ms; }
|
|
511
|
-
@utility animate-delay-200 { animation-delay: 200ms; }
|
|
512
|
-
@utility animate-delay-250 { animation-delay: 250ms; }
|
|
513
|
-
@utility animate-delay-300 { animation-delay: 300ms; }
|
|
514
|
-
@utility animate-delay-350 { animation-delay: 350ms; }
|
|
515
|
-
@utility animate-delay-400 { animation-delay: 400ms; }
|
|
516
|
-
@utility animate-delay-500 { animation-delay: 500ms; }
|
|
517
|
-
@utility animate-delay-600 { animation-delay: 600ms; }
|
|
518
|
-
@utility animate-delay-700 { animation-delay: 700ms; }
|
|
519
|
-
|
|
520
|
-
/*
|
|
521
|
-
AUTH PANEL
|
|
522
|
-
*/
|
|
523
|
-
.auth-panel-bg {
|
|
524
|
-
background: var(--color-ink-200);
|
|
525
|
-
background-image:
|
|
526
|
-
linear-gradient(var(--color-border) 1px, transparent 1px),
|
|
527
|
-
linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
|
|
528
|
-
background-size: 24px 24px;
|
|
529
|
-
}
|
|
530
|
-
.auth-panel-sweep { background: none !important; }
|
|
531
|
-
|
|
532
|
-
/*
|
|
533
|
-
MOBILE NAV
|
|
534
|
-
*/
|
|
535
|
-
.mobile-nav-bar {
|
|
536
|
-
background: rgba(12,15,22,0.35) !important;
|
|
537
|
-
border-top-color: var(--color-border) !important;
|
|
405
|
+
&:hover { border-color: var(--tapiz-border-strong); box-shadow: var(--tapiz-shadow-md); transform: translateY(-1px); }
|
|
538
406
|
}
|
|
539
|
-
html:not(.dark) .mobile-nav-bar {
|
|
540
|
-
background: rgba(235,237,241,0.85) !important;
|
|
541
|
-
}
|
|
542
|
-
|
|
543
|
-
/*
|
|
544
|
-
LIGHT MODE PATCHES
|
|
545
|
-
*/
|
|
546
|
-
html:not(.dark) {
|
|
547
|
-
/* Select chevron in darker cyan for light backgrounds */
|
|
548
|
-
select {
|
|
549
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%230ea5c9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
/* Skeleton shimmer on light */
|
|
553
|
-
.skeleton, [class*="skeleton"] {
|
|
554
|
-
background: linear-gradient(90deg, var(--color-ink-300) 25%, var(--color-ink-400) 50%, var(--color-ink-300) 75%) !important;
|
|
555
|
-
}
|
|
556
407
|
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
/* btn-primary shadow in light uses same signal lime, keep */
|
|
563
|
-
.btn-secondary:active { background: var(--color-ink-300) !important; }
|
|
564
|
-
|
|
565
|
-
/* Role badge */
|
|
566
|
-
.bg-primary-500.text-primary-50 {
|
|
567
|
-
border-color: var(--color-primary-400) !important;
|
|
568
|
-
color: var(--color-primary-400) !important;
|
|
569
|
-
}
|
|
408
|
+
@utility tapiz-brutal-card {
|
|
409
|
+
background: var(--tapiz-bg-surface);
|
|
410
|
+
border: var(--tapiz-brutal-border);
|
|
411
|
+
box-shadow: var(--tapiz-brutal-shadow);
|
|
570
412
|
}
|
|
571
413
|
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
/* Landing page respects global theme */
|
|
579
|
-
.landing-shell {
|
|
580
|
-
background: var(--color-ink-100);
|
|
581
|
-
color: var(--color-txt-1);
|
|
582
|
-
}
|
|
583
|
-
.landing-shell section,
|
|
584
|
-
.landing-shell footer {
|
|
585
|
-
background: var(--color-ink-100) !important;
|
|
414
|
+
@utility tapiz-enterprise-card {
|
|
415
|
+
background: var(--tapiz-bg-surface);
|
|
416
|
+
border: 1px solid var(--tapiz-border-subtle);
|
|
417
|
+
box-shadow: var(--tapiz-shadow-md);
|
|
586
418
|
}
|
|
587
|
-
.landing-shell [class*="border-white/"] {
|
|
588
|
-
border-color: var(--color-border) !important;
|
|
589
|
-
}
|
|
590
|
-
.landing-shell [class*="bg-white/"] {
|
|
591
|
-
background-color: var(--color-ink-300) !important;
|
|
592
|
-
}
|
|
593
|
-
.landing-shell [class*="shadow"] {
|
|
594
|
-
box-shadow: none !important;
|
|
595
|
-
}
|
|
596
|
-
.landing-shell [class*="tracking-tight"],
|
|
597
|
-
.landing-shell [class*="tracking-tighter"] {
|
|
598
|
-
letter-spacing: 0 !important;
|
|
599
|
-
}
|
|
600
|
-
.landing-shell .landing-accent {
|
|
601
|
-
color: var(--color-primary-300) !important;
|
|
602
|
-
}
|
|
603
|
-
/* Dashboard mockup illustration always dark regardless of theme */
|
|
604
|
-
.dashboard-mockup-wrapper {
|
|
605
|
-
--color-ink-000: #050608;
|
|
606
|
-
--color-ink-100: #06080c;
|
|
607
|
-
--color-border: #1d2330;
|
|
608
|
-
--color-txt-1: #f1f4f9;
|
|
609
|
-
--color-txt-3: #6b7686;
|
|
610
|
-
--color-primary-300: #5ee7ff;
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
/* Landing text/bg overrides in light mode for any remaining hardcoded white classes */
|
|
614
|
-
html:not(.dark) .landing-shell .text-white { color: var(--color-txt-1) !important; }
|
|
615
|
-
html:not(.dark) .landing-shell .text-white\/90,
|
|
616
|
-
html:not(.dark) .landing-shell .text-white\/80,
|
|
617
|
-
html:not(.dark) .landing-shell .text-white\/70,
|
|
618
|
-
html:not(.dark) .landing-shell .text-white\/65,
|
|
619
|
-
html:not(.dark) .landing-shell .text-white\/60 { color: var(--color-txt-2) !important; }
|
|
620
|
-
html:not(.dark) .landing-shell .text-white\/50,
|
|
621
|
-
html:not(.dark) .landing-shell .text-white\/45,
|
|
622
|
-
html:not(.dark) .landing-shell .text-white\/40,
|
|
623
|
-
html:not(.dark) .landing-shell .text-white\/35,
|
|
624
|
-
html:not(.dark) .landing-shell .text-white\/30,
|
|
625
|
-
html:not(.dark) .landing-shell .text-white\/25 { color: var(--color-txt-3) !important; }
|
|
626
|
-
html:not(.dark) .landing-shell .text-white\/20,
|
|
627
|
-
html:not(.dark) .landing-shell .text-white\/15,
|
|
628
|
-
html:not(.dark) .landing-shell .text-white\/10 { color: var(--color-txt-4) !important; }
|
|
629
|
-
html:not(.dark) .landing-shell .bg-black\/40,
|
|
630
|
-
html:not(.dark) .landing-shell .bg-black\/60 { background-color: rgba(235,237,241,0.9) !important; }
|
|
631
|
-
html:not(.dark) .landing-shell .border-white\/10,
|
|
632
|
-
html:not(.dark) .landing-shell .border-white\/15,
|
|
633
|
-
html:not(.dark) .landing-shell .border-white\/20 { border-color: var(--color-border) !important; }
|
|
634
|
-
/* Landing navbar white background in light mode */
|
|
635
|
-
html:not(.dark) .landing-nav {
|
|
636
|
-
--color-ink-100: #ffffff;
|
|
637
|
-
--color-ink-200: #ffffff;
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
/* Any remaining inline dark backgrounds via utility classes */
|
|
641
|
-
html:not(.dark) .landing-shell .bg-white\/3,
|
|
642
|
-
html:not(.dark) .landing-shell .bg-white\/4,
|
|
643
|
-
html:not(.dark) .landing-shell .bg-white\/5 { background-color: var(--color-ink-200) !important; }
|
|
644
|
-
|
|
645
|
-
/*
|
|
646
|
-
LOADING SCREEN
|
|
647
|
-
*/
|
|
648
|
-
.track {
|
|
649
|
-
position: relative; width: 280px; height: 60px;
|
|
650
|
-
display: flex; align-items: center; justify-content: center; overflow: visible;
|
|
651
|
-
}
|
|
652
|
-
.pulse-line {
|
|
653
|
-
position: absolute; width: 70px; height: 2px;
|
|
654
|
-
background: rgba(94,231,255,.05);
|
|
655
|
-
animation: thinPulse 3.5s ease-in-out infinite; z-index: 1;
|
|
656
|
-
}
|
|
657
|
-
.sliding-logo { position: relative; z-index: 2; animation: slowSlideFade 5s ease-in-out infinite; }
|
|
658
|
-
.sliding-logo > div { transition: all 0.3s ease; }
|
|
659
|
-
|
|
660
|
-
/*
|
|
661
|
-
MISC
|
|
662
|
-
*/
|
|
663
|
-
.fade-in { animation: fade-in 0.2s ease-out; }
|
|
664
|
-
|
|
665
|
-
::-webkit-scrollbar { width:0 !important; height:0 !important; background:transparent !important; }
|
|
666
|
-
::-webkit-scrollbar-button { display:none !important; }
|
|
667
|
-
::-webkit-scrollbar-track,
|
|
668
|
-
::-webkit-scrollbar-thumb,
|
|
669
|
-
::-webkit-scrollbar-corner { background:transparent !important; display:none !important; }
|
|
670
|
-
* { scrollbar-width:none !important; -ms-overflow-style:none !important; }
|
|
671
|
-
|
|
672
|
-
/*
|
|
673
|
-
TIPTAP EDITOR
|
|
674
|
-
*/
|
|
675
|
-
.tiptap-editor .ProseMirror,
|
|
676
|
-
.tiptap-readonly .ProseMirror {
|
|
677
|
-
outline: none;
|
|
678
|
-
color: var(--color-txt-1);
|
|
679
|
-
font-size: 0.875rem;
|
|
680
|
-
line-height: 1.7;
|
|
681
|
-
}
|
|
682
|
-
|
|
683
|
-
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
|
|
684
|
-
content: attr(data-placeholder);
|
|
685
|
-
color: var(--color-txt-4);
|
|
686
|
-
pointer-events: none;
|
|
687
|
-
float: left;
|
|
688
|
-
height: 0;
|
|
689
|
-
}
|
|
690
|
-
|
|
691
|
-
/* Headings */
|
|
692
|
-
.tiptap-editor .ProseMirror h1,
|
|
693
|
-
.tiptap-readonly .ProseMirror h1 { font-size: 1.4rem; font-weight: 700; margin: 1rem 0 0.5rem; color: var(--color-txt-1); font-family: var(--font-display); }
|
|
694
|
-
.tiptap-editor .ProseMirror h2,
|
|
695
|
-
.tiptap-readonly .ProseMirror h2 { font-size: 1.15rem; font-weight: 600; margin: 0.9rem 0 0.4rem; color: var(--color-txt-1); font-family: var(--font-display); }
|
|
696
|
-
.tiptap-editor .ProseMirror h3,
|
|
697
|
-
.tiptap-readonly .ProseMirror h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.35rem; color: var(--color-txt-2); font-family: var(--font-display); }
|
|
698
|
-
|
|
699
|
-
/* Paragraph */
|
|
700
|
-
.tiptap-editor .ProseMirror p,
|
|
701
|
-
.tiptap-readonly .ProseMirror p { margin: 0 0 0.5rem; }
|
|
702
|
-
|
|
703
|
-
/* Lists */
|
|
704
|
-
.tiptap-editor .ProseMirror ul,
|
|
705
|
-
.tiptap-readonly .ProseMirror ul { list-style: disc; padding-left: 1.4rem; margin: 0.4rem 0; }
|
|
706
|
-
.tiptap-editor .ProseMirror ol,
|
|
707
|
-
.tiptap-readonly .ProseMirror ol { list-style: decimal; padding-left: 1.4rem; margin: 0.4rem 0; }
|
|
708
|
-
.tiptap-editor .ProseMirror li,
|
|
709
|
-
.tiptap-readonly .ProseMirror li { margin: 0.15rem 0; }
|
|
710
|
-
|
|
711
|
-
/* Blockquote */
|
|
712
|
-
.tiptap-editor .ProseMirror blockquote,
|
|
713
|
-
.tiptap-readonly .ProseMirror blockquote {
|
|
714
|
-
border-left: 3px solid var(--color-primary-300);
|
|
715
|
-
margin: 0.6rem 0;
|
|
716
|
-
padding: 0.4rem 0 0.4rem 1rem;
|
|
717
|
-
color: var(--color-txt-3);
|
|
718
|
-
background: rgba(94,231,255,0.04);
|
|
719
|
-
}
|
|
720
|
-
|
|
721
|
-
/* Inline code */
|
|
722
|
-
.tiptap-editor .ProseMirror code,
|
|
723
|
-
.tiptap-readonly .ProseMirror code {
|
|
724
|
-
font-family: var(--font-mono);
|
|
725
|
-
font-size: 0.82em;
|
|
726
|
-
background: rgba(94,231,255,0.08);
|
|
727
|
-
border: 1px solid rgba(94,231,255,0.15);
|
|
728
|
-
color: var(--color-primary-300);
|
|
729
|
-
padding: 0.1em 0.4em;
|
|
730
|
-
}
|
|
731
|
-
|
|
732
|
-
/* Code block */
|
|
733
|
-
.tiptap-code-block,
|
|
734
|
-
.tiptap-editor .ProseMirror pre,
|
|
735
|
-
.tiptap-readonly .ProseMirror pre {
|
|
736
|
-
font-family: var(--font-mono);
|
|
737
|
-
font-size: 0.8rem;
|
|
738
|
-
background: var(--color-ink-300);
|
|
739
|
-
border: 1px solid var(--color-border-hi);
|
|
740
|
-
border-left: 3px solid var(--color-primary-300);
|
|
741
|
-
padding: 0.8rem 1rem;
|
|
742
|
-
margin: 0.6rem 0;
|
|
743
|
-
overflow-x: auto;
|
|
744
|
-
color: var(--color-txt-2);
|
|
745
|
-
}
|
|
746
|
-
.tiptap-editor .ProseMirror pre code,
|
|
747
|
-
.tiptap-readonly .ProseMirror pre code {
|
|
748
|
-
background: none;
|
|
749
|
-
border: none;
|
|
750
|
-
padding: 0;
|
|
751
|
-
color: inherit;
|
|
752
|
-
font-size: inherit;
|
|
753
|
-
}
|
|
754
|
-
|
|
755
|
-
/* Links */
|
|
756
|
-
.tiptap-link,
|
|
757
|
-
.tiptap-editor .ProseMirror a,
|
|
758
|
-
.tiptap-readonly .ProseMirror a {
|
|
759
|
-
color: var(--color-primary-300);
|
|
760
|
-
text-decoration: underline;
|
|
761
|
-
text-underline-offset: 2px;
|
|
762
|
-
}
|
|
763
|
-
|
|
764
|
-
/* Strong / em */
|
|
765
|
-
.tiptap-editor .ProseMirror strong,
|
|
766
|
-
.tiptap-readonly .ProseMirror strong { color: var(--color-txt-1); font-weight: 700; }
|
|
767
|
-
.tiptap-editor .ProseMirror em,
|
|
768
|
-
.tiptap-readonly .ProseMirror em { color: var(--color-txt-2); }
|
|
769
|
-
|
|
770
|
-
/* Faculty branding logo */
|
|
771
|
-
.faculty-logo { filter: none; }
|
|
772
|
-
html.dark .faculty-logo { filter: invert(1); }
|