@danxbot/ui 1.0.0 → 2.1.0

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/README.md CHANGED
@@ -96,15 +96,35 @@ persist or replay.
96
96
 
97
97
  ## Setup
98
98
 
99
- The stylesheet carries the tokens, the base layer and the self-hosted fonts.
100
- Import it once at your application root:
99
+ Two stylesheets, and you want both. In your application's Tailwind entry:
101
100
 
102
- ```tsx
103
- import "@danxbot/ui/styles.css";
101
+ ```css
102
+ @import "tailwindcss";
103
+ @import "@danxbot/ui/theme.css"; /* teaches YOUR build bg-surface, text-2xs, ... */
104
+ @import "@danxbot/ui/styles.css"; /* the token values, base layer and component CSS */
104
105
  ```
105
106
 
107
+ `styles.css` alone is not enough, and the way it falls short is silent.
108
+ It is compiled output, so it carries the token values plus exactly the
109
+ utilities *this library's own components* happen to use. Write `bg-surface`
110
+ in your app and it works; write `bg-accent-subtle` and you get a class that
111
+ resolves to nothing — no build error, no console warning, just a missing
112
+ background. Which utilities happen to work is an accident of our internals,
113
+ which is the worst possible contract to hand anybody.
114
+
115
+ `theme.css` closes that: it is the `@theme` bridge, extracted from source at
116
+ build time, mapping every semantic token onto Tailwind's namespaces so your own
117
+ build generates the same utilities ours does. It carries no token values and no
118
+ component CSS, so importing both duplicates almost nothing. **Order matters** —
119
+ `styles.css` must come after, because it supplies the values the bridge points at.
120
+
121
+ Not using Tailwind in your app? Import `styles.css` on its own and use the
122
+ components; the bridge only matters for utilities you write yourself.
123
+
106
124
  Fonts are self-hosted woff2 subsets rather than CDN-loaded, because a blocked
107
- CDN renders every design in a system font with no error anywhere.
125
+ CDN renders every design in a system font with no error anywhere. They are
126
+ pulled in by `styles.css`; `@danxbot/ui/fonts.css` exposes the `@font-face`
127
+ rules on their own if you need them separately.
108
128
 
109
129
  Preferences are read from `<html>` attributes so plain CSS and portalled content
110
130
  both see them: