refactor: tailwind spacings

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

@@ -178,10 +178,6 @@ export default defineConfig({
               text: 'OcFilterChip',
               link: '/OcFilterChip'
             },
-            {
-              text: 'OcGrid',
-              link: '/OcGrid'
-            },
             {
               text: 'OcHiddenAnnouncer',
               link: '/OcHiddenAnnouncer'

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

@@ -12,15 +12,13 @@ button.oc-button-passive-outline:focus:not(:focus-visible) {
   outline: 1px solid var(--oc-role-outline) !important;
 }
 .oc-modal-title > h2 {
-  padding: 0 !important;
   border: 0 !important;
 }
 ol.oc-pagination-list {
   list-style: none !important;
 }
 p.oc-recipient-name {
   line-height: unset !important;
-  margin: 0 !important;
 }
 
 @font-face {

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

@@ -191,7 +191,15 @@ onMounted(() => {
   })
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-avatars-stacked > * + * {
+    @apply -ml-4;
+  }
+}
+</style>
 <style lang="scss">
 .oc-avatars {
   display: inline-flex;
@@ -210,10 +218,6 @@ onMounted(() => {
     }
   }
 
-  &-stacked > * + * {
-    margin-left: -15px;
-  }
-
   &-gap {
     &-xs {
       gap: var(--oc-space-xsmall);

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

@@ -14,7 +14,7 @@
       <focus-trap>
         <div :id="drawerId" class="oc-bottom-drawer">
           <div class="oc-card">
-            <div class="oc-card-header">
+            <div class="oc-card-header px-4 pt-4">
               <div class="oc-flex oc-flex-between oc-flex-middle">
                 <oc-button
                   v-if="isNestedElement"
@@ -36,7 +36,7 @@
                 </oc-button>
               </div>
             </div>
-            <div ref="bottomDrawerCardBodyRef" class="oc-card-body">
+            <div ref="bottomDrawerCardBodyRef" class="oc-card-body px-4 pb-4 pt-2">
               <slot />
             </div>
           </div>
@@ -237,7 +237,22 @@ const getElement = () => {
 
 defineExpose({ show, hide, getElement })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-bottom-drawer .oc-card-body ul:not(:last-child) {
+    @apply mb-2;
+  }
+}
+
+@layer utilities {
+  .oc-bottom-drawer ul {
+    /* overwrite default list styling */
+    @apply p-2;
+  }
+}
+</style>
 <style lang="scss">
 .oc-bottom-drawer-background {
   background-color: #0006;
@@ -271,20 +286,10 @@ defineExpose({ show, hide, getElement })
     background-color: unset !important;
 
     &-header {
-      padding-top: var(--oc-space-medium);
-      padding-left: var(--oc-space-medium);
-      padding-right: var(--oc-space-medium);
       border-bottom: 0 !important;
     }
 
     &-body {
-      padding: var(--oc-space-medium);
-      padding-top: var(--oc-space-small);
-
-      ul:not(:last-child) {
-        margin-bottom: var(--oc-space-small) !important;
-      }
-
       ul {
         background-color: var(--oc-role-surface) !important;
         border-radius: 10px;

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

@@ -6,11 +6,11 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
     <div class="oc-bottom-drawer-background" role="button">
       <div id="button-drawer" class="oc-bottom-drawer active">
         <div class="oc-card">
-          <div class="oc-card-header">
+          <div class="oc-card-header px-4 pt-4">
             <div class="oc-flex oc-flex-between oc-flex-middle">
               <!--v-if--> <span class="oc-text-bold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
-                <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
+                <!-- @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;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
               </button>
             </div>
           </div>
-          <div class="oc-card-body"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
+          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
               <!--v-if-->
               <!-- @slot Content of the button --> action button
             </button></div>

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

@@ -11,7 +11,7 @@
       :aria-label="labelHidden ? label : null"
       @keydown.enter="keydownEnter"
     />
-    <label v-if="!labelHidden" :for="id" :class="labelClasses" v-text="label" />
+    <label v-if="!labelHidden" :for="id" :class="labelClasses" class="ml-1" v-text="label" />
   </span>
 </template>
 
@@ -169,8 +169,4 @@ const keydownEnter = (event: KeyboardEvent) => {
     );
   }
 }
-
-label > .oc-checkbox + span {
-  margin-left: var(--oc-space-xsmall);
-}
 </style>

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

@@ -12,10 +12,10 @@
         v-bind="additionalAttributes"
         type="color"
         :aria-invalid="ariaInvalid"
-        class="oc-color-input oc-input oc-rounded"
+        class="oc-color-input oc-input oc-rounded py-0.5"
         :class="{
           'oc-color-input-danger': !!errorMessage,
-          'clear-action-visible': showClearButton
+          'pr-6': showClearButton
         }"
         :value="modelValue"
         :disabled="disabled"
@@ -34,7 +34,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-color-input-message oc-text-small"
+      class="oc-color-input-message oc-text-small mt-1"
       :class="{
         'oc-color-input-description': !!descriptionMessage,
         'oc-color-input-danger': !!errorMessage
@@ -207,9 +207,6 @@ const onInput = (value: string) => {
 }
 
 .oc-color-input {
-  padding-top: calc(var(--oc-space-xsmall) - 2px) !important;
-  padding-bottom: calc(var(--oc-space-xsmall) - 2px) !important;
-
   &-wrapper {
     max-width: 5rem !important;
   }
@@ -232,12 +229,7 @@ const onInput = (value: string) => {
   &-message {
     display: flex;
     align-items: center;
-    margin-top: var(--oc-space-xsmall);
     min-height: $oc-font-size-default * 1.5;
   }
-
-  &.clear-action-visible {
-    padding-right: ($oc-size-icon-default * 0.7) + 7px;
-  }
 }
 </style>

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

@@ -8,7 +8,7 @@ exports[`OcDatePicker > renders 1`] = `
     <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
     <!--v-if-->
   </div>
-  <div class="oc-text-input-message oc-text-small">
+  <div class="oc-text-input-message oc-text-small mt-1">
     <!--v-if-->
   </div>
   <!--v-if-->

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

@@ -23,28 +23,35 @@ export interface Props {
 
 const { items } = defineProps<Props>()
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .details-list dt,
+  .details-list dd {
+    @apply mb-2;
+  }
+  .details-list dd {
+    @apply ml-4;
+  }
+  .details-list dd:last-of-type,
+  .details-list dt:last-of-type {
+    @apply mb-0;
+  }
+}
+</style>
 <style lang="scss">
 .details-list {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   dt,
   dd {
-    margin-bottom: var(--oc-space-small);
     display: flex;
     align-items: center;
   }
   dt {
     font-weight: bold;
     white-space: nowrap;
   }
-  dd {
-    margin-inline-start: var(--oc-space-medium);
-  }
-
-  dd:last-of-type,
-  dt:last-of-type {
-    margin-bottom: 0 !important;
-  }
 }
 </style>

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

@@ -340,13 +340,14 @@ watch(
 
 <style lang="scss">
 .tippy-box[data-theme~='none'] {
+  // overwrite tippy styles
   background-color: transparent;
   font-size: inherit;
   line-height: inherit;
 
   .tippy-content {
     // note: needed so that the box shadow from `oc-box-shadow-medium` doesn't get suppressed
-    padding: var(--oc-space-small);
+    padding: calc(var(--spacing) * 2);
   }
 }
 

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

@@ -8,7 +8,15 @@
 <script setup lang="ts">
 defineOptions({ name: 'OcDropzone' })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-dropzone {
+    @apply p-4;
+  }
+}
+</style>
 <style lang="scss">
 .oc-dropzone {
   align-items: center;
@@ -18,7 +26,6 @@ defineOptions({ name: 'OcDropzone' })
   justify-content: center;
   line-height: 1.5;
   opacity: 0.9;
-  padding: var(--oc-space-medium);
   text-align: center;
 
   * {

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

@@ -12,7 +12,7 @@
         v-bind="additionalAttributes"
         ref="inputRef"
         :aria-invalid="ariaInvalid"
-        class="oc-invisible oc-file-input"
+        class="oc-invisible oc-file-input p-0"
         type="file"
         :multiple="multiple"
         :accept="fileTypes"
@@ -49,7 +49,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-file-input-message oc-text-small oc-flex oc-flex-middle"
+      class="oc-file-input-message oc-text-small oc-flex oc-flex-middle mt-1"
       :class="{
         'oc-file-input-description': !!descriptionMessage,
         'oc-file-input-danger': !!errorMessage
@@ -239,7 +239,6 @@ const onFocus = async () => {
 <style scoped lang="scss">
 .oc-file-input {
   border: 0;
-  padding: 0;
   width: 0;
   height: 0;
 
@@ -259,7 +258,6 @@ const onFocus = async () => {
   &-message {
     display: flex;
     align-items: center;
-    margin-top: var(--oc-space-xsmall);
     min-height: $oc-font-size-default * 1.5;
   }
 }