F: Improve hover buttons design

rsconcept/frontend/src/components/control/button.tsx

@@ -40,7 +40,7 @@ export function Button({
       className={cn(
         'inline-flex gap-2 items-center justify-center',
         'font-medium select-none disabled:cursor-auto disabled:opacity-75',
-        'bg-secondary text-secondary-foreground cc-hover cc-animate-color',
+        'bg-secondary text-secondary-foreground cc-hover-bg cc-animate-color',
         dense ? 'px-1' : 'px-3 py-1',
         loading ? 'cursor-progress' : 'cursor-pointer',
         noOutline ? 'outline-hidden focus-visible:bg-selected' : 'focus-outline',

rsconcept/frontend/src/components/control/mini-button.tsx

@@ -41,7 +41,7 @@ export function MiniButton({
         'rounded-lg',
         'cc-controls cc-animate-background',
         'cursor-pointer disabled:cursor-auto',
-        noHover ? 'outline-hidden' : 'cc-hover',
+        noHover ? 'outline-hidden' : 'cc-hover-bg',
         !noPadding && 'px-1 py-1',
         className
       )}

rsconcept/frontend/src/components/control/selector-button.tsx

@@ -32,7 +32,7 @@ export function SelectorButton({
         'text-sm font-controls select-none',
         'text-btn cc-controls',
         'disabled:cursor-auto cursor-pointer',
-        'cc-hover cc-animate-color',
+        'cc-hover-text cc-animate-color',
         className
       )}
       data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}

rsconcept/frontend/src/components/data-table/pagination-tools.tsx

@@ -36,7 +36,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Первая страница'
-          className='cc-hover cc-controls cc-animate-color focus-outline'
+          className='cc-hover-bg cc-controls cc-animate-color focus-outline'
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
         >
@@ -45,7 +45,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Предыдущая страница'
-          className='cc-hover cc-controls cc-animate-color focus-outline'
+          className='cc-hover-bg cc-controls cc-animate-color focus-outline'
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
@@ -55,7 +55,7 @@ export function PaginationTools<TData>({
           id={id ? `${id}__page` : undefined}
           title='Номер страницы. Выделите для ручного ввода'
           aria-label='Номер страницы'
-          className='w-6 text-center bg-transparent focus-outline'
+          className='w-6 text-center bg-transparent focus-outline rounded-md'
           value={table.getState().pagination.pageIndex + 1}
           onChange={event => {
             const page = event.target.value ? Number(event.target.value) - 1 : 0;
@@ -67,7 +67,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Следующая страница'
-          className='cc-hover cc-controls cc-animate-color focus-outline'
+          className='cc-hover-bg cc-controls cc-animate-color focus-outline'
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
@@ -76,7 +76,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Последняя страница'
-          className='cc-hover cc-controls cc-animate-color focus-outline'
+          className='cc-hover-bg cc-controls cc-animate-color focus-outline'
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
         >

rsconcept/frontend/src/components/data-table/table-row.tsx

@@ -70,7 +70,7 @@ export function TableRow<TData>({
     <tr
       className={cn(
         'cc-scroll-row',
-        'cc-hover cc-animate-background duration-fade',
+        'cc-hover-bg cc-animate-background duration-fade',
         !noHeader && 'scroll-mt-[calc(2px+2rem)]',
         table.options.enableRowSelection && row.getIsSelected()
           ? 'cc-selected'

rsconcept/frontend/src/components/dropdown/dropdown-button.tsx

@@ -38,7 +38,7 @@ export function DropdownButton({
         'text-left text-sm text-ellipsis whitespace-nowrap',
         'disabled:cc-controls disabled:opacity-75',
         'focus-outline cc-animate-background',
-        !!onClick ? 'cc-hover cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
+        !!onClick ? 'cc-hover-bg cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
         className
       )}
       data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}

rsconcept/frontend/src/components/input/select-tree.tsx

@@ -90,7 +90,7 @@ export function SelectTree<ItemType>({
           <div
             key={`${prefix}${index}`}
             className={clsx(
-              'cc-tree-item relative cc-scroll-row cc-hover',
+              'cc-tree-item relative cc-scroll-row cc-hover-bg',
               isActive ? 'max-h-7 py-1 border-b' : 'max-h-0 opacity-0 pointer-events-none',
               value === item && 'cc-selected'
             )}

rsconcept/frontend/src/components/tabs/tab-label.tsx

@@ -33,7 +33,7 @@ export function TabLabel({
         'text-sm whitespace-nowrap font-controls',
         'select-none',
         'outline-hidden',
-        !disabled && 'hover:cursor-pointer cc-hover',
+        !disabled && 'hover:cursor-pointer cc-hover-bg',
         disabled && 'text-muted-foreground',
         className
       )}

rsconcept/frontend/src/features/library/components/select-location.tsx

@@ -62,7 +62,7 @@ export function SelectLocation({ value, dense, prefix, onClick, className, style
               !dense && 'h-7 sm:h-8',
               'pr-3 py-1 flex items-center gap-2',
               'cc-scroll-row',
-              'cc-hover cc-animate-color duration-fade',
+              'cc-hover-bg cc-animate-color duration-fade',
               'cursor-pointer',
               'leading-3 sm:leading-4',
               activeNode === item && 'cc-selected'

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-local-button.tsx

@@ -33,8 +33,8 @@ export function RSLocalButton({
       className={clsx(
         'w-7 sm:w-8 h-5 sm:h-6',
         'cursor-pointer disabled:cursor-default',
-        'rounded-none',
+        'rounded-md',
-        'cc-hover cc-controls cc-animate-color',
+        'cc-hover-text cc-controls cc-animate-color',
         'font-math',
         className
       )}

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-token-button.tsx

@@ -20,9 +20,9 @@ export function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps)
       onClick={() => onInsert(token)}
       className={clsx(
         'h-5 sm:h-6',
-        'px-1',
+        'px-1 rounded-md',
         'outline-hidden',
-        'cc-hover cc-controls cc-animate-color',
+        'cc-hover-text cc-controls cc-animate-color',
         'font-math',
         'cursor-pointer disabled:cursor-default',
         label.length > 3 ? 'w-14.5 md:w-18' : 'w-7.25 md:w-9'

rsconcept/frontend/src/styling/utilities.css

@@ -20,12 +20,18 @@
   background-color: var(--color-selected);
 }
 
-@utility cc-hover {
+@utility cc-hover-bg {
   &:hover:not(:disabled) {
     background-color: var(--color-accent);
   }
 }
 
+@utility cc-hover-text {
+  &:hover:not(:disabled) {
+    color: var(--color-foreground);
+  }
+}
+
 @utility focus-outline {
   --focus-color: var(--color-ring);