@netlify/spark-ui 2.3.0 → 2.4.0

package/README.md

@@ -85,13 +85,16 @@ Tokens are converted into CSS variables using the [terrazzo](https://terrazzo.ap
 
 - `tokens/base/`: every token, with its light-mode value in the current brand
 - `tokens/themes/dark.json`: the tokens that change in dark mode, with their dark values
+- `tokens/brands/hues.dark.json`: the hues brand's own dark values, applied on top of `dark.json` by the resolver's `brandTheme` modifier
 - `tokens/brands/hues.json`: the palette ramps for the hues brand
+- `tokens/brands/hues.semantic.json`: the hues brand's Play UI Kit semantics (colors, fonts), layered over `hues.json`
+- `tokens/base/colors.rebrand.json`: the semantic color names the Play UI Kit adds; their base values alias the current brand. Its primitives (warm grey, off black, sky tints, alpha) live with the rest of the Hues palette in `colors.hues.json`
 - `tokens/base/app.json`: app.netlify.com's own values (fonts, sizes, weights, radii, shadows), kept out of `tokens.css`
 - `tokens/resolver.json`: how Terrazzo layers the files above. A new file in `tokens/base/` must be listed here; the build fails if it isn't.
 
 ### App tokens
 
-`@netlify/spark-ui/styles/app/*.css` and `@netlify/spark-ui/tokens/app` publish app.netlify.com's tokens under the names and file layout it has always read from `@netlify/netlify-design-tokens`: `color.rgb.css` has the `--colorRgbFacets*` RGB channels (with a `[data-brand="hues"]` block), `shadow.css` has `--effectShadow*`, and `tokens/app` has JS exports of hex colors, font sizes, weights, families and radii. `scripts/app-tokens-plugin.mjs` writes them during `build:tokens`.
+`@netlify/spark-ui/styles/app/*.css` and `@netlify/spark-ui/tokens/app` publish app.netlify.com's tokens under the names and file layout it has always read from `@netlify/netlify-design-tokens`: `color.rgb.css` has the `--colorRgbFacets*` RGB channels (with a `[data-brand="hues"]` block) and the Hues palette as `--colorRgbHues*` (its alpha steps excluded), `shadow.css` has `--effectShadow*`, and `tokens/app` has JS exports of hex colors, font sizes, weights, families and radii. `scripts/app-tokens-plugin.mjs` writes them during `build:tokens`.
 
 To publish another CSS file, add it to `cssFiles` in `terrazzo.config.mjs` with the tokens it holds (`'palette'`, or a token ID prefix such as `'app.effect.shadow'`) and, optionally, a `format` (`'rgb'` writes a color's channels). Tokens the hues brand changes get a `[data-brand="hues"]` block automatically.
 
@@ -99,7 +102,9 @@ To publish another CSS file, add it to `cssFiles` in `terrazzo.config.mjs` with
 
 Dark mode follows `prefers-color-scheme`, and `data-theme="dark"` or `data-theme="light"` on any element overrides it for that element and its children.
 
-`data-brand="hues"` on `<html>` or any wrapper element switches to the hues brand. It composes with `data-theme` on the same element or nested in either direction. A wrapper can't switch back to the current brand inside a hues page.
+`data-brand="hues"` on `<html>` or any wrapper element switches to the hues brand: the Hues palette mapping plus the Play UI Kit semantics and fonts. It composes with `data-theme` on the same element or nested in either direction. A wrapper can't switch back to the current brand inside a hues page.
+
+The Play UI Kit shipped light-mode values only. Dark mode under `hues` comes from `tokens/brands/hues.dark.json`, built from the Hues palette: warm grey 950 page, warm grey 900 surfaces, warm grey 50 text. The docs tokens page lists every token to use going forward.
 
 ### Rebuild CSS token variables
 
@@ -111,9 +116,15 @@ The tokens file can also be rebuilt manually with the following command:
 npm run build:tokens
 ```
 
+To see what a token change does to the published variables, compare the rebuilt file with the committed one. The report lists every variable added, changed or removed per selector, and exits non-zero when anything differs, so a change that should be additive can be checked for `0 changed, 0 removed`:
+
+```bash
+npm run tokens:diff
+```
+
 ### 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:
+All design tokens are generated with a `--ntl-` prefix (e.g., `--ntl-color-bg-page`, `--ntl-font-size-heading-l`). 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';

package/dist/assets/AskNetlify.css

@@ -1 +1 @@
-.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.grecaptcha-badge{visibility:hidden}.n-ask-chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}.n-ask-conversation{position:relative;display:grid;align-items:flex-end;gap:var(--space-s);height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);overflow-y:auto;scroll-behavior:smooth;grid-template-rows:1fr}.n-ask-form{display:flex;align-items:center;gap:var(--space-s);position:relative;height:var(--n-search-input-height);background-color:var(--search-input-bg-color)}.n-ask-form:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:1px;background:var(--color-bg-3)}.n-ask-question{border:none;border-radius:var(--radius-pill);transform:translate(-.75rem);color:var(--color-text-1);background:none;padding:var(--space-2xs, .5rem);font-size:var(--step--1, .9rem);font-weight:var(--font-weight-regular);text-align:left;text-wrap:pretty;cursor:pointer;display:flex;align-items:center;gap:var(--space-2xs);transition:background-color .2s ease-out}.n-ask-question [data-icon=caretRight]{opacity:0;height:.8em;color:var(--color-text-weaker);transform:translate(-3px);transition:transform .2s ease-out}.n-ask-question:hover{background-color:var(--n-search-color-bg-2)}.n-ask-question:hover [data-icon=caretRight]{opacity:1;transform:translate(0)}.n-ask-question-list{padding:0}.n-ask-question-list .n-ask-question-list-item{position:relative;width:fit-content;opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.n-ask-message{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s);font-size:var(--font-size-text-md, 1rem)}.n-ask-message:first-of-type{margin-block-start:var(--space-2xl)}.n-ask-message-bubble{width:fit-content;max-width:85%;padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);font-size:var(--step-0)}.n-ask-user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.n-ask-sources{margin-block-start:var(--space-xs)}.n-ask-sources-title{font-size:var(--step-0);font-weight:var(--font-weight-bold)}.n-ask-sources a{font-size:var(--step--1)}.n-ask-sources details summary::marker{display:none;content:none}.n-ask-sources details{background:var(--search-source-list-color);padding:var(--space-xs) var(--space-xs);border-radius:var(--radius-l)}.n-ask-sources details summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);cursor:pointer}.n-ask-sources details ul{margin-block-start:var(--space-3xs)}.n-ask-sources [data-icon=caretRight]{width:.8em;display:inline-block;transform:rotate(90deg);height:auto;color:var(--color-text-weaker)}.n-ask-sources details[open] [data-icon=caretRight]{transform:rotate(270deg)}.n-ask-action-bar{margin-block-start:var(--space-m)}.n-ask-action-bar button{display:grid;border:none}.n-ask-action-bar button svg{pointer-events:none}.n-ask-action-bar .n-popover{--n-popover-padding: var(--space-3xs) var(--space-2xs);--n-popover-bottom: 125%}.n-ask-action-bar [id*=icon-]{width:auto;height:1rem}.n-ask-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.n-ask-form-submit{display:flex;padding:.7rem;margin-inline-end:var(--space-2xs);border:none;border-radius:var(--radius-pill);background:var(--search-submit-btn-bg-color);color:var(--neutral-000);transition:background-color .15s ease-out}.n-ask-form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.n-ask-form-submit[disabled]{background:var(--neutral-500)}.n-ask-form-submit[disabled]>*{opacity:.5}button.n-ask-button-back{position:absolute;z-index:1;width:fit-content;margin:1rem;padding:var(--space-xs) var(--space-s);background:var(--search-back-btn-bg-color);border:.5px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--font-size-text-md, 1rem);font-weight:var(--font-weight-semibold, 500);color:var(--color-text-1);cursor:pointer;line-height:var(--line-height-none, 1)}button.n-ask-button-back [data-icon=caretRight]{color:var(--color-text-weak);transform:rotate(180deg)}.n-ask-prose{font-size:var(--step--0)}.n-ask-prose>*+*{margin-top:var(--flow-space, var(--space-s))}.n-ask-prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.n-ask-prose h1,.n-ask-prose h2,.n-ask-prose h3{font-size:var(--step-1);font-weight:var(--font-weight-bold)}.n-ask-prose h4,.n-ask-prose h5,.n-ask-prose h6{font-size:var(--step-0);font-weight:var(--font-weight-bold)}.n-ask-prose pre{max-width:100%;background:var(--neutral-light-700, var(--neutral-700));border-radius:var(--radius-m);box-sizing:border-box;color:var(--neutral-100);color-scheme:dark;overflow-x:auto}.n-ask-prose code{overflow-x:auto;padding:var(--space-s)}.n-ask-prose code[class*=language-],.n-ask-prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.n-ask-message-loader{width:2.5rem;height:auto;display:block;color:var(--search-loading-color)}.n-ask-message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:fadeIn .8s ease-in-out infinite}.n-ask-message-loader #ask-netlify-tick-1{animation-delay:.1s}.n-ask-message-loader #ask-netlify-tick-2{animation-delay:.2s}.n-ask-message-loader #ask-netlify-tick-3{animation-delay:.3s}.n-ask-message-loader :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color);transform-origin:top center;transform:scaleY(1.035);animation:askEyeBlink 4s infinite;animation-delay:1s}@keyframes askEyeBlink{0%,5%{transform:scaleY(1.035)}6%,10%{transform:scaleY(1.3)}11%,15%{transform:scaleY(1.035)}16%,20%{transform:scaleY(1.3)}21%,to{transform:scaleY(1.035)}}
+.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.grecaptcha-badge{visibility:hidden}.n-ask-chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}.n-ask-conversation{position:relative;display:grid;align-items:flex-end;gap:var(--space-s);height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);overflow-y:auto;scroll-behavior:smooth;grid-template-rows:1fr}.n-ask-form{display:flex;align-items:center;gap:var(--space-s);position:relative;height:var(--n-search-input-height);background-color:var(--search-input-bg-color)}.n-ask-form:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:1px;background:var(--ntl-color-bg-muted)}.n-ask-question{border:none;border-radius:var(--radius-pill);transform:translate(-.75rem);color:var(--ntl-color-text);background:none;padding:var(--space-2xs, .5rem);font-size:var(--step--1, .9rem);font-weight:var(--font-weight-regular);text-align:left;text-wrap:pretty;cursor:pointer;display:flex;align-items:center;gap:var(--space-2xs);transition:background-color .2s ease-out}.n-ask-question [data-icon=caretRight]{opacity:0;height:.8em;color:var(--color-text-weaker);transform:translate(-3px);transition:transform .2s ease-out}.n-ask-question:hover{background-color:var(--n-search-color-bg-2)}.n-ask-question:hover [data-icon=caretRight]{opacity:1;transform:translate(0)}.n-ask-question-list{padding:0}.n-ask-question-list .n-ask-question-list-item{position:relative;width:fit-content;opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.n-ask-message{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s);font-size:var(--font-size-text-md, 1rem)}.n-ask-message:first-of-type{margin-block-start:var(--space-2xl)}.n-ask-message-bubble{width:fit-content;max-width:85%;padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);font-size:var(--step-0)}.n-ask-user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.n-ask-sources{margin-block-start:var(--space-xs)}.n-ask-sources-title{font-size:var(--step-0);font-weight:var(--font-weight-bold)}.n-ask-sources a{font-size:var(--step--1)}.n-ask-sources details summary::marker{display:none;content:none}.n-ask-sources details{background:var(--search-source-list-color);padding:var(--space-xs) var(--space-xs);border-radius:var(--radius-l)}.n-ask-sources details summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);cursor:pointer}.n-ask-sources details ul{margin-block-start:var(--space-3xs)}.n-ask-sources [data-icon=caretRight]{width:.8em;display:inline-block;transform:rotate(90deg);height:auto;color:var(--color-text-weaker)}.n-ask-sources details[open] [data-icon=caretRight]{transform:rotate(270deg)}.n-ask-action-bar{margin-block-start:var(--space-m)}.n-ask-action-bar button{display:grid;border:none}.n-ask-action-bar button svg{pointer-events:none}.n-ask-action-bar .n-popover{--n-popover-padding: var(--space-3xs) var(--space-2xs);--n-popover-bottom: 125%}.n-ask-action-bar [id*=icon-]{width:auto;height:1rem}.n-ask-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.n-ask-form-submit{display:flex;padding:.7rem;margin-inline-end:var(--space-2xs);border:none;border-radius:var(--radius-pill);background:var(--search-submit-btn-bg-color);color:var(--neutral-000);transition:background-color .15s ease-out}.n-ask-form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.n-ask-form-submit[disabled]{background:var(--neutral-500)}.n-ask-form-submit[disabled]>*{opacity:.5}button.n-ask-button-back{position:absolute;z-index:1;width:fit-content;margin:1rem;padding:var(--space-xs) var(--space-s);background:var(--search-back-btn-bg-color);border:.5px solid var(--ntl-color-border);border-radius:var(--radius-pill);font-size:var(--font-size-text-md, 1rem);font-weight:var(--font-weight-semibold, 500);color:var(--ntl-color-text);cursor:pointer;line-height:var(--line-height-none, 1)}button.n-ask-button-back [data-icon=caretRight]{color:var(--color-text-weak);transform:rotate(180deg)}.n-ask-prose{font-size:var(--step--0)}.n-ask-prose>*+*{margin-top:var(--flow-space, var(--space-s))}.n-ask-prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.n-ask-prose h1,.n-ask-prose h2,.n-ask-prose h3{font-size:var(--step-1);font-weight:var(--font-weight-bold)}.n-ask-prose h4,.n-ask-prose h5,.n-ask-prose h6{font-size:var(--step-0);font-weight:var(--font-weight-bold)}.n-ask-prose pre{max-width:100%;background:var(--neutral-light-700, var(--neutral-700));border-radius:var(--radius-m);box-sizing:border-box;color:var(--neutral-100);color-scheme:dark;overflow-x:auto}.n-ask-prose code{overflow-x:auto;padding:var(--space-s)}.n-ask-prose code[class*=language-],.n-ask-prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.n-ask-message-loader{width:2.5rem;height:auto;display:block;color:var(--search-loading-color)}.n-ask-message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:fadeIn .8s ease-in-out infinite}.n-ask-message-loader #ask-netlify-tick-1{animation-delay:.1s}.n-ask-message-loader #ask-netlify-tick-2{animation-delay:.2s}.n-ask-message-loader #ask-netlify-tick-3{animation-delay:.3s}.n-ask-message-loader :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color);transform-origin:top center;transform:scaleY(1.035);animation:askEyeBlink 4s infinite;animation-delay:1s}@keyframes askEyeBlink{0%,5%{transform:scaleY(1.035)}6%,10%{transform:scaleY(1.3)}11%,15%{transform:scaleY(1.035)}16%,20%{transform:scaleY(1.3)}21%,to{transform:scaleY(1.035)}}

package/dist/assets/DropZone.css

@@ -1 +1 @@
-.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.n-dropzone{--n-dropzone-accent: var(--color-brand-primary, #0e7fe1);--n-dropzone-radius: var(--radius-2xl, 1rem);box-sizing:border-box;position:relative;min-height:4rem;color:var(--color-text-default, #14161a);border:2px dashed var(--color-border-default, rgba(0, 0, 0, .15));border-radius:var(--n-dropzone-radius);outline:none;cursor:pointer;transition:border-color .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out}.n-dropzone:focus-visible{border-color:var(--n-dropzone-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--n-dropzone-accent) 40%,transparent)}.n-dropzone.is-active{border-color:var(--n-dropzone-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--n-dropzone-accent) 18%,transparent)}.n-dropzone.is-busy{border-style:solid;border-color:var(--color-border-subtle, rgba(0, 0, 0, .08))}.n-dropzone-content{transition:opacity .15s ease-out;pointer-events:none}.n-dropzone.is-active:not(.is-bare) .n-dropzone-content,.n-dropzone.is-busy:not(.is-bare) .n-dropzone-content{opacity:0}.n-dropzone-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-s, 1rem);padding:var(--space-l, 1.5rem);text-align:center;border-radius:inherit;pointer-events:none;background:color-mix(in srgb,var(--n-dropzone-accent) 10%,transparent)}.n-dropzone.is-busy .n-dropzone-overlay,.n-dropzone[data-state=error] .n-dropzone-overlay{pointer-events:auto;background:color-mix(in srgb,var(--color-bg, #fff) 88%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.n-dropzone-hint{margin:0;font-size:1.0625rem;font-weight:var(--font-weight-semibold, 600);color:var(--n-dropzone-accent)}.n-dropzone-title{margin:0;font-size:1.125rem;font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-snug, 1.3)}.n-dropzone-title--error{color:var(--color-invalid-text, #d00)}.n-dropzone-subtitle{margin:0;max-width:30rem;font-size:.9375rem;color:var(--color-text-weak, #5c6570);line-height:var(--line-height-text, 1.5)}.n-dropzone-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-s, 1rem)}.n-dropzone-spinner{width:2.25rem;height:2.25rem;border-radius:var(--radius-pill, 999px);border:3px solid color-mix(in srgb,var(--n-dropzone-accent) 22%,transparent);border-top-color:var(--n-dropzone-accent);animation:dropSpin .72s linear infinite}@keyframes dropSpin{to{transform:rotate(360deg)}}.n-dropzone-nudge{display:block;font-size:.8125rem;color:var(--color-text-weaker, #8a929c)}.n-dropzone-progress{width:min(22rem,100%);height:.5rem;border-radius:var(--radius-pill, 999px);background:var(--color-bg-3, rgba(0, 0, 0, .08));overflow:hidden}.n-dropzone-progress-bar{height:100%;border-radius:inherit;background:var(--n-dropzone-accent);transition:width .3s cubic-bezier(.22,1,.36,1)}.n-dropzone-browse{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2xs, .5rem) var(--space-m, 1.25rem);border:none;border-radius:var(--radius-pill, 999px);background:var(--n-dropzone-accent);color:var(--neutral-000, #fff);font-size:.9375rem;font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-none, 1);text-decoration:none;cursor:pointer;transition:background-color .15s ease-out,transform .12s ease-out}.n-dropzone-browse:hover{background:var(--color-brand-primary-hover, #0b6bc0);transform:translateY(-1px)}.n-dropzone-browse:active{transform:translateY(0)}.n-dropzone-warning{margin:0;padding:var(--space-2xs, .5rem) var(--space-s, 1rem);max-width:32rem;border-radius:var(--radius-m, .5rem);background:var(--color-warning-bg, #fdf3d7);color:var(--color-warning-text, #7a5b00);font-size:.8125rem}@media (prefers-reduced-motion: reduce){.n-dropzone,.n-dropzone-overlay,.n-dropzone-spinner,.n-dropzone-progress-bar{animation:none!important;transition:none!important}.n-dropzone-spinner{border-top-color:var(--n-dropzone-accent)}}
+.n-fadeIn{opacity:0;animation:fadeIn var(--animation-duration, .3s) ease-out forwards}.n-fadeInUp{opacity:0;transform:translateY(var(--animation-transformY, 5px));animation:fadeInUp var(--animation-duration, .3s) ease-out forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.n-dropzone{--n-dropzone-accent: var(--color-brand-primary, #0e7fe1);--n-dropzone-radius: var(--radius-2xl, 1rem);box-sizing:border-box;position:relative;min-height:4rem;color:var(--ntl-color-text, #14161a);border:2px dashed var(--ntl-color-border, rgba(0, 0, 0, .15));border-radius:var(--n-dropzone-radius);outline:none;cursor:pointer;transition:border-color .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out}.n-dropzone:focus-visible{border-color:var(--n-dropzone-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--n-dropzone-accent) 40%,transparent)}.n-dropzone.is-active{border-color:var(--n-dropzone-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--n-dropzone-accent) 18%,transparent)}.n-dropzone.is-busy{border-style:solid;border-color:var(--color-border-subtle, rgba(0, 0, 0, .08))}.n-dropzone-content{transition:opacity .15s ease-out;pointer-events:none}.n-dropzone.is-active:not(.is-bare) .n-dropzone-content,.n-dropzone.is-busy:not(.is-bare) .n-dropzone-content{opacity:0}.n-dropzone-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-s, 1rem);padding:var(--space-l, 1.5rem);text-align:center;border-radius:inherit;pointer-events:none;background:color-mix(in srgb,var(--n-dropzone-accent) 10%,transparent)}.n-dropzone.is-busy .n-dropzone-overlay,.n-dropzone[data-state=error] .n-dropzone-overlay{pointer-events:auto;background:color-mix(in srgb,var(--color-bg, #fff) 88%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.n-dropzone-hint{margin:0;font-size:1.0625rem;font-weight:var(--font-weight-semibold, 600);color:var(--n-dropzone-accent)}.n-dropzone-title{margin:0;font-size:1.125rem;font-weight:var(--font-weight-semibold, 600);line-height:var(--ntl-line-height-label)}.n-dropzone-title--error{color:var(--color-invalid-text, #d00)}.n-dropzone-subtitle{margin:0;max-width:30rem;font-size:.9375rem;color:var(--color-text-weak, #5c6570);line-height:var(--line-height-text, 1.5)}.n-dropzone-loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-s, 1rem)}.n-dropzone-spinner{width:2.25rem;height:2.25rem;border-radius:var(--radius-pill, 999px);border:3px solid color-mix(in srgb,var(--n-dropzone-accent) 22%,transparent);border-top-color:var(--n-dropzone-accent);animation:dropSpin .72s linear infinite}@keyframes dropSpin{to{transform:rotate(360deg)}}.n-dropzone-nudge{display:block;font-size:.8125rem;color:var(--color-text-weaker, #8a929c)}.n-dropzone-progress{width:min(22rem,100%);height:.5rem;border-radius:var(--radius-pill, 999px);background:var(--ntl-color-bg-muted, rgba(0, 0, 0, .08));overflow:hidden}.n-dropzone-progress-bar{height:100%;border-radius:inherit;background:var(--n-dropzone-accent);transition:width .3s cubic-bezier(.22,1,.36,1)}.n-dropzone-browse{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2xs, .5rem) var(--space-m, 1.25rem);border:none;border-radius:var(--radius-pill, 999px);background:var(--n-dropzone-accent);color:var(--neutral-000, #fff);font-size:.9375rem;font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-none, 1);text-decoration:none;cursor:pointer;transition:background-color .15s ease-out,transform .12s ease-out}.n-dropzone-browse:hover{background:var(--color-brand-primary-hover, #0b6bc0);transform:translateY(-1px)}.n-dropzone-browse:active{transform:translateY(0)}.n-dropzone-warning{margin:0;padding:var(--space-2xs, .5rem) var(--space-s, 1rem);max-width:32rem;border-radius:var(--radius-m, .5rem);background:var(--color-warning-bg, #fdf3d7);color:var(--color-warning-text, #7a5b00);font-size:.8125rem}@media (prefers-reduced-motion: reduce){.n-dropzone,.n-dropzone-overlay,.n-dropzone-spinner,.n-dropzone-progress-bar{animation:none!important;transition:none!important}.n-dropzone-spinner{border-top-color:var(--n-dropzone-accent)}}

package/dist/assets/Popover.css

@@ -1 +1 @@
-.n-popover-container{position:relative;display:inline-block;font-size:var(--font-size-text-xs)}.n-popover-trigger{display:block;background-color:transparent;border:none;padding:0;font:inherit;color:var(--color-text-weak);cursor:pointer}.n-popover{position:absolute;background-color:var(--color-bg-2);color:var(--color-text);padding:var(--n-popover-padding, var(--space-xs) var(--space-s));border-radius:var(--radius-s);opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;z-index:10}.n-popover:after{content:"";position:absolute;border-style:solid}.n-popover-container:hover .n-popover{opacity:1;pointer-events:auto}.n-popover-top .n-popover{bottom:var(--n-popover-bottom, 145%);left:50%;transform:translate(-50%);width:max-content;max-width:var(--n-popover-width, 255px);box-shadow:var(--shadow-light)}.n-popover-top .n-popover:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--color-bg-2) transparent transparent transparent}.n-popover-bottom .n-popover{top:145%;left:50%;transform:translate(-50%)}.n-popover-bottom .n-popover:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--color-bg-2) transparent}.n-popover-left .n-popover{right:125%;top:50%;transform:translateY(-50%)}.n-popover-left .n-popover:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--color-bg-2)}.n-popover-right .n-popover{left:125%;top:50%;transform:translateY(-50%)}.n-popover-right .n-popover:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--color-bg-2) transparent transparent}
+.n-popover-container{position:relative;display:inline-block;font-size:var(--font-size-text-xs)}.n-popover-trigger{display:block;background-color:transparent;border:none;padding:0;font:inherit;color:var(--color-text-weak);cursor:pointer}.n-popover{position:absolute;background-color:var(--ntl-color-bg-subtle);color:var(--color-text);padding:var(--n-popover-padding, var(--space-xs) var(--space-s));border-radius:var(--radius-s);opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;z-index:10}.n-popover:after{content:"";position:absolute;border-style:solid}.n-popover-container:hover .n-popover{opacity:1;pointer-events:auto}.n-popover-top .n-popover{bottom:var(--n-popover-bottom, 145%);left:50%;transform:translate(-50%);width:max-content;max-width:var(--n-popover-width, 255px);box-shadow:var(--shadow-light)}.n-popover-top .n-popover:after{top:100%;left:50%;margin-left:-5px;border-width:5px;border-color:var(--ntl-color-bg-subtle) transparent transparent transparent}.n-popover-bottom .n-popover{top:145%;left:50%;transform:translate(-50%)}.n-popover-bottom .n-popover:after{bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-color:transparent transparent var(--ntl-color-bg-subtle) transparent}.n-popover-left .n-popover{right:125%;top:50%;transform:translateY(-50%)}.n-popover-left .n-popover:after{top:50%;left:100%;margin-top:-5px;border-width:5px;border-color:transparent transparent transparent var(--ntl-color-bg-subtle)}.n-popover-right .n-popover{left:125%;top:50%;transform:translateY(-50%)}.n-popover-right .n-popover:after{top:50%;right:100%;margin-top:-5px;border-width:5px;border-color:transparent var(--ntl-color-bg-subtle) transparent transparent}

package/dist/assets/SearchLink.css

@@ -1 +1 @@
-.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--n-search-color-bg-2);animation:askEyeBlink 4s infinite;animation-delay:.2s}.n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color)}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-search-link-badge[data-resource=knowledge-base]{--n-search-link-badge-color: var(--color-success-bg);--n-search-link-badge-text-color: var(--color-success-text);--n-search-link-badge-border: var(--color-success-border)}
+.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--n-search-color-bg-2);animation:askEyeBlink 4s infinite;animation-delay:.2s}.n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color)}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--ntl-color-text);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--ntl-color-highlight-bg))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--ntl-color-highlight-bg);--n-search-link-badge-text-color: var(--ntl-color-highlight-text);--n-search-link-badge-border: var(--ntl-color-highlight-border)}.n-search-link-badge[data-resource=knowledge-base]{--n-search-link-badge-color: var(--color-success-bg);--n-search-link-badge-text-color: var(--color-success-text);--n-search-link-badge-border: var(--color-success-border)}

package/dist/assets/SearchModal.css

@@ -1 +1 @@
-.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{--n-search-heading-weight: var(--font-weight-semibold, 400);--n-search-heading-size: var(--font-size-text-xs, 13px);--n-search-heading-color: var(--color-text-weak, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);font-family:var(--font-family-mono);color:var(--n-search-heading-color);padding-inline:var(--space-xs);margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--n-search-color-bg-2);animation:askEyeBlink 4s infinite;animation-delay:.2s}.n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color)}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-search-link-badge[data-resource=knowledge-base]{--n-search-link-badge-color: var(--color-success-bg);--n-search-link-badge-text-color: var(--color-success-text);--n-search-link-badge-border: var(--color-success-border)}.n-loader-dots-spinner{width:var(--n-loader-dot-w, 50px);aspect-ratio:1;--_c: no-repeat radial-gradient(farthest-side, var(--n-loader-dot-color, var(--teal-600)) 92%, #0000);background:var(--_c) top,var(--_c) left,var(--_c) right,var(--_c) bottom;background-size:12px 12px;animation:l7 1s infinite}@keyframes l7{to{transform:rotate(.5turn)}}.n-search-modal{--n-search-padding-inline: var(--space-s);--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-weak, currentColor);--n-search-color-icon: var(--search-icon-color);--n-search-color-bg: var(--search-bg-color);--n-search-color-bg-2: var(--color-bg-3);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 1.3rem;--n-search-max-w: 600px;--n-search-text-highlight: var(--search-highlight-color);--n-search-input-height: 50px;--n-search-footer-height: 40px;--n-search-container-height: min(50dvh, 26.5rem)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto;background:var(--n-search-color-bg);transition-delay:.2s}.n-search-modal[data-state=ask]{--n-search-max-w: 800px}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{position:relative;display:flex;width:100%;height:var(--n-search-input-height);align-items:center}.n-search-input{position:relative;display:inline-flex;box-sizing:border-box;background:transparent;inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--color-text-1)}.n-search-input-clear{border:none;color:var(--n-search-color-text-secondary);font-size:var(--font-size-text-sm);margin-inline:var(--space-m);height:min-content;padding:0;outline-offset:.5rem;background:none;cursor:pointer}.n-search-input-wrapper:after,.n-search-footer:after{content:"";display:block;width:200%;height:1px;background:var(--n-search-color-border);position:absolute;bottom:0;left:0}.n-search-input::placeholder{color:var(--n-search-color-text-secondary)}.n-search-links{padding:var(--space-2xs);height:100%}.n-search-label{display:flex;padding-inline-start:var(--n-search-padding-inline);align-items:center}.n-results-list{padding-inline:0;padding-block-end:var(--space-2xs)}.n-results-info{font-family:var(--font-family-display);font-size:var(--step--1);padding-inline:var(--space-xs)}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, 1em);height:var(--n-search-icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-bold);color:var(--n-search-color-text-secondary)}.n-search-window{height:var(--n-search-container-height);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:var(--space-s);margin-block:0;background:var(--n-search-color-bg)}.n-search-feedback{height:calc(100% - 70px);display:grid;place-content:center}.n-search-footer{position:relative;display:flex;gap:var(--space-m);padding:var(--space-2xs) var(--space-s);height:var(--n-search-footer-height)}.n-search-footer:after{top:0}.n-search-footer-tip{color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--font-size-text-sm)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete,width .15s ease-in-out;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}.n-search-modal[data-state=search]>*{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}@keyframes openSearch{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:scale(1)}50%{opacity:.3}to{opacity:0;transform:scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}
+.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{--n-search-heading-weight: var(--font-weight-semibold, 400);--n-search-heading-size: var(--font-size-text-xs, 13px);--n-search-heading-color: var(--color-text-weak, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);font-family:var(--font-family-mono);color:var(--n-search-heading-color);padding-inline:var(--space-xs);margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--n-search-color-bg-2);animation:askEyeBlink 4s infinite;animation-delay:.2s}.n-search-link-icon :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){--n-ask-netlify-eyelid-color: var(--search-bg-color)}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--ntl-color-text);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--ntl-color-highlight-bg))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--ntl-color-highlight-bg);--n-search-link-badge-text-color: var(--ntl-color-highlight-text);--n-search-link-badge-border: var(--ntl-color-highlight-border)}.n-search-link-badge[data-resource=knowledge-base]{--n-search-link-badge-color: var(--color-success-bg);--n-search-link-badge-text-color: var(--color-success-text);--n-search-link-badge-border: var(--color-success-border)}.n-loader-dots-spinner{width:var(--n-loader-dot-w, 50px);aspect-ratio:1;--_c: no-repeat radial-gradient(farthest-side, var(--n-loader-dot-color, var(--teal-600)) 92%, #0000);background:var(--_c) top,var(--_c) left,var(--_c) right,var(--_c) bottom;background-size:12px 12px;animation:l7 1s infinite}@keyframes l7{to{transform:rotate(.5turn)}}.n-search-modal{--n-search-padding-inline: var(--space-s);--n-search-color-text: var(--ntl-color-text, currentColor);--n-search-color-text-secondary: var(--color-text-weak, currentColor);--n-search-color-icon: var(--search-icon-color);--n-search-color-bg: var(--search-bg-color);--n-search-color-bg-2: var(--ntl-color-bg-muted);--n-search-color-border: var(--ntl-color-border);--n-search-border-radius: 1.3rem;--n-search-max-w: 600px;--n-search-text-highlight: var(--search-highlight-color);--n-search-input-height: 50px;--n-search-footer-height: 40px;--n-search-container-height: min(50dvh, 26.5rem)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto;background:var(--n-search-color-bg);transition-delay:.2s}.n-search-modal[data-state=ask]{--n-search-max-w: 800px}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{position:relative;display:flex;width:100%;height:var(--n-search-input-height);align-items:center}.n-search-input{position:relative;display:inline-flex;box-sizing:border-box;background:transparent;inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--ntl-color-text)}.n-search-input-clear{border:none;color:var(--n-search-color-text-secondary);font-size:var(--font-size-text-sm);margin-inline:var(--space-m);height:min-content;padding:0;outline-offset:.5rem;background:none;cursor:pointer}.n-search-input-wrapper:after,.n-search-footer:after{content:"";display:block;width:200%;height:1px;background:var(--n-search-color-border);position:absolute;bottom:0;left:0}.n-search-input::placeholder{color:var(--n-search-color-text-secondary)}.n-search-links{padding:var(--space-2xs);height:100%}.n-search-label{display:flex;padding-inline-start:var(--n-search-padding-inline);align-items:center}.n-results-list{padding-inline:0;padding-block-end:var(--space-2xs)}.n-results-info{font-family:var(--ntl-font-family-heading);font-size:var(--step--1);padding-inline:var(--space-xs)}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, 1em);height:var(--n-search-icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--ntl-font-weight-bold);color:var(--n-search-color-text-secondary)}.n-search-window{height:var(--n-search-container-height);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:var(--space-s);margin-block:0;background:var(--n-search-color-bg)}.n-search-feedback{height:calc(100% - 70px);display:grid;place-content:center}.n-search-footer{position:relative;display:flex;gap:var(--space-m);padding:var(--space-2xs) var(--space-s);height:var(--n-search-footer-height)}.n-search-footer:after{top:0}.n-search-footer-tip{color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--font-size-text-sm)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete,width .15s ease-in-out;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}.n-search-modal[data-state=search]>*{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}@keyframes openSearch{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:scale(1)}50%{opacity:.3}to{opacity:0;transform:scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -9,14 +9,15 @@
     "**/*.css"
   ],
   "scripts": {
-    "build:tokens": "npx tz build && node scripts/generate-compat-tokens.mjs",
+    "build:tokens": "npx tz build && node scripts/generate-compat-tokens.mjs && node scripts/docs-token-values.mjs",
     "build:vite": "vite build",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.astro",
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx,.astro --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css",
     "test": "vitest run",
-    "prepublishOnly": "npm run build:vite"
+    "prepublishOnly": "npm run build:vite",
+    "tokens:diff": "node scripts/diff-tokens.mjs"
   },
   "files": [
     "packages/",

package/packages/assets/fonts/ibm-plex-mono/OFL.txt

@@ -0,0 +1,93 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/packages/components/Blockquote.astro

@@ -53,7 +53,7 @@ if (Astro.slots.has('default')) {
     padding-inline-start: var(--_gap);
     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-family: var(--ntl-font-family-heading);
     font-weight: var(--ntl-font-weight-bold);
     line-height: var(--ntl-line-height-heading);
   }

package/packages/components/Card.astro

@@ -140,10 +140,10 @@ const isExternal =
 
   .n-card-headline {
     font-size: var(--ntl-font-size-display-sm);
-    font-family: var(--ntl-font-family-display);
+    font-family: var(--ntl-font-family-heading);
     font-weight: var(--ntl-font-weight-bold);
     line-height: var(--ntl-line-height-heading);
-    color: var(--ntl-heading-text-color);
+    color: var(--ntl-color-text-heading);
   }
 
   .n-card-headline:has(+ .n-action-link) {

package/packages/components/Eyebrow.astro

@@ -11,7 +11,7 @@ const { as: Element = 'div', class: className, ...rest } = Astro.props;
     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);
+    color: var(--ntl-color-text-eyebrow);
     text-transform: uppercase;
   }
 </style>

package/packages/components/FilterableGrid/FilterableGrid.astro

@@ -250,7 +250,7 @@ const initialResultsLabel = `${totalCount} ${totalCount === 1 ? results.singular
       width: auto;
       gap: var(--ntl-space-s);
       padding: var(--ntl-space-s);
-      background-color: var(--ntl-color-bg-2);
+      background-color: var(--ntl-color-bg-subtle);
     }
   }
 
@@ -278,7 +278,7 @@ const initialResultsLabel = `${totalCount} ${totalCount === 1 ? results.singular
     justify-content: space-between;
     gap: var(--ntl-space-2xs);
     padding-block: var(--ntl-space-2xs);
-    color: var(--ntl-heading-text-color);
+    color: var(--ntl-color-text-heading);
     cursor: pointer;
     list-style: none;
   }
@@ -292,7 +292,7 @@ const initialResultsLabel = `${totalCount} ${totalCount === 1 ? results.singular
       padding: var(--ntl-space-2xs) var(--ntl-space-s);
       border: 1px solid var(--ntl-color-border-strong);
       border-radius: var(--ntl-radius-m);
-      background-color: var(--ntl-color-bg);
+      background-color: var(--ntl-color-bg-page);
     }
 
     .n-filter-facet[open] > summary {
@@ -376,7 +376,7 @@ const initialResultsLabel = `${totalCount} ${totalCount === 1 ? results.singular
       z-index: 1;
       padding: var(--ntl-space-s);
       border-radius: var(--ntl-radius-m);
-      background-color: var(--ntl-color-bg);
+      background-color: var(--ntl-color-bg-page);
       box-shadow: var(--ntl-shadow-deep, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2));
     }
   }

package/packages/components/HeadingBlock.astro

@@ -83,7 +83,7 @@ const customStyles =
     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(--ntl-heading-text-color);
+    color: var(--ntl-color-text-heading);
   }
 
   .n-heading-block-text {

package/packages/components/PageHero.astro

@@ -13,7 +13,7 @@ const { class: className, heading, text, ctas, ...rest } = Astro.props;
 <style>
   .n-page-hero {
     --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-page-section-bg-color: linear-gradient(to bottom, var(--ntl-color-bg-page) 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);
   }

package/packages/components/PageHeroGraphic.astro

@@ -18,7 +18,7 @@ const { class: className, heading, text, ctas, ...rest } = Astro.props;
     --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))
+      linear-gradient(to bottom, var(--ntl-color-bg-page) 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);

package/packages/components/PageSection.astro

@@ -34,7 +34,7 @@ const customStyles =
   .n-page-section {
     --_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));
+    background: var(--ntl-page-section-bg-color, var(--ntl-color-bg-page));
     padding-block-start: var(--ntl-page-section-space-top, var(--_space));
     padding-block-end: var(--ntl-page-section-space-bottom, var(--_space));
   }

package/packages/components/TabbedContent.astro

@@ -17,7 +17,7 @@ const { id, class: className, ...rest } = Astro.props;
   .n-tabbed-content {
     --_border-size: 1px;
     --_border-style: solid;
-    --_border-color-inactive: var(--ntl-color-bg-3);
+    --_border-color-inactive: var(--ntl-color-border);
     --_border-color-active: var(--ntl-color-icon);
     display: block;
     isolation: isolate;
@@ -41,12 +41,12 @@ const { id, class: className, ...rest } = Astro.props;
     text-wrap: nowrap;
     outline-offset: -1px;
     padding: var(--ntl-space-xs) var(--ntl-space-s);
-    font-family: var(--ntl-font-family-display);
+    font-family: var(--ntl-font-family-heading);
     font-size: var(--ntl-font-size-text-lg);
     font-weight: var(--ntl-font-weight-semibold);
     line-height: var(--ntl-line-height-heading);
     text-align: center;
-    color: var(--ntl-body-text-color);
+    color: var(--ntl-color-text);
     background: var(--ntl-tabbed-content-bg-color);
     border: var(--_border-size) var(--_border-style) var(--_border-color-inactive);
     border-radius: 0;

package/packages/components/TrustBarTickerItem.astro

@@ -38,7 +38,7 @@ const { as: Element = 'div', id, iconSrc, text, class: className, ...rest } = As
     padding: var(--ntl-space-3xs);
     inline-size: 2.5rem;
     border-radius: 50%;
-    border: 1px solid var(--ntl-color-stroke);
+    border: 1px solid var(--ntl-color-border);
     background: var(--ntl-code-bg-color);
   }
 

package/packages/components/preact/AskNetlify/AskNetlify.css

@@ -42,7 +42,7 @@
   left: 0;
   width: 100%;
   height: 1px;
-  background: var(--color-bg-3);
+  background: var(--ntl-color-bg-muted);
 }
 
 /* ----------------------------- */
@@ -52,7 +52,7 @@
   border: none;
   border-radius: var(--radius-pill);
   transform: translateX(-0.75rem);
-  color: var(--color-text-1);
+  color: var(--ntl-color-text);
   background: none;
   padding: var(--space-2xs, 0.5rem);
   font-size: var(--step--1, 0.9rem);
@@ -237,11 +237,11 @@ button.n-ask-button-back {
   margin: 1rem;
   padding: var(--space-xs) var(--space-s);
   background: var(--search-back-btn-bg-color);
-  border: 0.5px solid var(--color-bg-3);
+  border: 0.5px solid var(--ntl-color-border);
   border-radius: var(--radius-pill);
   font-size: var(--font-size-text-md, 1rem);
   font-weight: var(--font-weight-semibold, 500);
-  color: var(--color-text-1);
+  color: var(--ntl-color-text);
   cursor: pointer;
   line-height: var(--line-height-none, 1);
 }

package/packages/components/preact/DropZone/DropZone.css

@@ -12,8 +12,8 @@
   box-sizing: border-box;
   position: relative;
   min-height: 4rem;
-  color: var(--color-text-default, #14161a);
-  border: 2px dashed var(--color-border-default, rgba(0, 0, 0, 0.15));
+  color: var(--ntl-color-text, #14161a);
+  border: 2px dashed var(--ntl-color-border, rgba(0, 0, 0, 0.15));
   border-radius: var(--n-dropzone-radius);
   outline: none;
   cursor: pointer;
@@ -104,7 +104,7 @@
   margin: 0;
   font-size: 1.125rem;
   font-weight: var(--font-weight-semibold, 600);
-  line-height: var(--line-height-snug, 1.3);
+  line-height: var(--ntl-line-height-label);
 }
 
 .n-dropzone-title--error {
@@ -157,7 +157,7 @@
   width: min(22rem, 100%);
   height: 0.5rem;
   border-radius: var(--radius-pill, 999px);
-  background: var(--color-bg-3, rgba(0, 0, 0, 0.08));
+  background: var(--ntl-color-bg-muted, rgba(0, 0, 0, 0.08));
   overflow: hidden;
 }
 

package/packages/components/preact/Popover/Popover.css

@@ -16,7 +16,7 @@
 
 .n-popover {
   position: absolute;
-  background-color: var(--color-bg-2);
+  background-color: var(--ntl-color-bg-subtle);
   color: var(--color-text);
   padding: var(--n-popover-padding, var(--space-xs) var(--space-s));
   border-radius: var(--radius-s);
@@ -51,7 +51,7 @@
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
-  border-color: var(--color-bg-2) transparent transparent transparent;
+  border-color: var(--ntl-color-bg-subtle) transparent transparent transparent;
 }
 
 .n-popover-bottom .n-popover {
@@ -65,7 +65,7 @@
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
-  border-color: transparent transparent var(--color-bg-2) transparent;
+  border-color: transparent transparent var(--ntl-color-bg-subtle) transparent;
 }
 
 .n-popover-left .n-popover {
@@ -79,7 +79,7 @@
   left: 100%;
   margin-top: -5px;
   border-width: 5px;
-  border-color: transparent transparent transparent var(--color-bg-2);
+  border-color: transparent transparent transparent var(--ntl-color-bg-subtle);
 }
 
 .n-popover-right .n-popover {
@@ -93,5 +93,5 @@
   right: 100%;
   margin-top: -5px;
   border-width: 5px;
-  border-color: transparent var(--color-bg-2) transparent transparent;
+  border-color: transparent var(--ntl-color-bg-subtle) transparent transparent;
 }

package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css

@@ -45,7 +45,7 @@
 
 .n-search-link-title {
   font-weight: var(--font-weight-medium);
-  color: var(--color-text-1);
+  color: var(--ntl-color-text);
   line-height: 1.5;
 }
 
@@ -61,7 +61,7 @@
 
 .n-search-link-excerpt mark {
   color: var(--mark-color, currentColor);
-  background-color: var(--mark-bg, var(--color-highlight));
+  background-color: var(--mark-bg, var(--ntl-color-highlight-bg));
 }
 
 .n-search-link-icon,
@@ -105,9 +105,9 @@
   --n-search-link-badge-border: var(--color-warning-border);
 }
 .n-search-link-badge[data-resource='guide'] {
-  --n-search-link-badge-color: var(--color-highlight-bg);
-  --n-search-link-badge-text-color: var(--color-highlight-text);
-  --n-search-link-badge-border: var(--color-highlight-border);
+  --n-search-link-badge-color: var(--ntl-color-highlight-bg);
+  --n-search-link-badge-text-color: var(--ntl-color-highlight-text);
+  --n-search-link-badge-border: var(--ntl-color-highlight-border);
 }
 .n-search-link-badge[data-resource='knowledge-base'] {
   --n-search-link-badge-color: var(--color-success-bg);

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css

@@ -6,12 +6,12 @@
 /* Root Variables */
 .n-search-modal {
   --n-search-padding-inline: var(--space-s);
-  --n-search-color-text: var(--color-text-1, currentColor);
+  --n-search-color-text: var(--ntl-color-text, currentColor);
   --n-search-color-text-secondary: var(--color-text-weak, currentColor);
   --n-search-color-icon: var(--search-icon-color);
   --n-search-color-bg: var(--search-bg-color);
-  --n-search-color-bg-2: var(--color-bg-3);
-  --n-search-color-border: var(--color-bg-3);
+  --n-search-color-bg-2: var(--ntl-color-bg-muted);
+  --n-search-color-border: var(--ntl-color-border);
   --n-search-border-radius: 1.3rem;
   --n-search-max-w: 600px;
   --n-search-text-highlight: var(--search-highlight-color);
@@ -72,7 +72,7 @@
   border: none;
   outline: none;
   font-size: 1rem;
-  color: var(--color-text-1);
+  color: var(--ntl-color-text);
 }
 
 .n-search-input-clear {
@@ -120,7 +120,7 @@
 }
 
 .n-results-info {
-  font-family: var(--font-family-display);
+  font-family: var(--ntl-font-family-heading);
   font-size: var(--step--1);
   padding-inline: var(--space-xs);
 }
@@ -138,7 +138,7 @@
 }
 
 .n-search-term {
-  font-weight: var(--font-bold);
+  font-weight: var(--ntl-font-weight-bold);
   color: var(--n-search-color-text-secondary);
 }