M: Improve color animations

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',

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
       )}

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'

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
       )}

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>

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);

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;