fix: Поменять стили, убранные в новой версии Tailwind (refs: #PBDEV-3673)

src/components/accordion/BuiAccordionTrigger.vue

@@ -10,28 +10,28 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
 
 <template>
   <AccordionHeader
-    class="flex flex-col border-border bg-primary/16 p-2 data-[state=closed]:rounded-sm data-[state=open]:rounded-t-sm data-[state=open]:border-b"
+    class="border-border bg-primary/16 flex flex-col p-2 data-[state=closed]:rounded-sm data-[state=open]:rounded-t-sm data-[state=open]:border-b"
     as="div"
   >
     <div class="flex justify-between gap-2">
       <AccordionTrigger
         v-bind="props"
         :class="
           cn(
-            'flex flex-1 items-center gap-2 rounded align-middle text-base font-semibold leading-6 ring-offset-background transition-all hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30 [&[data-state=open]>svg]:rotate-180',
+            'ring-offset-background focus-visible:ring-ring flex flex-1 items-center gap-2 rounded-sm align-middle text-base leading-6 font-semibold transition-all hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-30 [&[data-state=open]>svg]:rotate-180',
             props.class
           )
         "
       >
         <ChevronDown
-          class="h-4 w-4 shrink-0 rounded-sm bg-primary/[0.56] text-primary-foreground transition-transform duration-200 dark:bg-primary"
+          class="bg-primary/[0.56] text-primary-foreground dark:bg-primary h-4 w-4 shrink-0 rounded-sm transition-transform duration-200"
         />
         <slot />
       </AccordionTrigger>
       <slot name="actions" />
     </div>
 
-    <p v-if="$slots.description" class="mx-6 mt-2 align-middle text-xs font-normal leading-4">
+    <p v-if="$slots.description" class="mx-6 mt-2 align-middle text-xs leading-4 font-normal">
       <slot name="description" />
     </p>
   </AccordionHeader>

src/components/accordion/BuiAdvancedAccordionTrigger.vue

@@ -34,7 +34,7 @@ const props = defineProps<
         v-bind="props"
         :class="
           cn(
-            'flex flex-1 items-center gap-2 rounded align-middle text-base font-semibold leading-6 ring-offset-background transition-all hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none  [&[data-state=open]>svg]:rotate-180',
+            'ring-offset-background focus-visible:ring-ring flex flex-1 items-center gap-2 rounded-sm align-middle text-base leading-6 font-semibold transition-all hover:underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none [&[data-state=open]>svg]:rotate-180',
             props.class,
             props.isDisabledAsNormal ? 'disabled:opacity-100' : 'disabled:opacity-30'
           )
@@ -43,7 +43,7 @@ const props = defineProps<
         <ChevronDown
           :class="
             cn(
-              'h-4 w-4 shrink-0 rounded-sm text-primary-foreground transition-transform duration-200',
+              'text-primary-foreground h-4 w-4 shrink-0 rounded-sm transition-transform duration-200',
               props.iconBgClass
                 ? `${props.iconBgClass} dark:${props.iconBgClass}`
                 : 'bg-primary/[0.56] dark:bg-primary',
@@ -60,7 +60,7 @@ const props = defineProps<
       v-if="$slots.description"
       :class="
         cn(
-          'mx-6 mt-2 align-middle text-xs font-normal leading-4',
+          'mx-6 mt-2 align-middle text-xs leading-4 font-normal',
           props.descriptionColorClass ? props.descriptionColorClass : ''
         )
       "

src/components/alert/index.ts

@@ -4,7 +4,7 @@ export { default as BuiAlert } from './BuiAlert.vue'
 export { default as BuiAlertTitle } from './BuiAlertTitle.vue'
 export { default as BuiAlertDescription } from './BuiAlertDescription.vue'
 
-export const alertVariants = cva('flex w-full rounded border-l-2 p-4 [&_svg]:text-foreground', {
+export const alertVariants = cva('flex w-full rounded-sm border-l-2 p-4 [&_svg]:text-foreground', {
   variants: {
     variant: {
       default: 'bg-background text-foreground',

src/components/button/index.ts

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority'
 export { default as BuiButton } from './BuiButton.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none',
+  'inline-flex items-center justify-center rounded-sm text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none',
   {
     variants: {
       variant: {

src/components/calendar/BuiCalendar.vue

@@ -301,7 +301,7 @@ const vCalendarSlots = computed(() => {
   @apply stroke-primary text-primary mr-1;
 }
 .vc-time-select-group select {
-  @apply bg-background text-foreground appearance-none p-1 text-center outline-none;
+  @apply bg-background text-foreground appearance-none p-1 text-center outline-hidden;
 }
 .vc-time-weekday {
   @apply text-muted-foreground tracking-wide;

src/components/card/BuiCard.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 <template>
   <div
     :class="
-      cn('border-border/16 bg-card text-card-foreground shadow-card rounded border', props.class)
+      cn('border-border/16 bg-card text-card-foreground shadow-card rounded-sm border', props.class)
     "
   >
     <slot />

src/components/health/BuiHealth.vue

@@ -50,7 +50,7 @@ const indicators = computed(() => {
   <div
     :class="
       cn(
-        `relative w-full overflow-hidden bg-slate-400 bg-opacity-20 after:absolute after:right-0 after:top-0 after:bg-slate-400 after:bg-opacity-10`,
+        `relative w-full overflow-hidden bg-slate-400/20 after:absolute after:top-0 after:right-0 after:bg-slate-400/10`,
         healthVariants({ variant }),
         props.class
       )
@@ -61,7 +61,7 @@ const indicators = computed(() => {
       <div
         :class="
           cn(
-            'absolute box-content flex-1 bg-slate-400 transition-all duration-300 after:absolute after:right-0 after:top-0 after:bg-slate-400',
+            'absolute box-content flex-1 bg-slate-400 transition-all duration-300 after:absolute after:top-0 after:right-0 after:bg-slate-400',
             healthVariants({ variant }),
             indicator.class
           )

src/components/input/BuiColorInput.vue

@@ -63,7 +63,7 @@ watch(pickedColor, () => {
           :class="cn('absolute top-1.5 left-2 flex flex-row items-center gap-1', ui?.badgeClass)"
         >
           <PaletteIcon class="h-4 w-4 shrink-0" />
-          <div class="h-4 w-4 rounded" :style="{ backgroundColor: pickedColor }"></div>
+          <div class="h-4 w-4 rounded-sm" :style="{ backgroundColor: pickedColor }"></div>
           <div class="text-foreground/[.56] font-bold">#</div>
         </div>
         <BuiInput

src/components/input/index.ts

@@ -6,7 +6,7 @@ export { default as BuiBadgedInput } from './BuiBadgedInput.vue'
 export { default as BuiColorInput } from './BuiColorInput.vue'
 
 export const inputVariants = cva(
-  'flex h-8 w-full rounded bg-background border px-2 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 dark:disabled:opacity-55 read-only:opacity-30 dark:read-only:opacity-55 aria-invalid:border-destructive-foreground',
+  'flex h-8 w-full rounded-sm bg-background border px-2 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 dark:disabled:opacity-55 read-only:opacity-30 dark:read-only:opacity-55 aria-invalid:border-destructive-foreground',
   {
     variants: {
       variant: {

src/components/table/BuiDataTable.vue

@@ -496,7 +496,7 @@ watch(
                   <div class="mt-1 flex w-full items-center justify-between">
                     <div class="flex flex-row justify-start gap-1">
                       <div
-                        class="bg-background shadow-top-shadow relative -mb-[6px] inline-block rounded-t-lg px-4 py-2 text-sm font-medium"
+                        class="bg-background shadow-top relative -mb-[6px] inline-block rounded-t-lg px-4 py-2 text-sm font-medium"
                       >
                         <div class="bg-background absolute bottom-0 -left-2 h-2 w-2"></div>
                         <div

src/components/table/BuiTable.vue

@@ -6,7 +6,7 @@ const props = defineProps<{ class?: string }>()
 </script>
 
 <template>
-  <BuiScrollArea class="border-border/16 w-full grow overflow-auto rounded border">
+  <BuiScrollArea class="border-border/16 w-full grow overflow-auto rounded-sm border">
     <slot name="columnVisibility" />
     <table :class="cn('min-h-[90px] w-full caption-top text-sm', props.class)">
       <slot />

src/components/tabs/index.ts

@@ -11,7 +11,7 @@ export const tabsListVariants = cva('inline-flex items-center justify-center rou
       default: 'bg-foreground/4 dark:bg-white/4 text-muted-foreground p-0',
       ghost: 'bg-background bg-text-foreground',
       vertical:
-        'w-70 shrink-0 bg-tabs-sidebar text-muted-foreground p-0 flex flex-col justify-start rounded-none shadow-tab-sidebar-shadow'
+        'w-70 shrink-0 bg-tabs-sidebar text-muted-foreground p-0 flex flex-col justify-start rounded-none shadow-tab-sidebar'
     }
   },
   defaultVariants: {
@@ -29,7 +29,7 @@ export const tabsTriggerVariants = cva(
         ghost:
           'px-3 py-1 whitespace-nowrap border-transparent text-muted-foreground pb-0 [&_div]:pb-0.5 data-[state=active]:[&_div]:border-b-2 data-[state=active]:[&_div]:border-primary hover:text-foreground',
         vertical:
-          'px-3 py-1 border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar-shadow border-l-2 border-b-0 w-full h-fit justify-start pl-6! hover:bg-primary/16'
+          'px-3 py-1 border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar border-l-2 border-b-0 w-full h-fit justify-start pl-6! hover:bg-primary/16'
       }
     },
     defaultVariants: {

src/components/textarea/index.ts

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority'
 export { default as BuiTextarea } from './BuiTextarea.vue'
 
 export const textareaVariants = cva(
-  'flex min-h-[80px] w-full rounded border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 dark:disabled:opacity-55 read-only:opacity-30 dark:read-only:opacity-55 aria-invalid:border-destructive-foreground',
+  'flex min-h-[80px] w-full rounded-sm border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 dark:disabled:opacity-55 read-only:opacity-30 dark:read-only:opacity-55 aria-invalid:border-destructive-foreground',
   {
     variants: {
       variant: {

src/stories/components/SubForm.vue

@@ -8,7 +8,7 @@ const { value: value2, handleChange: handleChange2 } = useBuiField('example')
 </script>
 
 <template>
-  <div class="rounded px-4 py-4 shadow-sm space-y-2">
+  <div class="space-y-2 rounded-sm px-4 py-4 shadow-sm">
     <h2 class="text-lg">Sub form</h2>
     <div class="flex items-center justify-between space-y-2">
       <BuiLabel>Field 1:</BuiLabel> {{ value1 }}