@getvitops/astro 0.4.1 → 0.7.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.
Files changed (3) hide show
  1. package/CHANGELOG.md +149 -0
  2. package/README.md +85 -0
  3. package/package.json +7 -6
package/CHANGELOG.md ADDED
@@ -0,0 +1,149 @@
1
+ # @getvitops/astro
2
+
3
+ ## 0.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 44de07f: Split the button pattern into two tiers named by intent: `.cta` (persuasion) and `.btn`
8
+ (affordance).
9
+
10
+ **Breaking: a bare `<button>` is no longer a filled brand-primary button.** It now renders as a
11
+ quiet interactive control — geometry, cursor, subtle hover, focus ring — with no fill, no
12
+ `font-weight: 600`, and no shadow.
13
+
14
+ **Migration:** add `class="cta"` to any button that should stay prominent. Submit buttons, hero
15
+ actions, and anything driving a conversion are the usual candidates; dialog closes, toolbar
16
+ buttons, icon buttons and toggles should keep the new default. If you want the old behaviour
17
+ globally, set `patterns.items.btn` in your `design-system.json` back to the previous filled base.
18
+
19
+ New in this release:
20
+ - **`.cta`** — filled, bolder, roomier, lifts on hover. It is a class, not an element rule, so it
21
+ finally works on `<a>` — which is what a call to action usually is, since it navigates. Role
22
+ variants: `.cta-{success,danger,warning,info}`.
23
+ - **`.btn`** — the affordance tier. Emitted as one zero-specificity `:where(button, .btn)` rule, so
24
+ a bare `<button>` gets it with no class, `.btn` carries it to any other tag, and any explicit
25
+ class (including `.cta`, or a component's own class) overrides it without `!important`.
26
+ - **`:where(a, .link)`** — the link pattern now pairs its element with a class the same way.
27
+ - A pattern may now set **both `element` and `class`**, emitting one combined
28
+ `:where(<element>, .<class>)` rule. This is the general mechanism behind the above.
29
+ - A pattern may declare **`fill: true|false`** to state whether states and role variants drive
30
+ `background-color` (plus `on-solid` text) or `color`, instead of relying on the previous
31
+ inference from the pattern's name and base declarations. Existing configs are unaffected — the
32
+ old inference is still the fallback.
33
+
34
+ **Breaking: `chip` is retired as vocabulary.** The two small-label patterns are now split by
35
+ behaviour, not size: **`badge`** is a _static_ label (status, count, category) and **`tag`** is an
36
+ _editable and/or dismissable_ one (e.g. entries in a filter list).
37
+ - `.chip-list` → **`.tag-list`**, and its `--*-chip-list` / `--chip-list-focus-color` tokens →
38
+ `--*-tag-list` / `--tag-list-focus-color`.
39
+ - `.chip-list__chip` and `.chip-list__chip-remove` are **removed**. A tag list is a list of tags, so
40
+ its items are now the existing `.tag` / `.tag__remove` — which also means they pick up tag role
41
+ variants. **Migration:** replace `<span class="chip-list__chip">x <button
42
+ class="chip-list__chip-remove">` with `<span class="tag">x <button class="tag__remove">`. Note the
43
+ items change appearance: `.tag` is outlined (border + neutral text) where the old chip was filled
44
+ with `--color-surface-muted`.
45
+ - The `radii.chip` primitive is **removed** from the example config; it was only ever an alias of
46
+ `--br-tag`. Consumers who set `--br-chip` should use `--br-tag`.
47
+
48
+ **Pattern geometry now resolves through the group alias layer.** Every grouped pattern already
49
+ emitted `--<prop>-<name>-group` aliases (e.g. `--br-btn-group: var(--br-control)`), but most
50
+ patterns bypassed them and hard-coded `var(--br-control, …)` into the rule. `btn`, `cta`, `badge`,
51
+ `tag`, `card` and `status` now reference the alias and restate only their deviations via
52
+ `overrides`, so the whole chain — `--p-btn` → `--p-btn-group` → `--p-control` → `--p-default` — is
53
+ live CSS custom properties, inspectable and editable in the browser. Computed values are unchanged.
54
+
55
+ Also fixed:
56
+ - Role variants on element patterns were emitted at specificity 0-1-1 (`button.danger`), which
57
+ outranked any plain class. They now emit as `:where(button, .btn).danger, .btn-danger` — both at
58
+ class specificity, and reachable from a non-`<button>` host.
59
+ - The `link` pattern declared `default_role: "brand-primary"` while hard-coding a `ui-primary` base
60
+ colour, so hovering shifted hue instead of intensifying. Its `default_role` is now `ui-primary`.
61
+ - `@getvitops/astro`'s `FormRenderer` defaulted its submit button to `class="btn btn-primary"`, a
62
+ class that never existed and a role that is not emitted; it now defaults to `.cta`.
63
+ - The Tailwind bundle is no longer assembled during `css` / `bricks` builds, where it was computed
64
+ and discarded (it also read every framework partial off disk).
65
+
66
+ ### Patch Changes
67
+
68
+ - @getvitops/core@0.7.0
69
+ - @getvitops/generator@0.7.0
70
+ - @getvitops/utils@0.7.0
71
+ - @getvitops/vite@0.7.0
72
+
73
+ ## 0.4.2
74
+
75
+ ### Patch Changes
76
+
77
+ - Updated dependencies [2cc847d]
78
+ - @getvitops/generator@0.6.0
79
+ - @getvitops/vite@0.6.0
80
+ - @getvitops/core@0.6.0
81
+ - @getvitops/utils@0.6.0
82
+
83
+ ## 0.4.1
84
+
85
+ ### Patch Changes
86
+
87
+ - Updated dependencies
88
+ - @getvitops/generator@0.5.0
89
+ - @getvitops/vite@0.5.0
90
+ - @getvitops/core@0.5.0
91
+ - @getvitops/utils@0.5.0
92
+
93
+ ## 0.4.0
94
+
95
+ ### Minor Changes
96
+
97
+ - 54a06e9: Add `css.inject` option to `getvitops()` (default `true`). Set `inject: false` to stop the global `page-ssr` stylesheet injection and import the generated CSS from your site layout instead — needed when other integrations add routes that must not inherit the design system (e.g. EmDash's `/_emdash/admin`, which the auto-injected CSS was bleeding into).
98
+
99
+ ## 0.3.1
100
+
101
+ ### Patch Changes
102
+
103
+ - d7e6491: Extract schema.org JSON-LD graph builders (articleGraph/organizationGraph/breadcrumbGraph/faqGraph) into @getvitops/utils so platform hooks (e.g. the new @getvitops/emdash plugin's future page:metadata contributions) can share them; the corresponding schemas/\*.astro become thin wrappers. Also removes Layout.astro's import of the deleted Polyfills.astro.
104
+ - Updated dependencies [d7e6491]
105
+ - @getvitops/utils@0.4.0
106
+ - @getvitops/core@0.4.0
107
+ - @getvitops/generator@0.4.0
108
+ - @getvitops/vite@0.4.0
109
+
110
+ ## 0.3.0
111
+
112
+ ### Minor Changes
113
+
114
+ - Extract the framework-agnostic content model + HTML helpers into `@getvitops/utils`
115
+ (new `content`/`html` exports: `Elmnt`/`Link`/`ContentNode` types + guards, `t`,
116
+ `partAttrs`, `parseRenderedSlots`, `toHtml`, `nodesToHtml`, `styleList`, …), and ship
117
+ the generic Astro component tier from `@getvitops/astro/components/*`: `Subgrid`,
118
+ `Cards`, `NodeRenderer`, `WebComponentLoader`, plus `Popover`/`Details`/`Drawer`
119
+ (the latter three use `astro-icon`, now declared as an optional peer). Config-bound
120
+ chrome (Template/SEO/ContentInfo/FormRenderer/Nav/Submenu) stays internal pending the
121
+ EmDash integration.
122
+
123
+ ### Patch Changes
124
+
125
+ - Updated dependencies
126
+ - @getvitops/utils@0.3.0
127
+ - @getvitops/core@0.3.0
128
+ - @getvitops/generator@0.3.0
129
+ - @getvitops/vite@0.3.0
130
+
131
+ ## 0.2.0
132
+
133
+ ### Minor Changes
134
+
135
+ - 4d89eca: Add Schema.org / JSON-LD structured-data components, exported at `@getvitops/astro/schemas/*`
136
+ (`Article`, `Organization`, `LocalBusiness`, `Product`, `Review`, `Event`, `FAQ`, `Recipe`,
137
+ `Breadcrumb`, `JobPosting`, and more) — each emits a typed `<script type="application/ld+json">`
138
+ block at SSR time with no runtime JS. `Head.astro` moved to `src/components/` (the public
139
+ `@getvitops/astro/Head.astro` import is unchanged).
140
+
141
+ ## 0.1.1
142
+
143
+ ### Patch Changes
144
+
145
+ - Updated dependencies [d28aae7]
146
+ - @getvitops/generator@0.2.1
147
+ - @getvitops/vite@0.2.1
148
+ - @getvitops/core@0.2.1
149
+ - @getvitops/utils@0.2.1
package/README.md ADDED
@@ -0,0 +1,85 @@
1
+ # @getvitops/astro
2
+
3
+ Astro integration for the Vitops design system. Generates your design-system CSS at build time,
4
+ copies the web-component bundles into `public/`, generates favicons + a PWA manifest, and gives you
5
+ a `<Head />` component that wires it all into the page.
6
+
7
+ Requires Astro >= 7 (and `astro-icon` >= 1).
8
+
9
+ ```sh
10
+ npm i -D @getvitops/astro
11
+ ```
12
+
13
+ ## Setup
14
+
15
+ ```js
16
+ // astro.config.mjs
17
+ import { defineConfig } from 'astro/config';
18
+ import getvitops from '@getvitops/astro';
19
+
20
+ export default defineConfig({
21
+ integrations: [
22
+ getvitops({
23
+ css: { input: 'design-system.json', format: 'tailwind', out: 'src/styles' },
24
+ favicon: { source: 'src/assets/logo.svg', name: 'My Site', themeColor: '#0b0b0c' },
25
+ }),
26
+ ],
27
+ });
28
+ ```
29
+
30
+ ```astro
31
+ ---
32
+ // src/layouts/Base.astro
33
+ import Head from '@getvitops/astro/Head.astro';
34
+ ---
35
+
36
+ <html lang="en">
37
+ <head>
38
+ <Head />
39
+ </head>
40
+ <body><slot /></body>
41
+ </html>
42
+ ```
43
+
44
+ `<Head />` emits the favicon/PWA tags and the web-component runtime scripts in the correct order and
45
+ priority. It does **not** emit a stylesheet `<link>` — the integration imports the generated CSS into
46
+ Astro's module graph and Astro emits that link itself.
47
+
48
+ ## Options
49
+
50
+ | option | default | does |
51
+ | --------------- | -------------------- | ----------------------------------------------------------------- |
52
+ | `css` | off unless given | generate + auto-inject the design-system CSS |
53
+ | `css.input` | `design-system.json` | source config |
54
+ | `css.format` | `tailwind` | `tailwind` \| `css` \| `bricks` |
55
+ | `css.out` | `src/styles` | directory the generated CSS is written to |
56
+ | `css.inject` | `true` | inject the stylesheet into every SSR page |
57
+ | `webComponents` | `true` | copy + link the web-component bundles |
58
+ | `favicon` | off unless given | `source`, `lowResSource`, `name`, `themeColor`, `backgroundColor` |
59
+
60
+ Set `css.inject: false` when another integration adds routes that must not inherit the design system
61
+ (e.g. EmDash's `/_emdash/admin`) — then import the generated file (`<out>/tailwind.css` or
62
+ `<out>/styles.css`) from your own layout, so only your pages are styled.
63
+
64
+ ## Components
65
+
66
+ Thin authoring helpers that emit the framework's HTML/CSS patterns — **none require runtime JS**:
67
+
68
+ ```astro
69
+ import Subgrid from '@getvitops/astro/components/Subgrid.astro';
70
+ import Cards from '@getvitops/astro/components/Cards.astro';
71
+ import NodeRenderer from '@getvitops/astro/components/NodeRenderer.astro';
72
+ import Popover from '@getvitops/astro/components/Popover.astro';
73
+ import Details from '@getvitops/astro/components/Details.astro';
74
+ import Drawer from '@getvitops/astro/components/Drawer.astro';
75
+ import WebComponentLoader from '@getvitops/astro/components/WebComponentLoader.astro';
76
+ ```
77
+
78
+ ## Changelog
79
+
80
+ This package's history: [`CHANGELOG.md`](./CHANGELOG.md) (shipped in the npm tarball, so it
81
+ also reads from `node_modules/@getvitops/astro/CHANGELOG.md`). `@getvitops/core`, `generator`,
82
+ `utils`, `cli`, `vite` and `astro` share one version and are released together — install this at the
83
+ same version as your `@getvitops/cli` / `@getvitops/generator`.
84
+
85
+ Powered by [`@getvitops/generator`](https://www.npmjs.com/package/@getvitops/generator).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@getvitops/astro",
3
- "version": "0.4.1",
3
+ "version": "0.7.0",
4
4
  "description": "Astro integration for the Vitops design system — favicons/PWA, web-component scripts, and CSS, via a getvitops() integration + <Head /> component.",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -14,7 +14,8 @@
14
14
  "src/components/Details.astro",
15
15
  "src/components/Drawer.astro",
16
16
  "src/schemas",
17
- "virtual.d.ts"
17
+ "virtual.d.ts",
18
+ "CHANGELOG.md"
18
19
  ],
19
20
  "type": "module",
20
21
  "types": "./dist/index.d.mts",
@@ -40,10 +41,10 @@
40
41
  "dependencies": {
41
42
  "@tailwindcss/vite": "^4.3.3",
42
43
  "tailwindcss": "^4.3.3",
43
- "@getvitops/core": "0.5.0",
44
- "@getvitops/vite": "0.5.0",
45
- "@getvitops/utils": "0.5.0",
46
- "@getvitops/generator": "0.5.0"
44
+ "@getvitops/core": "0.7.0",
45
+ "@getvitops/generator": "0.7.0",
46
+ "@getvitops/utils": "0.7.0",
47
+ "@getvitops/vite": "0.7.0"
47
48
  },
48
49
  "devDependencies": {
49
50
  "astro": "^7.1.2"