refactor: gaps to tailwind

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

@@ -5,7 +5,12 @@
       v-oc-tooltip="tooltip"
       class="oc-avatars inline-flex w-fit"
       aria-hidden="true"
-      :class="[...avatarsClasses, { '[&>*]:hover:transform-[scale(1.1)]': hasHoverEffect }]"
+      :class="{
+        'oc-avatars-stacked': stacked,
+        'oc-avatars-hover-effect': hasHoverEffect,
+        '[&>*]:hover:transform-[scale(1.1)]': hasHoverEffect,
+        ...getTailwindGapClass(gapSize)
+      }"
     >
       <slot name="userAvatars" :avatars="avatars" :width="width">
         <template v-if="avatars.length > 0">
@@ -43,7 +48,8 @@ import OcAvatarLink from '../OcAvatarLink/OcAvatarLink.vue'
 import OcAvatarGroup from '../OcAvatarGroup/OcAvatarGroup.vue'
 import OcAvatarFederated from '../OcAvatarFederated/OcAvatarFederated.vue'
 import OcAvatarGuest from '../OcAvatarGuest/OcAvatarGuest.vue'
-import { getSizeClass, SizeType } from '../../helpers'
+import { SizeType } from '../../helpers'
+import { getTailwindGapClass } from '../../helpers/tailwind'
 
 type Item = {
   displayName?: string
@@ -171,14 +177,6 @@ const hasHoverEffect = computed(() => {
   return stacked && hoverEffect && unref(items).length > 1
 })
 
-const avatarsClasses = computed(() => {
-  return [
-    `oc-avatars-gap-${getSizeClass(gapSize)}`,
-    ...(stacked ? ['oc-avatars-stacked'] : []),
-    ...(unref(hasHoverEffect) ? ['oc-avatars-hover-effect'] : [])
-  ]
-})
-
 onMounted(() => {
   if (!unref(avatarsRef) || !unref(hasHoverEffect)) {
     return
@@ -214,27 +212,5 @@ onMounted(() => {
       z-index: 1000 !important;
     }
   }
-
-  &-gap {
-    &-xs {
-      gap: var(--oc-space-xsmall);
-    }
-
-    &-s {
-      gap: var(--oc-space-small);
-    }
-
-    &-m {
-      gap: var(--oc-space-medium);
-    }
-
-    &-l {
-      gap: var(--oc-space-large);
-    }
-
-    &-xl {
-      gap: var(--oc-space-xlarge);
-    }
-  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit oc-avatars-gap-xs" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
 
-exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit oc-avatars-gap-xs" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
 
-exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit oc-avatars-gap-xs" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="oc-invisible-sr">List of users</span></span>"`;

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

@@ -8,7 +8,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
         <div class="oc-card bg-transparent">
           <div class="oc-card-header border-b-0 px-4 pt-4">
             <div class="flex justify-between items-center">
-              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex raw-hover-surface oc-bottom-drawer-close-button">
+              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
               </button>
             </div>
           </div>
-          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex raw-hover-surface" id="action-button">
+          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 inline-flex raw-hover-surface" id="action-button">
               <!--v-if-->
               <!-- @slot Content of the button --> action button
             </button></div>

packages/design-system/src/components/OcButton/OcButton.spec.ts

@@ -76,7 +76,7 @@ describe('OcButton', () => {
       ${'size'}                      | ${'oc-button-m'}
       ${'color role'}                | ${'oc-button-secondary'}
       ${'justify content'}           | ${'oc-button-justify-content-center'}
-      ${'gap size'}                  | ${'oc-button-gap-m'}
+      ${'gap size'}                  | ${'gap-2'}
       ${'appearance'}                | ${'oc-button-outline'}
       ${'color role and appearance'} | ${'oc-button-secondary-outline'}
     `('should have attribute "$name" as "$expected"', ({ expected }) => {

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

@@ -3,7 +3,7 @@
     :is="type"
     v-bind="additionalAttributes"
     :aria-label="ariaLabel"
-    :class="buttonClass"
+    :class="[...buttonClass, getTailwindGapClass(gapSize)]"
     class="inline-flex"
     v-on="handlers"
   >
@@ -18,6 +18,7 @@ import { computed } from 'vue'
 import { RouteLocationRaw } from 'vue-router'
 import { AppearanceType, getSizeClass, SizeType } from '../../helpers'
 import { kebabCase } from 'lodash-es'
+import { getTailwindGapClass } from '../../helpers/tailwind'
 
 export interface Props {
   /**
@@ -139,7 +140,6 @@ const buttonClass = computed(() => {
     'oc-button',
     `oc-button-${getSizeClass(size)}`,
     `oc-button-justify-content-${justifyContent}`,
-    `oc-button-gap-${getSizeClass(gapSize)}`,
     `oc-button-${kebabCase(colorRole)}`,
     `oc-button-${appearance}`,
     `oc-button-${kebabCase(colorRole)}-${appearance}`
@@ -199,10 +199,6 @@ const onClick = (event: MouseEvent) => {
 }
 </style>
 <style lang="scss">
-@mixin oc-button-gap($factor) {
-  gap: math.round(calc($oc-space-small * $factor / 2)) * 2;
-}
-
 @mixin oc-button-color-role($color, $on-color) {
   &-raw,
   &-raw-inverse {
@@ -282,28 +278,6 @@ const onClick = (event: MouseEvent) => {
     }
   }
 
-  &-gap {
-    &-xs {
-      @include oc-button-gap(0.5);
-    }
-
-    &-s {
-      @include oc-button-gap(0.7);
-    }
-
-    &-m {
-      @include oc-button-gap(1);
-    }
-
-    &-l {
-      @include oc-button-gap(1.5);
-    }
-
-    &-xl {
-      @include oc-button-gap(2);
-    }
-  }
-
   @layer components {
     &:hover {
       cursor: pointer;

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

@@ -5,7 +5,7 @@
   >
     <oc-button
       :id="id"
-      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40"
+      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1"
       :class="{ 'oc-filter-chip-button-selected rounded-l-full rounded-r-none': filterActive }"
       :appearance="buttonAppearance"
       :color-role="buttonColorRole"
@@ -185,7 +185,6 @@ defineExpose({ hideDrop })
 .oc-filter-chip {
   &-button.oc-pill {
     box-sizing: border-box;
-    gap: var(--oc-space-xsmall);
   }
   &-clear:not(.oc-filter-chip-toggle .oc-filter-chip-clear),
   &-clear:hover:not(.oc-filter-chip-toggle .oc-filter-chip-clear) {

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

@@ -36,10 +36,10 @@ exports[`OcModal > displays loading state 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions flex justify-end p-4 text-right">
-        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-cancel">
+        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s inline-block after:block after:bg-transparent text-role-on-surface relative after:relative after:border after:border-current after:rounded-full after:size-full spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s inline-block after:block after:bg-transparent text-role-on-surface relative after:relative after:border after:border-current after:rounded-full after:size-full spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-page-size flex items-center">
+  <div class="oc-page-size flex items-center gap-1">
     <label
       class="oc-page-size-label"
       :for="selectId"
@@ -63,8 +63,6 @@ const emitChange = (value: string | boolean) => {
 
 <style lang="scss">
 .oc-page-size {
-  gap: var(--oc-space-xsmall);
-
   &-select,
   &-select .vs__dropdown-menu {
     min-width: var(--oc-size-width-xsmall);

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

@@ -1,6 +1,6 @@
 <template>
   <nav class="oc-pagination" :aria-label="$gettext('Pagination')">
-    <ol class="oc-pagination-list flex items-center flex-wrap m-0">
+    <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"
@@ -174,7 +174,6 @@ const bindPageLink = (page: Page) => {
 <style lang="scss">
 .oc-pagination {
   &-list {
-    gap: var(--oc-space-small);
     list-style: none;
 
     &-item {

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

@@ -45,14 +45,12 @@ defineSlots<Slots>()
 
 @layer components {
   .oc-recipient {
-    @apply p-1 w-auto;
+    @apply p-1 w-auto gap-1;
   }
 }
 </style>
 <style lang="scss">
 .oc-recipient {
-  gap: var(--oc-space-xsmall);
-
   &-icon > svg {
     fill: var(--oc-role-on-surface);
   }

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

@@ -542,7 +542,7 @@ export default { components: { VueSelect } }
     &__actions {
       flex-flow: row wrap;
       justify-content: center;
-      gap: var(--oc-space-xsmall);
+      gap: var(--spacing);
       cursor: pointer;
       padding: 0 4px 0 4px;
 

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

@@ -3,7 +3,7 @@
     <span :id="labelId" v-text="label" />
     <button
       data-testid="oc-switch-btn"
-      class="oc-switch-btn block relative border border-role-outline rounded-3xl w-8 before:size-3 h-4.5"
+      class="oc-switch-btn block relative border border-role-outline rounded-3xl w-8 before:size-3 h-4.5 gap-2"
       role="switch"
       :aria-checked="checked"
       :aria-labelledby="labelId"
@@ -72,8 +72,6 @@ const toggle = () => {
 </style>
 <style lang="scss">
 .oc-switch {
-  gap: var(--oc-space-small);
-
   &-btn {
     cursor: pointer;
     transition: background-color 0.25s;

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

@@ -74,6 +74,7 @@ const tagClasses = computed(() => {
     'inline-flex',
     'items-center',
     `oc-tag-${getSizeClass(size)}`,
+    `gap-1`,
     'border'
   ]
 
@@ -125,7 +126,6 @@ function $_ocTag_click(event: MouseEvent) {
 <style lang="scss">
 .oc-tag {
   box-sizing: border-box;
-  gap: var(--oc-space-xsmall);
 
   &-link,
   &-button {

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 oc-tag-m border oc-tag-button oc-tag-color-secondary oc-tag-appearance-outline rounded-lg bg-role-surface text-role-secondary border-role-secondary" to="">
+"<button class="oc-tag inline-flex items-center oc-tag-m gap-1 border oc-tag-button oc-tag-color-secondary oc-tag-appearance-outline rounded-lg bg-role-surface text-role-secondary border-role-secondary" to="">
   <!-- @slot Content of the tag -->
 </button>"
 `;