Update styling to be inline with docs theme

interledger · Sep 20, 2023 · f216b81 · f216b81
1 parent 1819df2
commit f216b81
Show file tree

Hide file tree

Showing 6 changed files with 506 additions and 575 deletions.
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -64,5 +64,8 @@ export default defineConfig({
       ]
     }),
     starlightOpenAPI()
-  ]
+  ],
+  server: {
+    port: 1104
+  }
 })
diff --git a/docs/package.json b/docs/package.json
@@ -10,11 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "0.6.1",
+    "@astrojs/starlight": "0.10.1",
     "@interledger/docs-design-system": "^0.0.12",
-    "astro": "2.10.12",
+    "astro": "3.1.1",
     "sharp": "^0.32.6",
-    "shiki": "0.14.3",
-    "starlight-openapi": "^0.1.0"
+    "shiki": "0.14.4",
+    "starlight-openapi": "^0.2.0"
   }
 }
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -1,5 +1,6 @@
 ---
 title: Open Payments
+description: Open Payments is an API standard that can be implemented by any digital wallet provider.
 template: splash
 hero:
   tagline: Open Payments is an API standard that can be implemented by any digital wallet provider.

diff --git a/docs/src/env.d.ts b/docs/src/env.d.ts
@@ -1,3 +1,3 @@
 /* eslint-disable @typescript-eslint/triple-slash-reference */
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client-image" />
+/// <reference types="astro/client" />
diff --git a/docs/src/styles/openpayments.css b/docs/src/styles/openpayments.css
@@ -10,3 +10,67 @@
 .card-link {
   text-decoration: none;
 }
+
+/* OpenAPI specification styling */
+div.panel {
+  background-color: var(--sl-color-gray-7);
+  border-radius: var(--border-radius);
+  box-shadow: var(--sl-shadow-sm);
+  border: 1px solid var(--sl-color-hairline-light);
+}
+
+details.operation-description-urls {
+  background-color: var(--sl-color-gray-7);
+  border-radius: var(--border-radius);
+  box-shadow: var(--sl-shadow-sm);
+  border: 1px solid var(--sl-color-hairline-light);
+}
+
+details input:read-only {
+  background-color: var(--sl-color-gray-6);
+  color: var(--sl-color-gray-2);
+}
+
+div.method-path div.path {
+  margin-top: 0;
+}
+
+starlight-openapi-content-picker select {
+  background-color: var(--sl-color-black);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--sl-color-hairline-light);
+}
+
+.content div.key div pre,
+.content starlight-openapi-content-picker div pre {
+  background-color: var(--sl-color-gray-6);
+  border: 0;
+}
+
+div.key div.description,
+div.key div.tags {
+  margin-top: 0;
+}
+
+div.key div.tags {
+  margin-top: var(--space-2xs);
+}
+
+.panel b + span,
+div.description span,
+div.tags span {
+  border-color: var(--sl-color-gray-5);
+  border-radius: var(--border-radius);
+}
+
+div.description p {
+  margin-bottom: var(--space-2xs);
+}
+
+div > span.type {
+  color: var(--sl-color-text);
+}
+
+.description details {
+  border-inline-start-color: var(--sl-color-gray-5);
+}