@proyecto-viviana/ui 0.6.0 → 0.6.1
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 +27 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -68,6 +68,33 @@ import "@proyecto-viviana/ui/styles.css";
|
|
|
68
68
|
| `styles.css` | Generated component rules, without font faces or tokens. |
|
|
69
69
|
| `font-faces.css` | Font-face declarations only. |
|
|
70
70
|
|
|
71
|
+
### Using Tailwind alongside these styles
|
|
72
|
+
|
|
73
|
+
The library ships no Tailwind and requires none. If your app uses Tailwind, the
|
|
74
|
+
two coexist — but only if you declare the cascade layer order yourself, **before
|
|
75
|
+
any import**:
|
|
76
|
+
|
|
77
|
+
```css
|
|
78
|
+
@layer theme, base, _, L, components, utilities;
|
|
79
|
+
|
|
80
|
+
@import "tailwindcss";
|
|
81
|
+
@import "@proyecto-viviana/ui/theme.css";
|
|
82
|
+
@import "@proyecto-viviana/ui/components.css";
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
`_` and `L` are the layers our generated component rules live in. Layer order is
|
|
86
|
+
otherwise decided by first appearance, and both possible accidents are silent:
|
|
87
|
+
|
|
88
|
+
- **No declaration.** Tailwind's sheet is seen first, so our layers sort last and
|
|
89
|
+
win. A `bg-red-500` on one of our components does nothing at all — the class is
|
|
90
|
+
in the DOM, the color never applies.
|
|
91
|
+
- **Our layers first.** Tailwind's Preflight (`@layer base`) then outranks us, and
|
|
92
|
+
its `button { background-color: transparent }` strips our components back to
|
|
93
|
+
bare.
|
|
94
|
+
|
|
95
|
+
The order above is the only one that gets both halves right: Preflight cannot
|
|
96
|
+
reach our components, and Tailwind utilities still override them.
|
|
97
|
+
|
|
71
98
|
## Authoring `style()`
|
|
72
99
|
|
|
73
100
|
Using the published components does not require a macro plugin. Their styles are
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proyecto-viviana/ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "Viviana design system. A reskinned fork of @proyecto-viviana/solid-spectrum: the styled top layer is duplicated and remapped to the Viviana v2 (Glasselated) register, over the shared solidaria headless stack.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -249,9 +249,9 @@
|
|
|
249
249
|
"@adobe/spectrum-tokens": "14.0.0",
|
|
250
250
|
"@parcel/macros": "^2.16.4",
|
|
251
251
|
"csstype": "^3.2.3",
|
|
252
|
-
"@proyecto-viviana/solid-stately": "0.
|
|
253
|
-
"@proyecto-viviana/solidaria": "0.4.
|
|
254
|
-
"@proyecto-viviana/solidaria-components": "0.
|
|
252
|
+
"@proyecto-viviana/solid-stately": "0.5.0",
|
|
253
|
+
"@proyecto-viviana/solidaria": "0.4.2",
|
|
254
|
+
"@proyecto-viviana/solidaria-components": "0.5.0"
|
|
255
255
|
},
|
|
256
256
|
"devDependencies": {
|
|
257
257
|
"solid-js": "^1.9.11",
|