refactor: borders to tailwind

index.html

@@ -69,7 +69,7 @@
       id="splash-incompatible"
       class="splash-banner splash-hide flex flex-col justify-center items-center"
     >
-      <div class="oc-card oc-border oc-rounded oc-width-large text-center">
+      <div class="oc-card border oc-rounded oc-width-large text-center">
         <div class="oc-card-header">
           <div class="flex items-center justify-center">
             <span class="mr-2 oc-icon oc-icon-m oc-icon-warning">

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="oc-application-icon inline-flex items-center justify-center" :style="iconStyle">
+  <div
+    class="oc-application-icon inline-flex items-center justify-center rounded-sm"
+    :style="iconStyle"
+  >
     <oc-icon :name="icon" :color="iconColor" size="medium" />
   </div>
 </template>
@@ -59,7 +62,6 @@ const iconStyle = computed(() => {
 .oc-application-icon {
   width: 28px;
   height: 28px;
-  border-radius: 4px;
 
   .oc-icon {
     height: 18px !important;

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

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center"
+    class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]"
     :style="style"
     :width="width"
     :aria-label="accessibleLabel === '' ? null : accessibleLabel"
@@ -9,7 +9,13 @@
     :role="accessibleLabel === '' ? null : 'img'"
     :data-test-user-name="userName"
   >
-    <oc-image v-if="isImage" loading-type="lazy" class="avatarImg" :src="src" @error="onImgError" />
+    <oc-image
+      v-if="isImage"
+      loading-type="lazy"
+      class="avatarImg rounded-[50%]"
+      :src="src"
+      @error="onImgError"
+    />
     <span v-else class="avatar-initials" :style="{ color }">{{ userInitial }}</span>
   </span>
 </template>
@@ -126,13 +132,10 @@ const randomBackgroundColor = (seed: number, colors: string[]) => {
 <style lang="scss">
 .oc-avatar {
   user-select: none;
-  border-radius: 50%;
-  border: 1px solid var(--oc-role-outline-variant);
 
   .avatarImg {
     width: 100%;
     height: auto;
-    border-radius: 50%;
   }
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary"
+    class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary rounded-[50%]"
     :style="{ width: size + 'px', height: size + 'px', fontSize: fontSize }"
     v-text="`+${count}`"
   />
@@ -27,10 +27,3 @@ const fontSize = computed(() => {
   return Math.floor(size / 2.5) + 'px'
 })
 </script>
-
-<style lang="scss">
-.oc-avatar-count {
-  border-radius: 50%;
-  border: 1px solid var(--oc-role-outline-variant);
-}
-</style>

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

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcAvatarCount > dynamically calculates font size 1`] = `"<span class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary" style="width: 100px; height: 100px; font-size: 40px;">+2</span>"`;
+exports[`OcAvatarCount > dynamically calculates font size 1`] = `"<span class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary rounded-[50%]" style="width: 100px; height: 100px; font-size: 40px;">+2</span>"`;

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

@@ -7,7 +7,7 @@
     :role="accessibleLabel === '' ? null : 'img'"
   >
     <span
-      class="oc-avatar-item"
+      class="oc-avatar-item rounded-[50%]"
       :style="{
         backgroundColor,
         '--icon-color': iconColor,
@@ -106,12 +106,10 @@ const pickBackgroundColor = () => {
   background-position: center;
   background-repeat: no-repeat;
   background-size: 18px;
-  border-radius: 50%;
   display: inline-flex;
   height: var(--width);
   justify-content: center;
   width: var(--width);
-  border: 1px solid var(--oc-role-outline-variant);
 
   .oc-icon > svg {
     fill: var(--icon-color) !important;

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

@@ -12,9 +12,9 @@
       @click="onBackgroundClicked"
     >
       <focus-trap>
-        <div :id="drawerId" class="oc-bottom-drawer bg-role-surface-container-high">
+        <div :id="drawerId" class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm">
           <div class="oc-card bg-transparent">
-            <div class="oc-card-header px-4 pt-4">
+            <div class="oc-card-header border-b-0 px-4 pt-4">
               <div class="flex justify-between items-center">
                 <oc-button
                   v-if="isNestedElement"
@@ -249,7 +249,7 @@ defineExpose({ show, hide, getElement })
 @layer utilities {
   .oc-bottom-drawer ul {
     /* overwrite default list styling */
-    @apply p-2 bg-role-surface;
+    @apply p-2 bg-role-surface rounded-lg;
   }
 }
 </style>
@@ -271,25 +271,11 @@ defineExpose({ show, hide, getElement })
   max-height: 66vh;
   width: 100%;
   overflow-y: auto;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   transition: all 0.2s;
 
   &.active {
     bottom: 0;
     transition: all 0.2s;
   }
-
-  .oc-card {
-    &-header {
-      border-bottom: 0 !important;
-    }
-
-    &-body {
-      ul {
-        border-radius: 10px;
-      }
-    }
-  }
 }
 </style>

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

@@ -4,11 +4,11 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
 "<div drawerid="button-drawer" toggle="#button-drawer-toggle" title="Bottom Drawer" closeonclick="false"><button id="button-drawer-toggle">Toggle Drawer</button>
   <div>
     <div class="oc-bottom-drawer-background bg-black/40" role="button">
-      <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high active">
+      <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm active">
         <div class="oc-card bg-transparent">
-          <div class="oc-card-header px-4 pt-4">
+          <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-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--> <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 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-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-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/OcBreadcrumb/OcBreadcrumb.vue

@@ -83,6 +83,7 @@
             :aria-label="contextMenuLabel"
             appearance="raw"
             no-hover
+            class="mx-1"
           >
             <oc-icon name="more-2" color="var(--oc-role-on-surface)" class="align-middle" />
           </oc-button>
@@ -316,7 +317,7 @@ const dropItemStyling = (
     @apply bg-role-secondary-container;
   }
   .oc-breadcrumb-list > :nth-child(n + 2)::before {
-    @apply text-role-on-surface;
+    @apply text-role-on-surface rounded-sm;
   }
 }
 </style>
@@ -330,7 +331,6 @@ const dropItemStyling = (
       border-color 0s,
       border-width 0.06s;
     box-shadow: 0 0 0 5px var(--oc-role-secondary-container);
-    border-radius: 5px;
   }
   &-item-text {
     max-width: 200px;
@@ -352,10 +352,6 @@ const dropItemStyling = (
       display: none !important;
     }
 
-    #oc-breadcrumb-contextmenu-trigger > span {
-      border: 3px solid transparent;
-    }
-
     #oc-breadcrumb-contextmenu li button {
       display: inline-flex;
     }

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

@@ -136,7 +136,6 @@ defineSlots<Slots>()
 const buttonClass = computed(() => {
   const classes = [
     'oc-button',
-    'oc-rounded',
     `oc-button-${getSizeClass(size)}`,
     `oc-button-justify-content-${justifyContent}`,
     `oc-button-gap-${getSizeClass(gapSize)}`,
@@ -187,6 +186,15 @@ const onClick = (event: MouseEvent) => {
   .oc-button-l {
     @apply text-lg;
   }
+  .oc-button {
+    @apply rounded-sm;
+  }
+  .oc-button-group {
+    @apply rounded-sm;
+  }
+  .oc-button-group .oc-button {
+    @apply rounded-none first:rounded-l-sm last:rounded-r-sm;
+  }
 }
 </style>
 <style lang="scss">
@@ -197,7 +205,6 @@ const onClick = (event: MouseEvent) => {
 @mixin oc-button-color-role($color, $on-color) {
   &-raw,
   &-raw-inverse {
-    border-style: none;
     min-height: 0;
 
     background-color: transparent;
@@ -248,7 +255,6 @@ const onClick = (event: MouseEvent) => {
 
 .oc-button {
   align-items: center;
-  border: 0;
   box-sizing: border-box;
   display: inline-flex;
 
@@ -384,19 +390,9 @@ const onClick = (event: MouseEvent) => {
     flex-flow: row wrap;
     outline: 1px solid var(--oc-role-secondary);
     outline-offset: -1px;
-    border-radius: 5px;
 
     .oc-button {
-      border-radius: 0;
       outline: 0;
-
-      &:first-of-type {
-        border-radius: 5px 0 0 5px;
-      }
-
-      &:last-of-type {
-        border-radius: 0 5px 5px 0;
-      }
     }
   }
 }

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

@@ -6,6 +6,7 @@
       type="checkbox"
       name="checkbox"
       :class="classes"
+      class="m-0.5 border-2 border-role-outline"
       :value="option"
       :disabled="disabled"
       :aria-label="labelHidden ? label : null"
@@ -72,7 +73,7 @@ const model = defineModel<boolean | unknown[]>()
 
 const classes = computed(() => [
   'oc-checkbox',
-  'oc-rounded',
+  'rounded-sm',
   'oc-checkbox-' + getSizeClass(size),
   { 'oc-checkbox-checked': isChecked.value },
   { 'bg-white': isChecked.value },
@@ -122,7 +123,6 @@ const keydownEnter = (event: KeyboardEvent) => {
 
   background-position: 50% 50% !important;
   background-repeat: no-repeat !important;
-  border: 2px solid var(--oc-role-outline);
   display: inline-block;
   overflow: hidden;
   outline: none;

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

@@ -12,9 +12,10 @@
         v-bind="additionalAttributes"
         type="color"
         :aria-invalid="ariaInvalid"
-        class="oc-color-input oc-input oc-rounded py-0.5"
+        class="oc-color-input oc-input rounded-sm py-0.5 focus:border focus:border-role-outline"
         :class="{
-          'oc-color-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage,
+          'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+            !!errorMessage,
           'pr-6': showClearButton
         }"
         :value="modelValue"
@@ -37,7 +38,8 @@
       class="oc-color-input-message flex items-center text-sm mt-1"
       :class="{
         'oc-color-input-description text-role-on-surface-variant': !!descriptionMessage,
-        'oc-color-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
+        'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+          !!errorMessage
       }"
     >
       <oc-icon
@@ -54,7 +56,8 @@
         :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': !!errorMessage
+          'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+            !!errorMessage
         }"
         v-text="messageText"
       />
@@ -211,15 +214,9 @@ const onInput = (value: string) => {
   }
 
   &:focus {
-    border: 1px solid var(--oc-role-surface) !important;
     outline: 2px solid var(--oc-role-outline) !important;
   }
 
-  &-danger,
-  &-danger:focus {
-    color: var(--oc-role-error) !important;
-  }
-
   &-message {
     min-height: $oc-font-size-default * 1.5;
   }

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

@@ -5,7 +5,7 @@ exports[`OcDatePicker > renders 1`] = `
     <!--v-if-->
   </label>
   <div class="oc-position-relative">
-    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
+    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
     <!--v-if-->
   </div>
   <div class="oc-text-input-message flex align-center text-sm mt-1">

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

@@ -18,7 +18,7 @@
     v-else
     :id="dropId"
     ref="drop"
-    class="oc-drop oc-box-shadow-medium oc-rounded"
+    class="oc-drop oc-box-shadow-medium rounded-sm"
     @click="onClick"
   >
     <div v-if="$slots.default" :class="['oc-card oc-card-body', paddingClass]">
@@ -354,9 +354,5 @@ watch(
 .oc-drop {
   max-width: 100%;
   width: 300px;
-
-  .oc-card {
-    border-radius: var(--oc-space-small) !important;
-  }
 }
 </style>