refactor: migrate font-size and line-height to tailwind

packages/design-system/docs/components/OcRecipient/OcRecipient.md

@@ -57,7 +57,7 @@ The component provides an `append` slot to add additional content.
 <div class="oc-width-1-4">
 	<oc-recipient :recipient="{ name: 'Admin' }">
 		<template #append>
-			<span class="oc-text-small">Additional content</span>
+			<span class="text-sm">Additional content</span>
 		</template>
 	</oc-recipient>
 </div>

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

@@ -31,14 +31,15 @@
           v-if="item.to"
           :aria-current="getAriaCurrent(index)"
           :to="item.isTruncationPlaceholder ? lastHiddenItem.to : item.to"
+          class="first:text-base text-xl"
         >
           <span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">{{ item.text }}</span>
         </router-link>
         <oc-button
           v-else-if="item.onClick"
           :aria-current="getAriaCurrent(index)"
           appearance="raw"
-          class="oc-flex"
+          class="oc-flex first:text-base text-xl"
           no-hover
           @click="item.onClick"
         >
@@ -55,7 +56,7 @@
         </oc-button>
         <span
           v-else
-          class="oc-breadcrumb-item-text"
+          class="oc-breadcrumb-item-text first:text-base text-xl"
           :aria-current="getAriaCurrent(index)"
           tabindex="-1"
           v-text="item.text"
@@ -372,19 +373,9 @@ const dropItemStyling = (
     a:first-of-type,
     button:first-of-type,
     span:first-of-type {
-      font-size: var(--oc-font-size-medium);
       color: var(--oc-role-on-surface);
       display: inline-block;
       vertical-align: sub;
-      line-height: normal;
-    }
-  }
-
-  &-lead &-list-item {
-    a,
-    button,
-    span {
-      font-size: var(--oc-font-size-large);
     }
   }
 }

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

@@ -4,26 +4,26 @@ exports[`OcBreadcrumb > displays all items 1`] = `
 "<nav id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default" aria-label="Breadcrumbs">
   <ol class="oc-breadcrumb-list oc-flex m-0 p-0">
     <li data-key="0" class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub tag="a" to="[object Object]"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">First folder</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">First folder</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">
-      <router-link-stub tag="a" to="[object Object]"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">...</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">...</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="2" class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-flex"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Subfolder</span></oc-button-stub>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-flex first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Subfolder</span></oc-button-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="3" class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub tag="a" to="[object Object]" aria-current="page"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Deep</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Deep</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li data-key="4" class="oc-breadcrumb-list-item oc-flex oc-flex-middle"><span class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
+    <li data-key="4" class="oc-breadcrumb-list-item oc-flex oc-flex-middle"><span class="oc-breadcrumb-item-text first:text-base text-xl" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!--v-if-->
       <!--v-if-->
     </li>
@@ -40,26 +40,26 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
 "<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead" aria-label="Breadcrumbs">
   <ol class="oc-breadcrumb-list oc-flex m-0 p-0">
     <li data-key="0" class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub tag="a" to="[object Object]"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">First folder</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">First folder</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">
-      <router-link-stub tag="a" to="[object Object]"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">...</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">...</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="2" class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-flex"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Subfolder</span></oc-button-stub>
+      <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-flex first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Subfolder</span></oc-button-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
       <!--v-if-->
     </li>
     <li data-key="3" class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub tag="a" to="[object Object]" aria-current="page"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Deep</span></router-link-stub>
+      <router-link-stub tag="a" to="[object Object]" aria-current="page" class="first:text-base text-xl"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">Deep</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li data-key="4" class="oc-breadcrumb-list-item oc-flex oc-flex-middle"><span class="oc-breadcrumb-item-text" tabindex="-1">Deeper ellipsize in responsive mode</span>
+    <li data-key="4" class="oc-breadcrumb-list-item oc-flex oc-flex-middle"><span class="oc-breadcrumb-item-text first:text-base text-xl" tabindex="-1">Deeper ellipsize in responsive mode</span>
       <!--v-if-->
       <!--v-if-->
     </li>

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

@@ -178,22 +178,26 @@ const onClick = (event: MouseEvent) => {
   .oc-button:not(.oc-button-raw, .oc-button-raw-inverse) {
     @apply py-1.5 px-2.5;
   }
+  .oc-button-s {
+    @apply text-sm;
+  }
+  .oc-button-m {
+    @apply text-base;
+  }
+  .oc-button-l {
+    @apply text-lg;
+  }
 }
 </style>
 <style lang="scss">
 @mixin oc-button-gap($factor) {
   gap: math.round(calc($oc-space-small * $factor / 2)) * 2;
 }
 
-@mixin oc-button-line-height($factor) {
-  line-height: $oc-size-icon-default * $factor;
-}
-
 @mixin oc-button-color-role($color, $on-color) {
   &-raw,
   &-raw-inverse {
     border-style: none;
-    font-size: var(--oc-font-size-medium);
     font-weight: normal;
     min-height: 0;
 
@@ -244,8 +248,6 @@ const onClick = (event: MouseEvent) => {
 }
 
 .oc-button {
-  @include oc-button-line-height(1);
-
   align-items: center;
   border: 0;
   box-sizing: border-box;
@@ -307,23 +309,14 @@ const onClick = (event: MouseEvent) => {
   }
 
   &-s {
-    @include oc-button-line-height(0.7);
-
-    font-size: var(--oc-font-size-small);
     min-height: 1.2rem;
   }
 
   &-m {
-    @include oc-button-line-height(1);
-
-    font-size: var(--oc-font-size-medium);
     min-height: $global-control-height;
   }
 
   &-l {
-    @include oc-button-line-height(1.5);
-
-    font-size: var(--oc-font-size-xlarge);
     min-height: 2rem;
   }
 

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

@@ -34,7 +34,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-color-input-message oc-text-small mt-1"
+      class="oc-color-input-message text-sm mt-1"
       :class="{
         'oc-color-input-description': !!descriptionMessage,
         'oc-color-input-danger': !!errorMessage

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 mt-1">
+  <div class="oc-text-input-message text-sm mt-1">
     <!--v-if-->
   </div>
   <!--v-if-->

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

@@ -17,14 +17,21 @@ defineOptions({ name: 'OcDropzone' })
   }
 }
 </style>
+<style>
+@reference 'tailwindcss';
+
+@layer components {
+  .oc-dropzone {
+    @apply text-2xl;
+  }
+}
+</style>
 <style lang="scss">
 .oc-dropzone {
   align-items: center;
   border: 1px dashed var(--oc-role-outline);
   display: flex;
-  font-size: 1.5rem;
   justify-content: center;
-  line-height: 1.5;
   opacity: 0.9;
   text-align: center;
 

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

@@ -1,7 +1,7 @@
 <template>
   <div class="oc-error-log">
     <oc-textarea
-      class="oc-error-log-textarea mt-2 oc-text-small"
+      class="oc-error-log-textarea mt-2 text-sm"
       :label="contentLabel"
       :model-value="content"
       rows="4"

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

@@ -33,7 +33,7 @@
         {{ $ngettext('Select file', 'Select files', multiple ? 2 : 1) }}
       </oc-button>
       <div class="oc-file-input-files oc-rounded ml-2">
-        <div v-if="fileNames" class="py-1 px-2 oc-text-small oc-flex oc-flex-middle">
+        <div v-if="fileNames" class="py-1 px-2 text-sm oc-flex oc-flex-middle">
           {{ fileNames }}
           <oc-button
             v-if="clearButtonEnabled && fileNames"
@@ -49,7 +49,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-file-input-message oc-text-small oc-flex oc-flex-middle mt-1"
+      class="oc-file-input-message text-sm oc-flex oc-flex-middle mt-1"
       :class="{
         'oc-file-input-description': !!descriptionMessage,
         'oc-file-input-danger': !!errorMessage

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"
+      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs"
       :class="{ 'oc-filter-chip-button-selected': filterActive }"
       appearance="raw-inverse"
       color-role="surface"
@@ -163,8 +163,6 @@ defineExpose({ hideDrop })
     display: inline-flex;
     gap: var(--oc-space-xsmall);
     text-decoration: none;
-    font-size: var(--oc-font-size-xsmall);
-    line-height: 1rem;
     max-width: 150px;
     height: 100%;
   }

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

@@ -13,7 +13,7 @@
     <focus-trap :active="dropOpen">
       <div class="info-drop-content">
         <div class="oc-flex oc-flex-between info-header oc-border-b pb-2">
-          <h4 class="m-0 info-title" v-text="$gettext(title)" />
+          <h4 class="m-0 info-title text-lg" v-text="$gettext(title)" />
           <oc-button appearance="raw" :aria-label="$gettext('Close')">
             <oc-icon name="close" fill-type="line" size="medium" />
           </oc-button>
@@ -34,7 +34,6 @@
           v-if="readMoreLink"
           type="a"
           appearance="raw"
-          size="small"
           class="info-more-link"
           :href="readMoreLink"
           target="_blank"
@@ -122,17 +121,10 @@ export default {
   .oc-button {
     vertical-align: middle;
   }
-  .info-drop-content {
-    font-size: var(--oc-font-size-medium);
-  }
-  .info-more-link {
-    font-size: var(--oc-font-size-medium) !important;
-  }
   .info-header {
     align-items: center;
   }
   .info-title {
-    font-size: 1.125rem;
     font-weight: normal;
   }
   .info-list {

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

@@ -12,7 +12,7 @@
         @keydown.esc.stop="cancelModalAction"
       >
         <div class="oc-modal-title py-3 px-4">
-          <h2 id="oc-modal-title" class="oc-text-truncate m-0" v-text="title" />
+          <h2 id="oc-modal-title" class="oc-text-truncate m-0 text-base" v-text="title" />
         </div>
         <div class="oc-modal-body px-4 pt-4">
           <div
@@ -354,22 +354,15 @@ export default {
     border-top-right-radius: 5px;
     display: flex;
     flex-flow: row wrap;
-    line-height: 1.625;
     background-color: var(--oc-role-surface-container);
 
     > h2 {
-      font-size: 1rem;
       font-weight: bold;
     }
   }
 
   &-body {
     color: var(--oc-role-on-surface);
-    line-height: 1.625;
-
-    .oc-input {
-      line-height: normal;
-    }
 
     &-actions {
       text-align: right;

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

@@ -5,7 +5,7 @@ exports[`OcModal > displays input 1`] = `
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title py-3 px-4">
-        <h2 id="oc-modal-title" class="oc-text-truncate m-0">Create new folder</h2>
+        <h2 id="oc-modal-title" class="oc-text-truncate m-0 text-base">Create new folder</h2>
       </div>
       <div class="oc-modal-body px-4 pt-4">
         <!--v-if-->
@@ -28,7 +28,7 @@ exports[`OcModal > displays loading state 1`] = `
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title py-3 px-4">
-        <h2 id="oc-modal-title" class="oc-text-truncate m-0">Example title</h2>
+        <h2 id="oc-modal-title" class="oc-text-truncate m-0 text-base">Example title</h2>
       </div>
       <div class="oc-modal-body px-4 pt-4">
         <p class="oc-modal-body-message mt-0 mb-0">Example message</p>
@@ -51,7 +51,7 @@ exports[`OcModal > matches snapshot 1`] = `
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title py-3 px-4">
-        <h2 id="oc-modal-title" class="oc-text-truncate m-0">Example title</h2>
+        <h2 id="oc-modal-title" class="oc-text-truncate m-0 text-base">Example title</h2>
       </div>
       <div class="oc-modal-body px-4 pt-4">
         <p class="oc-modal-body-message mt-0 mb-0">Example message</p>
@@ -74,7 +74,7 @@ exports[`OcModal > overrides props message with slot 1`] = `
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title py-3 px-4">
-        <h2 id="oc-modal-title" class="oc-text-truncate m-0">Example title</h2>
+        <h2 id="oc-modal-title" class="oc-text-truncate m-0 text-base">Example title</h2>
       </div>
       <div class="oc-modal-body px-4 pt-4">
         <div class="oc-modal-body-message mt-2 mb-4">

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

@@ -7,7 +7,7 @@
       <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1">
         <div class="oc-flex oc-flex-middle">
           <oc-icon name="information" fill-type="line" class="mr-2" />
-          <div class="oc-notification-message-title">
+          <div class="oc-notification-message-title text-lg">
             {{ title }}
           </div>
         </div>
@@ -113,10 +113,6 @@ onMounted(() => {
   position: relative;
   word-break: break-word;
 
-  &-title {
-    font-size: 1.15rem;
-  }
-
   &-error-log-toggle-button {
     word-break: keep-all;
   }