@mohasinac/appkit 3.6.1 → 3.6.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.
@@ -1,4 +1,76 @@
1
1
  /* Compiled by the appkit build step — do not edit directly.
2
2
  Source: appkit/tailwind.config.js + appkit/src/**
3
- Output: appkit/dist/tailwind-utilities.css (minified) */
4
- @tailwind utilities;
3
+ Output: appkit/dist/tailwind-utilities.css (minified)
4
+
5
+ Tailwind v4 migration (2026-08-16):
6
+ - appkit ships WITHOUT Preflight — the host app supplies the browser reset —
7
+ so instead of `@import "tailwindcss";` (which bundles preflight.css) the
8
+ theme + utilities layers are imported directly, skipping preflight.css.
9
+ v3's equivalent was `corePlugins: { preflight: false }`, which the v4
10
+ `@config` compat bridge does not support (see appkit/tailwind.config.js).
11
+ - `@config` keeps content/theme.extend/plugins/darkMode from the existing
12
+ JS config working exactly as they did under v3 — see
13
+ appkit/src/configs/tailwind.ts for what that config actually contains. */
14
+ @config "../tailwind.config.js";
15
+
16
+ @import "tailwindcss/theme.css" layer(theme);
17
+ @import "tailwindcss/utilities.css" layer(utilities);
18
+
19
+ /* v3 `darkMode: "class"` equivalent — dark: variant applies when a `.dark`
20
+ class is present on the element itself or an ancestor (matches the existing
21
+ ThemeProvider convention of toggling `.dark` on <html>). */
22
+ @custom-variant dark (&:where(.dark, .dark *));
23
+
24
+ /* Tailwind v4 disables automatic content auto-detection once a legacy config
25
+ is bridged in via `@config` (v3's `content` array in tailwind.config.js is
26
+ NOT used for scanning in v4 — @config only bridges theme.extend/plugins/
27
+ darkMode). */
28
+ @source "../src";
29
+
30
+ @theme {
31
+ /* Tailwind v4 changed the bare `ring` utility's default width from 3px to 1px
32
+ and its default color from blue-500 to currentColor. Confirmed via repo-wide
33
+ grep (2026-08-16) that no bare `ring` class (without a numeric suffix) is
34
+ used anywhere in appkit/src or the consumer's src — this is a zero-cost
35
+ safety net pinning v3 behavior, not a fix for an observed regression. */
36
+ --default-ring-width: 3px;
37
+ --default-ring-color: var(--color-blue-500);
38
+ }
39
+
40
+ /* Hand-written compensating rules for responsive-prefixed (`sm:`/`md:`/`lg:`/
41
+ `xl:`) utility classes that Tailwind v4's CLI genuinely never generates in
42
+ this build — confirmed 2026-08-16 via isolated CLI tests (both the
43
+ root-level and appkit-local tailwindcss v4.3.3 binaries, with and without
44
+ `@config`, with and without `@source`/`@source inline(...)`): unprefixed
45
+ utilities like `.hidden` or `.text-6xl` generate correctly, but NO
46
+ variant-prefixed utility of any kind was ever emitted, regardless of
47
+ scanning or explicit safelisting. This is the same underlying gap the
48
+ consumer's globals.css already works around by hand-writing its own
49
+ `.hidden`/`.block`/`.flex` breakpoint rules directly instead of relying on
50
+ Tailwind to generate them. This block covers the specific responsive
51
+ text-size classes `ui/components/Typography.tsx`'s
52
+ RESPONSIVE_TEXT_SIZE_CLASS map emits for the 6xl/7xl/8xl tier (used by the
53
+ homepage hero heading), using the exact same rem values Tailwind's own
54
+ default theme defines for text-6xl/7xl/8xl. Add further rules here only
55
+ for the specific variant-prefixed classes appkit components actually use
56
+ and Tailwind fails to generate — this is not a blanket escape hatch. */
57
+ @media (min-width: 40rem) {
58
+ .sm\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
59
+ .sm\:text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
60
+ .sm\:text-8xl { font-size: 6rem !important; line-height: 1 !important; }
61
+ }
62
+ @media (min-width: 48rem) {
63
+ .md\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
64
+ .md\:text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
65
+ .md\:text-8xl { font-size: 6rem !important; line-height: 1 !important; }
66
+ }
67
+ @media (min-width: 64rem) {
68
+ .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
69
+ .lg\:text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
70
+ .lg\:text-8xl { font-size: 6rem !important; line-height: 1 !important; }
71
+ }
72
+ @media (min-width: 80rem) {
73
+ .xl\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
74
+ .xl\:text-7xl { font-size: 4.5rem !important; line-height: 1 !important; }
75
+ .xl\:text-8xl { font-size: 6rem !important; line-height: 1 !important; }
76
+ }