Colors & Fonts

docusaurus.config.ts

@@ -1,36 +1,33 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type { Config } from '@docusaurus/types';
-import type * as Preset from '@docusaurus/preset-classic';
+import { themes as prismThemes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
 import type * as Plugin from "@docusaurus/types/src/plugin";
-import type * as OpenApiPlugin from 'docusaurus-plugin-openapi-docs';
+import type * as OpenApiPlugin from "docusaurus-plugin-openapi-docs";
 
 const config: Config = {
-  title: 'Credova Developer Documentation',
-  favicon: 'img/favicon.ico',
+  title: "Credova Developer Documentation",
+  favicon: "img/favicon.ico",
   url: "https://developers.credova.com",
-  baseUrl: '/',
-  organizationName: 'credova-financial',
-  projectName: 'developers.basistheory.com',
+  baseUrl: "/",
+  organizationName: "credova-financial",
+  projectName: "developers.credova.com",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "throw",
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
+    defaultLocale: "en",
+    locales: ["en"],
   },
 
   // Mermaid
   markdown: {
     mermaid: true,
   },
 
-  themes: [
-    "@docusaurus/theme-mermaid",
-    "docusaurus-theme-openapi-docs"
-  ],
+  themes: ["@docusaurus/theme-mermaid", "docusaurus-theme-openapi-docs"],
 
   stylesheets: [
     {
@@ -44,8 +41,8 @@ const config: Config = {
       "classic",
       {
         docs: {
-          routeBasePath: '/',
-          sidebarPath: './sidebars.ts',
+          routeBasePath: "/",
+          sidebarPath: "./sidebars.ts",
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
@@ -54,20 +51,20 @@ const config: Config = {
         },
         blog: false,
         theme: {
-          customCss: './src/css/custom.scss',
+          customCss: "./src/css/custom.scss",
         },
       } satisfies Preset.Options,
     ],
   ],
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
+    image: "img/docusaurus-social-card.jpg",
     navbar: {
       logo: {
-        alt: 'Credova',
-        src: 'img/credova-dark.svg',
-        srcDark: 'img/credova-light.svg',
+        alt: "Credova",
+        src: "img/credova-dark.svg",
+        srcDark: "img/credova-light.svg",
       },
       items: [
         {
@@ -89,9 +86,9 @@ const config: Config = {
           label: "SDKs",
         },
         {
-          href: 'https://github.com/credova-financial/developers.credova.com',
-          label: 'GitHub',
-          position: 'right',
+          href: "https://github.com/credova-financial/developers.credova.com",
+          label: "GitHub",
+          position: "right",
         },
       ],
     },
@@ -120,8 +117,8 @@ const config: Config = {
             },
           } satisfies OpenApiPlugin.Options,
         } satisfies Plugin.PluginOptions,
-      }
-    ]
+      },
+    ],
   ],
 };
 

src/css/custom.scss

@@ -8,14 +8,17 @@
 
 @use "tabs";
 
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
+
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #80A860;
+  --ifm-color-primary-dark: #97B77D;
+  --ifm-color-primary-darker: #80A860;
+  --ifm-color-primary-darkest: #6B8E4E;
+  --ifm-color-primary-light: #B8CEA6;
+  --ifm-color-primary-lighter: #C2D5B3;
+  --ifm-color-primary-lightest: #747476;
+  --ifm-color-success: #80A860;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --site-primary-hue-saturation: 167 68%;
@@ -36,58 +39,66 @@
   --card-border-shadow-hover: 0px 10px 15px -3px rgba(7, 10, 27, 0.05), 0px 4px 6px -4px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #b9bcd1;
 
   /* Alerts */
-  --alert-warning-color: #5f2b01;
+  --alert-warning-color: #EECD59;
   --alert-warning-background: linear-gradient(90deg, rgba(255, 167, 38, 0.2) 0.78%, rgba(255, 167, 38, 0.05) 41.41%);
-  --alert-error-color: #622036;
+  --alert-error-color: #EF3E36;
   --alert-error-background: linear-gradient(90deg, rgba(246, 81, 136, 0.2) 0.78%, rgba(246, 81, 136, 0.05) 41.41%);
-  --alert-info-color: #114762;
+  --alert-info-color: #508CA4;
   --alert-info-background: linear-gradient(90deg, rgba(41, 182, 246, 0.2) 0.78%, rgba(41, 182, 246, 0.05) 41.41%);
-  --alert-success-color: #004937;
+  --alert-success-color: #ADC698;
   --alert-success-background: linear-gradient(90deg, rgba(0, 182, 138, 0.2) 0.78%, rgba(0, 182, 138, 0.05) 41.41%);
   --alert-neutral-color: #606376;
   --alert-neutral-border-color: rgba(7, 10, 27, 0.23);
   --alert-neutral-background: linear-gradient(90deg, rgba(232, 240, 255, 0.20) 0.78%, rgba(255, 255, 255, 0.05) 41.41%);
+
+  /* Fonts */
+  --font-family: 'Plus Jakarta Sans';
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #80A860;
+  --ifm-color-primary-dark: #97B77D;
+  --ifm-color-primary-darker: #80A860;
+  --ifm-color-primary-darkest: #6B8E4E;
+  --ifm-color-primary-light: #B8CEA6;
+  --ifm-color-primary-lighter: #C2D5B3;
+  --ifm-color-primary-lightest: #747476;
+  --ifm-color-success: #80A860;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
   --tabs-border-color: #324944;
 
   /* Code */
-  --code-block-background-color: #112420;
-  --code-title-background-color: #102c26;
+  --code-block-background-color: #242526;
+  --code-title-background-color: #242526;
 
   /* Sidebar */
-  --sidebar-background-color: #102c26;
+  --sidebar-background-color: #242526;
   --default-border-color: rgba(209, 255, 249, 0.15);
 
   /* Cards */
   --primary-button-color: #000;
   --card-border-shadow-hover: 0px 8px 10px rgba(4, 6, 17, 0.2), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.18);
 
   /* Alerts */
-  --alert-warning-color: #ffa726;
+  --alert-warning-color: #EECD59;
   --alert-warning-background: linear-gradient(90deg, rgba(255, 167, 38, 0.2) 0.78%, rgba(255, 167, 38, 0.05) 41.41%);
-  --alert-error-color: #f56c9d;
+  --alert-error-color: #EF3E36;
   --alert-error-background: linear-gradient(90deg, rgba(245, 108, 157, 0.2) 0.78%, rgba(245, 108, 157, 0.05) 41.41%);
-  --alert-info-color: #0288d1;
+  --alert-info-color: #508CA4;
   --alert-info-background: linear-gradient(90deg, rgba(41, 182, 246, 0.2) 0.78%, rgba(41, 182, 246, 0.05) 41.41%);
-  --alert-success-color: #00b68a;
+  --alert-success-color: #ADC698;
   --alert-success-background: linear-gradient(90deg, rgba(0, 182, 138, 0.2) 0.78%, rgba(0, 182, 138, 0.05) 41.41%);
   --alert-neutral-color: #EBEDFF;
   --alert-neutral-border-color: rgba(234, 239, 255, 0.10);
   --alert-neutral-background: linear-gradient(90deg, rgba(234, 239, 255, 0.08) 0.78%, rgba(234, 239, 255, 0.05) 41.41%);
 }
 
+body {
+  font-family: var(--font-family);
+}
+
 .theme-code-block-highlighted-line {
   display: table-row !important;
 }
@@ -318,3 +329,8 @@ html[data-theme="dark"] .header-github-link:before {
     width: var(--ifm-container-width-xl);
   }
 }
+
+.openapi-left-panel__container .tabs-container {
+  padding-left: 1em;
+  padding-right: 1em;
+}