@netlify/spark-ui 0.0.47 → 1.0.0

package/README.md

@@ -7,6 +7,30 @@ Foundational design tokens, components, utilities, and other global assets to be
 - **Styles** - Element and component CSS
 - **Utils** - Collection of JS utility functions
 
+## Versioning
+
+When commmits are merged into `main`, a new release will be created via GitHub Action. [semantic-release](https://semantic-release.gitbook.io/semantic-release) uses the commit messages to determine the impact of changes in the codebase. Follow [the commit message format](https://semantic-release.gitbook.io/semantic-release#commit-message-format) to properly version updates.
+
+```bash
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+| Commit message                                                                                                           | Release type                                                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
+| fix: corrects prop types                                                                                                 | ~~Patch~~ Fix Release                                                                                        |
+| feat: add sparkCool feature                                                                                              | ~~Minor~~ Feature Release                                                                                    |
+| perf: remove sparkCool feature<br><br>BREAKING CHANGE: The sparkCool option has been removed due to performance reasons. | ~~Major~~ Breaking Release<br><br>(Note that the BREAKING CHANGE: token must be in the footer of the commit) |
+
+Check out [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) for other commit message types.
+
+### Troubleshooting
+
+Check that npm and GitHub tokens have not expired. Both are used in the [Release GitHub Action](https://github.com/netlify/netlify-spark-ui/blob/main/.github/workflows/release.yml#L34-L35) job.
+
 ## Code Quality
 
 ### Linting

package/dist/assets/SearchHeading.css

@@ -1 +1 @@
-.n-search-heading{--n-search-heading-weight: var(--font-regular, 400);--n-search-heading-size: var(--step--2, 13px);--n-search-heading-color: var(--color-text-3, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);color:var(--n-search-heading-color);padding-inline:1rem;margin-block:var(--space-xs);letter-spacing:.2px}
+.n-search-heading{--n-search-heading-weight: var(--font-weight-regular, 400);--n-search-heading-size: var(--font-size-text-sm, 13px);--n-search-heading-color: var(--color-text-weak, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);color:var(--n-search-heading-color);padding-inline:1rem;margin-block:var(--space-xs);letter-spacing:.2px}

package/dist/assets/SearchLink.css

@@ -1 +1 @@
-.n-search-link{--n-search-icon-size: 1em;all:unset;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(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.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(--neutral-500));background:var(--n-search-link-badge-color, var(--neutral-100));border:1px solid var(--n-search-link-badge-border, var(--neutral-300));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--blue-000);--n-search-link-badge-text-color: var(--blue-500);--n-search-link-badge-border: var(--blue-100)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--gold-000);--n-search-link-badge-text-color: var(--gold-500);--n-search-link-badge-border: var(--gold-100)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--teal-000);--n-search-link-badge-text-color: var(--teal-500);--n-search-link-badge-border: var(--teal-100)}
+.n-search-link{--n-search-icon-size: 1em;all:unset;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}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--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-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.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(--neutral-500));background:var(--n-search-link-badge-color, var(--neutral-100));border:1px solid var(--n-search-link-badge-border, var(--neutral-300));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--blue-000);--n-search-link-badge-text-color: var(--blue-500);--n-search-link-badge-border: var(--blue-100)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--gold-000);--n-search-link-badge-text-color: var(--gold-500);--n-search-link-badge-border: var(--gold-100)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--teal-000);--n-search-link-badge-text-color: var(--teal-500);--n-search-link-badge-border: var(--teal-100)}

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-regular, 400);--n-search-heading-size: var(--step--2, 13px);--n-search-heading-color: var(--color-text-3, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);color:var(--n-search-heading-color);padding-inline:1rem;margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1em;all:unset;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(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.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(--neutral-500));background:var(--n-search-link-badge-color, var(--neutral-100));border:1px solid var(--n-search-link-badge-border, var(--neutral-300));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--blue-000);--n-search-link-badge-text-color: var(--blue-500);--n-search-link-badge-border: var(--blue-100)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--gold-000);--n-search-link-badge-text-color: var(--gold-500);--n-search-link-badge-border: var(--gold-100)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--teal-000);--n-search-link-badge-text-color: var(--teal-500);--n-search-link-badge-border: var(--teal-100)}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-2, currentColor);--n-search-color-bg: var(--color-bg-1);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin-inline:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;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{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);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::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--icon-size, 1em);height:var(--icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{--n-key-text-color: var(--n-search-color-text-secondary);color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) 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-regular, 400);--n-search-heading-size: var(--font-size-text-sm, 13px);--n-search-heading-color: var(--color-text-weak, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);color:var(--n-search-heading-color);padding-inline:1rem;margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1em;all:unset;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}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--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-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.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(--neutral-500));background:var(--n-search-link-badge-color, var(--neutral-100));border:1px solid var(--n-search-link-badge-border, var(--neutral-300));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--blue-000);--n-search-link-badge-text-color: var(--blue-500);--n-search-link-badge-border: var(--blue-100)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--gold-000);--n-search-link-badge-text-color: var(--gold-500);--n-search-link-badge-border: var(--gold-100)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--teal-000);--n-search-link-badge-text-color: var(--teal-500);--n-search-link-badge-border: var(--teal-100)}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text, currentColor);--n-search-color-text-secondary: var(--color-text-weak, currentColor);--n-search-color-bg: var(--color-bg);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;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{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);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)}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, .8em);height:var(--n-search-icon-size, .8em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.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;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) 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/dist/assets/SearchToggle.css

@@ -1 +1 @@
-.n-search-toggle{all:unset;outline:revert;cursor:pointer;line-height:normal;padding:var(--space-2xs);transition:opacity .3s ease-in-out;max-width:max-content}.n-search-toggle:disabled{opacity:.3}
+.n-search-toggle{all:unset;outline:revert;display:grid;cursor:pointer;line-height:normal;padding:var(--space-2xs);transition:opacity .3s ease-in-out;max-width:max-content}.n-search-toggle svg{width:1rem;height:1rem}.n-search-toggle:disabled{opacity:.3}

package/dist/components/index.d.ts

@@ -6,6 +6,3 @@ export { default as SearchHeading } from './preact/SearchModal/components/Search
 export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
 export { type IconName } from './preact/Icon';
-export { default as Button } from './Button.astro';
-export { default as DeployToNetlifyButton } from './DeployToNetlifyButton.astro';
-export { default as Tabs } from './Tabs.astro';

package/dist/components/preact/SearchModal/components/SearchToggle/SearchToggle.js

@@ -1,8 +1,8 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { D as t } from "../../../../../chunks/compat.module.DT16W4Wr.js";
+import { D as a } from "../../../../../chunks/compat.module.DT16W4Wr.js";
 import o from "../../../Icon/index.js";
-import '../../../../../assets/SearchToggle.css';const s = t(function(r, a) {
-  return /* @__PURE__ */ e("button", { id: r.id, ref: a, class: "n-search-toggle", disabled: !0, "data-ntl-search-toggle": !0, children: [
+import '../../../../../assets/SearchToggle.css';const s = a(function(r, t) {
+  return /* @__PURE__ */ e("button", { id: r.id, ref: t, class: "n-search-toggle button", disabled: !0, "data-ntl-search-toggle": !0, children: [
     /* @__PURE__ */ e("span", { class: "visually-hidden", children: "Search" }),
     /* @__PURE__ */ e(o, { name: r.iconName || "search" })
   ] });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.47",
+  "version": "1.0.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -28,6 +28,7 @@
     "./logos/*.svg": "./packages/assets/logos/*.svg",
     "./styles/*.css": "./packages/styles/*.css",
     "./components": "./packages/components/index.ts",
+    "./components/*": "./packages/components/*",
     "./utils": "./packages/utils/index.ts",
     "./analytics": "./packages/analytics/index.ts"
   },
@@ -42,9 +43,13 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
-    "@terrazzo/cli": "^0.7.0",
-    "@terrazzo/plugin-css": "^0.6.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@terrazzo/cli": "^0.7.2",
+    "@terrazzo/plugin-css": "^0.7.2",
     "@types/gtag.js": "^0.0.20",
+    "semantic-release": "^24.2.4",
     "tslib": "^2.8.1",
     "typescript": "^5.8.2"
   },

package/packages/components/Ticker.astro

@@ -48,6 +48,7 @@ const css = {
     overflow: hidden;
     user-select: none;
     gap: var(--_gap);
+    max-width: 100%;
 
     /** Fade out along edges */
     mask-image: linear-gradient(

package/packages/components/index.ts

@@ -7,8 +7,3 @@ export { default as SearchHeading } from './preact/SearchModal/components/Search
 export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
 export { type IconName } from './preact/Icon';
-
-// Astro components
-export { default as Button } from './Button.astro';
-export { default as DeployToNetlifyButton } from './DeployToNetlifyButton.astro';
-export { default as Tabs } from './Tabs.astro';

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

@@ -1,12 +1,12 @@
 .n-search-heading {
-  --n-search-heading-weight: var(--font-regular, 400);
-  --n-search-heading-size: var(--step--2, 13px);
-  --n-search-heading-color: var(--color-text-3, #757575);
-  
+  --n-search-heading-weight: var(--font-weight-regular, 400);
+  --n-search-heading-size: var(--font-size-text-sm, 13px);
+  --n-search-heading-color: var(--color-text-weak, #757575);
+
   font-size: var(--n-search-heading-size);
   font-weight: var(--n-search-heading-weight);
   color: var(--n-search-heading-color);
   padding-inline: 1rem;
   margin-block: var(--space-xs);
-  letter-spacing: .2px;
-}
+  letter-spacing: 0.2px;
+}

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

@@ -7,8 +7,8 @@
   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(--step--1);
-  font-weight: var(--font-regular);
+  font-size: var(--font-size-text-sm);
+  font-weight: var(--font-weight-regular);
   text-decoration: none;
   cursor: pointer;
 }
@@ -16,20 +16,21 @@
 .n-search-link-body {
   flex: 1;
   width: 80%;
-  color: var(--color-text-2);
+  color: var(--color-text-weak);
+  text-wrap: pretty;
 }
 
 .n-search-link:is(:hover, :focus-within) {
   background: var(--n-search-color-bg-2);
 
-  & .n-search-link-icon [data-icon="caretRight"] {
+  & .n-search-link-icon [data-icon='caretRight'] {
     display: block;
   }
 }
 
 .n-search-link-title {
-  font-weight: var(--font-semibold, 680);
-  color: var(--color-text-2);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
   line-height: 1.5;
 }
 
@@ -37,9 +38,9 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--color-text-3);
+  color: var(--color-text-weak);
   line-height: 1.3;
-  font-size: .9em;
+  font-size: 0.9em;
   margin-block-start: var(--space-3xs);
 }
 
@@ -50,10 +51,10 @@
   color: var(--n-search-color-text-secondary);
 }
 
-.n-search-link-icon [data-icon="caretRight"] {
+.n-search-link-icon [data-icon='caretRight'] {
   display: none;
-  width: .8em;
-  opacity: .3;
+  width: 0.8em;
+  opacity: 0.3;
 }
 
 .n-search-link-label {
@@ -63,8 +64,8 @@
 .n-search-link-badge {
   display: inline-block;
   width: max-content;
-  font-size: .7em;
-  padding: .1em .4em;
+  font-size: 0.7em;
+  padding: 0.1em 0.4em;
   position: relative;
   bottom: 0.3em;
   color: var(--n-search-link-badge-text-color, var(--neutral-500));
@@ -73,18 +74,18 @@
   border-radius: 3px;
 }
 
-.n-search-link-badge[data-resource="blog"] {
+.n-search-link-badge[data-resource='blog'] {
   --n-search-link-badge-color: var(--blue-000);
   --n-search-link-badge-text-color: var(--blue-500);
   --n-search-link-badge-border: var(--blue-100);
 }
-.n-search-link-badge[data-resource="changelog"] {
+.n-search-link-badge[data-resource='changelog'] {
   --n-search-link-badge-color: var(--gold-000);
   --n-search-link-badge-text-color: var(--gold-500);
   --n-search-link-badge-border: var(--gold-100);
 }
-.n-search-link-badge[data-resource="guide"] {
+.n-search-link-badge[data-resource='guide'] {
   --n-search-link-badge-color: var(--teal-000);
   --n-search-link-badge-text-color: var(--teal-500);
   --n-search-link-badge-border: var(--teal-100);
-}
+}

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

@@ -1,13 +1,13 @@
-@import "../../../KeyboardKey/KeyboardKey.css";
-@import "../SearchHeading/SearchHeading.css";
-@import "../SearchLink/SearchLink.css";
+@import '../../../KeyboardKey/KeyboardKey.css';
+@import '../SearchHeading/SearchHeading.css';
+@import '../SearchLink/SearchLink.css';
 
 /* Root Variables */
 .n-search-modal {
-  --n-search-padding-inline: .5em;
-  --n-search-color-text: var(--color-text-1, currentColor);
-  --n-search-color-text-secondary: var(--color-text-2, currentColor);
-  --n-search-color-bg: var(--color-bg-1);
+  --n-search-padding-inline: 0.5em;
+  --n-search-color-text: var(--color-text, currentColor);
+  --n-search-color-text-secondary: var(--color-text-weak, currentColor);
+  --n-search-color-bg: var(--color-bg);
   --n-search-color-bg-2: var(--color-bg-2);
   --n-search-color-border: var(--color-bg-3);
   --n-search-border-radius: 8px;
@@ -20,7 +20,7 @@
   border: none;
   border-radius: var(--n-search-border-radius);
   width: min(var(--n-search-max-w), 100%);
-  margin-inline: auto;
+  margin: auto;
 }
 
 .n-search-container {
@@ -54,13 +54,13 @@
   box-sizing: border-box;
   background: var(--n-search-color-bg);
   inline-size: 100%;
-  padding-block: .75rem;
+  padding-block: 0.75rem;
   padding-inline: var(--n-search-padding-inline);
   flex: 1;
   border: none;
   outline: none;
   font-size: 1rem;
-  color: var(--color-text-1)
+  color: var(--color-text);
 }
 
 .n-search-input::placeholder {
@@ -80,8 +80,8 @@
 
 .n-search-icon {
   display: flex;
-  width: var(--icon-size, 1em);
-  height: var(--icon-size, 1em);
+  width: var(--n-search-icon-size, 0.8em);
+  height: var(--n-search-icon-size, 0.8em);
   color: var(--n-search-color-text-secondary);
 }
 
@@ -100,7 +100,8 @@
   background: var(--n-search-color-bg);
 }
 
-.n-results-list, ul[role="list"] {
+.n-results-list,
+ul[role='list'] {
   list-style: none;
   padding: 0;
 }
@@ -122,28 +123,29 @@
 }
 
 .n-search-footer-tip {
-  --n-key-text-color: var(--n-search-color-text-secondary);
   color: var(--n-search-color-text-secondary);
   display: flex;
   gap: var(--space-2xs);
   align-items: center;
-  font-size: var(--step--1);
+  font-size: var(--font-size-text-sm);
 }
 
 /* Animations */
 .n-search-modal {
-  transition: display .2s allow-discrete, overlay .2s allow-discrete;
-  animation: closeSearch .2s forwards;
+  transition:
+    display 0.2s allow-discrete,
+    overlay 0.2s allow-discrete;
+  animation: closeSearch 0.2s forwards;
 }
 
 .n-search-modal[open] {
-  animation: openSearch .2s forwards;
+  animation: openSearch 0.2s forwards;
 }
 
 @keyframes openSearch {
   from {
     opacity: 0;
-    transform: translateY(20px) scale(.9);
+    transform: translateY(20px) scale(0.9);
   }
   to {
     opacity: 1;
@@ -157,20 +159,20 @@
     transform: translateY(0px) scale(1);
   }
   50% {
-    opacity: .3;
+    opacity: 0.3;
   }
   to {
     opacity: 0;
-    transform: translateY(20px) scale(.9);
+    transform: translateY(20px) scale(0.9);
   }
 }
 
 .n-search-modal::backdrop {
-  animation: closeSearchBackdrop .2s forwards;
+  animation: closeSearchBackdrop 0.2s forwards;
 }
 
-.n-search-modal[open]::backdrop  {
-  animation: openSearchBackdrop .2s forwards;
+.n-search-modal[open]::backdrop {
+  animation: openSearchBackdrop 0.2s forwards;
 }
 
 @keyframes openSearchBackdrop {
@@ -190,11 +192,10 @@
     backdrop-filter: blur(1.5px);
   }
   50% {
-    opacity: .3;
+    opacity: 0.3;
   }
   to {
     opacity: 0;
     backdrop-filter: blur(0px);
-
   }
 }

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

@@ -1,6 +1,7 @@
 .n-search-toggle {
   all: unset;
   outline: revert;
+  display: grid;
   cursor: pointer;
   line-height: normal;
   padding: var(--space-2xs);
@@ -8,6 +9,11 @@
   max-width: max-content;
 }
 
+.n-search-toggle svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .n-search-toggle:disabled {
-  opacity: .3;
-}
+  opacity: 0.3;
+}

package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.tsx

@@ -10,7 +10,7 @@ interface Props {
 
 export default forwardRef(function SearchToggle(props: Props, ref: Ref<HTMLButtonElement>) {
   return (
-    <button id={props.id} ref={ref} class="n-search-toggle" disabled data-ntl-search-toggle>
+    <button id={props.id} ref={ref} class="n-search-toggle button" disabled data-ntl-search-toggle>
       <span class="visually-hidden">Search</span>
       <Icon name={props.iconName || 'search'} />
     </button>

package/packages/styles/buttons.css

@@ -1,21 +1,22 @@
-button,
 .button {
   appearance: none;
-  position: relative;
   cursor: pointer;
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
-  padding: var(--space-xs) var(--space-m);
-  font-size: var(--font-size-0);
-  font-family: var(--font-body);
-  font-weight: var(--font-semibold);
+  padding: 0.625rem 1.0625rem;
+  font-size: var(--font-size-text-md);
+  font-family: var(--font-family-display);
+  font-weight: var(--font-weight-bold);
   line-height: normal;
   text-decoration: none;
-  color: var(--color-text);
-  background-color: var(--color-bg-1);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-m);
+  color: var(--button-text-color, var(--button-primary-text-color));
+  background-color: var(--button-bg-color, var(--button-primary-bg-color));
+  border: 2px solid var(--button-border-color, var(--button-primary-bg-color));
+  border-radius: var(--radius-pill);
+  transition: 0.2s cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: background-color, border-color;
 
   /* Button icons */
   svg {
@@ -30,33 +31,39 @@ button,
     top: 1px;
   }
 
-  &:disabled {
-    color: var(--color-disabled-bg);
-    background-color: var(--color-disabled-bg);
-    border-color: var(--color-disabled-bg);
+  &:hover {
+    background-color: var(--button-bg-color-hover, var(--button-primary-bg-color-hover));
+    border-color: var(--button-border-color-hover, var(--button-primary-bg-color-hover));
   }
 
-  /* Button variants */
-  &[data-button-variant='primary'] {
-    color: var(--color-text-inverse);
-    background-color: var(--color-brand);
-    border-color: var(--color-brand);
+  &:disabled {
+    --button-text-color: var(--color-disabled-text);
+    --button-bg-color: var(--color-disabled-bg);
+    --button-border-color: var(--color-disabled-bg);
   }
+}
 
-  &[data-button-variant='secondary'] {
-    background-color: var(--color-brand-alt);
-    border-color: var(--color-brand-alt);
-  }
+/* Button variants */
+.button[data-button-variant='secondary'] {
+  --button-text-color: var(--button-secondary-text-color);
+  --button-bg-color: var(--button-secondary-bg-color);
+  --button-bg-color-hover: var(--button-secondary-bg-color-hover);
+  --button-border-color: var(--button-secondary-bg-color);
+  --button-border-color-hover: var(--button-secondary-bg-color-hover);
+}
 
-  &[data-button-variant='ghost'] {
-    color: currentColor;
-    background-color: transparent;
-    border-color: transparent;
-  }
+.button[data-button-variant='ghost'] {
+  --button-text-color: var(--color-text);
+  --button-bg-color: transparent;
+  --button-bg-color-hover: var(--button-secondary-bg-color);
+  --button-border-color: transparent;
+  --button-border-color-hover: transparent;
+}
 
-  &[data-button-variant='outline'] {
-    color: currentColor;
-    background-color: transparent;
-    border-color: currentColor;
-  }
+.button[data-button-variant='outline'] {
+  --button-text-color: var(--button-outline-text-color);
+  --button-bg-color: transparent;
+  --button-bg-color-hover: var(--button-outline-bg-color-hover);
+  --button-border-color: var(--button-outline-stroke-color);
+  --button-border-color-hover: var(--button-outline-stroke-color);
 }

package/packages/styles/code-block.css

@@ -42,7 +42,7 @@
 .code-block .code-block-content {
   position: relative;
   overflow: auto;
-  margin: 0
+  margin: 0;
 }
 
 .code-block pre {
@@ -50,7 +50,7 @@
   border-radius: 6px;
   padding-block: var(--space-m);
   padding-inline: var(--space-s);
-  margin: 0
+  margin: 0;
 }
 
 .code-block .code-block-content:not(:only-child) pre {
@@ -117,7 +117,9 @@
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
-  transition: opacity 0.2s ease, visibility 0s 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    visibility 0s 0.2s ease;
 }
 
 .code-block .copy-button::before {
@@ -125,9 +127,9 @@
   right: calc(100% + 10px);
   padding: 0.15em 0.5em;
   border-radius: 2px;
-  background-color: var(--color-brand-alt);
-  color: var(--neutral-800);
-  font-size: 0.9em;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-size: 0.8em;
   white-space: nowrap;
 }
 
@@ -135,7 +137,7 @@
   content: '';
   right: calc(100%);
   border: 5px solid transparent;
-  border-left-color: var(--color-brand-alt);
+  border-left-color: var(--color-bg);
 }
 
 .code-block .copy-button:hover::before,
@@ -190,7 +192,9 @@
   content: '';
   border-radius: 50%;
   background-color: var(--neutral-600);
-  box-shadow: 1.25rem 0 0 var(--neutral-600), 2.5rem 0 0 var(--neutral-600);
+  box-shadow:
+    1.25rem 0 0 var(--neutral-600),
+    2.5rem 0 0 var(--neutral-600);
 }
 
 /* Line highlighting styles */
@@ -229,11 +233,11 @@
   counter-reset: line;
 }
 
-.code-block.with-line-numbers code>span {
+.code-block.with-line-numbers code > span {
   position: relative;
 }
 
-.code-block.with-line-numbers code>span::before {
+.code-block.with-line-numbers code > span::before {
   position: absolute;
   left: -2.5rem;
   width: 2rem;
@@ -246,4 +250,4 @@
   font-size: 0.9em;
   line-height: 1.75;
   text-align: right;
-}
+}

package/packages/styles/fonts.css

@@ -23,7 +23,7 @@
 /* font-face: Display */
 @font-face {
   font-family: 'Figtree';
-  src: url('../assets/fonts/figtree/Figtree-Variable.woff2') format('woff2');
+  src: url('../assets/fonts/figtree/Figtree[wght].woff2') format('woff2');
   font-display: swap;
   font-weight: 100 900;
   unicode-range:
@@ -114,11 +114,11 @@ h4,
 
 /* Lists */
 li::marker {
-  color: var(--color-brand);
+  color: var(--color-icon);
 }
 
 ol li::marker {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* Code */

package/packages/styles/layout.css

@@ -4,3 +4,7 @@
   column-gap: var(--column-gap, var(--gap, var(--space-m)));
   row-gap: var(--row-gap, var(--gap, var(--space-m)));
 }
+
+.flow > * + * {
+  margin-top: var(--flow-space, var(--space-m));
+}

package/packages/styles/reset.css

@@ -1,79 +1,97 @@
+/* Box sizing rules */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
 body,
 h1,
 h2,
 h3,
 h4,
-h5,
 p,
 figure,
 blockquote,
 dl,
-dd,
-ul,
-ol,
-pre,
-code {
-  margin: 0;
+dd {
+  margin-block-end: 0;
 }
 
-:where(p, h1, h2, h3, h4, h5, h6) {
-  overflow-wrap: break-word;
+ul {
+  padding-inline-start: 1rem;
 }
 
-:where(ul, ol) {
-  padding-inline-start: 1em;
+ol {
+  padding-inline-start: 1.2rem;
 }
 
-:where(ul[role='list'], ol[role='list'], ul[class], ol[class]) {
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
   list-style: none;
-  padding-inline-start: 0;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  html:focus-within {
-    scroll-behavior: smooth;
-  }
-}
-
-html {
-  /* Prevent font size inflation */
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
 }
 
+/* Set core body defaults */
 body {
-  line-height: 1.5;
   min-height: 100vh;
+  line-height: 1.5;
 }
 
-a {
-  color: currentcolor;
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
 }
 
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
 a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
-picture,
+/* Make images easier to work with */
 img,
-video,
-iframe,
-object {
+picture {
+  max-width: 100%;
   display: block;
-  max-inline-size: 100%;
-  block-size: auto;
 }
 
+/* Inherit fonts for inputs and buttons */
 input,
 button,
 textarea,
 select {
-  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
 }

package/packages/styles/tokens.css

@@ -3,6 +3,7 @@
  * ------------------------------------------- */
 
 :root {
+  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
   --blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
   --blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
   --blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
@@ -13,32 +14,45 @@
   --blue-700: color(srgb 0.1803921568627451 0.3176470588235294 0.9294117647058824);
   --blue-800: color(srgb 0.12549019607843137 0.21176470588235294 0.6313725490196078);
   --blue-900: color(srgb 0.10588235294117647 0.12549019607843137 0.3568627450980392);
-  --color-bg-1: var(--neutral-000);
+  --button-outline-bg-color: color(srgb 0 0 0 / 0);
+  --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
+  --button-outline-stroke-color: var(--neutral-800);
+  --button-outline-text-color: var(--neutral-800);
+  --button-primary-bg-color: var(--teal-200);
+  --button-primary-bg-color-hover: var(--teal-100);
+  --button-primary-text-color: var(--neutral-800);
+  --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
+  --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
+  --button-secondary-text-color: var(--neutral-800);
+  --code-bg-color: var(--teal-900);
+  --color-bg: var(--neutral-000);
   --color-bg-2: var(--neutral-100);
   --color-bg-3: var(--neutral-200);
-  --color-border: var(--neutral-200);
-  --color-brand: var(--blue-700);
-  --color-brand-alt: var(--teal-200);
   --color-disabled-bg: var(--neutral-200);
   --color-disabled-border: var(--neutral-400);
   --color-disabled-text: var(--neutral-400);
+  --color-icon: var(--blue-700);
   --color-invalid-bg: var(--red-100);
   --color-invalid-border: var(--red-600);
   --color-invalid-text: var(--red-600);
-  --color-link: var(--neutral-800);
+  --color-link: var(--blue-700);
+  --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
+  --color-logo-spark: var(--teal-400);
+  --color-logo-type: var(--teal-800);
+  --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
   --color-success-bg: var(--green-100);
   --color-success-border: var(--green-300);
   --color-success-text: var(--green-800);
-  --color-text-1: var(--neutral-800);
-  --color-text-2: var(--neutral-600);
-  --color-text-3: var(--neutral-400);
+  --color-text: var(--neutral-600);
   --color-text-accent: var(--teal-000);
-  --color-text-inverse: var(--neutral-100);
+  --color-text-weak: var(--neutral-500);
+  --color-text-weaker: var(--neutral-400);
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
+  --eyebrow-text-color: var(--blue-700);
   --font-family-display: "Figtree", system-ui, "Helvetica", sans-serif;
-  --font-family-monospace: "Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
+  --font-family-mono: "Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
   --font-family-text: "Instrument Sans", system-ui, "Helvetica", sans-serif;
   --font-size-display-2xl: 4rem;
   --font-size-display-2xs: 1.125rem;
@@ -55,11 +69,10 @@
   --font-size-text-xl: 1.375rem;
   --font-size-text-xs: 0.75rem;
   --font-weight-bold: 700;
-  --font-weight-light: 200;
+  --font-weight-extrabold: 800;
   --font-weight-medium: 500;
   --font-weight-regular: 400;
   --font-weight-semibold: 600;
-  --font-weight-semilight: 300;
   --gold-000: color(srgb 0.9921568627450981 0.9607843137254902 0.8470588235294118);
   --gold-100: color(srgb 0.9647058823529412 0.8784313725490196 0.6470588235294118);
   --gold-200: color(srgb 0.9803921568627451 0.803921568627451 0.43529411764705883);
@@ -80,6 +93,7 @@
   --green-700: color(srgb 0.10196078431372549 0.4196078431372549 0.20392156862745098);
   --green-800: color(srgb 0.058823529411764705 0.2901960784313726 0.12941176470588237);
   --green-900: color(srgb 0.08235294117647059 0.16470588235294117 0.09803921568627451);
+  --heading-text-color: var(--neutral-800);
   --line-height-heading: 1.2;
   --line-height-none: 1;
   --line-height-text: 1.5;
@@ -113,6 +127,13 @@
   --purple-700: color(srgb 0.3803921568627451 0.2901960784313726 0.792156862745098);
   --purple-800: color(srgb 0.2196078431372549 0.16470588235294117 0.6431372549019608);
   --purple-900: color(srgb 0.1607843137254902 0.12941176470588237 0.25882352941176473);
+  --radius-2xl: 1.875rem;
+  --radius-l: 0.75rem;
+  --radius-m: 0.375rem;
+  --radius-pill: 360px;
+  --radius-s: 0.25rem;
+  --radius-xl: 1rem;
+  --radius-xs: 0.125rem;
   --red-000: color(srgb 0.984313725490196 0.9333333333333333 0.9294117647058824);
   --red-100: color(srgb 0.984313725490196 0.8274509803921568 0.8156862745098039);
   --red-200: color(srgb 1 0.7411764705882353 0.7294117647058823);
@@ -137,6 +158,7 @@
   --space-s: 1rem;
   --space-xl: 3rem;
   --space-xs: 0.75rem;
+  --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
   --teal-000: color(srgb 0.8705882352941177 1 0.996078431372549);
   --teal-100: color(srgb 0.5568627450980392 0.984313725490196 0.9686274509803922);
   --teal-200: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215);
@@ -147,34 +169,50 @@
   --teal-700: color(srgb 0.00392156862745098 0.4117647058823529 0.40784313725490196);
   --teal-800: color(srgb 0.00392156862745098 0.2823529411764706 0.2784313725490196);
   --teal-900: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+  --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    --color-bg-1: var(--neutral-000);
+    --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
+    --button-outline-bg-color: color(srgb 0 0 0 / 0);
+    --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
+    --button-outline-stroke-color: var(--neutral-800);
+    --button-outline-text-color: var(--neutral-800);
+    --button-primary-bg-color: var(--teal-200);
+    --button-primary-bg-color-hover: var(--teal-100);
+    --button-primary-text-color: var(--neutral-800);
+    --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
+    --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
+    --button-secondary-text-color: var(--neutral-800);
+    --code-bg-color: var(--teal-900);
+    --color-bg: var(--neutral-000);
     --color-bg-2: var(--neutral-100);
     --color-bg-3: var(--neutral-200);
-    --color-border: var(--neutral-200);
-    --color-brand: var(--blue-700);
-    --color-brand-alt: var(--teal-200);
     --color-disabled-bg: var(--neutral-200);
     --color-disabled-border: var(--neutral-400);
     --color-disabled-text: var(--neutral-400);
+    --color-icon: var(--blue-700);
     --color-invalid-bg: var(--red-100);
     --color-invalid-border: var(--red-600);
     --color-invalid-text: var(--red-600);
-    --color-link: var(--neutral-800);
+    --color-link: var(--blue-700);
+    --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
+    --color-logo-spark: var(--teal-400);
+    --color-logo-type: var(--teal-800);
+    --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
     --color-success-bg: var(--green-100);
     --color-success-border: var(--green-300);
     --color-success-text: var(--green-800);
-    --color-text-1: var(--neutral-800);
-    --color-text-2: var(--neutral-600);
-    --color-text-3: var(--neutral-400);
+    --color-text: var(--neutral-600);
     --color-text-accent: var(--teal-000);
-    --color-text-inverse: var(--neutral-100);
+    --color-text-weak: var(--neutral-500);
+    --color-text-weaker: var(--neutral-400);
     --color-warning-bg: var(--gold-100);
     --color-warning-border: var(--gold-300);
     --color-warning-text: var(--gold-800);
+    --eyebrow-text-color: var(--blue-700);
+    --heading-text-color: var(--neutral-800);
     --neutral-000: color(srgb 1 1 1);
     --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
     --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
@@ -184,34 +222,51 @@
     --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
     --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
     --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+    --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
+    --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
   }
 }
 
-[data-mode="light"] {
-  --color-bg-1: var(--neutral-000);
+[data-theme="light"] {
+  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
+  --button-outline-bg-color: color(srgb 0 0 0 / 0);
+  --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
+  --button-outline-stroke-color: var(--neutral-800);
+  --button-outline-text-color: var(--neutral-800);
+  --button-primary-bg-color: var(--teal-200);
+  --button-primary-bg-color-hover: var(--teal-100);
+  --button-primary-text-color: var(--neutral-800);
+  --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
+  --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
+  --button-secondary-text-color: var(--neutral-800);
+  --code-bg-color: var(--teal-900);
+  --color-bg: var(--neutral-000);
   --color-bg-2: var(--neutral-100);
   --color-bg-3: var(--neutral-200);
-  --color-border: var(--neutral-200);
-  --color-brand: var(--blue-700);
-  --color-brand-alt: var(--teal-200);
   --color-disabled-bg: var(--neutral-200);
   --color-disabled-border: var(--neutral-400);
   --color-disabled-text: var(--neutral-400);
+  --color-icon: var(--blue-700);
   --color-invalid-bg: var(--red-100);
   --color-invalid-border: var(--red-600);
   --color-invalid-text: var(--red-600);
-  --color-link: var(--neutral-800);
+  --color-link: var(--blue-700);
+  --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
+  --color-logo-spark: var(--teal-400);
+  --color-logo-type: var(--teal-800);
+  --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
   --color-success-bg: var(--green-100);
   --color-success-border: var(--green-300);
   --color-success-text: var(--green-800);
-  --color-text-1: var(--neutral-800);
-  --color-text-2: var(--neutral-600);
-  --color-text-3: var(--neutral-400);
+  --color-text: var(--neutral-600);
   --color-text-accent: var(--teal-000);
-  --color-text-inverse: var(--neutral-100);
+  --color-text-weak: var(--neutral-500);
+  --color-text-weaker: var(--neutral-400);
   --color-warning-bg: var(--gold-100);
   --color-warning-border: var(--gold-300);
   --color-warning-text: var(--gold-800);
+  --eyebrow-text-color: var(--blue-700);
+  --heading-text-color: var(--neutral-800);
   --neutral-000: color(srgb 1 1 1);
   --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
   --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
@@ -221,34 +276,51 @@
   --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
   --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
   --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+  --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
+  --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-bg-1: var(--neutral-800);
+    --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+    --button-outline-bg-color: color(srgb 0 0 0 / 0);
+    --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
+    --button-outline-stroke-color: var(--teal-200);
+    --button-outline-text-color: var(--teal-200);
+    --button-primary-bg-color: var(--teal-200);
+    --button-primary-bg-color-hover: var(--teal-100);
+    --button-primary-text-color: var(--neutral-800);
+    --button-secondary-bg-color: color(srgb 1 1 1 / 0.09803921568627451);
+    --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
+    --button-secondary-text-color: var(--teal-200);
+    --code-bg-color: var(--teal-900);
+    --color-bg: var(--neutral-800);
     --color-bg-2: var(--neutral-700);
     --color-bg-3: var(--neutral-600);
-    --color-border: var(--neutral-200);
-    --color-brand: var(--teal-200);
-    --color-brand-alt: var(--blue-700);
     --color-disabled-bg: var(--neutral-600);
     --color-disabled-border: var(--neutral-400);
     --color-disabled-text: var(--neutral-400);
+    --color-icon: var(--teal-200);
     --color-invalid-bg: var(--red-200);
     --color-invalid-border: var(--red-700);
     --color-invalid-text: var(--red-700);
-    --color-link: var(--neutral-100);
+    --color-link: var(--teal-200);
+    --color-logo-inactive: color(srgb 0.2823529411764706 0.36470588235294116 0.36470588235294116);
+    --color-logo-spark: var(--teal-200);
+    --color-logo-type: var(--neutral-000);
+    --color-stroke: color(srgb 1 1 1 / 0.09803921568627451);
     --color-success-bg: var(--green-200);
     --color-success-border: var(--green-400);
     --color-success-text: var(--green-900);
-    --color-text-1: var(--neutral-100);
-    --color-text-2: var(--neutral-300);
-    --color-text-3: var(--neutral-500);
+    --color-text: var(--teal-000);
     --color-text-accent: var(--teal-600);
-    --color-text-inverse: var(--teal-800);
+    --color-text-weak: var(--neutral-200);
+    --color-text-weaker: var(--neutral-400);
     --color-warning-bg: var(--gold-200);
     --color-warning-border: var(--gold-400);
     --color-warning-text: var(--gold-900);
+    --eyebrow-text-color: var(--teal-200);
+    --heading-text-color: var(--neutral-100);
     --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
     --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
     --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
@@ -258,34 +330,51 @@
     --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
     --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
     --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+    --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
+    --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
   }
 }
 
-[data-mode="dark"] {
-  --color-bg-1: var(--neutral-800);
+[data-theme="dark"] {
+  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+  --button-outline-bg-color: color(srgb 0 0 0 / 0);
+  --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
+  --button-outline-stroke-color: var(--teal-200);
+  --button-outline-text-color: var(--teal-200);
+  --button-primary-bg-color: var(--teal-200);
+  --button-primary-bg-color-hover: var(--teal-100);
+  --button-primary-text-color: var(--neutral-800);
+  --button-secondary-bg-color: color(srgb 1 1 1 / 0.09803921568627451);
+  --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
+  --button-secondary-text-color: var(--teal-200);
+  --code-bg-color: var(--teal-900);
+  --color-bg: var(--neutral-800);
   --color-bg-2: var(--neutral-700);
   --color-bg-3: var(--neutral-600);
-  --color-border: var(--neutral-200);
-  --color-brand: var(--teal-200);
-  --color-brand-alt: var(--blue-700);
   --color-disabled-bg: var(--neutral-600);
   --color-disabled-border: var(--neutral-400);
   --color-disabled-text: var(--neutral-400);
+  --color-icon: var(--teal-200);
   --color-invalid-bg: var(--red-200);
   --color-invalid-border: var(--red-700);
   --color-invalid-text: var(--red-700);
-  --color-link: var(--neutral-100);
+  --color-link: var(--teal-200);
+  --color-logo-inactive: color(srgb 0.2823529411764706 0.36470588235294116 0.36470588235294116);
+  --color-logo-spark: var(--teal-200);
+  --color-logo-type: var(--neutral-000);
+  --color-stroke: color(srgb 1 1 1 / 0.09803921568627451);
   --color-success-bg: var(--green-200);
   --color-success-border: var(--green-400);
   --color-success-text: var(--green-900);
-  --color-text-1: var(--neutral-100);
-  --color-text-2: var(--neutral-300);
-  --color-text-3: var(--neutral-500);
+  --color-text: var(--teal-000);
   --color-text-accent: var(--teal-600);
-  --color-text-inverse: var(--teal-800);
+  --color-text-weak: var(--neutral-200);
+  --color-text-weaker: var(--neutral-400);
   --color-warning-bg: var(--gold-200);
   --color-warning-border: var(--gold-400);
   --color-warning-text: var(--gold-900);
+  --eyebrow-text-color: var(--teal-200);
+  --heading-text-color: var(--neutral-100);
   --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
   --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
   --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
@@ -295,5 +384,7 @@
   --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
   --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
   --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
+  --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
 }