Merge pull request #17 from interledger/chj/mermaid-component-updates

fix: adjust styling for diagrams smaller than content width

Author: huijing

README.md

@@ -1,13 +1,13 @@
 # Interledger documentation design system
 
-Interledger uses Starlight (powered by Astro) for all its documentation sites. We have 2 visual themes, green for specification documentation and orange for product documentation. These themes are built on top of Starlight's defaults and overrides some of the out-of-the-box styling. They are just CSS files, so use them with the path to `node_modules`. Unfortunately, we did not have enough braincells to figure out how to make it prettier than that. To use them in the `astro.config.mjs`:
+Interledger uses Starlight (powered by Astro) for all its documentation sites. We have 2 visual themes for now, teal and orange. These themes are built on top of Starlight's defaults and overrides some of the out-of-the-box styling. They are just CSS files, so use them with the path to `node_modules`. Unfortunately, we did not have enough braincells to figure out how to make it prettier than that. To use them in the `astro.config.mjs`:
 
 ```mjs
 export default defineConfig({
   integrations: [
     starlight({
       customCss: [
-        "./node_modules/@interledger/docs-design-system/src/styles/green-theme.css",
+        "./node_modules/@interledger/docs-design-system/src/styles/teal-theme.css",
         "./node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css",
       ],
     }),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {

src/components/Mermaid.astro

@@ -8,6 +8,12 @@ const { graph } = Astro.props;
 
 <pre class="mermaid" set:html={graph} />
 
+<style>
+  pre.mermaid {
+    background-color: transparent;
+  }
+</style>
+
 <script>
   import mermaid from "/node_modules/mermaid/dist/mermaid.esm.min.mjs";
   mermaid.initialize({ startOnLoad: true });

src/components/MermaidWrapper.astro

@@ -13,7 +13,6 @@ const { hasBorder = true } = Astro.props;
 
 <style>
 div {
-  text-align: right;
   margin-top: var(--space-m);
 }