diff --git a/doc/contextmenu/TemplateDoc.vue b/doc/contextmenu/TemplateDoc.vue
index db624c5e4..6e7524ab1 100644
--- a/doc/contextmenu/TemplateDoc.vue
+++ b/doc/contextmenu/TemplateDoc.vue
@@ -29,7 +29,7 @@
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
@@ -105,7 +105,7 @@ export default {
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
             <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
         </a>
     </template>
@@ -140,7 +140,7 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
@@ -230,7 +230,7 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index 7c8b8c469..70c931299 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -23,7 +23,7 @@
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
@@ -111,7 +111,7 @@ export default {
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
             <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
         </a>
     </template>
@@ -144,7 +144,7 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
@@ -243,7 +243,7 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
diff --git a/doc/panelmenu/TemplateDoc.vue b/doc/panelmenu/TemplateDoc.vue
index 0e9544dff..9b75c3dc2 100644
--- a/doc/panelmenu/TemplateDoc.vue
+++ b/doc/panelmenu/TemplateDoc.vue
@@ -9,7 +9,7 @@
                     <span :class="[item.icon, 'text-primary']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
         </PanelMenu>
@@ -92,7 +92,7 @@ export default {
             <span :class="[item.icon, 'text-primary']" />
             <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
         </a>
     </template>
 </PanelMenu>
@@ -106,7 +106,7 @@ export default {
                     <span :class="[item.icon, 'text-primary']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
         </PanelMenu>
@@ -194,7 +194,7 @@ export default {
                     <span :class="[item.icon, 'text-primary']" />
                     <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                 </a>
             </template>
         </PanelMenu>
diff --git a/doc/tieredmenu/TemplateDoc.vue b/doc/tieredmenu/TemplateDoc.vue
index a61d434c3..b9c19299e 100644
--- a/doc/tieredmenu/TemplateDoc.vue
+++ b/doc/tieredmenu/TemplateDoc.vue
@@ -9,7 +9,7 @@
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
@@ -109,7 +109,7 @@ export default {
             <span :class="item.icon" />
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-            <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
             <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
         </a>
     </template>
@@ -124,7 +124,7 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
@@ -229,7 +229,7 @@ export default {
                     <span :class="item.icon" />
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
-                    <span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
+                    <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
                     <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>