@djangocfg/ui-core 2.1.418 → 2.1.420

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.
Files changed (20) hide show
  1. package/README.md +85 -249
  2. package/package.json +13 -4
  3. package/src/components/data/BalancedText/BalancedText.tsx +74 -0
  4. package/src/components/data/BalancedText/README.md +29 -0
  5. package/src/components/data/BalancedText/hooks/useMaxLinesWidth.ts +79 -0
  6. package/src/components/data/BalancedText/hooks/useMeasuredFont.ts +35 -0
  7. package/src/components/data/BalancedText/index.ts +5 -0
  8. package/src/components/data/BalancedText/types.ts +59 -0
  9. package/src/components/index.ts +2 -0
  10. package/src/hooks/dom/index.ts +2 -0
  11. package/src/hooks/dom/useResizeObserver.ts +117 -0
  12. package/src/lib/index.ts +1 -0
  13. package/src/lib/intensity.ts +40 -0
  14. package/src/lib/pretext/index.ts +18 -0
  15. package/src/lib/pretext/pretext.types.ts +72 -0
  16. package/src/lib/pretext/use-pretext.ts +211 -0
  17. package/src/styles/README.md +45 -7
  18. package/src/styles/full.css +52 -0
  19. package/src/styles/index.css +22 -13
  20. package/src/styles/theme/tokens.css +6 -0
package/src/styles/index.css CHANGED
@@ -1,25 +1,34 @@
1
1
  /**
2
- * Unrealon UI Styles
3
- * Main entry point for @djangocfg/ui package styles
2
+ * @djangocfg/ui-core styles — token + base + utilities chain.
4
3
  *
5
- * Import order (critical for Tailwind v4):
6
- * 1. Theme variables FIRST (so Tailwind can use them)
7
- * 2. Tailwind CSS v4 (compiles with access to theme variables)
8
- * 3. Animation utilities (tw-animate-css for Tailwind v4)
9
- * 4. Base styles (override Tailwind defaults)
10
- * 5. Custom utilities (extend Tailwind utilities)
4
+ * IMPORTANT — this entry does NOT import Tailwind and does NOT wrap its
5
+ * CSS in cascade layers. base.css (the `*` border reset and the `body`
6
+ * background/font rules) and utilities.css are emitted UNLAYERED. In
7
+ * Tailwind v4 unlayered rules beat anything in `@layer utilities`, so
8
+ * whether these resets defeat layout utilities (gap, space-y, divide,
9
+ * flex, border, padding) depends entirely on where the consumer places
10
+ * its own `@import "tailwindcss"` and on the build tool — a real footgun
11
+ * (it broke a WKWebView/Vite consumer while rendering fine in Chrome).
11
12
  *
12
- * Usage: Import this file in your app's main CSS or _app.tsx
13
+ * Prefer the cascade-layer-safe golden path instead, which pins the
14
+ * resets/utilities to explicit layers so ordering can't go wrong:
15
+ *
16
+ * @import "@djangocfg/ui-core/styles/full"; // see full.css
17
+ *
18
+ * This `index.css` is kept for consumers that intentionally manage their
19
+ * own layer ordering (e.g. the Next.js demo, which imports tailwindcss
20
+ * itself AFTER this chain). theme.css must stay unlayered here so the
21
+ * `@theme` tokens and `:root`/`.dark` variables remain global.
13
22
  */
14
23
 
15
- /* 1. Theme variables MUST come first */
24
+ /* Theme variables + tokens (kept global so Tailwind reads @theme and :root/.dark apply everywhere). */
16
25
  @import "./theme.css";
17
26
 
18
- /* 2. Source detection for Tailwind v4 monorepo */
27
+ /* Source detection for Tailwind v4 monorepo. */
19
28
  @import "./sources.css";
20
29
 
21
- /* 3. Base styles */
30
+ /* Base styles — emitted unlayered; see header note. */
22
31
  @import "./base.css";
23
32
 
24
- /* 5. Custom utilities */
33
+ /* Custom utilities — emitted unlayered; see header note. */
25
34
  @import "./utilities.css";
package/src/styles/theme/tokens.css CHANGED
@@ -18,6 +18,12 @@
18
18
  * fully-wrapped CSS color (`hsl(0 0% 94%)`, not bare `0 0% 94%`).
19
19
  */
20
20
 
21
+ /* Tailwind v4: bind the `dark:` variant to the `.dark` class on any
22
+ * ancestor (Storybook + ThemeToggle set `<html class="dark">`).
23
+ * Without this, `dark:` defaults to `@media (prefers-color-scheme: dark)`
24
+ * and every `dark:text-X` utility is a no-op when toggling via class. */
25
+ @custom-variant dark (&:where(.dark, .dark *));
26
+
21
27
  @theme inline {
22
28
  /* Base semantic tokens — references into :root / .dark */
23
29
  --color-background: var(--background);