slidev-theme-measurelab 0.1.0 → 0.2.0

package/global.css

@@ -644,3 +644,90 @@ button:disabled,
 .dark .recharts-rectangle.recharts-tooltip-cursor {
   fill: oklch(0.7879 0.1991 139.5227 / 0.1) !important;
 }
+
+/* Slidev layout content safe area - keep content away from footer */
+.slidev-layout {
+  padding-bottom: 5.5rem !important;
+}
+
+/* For PDF export - reduce padding since nav buttons are hidden */
+@media print {
+  .slidev-layout {
+    padding-bottom: 1rem !important;
+  }
+}
+
+/* Slidev inline code styling - use brand green */
+.slidev-layout code {
+  color: #6dd750 !important;
+  background-color: #081f30 !important;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: var(--font-mono);
+}
+
+/* Dark mode inline code */
+.dark .slidev-layout code,
+.slidev-layout.is-dark code {
+  color: #6dd750 !important;
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Mermaid diagram styling */
+.mermaid {
+  font-family: var(--font-sans) !important;
+}
+
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node polygon {
+  fill: #f9f9f9 !important;
+  stroke: #6dd750 !important;
+  stroke-width: 2px !important;
+}
+
+.mermaid .node .label {
+  color: #081f30 !important;
+  fill: #081f30 !important;
+}
+
+.mermaid .edgePath .path {
+  stroke: #f97316 !important;
+  stroke-width: 2px !important;
+}
+
+.mermaid .arrowheadPath {
+  fill: #f97316 !important;
+}
+
+.mermaid .edgeLabel {
+  background-color: #ffffff !important;
+  color: #081f30 !important;
+}
+
+/* Dark mode Mermaid */
+.dark .mermaid .node rect,
+.dark .mermaid .node circle,
+.dark .mermaid .node polygon {
+  fill: #2a3a4a !important;
+  stroke: #6dd750 !important;
+}
+
+.dark .mermaid .node .label {
+  color: #f9f9f9 !important;
+  fill: #f9f9f9 !important;
+}
+
+.dark .mermaid .edgePath .path {
+  stroke: #f97316 !important;
+}
+
+.dark .mermaid .arrowheadPath {
+  fill: #f97316 !important;
+}
+
+.dark .mermaid .edgeLabel {
+  background-color: #081f30 !important;
+  color: #f9f9f9 !important;
+}
+

package/layouts/default.vue

@@ -225,6 +225,54 @@ const isDark = computed(() => {
   opacity: 0.8;
 }
 
+/* Tables */
+.slide-content :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  border: 1px solid #f0f0f0;
+}
+
+.default.is-dark .slide-content :deep(table) {
+  border-color: #2a3a4a;
+}
+
+.slide-content :deep(th) {
+  background-color: #f9f9f9;
+  color: #081f30;
+  font-weight: 500;
+  text-align: left;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.slide-content :deep(td) {
+  background-color: #ffffff;
+  color: #081f30;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.slide-content :deep(tr:last-child td) {
+  border-bottom: none;
+}
+
+/* Dark mode tables */
+.default.is-dark .slide-content :deep(th) {
+  background-color: #2a3a4a;
+  color: #f9f9f9;
+}
+
+.default.is-dark .slide-content :deep(td) {
+  background-color: #081f30;
+  color: #f9f9f9;
+  border-bottom-color: #2a3a4a;
+}
+
+.default.is-dark .slide-content :deep(th) {
+  border-bottom-color: #2a3a4a;
+}
+
 /* Footer */
 .slide-footer {
   display: flex;
@@ -251,4 +299,14 @@ const isDark = computed(() => {
   font-size: 0.75rem;
   color: inherit;
 }
+
+/* Dark mode footer */
+.default.is-dark .slide-footer,
+.default.is-dark .footer-left,
+.default.is-dark .footer-right,
+.default.is-dark .copyright,
+.default.is-dark .confidential,
+.default.is-dark .page-number {
+  color: #f9f9f9;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-measurelab",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Measurelab branded theme for Slidev presentations",
   "author": "Measurelab",
@@ -43,7 +43,8 @@
     "export": "slidev export slides.md"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.1.0"
+    "@iconify-json/lucide": "^1.1.0",
+    "slidev-theme-measurelab": "^0.1.0"
   },
   "devDependencies": {
     "@slidev/cli": "^0.50.0",

package/setup/mermaid.ts

@@ -0,0 +1,48 @@
+import { defineMermaidSetup } from '@slidev/types'
+
+export default defineMermaidSetup(() => {
+  return {
+    theme: 'base',
+    themeVariables: {
+      // Primary colors - light grey nodes with green border
+      primaryColor: '#f9f9f9',
+      primaryTextColor: '#081f30',
+      primaryBorderColor: '#6dd750',
+
+      // Secondary colors
+      secondaryColor: '#e8e8e8',
+      secondaryTextColor: '#081f30',
+      secondaryBorderColor: '#6dd750',
+
+      // Tertiary colors
+      tertiaryColor: '#f5f5f5',
+      tertiaryTextColor: '#081f30',
+      tertiaryBorderColor: '#6dd750',
+
+      // Background
+      background: '#ffffff',
+      mainBkg: '#f9f9f9',
+
+      // Lines and arrows - coral orange
+      lineColor: '#f97316',
+      arrowheadColor: '#f97316',
+
+      // Text
+      textColor: '#081f30',
+
+      // Flowchart specific
+      nodeBorder: '#6dd750',
+      nodeTextColor: '#081f30',
+
+      // Sequence diagram
+      actorBkg: '#f9f9f9',
+      actorBorder: '#6dd750',
+      actorTextColor: '#081f30',
+      signalColor: '#f97316',
+      signalTextColor: '#081f30',
+
+      // Fonts
+      fontFamily: 'Poppins, sans-serif',
+    },
+  }
+})

package/setup/shiki-theme.json

@@ -0,0 +1,96 @@
+{
+  "name": "measurelab",
+  "type": "dark",
+  "colors": {
+    "editor.background": "#081f30",
+    "editor.foreground": "#f9f9f9"
+  },
+  "tokenColors": [
+    {
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": {
+        "foreground": "#7ddaee",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["string", "string.quoted", "string.template"],
+      "settings": {
+        "foreground": "#40faa3"
+      }
+    },
+    {
+      "scope": ["constant.numeric", "constant.language", "constant.character"],
+      "settings": {
+        "foreground": "#f97316"
+      }
+    },
+    {
+      "scope": ["keyword", "storage.type", "storage.modifier"],
+      "settings": {
+        "foreground": "#fbbc02"
+      }
+    },
+    {
+      "scope": ["entity.name.function", "support.function", "meta.function-call"],
+      "settings": {
+        "foreground": "#7ddaee"
+      }
+    },
+    {
+      "scope": ["entity.name.type", "entity.name.class", "support.type", "support.class"],
+      "settings": {
+        "foreground": "#cdfe0c"
+      }
+    },
+    {
+      "scope": ["variable", "variable.other", "variable.parameter"],
+      "settings": {
+        "foreground": "#f9f9f9"
+      }
+    },
+    {
+      "scope": ["entity.name.tag", "punctuation.definition.tag"],
+      "settings": {
+        "foreground": "#fbbc02"
+      }
+    },
+    {
+      "scope": ["entity.other.attribute-name"],
+      "settings": {
+        "foreground": "#40faa3"
+      }
+    },
+    {
+      "scope": ["punctuation", "meta.brace"],
+      "settings": {
+        "foreground": "#f9f9f9"
+      }
+    },
+    {
+      "scope": ["markup.heading"],
+      "settings": {
+        "foreground": "#40faa3",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": ["markup.bold"],
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": ["markup.italic"],
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["markup.list"],
+      "settings": {
+        "foreground": "#f97316"
+      }
+    }
+  ]
+}

package/setup/shiki.ts

@@ -0,0 +1,11 @@
+import { defineShikiSetup } from '@slidev/types'
+import measurelabTheme from './shiki-theme.json'
+
+export default defineShikiSetup(() => {
+  return {
+    themes: {
+      dark: measurelabTheme,
+      light: measurelabTheme,
+    },
+  }
+})