@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.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.
- package/README.md +12 -5
- package/dist/elements.js +1 -1
- package/dist/styles.css +11 -0
- package/dist/theme.css +48 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -38,14 +38,21 @@ markup, import the token layer as well and let your Tailwind build generate the
|
|
|
38
38
|
whole vocabulary:
|
|
39
39
|
|
|
40
40
|
```css
|
|
41
|
+
@import "@exsto/ds/styles.css";
|
|
41
42
|
@import "tailwindcss";
|
|
42
43
|
@import "@exsto/ds/theme.css";
|
|
43
|
-
@import "@exsto/ds/styles.css";
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
`
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
**The order matters, and `styles.css` has to come first.** It is a compiled
|
|
47
|
+
Tailwind build, so its utilities land in the same cascade layer as yours, and at
|
|
48
|
+
equal specificity the later rule wins. Import it after your Tailwind entry and
|
|
49
|
+
its unconditional `.hidden` beats your `.md:table-cell`: responsive columns
|
|
50
|
+
vanish, widths collapse. Library CSS before app CSS, as with any CSS dependency.
|
|
51
|
+
|
|
52
|
+
`theme.css` is uncompiled on purpose. It carries the tokens, the `.dark` scope,
|
|
53
|
+
the brand layer (Inter, `text-2xs`) and the `@theme` mapping Tailwind needs to
|
|
54
|
+
turn them into utilities. Do not copy that block into your app, or it will drift
|
|
55
|
+
from the design system.
|
|
49
56
|
|
|
50
57
|
Without it some token utilities still work, because our components happen to use
|
|
51
58
|
them, but the coverage is incidental: roughly half of `bg-*` and nearly every
|
|
@@ -89,7 +96,7 @@ supply your own sheet. Calling it more than once is harmless.
|
|
|
89
96
|
|---|---|
|
|
90
97
|
| `@exsto/ds` | React components (the default) |
|
|
91
98
|
| `@exsto/ds/styles.css` | Precompiled tokens and component styles |
|
|
92
|
-
| `@exsto/ds/theme.css` | Uncompiled tokens
|
|
99
|
+
| `@exsto/ds/theme.css` | Uncompiled tokens, brand layer, and the Tailwind `@theme` mapping |
|
|
93
100
|
| `@exsto/ds/elements` | `<edx-*>` custom elements and `registerElements()` |
|
|
94
101
|
|
|
95
102
|
## Status
|