fix: Standardise rounded scale

src/components/Badge.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-block rounded px-2 py-1 truncate" :class="getColorClass">
+  <div class="inline-block rounded-md px-2 py-1 truncate" :class="getColorClass">
     <slot></slot>
   </div>
 </template>

src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="focus:outline-none rounded-6px shadow-button"
+    class="focus:outline-none rounded-md shadow-button"
     :style="style"
     v-bind="$attrs"
     v-on="$listeners"

src/components/Controls/Base.vue

@@ -53,7 +53,7 @@ export default {
           'px-2 py-1': this.size === 'small',
           'bg-gray-100': this.background
         },
-        'focus:outline-none focus:bg-gray-200 rounded-5px w-full text-gray-900'
+        'focus:outline-none focus:bg-gray-200 rounded w-full text-gray-900'
       ];
     },
     inputPlaceholder() {

src/components/DatePicker/DatePicker.vue

@@ -18,7 +18,7 @@
           </span>
           <span class="flex">
             <div
-              class="w-5 h-5 hover:bg-gray-100 rounded flex-center cursor-pointer"
+              class="w-5 h-5 hover:bg-gray-100 rounded-md flex-center cursor-pointer"
             >
               <feather-icon
                 @click="prevMonth"
@@ -27,7 +27,7 @@
               />
             </div>
             <div
-              class="ml-2 w-5 h-5 hover:bg-gray-100 rounded flex-center cursor-pointer"
+              class="ml-2 w-5 h-5 hover:bg-gray-100 rounded-md flex-center cursor-pointer"
             >
               <feather-icon
                 @click="nextMonth"

src/components/Dropdown.vue

@@ -10,7 +10,7 @@
     </div>
     <div
       :class="right ? 'right-0' : 'left-0'"
-      class="mt-1 absolute z-10 bg-white rounded-5px border w-full min-w-40 shadow-md"
+      class="mt-1 absolute z-10 bg-white rounded border w-full min-w-40 shadow-md"
       v-if="isShown"
     >
       <div class="p-1 max-h-64 overflow-auto">
@@ -24,7 +24,7 @@
           <a
             v-else
             ref="items"
-            class="block p-2 rounded mt-1 first:mt-0 cursor-pointer truncate"
+            class="block p-2 rounded-md mt-1 first:mt-0 cursor-pointer truncate"
             :class="d.index === highlightedIndex ? 'bg-gray-100' : ''"
             @mouseenter="highlightedIndex = d.index"
             @mouseleave="highlightedIndex = -1"

src/components/FilterDropdown.vue

@@ -68,7 +68,7 @@
               </div>
             </div>
             <div
-              class="ml-2 cursor-pointer w-5 h-5 flex-center hover:bg-gray-100 rounded"
+              class="ml-2 cursor-pointer w-5 h-5 flex-center hover:bg-gray-100 rounded-md"
             >
               <feather-icon
                 name="x"

src/components/Popover.vue

@@ -7,7 +7,7 @@
       <div
         ref="popover"
         :class="popoverClass"
-        class="mt-1 bg-white rounded-5px border min-w-40 shadow-md"
+        class="mt-1 bg-white rounded border min-w-40 shadow-md"
         v-show="isOpen"
       >
         <slot name="content" :toggleDropdown="toggleDropdown"></slot>

src/components/SearchBar.vue

@@ -10,7 +10,7 @@
         }"
       >
         <div
-          class="rounded-6px relative flex items-center overflow-hidden h-full"
+          class="rounded-md relative flex items-center overflow-hidden h-full"
         >
           <div class="absolute flex justify-center w-8">
             <feather-icon name="search" class="w-3 h-3 text-gray-800" />

src/pages/ChartOfAccounts.vue

@@ -11,7 +11,7 @@
     <div class="flex-1 flex px-8 mt-4">
       <div class="flex-1" v-if="root">
         <div
-          class="mt-2 px-4 py-2 cursor-pointer hover:bg-gray-200 rounded-6px"
+          class="mt-2 px-4 py-2 cursor-pointer hover:bg-gray-200 rounded-md"
           v-for="account in allAccounts"
           :key="account.name"
           @click="onClick(account)"

src/pages/Dashboard/Cashflow.vue

@@ -5,11 +5,11 @@
         <div class="font-medium">{{ _('Cashflow') }}</div>
         <div class="flex text-base">
           <div class="flex items-center">
-            <span class="w-3 h-3 rounded inline-block bg-blue-500"></span>
+            <span class="w-3 h-3 rounded-sm inline-block bg-blue-500"></span>
             <span class="ml-2">{{ _('Inflow') }}</span>
           </div>
           <div class="flex items-center ml-6">
-            <span class="w-3 h-3 rounded inline-block bg-gray-500"></span>
+            <span class="w-3 h-3 rounded-sm inline-block bg-gray-500"></span>
             <span class="ml-2">{{ _('Outflow') }}</span>
           </div>
         </div>

src/pages/Dashboard/Expenses.vue

@@ -19,7 +19,7 @@
           :key="d.name"
         >
           <div class="flex items-center">
-            <div class="w-3 h-3 rounded" :class="d.class"></div>
+            <div class="w-3 h-3 rounded-sm" :class="d.class"></div>
             <div class="ml-3">{{ d.account }}</div>
           </div>
           <div>{{ frappe.format(d.total, 'Currency') }}</div>

src/pages/Dashboard/PeriodSelector.vue

@@ -9,7 +9,7 @@
       }"
     >
       <div
-        class="text-sm flex hover:bg-gray-100 focus:outline-none focus:bg-gray-100 items-center px-3 py-2 rounded cursor-pointer"
+        class="text-sm flex hover:bg-gray-100 focus:outline-none focus:bg-gray-100 items-center px-3 py-2 rounded-md cursor-pointer"
         @click="toggleDropdown()"
         tabindex="0"
         @keydown.down="highlightItemDown"

src/pages/Dashboard/UnpaidInvoices.vue

@@ -44,9 +44,9 @@
             }}</span>
           </div>
         </div>
-        <div class="mt-2 relative">
+        <div class="mt-2 relative rounded overflow-hidden">
           <div
-            class="w-full h-4 rounded"
+            class="w-full h-4"
             :class="
               invoice.hasData && invoice.color == 'blue'
                 ? 'bg-blue-200'
@@ -54,7 +54,7 @@
             "
           ></div>
           <div
-            class="absolute inset-0 h-4 rounded"
+            class="absolute inset-0 h-4"
             :class="
               invoice.hasData && invoice.color == 'blue'
                 ? 'bg-blue-500'

src/pages/DatabaseSelector.vue

@@ -7,7 +7,7 @@
     <div class="flex mt-10">
       <div
         @click="newDatabase"
-        class="w-1/2 border rounded-12px flex flex-col items-center py-8 px-5 cursor-pointer hover:shadow"
+        class="w-1/2 border rounded-xl flex flex-col items-center py-8 px-5 cursor-pointer hover:shadow"
       >
         <div class="w-14 h-14 rounded-full bg-blue-200 relative flex-center">
           <div class="w-12 h-12 absolute rounded-full bg-blue-500 flex-center">
@@ -21,7 +21,7 @@
       </div>
       <div
         @click="existingDatabase"
-        class="ml-6 w-1/2 border rounded-12px flex flex-col items-center py-8 px-5 cursor-pointer hover:shadow"
+        class="ml-6 w-1/2 border rounded-xl flex flex-col items-center py-8 px-5 cursor-pointer hover:shadow"
       >
         <div class="w-14 h-14 rounded-full bg-green-200 relative flex-center">
           <div class="w-12 h-12 rounded-full bg-green-500 flex-center">

src/pages/JournalEntryForm.vue

@@ -40,7 +40,7 @@
                   :value="doc.entryType"
                   placeholder="Entry Type"
                   @change="value => doc.set('entryType', value)"
-                  input-class="bg-gray-100 rounded-lg px-3 py-2 text-base"
+                  input-class="bg-gray-100 px-3 py-2 text-base"
                   :show-label="true"
                 />
                 <FormControl
@@ -49,7 +49,7 @@
                   :value="doc.date"
                   :placeholder="'Date'"
                   @change="value => doc.set('date', value)"
-                  input-class="bg-gray-100 rounded-lg px-3 py-2 text-base"
+                  input-class="bg-gray-100 px-3 py-2 text-base"
                   :show-label="true"
                 />
               </div>
@@ -59,7 +59,7 @@
                   :value="doc.referenceNumber"
                   :placeholder="'Reference Number'"
                   @change="value => doc.set('referenceNumber', value)"
-                  input-class="bg-gray-100 rounded-lg p-2 text-base"
+                  input-class="bg-gray-100 p-2 text-base"
                   :show-label="true"
                 />
                 <FormControl
@@ -68,7 +68,7 @@
                   :value="doc.date"
                   :placeholder="'Reference Date'"
                   @change="value => doc.set('referenceDate', value)"
-                  input-class="bg-gray-100 rounded-lg px-3 py-2 text-base"
+                  input-class="bg-gray-100 px-3 py-2 text-base"
                   :show-label="true"
                 />
               </div>

src/pages/ListView/List.vue

@@ -21,7 +21,7 @@
     </div>
     <div class="overflow-y-auto">
       <div
-        class="px-3 flex hover:bg-gray-100 rounded"
+        class="px-3 flex hover:bg-gray-100 rounded-md"
         v-for="(doc, i) in data"
         :key="doc.name"
       >

src/pages/Settings/Settings.vue

@@ -11,7 +11,7 @@
         <div
           v-for="(tab, i) in tabs"
           :key="tab.label"
-          class="p-2 rounded-6px hover:bg-white flex flex-col items-center justify-center cursor-pointer"
+          class="p-2 rounded-md hover:bg-white flex flex-col items-center justify-center cursor-pointer"
           :class="i === activeTab && 'bg-white shadow text-blue-500'"
           @click="activeTab = i"
         >

src/pages/Settings/TabGeneral.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- <div class="bg-blue-500 px-6 py-5 rounded-12px flex justify-between items-center">
+    <!-- <div class="bg-blue-500 px-6 py-5 rounded-lg flex justify-between items-center">
       <div class="flex items-center">
         <div class="bg-white rounded-full w-16 h-16 flex-center">
           <svg class="w-6 h-6" viewBox="0 0 24 21" xmlns="http://www.w3.org/2000/svg">

tailwind.config.js

@@ -40,9 +40,11 @@ module.exports = {
         button: '0 0.5px 0 0 rgba(0, 0, 0, 0.08)'
       },
       borderRadius: {
-        '5px': '5px',
+        sm: '0.25rem', // 4px
-        '6px': '6px',
+        default: '0.313rem', // 5px
-        '12px': '12px'
+        md: '0.375rem', // 6px
+        lg: '0.5rem', // 8px
+        xl: '0.75rem' // 12px
       },
       colors: {
         black: '#112B42',
@@ -61,7 +63,7 @@ module.exports = {
     }
   },
   variants: {
-    margin: ['responsive', 'first', 'hover', 'focus'],
+    margin: ['responsive', 'first', 'last', 'hover', 'focus'],
     backgroundColor: ['responsive', 'first', 'hover', 'focus', 'focus-within']
   },
   plugins: []