fix: tailwind regressions

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

@@ -3,7 +3,7 @@
     <slot name="label">
       <label class="inline-block mb-0.5" :for="id">
         {{ label }}
-        <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
+        <span v-if="requiredMark" class="text-role-error" aria-hidden="true">*</span>
       </label>
     </slot>
     <div class="oc-color-input-wrapper relative max-m-5">
@@ -14,7 +14,7 @@
         :aria-invalid="ariaInvalid"
         class="oc-color-input oc-input rounded-sm py-0.5 focus:border focus:border-role-outline focus:outline-2 focus:outline-role-outline"
         :class="{
-          'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+          'oc-color-input-danger text-role-error focus:text-role-error border-role-error':
             !!errorMessage,
           'pr-6': showClearButton
         }"
@@ -38,7 +38,7 @@
       class="oc-color-input-message flex items-center text-sm mt-1 min-h-4.5"
       :class="{
         'oc-color-input-description text-role-on-surface-variant relative': !!descriptionMessage,
-        'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+        'oc-color-input-danger text-role-error focus:text-role-error border-role-error':
           !!errorMessage
       }"
     >
@@ -56,7 +56,7 @@
         :class="{
           'oc-color-input-description text-role-on-surface-variant flex items-center':
             !!descriptionMessage,
-          'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+          'oc-color-input-danger text-role-error focus:text-role-error border-role-error':
             !!errorMessage
         }"
         v-text="messageText"

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

@@ -3,7 +3,7 @@
     <slot name="label">
       <label class="inline-block mb-0.5" :for="id">
         {{ label }}
-        <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
+        <span v-if="requiredMark" class="text-role-error" aria-hidden="true">*</span>
       </label>
     </slot>
     <div class="flex items-center">
@@ -22,7 +22,7 @@
       <oc-button
         ref="inputBtnRef"
         :class="{
-          'oc-file-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
+          'oc-file-input-danger text-role-error focus:text-role-error': !!errorMessage
         }"
         :disabled="disabled"
         color-role="secondary"
@@ -52,7 +52,7 @@
       class="oc-file-input-message flex items-center text-sm mt-1 min-h-4.5"
       :class="{
         'oc-file-input-description text-role-on-surface-variant': !!descriptionMessage,
-        'oc-file-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
+        'oc-file-input-danger text-role-error focus:text-role-error': !!errorMessage
       }"
     >
       <oc-icon
@@ -68,7 +68,7 @@
         :id="messageId"
         :class="{
           'oc-file-input-description text-role-on-surface-variant': !!descriptionMessage,
-          'oc-file-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
+          'oc-file-input-danger text-role-error focus:text-role-error': !!errorMessage
         }"
         v-text="messageText"
       />

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

@@ -3,7 +3,7 @@
     <ol class="oc-pagination-list flex items-center flex-wrap m-0 gap-2">
       <li v-if="isPrevPageAvailable" class="oc-pagination-list-item">
         <router-link
-          class="oc-pagination-list-item-prev flex mr-2"
+          class="oc-pagination-list-item-prev flex mr-2 rounded-sm hover:bg-role-secondary hover:text-role-on-secondary [&_svg]:hover:!fill-role-on-secondary"
           :aria-label="$gettext('Go to the previous page')"
           :to="previousPageLink"
         >
@@ -13,7 +13,7 @@
       <li v-for="(page, index) in displayedPages" :key="index" class="oc-pagination-list-item">
         <component
           :is="pageComponent(page)"
-          class="oc-pagination-list-item-page py-1 px-2 text-role-on-surface rounded-sm hover:bg-role-secondary hover:text-role-on-secondary transition-colors duration-200 ease-in-out"
+          class="oc-pagination-list-item-page py-1 px-2 rounded-sm hover:bg-role-secondary hover:text-role-on-secondary transition-colors duration-200 ease-in-out"
           :class="pageClass(page)"
           v-bind="bindPageProps(page)"
         >
@@ -22,7 +22,7 @@
       </li>
       <li v-if="isNextPageAvailable" class="oc-pagination-list-item">
         <router-link
-          class="oc-pagination-list-item-next flex ml-2"
+          class="oc-pagination-list-item-next flex ml-2 rounded-sm hover:bg-role-secondary [&_svg]:hover:!fill-role-on-secondary"
           :aria-label="$gettext('Go to the next page')"
           :to="nextPageLink"
         >

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

@@ -2,7 +2,7 @@
   <div>
     <label v-if="!labelHidden" :aria-hidden="true" :for="id" class="inline-block mb-0.5">
       {{ label }}
-      <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
+      <span v-if="requiredMark" class="text-role-error" aria-hidden="true">*</span>
     </label>
     <oc-contextual-helper
       v-if="contextualHelper?.isEnabled"

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

@@ -2,30 +2,31 @@
   <component
     :is="type"
     class="oc-tag inline-flex items-center border gap-1"
-    :class="{
-      // rounded
-      'rounded-full px-2': rounded,
-      'rounded-lg': !rounded,
-      // size
-      'p-1 text-xs': size === 'small',
-      'py-1 px-2 text-sm min-h-6': size === 'medium',
-      'py-2 px-4 text-lg min-h-8': size === 'large',
-      // appearance
-      [`bg-role-surface text-role-${color} border-role-${color}`]: appearance === 'outline',
-      [`bg-role-${color} text-role-on-${color} border-role-on-${color}`]: appearance === 'filled',
-      // transition for links and buttons
-      'ease-in-out duration-200 transition-colors [&_svg]:ease-in-out [&_svg]:duration-200 [&_svg]:transition-colors':
-        ['link', 'button'].includes(type)
-    }"
+    :class="[
+      ...appearanceClasses,
+      {
+        // rounded
+        'rounded-full px-2': rounded,
+        'rounded-lg': !rounded,
+        // size
+        'p-1 text-xs': size === 'small',
+        'py-1 px-2 text-sm min-h-6': size === 'medium',
+        'py-2 px-4 text-lg min-h-8': size === 'large',
+        // transition for links and buttons
+        'ease-in-out duration-200 transition-colors [&_svg]:ease-in-out [&_svg]:duration-200 [&_svg]:transition-colors':
+          ['link', 'button'].includes(type)
+      }
+    ]"
     :to="to"
-    @click="$_ocTag_click"
+    @click="onClick"
   >
     <!-- @slot Content of the tag -->
     <slot />
   </component>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { RouteLocationRaw } from 'vue-router'
 
 export interface Props {
@@ -86,7 +87,40 @@ const {
 const emit = defineEmits<Emits>()
 defineSlots<Slots>()
 
-function $_ocTag_click(event: MouseEvent) {
+const appearanceClasses = computed(() => {
+  const classes: string[] = []
+
+  if (appearance === 'outline') {
+    classes.push('bg-role-surface')
+    switch (color) {
+      case 'primary':
+        classes.push('text-role-primary', 'border-role-primary')
+        break
+      case 'secondary':
+        classes.push('text-role-secondary', 'border-role-secondary')
+        break
+      case 'tertiary':
+        classes.push('text-role-tertiary', 'border-role-tertiary')
+        break
+    }
+    return classes
+  }
+
+  switch (color) {
+    case 'primary':
+      classes.push('bg-role-primary', 'text-role-on-primary', 'border-role-on-primary')
+      break
+    case 'secondary':
+      classes.push('bg-role-secondary', 'text-role-on-secondary', 'border-role-on-secondary')
+      break
+    case 'tertiary':
+      classes.push('bg-role-tertiary', 'text-role-on-tertiary', 'border-role-on-tertiary')
+      break
+  }
+  return classes
+})
+
+function onClick(event: MouseEvent) {
   emit('click', event)
 }
 </script>

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTag > uses correct component when type is specified 1`] = `
-"<button class="oc-tag inline-flex items-center border gap-1 rounded-lg py-1 px-2 text-sm min-h-6 bg-role-surface text-role-secondary border-role-secondary ease-in-out duration-200 transition-colors [&amp;_svg]:ease-in-out [&amp;_svg]:duration-200 [&amp;_svg]:transition-colors" to="">
+"<button class="oc-tag inline-flex items-center border gap-1 bg-role-surface text-role-secondary border-role-secondary rounded-lg py-1 px-2 text-sm min-h-6 ease-in-out duration-200 transition-colors [&amp;_svg]:ease-in-out [&amp;_svg]:duration-200 [&amp;_svg]:transition-colors" to="">
   <!-- @slot Content of the tag -->
 </button>"
 `;

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

@@ -3,7 +3,7 @@
     <slot name="label">
       <label class="inline-block mb-0.5" :for="id">
         {{ label }}
-        <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
+        <span v-if="requiredMark" class="text-role-error" aria-hidden="true">*</span>
       </label>
     </slot>
     <div class="relative">
@@ -46,7 +46,7 @@
       class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5"
       :class="{
         'oc-text-input-description text-role-on-surface-variant relative': showDescriptionMessage,
-        'oc-text-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+        'oc-text-input-danger text-role-error focus:text-role-error border-role-error':
           showErrorMessage
       }"
     >
@@ -62,7 +62,7 @@
         <span
           v-if="showErrorMessage"
           :id="messageId"
-          class="oc-text-input-danger text-role-on-error focus:text-role-on-error border-role-error"
+          class="oc-text-input-danger text-role-error focus:text-role-error border-role-error"
           v-text="errorMessage"
         />
       </template>

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

@@ -2,7 +2,7 @@
   <div
     class="oc-text-input-password-wrapper flex flex-row border rounded-sm"
     :class="{
-      'oc-text-input-password-wrapper-danger text-role-on-error focus:text-role-on-error border-role-error':
+      'oc-text-input-password-wrapper-danger text-role-error focus:text-role-error border-role-error':
         hasError,
       'border-role-surface outline-2 outline-role-outline': hasFocus,
       'border-role-outline': !hasFocus

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

@@ -8,8 +8,7 @@
       v-model="model"
       class="oc-textarea"
       :class="{
-        'oc-textarea-danger text-role-on-error focus:text-role-on-error border-role-error':
-          !!errorMessage
+        'oc-textarea-danger text-role-error focus:text-role-error border-role-error': !!errorMessage
       }"
       :aria-invalid="ariaInvalid"
     />
@@ -18,7 +17,7 @@
         :id="messageId"
         :class="{
           'oc-textarea-description text-role-on-surface-variant': !!descriptionMessage,
-          'oc-textarea-danger text-role-on-error focus:text-role-on-error border-role-error':
+          'oc-textarea-danger text-role-error focus:text-role-error border-role-error':
             !!errorMessage
         }"
         v-text="messageText"

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

@@ -4,6 +4,10 @@
   html {
     @apply text-sm;
   }
+
+  body {
+    @apply overflow-hidden;
+  }
 }
 
 @layer base {

packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="noUsers" class="flex text-center mt-12">
+  <div v-if="noUsers" class="flex flex-col items-center text-center mt-12">
     <oc-icon name="user" size="xxlarge" />
     <p>{{ $gettext('Select a user to view details') }}</p>
   </div>

packages/web-app-files/src/components/SideBar/ActivitiesPanel.vue

@@ -8,7 +8,7 @@
           <div class="flex items-center">
             <oc-avatars
               :items="getAvatarsFromActivity(activity)"
-              class="mr-1"
+              class="mr-1 inline-flex"
               stacked
               gap-size="small"
               :width="16.8"

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue

@@ -5,7 +5,6 @@
       class="p-2"
       appearance="raw"
       justify-content="left"
-      gap-size="none"
       :aria-label="dateCurrent ? $gettext('Edit expiration date') : $gettext('Set expiration date')"
       @click="showDatePickerModal"
     >

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue

@@ -92,7 +92,7 @@
         </template>
       </oc-select>
     </div>
-    <div class="flex justify-between flex-wrap mb-6 mt-2">
+    <div class="flex justify-between flex-wrap mt-2">
       <role-dropdown
         mode="create"
         :show-icon="isRunningOnEos"
@@ -151,13 +151,8 @@
           <span v-text="$gettext(saveButtonLabel)" />
         </oc-button>
       </div>
-      <div class="w-full mt-2">
-        <oc-checkbox
-          v-if="isRunningOnEos"
-          v-model="notifyEnabled"
-          :value="false"
-          :label="$gettext('Notify via mail')"
-        />
+      <div v-if="isRunningOnEos" class="w-full mt-2">
+        <oc-checkbox v-model="notifyEnabled" :value="false" :label="$gettext('Notify via mail')" />
       </div>
     </div>
     <oc-hidden-announcer level="assertive" :announcement="announcement" />

packages/web-app-files/src/components/SideBar/Shares/FileShares.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-files-sharing-sidebar" class="relative">
+  <div id="oc-files-sharing-sidebar" class="relative rounded-sm">
     <div class="flex justify-between items-center">
       <div class="flex">
         <h3 v-translate class="font-semibold text-base m-0">Share with people</h3>
@@ -10,11 +10,11 @@
     <invite-collaborator-form
       v-if="canShare({ resource, space })"
       key="new-collaborator"
-      class="my-2"
+      class="mt-2"
     />
     <p v-else key="no-share-permissions-message" v-text="noSharePermsMessage" />
     <template v-if="hasSharees">
-      <div id="files-collaborators-headline" class="flex items-center justify-between h-10">
+      <div id="files-collaborators-headline" class="flex items-center justify-between h-10 mt-2">
         <h4 class="font-semibold my-0" v-text="sharedWithLabel" />
       </div>
       <portal-target
@@ -25,7 +25,7 @@
       <ul
         id="files-collaborators-list"
         class="oc-list oc-list-divider"
-        :class="{ 'mb-6': showSpaceMembers, 'm-0': !showSpaceMembers }"
+        :class="{ 'mb-4': showSpaceMembers, 'm-0': !showSpaceMembers }"
         :aria-label="$gettext('Share receivers')"
       >
         <li v-for="collaborator in displayCollaborators" :key="collaborator.id">
@@ -59,7 +59,7 @@
       </div>
     </template>
     <template v-if="showSpaceMembers">
-      <div class="flex items-center justify-between">
+      <div class="flex items-center justify-between mt-2">
         <h4 class="font-semibold my-2" v-text="spaceMemberLabel" />
       </div>
       <ul

packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue

@@ -1,7 +1,7 @@
 <template>
-  <div id="oc-files-sharing-sidebar" class="relative">
+  <div id="oc-files-sharing-sidebar" class="relative rounded-sm">
     <div class="flex">
-      <div v-if="canShare({ space: resource, resource })" class="flex py-2">
+      <div v-if="canShare({ space: resource, resource })" class="flex">
         <h3 class="font-semibold text-base m-0" v-text="$gettext('Add members')" />
         <oc-contextual-helper v-if="helpersEnabled" class="pl-1" v-bind="spaceAddMemberHelp" />
       </div>
@@ -12,12 +12,12 @@
       key="new-collaborator"
       :save-button-label="$gettext('Add')"
       :invite-label="$gettext('Search')"
-      class="my-2"
+      class="mt-2"
     />
     <template v-if="hasCollaborators">
       <div
         id="files-collaborators-headline"
-        class="flex items-center justify-between relative h-10"
+        class="flex items-center justify-between relative h-10 mt-2"
       >
         <div class="flex">
           <h4 class="font-semibold my-0" v-text="$gettext('Members')" />