Restyle components with a formal corporate theme

app.vue

@@ -4,8 +4,8 @@
     <ShAnnouncement :class="['z-50', route.path !== '/' ? '' : 'sticky w-full top-0']" />
     <AppHeader v-if="route.path !== '/'" class="flex py-4" title="OMA">
       <template v-slot:logo>
-        <img v-if="computedLogoSrc" src="/logo-dark.png" alt="logo-dark" class="shrink-0 grow-0 h-16" />
-        <img v-if="!computedLogoSrc" src="/logo-light.png" alt="logo-light" class="shrink-0 grow-0 h-16" />
+        <img v-if="computedLogoSrc" src="/logo-dark.png" alt="logo-dark" class="shrink-0 grow-0 h-16 w-[265px] object-contain object-left" />
+        <img v-if="!computedLogoSrc" src="/logo-light.png" alt="logo-light" class="shrink-0 grow-0 h-16 w-[265px] object-contain object-left" />
         <!-- <img v-if="windowWidth < 640" src="/logo.png" alt="Logo" class="h-16" /> -->
       </template>
     </AppHeader>
@@ -271,20 +271,25 @@ a:hover {
 /* Heading anchor links keep the heading color instead of the link color */
 :is(h1, h2, h3, h4, h5, h6) > a,
 :is(h1, h2, h3, h4, h5, h6) > a:hover,
-.dark :is(h1, h2, h3, h4, h5, h6) > a,
-.dark :is(h1, h2, h3, h4, h5, h6) > a:hover,
 .prose :is(h1, h2, h3, h4, h5, h6) > a,
 .prose :is(h1, h2, h3, h4, h5, h6) > a:hover,
+.dark :is(h1, h2, h3, h4, h5, h6) > a,
+.dark :is(h1, h2, h3, h4, h5, h6) > a:hover,
 .dark .prose :is(h1, h2, h3, h4, h5, h6) > a,
 .dark .prose :is(h1, h2, h3, h4, h5, h6) > a:hover {
   color: inherit;
 }
 
-/* Explicit light-mode heading colour so inherited anchors/hash don't pick up the link blue */
+/* Light mode headings use the regular dark text color (dark mode keeps golden, see above) */
 :root:not(.dark) .prose :is(h1, h2, h3, h4, h5, h6) {
   color: theme('colors.neutral.900');
 }
 
+/* Heading anchor hover: heading slides right, a hash fades in where it used to be */
+:is(h1, h2, h3, h4, h5, h6):has(> a) {
+  position: relative;
+}
+
 /* Heading anchor hover: heading slides right, a hash fades in where it used to be */
 :is(h1, h2, h3, h4, h5, h6) > a {
   position: relative;
@@ -324,10 +329,11 @@ a:hover {
 /* End of Links */
 
 /* CodeBlock */
+/* Inline code */
 code {
-  border: 3px solid #dcdcdc;
-  border-radius: 6px;
-  background-color: #dcdcdc;
+  border-radius: 4px;
+  background-color: theme('colors.golden / 45%');
+  color: theme('colors.neutral.900');
   padding: 2px 6px;
   position: relative;
 }
@@ -339,61 +345,74 @@ code::after {
 }
 
 .dark code {
-  border: 3px solid #414141;
-  border-radius: 6px;
-  background-color: #414141;
-  padding: 2px 6px;
-  color: #ffffff;
+  background-color: theme('colors.neutral.800');
+  color: theme('colors.golden');
 }
 
-pre code {
-  border: none;
-  border-radius: 0;
-  background: none;
-  padding: 0;
+pre {
+  position: relative;
+}
+
+/* Fenced code blocks: tinted golden surface in light mode, dark neutral surface in dark mode.
+   Token colors come from the github-light / github-dark Shiki themes (see nuxt.config.ts). */
+.prose pre {
+  position: relative;
+  padding: 2.5rem 1.25rem 1rem;
+  border: 1px solid theme('colors.golden');
+  border-radius: 6px;
+  background-color: theme('colors.golden / 20%');
+  color: theme('colors.neutral.800');
   box-shadow: none;
 }
 
+.dark .prose pre {
+  border-color: theme('colors.neutral.700');
+  background-color: theme('colors.neutral.900');
+  color: theme('colors.neutral.100');
+}
+
+pre code,
 .dark pre code {
   border: none;
   border-radius: 0;
   background: none;
   padding: 0;
   box-shadow: none;
-  color: #ffffff;
+  color: inherit;
 }
+
 .copy-btn {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  padding: 0.5rem 1rem;
+  background-color: theme('colors.golden');
+  color: theme('colors.neutral.900');
+  border: 1px solid theme('colors.golden');
+  padding: 0.25rem 0.75rem;
   border-radius: 4px;
-  font-size: 1rem;
+  font-size: 0.875rem;
   cursor: pointer;
-  opacity: 0.8;
-  transition: opacity 0.3s ease-in-out;
+  opacity: 0.85;
+  transition: opacity 0.2s ease-in-out;
 }
 
-.copy-btn:hover {
-  opacity: 1;
+.dark .copy-btn {
+  background-color: transparent;
+  color: theme('colors.golden');
 }
 
-pre {
-  position: relative;
-  padding-top: 2.5rem; /* Extra space for the button */
+.copy-btn:hover {
+  opacity: 1;
 }
 /* End of CodeBlock */
 
 /* Blockquote */
 .light blockquote {
-  background-color: theme('colors.neutral.200');
-  border-radius: 10px;
+  background-color: theme('colors.golden / 30%');
+  border-radius: 6px;
   padding: 1rem;
-  border-left: 4px solid #858585;
-  color: #333;
+  border-left: 4px solid theme('colors.oma-yellow.500');
+  color: theme('colors.neutral.800');
   font-style: italic;
 }
 
@@ -402,17 +421,17 @@ pre {
 }
 
 .dark blockquote {
-  background-color: theme('colors.neutral.700');
-  border-radius: 10px;
+  background-color: theme('colors.neutral.800');
+  border-radius: 6px;
   padding: 1rem;
-  border-left: 4px solid #ccc;
+  border-left: 4px solid theme('colors.golden');
   margin: 1.5rem 0;
   font-style: italic;
 }
 
 .dark blockquote p {
   margin: 0;
-  color: white;
+  color: theme('colors.golden');
 }
 
 /* End of Blockquote */

components/app/menus.vue

@@ -110,12 +110,12 @@ const config = {
     rootMenuLabel: 'font-medium text-xl text-gray-900 dark:text-gray-100',
     rootActive: 'relative after:content-[\'\'] after:absolute after:left-0 after:-bottom-1 after:w-full after:h-[5px] after:bg-oma-yellow-500 after:dark:bg-oma-yellow-500 after:rounded-full',
     submenuActive: 'relative after:content-[\'\'] after:absolute after:left-0 after:-bottom-1 after:w-full after:h-[8px] after:bg-oma-yellow-500 after:dark:bg-oma-yellow-500 after:rounded-sm',
-    submenuUl: 'absolute top-10 left-0 flex-col shadow-lg mt-0 z-10 bg-white dark:bg-neutral-800 rounded-tl-none rounded-b-lg rounded-tr-lg hover:rounded-tl-lg',
+    submenuUl: 'absolute top-10 left-0 flex-col shadow-lg mt-0 z-10 bg-white dark:bg-neutral-800 rounded-lg overflow-hidden',
     ul: 'absolute left-full top-0 flex-col shadow-lg rounded-lg mt-0 z-10 bg-white dark:bg-gray-800',
-    button: 'w-full flex items-center px-4 py-2 text-left hover:rounded-lg hover:bg-gray-200 dark:hover:bg-oma-yellow-700 transition duration-200',
+    button: 'w-full flex items-center px-4 py-2 text-left hover:rounded-lg hover:bg-golden/[0.45] dark:hover:bg-golden/[0.2] transition-colors duration-200',
     label: 'font-small text-gray-900 dark:text-gray-100 truncate',
     contentIcon: '',
-    chevronIcon: 'ml-auto dark:text-white group-hover/rootMenuButton:rotate-90 group-hover/rootMenuButton:scale-125 group-hover/item:rotate-90 group-hover/item:scale-125 group-hover/label:rotate-90 transition-transform duration-200',
+    chevronIcon: 'ml-auto text-gray-900 dark:text-gray-100 group-hover/rootMenuButton:rotate-90 group-hover/rootMenuButton:scale-125 group-hover/item:rotate-90 group-hover/item:scale-125 group-hover/label:rotate-90 transition-transform duration-200',
 }
 
 const props = withDefaults(

components/app/side-menu.vue

@@ -5,7 +5,7 @@
         <ul class="">
           <li v-for="(link, index) in sideMenuItems" :key="index">
             <div :class="[ui.shadow, isActive(link.to) ? ui.active : ui.normal]">
-              <NuxtLink :to="link.to" :class="isActive(link.to) ? ui.link.active : ui.link.normal" class="dark:hover:text-oma-blue-100">
+              <NuxtLink :to="link.to" :class="isActive(link.to) ? ui.link.active : ui.link.normal" class="dark:hover:text-golden">
                 <span :class="[getIndent(link.depth), 'text-nowrap w-full']">{{ link.title }}</span>
               </NuxtLink>
             </div>
@@ -21,12 +21,12 @@ const route = useRoute()
 
 const config = {
   wrapper: '',
-  shadow: 'hover:bg-primary-200/[0.7] dark:hover:bg-primary-600 rounded-r-lg hover:rounded-lg p-1',
-  active: 'block border-l-4 rounded-e-sm rounded-s-sm dark:border-oma-blue-200 border-oma-blue-400 bg-primary-200 dark:bg-primary-600/[0.7]',
-  normal: 'block border-l-2 dark:border-neutral-700 border-gray-100-ml-px w-full',
+  shadow: 'hover:bg-golden/[0.3] dark:hover:bg-golden/[0.1] rounded-r-md hover:rounded-md p-1 transition-colors duration-200',
+  active: 'block border-l-4 rounded-e-sm rounded-s-sm border-oma-yellow-500 dark:border-golden bg-golden/[0.45] dark:bg-golden/[0.15]',
+  normal: 'block border-l-2 border-golden/[0.6] dark:border-neutral-700 w-full',
   link: {
-    active: 'text-oma-blue-500 dark:text-oma-blue-200 font-bold',
-    normal: 'w-full block text-black dark:text-golden'
+    active: 'text-neutral-900 dark:text-golden font-bold',
+    normal: 'w-full block text-neutral-800 dark:text-golden/[0.85]'
   }
 };
 

components/app/toc.vue

@@ -3,7 +3,7 @@
     <nav>
       <button class="flex sticky top-0 backdrop-blur items-center gap-1.5 lg:cursor-text lg:select-text w-full group">
         <span class="font-semibold text-sm/6 truncate dark:text-white/80">
-          <b class="dark:text-golden">Table of Contents</b>
+          <b class="text-neutral-900 dark:text-golden">Table of Contents</b>
         </span>
       </button>
       <ul class="space-y-1 lg:block -ml-2">
@@ -12,24 +12,24 @@
           :style="{ paddingLeft: `${link.depth * 0.75}rem` }">
           <ULink :id="`toc-${link.id}`" :to="`${page.path}#${link.id}`"
             :class="[ui.shadow, isActive(link.id) ? ui.link.active : ui.link.normal]"
-            class="not-prose pl-1 pr-1 text-black dark:text-golden">
+            class="not-prose pl-1 pr-1">
             {{ link.text }}
           </ULink>
         </li>
       </ul>
     </nav>
-    <hr class="w-1/2 mx-auto" />
+    <hr class="w-1/2 mx-auto border-golden dark:border-golden/[0.3]" />
   </div>
 </template>
 
 <script setup lang="ts">
 const config = {
-  shadow: 'hover:bg-primary-200/[0.7] dark:hover:bg-primary-600 dark:hover:text-oma-blue-100 hover:rounded-lg pt-2 pb-2',
+  shadow: 'hover:bg-golden/[0.3] dark:hover:bg-golden/[0.1] hover:rounded-md pt-2 pb-2 transition-colors duration-200',
   active: 'p-2',
   normal: 'w-full ',
   link: {
-    active: 'text-oma-blue-500 dark:text-oma-blue-200 font-bold',
-    normal: 'w-full block text-black dark:text-golden hover:text-black dark:hover:text-golden'
+    active: 'text-neutral-900 dark:text-golden font-bold border-l-2 border-oma-yellow-500 dark:border-golden',
+    normal: 'w-full block text-neutral-800 dark:text-golden/[0.85] hover:text-neutral-900 dark:hover:text-golden'
   }
 };
 

components/content/sh-alert.vue

@@ -3,7 +3,9 @@
         <div :class="ui.base">
             <UIcon :class="['size-7', iconColor]" :name="icon" dynamic></UIcon>
         </div>
-        <slot />
+        <div :class="ui.content">
+            <slot />
+        </div>
     </div>
 </template>
 

components/content/sh-announcement.vue

@@ -16,11 +16,11 @@
 import { useQueryCollection } from '~/composables/nuxt/query/useQueryCollection';
 
 const config = {
-    wrapper: 'p-1 sm:p-3 z-50 bg-neutral-400/70 dark:bg-black border dark:border-neutral-500 rounded-3xl shadow-xl', //bg-golden dark:bg-oma-yellow-500
+    wrapper: 'p-1 sm:p-3 z-50 bg-golden/60 dark:bg-neutral-900 border border-golden dark:border-golden/60 rounded-md shadow-sm',
     base: 'flex items-center justify-between',
     content: 'content flex-1 text-center text-xl',
     linkIcon: 'inline-block',
-    button: 'absolute hover:bg-inherit hover:rounded-lg right-0 hover:scale-125 duration-700 z-50',
+    button: 'absolute hover:bg-inherit hover:rounded right-0 duration-200 z-50',
     icon: 'text-3xl mr-4 dark:text-white',
 };
 

components/content/sh-badge.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[ui.wrapper, 'w-fit rounded-3xl px-2 py-1']">
+  <div :class="[ui.wrapper, 'w-fit rounded px-2 py-1']">
     <slot />
   </div>
 </template>

components/content/sh-card.vue

@@ -32,7 +32,7 @@
         </div>
         <div :class="ui.text">
           <MDC v-if="text" :value="text" />
-          <div v-else-if="excerpt" class="dark:text-golden">
+          <div v-else-if="excerpt" class="dark:text-neutral-300">
             <ContentRenderer :value="excerpt" />
           </div>
         </div>

components/content/sh-dynamic-table.vue

@@ -16,7 +16,7 @@
             </select>
           </div>
           <div class="pl-4">
-            <button @click="downloadCSV" class="hover:scale-125" title="Download CSV file">
+            <button @click="downloadCSV" class="hover:text-neutral-900 dark:hover:text-golden" title="Download CSV file">
               <UIcon name="i-carbon-download" />
             </button>
           </div>
@@ -31,7 +31,7 @@
           <template #quick-filters>
             <div :class="getQuickFilterClass()">
               <template v-for="column in sortedFilters">
-                <div class="rounded-lg border" v-if="column.filter">
+                <div class="rounded border border-neutral-300 dark:border-neutral-700" v-if="column.filter">
                   <UDivider :label="column.title" class="py-4 overflow-x-auto" />
                   <ul class="max-h-36 overflow-auto">
                     <li v-for="label in Object.keys(stats[column.name]).sort()" :data-filter-key="column.name"

components/content/sh-list-cards.vue

@@ -24,20 +24,20 @@
           <div v-if="selectedTags.length > 0" class="">{{ selectedTags.length }}</div>
           <UIcon name="system-uicons:tags" class="ml-3 text-3xl" />
         </div>
-        <USlideover v-model="isOpen" :ui="{ overlay: { background: 'dark:bg-golden/[0.2] backdrop-blur-sm' } }">
+        <USlideover v-model="isOpen" :ui="{ overlay: { background: 'dark:bg-black/50 backdrop-blur-sm' } }">
           <UCard class="flex flex-col flex-1"
             :ui="{ background: 'dark:bg-neutral-900', body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-neutral-100 dark:divide-neutral-800' }">
             <template #header>
               <div class="flex h-8 justify-between items-center">
                 <div class="dark:text-golden text-xl">{{ 'Tags for ' + slideoverTitle }}</div>
                 <div class="flex items-center">
                   <UIcon name="material-symbols-light:right-panel-close" dynamic @click="isOpen = false"
-                    class="text-4xl mb-2 text-slate-600 dark:text-golden hover:text-oma-red-500 dark:hover:text-oma-red-500 cursor-pointer" />
+                    class="text-4xl mb-2 text-slate-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-golden cursor-pointer" />
                 </div>
               </div>
             </template>
             <div class="h-full">
-              <div class="block flex-col space-y-3 text-golden">
+              <div class="block flex-col space-y-3 text-neutral-700 dark:text-neutral-300">
                 <span v-for="tag in tags" :key="tag" @click="toggleTag(tag)" :class="[ui.tags.list,
                 {
                   [ui.tags.selected]: selectedTags.includes(tag)
@@ -56,7 +56,7 @@
               </div>
             </div>
             <template #footer>
-              <div class="flex h-8 justify-center text-golden italic">{{ 'Number of selected tags: ' + selectedTags.length }}</div>
+              <div class="flex h-8 justify-center text-neutral-700 dark:text-golden italic">{{ 'Number of selected tags: ' + selectedTags.length }}</div>
             </template>
           </UCard>
         </USlideover>

content/70.oma-events/7020.webinar-workshops.md

@@ -29,7 +29,7 @@ text: |
 ::ShButton
 ---
 ui:
-  wrapper: shadow-md bg-oma-blue-500 hover:bg-oma-blue-800 text-white dark:text-white font-semibold ring-2 ring-oma-blue-800 dark:bg-oma-blue-400 dark:hover:bg-oma-blue-600 dark:ring-oma-blue-100 hover:saturate-100 hover:underline underline-offset-4 decoration-2 hover:-translate-y-0.5 hover:shadow-lg transition duration-200
+  wrapper: shadow-md bg-oma-blue-500 hover:bg-oma-blue-800 dark:text-white dark:hover:text-white font-semibold dark:bg-oma-blue-400 dark:hover:bg-oma-blue-600 dark:ring-oma-blue-100 hover:saturate-100 hover:underline underline-offset-4 decoration-2 hover:-translate-y-0.5 hover:shadow-lg transition duration-200
 urlButton: https://community.openmobilealliance.org/lwm2m-water-interoperability-readiness-workshop
 target: _blank
 colorButton: oma-blue

nuxt.config.ts

@@ -27,7 +27,8 @@ export default defineNuxtConfig({
     },
     highlight: {
       theme: {
-        default: 'github-dark',
+        default: 'github-light',
+        dark: 'github-dark',
       },
     },
     build: {

ui.config/sh-action-card.ts

@@ -1,10 +1,10 @@
 export default {
-    wrapper: "mt-6 dark:bg-inherit border-2 border-neutral-300 dark:border-neutral-500 mx-auto p-4 rounded-xl bg-no-repeat bg-cover size-full max-w-4xl max-h-3xl",
+    wrapper: "mt-6 dark:bg-inherit border border-neutral-300 dark:border-neutral-700 mx-auto p-4 rounded-md shadow-sm bg-no-repeat bg-cover size-full max-w-4xl max-h-3xl",
     image: "col-start-1 col-span-1 size-4/6 self-center place-self-center row-span-2 w-fit h-fit",
-    title: "title text-2xl text-black dark:text-white text-center font-bold",
-    subtitle: "subtitle text-lg text-center font-semibold text-gray-400 -mt-8",
-    text: "text text-md text-center font-light not-prose",
-    button: "hover:drop-shadow-xl hover:saturate-200 col-start-3 col-span-1 mx-auto mb-4 not-prose",
+    title: "title text-2xl text-neutral-900 dark:text-neutral-100 text-center font-semibold",
+    subtitle: "subtitle text-lg text-center font-semibold text-neutral-500 dark:text-neutral-400 -mt-8",
+    text: "text text-md text-center font-normal not-prose",
+    button: "col-start-3 col-span-1 mx-auto mb-4 not-prose",
     colorButton: "black",
     icon: "self-center place-self-center row-start-1 row-span-2 col-start-5 col-span-1",
     // Default Tailwind CSS values