docs: bring over springloaded fonts

docs/assets/fonts/lexend.txt

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

docs/assets/styles/main.css

@@ -3,28 +3,63 @@
 @tailwind utilities;
 
 @layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
   @font-face {
-    font-family: 'Lexend';
-    font-style: normal;
-    font-weight: 100 900;
+    font-family: 'Satoshi';
+    src:
+      url('~/assets/fonts/Satoshi-Light.woff2') format('woff2'),
+      url('~/assets/fonts/Satoshi-Light.woff') format('woff'),
+      url('~/assets/fonts/Satoshi-Light.ttf') format('truetype');
+    font-weight: 300;
     font-display: swap;
-    src: url(~/assets/fonts/lexend.woff2) format('woff2');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-weight: 100 900;
-    font-display: block;
     font-style: normal;
-    font-named-instance: 'Regular';
-    src: url('~/assets/fonts/Inter-roman.var.woff2') format('woff2');
   }
+
   @font-face {
-    font-family: 'Inter';
-    font-weight: 100 900;
-    font-display: block;
-    font-style: italic;
-    font-named-instance: 'Italic';
-    src: url('~/assets/fonts/Inter-italic.var.woff2') format('woff2');
+    font-family: 'Satoshi';
+    src:
+      url('~/assets/fonts/Satoshi-Regular.woff2') format('woff2'),
+      url('~/assets/fonts/Satoshi-Regular.woff') format('woff'),
+      url('~/assets/fonts/Satoshi-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Satoshi';
+    src:
+      url('~/assets/fonts/Satoshi-Medium.woff2') format('woff2'),
+      url('~/assets/fonts/Satoshi-Medium.woff') format('woff'),
+      url('~/assets/fonts/Satoshi-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-display: swap;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Satoshi';
+    src:
+      url('~/assets/fonts/Satoshi-Bold.woff2') format('woff2'),
+      url('~/assets/fonts/Satoshi-Bold.woff') format('woff'),
+      url('~/assets/fonts/Satoshi-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-display: swap;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'Satoshi';
+    src:
+      url('~/assets/fonts/Satoshi-Black.woff2') format('woff2'),
+      url('~/assets/fonts/Satoshi-Black.woff') format('woff'),
+      url('~/assets/fonts/Satoshi-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-display: swap;
+    font-style: normal;
   }
 }
 

docs/assets/svg/springloaded-logo.svg

@@ -0,0 +1,6 @@
+<svg width="345" height="385" viewBox="0 0 345 385" xmlns="http://www.w3.org/2000/svg">
+    <path d="M301.641 385C294.31 385 286.809 383.124 279.989 379.146L21.6512 230.011C0.965987 218.076 -6.19428 191.534 5.79633 170.789C17.7301 150.101 44.2686 142.997 65.0106 154.932L323.349 304.067C344.034 316.002 351.194 342.544 339.203 363.289C331.191 377.157 316.643 384.943 301.641 384.943V385Z"/>
+    <path d="M301.64 235.865C294.31 235.865 286.808 233.99 279.989 230.011L21.6511 80.8761C0.96588 68.884 -6.13756 42.3989 5.79622 21.6541C17.7868 0.909359 44.2685 -6.13817 65.0105 5.79717L323.349 154.932C344.034 166.867 351.194 193.409 339.203 214.154C331.191 228.022 316.643 235.808 301.64 235.808V235.865Z"/>
+    <path d="M54.7249 298.327H43.3026C19.3782 298.327 0 317.708 0 341.635C0 365.563 19.3782 384.943 43.3026 384.943H185.144C190.543 384.943 192.418 377.839 187.758 375.111L54.6681 298.27L54.7249 298.327Z"/>
+    <path d="M290.275 86.6734H301.697C325.622 86.6734 345 67.2926 345 43.3651C345 19.4376 325.622 0.0568848 301.697 0.0568848H159.856C154.457 0.0568848 152.582 7.16125 157.242 9.88933L290.332 86.7302L290.275 86.6734Z"/>
+</svg>

docs/components/ApplicationHeader.vue

@@ -2,6 +2,7 @@
 import { NuxtLink } from '#components'
 import ColorThemeSwitcher from '~/components/ThemeSwitcher.vue'
 import { useWindowScroll } from '@vueuse/core'
+import SpringloadedLogo from '~/assets/svg/springloaded-logo.svg'
 
 const { y } = useWindowScroll()
 
@@ -58,26 +59,29 @@ const isScrolled = computed(() => y.value !== 0)
           viewBox="0 0 87 68"
         >
           <path
-            class="fill-current fill-[#0EE2FF] dark:fill-sky-900"
+            class="fill-[#0EE2FF] dark:fill-sky-900"
             fill-rule="evenodd"
             d="M62.1429 6.1818H24.8571c-10.2961 0-18.6428 8.3031-18.6428 18.5455v18.5454c0 10.2424 8.3467 18.5455 18.6428 18.5455h37.2858c10.2961 0 18.6428-8.3031 18.6428-18.5455V24.7273c0-10.2424-8.3467-18.5455-18.6428-18.5455ZM24.8571 0C11.1289 0 0 11.0708 0 24.7273v18.5454C0 56.9292 11.1289 68 24.8571 68h37.2858C75.8711 68 87 56.9292 87 43.2727V24.7273C87 11.0708 75.8711 0 62.1429 0H24.8571Z"
             clip-rule="evenodd"
           />
           <path
-            class="fill-current fill-[#111112] dark:fill-[#0EE2FF]"
+            class="fill-[#111112] dark:fill-[#0EE2FF]"
             fill-rule="evenodd"
             d="M60.1875 9.125h-33.375c-9.2163 0-16.6875 7.4712-16.6875 16.6875V42.5c0 9.2162 7.4712 16.6875 16.6875 16.6875h33.375c9.2162 0 16.6875-7.4713 16.6875-16.6875V25.8125c0-9.2163-7.4713-16.6875-16.6875-16.6875Zm-33.375-5.5625c-12.2883 0-22.25 9.9617-22.25 22.25V42.5c0 12.2883 9.9617 22.25 22.25 22.25h33.375c12.2883 0 22.25-9.9617 22.25-22.25V25.8125c0-12.2883-9.9617-22.25-22.25-22.25h-33.375Z"
             clip-rule="evenodd"
           />
           <path
-            class="fill-current fill-[#000] dark:fill-sky-50"
+            class="fill-[#000] dark:fill-sky-50"
             fill-rule="evenodd"
             d="M55.0064 22.7105a2.2807 2.2807 0 0 1 .6676 1.6127v9.6758a2.2808 2.2808 0 0 1-2.2803 2.241 2.2802 2.2802 0 0 1-2.2802-2.241v-7.3956h-7.3956a2.2804 2.2804 0 0 1-1.587-3.8788 2.2808 2.2808 0 0 1 1.587-.6817h9.6758a2.2805 2.2805 0 0 1 1.6127.6676ZM34.042 31.7188a2.2807 2.2807 0 0 1 2.2803 2.2802v7.3956h7.3956a2.2804 2.2804 0 0 1 2.241 2.2803 2.2806 2.2806 0 0 1-2.241 2.2803H34.042a2.2808 2.2808 0 0 1-2.2803-2.2803V33.999a2.2807 2.2807 0 0 1 2.2803-2.2802Z"
             clip-rule="evenodd"
           />
         </svg>
 
-        <span class="font-bold text-sky-900 dark:text-sky-50">Vue Select</span>
+        <span
+          class="font-bold font-display tracking-tight text-sky-900 dark:text-sky-50"
+          >Vue Select</span
+        >
       </NuxtLink>
     </div>
     <div class="-my-5 mr-6 sm:mr-8 md:mr-0">
@@ -112,6 +116,7 @@ const isScrolled = computed(() => y.value !== 0)
       <a
         class="group"
         aria-label="GitHub"
+        target="_blank"
         href="https://github.com/sagalbot/vue-select"
       >
         <svg
@@ -124,6 +129,16 @@ const isScrolled = computed(() => y.value !== 0)
           ></path>
         </svg>
       </a>
+      <a
+        class="group"
+        aria-label="Springloaded"
+        target="_blank"
+        href="https://springloaded.co"
+      >
+        <SpringloadedLogo
+          class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
+        />
+      </a>
     </div>
   </header>
 </template>

docs/components/Hero.vue

@@ -29,7 +29,7 @@ import {
           />
           <div class="relative">
             <p
-              class="font-display inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
+              class="font-display inline bg-gradient-to-r from-indigo-200 via-sky-400 font-bold to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
             >
               The complete Vue.js combobox solution.
             </p>

docs/components/PageContent.vue

@@ -14,7 +14,7 @@ import PageTableOfContents from '~/components/PageTableOfContents.vue'
         :class="[
           'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
           // headings
-          'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',
+          'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-bold lg:prose-headings:scroll-mt-[8.5rem]',
           // lead
           'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
           // links

docs/components/PageContentHeader.vue

@@ -6,14 +6,11 @@ const { page } = useContent()
 
 <template>
   <header class="mb-9 space-y-1">
-    <p
-      v-if="page?.section"
-      class="font-display text-sm font-medium text-sky-500"
-    >
+    <p v-if="page?.section" class="font-display text-sm font-bold text-sky-500">
       {{ page?.section }}
     </p>
     <h1
-      class="font-display text-3xl tracking-tight text-slate-900 dark:text-white"
+      class="font-display font-bold text-3xl tracking-tight text-slate-900 dark:text-white"
     >
       {{ page?.title }}
     </h1>

docs/components/SidebarNavigation.vue

@@ -80,7 +80,7 @@ const router = { pathname: '' }
       ></div>
       <nav class="w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
         <ul role="list" class="space-y-9">
-          <li v-for="section in navigation" key="section.title">
+          <li v-for="section in navigation" :key="section.title">
             <h2 class="font-display font-medium text-slate-900 dark:text-white">
               {{ section.title }}
             </h2>
@@ -90,7 +90,7 @@ const router = { pathname: '' }
             >
               <li
                 v-for="link in section?.links"
-                key="link.href"
+                :key="link.href"
                 class="relative"
               >
                 <NuxtLink

docs/components/content/Callout.vue

@@ -8,7 +8,7 @@ const props = withDefaults(
   }>(),
   {
     type: 'note',
-  }
+  },
 )
 
 const styles = computed(() => {
@@ -33,7 +33,7 @@ const styles = computed(() => {
   <div :class="['my-8 flex rounded-3xl p-6', styles.container]">
     <!--    <IconComponent class="h-8 w-8 flex-none" />-->
     <div class="ml-4 flex-auto">
-      <p :class="['m-0 font-display text-xl', styles.title]">
+      <p :class="['m-0 font-display font-bold text-xl', styles.title]">
         {{ title }}
       </p>
       <div :class="['prose mt-2.5', styles.body]">

docs/components/content/QuickLink.vue

@@ -15,7 +15,9 @@ defineProps<{
     />
     <div class="relative overflow-hidden rounded-xl p-6">
       <slot name="icon" />
-      <h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
+      <h2
+        class="mt-4 font-display font-bold text-base text-slate-900 dark:text-white"
+      >
         <NuxtLink :to="href">
           <span class="absolute -inset-px rounded-xl" />
           {{ title }}

docs/content/index.md

@@ -12,7 +12,7 @@ typeahead select. They're a staple on the web, and they're notoriously tough to
 :::
 
 Vue Select provides a default template that fits most use cases. The component is designed
-to be as lightweight as possible,while maintaining high standards for accessibility, developer
+to be as lightweight as possible, while maintaining high standards for accessibility, developer
 experience, and customization.
 
 :::quick-links

docs/tailwind.config.js

@@ -30,8 +30,8 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-        display: ['Lexend', ...defaultTheme.fontFamily.sans],
+        sans: ['Public Sans', 'Inter var', 'Inter', 'sans-serif'],
+        display: ['Satoshi', 'Public Sans', 'Inter var', 'Inter', 'sans-serif'],
       },
       maxWidth: {
         '8xl': '88rem',