refactor: migrate text-transform to tailwind

Author: JammingBen

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

@@ -434,15 +434,22 @@ const messageId = computed(() => {
   return `${id}-message`
 })
 </script>
-
 <script lang="ts">
 // @ts-ignore
 import VueSelect from 'vue-select'
 
 // importing VueSelect in script setup leads to an anomymousstub in unit tests
 export default { components: { VueSelect } }
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-select {
+    @apply py-[1px] normal-case;
+  }
+}
+</style>
 <style lang="scss">
 .vs--disabled {
   cursor: not-allowed;
@@ -463,7 +470,6 @@ export default { components: { VueSelect } }
 }
 
 .oc-select {
-  padding: 1px 0;
   color: var(--oc-role-on-surface);
 
   &-position-fixed {

packages/design-system/src/styles/theme/oc-form.scss

@@ -138,12 +138,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 
 .oc-input { overflow: visible; }
 
-/*
- * Remove the inheritance of text transform in Firefox.
- */
-
-.oc-select { text-transform: none; }
-
 /*
  * Remove the default vertical scrollbar in IE 10+.
  */

packages/web-app-activities/src/views/ActivityList.vue

@@ -2,7 +2,7 @@
   <oc-list class="activity-list">
     <li v-for="(activityItems, date) in activitiesDateCategorized" :key="date" class="mb-6">
       <h2
-        class="font-semibold oc-text-muted activity-list-date text-base"
+        class="font-semibold oc-text-muted activity-list-date text-base capitalize"
         v-text="getDateHeadline(date)"
       />
       <oc-list class="ml-2 mt-2 timeline">
@@ -68,9 +68,5 @@ export default defineComponent({
 <style lang="scss">
 .activity-list {
   max-width: 1000px;
-
-  &-date {
-    text-transform: capitalize;
-  }
 }
 </style>