@netlify/spark-ui 0.0.47 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +24 -0
  2. package/dist/assets/SearchHeading.css +1 -1
  3. package/dist/assets/SearchLink.css +1 -1
  4. package/dist/assets/SearchModal.css +1 -1
  5. package/dist/assets/SearchToggle.css +1 -1
  6. package/dist/components/index.d.ts +0 -3
  7. package/dist/components/preact/SearchModal/components/SearchToggle/SearchToggle.js +3 -3
  8. package/package.json +8 -3
  9. package/packages/components/Ticker.astro +1 -0
  10. package/packages/components/index.ts +0 -5
  11. package/packages/components/preact/SearchModal/components/SearchHeading/SearchHeading.css +6 -6
  12. package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css +18 -17
  13. package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +27 -26
  14. package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.css +8 -2
  15. package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.tsx +1 -1
  16. package/packages/styles/buttons.css +40 -33
  17. package/packages/styles/code-block.css +15 -11
  18. package/packages/styles/fonts.css +3 -3
  19. package/packages/styles/layout.css +4 -0
  20. package/packages/styles/reset.css +54 -36
  21. package/packages/styles/tokens.css +141 -50
package/README.md CHANGED
@@ -7,6 +7,30 @@ Foundational design tokens, components, utilities, and other global assets to be
7
7
  - **Styles** - Element and component CSS
8
8
  - **Utils** - Collection of JS utility functions
9
9
 
10
+ ## Versioning
11
+
12
+ 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.
13
+
14
+ ```bash
15
+ <type>[optional scope]: <description>
16
+
17
+ [optional body]
18
+
19
+ [optional footer(s)]
20
+ ```
21
+
22
+ | Commit message | Release type |
23
+ | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
24
+ | fix: corrects prop types | ~~Patch~~ Fix Release |
25
+ | feat: add sparkCool feature | ~~Minor~~ Feature Release |
26
+ | 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) |
27
+
28
+ Check out [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) for other commit message types.
29
+
30
+ ### Troubleshooting
31
+
32
+ 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.
33
+
10
34
  ## Code Quality
11
35
 
12
36
  ### Linting
package/dist/assets/SearchHeading.css CHANGED
@@ -1 +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}
1
+ .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 CHANGED
@@ -1 +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)}
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(--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 CHANGED
@@ -1 +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)}}
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-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 CHANGED
@@ -1 +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}
1
+ .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 CHANGED
@@ -6,6 +6,3 @@ export { default as SearchHeading } from './preact/SearchModal/components/Search
6
6
  export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
7
7
  export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
8
8
  export { type IconName } from './preact/Icon';
9
- export { default as Button } from './Button.astro';
10
- export { default as DeployToNetlifyButton } from './DeployToNetlifyButton.astro';
11
- export { default as Tabs } from './Tabs.astro';
package/dist/components/preact/SearchModal/components/SearchToggle/SearchToggle.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
2
- import { D as t } from "../../../../../chunks/compat.module.DT16W4Wr.js";
2
+ import { D as a } from "../../../../../chunks/compat.module.DT16W4Wr.js";
3
3
  import o from "../../../Icon/index.js";
4
- import '../../../../../assets/SearchToggle.css';const s = t(function(r, a) {
5
- return /* @__PURE__ */ e("button", { id: r.id, ref: a, class: "n-search-toggle", disabled: !0, "data-ntl-search-toggle": !0, children: [
4
+ import '../../../../../assets/SearchToggle.css';const s = a(function(r, t) {
5
+ return /* @__PURE__ */ e("button", { id: r.id, ref: t, class: "n-search-toggle button", disabled: !0, "data-ntl-search-toggle": !0, children: [
6
6
  /* @__PURE__ */ e("span", { class: "visually-hidden", children: "Search" }),
7
7
  /* @__PURE__ */ e(o, { name: r.iconName || "search" })
8
8
  ] });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@netlify/spark-ui",
3
3
  "description": "Assets, design tokens, components, and utilities",
4
- "version": "0.0.47",
4
+ "version": "1.0.1",
5
5
  "type": "module",
6
6
  "main": "dist/components/preact/index.js",
7
7
  "types": "dist/components/preact/index.d.ts",
@@ -28,6 +28,7 @@
28
28
  "./logos/*.svg": "./packages/assets/logos/*.svg",
29
29
  "./styles/*.css": "./packages/styles/*.css",
30
30
  "./components": "./packages/components/index.ts",
31
+ "./components/*": "./packages/components/*",
31
32
  "./utils": "./packages/utils/index.ts",
32
33
  "./analytics": "./packages/analytics/index.ts"
33
34
  },
@@ -42,9 +43,13 @@
42
43
  "vite-tsconfig-paths": "^5.1.4"
43
44
  },
44
45
  "devDependencies": {
45
- "@terrazzo/cli": "^0.7.0",
46
- "@terrazzo/plugin-css": "^0.6.0",
46
+ "@semantic-release/changelog": "^6.0.3",
47
+ "@semantic-release/git": "^10.0.1",
48
+ "@semantic-release/npm": "^12.0.1",
49
+ "@terrazzo/cli": "^0.7.2",
50
+ "@terrazzo/plugin-css": "^0.7.2",
47
51
  "@types/gtag.js": "^0.0.20",
52
+ "semantic-release": "^24.2.4",
48
53
  "tslib": "^2.8.1",
49
54
  "typescript": "^5.8.2"
50
55
  },
package/packages/components/Ticker.astro CHANGED
@@ -48,6 +48,7 @@ const css = {
48
48
  overflow: hidden;
49
49
  user-select: none;
50
50
  gap: var(--_gap);
51
+ max-width: 100%;
51
52
 
52
53
  /** Fade out along edges */
53
54
  mask-image: linear-gradient(
package/packages/components/index.ts CHANGED
@@ -7,8 +7,3 @@ export { default as SearchHeading } from './preact/SearchModal/components/Search
7
7
  export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
8
8
  export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
9
9
  export { type IconName } from './preact/Icon';
10
-
11
- // Astro components
12
- export { default as Button } from './Button.astro';
13
- export { default as DeployToNetlifyButton } from './DeployToNetlifyButton.astro';
14
- export { default as Tabs } from './Tabs.astro';
package/packages/components/preact/SearchModal/components/SearchHeading/SearchHeading.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .n-search-heading {
2
- --n-search-heading-weight: var(--font-regular, 400);
3
- --n-search-heading-size: var(--step--2, 13px);
4
- --n-search-heading-color: var(--color-text-3, #757575);
5
-
2
+ --n-search-heading-weight: var(--font-weight-regular, 400);
3
+ --n-search-heading-size: var(--font-size-text-sm, 13px);
4
+ --n-search-heading-color: var(--color-text-weak, #757575);
5
+
6
6
  font-size: var(--n-search-heading-size);
7
7
  font-weight: var(--n-search-heading-weight);
8
8
  color: var(--n-search-heading-color);
9
9
  padding-inline: 1rem;
10
10
  margin-block: var(--space-xs);
11
- letter-spacing: .2px;
12
- }
11
+ letter-spacing: 0.2px;
12
+ }
package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css CHANGED
@@ -7,8 +7,8 @@
7
7
  gap: var(--space-s, 1rem);
8
8
  align-items: center;
9
9
  padding: var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);
10
- font-size: var(--step--1);
11
- font-weight: var(--font-regular);
10
+ font-size: var(--font-size-text-sm);
11
+ font-weight: var(--font-weight-regular);
12
12
  text-decoration: none;
13
13
  cursor: pointer;
14
14
  }
@@ -16,20 +16,21 @@
16
16
  .n-search-link-body {
17
17
  flex: 1;
18
18
  width: 80%;
19
- color: var(--color-text-2);
19
+ color: var(--color-text-weak);
20
+ text-wrap: pretty;
20
21
  }
21
22
 
22
23
  .n-search-link:is(:hover, :focus-within) {
23
24
  background: var(--n-search-color-bg-2);
24
25
 
25
- & .n-search-link-icon [data-icon="caretRight"] {
26
+ & .n-search-link-icon [data-icon='caretRight'] {
26
27
  display: block;
27
28
  }
28
29
  }
29
30
 
30
31
  .n-search-link-title {
31
- font-weight: var(--font-semibold, 680);
32
- color: var(--color-text-2);
32
+ font-weight: var(--font-weight-medium);
33
+ color: var(--color-text);
33
34
  line-height: 1.5;
34
35
  }
35
36
 
@@ -37,9 +38,9 @@
37
38
  overflow: hidden;
38
39
  white-space: nowrap;
39
40
  text-overflow: ellipsis;
40
- color: var(--color-text-3);
41
+ color: var(--color-text-weak);
41
42
  line-height: 1.3;
42
- font-size: .9em;
43
+ font-size: 0.9em;
43
44
  margin-block-start: var(--space-3xs);
44
45
  }
45
46
 
@@ -50,10 +51,10 @@
50
51
  color: var(--n-search-color-text-secondary);
51
52
  }
52
53
 
53
- .n-search-link-icon [data-icon="caretRight"] {
54
+ .n-search-link-icon [data-icon='caretRight'] {
54
55
  display: none;
55
- width: .8em;
56
- opacity: .3;
56
+ width: 0.8em;
57
+ opacity: 0.3;
57
58
  }
58
59
 
59
60
  .n-search-link-label {
@@ -63,8 +64,8 @@
63
64
  .n-search-link-badge {
64
65
  display: inline-block;
65
66
  width: max-content;
66
- font-size: .7em;
67
- padding: .1em .4em;
67
+ font-size: 0.7em;
68
+ padding: 0.1em 0.4em;
68
69
  position: relative;
69
70
  bottom: 0.3em;
70
71
  color: var(--n-search-link-badge-text-color, var(--neutral-500));
@@ -73,18 +74,18 @@
73
74
  border-radius: 3px;
74
75
  }
75
76
 
76
- .n-search-link-badge[data-resource="blog"] {
77
+ .n-search-link-badge[data-resource='blog'] {
77
78
  --n-search-link-badge-color: var(--blue-000);
78
79
  --n-search-link-badge-text-color: var(--blue-500);
79
80
  --n-search-link-badge-border: var(--blue-100);
80
81
  }
81
- .n-search-link-badge[data-resource="changelog"] {
82
+ .n-search-link-badge[data-resource='changelog'] {
82
83
  --n-search-link-badge-color: var(--gold-000);
83
84
  --n-search-link-badge-text-color: var(--gold-500);
84
85
  --n-search-link-badge-border: var(--gold-100);
85
86
  }
86
- .n-search-link-badge[data-resource="guide"] {
87
+ .n-search-link-badge[data-resource='guide'] {
87
88
  --n-search-link-badge-color: var(--teal-000);
88
89
  --n-search-link-badge-text-color: var(--teal-500);
89
90
  --n-search-link-badge-border: var(--teal-100);
90
- }
91
+ }
package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css CHANGED
@@ -1,13 +1,13 @@
1
- @import "../../../KeyboardKey/KeyboardKey.css";
2
- @import "../SearchHeading/SearchHeading.css";
3
- @import "../SearchLink/SearchLink.css";
1
+ @import '../../../KeyboardKey/KeyboardKey.css';
2
+ @import '../SearchHeading/SearchHeading.css';
3
+ @import '../SearchLink/SearchLink.css';
4
4
 
5
5
  /* Root Variables */
6
6
  .n-search-modal {
7
- --n-search-padding-inline: .5em;
8
- --n-search-color-text: var(--color-text-1, currentColor);
9
- --n-search-color-text-secondary: var(--color-text-2, currentColor);
10
- --n-search-color-bg: var(--color-bg-1);
7
+ --n-search-padding-inline: 0.5em;
8
+ --n-search-color-text: var(--color-text, currentColor);
9
+ --n-search-color-text-secondary: var(--color-text-weak, currentColor);
10
+ --n-search-color-bg: var(--color-bg);
11
11
  --n-search-color-bg-2: var(--color-bg-2);
12
12
  --n-search-color-border: var(--color-bg-3);
13
13
  --n-search-border-radius: 8px;
@@ -20,7 +20,7 @@
20
20
  border: none;
21
21
  border-radius: var(--n-search-border-radius);
22
22
  width: min(var(--n-search-max-w), 100%);
23
- margin-inline: auto;
23
+ margin: auto;
24
24
  }
25
25
 
26
26
  .n-search-container {
@@ -54,13 +54,13 @@
54
54
  box-sizing: border-box;
55
55
  background: var(--n-search-color-bg);
56
56
  inline-size: 100%;
57
- padding-block: .75rem;
57
+ padding-block: 0.75rem;
58
58
  padding-inline: var(--n-search-padding-inline);
59
59
  flex: 1;
60
60
  border: none;
61
61
  outline: none;
62
62
  font-size: 1rem;
63
- color: var(--color-text-1)
63
+ color: var(--color-text);
64
64
  }
65
65
 
66
66
  .n-search-input::placeholder {
@@ -80,8 +80,8 @@
80
80
 
81
81
  .n-search-icon {
82
82
  display: flex;
83
- width: var(--icon-size, 1em);
84
- height: var(--icon-size, 1em);
83
+ width: var(--n-search-icon-size, 0.8em);
84
+ height: var(--n-search-icon-size, 0.8em);
85
85
  color: var(--n-search-color-text-secondary);
86
86
  }
87
87
 
@@ -100,7 +100,8 @@
100
100
  background: var(--n-search-color-bg);
101
101
  }
102
102
 
103
- .n-results-list, ul[role="list"] {
103
+ .n-results-list,
104
+ ul[role='list'] {
104
105
  list-style: none;
105
106
  padding: 0;
106
107
  }
@@ -122,28 +123,29 @@
122
123
  }
123
124
 
124
125
  .n-search-footer-tip {
125
- --n-key-text-color: var(--n-search-color-text-secondary);
126
126
  color: var(--n-search-color-text-secondary);
127
127
  display: flex;
128
128
  gap: var(--space-2xs);
129
129
  align-items: center;
130
- font-size: var(--step--1);
130
+ font-size: var(--font-size-text-sm);
131
131
  }
132
132
 
133
133
  /* Animations */
134
134
  .n-search-modal {
135
- transition: display .2s allow-discrete, overlay .2s allow-discrete;
136
- animation: closeSearch .2s forwards;
135
+ transition:
136
+ display 0.2s allow-discrete,
137
+ overlay 0.2s allow-discrete;
138
+ animation: closeSearch 0.2s forwards;
137
139
  }
138
140
 
139
141
  .n-search-modal[open] {
140
- animation: openSearch .2s forwards;
142
+ animation: openSearch 0.2s forwards;
141
143
  }
142
144
 
143
145
  @keyframes openSearch {
144
146
  from {
145
147
  opacity: 0;
146
- transform: translateY(20px) scale(.9);
148
+ transform: translateY(20px) scale(0.9);
147
149
  }
148
150
  to {
149
151
  opacity: 1;
@@ -157,20 +159,20 @@
157
159
  transform: translateY(0px) scale(1);
158
160
  }
159
161
  50% {
160
- opacity: .3;
162
+ opacity: 0.3;
161
163
  }
162
164
  to {
163
165
  opacity: 0;
164
- transform: translateY(20px) scale(.9);
166
+ transform: translateY(20px) scale(0.9);
165
167
  }
166
168
  }
167
169
 
168
170
  .n-search-modal::backdrop {
169
- animation: closeSearchBackdrop .2s forwards;
171
+ animation: closeSearchBackdrop 0.2s forwards;
170
172
  }
171
173
 
172
- .n-search-modal[open]::backdrop {
173
- animation: openSearchBackdrop .2s forwards;
174
+ .n-search-modal[open]::backdrop {
175
+ animation: openSearchBackdrop 0.2s forwards;
174
176
  }
175
177
 
176
178
  @keyframes openSearchBackdrop {
@@ -190,11 +192,10 @@
190
192
  backdrop-filter: blur(1.5px);
191
193
  }
192
194
  50% {
193
- opacity: .3;
195
+ opacity: 0.3;
194
196
  }
195
197
  to {
196
198
  opacity: 0;
197
199
  backdrop-filter: blur(0px);
198
-
199
200
  }
200
201
  }
package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.css CHANGED
@@ -1,6 +1,7 @@
1
1
  .n-search-toggle {
2
2
  all: unset;
3
3
  outline: revert;
4
+ display: grid;
4
5
  cursor: pointer;
5
6
  line-height: normal;
6
7
  padding: var(--space-2xs);
@@ -8,6 +9,11 @@
8
9
  max-width: max-content;
9
10
  }
10
11
 
12
+ .n-search-toggle svg {
13
+ width: 1rem;
14
+ height: 1rem;
15
+ }
16
+
11
17
  .n-search-toggle:disabled {
12
- opacity: .3;
13
- }
18
+ opacity: 0.3;
19
+ }
package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.tsx CHANGED
@@ -10,7 +10,7 @@ interface Props {
10
10
 
11
11
  export default forwardRef(function SearchToggle(props: Props, ref: Ref<HTMLButtonElement>) {
12
12
  return (
13
- <button id={props.id} ref={ref} class="n-search-toggle" disabled data-ntl-search-toggle>
13
+ <button id={props.id} ref={ref} class="n-search-toggle button" disabled data-ntl-search-toggle>
14
14
  <span class="visually-hidden">Search</span>
15
15
  <Icon name={props.iconName || 'search'} />
16
16
  </button>
package/packages/styles/buttons.css CHANGED
@@ -1,21 +1,22 @@
1
- button,
2
1
  .button {
3
2
  appearance: none;
4
- position: relative;
5
3
  cursor: pointer;
4
+ position: relative;
6
5
  display: inline-flex;
7
6
  align-items: center;
8
7
  gap: var(--space-xs);
9
- padding: var(--space-xs) var(--space-m);
10
- font-size: var(--font-size-0);
11
- font-family: var(--font-body);
12
- font-weight: var(--font-semibold);
8
+ padding: 0.625rem 1.0625rem;
9
+ font-size: var(--font-size-text-md);
10
+ font-family: var(--font-family-display);
11
+ font-weight: var(--font-weight-bold);
13
12
  line-height: normal;
14
13
  text-decoration: none;
15
- color: var(--color-text);
16
- background-color: var(--color-bg-1);
17
- border: 1px solid var(--color-border);
18
- border-radius: var(--radius-m);
14
+ color: var(--button-text-color, var(--button-primary-text-color));
15
+ background-color: var(--button-bg-color, var(--button-primary-bg-color));
16
+ border: 2px solid var(--button-border-color, var(--button-primary-bg-color));
17
+ border-radius: var(--radius-pill);
18
+ transition: 0.2s cubic-bezier(0.33, 1, 0.68, 1);
19
+ transition-property: background-color, border-color;
19
20
 
20
21
  /* Button icons */
21
22
  svg {
@@ -30,33 +31,39 @@ button,
30
31
  top: 1px;
31
32
  }
32
33
 
33
- &:disabled {
34
- color: var(--color-disabled-bg);
35
- background-color: var(--color-disabled-bg);
36
- border-color: var(--color-disabled-bg);
34
+ &:hover {
35
+ background-color: var(--button-bg-color-hover, var(--button-primary-bg-color-hover));
36
+ border-color: var(--button-border-color-hover, var(--button-primary-bg-color-hover));
37
37
  }
38
38
 
39
- /* Button variants */
40
- &[data-button-variant='primary'] {
41
- color: var(--color-text-inverse);
42
- background-color: var(--color-brand);
43
- border-color: var(--color-brand);
39
+ &:disabled {
40
+ --button-bg-color: var(--color-disabled-bg);
41
+ --button-border-color: var(--color-disabled-bg);
42
+ --button-text-color: var(--color-disabled-text);
44
43
  }
44
+ }
45
45
 
46
- &[data-button-variant='secondary'] {
47
- background-color: var(--color-brand-alt);
48
- border-color: var(--color-brand-alt);
49
- }
46
+ /* Button variants */
47
+ .button[data-button-variant='secondary'] {
48
+ --button-bg-color: var(--button-secondary-bg-color);
49
+ --button-bg-color-hover: var(--button-secondary-bg-color-hover);
50
+ --button-border-color: var(--button-secondary-bg-color);
51
+ --button-border-color-hover: var(--button-secondary-bg-color-hover);
52
+ --button-text-color: var(--button-secondary-text-color);
53
+ }
50
54
 
51
- &[data-button-variant='ghost'] {
52
- color: currentColor;
53
- background-color: transparent;
54
- border-color: transparent;
55
- }
55
+ .button[data-button-variant='ghost'] {
56
+ --button-bg-color: transparent;
57
+ --button-bg-color-hover: var(--button-secondary-bg-color);
58
+ --button-border-color: transparent;
59
+ --button-border-color-hover: transparent;
60
+ --button-text-color: var(--color-text);
61
+ }
56
62
 
57
- &[data-button-variant='outline'] {
58
- color: currentColor;
59
- background-color: transparent;
60
- border-color: currentColor;
61
- }
63
+ .button[data-button-variant='outline'] {
64
+ --button-bg-color: transparent;
65
+ --button-bg-color-hover: var(--button-outline-bg-color-hover);
66
+ --button-border-color: var(--button-outline-stroke-color);
67
+ --button-border-color-hover: var(--button-outline-stroke-color);
68
+ --button-text-color: var(--button-outline-text-color);
62
69
  }
package/packages/styles/code-block.css CHANGED
@@ -42,7 +42,7 @@
42
42
  .code-block .code-block-content {
43
43
  position: relative;
44
44
  overflow: auto;
45
- margin: 0
45
+ margin: 0;
46
46
  }
47
47
 
48
48
  .code-block pre {
@@ -50,7 +50,7 @@
50
50
  border-radius: 6px;
51
51
  padding-block: var(--space-m);
52
52
  padding-inline: var(--space-s);
53
- margin: 0
53
+ margin: 0;
54
54
  }
55
55
 
56
56
  .code-block .code-block-content:not(:only-child) pre {
@@ -117,7 +117,9 @@
117
117
  opacity: 0;
118
118
  visibility: hidden;
119
119
  pointer-events: none;
120
- transition: opacity 0.2s ease, visibility 0s 0.2s ease;
120
+ transition:
121
+ opacity 0.2s ease,
122
+ visibility 0s 0.2s ease;
121
123
  }
122
124
 
123
125
  .code-block .copy-button::before {
@@ -125,9 +127,9 @@
125
127
  right: calc(100% + 10px);
126
128
  padding: 0.15em 0.5em;
127
129
  border-radius: 2px;
128
- background-color: var(--color-brand-alt);
129
- color: var(--neutral-800);
130
- font-size: 0.9em;
130
+ background-color: var(--color-bg);
131
+ color: var(--color-text);
132
+ font-size: 0.8em;
131
133
  white-space: nowrap;
132
134
  }
133
135
 
@@ -135,7 +137,7 @@
135
137
  content: '';
136
138
  right: calc(100%);
137
139
  border: 5px solid transparent;
138
- border-left-color: var(--color-brand-alt);
140
+ border-left-color: var(--color-bg);
139
141
  }
140
142
 
141
143
  .code-block .copy-button:hover::before,
@@ -190,7 +192,9 @@
190
192
  content: '';
191
193
  border-radius: 50%;
192
194
  background-color: var(--neutral-600);
193
- box-shadow: 1.25rem 0 0 var(--neutral-600), 2.5rem 0 0 var(--neutral-600);
195
+ box-shadow:
196
+ 1.25rem 0 0 var(--neutral-600),
197
+ 2.5rem 0 0 var(--neutral-600);
194
198
  }
195
199
 
196
200
  /* Line highlighting styles */
@@ -229,11 +233,11 @@
229
233
  counter-reset: line;
230
234
  }
231
235
 
232
- .code-block.with-line-numbers code>span {
236
+ .code-block.with-line-numbers code > span {
233
237
  position: relative;
234
238
  }
235
239
 
236
- .code-block.with-line-numbers code>span::before {
240
+ .code-block.with-line-numbers code > span::before {
237
241
  position: absolute;
238
242
  left: -2.5rem;
239
243
  width: 2rem;
@@ -246,4 +250,4 @@
246
250
  font-size: 0.9em;
247
251
  line-height: 1.75;
248
252
  text-align: right;
249
- }
253
+ }
package/packages/styles/fonts.css CHANGED
@@ -23,7 +23,7 @@
23
23
  /* font-face: Display */
24
24
  @font-face {
25
25
  font-family: 'Figtree';
26
- src: url('../assets/fonts/figtree/Figtree-Variable.woff2') format('woff2');
26
+ src: url('../assets/fonts/figtree/Figtree[wght].woff2') format('woff2');
27
27
  font-display: swap;
28
28
  font-weight: 100 900;
29
29
  unicode-range:
@@ -114,11 +114,11 @@ h4,
114
114
 
115
115
  /* Lists */
116
116
  li::marker {
117
- color: var(--color-brand);
117
+ color: var(--color-icon);
118
118
  }
119
119
 
120
120
  ol li::marker {
121
- font-weight: var(--font-weight-bold);
121
+ font-weight: var(--font-weight-semibold);
122
122
  }
123
123
 
124
124
  /* Code */
package/packages/styles/layout.css CHANGED
@@ -4,3 +4,7 @@
4
4
  column-gap: var(--column-gap, var(--gap, var(--space-m)));
5
5
  row-gap: var(--row-gap, var(--gap, var(--space-m)));
6
6
  }
7
+
8
+ .flow > * + * {
9
+ margin-top: var(--flow-space, var(--space-m));
10
+ }
package/packages/styles/reset.css CHANGED
@@ -1,79 +1,97 @@
1
+ /* Box sizing rules */
1
2
  *,
2
3
  *::before,
3
4
  *::after {
4
5
  box-sizing: border-box;
5
6
  }
6
7
 
8
+ /* Prevent font size inflation */
9
+ html {
10
+ -moz-text-size-adjust: none;
11
+ -webkit-text-size-adjust: none;
12
+ text-size-adjust: none;
13
+ }
14
+
15
+ /* Remove default margin in favour of better control in authored CSS */
7
16
  body,
8
17
  h1,
9
18
  h2,
10
19
  h3,
11
20
  h4,
12
- h5,
13
21
  p,
14
22
  figure,
15
23
  blockquote,
16
24
  dl,
17
- dd,
18
- ul,
19
- ol,
20
- pre,
21
- code {
22
- margin: 0;
25
+ dd {
26
+ margin-block-end: 0;
23
27
  }
24
28
 
25
- :where(p, h1, h2, h3, h4, h5, h6) {
26
- overflow-wrap: break-word;
29
+ ul {
30
+ padding-inline-start: 1rem;
27
31
  }
28
32
 
29
- :where(ul, ol) {
30
- padding-inline-start: 1em;
33
+ ol {
34
+ padding-inline-start: 1.2rem;
31
35
  }
32
36
 
33
- :where(ul[role='list'], ol[role='list'], ul[class], ol[class]) {
37
+ /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
38
+ ul[role='list'],
39
+ ol[role='list'] {
34
40
  list-style: none;
35
- padding-inline-start: 0;
36
- }
37
-
38
- @media (prefers-reduced-motion: no-preference) {
39
- html:focus-within {
40
- scroll-behavior: smooth;
41
- }
42
- }
43
-
44
- html {
45
- /* Prevent font size inflation */
46
- -moz-text-size-adjust: none;
47
- -webkit-text-size-adjust: none;
48
- text-size-adjust: none;
49
41
  }
50
42
 
43
+ /* Set core body defaults */
51
44
  body {
52
- line-height: 1.5;
53
45
  min-height: 100vh;
46
+ line-height: 1.5;
54
47
  }
55
48
 
56
- a {
57
- color: currentcolor;
49
+ /* Set shorter line heights on headings and interactive elements */
50
+ h1,
51
+ h2,
52
+ h3,
53
+ h4,
54
+ button,
55
+ input,
56
+ label {
57
+ line-height: 1.1;
58
58
  }
59
59
 
60
+ /* Balance text wrapping on headings */
61
+ h1,
62
+ h2,
63
+ h3,
64
+ h4 {
65
+ text-wrap: balance;
66
+ }
67
+
68
+ /* A elements that don't have a class get default styles */
60
69
  a:not([class]) {
61
70
  text-decoration-skip-ink: auto;
62
71
  }
63
72
 
64
- picture,
73
+ /* Make images easier to work with */
65
74
  img,
66
- video,
67
- iframe,
68
- object {
75
+ picture {
76
+ max-width: 100%;
69
77
  display: block;
70
- max-inline-size: 100%;
71
- block-size: auto;
72
78
  }
73
79
 
80
+ /* Inherit fonts for inputs and buttons */
74
81
  input,
75
82
  button,
76
83
  textarea,
77
84
  select {
78
- font: inherit;
85
+ font-family: inherit;
86
+ font-size: inherit;
87
+ }
88
+
89
+ /* Make sure textareas without a rows attribute are not tiny */
90
+ textarea:not([rows]) {
91
+ min-height: 10em;
92
+ }
93
+
94
+ /* Anything that has been anchored to should have extra scroll margin */
95
+ :target {
96
+ scroll-margin-block: 5ex;
79
97
  }
package/packages/styles/tokens.css CHANGED
@@ -3,6 +3,7 @@
3
3
  * ------------------------------------------- */
4
4
 
5
5
  :root {
6
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
6
7
  --blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
7
8
  --blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
8
9
  --blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
@@ -13,32 +14,45 @@
13
14
  --blue-700: color(srgb 0.1803921568627451 0.3176470588235294 0.9294117647058824);
14
15
  --blue-800: color(srgb 0.12549019607843137 0.21176470588235294 0.6313725490196078);
15
16
  --blue-900: color(srgb 0.10588235294117647 0.12549019607843137 0.3568627450980392);
16
- --color-bg-1: var(--neutral-000);
17
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
18
+ --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
19
+ --button-outline-stroke-color: var(--neutral-800);
20
+ --button-outline-text-color: var(--neutral-800);
21
+ --button-primary-bg-color: var(--teal-200);
22
+ --button-primary-bg-color-hover: var(--teal-100);
23
+ --button-primary-text-color: var(--neutral-800);
24
+ --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
25
+ --button-secondary-bg-color-hover: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.14901960784313725);
26
+ --button-secondary-text-color: var(--neutral-800);
27
+ --code-bg-color: var(--teal-900);
28
+ --color-bg: var(--neutral-000);
17
29
  --color-bg-2: var(--neutral-100);
18
30
  --color-bg-3: var(--neutral-200);
19
- --color-border: var(--neutral-200);
20
- --color-brand: var(--blue-700);
21
- --color-brand-alt: var(--teal-200);
22
31
  --color-disabled-bg: var(--neutral-200);
23
32
  --color-disabled-border: var(--neutral-400);
24
33
  --color-disabled-text: var(--neutral-400);
34
+ --color-icon: var(--blue-700);
25
35
  --color-invalid-bg: var(--red-100);
26
36
  --color-invalid-border: var(--red-600);
27
37
  --color-invalid-text: var(--red-600);
28
- --color-link: var(--neutral-800);
38
+ --color-link: var(--blue-700);
39
+ --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
40
+ --color-logo-spark: var(--teal-400);
41
+ --color-logo-type: var(--teal-800);
42
+ --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
29
43
  --color-success-bg: var(--green-100);
30
44
  --color-success-border: var(--green-300);
31
45
  --color-success-text: var(--green-800);
32
- --color-text-1: var(--neutral-800);
33
- --color-text-2: var(--neutral-600);
34
- --color-text-3: var(--neutral-400);
46
+ --color-text: var(--neutral-600);
35
47
  --color-text-accent: var(--teal-000);
36
- --color-text-inverse: var(--neutral-100);
48
+ --color-text-weak: var(--neutral-500);
49
+ --color-text-weaker: var(--neutral-400);
37
50
  --color-warning-bg: var(--gold-100);
38
51
  --color-warning-border: var(--gold-300);
39
52
  --color-warning-text: var(--gold-800);
53
+ --eyebrow-text-color: var(--blue-700);
40
54
  --font-family-display: "Figtree", system-ui, "Helvetica", sans-serif;
41
- --font-family-monospace: "Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
55
+ --font-family-mono: "Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
42
56
  --font-family-text: "Instrument Sans", system-ui, "Helvetica", sans-serif;
43
57
  --font-size-display-2xl: 4rem;
44
58
  --font-size-display-2xs: 1.125rem;
@@ -55,11 +69,10 @@
55
69
  --font-size-text-xl: 1.375rem;
56
70
  --font-size-text-xs: 0.75rem;
57
71
  --font-weight-bold: 700;
58
- --font-weight-light: 200;
72
+ --font-weight-extrabold: 800;
59
73
  --font-weight-medium: 500;
60
74
  --font-weight-regular: 400;
61
75
  --font-weight-semibold: 600;
62
- --font-weight-semilight: 300;
63
76
  --gold-000: color(srgb 0.9921568627450981 0.9607843137254902 0.8470588235294118);
64
77
  --gold-100: color(srgb 0.9647058823529412 0.8784313725490196 0.6470588235294118);
65
78
  --gold-200: color(srgb 0.9803921568627451 0.803921568627451 0.43529411764705883);
@@ -80,6 +93,7 @@
80
93
  --green-700: color(srgb 0.10196078431372549 0.4196078431372549 0.20392156862745098);
81
94
  --green-800: color(srgb 0.058823529411764705 0.2901960784313726 0.12941176470588237);
82
95
  --green-900: color(srgb 0.08235294117647059 0.16470588235294117 0.09803921568627451);
96
+ --heading-text-color: var(--neutral-800);
83
97
  --line-height-heading: 1.2;
84
98
  --line-height-none: 1;
85
99
  --line-height-text: 1.5;
@@ -113,6 +127,13 @@
113
127
  --purple-700: color(srgb 0.3803921568627451 0.2901960784313726 0.792156862745098);
114
128
  --purple-800: color(srgb 0.2196078431372549 0.16470588235294117 0.6431372549019608);
115
129
  --purple-900: color(srgb 0.1607843137254902 0.12941176470588237 0.25882352941176473);
130
+ --radius-2xl: 1.875rem;
131
+ --radius-l: 0.75rem;
132
+ --radius-m: 0.375rem;
133
+ --radius-pill: 360px;
134
+ --radius-s: 0.25rem;
135
+ --radius-xl: 1rem;
136
+ --radius-xs: 0.125rem;
116
137
  --red-000: color(srgb 0.984313725490196 0.9333333333333333 0.9294117647058824);
117
138
  --red-100: color(srgb 0.984313725490196 0.8274509803921568 0.8156862745098039);
118
139
  --red-200: color(srgb 1 0.7411764705882353 0.7294117647058823);
@@ -137,6 +158,7 @@
137
158
  --space-s: 1rem;
138
159
  --space-xl: 3rem;
139
160
  --space-xs: 0.75rem;
161
+ --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
140
162
  --teal-000: color(srgb 0.8705882352941177 1 0.996078431372549);
141
163
  --teal-100: color(srgb 0.5568627450980392 0.984313725490196 0.9686274509803922);
142
164
  --teal-200: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215);
@@ -147,34 +169,50 @@
147
169
  --teal-700: color(srgb 0.00392156862745098 0.4117647058823529 0.40784313725490196);
148
170
  --teal-800: color(srgb 0.00392156862745098 0.2823529411764706 0.2784313725490196);
149
171
  --teal-900: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
172
+ --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
150
173
  }
151
174
 
152
175
  @media (prefers-color-scheme: light) {
153
176
  :root {
154
- --color-bg-1: var(--neutral-000);
177
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
178
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
179
+ --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
180
+ --button-outline-stroke-color: var(--neutral-800);
181
+ --button-outline-text-color: var(--neutral-800);
182
+ --button-primary-bg-color: var(--teal-200);
183
+ --button-primary-bg-color-hover: var(--teal-100);
184
+ --button-primary-text-color: var(--neutral-800);
185
+ --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
186
+ --button-secondary-bg-color-hover: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.14901960784313725);
187
+ --button-secondary-text-color: var(--neutral-800);
188
+ --code-bg-color: var(--teal-900);
189
+ --color-bg: var(--neutral-000);
155
190
  --color-bg-2: var(--neutral-100);
156
191
  --color-bg-3: var(--neutral-200);
157
- --color-border: var(--neutral-200);
158
- --color-brand: var(--blue-700);
159
- --color-brand-alt: var(--teal-200);
160
192
  --color-disabled-bg: var(--neutral-200);
161
193
  --color-disabled-border: var(--neutral-400);
162
194
  --color-disabled-text: var(--neutral-400);
195
+ --color-icon: var(--blue-700);
163
196
  --color-invalid-bg: var(--red-100);
164
197
  --color-invalid-border: var(--red-600);
165
198
  --color-invalid-text: var(--red-600);
166
- --color-link: var(--neutral-800);
199
+ --color-link: var(--blue-700);
200
+ --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
201
+ --color-logo-spark: var(--teal-400);
202
+ --color-logo-type: var(--teal-800);
203
+ --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
167
204
  --color-success-bg: var(--green-100);
168
205
  --color-success-border: var(--green-300);
169
206
  --color-success-text: var(--green-800);
170
- --color-text-1: var(--neutral-800);
171
- --color-text-2: var(--neutral-600);
172
- --color-text-3: var(--neutral-400);
207
+ --color-text: var(--neutral-600);
173
208
  --color-text-accent: var(--teal-000);
174
- --color-text-inverse: var(--neutral-100);
209
+ --color-text-weak: var(--neutral-500);
210
+ --color-text-weaker: var(--neutral-400);
175
211
  --color-warning-bg: var(--gold-100);
176
212
  --color-warning-border: var(--gold-300);
177
213
  --color-warning-text: var(--gold-800);
214
+ --eyebrow-text-color: var(--blue-700);
215
+ --heading-text-color: var(--neutral-800);
178
216
  --neutral-000: color(srgb 1 1 1);
179
217
  --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
180
218
  --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
@@ -184,34 +222,51 @@
184
222
  --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
185
223
  --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
186
224
  --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
225
+ --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
226
+ --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
187
227
  }
188
228
  }
189
229
 
190
- [data-mode="light"] {
191
- --color-bg-1: var(--neutral-000);
230
+ [data-theme="light"] {
231
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
232
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
233
+ --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
234
+ --button-outline-stroke-color: var(--neutral-800);
235
+ --button-outline-text-color: var(--neutral-800);
236
+ --button-primary-bg-color: var(--teal-200);
237
+ --button-primary-bg-color-hover: var(--teal-100);
238
+ --button-primary-text-color: var(--neutral-800);
239
+ --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
240
+ --button-secondary-bg-color-hover: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.14901960784313725);
241
+ --button-secondary-text-color: var(--neutral-800);
242
+ --code-bg-color: var(--teal-900);
243
+ --color-bg: var(--neutral-000);
192
244
  --color-bg-2: var(--neutral-100);
193
245
  --color-bg-3: var(--neutral-200);
194
- --color-border: var(--neutral-200);
195
- --color-brand: var(--blue-700);
196
- --color-brand-alt: var(--teal-200);
197
246
  --color-disabled-bg: var(--neutral-200);
198
247
  --color-disabled-border: var(--neutral-400);
199
248
  --color-disabled-text: var(--neutral-400);
249
+ --color-icon: var(--blue-700);
200
250
  --color-invalid-bg: var(--red-100);
201
251
  --color-invalid-border: var(--red-600);
202
252
  --color-invalid-text: var(--red-600);
203
- --color-link: var(--neutral-800);
253
+ --color-link: var(--blue-700);
254
+ --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
255
+ --color-logo-spark: var(--teal-400);
256
+ --color-logo-type: var(--teal-800);
257
+ --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
204
258
  --color-success-bg: var(--green-100);
205
259
  --color-success-border: var(--green-300);
206
260
  --color-success-text: var(--green-800);
207
- --color-text-1: var(--neutral-800);
208
- --color-text-2: var(--neutral-600);
209
- --color-text-3: var(--neutral-400);
261
+ --color-text: var(--neutral-600);
210
262
  --color-text-accent: var(--teal-000);
211
- --color-text-inverse: var(--neutral-100);
263
+ --color-text-weak: var(--neutral-500);
264
+ --color-text-weaker: var(--neutral-400);
212
265
  --color-warning-bg: var(--gold-100);
213
266
  --color-warning-border: var(--gold-300);
214
267
  --color-warning-text: var(--gold-800);
268
+ --eyebrow-text-color: var(--blue-700);
269
+ --heading-text-color: var(--neutral-800);
215
270
  --neutral-000: color(srgb 1 1 1);
216
271
  --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
217
272
  --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
@@ -221,34 +276,51 @@
221
276
  --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
222
277
  --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
223
278
  --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
279
+ --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
280
+ --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
224
281
  }
225
282
 
226
283
  @media (prefers-color-scheme: dark) {
227
284
  :root {
228
- --color-bg-1: var(--neutral-800);
285
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
286
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
287
+ --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
288
+ --button-outline-stroke-color: var(--teal-200);
289
+ --button-outline-text-color: var(--teal-200);
290
+ --button-primary-bg-color: var(--teal-200);
291
+ --button-primary-bg-color-hover: var(--teal-100);
292
+ --button-primary-text-color: var(--neutral-800);
293
+ --button-secondary-bg-color: color(srgb 1 1 1 / 0.09803921568627451);
294
+ --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
295
+ --button-secondary-text-color: var(--teal-200);
296
+ --code-bg-color: var(--teal-900);
297
+ --color-bg: var(--neutral-800);
229
298
  --color-bg-2: var(--neutral-700);
230
299
  --color-bg-3: var(--neutral-600);
231
- --color-border: var(--neutral-200);
232
- --color-brand: var(--teal-200);
233
- --color-brand-alt: var(--blue-700);
234
300
  --color-disabled-bg: var(--neutral-600);
235
301
  --color-disabled-border: var(--neutral-400);
236
302
  --color-disabled-text: var(--neutral-400);
303
+ --color-icon: var(--teal-200);
237
304
  --color-invalid-bg: var(--red-200);
238
305
  --color-invalid-border: var(--red-700);
239
306
  --color-invalid-text: var(--red-700);
240
- --color-link: var(--neutral-100);
307
+ --color-link: var(--teal-200);
308
+ --color-logo-inactive: color(srgb 0.2823529411764706 0.36470588235294116 0.36470588235294116);
309
+ --color-logo-spark: var(--teal-200);
310
+ --color-logo-type: var(--neutral-000);
311
+ --color-stroke: color(srgb 1 1 1 / 0.09803921568627451);
241
312
  --color-success-bg: var(--green-200);
242
313
  --color-success-border: var(--green-400);
243
314
  --color-success-text: var(--green-900);
244
- --color-text-1: var(--neutral-100);
245
- --color-text-2: var(--neutral-300);
246
- --color-text-3: var(--neutral-500);
315
+ --color-text: var(--teal-000);
247
316
  --color-text-accent: var(--teal-600);
248
- --color-text-inverse: var(--teal-800);
317
+ --color-text-weak: var(--neutral-200);
318
+ --color-text-weaker: var(--neutral-400);
249
319
  --color-warning-bg: var(--gold-200);
250
320
  --color-warning-border: var(--gold-400);
251
321
  --color-warning-text: var(--gold-900);
322
+ --eyebrow-text-color: var(--teal-200);
323
+ --heading-text-color: var(--neutral-100);
252
324
  --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
253
325
  --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
254
326
  --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
@@ -258,34 +330,51 @@
258
330
  --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
259
331
  --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
260
332
  --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
333
+ --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
334
+ --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
261
335
  }
262
336
  }
263
337
 
264
- [data-mode="dark"] {
265
- --color-bg-1: var(--neutral-800);
338
+ [data-theme="dark"] {
339
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
340
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
341
+ --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
342
+ --button-outline-stroke-color: var(--teal-200);
343
+ --button-outline-text-color: var(--teal-200);
344
+ --button-primary-bg-color: var(--teal-200);
345
+ --button-primary-bg-color-hover: var(--teal-100);
346
+ --button-primary-text-color: var(--neutral-800);
347
+ --button-secondary-bg-color: color(srgb 1 1 1 / 0.09803921568627451);
348
+ --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
349
+ --button-secondary-text-color: var(--teal-200);
350
+ --code-bg-color: var(--teal-900);
351
+ --color-bg: var(--neutral-800);
266
352
  --color-bg-2: var(--neutral-700);
267
353
  --color-bg-3: var(--neutral-600);
268
- --color-border: var(--neutral-200);
269
- --color-brand: var(--teal-200);
270
- --color-brand-alt: var(--blue-700);
271
354
  --color-disabled-bg: var(--neutral-600);
272
355
  --color-disabled-border: var(--neutral-400);
273
356
  --color-disabled-text: var(--neutral-400);
357
+ --color-icon: var(--teal-200);
274
358
  --color-invalid-bg: var(--red-200);
275
359
  --color-invalid-border: var(--red-700);
276
360
  --color-invalid-text: var(--red-700);
277
- --color-link: var(--neutral-100);
361
+ --color-link: var(--teal-200);
362
+ --color-logo-inactive: color(srgb 0.2823529411764706 0.36470588235294116 0.36470588235294116);
363
+ --color-logo-spark: var(--teal-200);
364
+ --color-logo-type: var(--neutral-000);
365
+ --color-stroke: color(srgb 1 1 1 / 0.09803921568627451);
278
366
  --color-success-bg: var(--green-200);
279
367
  --color-success-border: var(--green-400);
280
368
  --color-success-text: var(--green-900);
281
- --color-text-1: var(--neutral-100);
282
- --color-text-2: var(--neutral-300);
283
- --color-text-3: var(--neutral-500);
369
+ --color-text: var(--teal-000);
284
370
  --color-text-accent: var(--teal-600);
285
- --color-text-inverse: var(--teal-800);
371
+ --color-text-weak: var(--neutral-200);
372
+ --color-text-weaker: var(--neutral-400);
286
373
  --color-warning-bg: var(--gold-200);
287
374
  --color-warning-border: var(--gold-400);
288
375
  --color-warning-text: var(--gold-900);
376
+ --eyebrow-text-color: var(--teal-200);
377
+ --heading-text-color: var(--neutral-100);
289
378
  --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
290
379
  --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
291
380
  --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
@@ -295,5 +384,7 @@
295
384
  --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
296
385
  --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
297
386
  --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
387
+ --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
388
+ --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
298
389
  }
299
390