@netlify/spark-ui 1.19.0 → 1.20.1

package/README.md

@@ -65,6 +65,34 @@ The tokens file can also be rebuilt manually with the following command:
 npm run build:tokens
 ```
 
+### Token Prefix and Backwards Compatibility
+
+All design tokens are generated with a `--ntl-` prefix (e.g., `--ntl-color-bg`, `--ntl-font-size-display-lg`). If your project still references the older unprefixed token names (e.g., `--color-bg`), you can import the compatibility file to alias them:
+
+```css
+@import '@netlify/spark-ui/styles/tokens.css';
+@import '@netlify/spark-ui/styles/tokens.compat.css';
+```
+
+`tokens.compat.css` maps every unprefixed variable name to its `--ntl-` prefixed equivalent across all theme selectors (`:root`, `prefers-color-scheme`, `[data-theme]`). This lets you incrementally migrate pages to the new prefixed tokens without breaking existing styles.
+
+Once a page or project has been fully updated to use `--ntl-` prefixed tokens, remove the `tokens.compat.css` import.
+
+### Layout Utility Prefix and Backwards Compatibility
+
+Layout utility classes have been renamed from `.n-` to `.ntl-` (e.g., `.n-grid` → `.ntl-grid`, `.n-flow` → `.ntl-flow`). The associated CSS custom properties have also been renamed (e.g., `--n-grid-column-min-size` → `--ntl-grid-column-min-size`).
+
+If your project still uses the old `.n-` class names or `--n-` layout variables, import the compatibility file:
+
+```css
+@import '@netlify/spark-ui/styles/layout.css';
+@import '@netlify/spark-ui/styles/layout.compat.css';
+```
+
+`layout.compat.css` re-declares each old `.n-` class with the same styles, accepting both old `--n-` and new `--ntl-` CSS variables. This lets you incrementally migrate to the new prefixed names without breaking existing layouts.
+
+Once all references have been updated to use `ntl-` prefixed classes and variables, remove the `layout.compat.css` import.
+
 ## 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`.
@@ -109,6 +137,44 @@ npm run dev
 
 ---
 
+## AI-Assisted Page Building with Claude Code
+
+This repo includes a [Claude Code](https://claude.ai/code) skill for generating landing pages using Spark UI components. The skill provides guidelines for correct component usage, layout utilities, and design tokens based on the Templates documentation.
+
+### For contributors (working in this repo)
+
+The skill is available automatically. Run:
+
+```
+/project:landing-page <describe the page you want>
+```
+
+For example:
+
+```
+/project:landing-page A landing page for a new enterprise hosting product with a hero, feature cards, and a pricing comparison
+```
+
+### For consumers (using spark-ui as a dependency)
+
+If you're using `@netlify/spark-ui` in your own project, the skill guidelines are shipped with the package. Create a thin wrapper at `.claude/commands/landing-page.md` in your workspace root:
+
+```markdown
+# Create a Landing Page with Spark UI
+
+$FILE node_modules/@netlify/spark-ui/skills/landing-page.md
+
+## User Request
+
+$ARGUMENTS
+```
+
+Then run `/project:landing-page` in Claude Code. The `$FILE` directive loads guidelines from your installed package — when you update `@netlify/spark-ui`, the prompt updates automatically.
+
+> **Monorepo note:** Place `.claude/commands/` at the monorepo root, not inside a subdirectory like `apps/frontend/`.
+
+---
+
 ## 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.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.19.0",
+  "version": "1.20.1",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -9,7 +9,7 @@
     "**/*.css"
   ],
   "scripts": {
-    "build:tokens": "npx tz build",
+    "build:tokens": "npx tz build && node scripts/generate-compat-tokens.mjs",
     "build:vite": "vite build",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.astro",
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx,.astro --fix",
@@ -20,6 +20,7 @@
   "files": [
     "packages/",
     "dist",
+    "skills/",
     "README.md"
   ],
   "exports": {

package/packages/components/ActionArrow.astro

@@ -17,7 +17,7 @@ const { class: className, ...rest } = Astro.props;
     overflow: hidden;
 
     svg {
-      color: var(--color-icon);
+      color: var(--ntl-color-icon);
       transition: translate 0.1s ease-out;
     }
   }

package/packages/components/ActionLink.astro

@@ -18,17 +18,17 @@ const { id, href, text, class: className, ...rest } = Astro.props;
 <style>
   .n-action-link {
     display: inline-block;
-    gap: var(--space-3xs);
+    gap: var(--ntl-space-3xs);
     align-items: center;
-    font-weight: var(--font-weight-medium);
-    font-size: var(--font-size-text-md);
+    font-weight: var(--ntl-font-weight-medium);
+    font-size: var(--ntl-font-size-text-md);
     text-wrap: pretty; /** Prevents orphan icon */
     text-decoration: none;
-    color: var(--color-text);
+    color: var(--ntl-color-text);
 
     span {
       text-decoration: underline;
-      text-decoration-color: var(--color-link);
+      text-decoration-color: var(--ntl-color-link);
       text-underline-offset: 0.1em;
     }
 

package/packages/components/Blockquote.astro

@@ -47,15 +47,15 @@ if (Astro.slots.has('default')) {
 
 <style>
   figure {
-    --_gap: var(--space-s);
+    --_gap: var(--ntl-space-s);
     display: grid;
     gap: var(--_gap);
     padding-inline-start: var(--_gap);
-    border-inline-start: 3px solid var(--color-icon);
-    font-size: var(--font-size-display-2xs);
-    font-family: var(--font-family-display);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
+    border-inline-start: 3px solid var(--ntl-color-icon);
+    font-size: var(--ntl-font-size-display-2xs);
+    font-family: var(--ntl-font-family-display);
+    font-weight: var(--ntl-font-weight-bold);
+    line-height: var(--ntl-line-height-heading);
   }
 
   blockquote {
@@ -73,42 +73,42 @@ if (Astro.slots.has('default')) {
 
   blockquote::before {
     content: open-quote;
-    color: var(--blockquote-accent-color);
+    color: var(--ntl-blockquote-accent-color);
   }
 
   blockquote::after {
     content: close-quote;
-    color: var(--blockquote-accent-color);
+    color: var(--ntl-blockquote-accent-color);
   }
 
   .n-blockquote-author-info {
     display: flex;
     gap: 0.2em;
-    font-size: var(--font-size-text-xs);
-    line-height: var(--line-height-heading);
+    font-size: var(--ntl-font-size-text-xs);
+    line-height: var(--ntl-line-height-heading);
   }
 
   /* Variants */
   [data-blockquote-variant='default'] {
     .n-blockquote-author-info {
       flex-direction: column;
-      font-weight: var(--font-weight-regular);
+      font-weight: var(--ntl-font-weight-regular);
     }
 
     .n-blockquote-author-info > * {
       display: block;
-      font-family: var(--font-family-mono);
+      font-family: var(--ntl-font-family-mono);
       text-transform: uppercase;
     }
 
     .n-blockquote-author-info > *:last-child:not(:only-child) {
-      color: var(--color-text-weak);
+      color: var(--ntl-color-text-weak);
     }
   }
 
   [data-blockquote-variant='simple'] {
     .n-blockquote-author-info > * {
-      font-size: var(--font-size-text-sm);
+      font-size: var(--ntl-font-size-text-sm);
     }
 
     .n-blockquote-author-info > *:not(:last-child)::after {
@@ -119,14 +119,14 @@ if (Astro.slots.has('default')) {
   [data-blockquote-variant='testimonial'] {
     border-inline-start: none;
 
-    font-size: var(--font-size-display-lg);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
+    font-size: var(--ntl-font-size-display-lg);
+    font-weight: var(--ntl-font-weight-bold);
+    line-height: var(--ntl-line-height-heading);
 
     .n-blockquote-author-info {
       flex-direction: column;
-      font-weight: var(--font-weight-regular);
-      font-family: var(--font-family-mono);
+      font-weight: var(--ntl-font-weight-regular);
+      font-family: var(--ntl-font-family-mono);
     }
 
     figcaption {
@@ -144,13 +144,13 @@ if (Astro.slots.has('default')) {
     }
 
     .n-blockquote-author-info {
-      font-size: var(--font-size-text-sm);
-      font-weight: var(--font-weight-regular);
+      font-size: var(--ntl-font-size-text-sm);
+      font-weight: var(--ntl-font-weight-regular);
       text-transform: uppercase;
     }
 
     .n-blockquote-title {
-      color: var(--color-text-weak);
+      color: var(--ntl-color-text-weak);
     }
   }
 </style>

package/packages/components/Card.astro

@@ -28,12 +28,13 @@ const {
 } = Astro.props;
 
 const isAnchorHeadline = isCardClickable && headline && !link?.text && link?.href;
-const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').hostname.endsWith('netlify.com');
+const isExternal =
+  link?.href && !new URL(link.href, 'https://www.netlify.com').hostname.endsWith('netlify.com');
 ---
 
 <Element
   class:list={[
-    'n-card n-flow',
+    'n-card ntl-flow',
     isCardClickable && 'n-card-clickable',
     isAnchorHeadline && 'n-card-anchor-heaadline',
     className,
@@ -68,7 +69,12 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
   <slot />
   {
     link && link.text && (
-      <ActionLink class="n-card-link" id={link.id} href={link.href} {...isExternal && { target: '_blank', rel: 'noopener' }}>
+      <ActionLink
+        class="n-card-link"
+        id={link.id}
+        href={link.href}
+        {...(isExternal && { target: '_blank', rel: 'noopener' })}
+      >
         {link.text}
       </ActionLink>
     )
@@ -79,18 +85,18 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
 <style>
   .n-card {
     position: relative;
-    padding: var(--space-m);
-    background-color: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: var(--radius-m);
+    padding: var(--ntl-space-m);
+    background-color: var(--ntl-card-bg-color);
+    border: 1px solid var(--ntl-card-border-color);
+    border-radius: var(--ntl-radius-m);
   }
 
   .n-card-eyebrow {
-    --n-flow-space: var(--space-l);
+    --ntl-flow-space: var(--ntl-space-l);
   }
 
   .n-card-eyebrow + .n-card-headline {
-    --n-flow-space: var(--space-s);
+    --ntl-flow-space: var(--ntl-space-s);
   }
 
   .n-card-link:has(> .n-card-headline) {
@@ -98,11 +104,11 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
   }
 
   .n-card-headline {
-    font-size: var(--font-size-display-sm);
-    font-family: var(--font-family-display);
-    font-weight: var(--font-weight-bold);
-    line-height: var(--line-height-heading);
-    color: var(--heading-text-color);
+    font-size: var(--ntl-font-size-display-sm);
+    font-family: var(--ntl-font-family-display);
+    font-weight: var(--ntl-font-weight-bold);
+    line-height: var(--ntl-line-height-heading);
+    color: var(--ntl-heading-text-color);
   }
 
   .n-card-headline:has(+ .n-action-link) {
@@ -113,7 +119,7 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--space-s);
+    gap: var(--ntl-space-s);
     width: 100%;
   }
 
@@ -123,7 +129,7 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
   }
 
   .n-card-paragraph {
-    line-height: var(--line-height-text);
+    line-height: var(--ntl-line-height-text);
   }
 
   .n-card-paragraph:nth-last-child(2) {
@@ -131,14 +137,14 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
   }
 
   .n-card-link {
-    --n-flow-space: var(--space-l);
+    --ntl-flow-space: var(--ntl-space-l);
     align-self: flex-start;
   }
 
   .n-card-image :global(img, picture) {
     width: 100%;
     height: auto;
-    border-radius: var(--radius-s);
+    border-radius: var(--ntl-radius-s);
     object-fit: cover;
   }
 
@@ -147,7 +153,7 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
     transition: border-color 100ms cubic-bezier(0.25, 1, 0.5, 1);
 
     &:hover {
-      border-color: var(--card-border-color-hover);
+      border-color: var(--ntl-card-border-color-hover);
       transition-duration: 200ms;
     }
   }
@@ -163,13 +169,14 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
   }
 
   .n-card-clickable .n-action-arrow {
+    margin-block-start: auto;
     margin-inline-start: auto;
   }
 
   /* Focus for Anchor Headline */
   .n-card-anchor-heaadline:focus-within {
     box-shadow: 0 0 0 3px var(--color-focus-ring, Highlight);
-    border-radius: var(--radius-s, 0.25rem);
+    border-radius: var(--ntl-radius-s, 0.25rem);
   }
 
   .n-card-anchor-heaadline a:focus {

package/packages/components/Eyebrow.astro

@@ -8,10 +8,10 @@ const { as: Element = 'div', class: className, ...rest } = Astro.props;
 
 <style>
   .eyebrow {
-    font-size: var(--font-size-text-sm);
-    font-family: var(--font-family-mono);
-    line-height: var(--line-height-heading);
-    color: var(--eyebrow-text-color);
+    font-size: var(--ntl-font-size-text-sm);
+    font-family: var(--ntl-font-family-mono);
+    line-height: var(--ntl-line-height-heading);
+    color: var(--ntl-eyebrow-text-color);
     text-transform: uppercase;
   }
 </style>

package/packages/components/HeadingBlock.astro

@@ -36,8 +36,8 @@ const Heading = `h${headingLevel}` as any;
 const customStyles =
   headingMaxWidth || textMaxWidth
     ? {
-        ...(headingMaxWidth && { '--n-heading-block-heading-max-width': headingMaxWidth }),
-        ...(textMaxWidth && { '--n-heading-block-text-max-width': textMaxWidth }),
+        ...(headingMaxWidth && { '--ntl-heading-block-heading-max-width': headingMaxWidth }),
+        ...(textMaxWidth && { '--ntl-heading-block-text-max-width': textMaxWidth }),
       }
     : null;
 ---
@@ -45,7 +45,7 @@ const customStyles =
 <div
   {id}
   class:list={[
-    'n-heading-block n-flow',
+    'n-heading-block ntl-flow',
     alignment === 'center' && 'n-heading-block-center',
     className,
   ]}
@@ -57,7 +57,7 @@ const customStyles =
   {text && <p class="n-heading-block-text" set:html={text} />}
   {
     ctas && ctas.length > 0 && (
-      <div class="n-heading-block-ctas n-cluster">
+      <div class="n-heading-block-ctas ntl-cluster">
         {ctas?.map((cta: CallToActionProps) => (
           <Button id={cta.id} href={cta.href} variant={cta.variant} target={cta.target}>
             {cta.text}
@@ -70,7 +70,7 @@ const customStyles =
 
 <style>
   .n-heading-block-center {
-    --n-cluster-justify: center;
+    --ntl-cluster-justify: center;
     text-align: center;
     margin-inline: auto;
 
@@ -80,21 +80,21 @@ const customStyles =
   }
 
   .n-heading-block-heading {
-    font-size: var(--n-heading-block-heading-font-size, var(--font-size-display-2xl));
-    inline-size: min(100%, var(--n-heading-block-heading-max-width, 50rem));
+    font-size: var(--ntl-heading-block-heading-font-size, var(--ntl-font-size-display-2xl));
+    inline-size: min(100%, var(--ntl-heading-block-heading-max-width, 50rem));
     text-wrap: balance;
-    color: var(--heading-text-color);
+    color: var(--ntl-heading-text-color);
   }
 
   .n-heading-block-text {
-    font-size: var(--n-heading-block-text-font-size, var(--font-size-text-lg));
-    inline-size: min(100%, var(--n-heading-block-text-max-width, 35rem));
+    font-size: var(--ntl-heading-block-text-font-size, var(--ntl-font-size-text-lg));
+    inline-size: min(100%, var(--ntl-heading-block-text-max-width, 35rem));
     text-wrap: pretty;
   }
 
   .n-heading-block-ctas {
-    --n-flow-space: var(--space-l);
-    --n-cluster-gap: var(--space-xs);
+    --ntl-flow-space: var(--ntl-space-l);
+    --ntl-cluster-gap: var(--ntl-space-xs);
   }
 
   @media (max-width: 30rem) {

package/packages/components/PageHero.astro

@@ -12,9 +12,9 @@ const { class: className, heading, text, ctas, ...rest } = Astro.props;
 
 <style>
   .n-page-hero {
-    --n-page-section-space: var(--space-4xl);
-    --n-page-section-bg-color: linear-gradient(to bottom, var(--color-bg) 50%, var(--teal-800));
-    --n-heading-block-heading-font-size: var(--font-size-display-3xl);
-    --n-heading-block-text-font-size: var(--font-size-text-xl);
+    --ntl-page-section-space: var(--ntl-space-4xl);
+    --ntl-page-section-bg-color: linear-gradient(to bottom, var(--ntl-color-bg) 50%, var(--ntl-teal-800));
+    --ntl-heading-block-heading-font-size: var(--ntl-font-size-display-3xl);
+    --ntl-heading-block-text-font-size: var(--ntl-font-size-text-xl);
   }
 </style>

package/packages/components/PageHeroGraphic.astro

@@ -6,7 +6,7 @@ const { class: className, heading, text, ctas, ...rest } = Astro.props;
 ---
 
 <PageSection class:list={['n-page-hero-graphic', className]} {...rest}>
-  <div class="n-page-hero-graphic-container n-flex-grid">
+  <div class="n-page-hero-graphic-container ntl-flex-grid">
     <HeadingBlock heading={heading} headingLevel="1" text={text} alignment="start" ctas={ctas} />
     <slot name="graphic" />
   </div>
@@ -15,18 +15,18 @@ const { class: className, heading, text, ctas, ...rest } = Astro.props;
 
 <style>
   .n-page-hero {
-    --n-page-section-space: var(--space-4xl);
-    --n-page-section-bg-color: var(
-      --n-page-section-bg,
-      linear-gradient(to bottom, var(--color-bg) 50%, var(--teal-800))
+    --ntl-page-section-space: var(--ntl-space-4xl);
+    --ntl-page-section-bg-color: var(
+      --ntl-page-section-bg,
+      linear-gradient(to bottom, var(--ntl-color-bg) 50%, var(--ntl-teal-800))
     );
-    --n-heading-block-heading-font-size: var(--font-size-display-3xl);
-    --n-heading-block-text-font-size: var(--font-size-text-xl);
+    --ntl-heading-block-heading-font-size: var(--ntl-font-size-display-3xl);
+    --ntl-heading-block-text-font-size: var(--ntl-font-size-text-xl);
   }
 
   .n-page-hero-graphic-container {
-    --n-grid-column-min-size: var(--n--column-min-size, min(400px, 100%));
+    --ntl-grid-column-min-size: var(--n--column-min-size, min(400px, 100%));
     align-items: var(--n-hero-align, center);
-    grid-column-gap: var(--n-hero-column-gap, var(--space-l));
+    grid-column-gap: var(--n-hero-column-gap, var(--ntl-space-l));
   }
 </style>

package/packages/components/PageSection.astro

@@ -14,8 +14,8 @@ const { id, class: className, spaceTop, spaceBottom, theme, ...rest } = Astro.pr
 const customStyles =
   spaceTop || spaceBottom
     ? {
-        ...(spaceTop && { '--n-page-section-space-top': spaceTop }),
-        ...(spaceBottom && { '--n-page-section-space-bottom': spaceBottom }),
+        ...(spaceTop && { '--ntl-page-section-space-top': spaceTop }),
+        ...(spaceBottom && { '--ntl-page-section-space-bottom': spaceBottom }),
       }
     : null;
 ---
@@ -23,7 +23,7 @@ const customStyles =
 <section
   id={id}
   data-theme={theme}
-  class:list={['n-page-section n-breakout', className]}
+  class:list={['n-page-section ntl-breakout', className]}
   style={customStyles}
   {...rest}
 >
@@ -32,14 +32,14 @@ const customStyles =
 
 <style>
   .n-page-section {
-    --_space: var(--space-3xl);
-    color: var(--n-page-section-text-color, var(--color-text));
-    background: var(--n-page-section-bg-color, var(--color-bg));
-    padding-block-start: var(--n-page-section-space-top, var(--_space));
-    padding-block-end: var(--n-page-section-space-bottom, var(--_space));
+    --_space: var(--ntl-space-3xl);
+    color: var(--ntl-page-section-text-color, var(--ntl-color-text));
+    background: var(--ntl-page-section-bg-color, var(--ntl-color-bg));
+    padding-block-start: var(--ntl-page-section-space-top, var(--_space));
+    padding-block-end: var(--ntl-page-section-space-bottom, var(--_space));
   }
 
   .n-page-section :global(> * + *) {
-    margin-block-start: var(--n-page-section-item-space, var(--space-2xl));
+    margin-block-start: var(--ntl-page-section-item-space, var(--ntl-space-2xl));
   }
 </style>

package/packages/components/Switchback.astro

@@ -31,11 +31,11 @@ const {
 
 <div
   id={id}
-  class:list={['n-switchback n-sidebar-left', isReversed && 'n-switchback-reversed', className]}
+  class:list={['n-switchback ntl-sidebar-left', isReversed && 'n-switchback-reversed', className]}
   data-theme="dark"
   {...rest}
 >
-  <div class="n-switchback-content n-flow">
+  <div class="n-switchback-content ntl-flow">
     {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
     {heading && <h3 class="n-switchback-heading h5">{heading}</h3>}
     {text && <p class="text" set:html={text} />}
@@ -69,27 +69,27 @@ const {
 
 <style>
   .n-switchback {
-    --n-sidebar-size: 28.75rem;
-    --n-sidebar-min: 50%;
-    --n-sidebar-gap: 0;
+    --ntl-sidebar-size: 28.75rem;
+    --ntl-sidebar-min: 50%;
+    --ntl-sidebar-gap: 0;
     overflow: hidden;
     color: color(srgb 1 1 1);
     background: linear-gradient(
-      var(--n-switchback-gradient-angle, 101deg),
+      var(--ntl-switchback-gradient-angle, 101deg),
       #0d1818 8.17%,
       #0c2a2a 56.72%
     );
     border: 1px solid rgba(208, 255, 254, 0.2);
-    border-radius: var(--radius-m);
+    border-radius: var(--ntl-radius-m);
   }
 
   .n-switchback-reversed {
-    --n-switchback-gradient-angle: 248deg;
+    --ntl-switchback-gradient-angle: 248deg;
     flex-direction: row-reverse;
   }
 
   .n-switchback-content {
-    padding: var(--space-l);
+    padding: var(--ntl-space-l);
   }
 
   .n-switchback-heading {
@@ -99,8 +99,8 @@ const {
   .n-switchback-media {
     display: grid;
     place-items: center;
-    padding: var(--space-xl);
-    background: var(--red-400);
+    padding: var(--ntl-space-xl);
+    background: var(--ntl-red-400);
     min-height: 10rem;
 
     :is(img, picture) {
@@ -114,15 +114,15 @@ const {
   [data-switchback-media-pattern='1'] {
     background:
       url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzY5IiBoZWlnaHQ9IjQ5MCIgdmlld0JveD0iMCAwIDc2OSA0OTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjM4NC4zMjQiIHk9IjEwLjc1NDciIHdpZHRoPSIzMzEuMTY0IiBoZWlnaHQ9IjMzMS4xNjQiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDM4NC4zMjQgMTAuNzU0NykiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iNjIxLjMyNCIgeT0iNy45MjI4NSIgd2lkdGg9IjQ3NCIgaGVpZ2h0PSI0NzQiIHRyYW5zZm9ybT0icm90YXRlKDkwIDYyMS4zMjQgNy45MjI4NSkiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iODU5LjEwMSIgeT0iMjQ0LjkyMyIgd2lkdGg9IjY3MS40MzYiIGhlaWdodD0iNjcxLjQzNiIgdHJhbnNmb3JtPSJyb3RhdGUoMTM1IDg1OS4xMDEgMjQ0LjkyMykiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iNTAxLjUwNCIgeT0iMTI3Ljc0MyIgd2lkdGg9IjIzNC4zNTkiIGhlaWdodD0iMjM0LjM1OSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAxLjUwNCAxMjcuNzQzKSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8cmVjdCB4PSI1MDEuMjk3IiB5PSIyNDQuOTIzIiB3aWR0aD0iMTY1LjQyMyIgaGVpZ2h0PSIxNjUuNDIzIiB0cmFuc2Zvcm09InJvdGF0ZSgxMzUgNTAxLjI5NyAyNDQuOTIzKSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8cmVjdCB4PSI0NDMuNTA0IiB5PSIzMDQuMTAzIiB3aWR0aD0iMTE4LjM2MSIgaGVpZ2h0PSIxMTguMzYxIiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDQ0My41MDQgMzA0LjEwMykiIHN0cm9rZT0id2hpdGUiLz4KPC9zdmc+Cg=='),
-      radial-gradient(circle at 50% 70%, var(--red-500) 0%, var(--purple-300) 100%);
+      radial-gradient(circle at 50% 70%, var(--ntl-red-500) 0%, var(--ntl-purple-300) 100%);
     background-size: cover;
     background-position: center;
   }
 
   [data-switchback-media-pattern='2'] {
     background:
-      repeating-linear-gradient(-30deg, var(--red-000) 0 1px, transparent 1px 150px),
-      radial-gradient(circle at 10% 70%, var(--blue-500) 0%, var(--teal-200) 100%);
+      repeating-linear-gradient(-30deg, var(--ntl-red-000) 0 1px, transparent 1px 150px),
+      radial-gradient(circle at 10% 70%, var(--ntl-blue-500) 0%, var(--ntl-teal-200) 100%);
     background-size: cover;
     background-position: center;
   }

package/packages/components/SwitchbackGroup.astro

@@ -8,6 +8,6 @@ const { class: className, ...rest } = Astro.props;
 
 <style>
   .n-switchback-group :global(> * + *) {
-    margin-block-start: var(--n-switchback-group-space, var(--space-xl));
+    margin-block-start: var(--n-switchback-group-space, var(--ntl-space-xl));
   }
 </style>

package/packages/components/TabPanelGroup.astro

@@ -11,7 +11,7 @@ const { class: className, isUniformHeight, noPadding, ...rest } = Astro.props;
 <div
   class:list={[
     'n-tabpanel-group',
-    isUniformHeight && 'n-tabpanel-group-uniform-height n-stack',
+    isUniformHeight && 'n-tabpanel-group-uniform-height ntl-stack',
     noPadding && 'n-tabpanel-group-no-padding',
     className,
   ]}
@@ -22,8 +22,8 @@ const { class: className, isUniformHeight, noPadding, ...rest } = Astro.props;
 
 <style>
   .n-tabpanel-group {
-    --_radius: var(--radius-m);
-    background-color: var(--tabbed-content-bg-color-active);
+    --_radius: var(--ntl-radius-m);
+    background-color: var(--ntl-tabbed-content-bg-color-active);
     border: var(--_border-size) var(--_border-style) var(--_border-color-active);
     border-bottom-left-radius: var(--_radius);
     border-bottom-right-radius: var(--_radius);
@@ -31,7 +31,7 @@ const { class: className, isUniformHeight, noPadding, ...rest } = Astro.props;
   }
 
   .n-tabpanel-group :global([role='tabpanel']) {
-    padding: var(--space-xl);
+    padding: var(--ntl-space-xl);
   }
 
   .n-tabpanel-group-uniform-height :global([role='tabpanel'][hidden]) {