fix: tailwind regressions #3

packages/design-system/src/components/OcModal/OcModal.vue

@@ -7,7 +7,7 @@
         :id="elementId"
         ref="ocModal"
         :class="classes"
-        class="border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl"
+        class="border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl"
         tabindex="0"
         role="dialog"
         aria-modal="true"

packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`OcModal > displays input 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 z-[var(--z-index-modal)] bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Create new folder</h2>
       </div>
@@ -26,7 +26,7 @@ exports[`OcModal > displays input 1`] = `
 exports[`OcModal > displays loading state 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 z-[var(--z-index-modal)] bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
@@ -49,7 +49,7 @@ exports[`OcModal > displays loading state 1`] = `
 exports[`OcModal > matches snapshot 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 z-[var(--z-index-modal)] bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
@@ -72,7 +72,7 @@ exports[`OcModal > matches snapshot 1`] = `
 exports[`OcModal > overrides props message with slot 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 z-[var(--z-index-modal)] bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border z-[calc(var(--z-index-modal)+1)] border-role-outline rounded-lg focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>

packages/web-pkg/src/components/SearchBarFilter.vue

@@ -19,10 +19,11 @@
           <oc-list>
             <li v-for="(option, index) in locationOptions" :key="index">
               <oc-button
-                appearance="raw"
+                :appearance="option.id === currentSelection.id ? 'filled' : 'raw-inverse'"
+                :color-role="option.id === currentSelection.id ? 'secondaryContainer' : 'surface'"
+                :no-hover="option.id === currentSelection.id"
                 size="medium"
                 class="flex items-center w-full py-1 px-2"
-                :class="{ 'oc-role-secondary-container': option.id === currentSelection.id }"
                 justify-content="space-between"
                 :disabled="!option.enabled"
                 :data-test-id="option.id"

packages/web-pkg/src/components/TextEditor/TextEditor.vue

@@ -1,5 +1,8 @@
 <template>
-  <div id="text-editor-container" class="h-full">
+  <div
+    id="text-editor-container"
+    class="h-full [&_.md-editor-preview]:!font-(family-name:--oc-font-family)"
+  >
     <md-preview
       v-if="isReadOnly"
       id="text-editor-preview-component"
@@ -18,6 +21,7 @@
     <md-editor
       v-else
       id="text-editor-component"
+      class="[&_.cm-content]:!font-(family-name:--oc-font-family)"
       :model-value="currentContent"
       no-katex
       no-mermaid

packages/web-runtime/src/pages/missingOrInvalidConfig.vue

@@ -6,39 +6,31 @@
     <oc-card
       :logo-url="logoImg"
       :title="$gettext('Missing or invalid config')"
-      body-class="w-sm text-center"
+      body-class="text-center"
       class="bg-role-surface-container rounded-lg"
     >
       <p v-text="$gettext('Please check if the file config.json exists and is correct.')" />
       <p v-text="$gettext('Also, make sure to check the browser console for more information.')" />
       <template #footer>
-        <p v-text="footerSlogan" />
+        <p v-if="footerSlogan" v-text="footerSlogan" />
       </template>
     </oc-card>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+<script setup lang="ts">
+import { computed, unref } from 'vue'
 import { useThemeStore } from '@opencloud-eu/web-pkg'
 import { useHead } from '../composables/head'
 import { storeToRefs } from 'pinia'
+// import ods component because ods is not initialized in case of a missing or invalid config
+import { OcCard } from '@opencloud-eu/design-system/components'
 
-export default defineComponent({
-  name: 'MissingConfigPage',
-  setup() {
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
+const themeStore = useThemeStore()
+const { currentTheme } = storeToRefs(themeStore)
 
-    const logoImg = computed(() => unref(currentTheme)?.logo)
-    const footerSlogan = computed(() => unref(currentTheme)?.slogan)
+const logoImg = computed(() => unref(currentTheme)?.logo)
+const footerSlogan = computed(() => unref(currentTheme)?.slogan)
 
-    useHead()
-
-    return {
-      logoImg,
-      footerSlogan
-    }
-  }
-})
+useHead()
 </script>