@maxhealth.tech/prefab 0.2.21 → 0.2.24
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 +24 -4
- package/dist/app.d.ts +1 -1
- package/dist/app.js +1 -1
- package/dist/prefab.css +390 -70
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,12 +2,32 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
-
## [
|
|
5
|
+
## [0.2.23] — 2026-04-30
|
|
6
|
+
|
|
7
|
+
### Utility Classes
|
|
8
|
+
- **Added**: ~200 Tailwind-compatible utility classes in `prefab.css` — auto-renderers no longer require Tailwind CSS
|
|
9
|
+
- Categories: display, flexbox, gap, padding (px/py/pt/pb/pl/pr scales), margin (mx/my/mt/mb/ml/mr scales), width, height, max-width (xs–7xl), typography (text-xs–4xl, font weights, alignment, line-height, tracking), theme-aware text/bg colors, borders, rounded, shadows, overflow, position, z-index, opacity, cursor, transitions, sr-only
|
|
10
|
+
|
|
11
|
+
### Theme Fix
|
|
12
|
+
- **Fixed**: reverted to v0.2.20 theme behaviour after regressions in v0.2.21/v0.2.22
|
|
13
|
+
- `applyHostTheme()` sets `data-theme` from host `colorScheme` again — toggle works correctly in hosted mode
|
|
14
|
+
- `syncVsCodeTheme()` restored for standalone VS Code webviews (reads `data-vscode-theme-kind`, MutationObserver)
|
|
15
|
+
- `[data-theme]` blocks use static values only (no host var references) — prevents both blocks resolving identically
|
|
16
|
+
|
|
17
|
+
## [0.2.22] — 2026-04-29
|
|
18
|
+
|
|
19
|
+
### Host Theme Adaptation
|
|
20
|
+
- Separated host theming from toggle: `applyHostTheme()` no longer sets `data-theme`
|
|
21
|
+
- Removed `syncVsCodeTheme()` (later restored in v0.2.23)
|
|
22
|
+
|
|
23
|
+
## [0.2.21] — 2026-04-29
|
|
6
24
|
|
|
7
25
|
### Host Theme Adaptation
|
|
8
|
-
- **Fixed**:
|
|
9
|
-
-
|
|
10
|
-
-
|
|
26
|
+
- **Fixed**: hosted mode (Claude Desktop / VS Code) now adapts to host theme colors correctly
|
|
27
|
+
- `applyHostTheme()` no longer sets `data-theme` — host's inline CSS variables resolve through the `var()` fallback chain in `:root` / `@media dark` blocks automatically
|
|
28
|
+
- Removed `syncVsCodeTheme()` — VS Code's `--vscode-*` vars resolve through the same chain without needing `data-theme`
|
|
29
|
+
- `[data-theme]` blocks use static values only and are reserved for the standalone manual toggle
|
|
30
|
+
- Architecture: hosts control theme via inline vars (cascade), standalone controls via `data-theme` (static) — no conflict
|
|
11
31
|
|
|
12
32
|
## [0.2.20] — 2026-04-29
|
|
13
33
|
|
package/dist/app.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ import type { ComponentJSON } from './core/component.js';
|
|
|
9
9
|
import type { Action, ActionJSON } from './actions/types.js';
|
|
10
10
|
import type { PipeFn } from './rx/pipes.js';
|
|
11
11
|
/** Package version — injected by build script, updated at release time. */
|
|
12
|
-
export declare const VERSION = "0.2.
|
|
12
|
+
export declare const VERSION = "0.2.24";
|
|
13
13
|
export interface Theme {
|
|
14
14
|
light?: Record<string, string>;
|
|
15
15
|
dark?: Record<string, string>;
|
package/dist/app.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import {} from './core/component.js';
|
|
8
8
|
import { drainAutoState } from './rx/state-collector.js';
|
|
9
9
|
/** Package version — injected by build script, updated at release time. */
|
|
10
|
-
export const VERSION = '0.2.
|
|
10
|
+
export const VERSION = '0.2.24';
|
|
11
11
|
export class PrefabApp {
|
|
12
12
|
title;
|
|
13
13
|
view;
|
package/dist/prefab.css
CHANGED
|
@@ -111,85 +111,84 @@
|
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
/* Explicit dark override via data-theme attribute.
|
|
114
|
+
/* Explicit dark override via data-theme attribute (standalone toggle only).
|
|
115
115
|
Specificity (0,2,0) via :root[...] to beat the @media dark :root:not(...) rule.
|
|
116
|
-
|
|
117
|
-
In hosted mode (Claude/VS Code)
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
so the manual theme toggle produces correct colors. */
|
|
116
|
+
Static values only — NO host var references.
|
|
117
|
+
In hosted mode (Claude/VS Code), data-theme is never set; the host's inline
|
|
118
|
+
vars resolve through the var() chain in :root / @media-dark above.
|
|
119
|
+
data-theme is only set by the standalone theme toggle button. */
|
|
121
120
|
:root[data-theme="dark"] {
|
|
122
|
-
--background:
|
|
123
|
-
--foreground:
|
|
121
|
+
--background: #09090b;
|
|
122
|
+
--foreground: #fafafa;
|
|
124
123
|
|
|
125
|
-
--card:
|
|
126
|
-
--card-foreground:
|
|
124
|
+
--card: #111113;
|
|
125
|
+
--card-foreground: #fafafa;
|
|
127
126
|
|
|
128
|
-
--popover:
|
|
129
|
-
--popover-foreground:
|
|
127
|
+
--popover: #111113;
|
|
128
|
+
--popover-foreground: #fafafa;
|
|
130
129
|
|
|
131
|
-
--primary:
|
|
132
|
-
--primary-foreground:
|
|
130
|
+
--primary: #60a5fa;
|
|
131
|
+
--primary-foreground: #09090b;
|
|
133
132
|
|
|
134
|
-
--secondary:
|
|
135
|
-
--secondary-foreground:
|
|
133
|
+
--secondary: #1f2937;
|
|
134
|
+
--secondary-foreground: #f3f4f6;
|
|
136
135
|
|
|
137
|
-
--muted:
|
|
138
|
-
--muted-foreground:
|
|
136
|
+
--muted: #1f2937;
|
|
137
|
+
--muted-foreground: #9ca3af;
|
|
139
138
|
|
|
140
|
-
--accent:
|
|
141
|
-
--accent-foreground:
|
|
139
|
+
--accent: #1e3a5f;
|
|
140
|
+
--accent-foreground: #93c5fd;
|
|
142
141
|
|
|
143
|
-
--destructive:
|
|
144
|
-
--destructive-foreground:
|
|
142
|
+
--destructive: #f87171;
|
|
143
|
+
--destructive-foreground: #09090b;
|
|
145
144
|
|
|
146
|
-
--success:
|
|
147
|
-
--success-foreground:
|
|
145
|
+
--success: #4ade80;
|
|
146
|
+
--success-foreground: #09090b;
|
|
148
147
|
|
|
149
|
-
--warning:
|
|
150
|
-
--warning-foreground:
|
|
148
|
+
--warning: #fbbf24;
|
|
149
|
+
--warning-foreground: #09090b;
|
|
151
150
|
|
|
152
|
-
--border:
|
|
153
|
-
--input:
|
|
154
|
-
--ring:
|
|
151
|
+
--border: #27272a;
|
|
152
|
+
--input: #27272a;
|
|
153
|
+
--ring: #60a5fa;
|
|
155
154
|
}
|
|
156
155
|
|
|
157
|
-
/* Explicit light override via data-theme attribute.
|
|
158
|
-
Same specificity +
|
|
156
|
+
/* Explicit light override via data-theme attribute (standalone toggle only).
|
|
157
|
+
Same specificity + static strategy as the dark block above. */
|
|
159
158
|
:root[data-theme="light"] {
|
|
160
|
-
--background:
|
|
161
|
-
--foreground:
|
|
159
|
+
--background: #ffffff;
|
|
160
|
+
--foreground: #09090b;
|
|
162
161
|
|
|
163
|
-
--card:
|
|
164
|
-
--card-foreground:
|
|
162
|
+
--card: #ffffff;
|
|
163
|
+
--card-foreground: #09090b;
|
|
165
164
|
|
|
166
|
-
--popover:
|
|
167
|
-
--popover-foreground:
|
|
165
|
+
--popover: #ffffff;
|
|
166
|
+
--popover-foreground: #09090b;
|
|
168
167
|
|
|
169
|
-
--primary:
|
|
170
|
-
--primary-foreground:
|
|
168
|
+
--primary: #3b82f6;
|
|
169
|
+
--primary-foreground: #ffffff;
|
|
171
170
|
|
|
172
|
-
--secondary:
|
|
173
|
-
--secondary-foreground:
|
|
171
|
+
--secondary: #f3f4f6;
|
|
172
|
+
--secondary-foreground: #1f2937;
|
|
174
173
|
|
|
175
|
-
--muted:
|
|
176
|
-
--muted-foreground:
|
|
174
|
+
--muted: #f3f4f6;
|
|
175
|
+
--muted-foreground: #6b7280;
|
|
177
176
|
|
|
178
|
-
--accent:
|
|
179
|
-
--accent-foreground:
|
|
177
|
+
--accent: #eff6ff;
|
|
178
|
+
--accent-foreground: #1e40af;
|
|
180
179
|
|
|
181
|
-
--destructive:
|
|
182
|
-
--destructive-foreground:
|
|
180
|
+
--destructive: #ef4444;
|
|
181
|
+
--destructive-foreground: #ffffff;
|
|
183
182
|
|
|
184
|
-
--success:
|
|
185
|
-
--success-foreground:
|
|
183
|
+
--success: #22c55e;
|
|
184
|
+
--success-foreground: #ffffff;
|
|
186
185
|
|
|
187
|
-
--warning:
|
|
188
|
-
--warning-foreground:
|
|
186
|
+
--warning: #f59e0b;
|
|
187
|
+
--warning-foreground: #ffffff;
|
|
189
188
|
|
|
190
|
-
--border:
|
|
191
|
-
--input:
|
|
192
|
-
--ring:
|
|
189
|
+
--border: #e5e7eb;
|
|
190
|
+
--input: #e5e7eb;
|
|
191
|
+
--ring: #3b82f6;
|
|
193
192
|
}
|
|
194
193
|
|
|
195
194
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
@@ -910,25 +909,346 @@
|
|
|
910
909
|
}
|
|
911
910
|
|
|
912
911
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
913
|
-
20. UTILITY — Tailwind-
|
|
912
|
+
20. UTILITY — Tailwind-compatible helpers for cssClass
|
|
913
|
+
═══════════════════════════════════════════════════════════════════════════
|
|
914
|
+
All classes used by auto-renderers and builders are defined here so the
|
|
915
|
+
bundle works without Tailwind. The scale mirrors Tailwind's default
|
|
916
|
+
spacing (1 unit = 0.25rem) and typography tokens.
|
|
914
917
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
915
918
|
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
.
|
|
919
|
+
/* ── Display ──────────────────────────────────────────────────────────────── */
|
|
920
|
+
|
|
921
|
+
.block { display: block; }
|
|
922
|
+
.inline-block { display: inline-block; }
|
|
923
|
+
.inline { display: inline; }
|
|
924
|
+
.flex { display: flex; }
|
|
925
|
+
.inline-flex { display: inline-flex; }
|
|
926
|
+
.grid { display: grid; }
|
|
927
|
+
.hidden { display: none; }
|
|
928
|
+
|
|
929
|
+
/* ── Flexbox ──────────────────────────────────────────────────────────────── */
|
|
930
|
+
|
|
931
|
+
.flex-row { flex-direction: row; }
|
|
932
|
+
.flex-col { flex-direction: column; }
|
|
933
|
+
.flex-wrap { flex-wrap: wrap; }
|
|
934
|
+
.flex-nowrap { flex-wrap: nowrap; }
|
|
935
|
+
.flex-1 { flex: 1 1 0%; }
|
|
936
|
+
.flex-auto { flex: 1 1 auto; }
|
|
937
|
+
.flex-none { flex: none; }
|
|
938
|
+
.grow { flex-grow: 1; }
|
|
939
|
+
.grow-0 { flex-grow: 0; }
|
|
940
|
+
.shrink { flex-shrink: 1; }
|
|
941
|
+
.shrink-0 { flex-shrink: 0; }
|
|
942
|
+
|
|
943
|
+
.items-start { align-items: flex-start; }
|
|
944
|
+
.items-center { align-items: center; }
|
|
945
|
+
.items-end { align-items: flex-end; }
|
|
946
|
+
.items-stretch { align-items: stretch; }
|
|
947
|
+
.items-baseline { align-items: baseline; }
|
|
948
|
+
|
|
949
|
+
.justify-start { justify-content: flex-start; }
|
|
950
|
+
.justify-center { justify-content: center; }
|
|
951
|
+
.justify-end { justify-content: flex-end; }
|
|
952
|
+
.justify-between { justify-content: space-between; }
|
|
953
|
+
.justify-around { justify-content: space-around; }
|
|
954
|
+
.justify-evenly { justify-content: space-evenly; }
|
|
955
|
+
|
|
956
|
+
.self-start { align-self: flex-start; }
|
|
957
|
+
.self-center { align-self: center; }
|
|
958
|
+
.self-end { align-self: flex-end; }
|
|
959
|
+
.self-stretch { align-self: stretch; }
|
|
960
|
+
|
|
961
|
+
/* ── Gap ──────────────────────────────────────────────────────────────────── */
|
|
962
|
+
|
|
963
|
+
.gap-0 { gap: 0; } .gap-0\.5 { gap: 0.125rem; }
|
|
964
|
+
.gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; }
|
|
965
|
+
.gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; }
|
|
966
|
+
.gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; }
|
|
967
|
+
.gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
|
|
968
|
+
.gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; }
|
|
969
|
+
.gap-12 { gap: 3rem; } .gap-16 { gap: 4rem; }
|
|
970
|
+
|
|
971
|
+
/* ── Padding ──────────────────────────────────────────────────────────────── */
|
|
972
|
+
|
|
973
|
+
.p-0 { padding: 0; } .p-0\.5 { padding: 0.125rem; }
|
|
974
|
+
.p-1 { padding: 0.25rem; } .p-1\.5 { padding: 0.375rem; }
|
|
975
|
+
.p-2 { padding: 0.5rem; } .p-2\.5 { padding: 0.625rem; }
|
|
976
|
+
.p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; }
|
|
977
|
+
.p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
|
|
978
|
+
.p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; }
|
|
979
|
+
|
|
980
|
+
.px-0 { padding-left: 0; padding-right: 0; }
|
|
981
|
+
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
|
|
982
|
+
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
|
|
983
|
+
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
|
|
984
|
+
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
|
985
|
+
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
|
|
986
|
+
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
|
|
987
|
+
.px-8 { padding-left: 2rem; padding-right: 2rem; }
|
|
988
|
+
|
|
989
|
+
.py-0 { padding-top: 0; padding-bottom: 0; }
|
|
990
|
+
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
|
|
991
|
+
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
|
992
|
+
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
|
|
993
|
+
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
|
|
994
|
+
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
|
|
995
|
+
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
|
|
996
|
+
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
|
|
997
|
+
|
|
998
|
+
.pt-0 { padding-top: 0; } .pt-1 { padding-top: 0.25rem; }
|
|
999
|
+
.pt-2 { padding-top: 0.5rem; } .pt-3 { padding-top: 0.75rem; }
|
|
1000
|
+
.pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; }
|
|
1001
|
+
.pt-8 { padding-top: 2rem; }
|
|
1002
|
+
|
|
1003
|
+
.pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: 0.25rem; }
|
|
1004
|
+
.pb-2 { padding-bottom: 0.5rem; } .pb-3 { padding-bottom: 0.75rem; }
|
|
1005
|
+
.pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; }
|
|
1006
|
+
.pb-8 { padding-bottom: 2rem; }
|
|
1007
|
+
|
|
1008
|
+
.pl-0 { padding-left: 0; } .pl-2 { padding-left: 0.5rem; }
|
|
1009
|
+
.pl-4 { padding-left: 1rem; } .pl-6 { padding-left: 1.5rem; }
|
|
1010
|
+
|
|
1011
|
+
.pr-0 { padding-right: 0; } .pr-2 { padding-right: 0.5rem; }
|
|
1012
|
+
.pr-4 { padding-right: 1rem; } .pr-6 { padding-right: 1.5rem; }
|
|
1013
|
+
|
|
1014
|
+
/* ── Margin ───────────────────────────────────────────────────────────────── */
|
|
1015
|
+
|
|
1016
|
+
.m-0 { margin: 0; } .m-1 { margin: 0.25rem; }
|
|
1017
|
+
.m-2 { margin: 0.5rem; } .m-4 { margin: 1rem; }
|
|
1018
|
+
.m-auto { margin: auto; }
|
|
1019
|
+
|
|
1020
|
+
.mx-0 { margin-left: 0; margin-right: 0; }
|
|
1021
|
+
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
|
|
1022
|
+
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
|
|
1023
|
+
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
1024
|
+
|
|
1025
|
+
.my-0 { margin-top: 0; margin-bottom: 0; }
|
|
1026
|
+
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
|
|
1027
|
+
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
|
|
1028
|
+
|
|
1029
|
+
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; }
|
|
1030
|
+
.mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.5rem; }
|
|
1031
|
+
.mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
|
|
1032
|
+
.mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
|
|
1033
|
+
.mt-auto { margin-top: auto; }
|
|
1034
|
+
|
|
1035
|
+
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; }
|
|
1036
|
+
.mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; }
|
|
1037
|
+
.mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
|
|
1038
|
+
|
|
1039
|
+
.ml-0 { margin-left: 0; } .ml-2 { margin-left: 0.5rem; }
|
|
1040
|
+
.ml-4 { margin-left: 1rem; } .ml-auto { margin-left: auto; }
|
|
1041
|
+
|
|
1042
|
+
.mr-0 { margin-right: 0; } .mr-2 { margin-right: 0.5rem; }
|
|
1043
|
+
.mr-4 { margin-right: 1rem; } .mr-auto { margin-right: auto; }
|
|
1044
|
+
|
|
1045
|
+
/* ── Width ────────────────────────────────────────────────────────────────── */
|
|
1046
|
+
|
|
1047
|
+
.w-0 { width: 0; } .w-4 { width: 1rem; }
|
|
1048
|
+
.w-8 { width: 2rem; } .w-10 { width: 2.5rem; }
|
|
1049
|
+
.w-12 { width: 3rem; } .w-16 { width: 4rem; }
|
|
1050
|
+
.w-20 { width: 5rem; } .w-24 { width: 6rem; }
|
|
1051
|
+
.w-28 { width: 7rem; } .w-32 { width: 8rem; }
|
|
1052
|
+
.w-40 { width: 10rem; } .w-48 { width: 12rem; }
|
|
1053
|
+
.w-56 { width: 14rem; } .w-64 { width: 16rem; }
|
|
1054
|
+
.w-full { width: 100%; } .w-screen { width: 100vw; }
|
|
1055
|
+
.w-auto { width: auto; } .w-fit { width: fit-content; }
|
|
1056
|
+
.min-w-0 { min-width: 0; } .min-w-full { min-width: 100%; }
|
|
1057
|
+
|
|
1058
|
+
/* ── Height ───────────────────────────────────────────────────────────────── */
|
|
1059
|
+
|
|
1060
|
+
.h-0 { height: 0; } .h-1 { height: 0.25rem; }
|
|
1061
|
+
.h-2 { height: 0.5rem; } .h-3 { height: 0.75rem; }
|
|
1062
|
+
.h-4 { height: 1rem; } .h-6 { height: 1.5rem; }
|
|
1063
|
+
.h-8 { height: 2rem; } .h-10 { height: 2.5rem; }
|
|
1064
|
+
.h-12 { height: 3rem; } .h-16 { height: 4rem; }
|
|
1065
|
+
.h-20 { height: 5rem; } .h-24 { height: 6rem; }
|
|
1066
|
+
.h-32 { height: 8rem; } .h-40 { height: 10rem; }
|
|
1067
|
+
.h-48 { height: 12rem; } .h-64 { height: 16rem; }
|
|
1068
|
+
.h-full { height: 100%; } .h-screen { height: 100vh; }
|
|
1069
|
+
.h-auto { height: auto; } .h-fit { height: fit-content; }
|
|
1070
|
+
.min-h-0 { min-height: 0; } .min-h-full { min-height: 100%; }
|
|
1071
|
+
.min-h-screen { min-height: 100vh; }
|
|
1072
|
+
|
|
1073
|
+
/* ── Max-Width ────────────────────────────────────────────────────────────── */
|
|
1074
|
+
|
|
1075
|
+
.max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; }
|
|
1076
|
+
.max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; }
|
|
1077
|
+
.max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; }
|
|
1078
|
+
.max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; }
|
|
1079
|
+
.max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; }
|
|
1080
|
+
.max-w-7xl { max-width: 80rem; } .max-w-full { max-width: 100%; }
|
|
1081
|
+
.max-w-prose { max-width: 65ch; } .max-w-none { max-width: none; }
|
|
1082
|
+
|
|
1083
|
+
/* ── Typography ───────────────────────────────────────────────────────────── */
|
|
1084
|
+
|
|
1085
|
+
.text-xs { font-size: 0.75rem; line-height: 1rem; }
|
|
1086
|
+
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
|
|
1087
|
+
.text-base { font-size: 1rem; line-height: 1.5rem; }
|
|
1088
|
+
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
|
|
1089
|
+
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
|
|
1090
|
+
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
|
|
1091
|
+
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
|
|
1092
|
+
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
|
|
1093
|
+
|
|
1094
|
+
.font-thin { font-weight: 100; }
|
|
1095
|
+
.font-light { font-weight: 300; }
|
|
1096
|
+
.font-normal { font-weight: 400; }
|
|
1097
|
+
.font-medium { font-weight: 500; }
|
|
1098
|
+
.font-semibold { font-weight: 600; }
|
|
1099
|
+
.font-bold { font-weight: 700; }
|
|
1100
|
+
.font-extrabold { font-weight: 800; }
|
|
1101
|
+
|
|
1102
|
+
.italic { font-style: italic; }
|
|
1103
|
+
.not-italic { font-style: normal; }
|
|
1104
|
+
|
|
1105
|
+
.uppercase { text-transform: uppercase; }
|
|
1106
|
+
.lowercase { text-transform: lowercase; }
|
|
1107
|
+
.capitalize { text-transform: capitalize; }
|
|
1108
|
+
.normal-case { text-transform: none; }
|
|
1109
|
+
|
|
1110
|
+
.text-left { text-align: left; }
|
|
1111
|
+
.text-center { text-align: center; }
|
|
1112
|
+
.text-right { text-align: right; }
|
|
1113
|
+
|
|
1114
|
+
.leading-none { line-height: 1; }
|
|
1115
|
+
.leading-tight { line-height: 1.25; }
|
|
1116
|
+
.leading-snug { line-height: 1.375; }
|
|
1117
|
+
.leading-normal { line-height: 1.5; }
|
|
1118
|
+
.leading-relaxed { line-height: 1.625; }
|
|
1119
|
+
.leading-loose { line-height: 2; }
|
|
1120
|
+
|
|
1121
|
+
.tracking-tight { letter-spacing: -0.025em; }
|
|
1122
|
+
.tracking-normal { letter-spacing: 0; }
|
|
1123
|
+
.tracking-wide { letter-spacing: 0.025em; }
|
|
1124
|
+
|
|
1125
|
+
.tabular-nums { font-variant-numeric: tabular-nums; }
|
|
1126
|
+
.font-mono { font-family: var(--font-mono); }
|
|
1127
|
+
|
|
1128
|
+
.truncate {
|
|
1129
|
+
overflow: hidden;
|
|
1130
|
+
text-overflow: ellipsis;
|
|
1131
|
+
white-space: nowrap;
|
|
1132
|
+
}
|
|
1133
|
+
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
|
|
1134
|
+
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
|
|
1135
|
+
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
|
|
919
1136
|
|
|
920
|
-
.
|
|
921
|
-
.
|
|
922
|
-
.p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; }
|
|
1137
|
+
.whitespace-nowrap { white-space: nowrap; }
|
|
1138
|
+
.whitespace-pre { white-space: pre; }
|
|
923
1139
|
|
|
924
|
-
|
|
925
|
-
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
|
|
1140
|
+
/* ── Theme-Aware Text Colors ──────────────────────────────────────────────── */
|
|
926
1141
|
|
|
927
|
-
.
|
|
928
|
-
.
|
|
1142
|
+
.text-foreground { color: var(--foreground); }
|
|
1143
|
+
.text-muted-foreground { color: var(--muted-foreground); }
|
|
1144
|
+
.text-primary { color: var(--primary); }
|
|
1145
|
+
.text-primary-foreground { color: var(--primary-foreground); }
|
|
1146
|
+
.text-destructive { color: var(--destructive); }
|
|
1147
|
+
.text-success { color: var(--success); }
|
|
1148
|
+
.text-warning { color: var(--warning); }
|
|
929
1149
|
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
.
|
|
933
|
-
.
|
|
934
|
-
.
|
|
1150
|
+
/* ── Theme-Aware Background Colors ────────────────────────────────────────── */
|
|
1151
|
+
|
|
1152
|
+
.bg-background { background-color: var(--background); }
|
|
1153
|
+
.bg-card { background-color: var(--card); }
|
|
1154
|
+
.bg-muted { background-color: var(--muted); }
|
|
1155
|
+
.bg-primary { background-color: var(--primary); }
|
|
1156
|
+
.bg-secondary { background-color: var(--secondary); }
|
|
1157
|
+
.bg-accent { background-color: var(--accent); }
|
|
1158
|
+
.bg-destructive { background-color: var(--destructive); }
|
|
1159
|
+
.bg-success { background-color: var(--success); }
|
|
1160
|
+
.bg-warning { background-color: var(--warning); }
|
|
1161
|
+
.bg-transparent { background-color: transparent; }
|
|
1162
|
+
|
|
1163
|
+
/* ── Borders ──────────────────────────────────────────────────────────────── */
|
|
1164
|
+
|
|
1165
|
+
.border { border: 1px solid var(--border); }
|
|
1166
|
+
.border-0 { border-width: 0; }
|
|
1167
|
+
.border-2 { border-width: 2px; }
|
|
1168
|
+
.border-t { border-top: 1px solid var(--border); }
|
|
1169
|
+
.border-b { border-bottom: 1px solid var(--border); }
|
|
1170
|
+
.border-l { border-left: 1px solid var(--border); }
|
|
1171
|
+
.border-r { border-right: 1px solid var(--border); }
|
|
1172
|
+
|
|
1173
|
+
.rounded { border-radius: var(--radius); }
|
|
1174
|
+
.rounded-sm { border-radius: var(--radius-sm); }
|
|
1175
|
+
.rounded-lg { border-radius: calc(var(--radius) + 2px); }
|
|
1176
|
+
.rounded-xl { border-radius: calc(var(--radius) + 4px); }
|
|
1177
|
+
.rounded-2xl { border-radius: calc(var(--radius) + 8px); }
|
|
1178
|
+
.rounded-full { border-radius: 9999px; }
|
|
1179
|
+
.rounded-none { border-radius: 0; }
|
|
1180
|
+
|
|
1181
|
+
/* ── Shadows ──────────────────────────────────────────────────────────────── */
|
|
1182
|
+
|
|
1183
|
+
.shadow-sm { box-shadow: var(--shadow-sm); }
|
|
1184
|
+
.shadow-md { box-shadow: var(--shadow-md); }
|
|
1185
|
+
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
1186
|
+
.shadow-none { box-shadow: none; }
|
|
1187
|
+
|
|
1188
|
+
/* ── Overflow ─────────────────────────────────────────────────────────────── */
|
|
1189
|
+
|
|
1190
|
+
.overflow-hidden { overflow: hidden; }
|
|
1191
|
+
.overflow-auto { overflow: auto; }
|
|
1192
|
+
.overflow-scroll { overflow: scroll; }
|
|
1193
|
+
.overflow-visible { overflow: visible; }
|
|
1194
|
+
.overflow-x-auto { overflow-x: auto; }
|
|
1195
|
+
.overflow-y-auto { overflow-y: auto; }
|
|
1196
|
+
|
|
1197
|
+
/* ── Position ─────────────────────────────────────────────────────────────── */
|
|
1198
|
+
|
|
1199
|
+
.relative { position: relative; }
|
|
1200
|
+
.absolute { position: absolute; }
|
|
1201
|
+
.fixed { position: fixed; }
|
|
1202
|
+
.sticky { position: sticky; top: 0; }
|
|
1203
|
+
|
|
1204
|
+
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
|
|
1205
|
+
.top-0 { top: 0; } .right-0 { right: 0; }
|
|
1206
|
+
.bottom-0 { bottom: 0; } .left-0 { left: 0; }
|
|
1207
|
+
|
|
1208
|
+
/* ── Z-Index ──────────────────────────────────────────────────────────────── */
|
|
1209
|
+
|
|
1210
|
+
.z-0 { z-index: 0; } .z-10 { z-index: 10; }
|
|
1211
|
+
.z-20 { z-index: 20; } .z-30 { z-index: 30; }
|
|
1212
|
+
.z-40 { z-index: 40; } .z-50 { z-index: 50; }
|
|
1213
|
+
|
|
1214
|
+
/* ── Opacity ──────────────────────────────────────────────────────────────── */
|
|
1215
|
+
|
|
1216
|
+
.opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; }
|
|
1217
|
+
.opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; }
|
|
1218
|
+
.opacity-100 { opacity: 1; }
|
|
1219
|
+
|
|
1220
|
+
/* ── Cursor ───────────────────────────────────────────────────────────────── */
|
|
1221
|
+
|
|
1222
|
+
.cursor-pointer { cursor: pointer; }
|
|
1223
|
+
.cursor-default { cursor: default; }
|
|
1224
|
+
.cursor-not-allowed { cursor: not-allowed; }
|
|
1225
|
+
|
|
1226
|
+
/* ── Pointer Events ───────────────────────────────────────────────────────── */
|
|
1227
|
+
|
|
1228
|
+
.pointer-events-none { pointer-events: none; }
|
|
1229
|
+
.pointer-events-auto { pointer-events: auto; }
|
|
1230
|
+
|
|
1231
|
+
/* ── User Select ──────────────────────────────────────────────────────────── */
|
|
1232
|
+
|
|
1233
|
+
.select-none { user-select: none; }
|
|
1234
|
+
.select-text { user-select: text; }
|
|
1235
|
+
.select-all { user-select: all; }
|
|
1236
|
+
|
|
1237
|
+
/* ── Transitions ──────────────────────────────────────────────────────────── */
|
|
1238
|
+
|
|
1239
|
+
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
|
1240
|
+
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
|
|
1241
|
+
.transition-none { transition-property: none; }
|
|
1242
|
+
.duration-75 { transition-duration: 75ms; }
|
|
1243
|
+
.duration-100 { transition-duration: 100ms; }
|
|
1244
|
+
.duration-150 { transition-duration: 150ms; }
|
|
1245
|
+
.duration-200 { transition-duration: 200ms; }
|
|
1246
|
+
.duration-300 { transition-duration: 300ms; }
|
|
1247
|
+
|
|
1248
|
+
/* ── Screen Reader ────────────────────────────────────────────────────────── */
|
|
1249
|
+
|
|
1250
|
+
.sr-only {
|
|
1251
|
+
position: absolute; width: 1px; height: 1px; padding: 0;
|
|
1252
|
+
margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
|
|
1253
|
+
white-space: nowrap; border-width: 0;
|
|
1254
|
+
}
|
package/package.json
CHANGED