@slidev/client 0.50.0-beta.12 → 0.50.0-beta.13

package/internals/ClicksSlider.vue

@@ -87,7 +87,7 @@ function onMousedown() {
         v-model="current"
         class="range"
         type="range" :min="start" :max="total" :step="1"
-        absolute inset-0 z-10 op0
+        absolute inset-0 z-label op0
         :class="readonly ? 'pointer-events-none' : ''"
         :style="{ '--thumb-width': `${1 / (length + 1) * 100}%` }"
         @mousedown="onMousedown"

package/internals/ContextMenu.vue

@@ -61,7 +61,7 @@ const top = computed(() => {
     v-if="currentContextMenu"
     ref="container"
     :style="`left:${left}px;top:${top}px`"
-    class="fixed z-100 w-60 flex flex-wrap justify-items-start p-1 animate-fade-in animate-duration-100 backdrop-blur bg-main bg-opacity-75! border border-main rounded-md shadow overflow-hidden select-none"
+    class="slidev-glass-effect fixed z-context-menu w-60 flex flex-wrap justify-items-start p-1 animate-fade-in animate-duration-100 rounded-md shadow overflow-hidden select-none"
     @contextmenu.prevent=""
     @click="closeContextMenu"
   >

package/internals/DragControl.vue

@@ -375,7 +375,7 @@ watchEffect(() => {
     @pointermove="onPointermove"
     @pointerup="onPointerup"
   >
-    <div class="absolute inset-0 z-100 dark:b-gray-400" :class="isArrow ? '' : 'b b-dark'">
+    <div class="absolute inset-0 z-nav dark:b-gray-400" :class="isArrow ? '' : 'b b-dark'">
       <template v-if="!autoHeight">
         <div v-bind="getCornerProps(true, true)" />
         <div v-bind="getCornerProps(false, false)" />

package/internals/DrawingControls.vue

@@ -42,7 +42,7 @@ function setBrushColor(color: typeof brush.color) {
 <template>
   <Draggable
     v-if="drawingEnabled || drawingPinned"
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-nav  border border-main"
     :class="!drawingEnabled && drawingPinned ? 'opacity-40 hover:opacity-90' : ''"
     storage-key="slidev-drawing-pos"
     :initial-x="10"

package/internals/FormCheckbox.vue

@@ -11,6 +11,6 @@ const value = defineModel<boolean>('modelValue', {
 <template>
   <div border="~ main rounded" flex="~ gap-2 items-center" relative h-5 w-5 p0.5 hover:bg-active p1>
     <div i-ri-check-line :class="value ? '' : 'op0'" />
-    <input v-model="value" type="checkbox" absolute inset-0 z-10 opacity-0.1 :disabled="disabled">
+    <input v-model="value" type="checkbox" absolute inset-0 opacity-0.1 :disabled="disabled">
   </div>
 </template>

package/internals/MenuButton.vue

@@ -30,7 +30,7 @@ onClickOutside(el, () => {
     <KeepAlive>
       <div
         v-if="value"
-        class="rounded-md bg-main text-main shadow absolute bottom-10 left-0 z-20"
+        class="rounded-md bg-main text-main shadow-xl absolute bottom-10 left-0 z-menu"
         dark:border="~ main"
       >
         <slot name="menu" />

package/internals/Modal.vue

@@ -20,7 +20,7 @@ function onClick() {
 
 <template>
   <KeepAlive>
-    <div v-if="value" class="fixed top-0 bottom-0 left-0 right-0 grid z-20">
+    <div v-if="value" class="fixed top-0 bottom-0 left-0 right-0 grid z-modal">
       <div
         bg="black opacity-80"
         class="absolute top-0 bottom-0 left-0 right-0 -z-1"

package/internals/NavControls.vue

@@ -48,7 +48,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow dark:border dark:border-main')
+  : 'rounded-md bg-main shadow-xl dark:border dark:border-main')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)

package/internals/QuickOverview.vue

@@ -109,7 +109,7 @@ watchEffect(() => {
   >
     <div
       v-if="showOverview"
-      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px select-none"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-modal bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px select-none"
       @click="close"
     >
       <div
@@ -157,7 +157,7 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="showOverview" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
+  <div v-if="showOverview" class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2">
     <IconButton title="Close" class="text-2xl" @click="close">
       <div class="i-carbon:close" />
     </IconButton>

package/internals/SideEditor.vue

@@ -121,7 +121,7 @@ throttledWatch(
 
 <template>
   <div
-    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
+    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-dragging"
     :class="vertical ? 'left-0 right-0 w-full h-10px' : 'top-0 bottom-0 w-10px h-full'" :style="{
       opacity: handlerDown ? '0.3' : undefined,
       bottom: vertical ? `${editorHeight - 5}px` : undefined,

package/internals/WebCamera.vue

@@ -63,7 +63,7 @@ onMounted(fixPosition)
 <template>
   <div
     v-if="streamCamera && showAvatar && currentCamera !== 'none'"
-    class="fixed z-10"
+    class="fixed z-camera"
     :style="containerStyle"
   >
     <div
@@ -83,7 +83,7 @@ onMounted(fixPosition)
 
     <div
       ref="handler"
-      class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-30 hover:opacity-100 dark:border dark:border-true-gray-700"
+      class="absolute bottom-0 right-0 rounded-full bg-main shadow opacity-0 shadow z-dragging hover:opacity-100 dark:border dark:border-true-gray-700"
       :style="handleStyle"
       :class="handlerDown ? '!opacity-100' : ''"
     />

package/logic/dark.ts

@@ -26,12 +26,23 @@ export const isDark = computed<boolean>({
 export const toggleDark = useToggle(isDark)
 
 if (isClient) {
+  const CSS_DISABLE_TRANS = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
+
   watch(
     isDark,
     (v) => {
+      const style = window!.document.createElement('style')
+      style.appendChild(document.createTextNode(CSS_DISABLE_TRANS))
+      window!.document.head.appendChild(style)
+
       const html = document.querySelector('html')!
       html.classList.toggle('dark', v)
       html.classList.toggle('light', !v)
+
+      // Calling getComputedStyle forces the browser to redraw
+      // @ts-expect-error unused variable
+      const _ = window!.getComputedStyle(style!).opacity
+      document.head.removeChild(style!)
     },
     { immediate: true },
   )

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.50.0-beta.12",
+  "version": "0.50.0-beta.13",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.10",
-    "@iconify-json/carbon": "^1.2.4",
-    "@iconify-json/ph": "^1.2.1",
-    "@iconify-json/svg-spinners": "^1.2.1",
+    "@iconify-json/carbon": "^1.2.5",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/svg-spinners": "^1.2.2",
     "@shikijs/monaco": "^1.24.2",
     "@shikijs/vitepress-twoslash": "^1.24.2",
     "@slidev/rough-notation": "^0.1.0",
@@ -46,7 +46,7 @@
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "html-to-image": "^1.11.11",
-    "katex": "^0.16.15",
+    "katex": "^0.16.17",
     "lz-string": "^1.5.0",
     "mermaid": "^11.4.1",
     "monaco-editor": "0.51.0",
@@ -61,8 +61,8 @@
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "yaml": "^2.6.1",
-    "@slidev/parser": "0.50.0-beta.12",
-    "@slidev/types": "0.50.0-beta.12"
+    "@slidev/types": "0.50.0-beta.13",
+    "@slidev/parser": "0.50.0-beta.13"
   },
   "devDependencies": {
     "vite": "^6.0.3"

package/pages/export.vue

@@ -281,7 +281,7 @@ if (import.meta.hot) {
       </div>
     </div>
     <div id="export-container" ref="export-container" relative>
-      <div print:hidden fixed right-5 bottom-5 bg-main px2 py0 shadow z-1000 border="~ main rounded">
+      <div print:hidden fixed right-5 bottom-5 px2 py0 z-label slidev-glass-effect>
         <span op75>Rendering as {{ capturedImages ? 'Captured Images' : 'DOM' }} </span>
       </div>
       <div v-show="!capturedImages" id="export-content" ref="export-content">

package/pages/overview.vue

@@ -135,7 +135,7 @@ onMounted(() => {
             </button>
             <div
               v-if="route.meta?.slide?.title"
-              class="pointer-events-none select-none absolute left-110% backdrop-blur-8 top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
+              class="pointer-events-none select-none absolute left-110% top-50% translate-y--50% ws-nowrap z-label px2 slidev-glass-effect transition duration-400 op0 group-hover:op100"
               :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
             >
               {{ route.meta?.slide?.title }}

package/styles/index.css

@@ -10,7 +10,7 @@ body,
   overflow: hidden;
   print-color-adjust: exact;
   -webkit-print-color-adjust: exact;
-  @apply font-sans;
+  --uno: font-sans bg-main;
 }
 
 html {

package/uno.config.ts

@@ -30,6 +30,17 @@ export default defineConfig({
     'abs-b': 'absolute bottom-0 left-0 right-0',
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
+
+    'z-drawing': 'z-10',
+    'z-camera': 'z-15',
+    'z-dragging': 'z-18',
+    'z-menu': 'z-20',
+    'z-label': 'z-40',
+    'z-nav': 'z-50',
+    'z-context-menu': 'z-60',
+    'z-modal': 'z-70',
+
+    'slidev-glass-effect': 'shadow-xl backdrop-blur-8 border border-main bg-main bg-opacity-75!',
   },
   // Slidev Specific Variants, probably extrat to a preset later
   variants: [