@netlify/spark-ui 1.15.0 → 1.16.0

package/README.md

@@ -64,3 +64,80 @@ The tokens file can also be rebuilt manually with the following command:
 ```bash
 npm run build:tokens
 ```
+
+## Local Testing
+
+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`.
+
+### Setup Local Link
+
+1. **Create a global link in your local `netlify-spark-ui` directory:**
+
+   ```bash
+   npm link
+   ```
+
+2. **Link the package in your frontend project:**
+
+   In your frontend project directory, run:
+
+   ```bash
+   npm link @netlify/spark-ui
+   ```
+
+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.
+
+### Testing Preact Components
+
+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.
+
+```bash
+npm run build:vite
+```
+
+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:
+
+```bash
+rm -rf node_modules/.vite
+```
+
+Then restart your dev server:
+
+```bash
+npm run dev
+```
+
+---
+
+## Remote Testing
+
+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.
+
+> ⚠️ You will need to make sure you're in the Netlify organization in NPM to have the right authorization to publish.
+>
+> Reach out to #internal-permissions in Slack
+
+### Steps to Publish an Alpha Release:
+
+1. **Make sure you're logged into npm locally**
+
+   ```bash
+   npm login
+   ```
+
+1. **Publish an alpha version of `netlify-spark-ui`:**
+
+   ```bash
+   npm publish --tag alpha
+   ```
+
+1. **Update the frontend’s `package.json` to use the alpha version:**
+
+   ```json
+   "@netlify/spark-ui": "1.0.0-alpha.0"
+   ```
+
+1. **Install the updated package:**
+   ```bash
+   npm install
+   ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/Switchback.astro

@@ -73,7 +73,7 @@ const {
     --n-sidebar-min: 50%;
     --n-sidebar-gap: 0;
     overflow: hidden;
-    color: var(--color-text);
+    color: color(srgb 1 1 1);
     background: linear-gradient(
       var(--n-switchback-gradient-angle, 101deg),
       #0d1818 8.17%,
@@ -93,7 +93,7 @@ const {
   }
 
   .n-switchback-heading {
-    color: var(--heading-text-color);
+    color: color(srgb 1 1 1);
   }
 
   .n-switchback-media {
@@ -126,4 +126,8 @@ const {
     background-size: cover;
     background-position: center;
   }
+
+  [data-switchback-media-pattern='3'] {
+    background: transparent;
+  }
 </style>