Update colors

fern/assets/styles.css

@@ -74,37 +74,59 @@
   height: 100%;
 }
 
-#\/api-reference\/webhooks\/server-message\#request h3 + div:first-of-type > div:first-of-type  {
+#\/api-reference\/webhooks\/server-message\#request
+  h3
+  + div:first-of-type
+  > div:first-of-type {
   display: none;
 }
 
-#\/api-reference\/webhooks\/server-message\#request h3 + div:first-of-type:before  {
+#\/api-reference\/webhooks\/server-message\#request
+  h3
+  + div:first-of-type:before {
   content: "Vapi will make a request to your server with the following object:";
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
-:is(.light) #\/api-reference\/webhooks\/server-message\#request h3 + div:first-of-type:before {
+:is(.light)
+  #\/api-reference\/webhooks\/server-message\#request
+  h3
+  + div:first-of-type:before {
   color: #0008059f;
 }
 
-:is(.dark) #\/api-reference\/webhooks\/server-message\#request h3 + div:first-of-type:before {
+:is(.dark)
+  #\/api-reference\/webhooks\/server-message\#request
+  h3
+  + div:first-of-type:before {
   color: #f6f5ffb6;
 }
 
-#\/api-reference\/webhooks\/client-message\#request h3 + div:first-of-type > div:first-of-type  {
+#\/api-reference\/webhooks\/client-message\#request
+  h3
+  + div:first-of-type
+  > div:first-of-type {
   display: none;
 }
 
-#\/api-reference\/webhooks\/client-message\#request h3 + div:first-of-type:before  {
+#\/api-reference\/webhooks\/client-message\#request
+  h3
+  + div:first-of-type:before {
   content: "Vapi will make a request to your server with the following object:";
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
-:is(.light) #\/api-reference\/webhooks\/client-message\#request h3 + div:first-of-type:before {
+:is(.light)
+  #\/api-reference\/webhooks\/client-message\#request
+  h3
+  + div:first-of-type:before {
   color: #0008059f;
 }
 
-:is(.dark) #\/api-reference\/webhooks\/client-message\#request h3 + div:first-of-type:before {
+:is(.dark)
+  #\/api-reference\/webhooks\/client-message\#request
+  h3
+  + div:first-of-type:before {
   color: #f6f5ffb6;
 }
 
@@ -115,4 +137,38 @@
 
 .clipped-background {
   top: 0 !important;
-}
+}
+
+/* HEADER */
+.fern-theme-default.fern-container .fern-header,
+.fern-theme-default.fern-container .fern-header-tabs {
+  background-color: light-dark(#fffaea, #0e0e13);
+}
+
+/* CARD STYLES */
+.fern-card {
+  border-color: light-dark(#d9d3c2, #27272a);
+  background-color: light-dark(#fffaea, #0e0e13);
+}
+
+/* SIDEBAR */
+.fern-theme-default.fern-container .fern-sidebar-container {
+  background-color: light-dark(#fffaea, #0e0e13);
+}
+
+/* BUTTONS */
+.fern-button:not([disabled]).filled.primary {
+  background-color: light-dark(#09090b, #fffaea);
+}
+
+.fern-button.filled.primary .fern-button-text {
+  color: light-dark(#ffffff, #09090b);
+}
+
+.fern-button.filled.primary:not([disabled]) .fa-icon {
+  background-color: light-dark(#ffffff, #09090b);
+}
+
+.fern-button:not([disabled]).filled.primary:hover {
+  background-color: light-dark(#09090b, #fffaea);
+}

fern/docs.yml

@@ -15,20 +15,20 @@ announcement:
 title: Vapi
 favicon: static/images/favicon.png
 logo:
-  light: static/images/logo/logo-light.png
-  dark: static/images/logo/logo-dark.png
+  light: static/images/logo/logo-light.svg
+  dark: static/images/logo/logo-dark.svg
   href: /
-  height: 28
+  height: 22
 colors:
   accentPrimary:
-    dark: "#94ffd2"
-    light: "#37aa9d"
+    light: "#62F6B5"
+    dark: "#62F6B5"
   background:
-    dark: "#121418"
-    light: "#FFFFFF"
+    light: "#FFFAEA"
+    dark: "#0E0E13"
   header-background:
-    dark: "#121418"
-    light: "#FFFFFF"
+    light: "#FFFAEA"
+    dark: "#0E0E13"
 experimental:
   mdx-components:
     - snippets
@@ -209,7 +209,7 @@ navigation:
               - page: Voice Mail Detection
                 path: calls/voice-mail-detection.mdx
           - section: Vapi SDKs
-            path: sdks.mdx  
+            path: sdks.mdx
             contents:
               - section: Client SDKs
                 contents:

fern/introduction.mdx

@@ -174,42 +174,48 @@ Gain a deep understanding of key concepts in Vapi, as well as how Vapi works:
 Our SDKs are open source, and available on [our GitHub](https://github.com/VapiAI):
 
 <CardGroup cols={3}>
-    <Card title="Vapi Web" icon="window" iconType="duotone" color="#f4ff54" href="/sdk/web">
-      Add a Vapi assistant to your web application.
-    </Card>
-    <Card
-      title="Vapi iOS"
-      icon="mobile-notch"
-      color="#f4ff54"
-      href="https://github.com/VapiAI/ios"
-    >
-      Add a Vapi assistant to your iOS app.
-    </Card>
-    <Card
-      title="Vapi Flutter"
-      icon="mobile-notch"
-      color="#f4ff54"
-      href="https://github.com/VapiAI/flutter"
-    >
-      Add a Vapi assistant to your Flutter app.
-    </Card>
-    <Card
-      title="Vapi React Native"
-      icon="mobile-notch"
-      color="#f4ff54"
-      href="https://github.com/VapiAI/react-native-sdk"
-    >
-      Add a Vapi assistant to your React Native app.
-    </Card>
-    <Card
-      title="Vapi Python"
-      icon="fa-brands python"
-      color="#f4ff54"
-      href="https://github.com/VapiAI/python"
-    >
-      Multi-platform. Mac, Windows, and Linux.
-    </Card>
-  </CardGroup>
+  <Card
+    title="Vapi Web"
+    icon="window"
+    iconType="duotone"
+    color="#ffdd03"
+    href="/sdk/web"
+  >
+    Add a Vapi assistant to your web application.
+  </Card>
+  <Card
+    title="Vapi iOS"
+    icon="mobile-notch"
+    color="#ffdd03"
+    href="https://github.com/VapiAI/ios"
+  >
+    Add a Vapi assistant to your iOS app.
+  </Card>
+  <Card
+    title="Vapi Flutter"
+    icon="mobile-notch"
+    color="#ffdd03"
+    href="https://github.com/VapiAI/flutter"
+  >
+    Add a Vapi assistant to your Flutter app.
+  </Card>
+  <Card
+    title="Vapi React Native"
+    icon="mobile-notch"
+    color="#ffdd03"
+    href="https://github.com/VapiAI/react-native-sdk"
+  >
+    Add a Vapi assistant to your React Native app.
+  </Card>
+  <Card
+    title="Vapi Python"
+    icon="fa-brands python"
+    color="#ffdd03"
+    href="https://github.com/VapiAI/python"
+  >
+    Multi-platform. Mac, Windows, and Linux.
+  </Card>
+</CardGroup>
 
 ## FAQ