R: Improve styling semantics pt2

rsconcept/frontend/src/app/Navigation/NavigationButton.tsx

@@ -31,7 +31,7 @@ function NavigationButton({
       className={clsx(
         'mr-1 h-full', // prettier: split lines
         'flex items-center gap-1',
-        'clr-btn-nav',
+        'clr-btn-nav cc-animate-color',
         'rounded-xl',
         'transition duration-500',
         'font-controls whitespace-nowrap',

rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx

@@ -21,7 +21,7 @@ function ToggleNavigation() {
       data-tooltip-id={globals.tooltip}
       data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}
       style={{
-        transitionProperty: 'height, width',
+        transitionProperty: 'height, width, background-color',
         transitionDuration: `${PARAMETER.moveDuration}ms`,
         height: noNavigationAnimation ? '1.2rem' : '3rem',
         width: noNavigationAnimation ? '3rem' : '1.2rem'

rsconcept/frontend/src/components/select/SelectLocation.tsx

@@ -59,7 +59,7 @@ function SelectLocation({ value, folderTree, dense, prefix, onClick, className,
               !dense && 'min-h-[2.0825rem] sm:min-h-[2.3125rem]',
               'pr-3 py-1 flex items-center gap-2',
               'cc-scroll-row',
-              'clr-hover',
+              'clr-hover cc-animate-color',
               'cursor-pointer',
               'leading-3 sm:leading-4',
               activeNode === item && 'clr-selected'

rsconcept/frontend/src/components/ui/Button.tsx

@@ -43,6 +43,7 @@ function Button({
       className={clsx(
         'inline-flex gap-2 items-center justify-center',
         'select-none disabled:cursor-auto',
+        'cc-animate-color',
         {
           'border rounded': !noBorder,
           'px-1': dense,

rsconcept/frontend/src/components/ui/Checkbox.tsx

@@ -66,8 +66,9 @@ function Checkbox({
         className={clsx(
           'max-w-[1rem] min-w-[1rem] h-4', // prettier: split lines
           'border rounded-sm ',
+          'cc-animate-color',
           {
-            'clr-primary': value !== false,
+            'bg-sec-600 text-sec-0': value !== false,
             'bg-prim-100': value === false
           }
         )}

rsconcept/frontend/src/components/ui/CheckboxTristate.tsx

@@ -67,8 +67,9 @@ function CheckboxTristate({
         className={clsx(
           'w-4 h-4', // prettier: split lines
           'border rounded-sm',
+          'cc-animate-color',
           {
-            'clr-primary': value !== false,
+            'bg-sec-600 text-sec-0': value !== false,
             'bg-prim-100': value === false
           }
         )}

rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx

@@ -47,7 +47,7 @@ function PaginationTools<TData>({
       <div className='flex'>
         <button
           type='button'
-          className='clr-hover clr-text-controls'
+          className='clr-hover clr-text-controls cc-animate-color'
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
         >
@@ -55,7 +55,7 @@ function PaginationTools<TData>({
         </button>
         <button
           type='button'
-          className='clr-hover clr-text-controls'
+          className='clr-hover clr-text-controls cc-animate-color'
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
@@ -75,7 +75,7 @@ function PaginationTools<TData>({
         />
         <button
           type='button'
-          className='clr-hover clr-text-controls'
+          className='clr-hover clr-text-controls cc-animate-color'
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
@@ -83,7 +83,7 @@ function PaginationTools<TData>({
         </button>
         <button
           type='button'
-          className='clr-hover clr-text-controls'
+          className='clr-hover clr-text-controls cc-animate-color'
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
         >

rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx

@@ -71,7 +71,8 @@ function TableBody<TData>({
         <tr
           key={row.id}
           className={clsx(
-            'cc-scroll-row clr-hover',
+            'cc-scroll-row',
+            'clr-hover cc-animate-color',
             !noHeader && 'scroll-mt-[calc(2px+2rem)]',
             row.getIsSelected() ? 'clr-selected' : index % 2 === 0 ? 'bg-prim-200' : 'bg-prim-100'
           )}

rsconcept/frontend/src/components/ui/DropdownButton.tsx

@@ -39,6 +39,7 @@ function DropdownButton({
         'px-3 py-1 inline-flex items-center gap-2',
         'text-left text-sm overflow-ellipsis whitespace-nowrap',
         'disabled:clr-text-controls',
+        'cc-animate-color',
         {
           'clr-hover': onClick,
           'cursor-pointer disabled:cursor-auto': onClick,

rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx

@@ -9,7 +9,7 @@ function DropdownCheckbox({ setValue, disabled, ...restProps }: CheckboxProps) {
       className={clsx(
         'px-3 py-1',
         'text-left overflow-ellipsis whitespace-nowrap',
-        'disabled:clr-text-controls',
+        'disabled:clr-text-controls cc-animate-color',
         !!setValue && !disabled && 'clr-hover'
       )}
     >

rsconcept/frontend/src/components/ui/Indicator.tsx

@@ -19,7 +19,7 @@ function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ..
   return (
     <div
       className={clsx(
-        'clr-btn-clear',
+        'clr-text-controls',
         'outline-none',
         {
           'px-1 py-1': !noPadding

rsconcept/frontend/src/components/ui/MiniButton.tsx

@@ -35,7 +35,7 @@ function MiniButton({
       tabIndex={tabIndex ?? -1}
       className={clsx(
         'rounded-lg',
-        'clr-btn-clear',
+        'clr-text-controls cc-animate-color',
         'cursor-pointer disabled:cursor-auto',
         {
           'px-1 py-1': !noPadding,

rsconcept/frontend/src/components/ui/SelectTree.tsx

@@ -89,7 +89,7 @@ function SelectTree<ItemType>({
             className={clsx(
               'pr-3 pl-6 border-b',
               'cc-scroll-row',
-              'bg-prim-200 clr-hover',
+              'bg-prim-200 clr-hover cc-animate-color',
               'cursor-pointer',
               value === item && 'clr-selected'
             )}

rsconcept/frontend/src/components/ui/SelectorButton.tsx

@@ -41,6 +41,7 @@ function SelectorButton({
         'text-sm font-controls select-none',
         'text-btn clr-text-controls',
         'disabled:cursor-auto cursor-pointer',
+        'cc-animate-color',
         {
           'clr-hover': transparent,
           'border': !transparent

rsconcept/frontend/src/components/ui/SubmitButton.tsx

@@ -24,7 +24,7 @@ function SubmitButton({ text = 'ОК', icon, disabled, loading, className, ...re
         'px-3 py-1 flex gap-2 items-center justify-center',
         'border',
         'font-medium',
-        'clr-btn-primary',
+        'clr-btn-primary cc-animate-color',
         'select-none disabled:cursor-auto',
         loading && 'cursor-progress',
         className

rsconcept/frontend/src/components/ui/TabLabel.tsx

@@ -20,7 +20,7 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
       className={clsx(
         'min-w-[5.5rem] h-full',
         'px-2 py-1 flex justify-center',
-        'clr-hover bg-prim-200',
+        'clr-hover bg-prim-200 cc-animate-color',
         'text-sm whitespace-nowrap font-controls',
         'select-none hover:cursor-pointer',
         'outline-none',

rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx

@@ -21,7 +21,7 @@ function WordformButton({ text, example, grams, onSelectGrams, isSelected, ...re
         'p-1',
         'border rounded-none',
         'cursor-pointer',
-        'clr-btn-clear clr-hover',
+        'clr-text-controls clr-hover cc-animate-color',
         isSelected && 'clr-selected'
       )}
       {...restProps}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx

@@ -33,7 +33,7 @@ function RSLocalButton({
         'w-[1.7rem] sm:w-[2rem] h-5 sm:h-6',
         'cursor-pointer disabled:cursor-default',
         'rounded-none',
-        'clr-hover clr-btn-clear',
+        'clr-hover clr-text-controls cc-animate-color',
         'font-math',
         className
       )}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx

@@ -22,7 +22,7 @@ function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps) {
         'h-5 sm:h-6',
         'px-1',
         'outline-none',
-        'clr-hover clr-btn-clear',
+        'clr-hover clr-text-controls cc-animate-color',
         'font-math',
         'cursor-pointer disabled:cursor-default',
         {

rsconcept/frontend/src/styling/styles.css

@@ -34,51 +34,67 @@
   }
 
   .clr-btn-default {
+    color: var(--clr-prim-999);
+    background-color: var(--clr-prim-200);
+
+    &:disabled {
+      color: var(--clr-prim-800);
       background-color: var(--clr-prim-200);
     }
 
-  .clr-primary,
+    &:hover:not(:disabled) {
-  .clr-btn-primary:hover,
+      color: var(--clr-prim-999);
-  .clr-btn-primary:focus-visible {
+      background-color: var(--clr-sec-100);
-    @apply transition;
+    }
-    color: var(--clr-sec-0);
-    background-color: var(--clr-sec-600);
   }
 
   .clr-btn-primary {
     color: var(--clr-prim-999);
     background-color: var(--clr-sec-200);
-  }
 
-  :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
+    &:disabled {
-    @apply transition;
       color: var(--clr-prim-800);
       background-color: var(--clr-prim-200);
     }
 
-  :is(.clr-hover, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
+    &:hover:not(:disabled),
-    @apply transition;
+    &:focus-visible {
-    color: var(--clr-prim-999);
+      color: var(--clr-sec-0);
-    background-color: var(--clr-sec-100);
+      background-color: var(--clr-sec-600);
     }
 
-  :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
+    &:focus-visible,
     .focus-frame:has(:focus-visible) {
       outline-width: 2px;
       outline-style: solid;
       outline-color: var(--clr-sec-600);
     }
+  }
 
-  .clr-text-controls,
+  .clr-btn-nav {
-  .clr-btn-nav,
-  .clr-btn-clear {
     color: var(--clr-prim-800);
-    background-color: transparent;
+
+    &:hover:not(:disabled) {
+      background-color: var(--clr-sec-100);
+    }
+
     &:disabled {
       color: var(--clr-prim-600);
     }
   }
 
+  .clr-hover:hover:not(:disabled) {
+    color: var(--clr-prim-999);
+    background-color: var(--clr-sec-100);
+  }
+
+  :is(.clr-outline, .focus-frame):focus-visible,
+  .focus-frame:has(:focus-visible) {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--clr-sec-600);
+  }
+
   .clr-text-default,
   input:disabled:not(::placeholder),
   textarea:disabled:not(::placeholder) {
@@ -87,6 +103,14 @@
     color: var(--clr-prim-999);
   }
 
+  .clr-text-controls {
+    color: var(--clr-prim-800);
+    background-color: transparent;
+    &:disabled {
+      color: var(--clr-prim-600);
+    }
+  }
+
   .icon-primary {
     :not([disabled]) > & {
       color: var(--clr-sec-800);
@@ -164,12 +188,6 @@
     box-shadow: 0 1px 2px 0 var(--clr-prim-400);
   }
 
-  .cc-animate-position {
-    transition-property: transform top left bottom right margin padding;
-    transition-timing-function: var(--transition-bezier);
-    transition-duration: var(--duration-move);
-  }
-
   .cc-fade-in {
     opacity: 1;
 
@@ -182,6 +200,12 @@
     }
   }
 
+  .cc-animate-position {
+    transition-property: transform top left bottom right margin padding;
+    transition-timing-function: var(--transition-bezier);
+    transition-duration: var(--duration-move);
+  }
+
   .cc-animate-modal {
     clip-path: inset(0% 0% 0% 0%);
     opacity: 1;
@@ -195,4 +219,10 @@
       opacity: 0;
     }
   }
+
+  .cc-animate-color {
+    transition-property: color, background-color;
+    transition-timing-function: var(--transition-bezier);
+    transition-duration: var(--duration-select);
+  }
 }