From 27dcb3a4cc66154a31bb7051397300fee7caaa46 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 7 Apr 2025 22:25:53 +0300
Subject: [PATCH] M: Improve color animations

---
 rsconcept/frontend/src/components/control/mini-button.tsx   | 2 +-
 rsconcept/frontend/src/components/control/submit-button.tsx | 2 +-
 rsconcept/frontend/src/components/data-table/table-body.tsx | 2 +-
 .../frontend/src/components/dropdown/dropdown-button.tsx    | 2 +-
 .../features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx   | 2 +-
 rsconcept/frontend/src/styling/constants.css                | 4 ++--
 rsconcept/frontend/src/styling/utilities.css                | 6 ++++++
 7 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/rsconcept/frontend/src/components/control/mini-button.tsx b/rsconcept/frontend/src/components/control/mini-button.tsx
index 8c6497cd..6ad9b72e 100644
--- a/rsconcept/frontend/src/components/control/mini-button.tsx
+++ b/rsconcept/frontend/src/components/control/mini-button.tsx
@@ -39,7 +39,7 @@ export function MiniButton({
       tabIndex={tabIndex ?? -1}
       className={clsx(
         'rounded-lg',
-        'clr-text-controls cc-animate-color',
+        'clr-text-controls cc-animate-background',
         'cursor-pointer disabled:cursor-auto',
         noHover ? 'outline-hidden' : 'clr-hover',
         !noPadding && 'px-1 py-1',
diff --git a/rsconcept/frontend/src/components/control/submit-button.tsx b/rsconcept/frontend/src/components/control/submit-button.tsx
index 1895cb84..d44edd15 100644
--- a/rsconcept/frontend/src/components/control/submit-button.tsx
+++ b/rsconcept/frontend/src/components/control/submit-button.tsx
@@ -25,7 +25,7 @@ export function SubmitButton({ text = 'ОК', icon, disabled, loading, className
         'border',
         'font-medium',
         'clr-btn-primary cc-animate-color',
-        'select-none disabled:cursor-auto',
+        'select-none cursor-pointer disabled:cursor-auto',
         loading && 'cursor-progress',
         className
       )}
diff --git a/rsconcept/frontend/src/components/data-table/table-body.tsx b/rsconcept/frontend/src/components/data-table/table-body.tsx
index 7e0b4c55..d66faf9e 100644
--- a/rsconcept/frontend/src/components/data-table/table-body.tsx
+++ b/rsconcept/frontend/src/components/data-table/table-body.tsx
@@ -75,7 +75,7 @@ export function TableBody<TData>({
           key={row.id}
           className={clsx(
             'cc-scroll-row',
-            'clr-hover cc-animate-color',
+            'clr-hover cc-animate-background duration-300',
             !noHeader && 'scroll-mt-[calc(2px+2rem)]',
             table.options.enableRowSelection && row.getIsSelected()
               ? 'clr-selected'
diff --git a/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx b/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
index 5c1b94eb..bc9443ae 100644
--- a/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
+++ b/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
@@ -37,7 +37,7 @@ export function DropdownButton({
         'px-3 py-1 inline-flex items-center gap-2',
         'text-left text-sm text-ellipsis whitespace-nowrap',
         'disabled:clr-text-controls',
-        'cc-animate-color',
+        'cc-animate-background',
         !!onClick ? 'clr-hover cursor-pointer disabled:cursor-auto' : 'clr-btn-default',
         className
       )}
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx
index df9751dc..71132f26 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx
@@ -47,7 +47,7 @@ export function DlgShowAST() {
         {!isDragging && hoverNodeDebounced ? (
           <div key={hoverNodeDebounced.uid}>
             <span>{expression.slice(0, hoverNodeDebounced.start)}</span>
-            <span className='bg-sec-200 cc-animate-color starting:bg-prim-100 duration-500'>
+            <span className='bg-sec-200 cc-animate-background starting:bg-prim-100 duration-500'>
               {expression.slice(hoverNodeDebounced.start, hoverNodeDebounced.finish)}
             </span>
             <span>{expression.slice(hoverNodeDebounced.finish)}</span>
diff --git a/rsconcept/frontend/src/styling/constants.css b/rsconcept/frontend/src/styling/constants.css
index 88742c3c..c4903493 100644
--- a/rsconcept/frontend/src/styling/constants.css
+++ b/rsconcept/frontend/src/styling/constants.css
@@ -76,8 +76,8 @@
   --clr-prim-999:     oklch(095% 0 0deg);
 
   --clr-sec-0:        oklch(100% 0 0deg);
-  --clr-sec-100:      oklch(025% 0.100 295deg);
-  --clr-sec-200:      oklch(035% 0.100 295deg);
+  --clr-sec-100:      oklch(025% 0.200 295deg);
+  --clr-sec-200:      oklch(035% 0.150 295deg);
   --clr-sec-300:      oklch(045% 0.150 295deg);
   --clr-sec-400:      oklch(055% 0.200 295deg);
   --clr-sec-600:      oklch(065% 0.250 295deg);
diff --git a/rsconcept/frontend/src/styling/utilities.css b/rsconcept/frontend/src/styling/utilities.css
index e71a4e80..527b0952 100644
--- a/rsconcept/frontend/src/styling/utilities.css
+++ b/rsconcept/frontend/src/styling/utilities.css
@@ -195,6 +195,12 @@
   transition-duration: var(--duration-select);
 }
 
+@utility cc-animate-background {
+  transition-property: background-color;
+  transition-timing-function: var(--ease-bezier);
+  transition-duration: var(--duration-select);
+}
+
 @utility cc-mask-sides {
   --mask-border-size: 2rem;