@helloimjolopez-pathway/pathway-tokens 1.0.2 → 3.0.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 +46 -14
- package/dist/tokens.js +324 -324
- package/dist/tokens.json +36 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,44 @@
|
|
|
2
2
|
|
|
3
3
|
Design system for Ministry Brands Amplify. Tokens + components + specifications, all versioned in one place, with Storybook deployed from `main`.
|
|
4
4
|
|
|
5
|
+
## Using the tokens
|
|
6
|
+
|
|
7
|
+
The Pathway token library is published to npm and updated automatically on every token sync.
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @helloimjolopez-pathway/pathway-tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
// CSS custom properties — import once in your app entry point
|
|
15
|
+
import "@helloimjolopez-pathway/pathway-tokens/css";
|
|
16
|
+
|
|
17
|
+
// JS token object
|
|
18
|
+
import tokens from "@helloimjolopez-pathway/pathway-tokens";
|
|
19
|
+
|
|
20
|
+
// Raw DTCG JSON (for tooling)
|
|
21
|
+
import tokenJson from "@helloimjolopez-pathway/pathway-tokens/json";
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Without a bundler — link the CSS directly:
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<link rel="stylesheet" href="https://helloimjolopez-collab.github.io/pathway-ds/storybook/tokens.css" />
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Once loaded, use the custom properties anywhere:
|
|
31
|
+
|
|
32
|
+
```css
|
|
33
|
+
.my-component {
|
|
34
|
+
background: var(--semantic-color-light-mode-fill-static-brand-base);
|
|
35
|
+
color: var(--semantic-color-light-mode-text-static-primary-inverse);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Full token reference: [Storybook → Tokens](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/tokens-primitives-color--docs) · [Token architecture](tokens/README.md) · [Agent brief](tokens/agent-brief.md)
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
5
43
|
## Layout
|
|
6
44
|
|
|
7
45
|
```
|
|
@@ -34,13 +72,14 @@ pathway-ds/
|
|
|
34
72
|
|
|
35
73
|
| To change… | Where |
|
|
36
74
|
|---|---|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
| Component
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
75
|
+
| Published token package | [`@helloimjolopez-pathway/pathway-tokens`](https://www.npmjs.com/package/@helloimjolopez-pathway/pathway-tokens) |
|
|
76
|
+
| Token values | [`tokens/pathway-design-tokens.json`](tokens/pathway-design-tokens.json) (source-of-truth, synced from Figma) |
|
|
77
|
+
| Built CSS consumed by Storybook | [`src/tokens/tokens.css`](src/tokens/tokens.css) (auto-regenerated by Style Dictionary) |
|
|
78
|
+
| Component geometry, tokens, accessibility rules | [`components/<name>/<name>-spec.md`](components/) |
|
|
79
|
+
| Component reference implementation | [`components/<name>/<name>.html`](components/) |
|
|
80
|
+
| How a component appears in Storybook | [`src/stories/Library/<Name>/`](src/stories/Library/) |
|
|
81
|
+
| Storybook chrome / addons | [`.storybook/main.js`](.storybook/main.js) · [`.storybook/preview.js`](.storybook/preview.js) |
|
|
82
|
+
| CI behaviour | [`.github/workflows/`](.github/workflows/) |
|
|
44
83
|
|
|
45
84
|
## CI
|
|
46
85
|
|
|
@@ -51,10 +90,3 @@ Three workflows in `.github/workflows/`:
|
|
|
51
90
|
3. **`deploy-storybook.yml`** — fires when `tokens/`, `src/`, `.storybook/`, `components/`, `docs/`, or `style-dictionary.config.js` changes. Rebuilds Style Dictionary + Storybook and commits the built site to `/storybook/` on `main`. GitHub Pages serves that folder.
|
|
52
91
|
|
|
53
92
|
Source of truth is always the repo on `main`; Storybook is a downstream artifact.
|
|
54
|
-
|
|
55
|
-
## Adding a new component
|
|
56
|
-
|
|
57
|
-
1. `mkdir components/<name>`
|
|
58
|
-
2. Author `<name>.html` (self-contained demo) and `<name>-spec.md` (spec) following the structure of `components/spinner/*` or `components/sidenav/*`.
|
|
59
|
-
3. Create `src/stories/Library/<Name>/<Name>.stories.js` + `<Name>.mdx`. Use `title: "Components/<Name>"` so it appears under the Components group in Storybook.
|
|
60
|
-
4. Push to `main`. The Storybook deploy workflow publishes automatically.
|