@netlify/spark-ui 0.0.47-alpha → 1.0.0

package/packages/components/index.ts

@@ -6,10 +6,4 @@ export { default as SearchLink } from './preact/SearchModal/components/SearchLin
 export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
-export { default as ChatApp } from './preact/ChatApp/ChatApp';
 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/components/preact/index.ts

@@ -4,7 +4,6 @@ export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
 export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
-export { default as ChatApp } from "./ChatApp/ChatApp"
 export { SearchModal } from './SearchModal';
 
 export { type IconName } from './Icon';

package/packages/styles/base.css

@@ -1,3 +1,4 @@
+@import 'reset.css';
 @import 'tokens.css';
 @import 'utils.css';
 @import 'fonts.css';

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

@@ -1,17 +1,132 @@
+/* font-face: Text */
 @font-face {
-  font-family: Pacaembu;
-  src: url('../assets/fonts/pacaembu/PacaembuNetlify-Variable.woff2') format('woff2');
-  unicode-range: U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019, U+201C,
-    U+201D;
-  font-weight: 100 1000;
+  font-family: 'Instrument Sans';
+  src: url('../assets/fonts/instrument-sans/InstrumentSans[wdth,wght].woff2') format('woff2');
   font-display: swap;
+  font-weight: 100 900;
+  unicode-range:
+    U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019,
+    U+201C, U+201D;
 }
 
 @font-face {
-  font-family: Mulish;
-  src: url('../assets/fonts/mulish/MulishVar-latin.woff2') format('woff2');
-  unicode-range: U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019, U+201C,
-    U+201D;
-  font-weight: 200 900;
+  font-family: 'Instrument Sans';
+  src: url('../assets/fonts/instrument-sans/InstrumentSans-Italic[wdth,wght].woff2') format('woff2');
   font-display: swap;
+  font-style: italic;
+  font-weight: 100 900;
+  unicode-range:
+    U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019,
+    U+201C, U+201D;
+}
+
+/* font-face: Display */
+@font-face {
+  font-family: 'Figtree';
+  src: url('../assets/fonts/figtree/Figtree[wght].woff2') format('woff2');
+  font-display: swap;
+  font-weight: 100 900;
+  unicode-range:
+    U+5, U+20, U+21, U+24, U+25, U+26, U+27, U+2B-2E, U+30-3A, U+3F, U+41-5A, U+61-7A, U+D7, U+2019,
+    U+201C, U+201D;
+}
+
+/* font-face: Monospace */
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('../assets/fonts/martian-mono/MartianMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('../assets/fonts/martian-mono/MartianMono-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('../assets/fonts/martian-mono/MartianMono-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Martian Mono';
+  src: url('../assets/fonts/martian-mono/MartianMono-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-display: swap;
+}
+
+/* Text */
+body {
+  font-family: var(--font-family-text);
+  font-size: var(--font-size-text-lg);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-text);
+}
+
+b,
+strong {
+  font-weight: var(--font-weight-bold);
+}
+
+i,
+em {
+  font-style: italic;
+  font-weight: var(--font-weight-normal);
+}
+
+/* Headings */
+h1,
+.h1 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display-2xl);
+  font-weight: var(--font-weight-extrabold);
+  line-height: var(--line-height-heading);
+}
+
+h2,
+.h2 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display-xl);
+  font-weight: var(--font-weight-extrabold);
+  line-height: var(--line-height-heading);
+}
+
+h3,
+.h3 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display-lg);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+}
+
+h4,
+.h4 {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-display-sm);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+}
+
+/* Lists */
+li::marker {
+  color: var(--color-icon);
+}
+
+ol li::marker {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Code */
+pre,
+code,
+kbd {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-text-md);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-text);
 }

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));
+}