@proyecto-viviana/ui 0.6.1 → 0.6.2
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 +14 -16
- package/dist/font-faces.css +13 -6
- package/package.json +3 -3
- package/src/font-faces.css +13 -6
package/README.md
CHANGED
|
@@ -21,7 +21,6 @@ npm install @proyecto-viviana/ui solid-js
|
|
|
21
21
|
import { Provider, Button } from "@proyecto-viviana/ui";
|
|
22
22
|
import { TextField } from "@proyecto-viviana/ui/TextField";
|
|
23
23
|
|
|
24
|
-
import "@proyecto-viviana/ui/theme.css";
|
|
25
24
|
import "@proyecto-viviana/ui/components.css";
|
|
26
25
|
|
|
27
26
|
export function App() {
|
|
@@ -42,31 +41,31 @@ The root barrel is convenient for examples and shared entry points.
|
|
|
42
41
|
Components do not inject CSS. Import the design-system CSS once at your app
|
|
43
42
|
entry.
|
|
44
43
|
|
|
45
|
-
Most apps
|
|
44
|
+
Most apps need one import — `components.css` already contains the other three:
|
|
46
45
|
|
|
47
46
|
```ts
|
|
48
|
-
import "@proyecto-viviana/ui/theme.css";
|
|
49
47
|
import "@proyecto-viviana/ui/components.css";
|
|
50
48
|
```
|
|
51
49
|
|
|
52
|
-
|
|
53
|
-
`components.css` contains font faces plus the generated component styles.
|
|
54
|
-
|
|
55
|
-
Apps that manage font loading themselves can import the two component-style
|
|
56
|
-
halves separately:
|
|
50
|
+
Apps that manage font loading themselves can import the halves separately:
|
|
57
51
|
|
|
58
52
|
```ts
|
|
59
53
|
import "@proyecto-viviana/ui/theme.css";
|
|
60
|
-
import "@proyecto-viviana/ui/font-faces.css";
|
|
61
54
|
import "@proyecto-viviana/ui/styles.css";
|
|
62
55
|
```
|
|
63
56
|
|
|
64
|
-
| Subpath | Contents
|
|
65
|
-
| ---------------- |
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `styles.css` | Generated component rules, without font faces or tokens.
|
|
69
|
-
| `font-faces.css` | Font-face declarations
|
|
57
|
+
| Subpath | Contents |
|
|
58
|
+
| ---------------- | ---------------------------------------------------------------- |
|
|
59
|
+
| `components.css` | `font-faces.css` + `theme.css` + `styles.css`. The usual import. |
|
|
60
|
+
| `theme.css` | Color-scheme tokens + Viviana brand `--color-*` variables. |
|
|
61
|
+
| `styles.css` | Generated component rules, without font faces or tokens. |
|
|
62
|
+
| `font-faces.css` | Font-face declarations, including the Geist register. |
|
|
63
|
+
|
|
64
|
+
Keep these as `@import` statements at the very top of your CSS entry, or as JS
|
|
65
|
+
imports before any other stylesheet. `font-faces.css` begins with a remote
|
|
66
|
+
`@import` for the Geist family, and CSS drops an `@import` that any rule
|
|
67
|
+
precedes — load it after your own rules and the Geist register silently falls
|
|
68
|
+
back to the default sans-serif.
|
|
70
69
|
|
|
71
70
|
### Using Tailwind alongside these styles
|
|
72
71
|
|
|
@@ -78,7 +77,6 @@ any import**:
|
|
|
78
77
|
@layer theme, base, _, L, components, utilities;
|
|
79
78
|
|
|
80
79
|
@import "tailwindcss";
|
|
81
|
-
@import "@proyecto-viviana/ui/theme.css";
|
|
82
80
|
@import "@proyecto-viviana/ui/components.css";
|
|
83
81
|
```
|
|
84
82
|
|
package/dist/font-faces.css
CHANGED
|
@@ -1,4 +1,16 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* Viviana UI v2 register faces: Geist Pixel (display) · Geist (body/ui) · Geist
|
|
2
|
+
Mono (terminal).
|
|
3
|
+
|
|
4
|
+
This @import must stay the first rule in the file. CSS requires @import to
|
|
5
|
+
precede every rule other than @charset and @layer statements; placed after
|
|
6
|
+
the @font-face blocks below it is invalid, so browsers drop it and bundlers
|
|
7
|
+
strip it from the output — the whole Geist register silently falls back to
|
|
8
|
+
the default sans-serif with no error anywhere. */
|
|
9
|
+
@import url("https://fonts.googleapis.com/css2?family=Geist+Pixel:ELSH@1..80&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;700;800&display=swap");
|
|
10
|
+
|
|
11
|
+
/* React Spectrum S2 font-face definitions. Upstream source: @react-spectrum/s2/src/font-faces.css.
|
|
12
|
+
Inlined here so this file is self-contained (no bare @import into
|
|
13
|
+
@proyecto-viviana/solid-spectrum). */
|
|
2
14
|
|
|
3
15
|
@font-face {
|
|
4
16
|
font-family: "adobe-clean-spectrum-vf";
|
|
@@ -240,8 +252,3 @@
|
|
|
240
252
|
font-weight: 400;
|
|
241
253
|
font-stretch: normal;
|
|
242
254
|
}
|
|
243
|
-
|
|
244
|
-
/* Viviana UI v2 register faces: Geist Pixel (display) · Geist (body/ui) · Geist
|
|
245
|
-
Mono (terminal). Inlined above are the upstream S2 typekit faces so this file
|
|
246
|
-
is self-contained (no bare @import into @proyecto-viviana/solid-spectrum). */
|
|
247
|
-
@import url("https://fonts.googleapis.com/css2?family=Geist+Pixel:ELSH@1..80&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;700;800&display=swap");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proyecto-viviana/ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
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": {
|
|
@@ -250,8 +250,8 @@
|
|
|
250
250
|
"@parcel/macros": "^2.16.4",
|
|
251
251
|
"csstype": "^3.2.3",
|
|
252
252
|
"@proyecto-viviana/solid-stately": "0.5.0",
|
|
253
|
-
"@proyecto-viviana/solidaria": "0.
|
|
254
|
-
"@proyecto-viviana/solidaria
|
|
253
|
+
"@proyecto-viviana/solidaria-components": "0.5.0",
|
|
254
|
+
"@proyecto-viviana/solidaria": "0.4.2"
|
|
255
255
|
},
|
|
256
256
|
"devDependencies": {
|
|
257
257
|
"solid-js": "^1.9.11",
|
package/src/font-faces.css
CHANGED
|
@@ -1,4 +1,16 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* Viviana UI v2 register faces: Geist Pixel (display) · Geist (body/ui) · Geist
|
|
2
|
+
Mono (terminal).
|
|
3
|
+
|
|
4
|
+
This @import must stay the first rule in the file. CSS requires @import to
|
|
5
|
+
precede every rule other than @charset and @layer statements; placed after
|
|
6
|
+
the @font-face blocks below it is invalid, so browsers drop it and bundlers
|
|
7
|
+
strip it from the output — the whole Geist register silently falls back to
|
|
8
|
+
the default sans-serif with no error anywhere. */
|
|
9
|
+
@import url("https://fonts.googleapis.com/css2?family=Geist+Pixel:ELSH@1..80&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;700;800&display=swap");
|
|
10
|
+
|
|
11
|
+
/* React Spectrum S2 font-face definitions. Upstream source: @react-spectrum/s2/src/font-faces.css.
|
|
12
|
+
Inlined here so this file is self-contained (no bare @import into
|
|
13
|
+
@proyecto-viviana/solid-spectrum). */
|
|
2
14
|
|
|
3
15
|
@font-face {
|
|
4
16
|
font-family: "adobe-clean-spectrum-vf";
|
|
@@ -240,8 +252,3 @@
|
|
|
240
252
|
font-weight: 400;
|
|
241
253
|
font-stretch: normal;
|
|
242
254
|
}
|
|
243
|
-
|
|
244
|
-
/* Viviana UI v2 register faces: Geist Pixel (display) · Geist (body/ui) · Geist
|
|
245
|
-
Mono (terminal). Inlined above are the upstream S2 typekit faces so this file
|
|
246
|
-
is self-contained (no bare @import into @proyecto-viviana/solid-spectrum). */
|
|
247
|
-
@import url("https://fonts.googleapis.com/css2?family=Geist+Pixel:ELSH@1..80&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;700;800&display=swap");
|