fix(design-system): docs after tailwind migration

packages/design-system/docs/.vitepress/components/LiveCodeBlock.vue

@@ -5,13 +5,15 @@
         @click="() => (previewActive = true)"
         appearance="raw"
         :class="{ active: previewActive }"
+        class="py-2 px-4"
         no-hover
         >Preview</oc-button
       >
       <oc-button
         @click="() => (previewActive = false)"
         appearance="raw"
         :class="{ active: !previewActive }"
+        class="py-2 px-4"
         no-hover
         >Code</oc-button
       >
@@ -85,14 +87,27 @@ onMounted(async () => {
 })
 </script>
 
-<style lang="scss" scoped>
-.live-code-block-header {
-  border-bottom: 1px solid var(--vp-c-divider);
-  button {
-    border-radius: 0;
+<style lang="scss">
+.live-code-block {
+  // some vitepress styles need to be overwritten to properly display our components
+  .oc-modal-title > h2 {
+    border: 0 !important;
   }
-  button.active {
-    border-bottom: 2px solid var(--vp-c-brand-1);
+  ol.oc-pagination-list {
+    list-style: none !important;
+  }
+  p.oc-recipient-name {
+    line-height: unset !important;
+  }
+
+  &-header {
+    border-bottom: 1px solid var(--vp-c-divider);
+    button {
+      border-radius: 0;
+    }
+    button.active {
+      border-bottom: 2px solid var(--vp-c-brand-1);
+    }
   }
 }
 </style>

packages/design-system/docs/.vitepress/config.ts

@@ -4,6 +4,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy'
 import Container from 'markdown-it-container'
 import path from 'path'
 import { generateJsonMetaData } from './generateJsonMetaData'
+import tailwindcss from '@tailwindcss/vite'
 
 const projectRootDir = searchForWorkspaceRoot(process.cwd())
 const stripScssMarker = '/* STYLES STRIP IMPORTS MARKER */'
@@ -26,6 +27,19 @@ export default defineConfig({
       }
     },
     css: {
+      postcss: {
+        plugins: [
+          {
+            postcssPlugin: 'remove-base-css',
+            Once(root, { result }) {
+              if (result.opts.from?.endsWith('theme-default/styles/base.css')) {
+                // remove the default VitePress base css because it would overwrite all Tailwind layers
+                root.removeAll()
+              }
+            }
+          }
+        ]
+      },
       preprocessorOptions: {
         scss: {
           additionalData: `
@@ -37,6 +51,7 @@ export default defineConfig({
       }
     },
     plugins: [
+      tailwindcss(),
       generateJsonMetaData(),
       {
         name: '@opencloud-eu/vite-plugin-strip-css',

packages/design-system/docs/.vitepress/theme/custom.scss

@@ -3,22 +3,23 @@
   --vp-c-brand-1: var(--oc-role-secondary);
 }
 
+// re-apply some basic styling we removed during the build to avoid conflicts with tailwind
 .title span {
   font-size: 14px;
 }
 
-// some vitepress styles need to be overwritten to properly display our components
-button.oc-button-passive-outline:focus:not(:focus-visible) {
-  outline: 1px solid var(--oc-role-outline) !important;
+#VPSidebarNav .VPLink p {
+  padding: 0;
+  margin: 4px 0;
 }
-.oc-modal-title > h2 {
-  border: 0 !important;
-}
-ol.oc-pagination-list {
-  list-style: none !important;
+
+.vp-doc :where(p, li, div):not(.live-code-block :where(p, li, div)) {
+  font-size: 16px;
 }
-p.oc-recipient-name {
-  line-height: unset !important;
+
+html * {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
 @font-face {

packages/design-system/docs/.vitepress/theme/index.ts

@@ -1,4 +1,6 @@
+import './tailwind.css'
 import DefaultTheme from 'vitepress/theme-without-fonts'
+import './../../../src/styles/layers.css'
 import { createGettext } from 'vue3-gettext'
 import * as components from './../../../src/components'
 import * as directives from './../../../src/directives'

packages/design-system/docs/.vitepress/theme/tailwind.css

@@ -0,0 +1,4 @@
+@import '@opencloud-eu/design-system/tailwind';
+
+/* we need to manually include the component styles because they live a few levels above */
+@source "./../../../src/components";

packages/design-system/docs/components/OcRecipient/OcRecipient.md

@@ -20,7 +20,7 @@ The most basic use case involves a `recipient` object with a `name` property.
 
 ```html
 <div class="w-[25%]">
-  <oc-recipient :recipient="{ name: 'Admin' }" />
+  <oc-recipient :recipient="{ name: 'Admin', icon: { name: 'user', label: 'User' } }" />
 </div>
 ```
 
@@ -39,7 +39,8 @@ The component can show an avatar in front of the recipient's name.
 			name: 'Admin',
 			hasAvatar: true,
 			avatar: 'https://picsum.photos/50/50?image=550',
-			isLoadingAvatar: false
+			isLoadingAvatar: false,
+			icon: { name: 'user', label: 'User' }
 		}"
 	/>
 </div>
@@ -55,7 +56,7 @@ The component provides an `append` slot to add additional content.
 
 ```html{3-5}
 <div class="w-[25%]">
-	<oc-recipient :recipient="{ name: 'Admin' }">
+	<oc-recipient :recipient="{ name: 'Admin', icon: { name: 'user', label: 'User' } }">
 		<template #append>
 			<span class="text-sm">Additional content</span>
 		</template>

packages/design-system/package.json

@@ -121,6 +121,7 @@
   },
   "devDependencies": {
     "@opencloud-eu/web-test-helpers": "workspace:*",
+    "@tailwindcss/vite": "^4.1.11",
     "@vitejs/plugin-vue": "6.0.1",
     "clean-publish": "^5.0.0",
     "glob": "^11.0.0",
@@ -133,6 +134,7 @@
     "sass-resources-loader": "^2.2.5",
     "style-dictionary": "^5.0.0",
     "style-value-types": "^5.0.0",
+    "tailwindcss": "^4.1.11",
     "tinycolor2": "^1.6.0",
     "url": "^0.11.3",
     "vite": "^6.0.9",

packages/design-system/src/styles/tailwind.css

@@ -1,6 +1,8 @@
 @import 'tailwindcss';
 
 @theme {
+  --font-sans: 'OpenCloud', 'Inter', sans-serif;
+
   --spacing: 4px;
   --breakpoint-xs: 580px;
   --breakpoint-sm: 640px;