From ab7cb7f02c3a2c1474c9306a508d82e334a59d8a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 4 Mar 2025 11:42:07 +0300
Subject: [PATCH] Migrated classes to TW4

---
 apps/volt/doc/skeleton/CardDoc.vue     | 4 ++--
 apps/volt/doc/skeleton/ListDoc.vue     | 4 ++--
 apps/volt/doc/timeline/TemplateDoc.vue | 8 ++++----
 apps/volt/volt/checkbox/index.vue      | 4 ++--
 apps/volt/volt/inputmask/index.vue     | 2 +-
 apps/volt/volt/inputnumber/index.vue   | 6 +++---
 apps/volt/volt/inputtext/index.vue     | 2 +-
 apps/volt/volt/slider/index.vue        | 4 ++--
 apps/volt/volt/textarea/index.vue      | 2 +-
 9 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/volt/doc/skeleton/CardDoc.vue b/apps/volt/doc/skeleton/CardDoc.vue
index 2a8fd2430..f4842f6b2 100644
--- a/apps/volt/doc/skeleton/CardDoc.vue
+++ b/apps/volt/doc/skeleton/CardDoc.vue
@@ -3,7 +3,7 @@
         <p>Sample Card implementation using different Skeleton components and Tailwind CSS utilities.</p>
     </DocSectionText>
     <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <div class="flex mb-4">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                 <div>
@@ -29,7 +29,7 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
      <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <div class="flex mb-4">
                 <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                 <div>
diff --git a/apps/volt/doc/skeleton/ListDoc.vue b/apps/volt/doc/skeleton/ListDoc.vue
index c0420b1dd..b0e5f9495 100644
--- a/apps/volt/doc/skeleton/ListDoc.vue
+++ b/apps/volt/doc/skeleton/ListDoc.vue
@@ -3,7 +3,7 @@
         <p>Sample List implementation using different Skeleton components and Tailwind CSS utilities.</p>
     </DocSectionText>
     <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <ul class="m-0 p-0 list-none">
                 <li class="mb-4">
                     <div class="flex">
@@ -54,7 +54,7 @@ import { ref } from 'vue';
 const code = ref(`
 <template>
     <div class="card">
-        <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
+        <div class="rounded-sm border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
             <ul class="m-0 p-0 list-none">
                 <li class="mb-4">
                     <div class="flex">
diff --git a/apps/volt/doc/timeline/TemplateDoc.vue b/apps/volt/doc/timeline/TemplateDoc.vue
index c1fd39f0a..20d712274 100644
--- a/apps/volt/doc/timeline/TemplateDoc.vue
+++ b/apps/volt/doc/timeline/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <Timeline :value="events" align="alternate">
             <template #marker="slotProps">
-                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-xs" :style="{ backgroundColor: slotProps.item.color }">
                     <i :class="slotProps.item.icon"></i>
                 </span>
             </template>
@@ -18,7 +18,7 @@
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <img v-if="slotProps.item.image" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.item.image}`" :alt="slotProps.item.name" width="200" class="shadow-xs" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
@@ -48,7 +48,7 @@ const code = ref(`
     <div class="card">
         <Timeline :value="events" align="alternate">
             <template #marker="slotProps">
-                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" :style="{ backgroundColor: slotProps.item.color }">
+                <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-xs" :style="{ backgroundColor: slotProps.item.color }">
                     <i :class="slotProps.item.icon"></i>
                 </span>
             </template>
@@ -61,7 +61,7 @@ const code = ref(`
                         {{ slotProps.item.date }}
                     </template>
                     <template #content>
-                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-sm" />
+                        <img v-if="slotProps.item.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.item.image}\`" :alt="slotProps.item.name" width="200" class="shadow-xs" />
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
diff --git a/apps/volt/volt/checkbox/index.vue b/apps/volt/volt/checkbox/index.vue
index 54169adc2..7493b5cef 100644
--- a/apps/volt/volt/checkbox/index.vue
+++ b/apps/volt/volt/checkbox/index.vue
@@ -19,8 +19,8 @@ const theme = ref({
         p-large:w-6 p-large:h-6`,
     input: `peer cursor-pointer disabled:cursor-default appearance-none 
         absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
-        border border-transparent rounded-sm`,
-    box: `flex justify-center items-center rounded-sm w-5 h-5
+        border border-transparent rounded-xs`,
+    box: `flex justify-center items-center rounded-xs w-5 h-5
         border border-surface-300 dark:border-surface-700
         bg-surface-0 dark:bg-surface-950
         text-surface-700 dark:text-surface-0
diff --git a/apps/volt/volt/inputmask/index.vue b/apps/volt/volt/inputmask/index.vue
index fa2dfcf50..7c742cefd 100644
--- a/apps/volt/volt/inputmask/index.vue
+++ b/apps/volt/volt/inputmask/index.vue
@@ -14,7 +14,7 @@ import { ref } from 'vue';
 import { ptViewMerge } from '../utils';
 
 const theme = ref({
-    root: `appearance-none rounded-md outline-none
+    root: `appearance-none rounded-md outline-hidden
         bg-surface-0 dark:bg-surface-950
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
diff --git a/apps/volt/volt/inputnumber/index.vue b/apps/volt/volt/inputnumber/index.vue
index daa18f522..c9c59e2ec 100644
--- a/apps/volt/volt/inputnumber/index.vue
+++ b/apps/volt/volt/inputnumber/index.vue
@@ -14,7 +14,7 @@ const theme = ref({
     root: `inline-flex relative 
         p-vertical:flex-col p-fluid:w-full`,
     pcInputText: {
-        root: `appearance-none rounded-md outline-none flex-auto
+        root: `appearance-none rounded-md outline-hidden flex-auto
         bg-surface-0 dark:bg-surface-950
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
@@ -35,7 +35,7 @@ const theme = ref({
         p-fluid:w-[1%] p-fluid:p-vertical:w-full`
     },
     buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`,
-    incrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+    incrementButton: `flex items-center justify-center grow-0 shrink-0 basis-auto cursor-pointer w-10
         bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
         border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
         text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
@@ -48,7 +48,7 @@ const theme = ref({
         p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
         p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`,
     incrementIcon: ``,
-    decrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+    decrementButton: `flex items-center justify-center grow-0 shrink-0 basis-auto cursor-pointer w-10
         bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
         border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
         text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
diff --git a/apps/volt/volt/inputtext/index.vue b/apps/volt/volt/inputtext/index.vue
index 61b3bc6ee..013e90b7e 100644
--- a/apps/volt/volt/inputtext/index.vue
+++ b/apps/volt/volt/inputtext/index.vue
@@ -14,7 +14,7 @@ import { ref } from 'vue';
 import { ptViewMerge } from '../utils';
 
 const theme = ref({
-    root: `appearance-none rounded-md outline-none
+    root: `appearance-none rounded-md outline-hidden
         bg-surface-0 dark:bg-surface-950
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0
diff --git a/apps/volt/volt/slider/index.vue b/apps/volt/volt/slider/index.vue
index 39b6d6987..1307e59a4 100644
--- a/apps/volt/volt/slider/index.vue
+++ b/apps/volt/volt/slider/index.vue
@@ -25,10 +25,10 @@ const handleCommon = `cursor-grab touch-none flex items-center justify-center h-
         p-vertical:start-1/2 p-vertical:-mb-[10px] p-vertical:-ms-[10px]`;
 
 const theme = ref({
-    root: `relative bg-surface-200 dark:bg-surface-700 rounded-sm
+    root: `relative bg-surface-200 dark:bg-surface-700 rounded-xs
             p-horizontal:h-[3px]
             p-vertical:min-h-[100px] p-vertical:w-[3px]`,
-    range: `block bg-primary rounded-sm
+    range: `block bg-primary rounded-xs
             p-horizontal:top-0 p-horizontal:start-0 p-horizontal:h-full
             p-vertical:bottom-0 p-vertical:start-0 p-vertical:w-full`,
     handle: handleCommon,
diff --git a/apps/volt/volt/textarea/index.vue b/apps/volt/volt/textarea/index.vue
index c7988f10a..ad9c5470f 100644
--- a/apps/volt/volt/textarea/index.vue
+++ b/apps/volt/volt/textarea/index.vue
@@ -14,7 +14,7 @@ import { ref } from 'vue';
 import { ptViewMerge } from '../utils';
 
 const theme = ref({
-    root: `appearance-none rounded-md outline-none
+    root: `appearance-none rounded-md outline-hidden
         bg-surface-0 dark:bg-surface-950
         p-filled:bg-surface-50 dark:p-filled:bg-surface-800
         text-surface-700 dark:text-surface-0