slidev-theme-the-unnamed 0.0.3 → 0.0.4

package/changelog.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.0.4] - 2023-02-02
+
+- Added mermaid styles for `sequenceDiagram`
+- Small fixes
+
+## [0.0.3] - 2023-02-02
+
+- Updated styles for all layouts
+- Added screenshots and documentation
+
 ## [0.0.2] - 2023-01-31
 
 - New layouts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-the-unnamed",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "keywords": [
     "slidev-theme",
     "slidev"

package/setup/mermaid.ts

@@ -0,0 +1,35 @@
+import type { MermaidOptions } from '@slidev/types'
+import { defineMermaidSetup } from '@slidev/types'
+
+export default defineMermaidSetup(() => {
+  // eslint-disable-next-line prefer-const
+  let injection_return: MermaidOptions = {
+    theme: 'forest',
+    themeVariables: {
+      // General theme variables
+      noteBkgColor: "#181d29",
+      noteTextColor: "#F3EFF5cc",
+      noteBorderColor: "#404551",
+
+      // Sequence diagram variables
+      actorBkg: "#0E131F",
+      actorBorder: "#44FFD2",
+      actorTextColor: "#F3EFF5",
+      actorLineColor: "#F3EFF5",
+      signalColor: "#F3EFF5",
+      signalTextColor: "#F3EFF5",
+      sequenceNumberColor: "#F3EFF5",
+      labelBoxBorderColor: "#5EADF2",
+      activationBkgColor: "#181d29",
+      activationBorderColor: "#5EADF2",
+    },
+    themeCSS: `
+      polygon.labelBox,
+      polygon.labelBox + text {
+        display: none;
+      }
+    `
+  }
+
+  return injection_return
+})

package/styles/index.ts

@@ -2,3 +2,4 @@
 import '@slidev/client/styles/layouts-base.css'
 import './layout.css'
 import './code.css'
+import './mermaid.css'

package/styles/layout.css

@@ -71,6 +71,11 @@
     }
   }
 
+  h2 + p,
+  h2 + ul {
+    @apply mt-4;
+  }
+
   p + h2, 
   ul + h2, 
   table + h2, 

package/styles/mermaid.css

@@ -0,0 +1,9 @@
+.mermaid {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    margin: 0 auto;
+  }
+}