@netlify/spark-ui 1.15.0 → 1.15.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 CHANGED
@@ -64,3 +64,80 @@ The tokens file can also be rebuilt manually with the following command:
64
64
  ```bash
65
65
  npm run build:tokens
66
66
  ```
67
+
68
+ ## Local Testing
69
+
70
+ During development, you should create a documentation page for your component inside the `/docs` directory. This allows you to test and showcase all its configurations and variations in isolation. Once you’re ready to test the component inside your frontend application, you can link your local `netlify-spark-ui` package using `npm link`.
71
+
72
+ ### Setup Local Link
73
+
74
+ 1. **Create a global link in your local `netlify-spark-ui` directory:**
75
+
76
+ ```bash
77
+ npm link
78
+ ```
79
+
80
+ 2. **Link the package in your frontend project:**
81
+
82
+ In your frontend project directory, run:
83
+
84
+ ```bash
85
+ npm link @netlify/spark-ui
86
+ ```
87
+
88
+ This will symlink your local `netlify-spark-ui` build into your frontend’s `node_modules`, allowing you to test changes without publishing a new package version.
89
+
90
+ ### Testing Preact Components
91
+
92
+ When working with Preact components, keep in mind that changes to linked packages don’t automatically trigger a rebuild in consuming projects. You’ll need to manually rebuild Preact components.
93
+
94
+ ```bash
95
+ npm run build:vite
96
+ ```
97
+
98
+ If you’ve rebuilt but still don’t see updates in your frontend while running `npm run dev`, Vite’s cache may be serving stale modules. In that case, clear the `.vite` cache in your frontend project:
99
+
100
+ ```bash
101
+ rm -rf node_modules/.vite
102
+ ```
103
+
104
+ Then restart your dev server:
105
+
106
+ ```bash
107
+ npm run dev
108
+ ```
109
+
110
+ ---
111
+
112
+ ## Remote Testing
113
+
114
+ When you’re ready to validate your component changes in a deploy preview, you can publish an **alpha release** and install it in your frontend project.
115
+
116
+ > ⚠️ You will need to make sure you're in the Netlify organization in NPM to have the right authorization to publish.
117
+ >
118
+ > Reach out to #internal-permissions in Slack
119
+
120
+ ### Steps to Publish an Alpha Release:
121
+
122
+ 1. **Make sure you're logged into npm locally**
123
+
124
+ ```bash
125
+ npm login
126
+ ```
127
+
128
+ 1. **Publish an alpha version of `netlify-spark-ui`:**
129
+
130
+ ```bash
131
+ npm publish --tag alpha
132
+ ```
133
+
134
+ 1. **Update the frontend’s `package.json` to use the alpha version:**
135
+
136
+ ```json
137
+ "@netlify/spark-ui": "1.0.0-alpha.0"
138
+ ```
139
+
140
+ 1. **Install the updated package:**
141
+ ```bash
142
+ npm install
143
+ ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@netlify/spark-ui",
3
3
  "description": "Assets, design tokens, components, and utilities",
4
- "version": "1.15.0",
4
+ "version": "1.15.1",
5
5
  "type": "module",
6
6
  "main": "dist/components/preact/index.js",
7
7
  "types": "dist/components/preact/index.d.ts",
@@ -73,7 +73,7 @@ const {
73
73
  --n-sidebar-min: 50%;
74
74
  --n-sidebar-gap: 0;
75
75
  overflow: hidden;
76
- color: var(--color-text);
76
+ color: color(srgb 1 1 1);
77
77
  background: linear-gradient(
78
78
  var(--n-switchback-gradient-angle, 101deg),
79
79
  #0d1818 8.17%,
@@ -93,7 +93,7 @@ const {
93
93
  }
94
94
 
95
95
  .n-switchback-heading {
96
- color: var(--heading-text-color);
96
+ color: color(srgb 1 1 1);
97
97
  }
98
98
 
99
99
  .n-switchback-media {