diff --git a/packages/design-system/docs/.vitepress/components/LiveCodeBlock.vue b/packages/design-system/docs/.vitepress/components/LiveCodeBlock.vue index 68b86bae0d..2de16f7368 100644 --- a/packages/design-system/docs/.vitepress/components/LiveCodeBlock.vue +++ b/packages/design-system/docs/.vitepress/components/LiveCodeBlock.vue @@ -5,6 +5,7 @@ @click="() => (previewActive = true)" appearance="raw" :class="{ active: previewActive }" + class="py-2 px-4" no-hover >Preview @@ -12,6 +13,7 @@ @click="() => (previewActive = false)" appearance="raw" :class="{ active: !previewActive }" + class="py-2 px-4" no-hover >Code @@ -85,14 +87,27 @@ onMounted(async () => { }) - diff --git a/packages/design-system/docs/.vitepress/config.ts b/packages/design-system/docs/.vitepress/config.ts index 8197f3570a..2085c6f108 100644 --- a/packages/design-system/docs/.vitepress/config.ts +++ b/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', diff --git a/packages/design-system/docs/.vitepress/theme/custom.scss b/packages/design-system/docs/.vitepress/theme/custom.scss index fa4847097a..3d0bbb21dc 100644 --- a/packages/design-system/docs/.vitepress/theme/custom.scss +++ b/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 { diff --git a/packages/design-system/docs/.vitepress/theme/index.ts b/packages/design-system/docs/.vitepress/theme/index.ts index cf3c6db268..3d17e936af 100644 --- a/packages/design-system/docs/.vitepress/theme/index.ts +++ b/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' diff --git a/packages/design-system/docs/.vitepress/theme/tailwind.css b/packages/design-system/docs/.vitepress/theme/tailwind.css new file mode 100644 index 0000000000..f8f62a935c --- /dev/null +++ b/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"; diff --git a/packages/design-system/docs/components/OcRecipient/OcRecipient.md b/packages/design-system/docs/components/OcRecipient/OcRecipient.md index 0e83d2b598..23cbc6b08a 100644 --- a/packages/design-system/docs/components/OcRecipient/OcRecipient.md +++ b/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
- +
``` @@ -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' } }" /> @@ -55,7 +56,7 @@ The component provides an `append` slot to add additional content. ```html{3-5}
- + diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 1d93a42db2..4d90c7f983 100644 --- a/packages/design-system/package.json +++ b/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", diff --git a/packages/design-system/src/styles/tailwind.css b/packages/design-system/src/styles/tailwind.css index 12e05ae5d2..afab72f28e 100644 --- a/packages/design-system/src/styles/tailwind.css +++ b/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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 074ce2cce4..e29679b50b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -239,6 +239,9 @@ importers: '@opencloud-eu/web-test-helpers': specifier: workspace:* version: link:../web-test-helpers + '@tailwindcss/vite': + specifier: ^4.1.11 + version: 4.1.11(vite@6.3.5(@types/node@22.16.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.90.0)(yaml@2.8.1)) '@vitejs/plugin-vue': specifier: 6.0.1 version: 6.0.1(vite@6.3.5(@types/node@22.16.0)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.90.0)(yaml@2.8.1))(vue@3.5.18(typescript@5.9.2)) @@ -275,6 +278,9 @@ importers: style-value-types: specifier: ^5.0.0 version: 5.1.2 + tailwindcss: + specifier: ^4.1.11 + version: 4.1.11 tinycolor2: specifier: ^1.6.0 version: 1.6.0