F: Merge with shadcn styling

Revert "F: Merge with shadcn styling"

This reverts commit b9f8143b3e0a7f4726ab7751757b31532b0834f9.

F: Merge with shadcn styling

rsconcept/frontend/src/app/footer.tsx

@@ -10,7 +10,7 @@ export function Footer() {
         'z-navigation',
         'mx-auto',
         'px-3 py-2 flex flex-col items-center gap-1',
-        'text-xs sm:text-sm select-none whitespace-nowrap text-prim-600 bg-prim-100'
+        'text-xs sm:text-sm select-none whitespace-nowrap text-inert-foreground bg-background'
       )}
     >
       <nav className='flex gap-3' aria-label='Вторичная навигация'>

rsconcept/frontend/src/app/global-Loader.tsx

@@ -18,7 +18,7 @@ export function GlobalLoader() {
   return (
     <div className='cc-modal-wrapper'>
       <ModalBackdrop />
-      <div className='z-pop cc-fade-in px-10 border rounded-xl bg-prim-100'>
+      <div className='z-pop cc-fade-in px-10 border rounded-xl bg-background'>
         <Loader scale={6} />
       </div>
     </div>

rsconcept/frontend/src/app/mutation-errors.tsx

@@ -20,9 +20,9 @@ export function MutationErrors() {
   return (
     <div className='cc-modal-wrapper'>
       <ModalBackdrop onHide={resetErrors} />
-      <div className='z-pop px-10 py-3 flex flex-col items-center border rounded-xl bg-prim-100' role='alertdialog'>
+      <div className='z-pop px-10 py-3 flex flex-col items-center border rounded-xl bg-background' role='alertdialog'>
         <h1 className='py-2 select-none'>Ошибка при обработке</h1>
-        <div className='px-3 flex flex-col text-warn-600 text-sm font-semibold select-text'>
+        <div className='px-3 flex flex-col text-destructive text-sm font-semibold select-text'>
           <DescribeError error={mutationErrors[0]} />
         </div>
         <Button onClick={resetErrors} className='w-fit' text='Закрыть' />

rsconcept/frontend/src/app/navigation/navigation-button.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { globalIDs } from '@/utils/constants';
 
 interface NavigationButtonProps extends Styling {
@@ -21,7 +20,7 @@ export function NavigationButton({ icon, title, hideTitle, className, style, onC
       data-tooltip-hidden={hideTitle}
       data-tooltip-content={title}
       onClick={onClick}
-      className={clsx('p-2 flex items-center gap-1', 'cc-btn-nav', 'font-controls focus-outline', className)}
+      className={cn('p-2 flex items-center gap-1', 'cc-btn-nav', 'font-controls focus-outline', className)}
       style={style}
     >
       {icon ? icon : null}

rsconcept/frontend/src/app/navigation/navigation.tsx

@@ -29,7 +29,7 @@ export function Navigation() {
     push({ path: urls.create_schema, newTab: event.ctrlKey || event.metaKey });
 
   return (
-    <nav className='z-navigation sticky top-0 left-0 right-0 select-none bg-prim-100' inert={activeDialog !== null}>
+    <nav className='z-navigation sticky top-0 left-0 right-0 select-none bg-background' inert={activeDialog !== null}>
       <ToggleNavigation />
       <div
         className={clsx(

rsconcept/frontend/src/components/container/divider.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-
 import { type Styling } from '../props';
+import { cn } from '../utils';
 
 interface DividerProps extends Styling {
   /** Indicates whether the divider is vertical. */
@@ -16,7 +15,7 @@ interface DividerProps extends Styling {
 export function Divider({ vertical, margins = 'mx-2', className, ...restProps }: DividerProps) {
   return (
     <div
-      className={clsx(
+      className={cn(
         vertical ? 'border-x' : 'border-y', //
         margins,
         className

rsconcept/frontend/src/components/container/tooltip.tsx

@@ -3,10 +3,11 @@
 import { type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { type ITooltip, Tooltip as TooltipImpl } from 'react-tooltip';
-import clsx from 'clsx';
 
 import { usePreferencesStore } from '@/stores/preferences';
 
+import { cn } from '../utils';
+
 export type { PlacesType } from 'react-tooltip';
 
 interface TooltipProps extends Omit<ITooltip, 'variant'> {
@@ -37,7 +38,7 @@ export function Tooltip({
       delayShow={750}
       delayHide={100}
       opacity={1}
-      className={clsx(
+      className={cn(
         'relative',
         'py-0.5! px-2!',
         'max-h-[calc(100svh-6rem)]',

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

@@ -1,8 +1,7 @@
-import clsx from 'clsx';
-
 import { globalIDs } from '@/utils/constants';
 
 import { type Button as ButtonStyle, type Control } from '../props';
+import { cn } from '../utils';
 
 interface ButtonProps extends Control, ButtonStyle {
   /** Icon to display first. */
@@ -38,10 +37,10 @@ export function Button({
   return (
     <button
       type='button'
-      className={clsx(
+      className={cn(
         'inline-flex gap-2 items-center justify-center',
-        'font-medium select-none disabled:cursor-auto',
+        'font-medium select-none disabled:cursor-auto disabled:opacity-75',
-        'clr-btn-default cc-animate-color',
+        'bg-secondary text-secondary-foreground cc-hover cc-animate-color',
         dense ? 'px-1' : 'px-3 py-1',
         loading ? 'cursor-progress' : 'cursor-pointer',
         noOutline ? 'outline-hidden' : 'focus-outline',

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

@@ -39,9 +39,9 @@ export function MiniButton({
       tabIndex={tabIndex ?? -1}
       className={clsx(
         'rounded-lg',
-        'clr-text-controls cc-animate-background',
+        'cc-controls cc-animate-background',
         'cursor-pointer disabled:cursor-auto',
-        noHover ? 'outline-hidden' : 'clr-hover',
+        noHover ? 'outline-hidden' : 'cc-hover',
         !noPadding && 'px-1 py-1',
         className
       )}

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

@@ -1,8 +1,7 @@
-import clsx from 'clsx';
-
 import { globalIDs } from '@/utils/constants';
 
 import { type Button } from '../props';
+import { cn } from '../utils';
 
 interface SelectorButtonProps extends Button {
   /** Text to display in the button. */
@@ -10,9 +9,6 @@ interface SelectorButtonProps extends Button {
 
   /** Icon to display in the button. */
   icon?: React.ReactNode;
-
-  /** Indicates if button background should be transparent. */
-  transparent?: boolean;
 }
 
 /**
@@ -24,7 +20,6 @@ export function SelectorButton({
   title,
   titleHtml,
   className,
-  transparent,
   hideTitle,
   ...restProps
 }: SelectorButtonProps) {
@@ -32,13 +27,12 @@ export function SelectorButton({
     <button
       type='button'
       tabIndex={-1}
-      className={clsx(
+      className={cn(
         'px-1 flex flex-start items-center gap-1',
         'text-sm font-controls select-none',
-        'text-btn clr-text-controls',
+        'text-btn cc-controls',
         'disabled:cursor-auto cursor-pointer',
-        'cc-animate-color',
+        'cc-hover cc-animate-color',
-        transparent ? 'clr-hover' : 'clr-btn-default border',
         className
       )}
       data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}

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

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-
 import { type Button } from '../props';
+import { cn } from '../utils';
 
 interface SubmitButtonProps extends Button {
   /** Text to display in the button. */
@@ -20,11 +19,11 @@ export function SubmitButton({ text = 'ОК', icon, disabled, loading, className
   return (
     <button
       type='submit'
-      className={clsx(
+      className={cn(
         'px-3 py-1 flex gap-2 items-center justify-center',
         'border',
         'font-medium',
-        'clr-btn-primary cc-animate-color',
+        'cc-btn-primary disabled:opacity-50 cc-animate-color',
         'select-none cursor-pointer disabled:cursor-auto',
         loading && 'cursor-progress',
         className

rsconcept/frontend/src/components/control/text-url.tsx

@@ -20,7 +20,7 @@ interface TextURLProps {
 /**
  * Displays a text with a clickable link.
  */
-export function TextURL({ text, href, title, color = 'text-sec-600', onClick }: TextURLProps) {
+export function TextURL({ text, href, title, color = 'text-primary', onClick }: TextURLProps) {
   const design = `cursor-pointer hover:underline ${color}`;
   if (href) {
     return (
@@ -38,4 +38,3 @@ export function TextURL({ text, href, title, color = 'text-sec-600', onClick }:
     return null;
   }
 }
-

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

@@ -10,9 +10,9 @@ import {
   type TableOptions,
   type VisibilityState
 } from '@tanstack/react-table';
-import clsx from 'clsx';
 
 import { type Styling } from '../props';
+import { cn } from '../utils';
 
 import { DefaultNoData } from './default-no-data';
 import { PaginationTools } from './pagination-tools';
@@ -157,7 +157,7 @@ export function DataTable<TData extends RowData>({
     <div
       tabIndex={-1}
       id={id}
-      className={clsx('table-auto', className)}
+      className={cn('table-auto', className)}
       style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}
     >
       <table className='w-full' style={{ ...columnSizeVars }}>

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

@@ -31,7 +31,7 @@ export function PaginationTools<TData>({
   );
 
   return (
-    <div className='flex justify-end items-center my-2 text-sm clr-text-controls select-none'>
+    <div className='flex justify-end items-center my-2 text-sm cc-controls select-none'>
       <span className='mr-3'>
         {`${table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}
       -
@@ -46,7 +46,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Первая страница'
-          className='clr-hover clr-text-controls cc-animate-color focus-outline'
+          className='cc-hover cc-controls cc-animate-color focus-outline'
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
         >
@@ -55,7 +55,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Предыдущая страница'
-          className='clr-hover clr-text-controls cc-animate-color focus-outline'
+          className='cc-hover cc-controls cc-animate-color focus-outline'
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
@@ -65,7 +65,7 @@ export function PaginationTools<TData>({
           id={id ? `${id}__page` : undefined}
           title='Номер страницы. Выделите для ручного ввода'
           aria-label='Номер страницы'
-          className='w-6 text-center bg-prim-100 focus-outline'
+          className='w-6 text-center bg-transparent focus-outline'
           value={table.getState().pagination.pageIndex + 1}
           onChange={event => {
             const page = event.target.value ? Number(event.target.value) - 1 : 0;
@@ -77,7 +77,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Следующая страница'
-          className='clr-hover clr-text-controls cc-animate-color focus-outline'
+          className='cc-hover cc-controls cc-animate-color focus-outline'
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
@@ -86,7 +86,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Последняя страница'
-          className='clr-hover clr-text-controls cc-animate-color focus-outline'
+          className='cc-hover cc-controls cc-animate-color focus-outline'
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
         >
@@ -98,7 +98,7 @@ export function PaginationTools<TData>({
         aria-label='Выбор количества строчек на странице'
         value={table.getState().pagination.pageSize}
         onChange={handlePaginationOptionsChange}
-        className='mx-2 cursor-pointer bg-prim-100 focus-outline'
+        className='mx-2 cursor-pointer bg-transparent focus-outline'
       >
         {paginationOptions.map(pageSize => (
           <option key={`${prefixes.page_size}${pageSize}`} value={pageSize} aria-label={`${pageSize} на страницу`}>

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

@@ -75,11 +75,11 @@ export function TableBody<TData>({
           key={row.id}
           className={clsx(
             'cc-scroll-row',
-            'clr-hover cc-animate-background duration-(--duration-fade)',
+            'cc-hover cc-animate-background duration-(--duration-fade)',
             !noHeader && 'scroll-mt-[calc(2px+2rem)]',
             table.options.enableRowSelection && row.getIsSelected()
-              ? 'clr-selected'
+              ? 'cc-selected'
-              : 'odd:bg-prim-200 even:bg-prim-100'
+              : 'odd:bg-secondary even:bg-background'
           )}
           style={{ ...(conditionalRowStyles ? getRowStyles(row) : []) }}
           onClick={event => handleRowClicked(row, event)}

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

@@ -14,7 +14,7 @@ interface TableHeaderProps<TData> {
 
 export function TableHeader<TData>({ table, headPosition, resetLastSelected }: TableHeaderProps<TData>) {
   return (
-    <thead className='sticky bg-prim-100 cc-shadow-border' style={{ top: headPosition }}>
+    <thead className='sticky bg-background cc-shadow-border' style={{ top: headPosition }}>
       {table.getHeaderGroups().map((headerGroup: HeaderGroup<TData>) => (
         <tr key={headerGroup.id}>
           {table.options.enableRowSelection ? (

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

@@ -1,8 +1,8 @@
-import clsx from 'clsx';
-
 import { type Button } from '@/components/props';
 import { globalIDs } from '@/utils/constants';
 
+import { cn } from '../utils';
+
 interface DropdownButtonProps extends Button {
   /** Icon to display first (not used if children are provided). */
   icon?: React.ReactNode;
@@ -33,12 +33,12 @@ export function DropdownButton({
     <button
       type='button'
       onClick={onClick}
-      className={clsx(
+      className={cn(
         'px-3 py-1 inline-flex items-center gap-2',
         'text-left text-sm text-ellipsis whitespace-nowrap',
-        'disabled:clr-text-controls',
+        'disabled:cc-controls disabled:opacity-75',
         'cc-animate-background',
-        !!onClick ? 'clr-hover cursor-pointer disabled:cursor-auto' : 'clr-btn-default',
+        !!onClick ? 'cc-hover cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
         className
       )}
       data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}

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

@@ -1,7 +1,5 @@
-import React from 'react';
-import clsx from 'clsx';
-
 import { type Styling } from '../props';
+import { cn } from '../utils';
 
 interface DropdownProps extends Styling {
   /** Reference to the dropdown element. */
@@ -39,8 +37,8 @@ export function Dropdown({
   return (
     <div
       tabIndex={-1}
-      className={clsx(
+      className={cn(
-        'cc-dropdown isolate z-topmost absolute grid bg-prim-0 border rounded-md shadow-lg text-sm',
+        'cc-dropdown isolate z-topmost absolute grid bg-popover border rounded-md shadow-lg text-sm',
         stretchLeft ? 'right-0' : 'left-0',
         stretchTop ? 'bottom-0' : 'top-full',
         isOpen && 'open',

rsconcept/frontend/src/components/info-error.tsx

@@ -81,11 +81,11 @@ export function InfoError({ error }: InfoErrorProps) {
         'cc-fade-in',
         'min-w-100',
         'px-3 py-2 flex flex-col',
-        'text-warn-600 text-sm font-semibold',
+        'text-destructive text-sm font-semibold',
         'select-text'
       )}
     >
-      <div className='font-normal clr-text-default mb-6'>
+      <div className='font-normal text-foreground mb-6'>
         <p>Пожалуйста сделайте скриншот и отправьте вместе с описанием ситуации на почту portal@acconcept.ru</p>
         <br />
         <p>Для продолжения работы перезагрузите страницу</p>

rsconcept/frontend/src/components/input/checkbox-tristate.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { globalIDs } from '@/utils/constants';
 
 import { CheckboxChecked, CheckboxNull } from '../icons';
+import { cn } from '../utils';
 
 import { type CheckboxProps } from './checkbox';
 
@@ -48,7 +49,7 @@ export function CheckboxTristate({
   return (
     <button
       type='button'
-      className={clsx(
+      className={cn(
         'flex items-center gap-2', //
         'outline-hidden',
         'focus-frame',
@@ -67,7 +68,7 @@ export function CheckboxTristate({
         className={clsx(
           'w-4 h-4', //
           'border rounded-sm',
-          value === false ? 'bg-prim-100' : 'bg-sec-600 text-sec-0'
+          value === false ? 'bg-background text-foreground' : 'bg-primary text-primary-foreground'
         )}
       >
         {value ? <CheckboxChecked /> : null}

rsconcept/frontend/src/components/input/checkbox.tsx

@@ -4,6 +4,7 @@ import { globalIDs } from '@/utils/constants';
 
 import { CheckboxChecked } from '../icons';
 import { type Button } from '../props';
+import { cn } from '../utils';
 
 export interface CheckboxProps extends Omit<Button, 'value' | 'onClick' | 'onChange'> {
   /** Label to display next to the checkbox. */
@@ -47,7 +48,7 @@ export function Checkbox({
   return (
     <button
       type='button'
-      className={clsx(
+      className={cn(
         'flex items-center gap-2', //
         'outline-hidden',
         'focus-frame',
@@ -66,7 +67,7 @@ export function Checkbox({
         className={clsx(
           'w-4 h-4', //
           'border rounded-sm',
-          value === false ? 'bg-prim-100' : 'bg-sec-600 text-sec-0'
+          value === false ? 'bg-background text-foreground' : 'bg-primary text-primary-foreground'
         )}
       >
         {value ? <CheckboxChecked /> : null}

rsconcept/frontend/src/components/input/error-field.tsx

@@ -15,7 +15,7 @@ export function ErrorField({ error, className, ...restProps }: ErrorFieldProps):
     return null;
   }
   return (
-    <div className={clsx('text-sm text-warn-600 select-none', className)} {...restProps}>
+    <div className={clsx('text-sm text-destructive select-none', className)} {...restProps}>
       {error.message}
     </div>
   );

rsconcept/frontend/src/components/input/search-bar.tsx

@@ -2,6 +2,9 @@ import clsx from 'clsx';
 
 import { IconSearch } from '@/components/icons';
 import { type Styling } from '@/components/props';
+
+import { cn } from '../utils';
+
 interface SearchBarProps extends Styling {
   /** Id of the search bar. */
   id?: string;
@@ -36,7 +39,7 @@ export function SearchBar({
   ...restProps
 }: SearchBarProps) {
   return (
-    <div className={clsx('relative flex items-center grow', className)} {...restProps}>
+    <div className={cn('relative flex items-center grow', className)} {...restProps}>
       {!noIcon ? (
         <IconSearch className='absolute -top-0.5 left-2 translate-y-1/2 cc-search-icon' size='1.25rem' />
       ) : null}

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

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

rsconcept/frontend/src/components/input/text-area.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-
 import { type Editor, type ErrorProcessing, type Titled } from '../props';
+import { cn } from '../utils';
 
 import { ErrorField } from './error-field';
 import { Label } from './label';
@@ -25,21 +24,20 @@ interface TextAreaProps extends Editor, ErrorProcessing, Titled, React.Component
 export function TextArea({
   id,
   label,
-  required,
   transparent,
-  rows,
   dense,
   noBorder,
   noOutline,
   noResize,
   className,
   fitContent,
+  disabled,
   error,
   ...restProps
 }: TextAreaProps) {
   return (
     <div
-      className={clsx(
+      className={cn(
         'w-full', //
         dense ? 'flex grow items-center gap-3' : 'flex flex-col',
         dense && className
@@ -48,21 +46,20 @@ export function TextArea({
       <Label text={label} htmlFor={id} />
       <textarea
         id={id}
-        className={clsx(
+        className={cn(
           'px-3 py-2',
           'leading-tight',
           'overflow-x-hidden overflow-y-auto',
           !noBorder && 'border',
           fitContent && 'field-sizing-content',
           noResize && 'resize-none',
-          transparent ? 'bg-transparent' : 'clr-input',
+          transparent || disabled ? 'bg-transparent' : 'bg-input',
           !noOutline && 'focus-outline',
           dense && 'grow max-w-full',
           !dense && !!label && 'mt-2',
           !dense && className
         )}
-        rows={rows}
+        disabled={disabled}
-        required={required}
         {...restProps}
       />
       <ErrorField className='mt-1' error={error} />

rsconcept/frontend/src/components/input/text-input.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-
 import { type Editor, type ErrorProcessing, type Titled } from '../props';
+import { cn } from '../utils';
 
 import { ErrorField } from './error-field';
 import { Label } from './label';
@@ -41,7 +40,7 @@ export function TextInput({
 }: TextInputProps) {
   return (
     <div
-      className={clsx(
+      className={cn(
         dense ? 'flex items-center gap-3' : 'flex flex-col', //
         dense && className
       )}
@@ -49,10 +48,10 @@ export function TextInput({
       <Label text={label} htmlFor={id} />
       <input
         id={id}
-        className={clsx(
+        className={cn(
           'min-w-0 py-2',
           'leading-tight truncate hover:text-clip',
-          transparent ? 'bg-transparent' : 'clr-input',
+          transparent || disabled ? 'bg-transparent' : 'bg-input',
           !noBorder && 'border',
           !noOutline && 'focus-outline',
           (!noBorder || !disabled) && 'px-3',

rsconcept/frontend/src/components/modal/modal-backdrop.tsx

@@ -8,7 +8,7 @@ export function ModalBackdrop({ onHide }: ModalBackdropProps) {
   return (
     <>
       <div className='z-bottom fixed inset-0 backdrop-blur-[3px] opacity-50' />
-      <div className='z-bottom fixed inset-0 bg-prim-0 opacity-25' onClick={onHide} />
+      <div className='z-bottom fixed inset-0 bg-popover opacity-25' onClick={onHide} />
     </>
   );
 }

rsconcept/frontend/src/components/modal/modal-form.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import clsx from 'clsx';
-
 import { type HelpTopic } from '@/features/help';
 import { BadgeHelp } from '@/features/help/components';
 
@@ -12,6 +10,7 @@ import { prepareTooltip } from '@/utils/utils';
 import { Button, MiniButton, SubmitButton } from '../control';
 import { IconClose } from '../icons';
 import { type Styling } from '../props';
+import { cn } from '../utils';
 
 import { ModalBackdrop } from './modal-backdrop';
 
@@ -90,7 +89,7 @@ export function ModalForm({
     <div className='cc-modal-wrapper'>
       <ModalBackdrop onHide={handleCancel} />
       <form
-        className='cc-animate-modal relative grid border rounded-xl bg-prim-100'
+        className='cc-animate-modal relative grid border rounded-xl bg-background'
         role='dialog'
         onSubmit={handleSubmit}
         aria-labelledby='modal-title'
@@ -120,7 +119,7 @@ export function ModalForm({
         ) : null}
 
         <div
-          className={clsx(
+          className={cn(
             '@container/modal',
             'max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)]',
             'overscroll-contain outline-hidden',

rsconcept/frontend/src/components/modal/modal-loader.tsx

@@ -6,7 +6,7 @@ export function ModalLoader() {
   return (
     <div className='cc-modal-wrapper'>
       <ModalBackdrop />
-      <div className='cc-animate-modal p-20 border rounded-xl bg-prim-100'>
+      <div className='cc-animate-modal p-20 border rounded-xl bg-background'>
         <Loader circular scale={6} />
       </div>
     </div>

rsconcept/frontend/src/components/modal/modal-view.tsx

@@ -10,6 +10,7 @@ import { prepareTooltip } from '@/utils/utils';
 
 import { Button, MiniButton } from '../control';
 import { IconClose } from '../icons';
+import { cn } from '../utils';
 
 import { ModalBackdrop } from './modal-backdrop';
 import { type ModalProps } from './modal-form';
@@ -38,7 +39,7 @@ export function ModalView({
   return (
     <div className='cc-modal-wrapper'>
       <ModalBackdrop onHide={hideDialog} />
-      <div className='cc-animate-modal relative grid border rounded-xl bg-prim-100' role='dialog'>
+      <div className='cc-animate-modal relative grid border rounded-xl bg-background' role='dialog'>
         {helpTopic && !hideHelpWhen?.() ? (
           <BadgeHelp
             topic={helpTopic}
@@ -61,7 +62,8 @@ export function ModalView({
           <h1
             className={clsx(
               'px-12 py-2 select-none',
-              fullScreen && 'z-pop absolute top-0 right-1/2 translate-x-1/2 backdrop-blur-xs bg-prim-100/90 rounded-2xl'
+              fullScreen &&
+                'z-pop absolute top-0 right-1/2 translate-x-1/2 backdrop-blur-xs bg-background/90 rounded-2xl'
             )}
           >
             {header}
@@ -69,7 +71,7 @@ export function ModalView({
         ) : null}
 
         <div
-          className={clsx(
+          className={cn(
             '@container/modal',
             'max-w-[100svw] xs:max-w-[calc(100svw-2rem)]',
             'overscroll-contain outline-hidden',
@@ -93,7 +95,7 @@ export function ModalView({
             onClick={hideDialog}
           />
         ) : (
-          <div className='z-pop absolute bottom-0 right-1/2 translate-x-1/2 p-3 rounded-xl bg-prim-100/90 backdrop-blur-xs'>
+          <div className='z-pop absolute bottom-0 right-1/2 translate-x-1/2 p-3 rounded-xl bg-background/90 backdrop-blur-xs'>
             {' '}
             <Button text='Закрыть' aria-label='Закрыть' className='text-sm min-w-28' onClick={hideDialog} />
           </div>

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

@@ -28,7 +28,7 @@ export function TabLabel({
       className={clsx(
         'min-w-20 h-full',
         'px-2 py-1 flex justify-center',
-        'clr-hover cc-animate-color duration-150',
+        'cc-hover cc-animate-color duration-150',
         'text-sm whitespace-nowrap font-controls',
         'select-none hover:cursor-pointer',
         'outline-hidden',

rsconcept/frontend/src/components/ui/combo-box.tsx

@@ -3,10 +3,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { ChevronDownIcon } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
-
 import { IconRemove } from '../icons';
 import { type Styling } from '../props';
+import { cn } from '../utils';
 
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
@@ -77,7 +76,11 @@ export function ComboBox<Option>({
           aria-expanded={open}
           className={cn(
             'relative h-9',
-            'inline-flex gap-2 px-3 py-2 items-center justify-between bg-input cursor-pointer disabled:cursor-auto whitespace-nowrap outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px] aria-invalid:ring-destructive aria-invalid:border-destructive',
+            'flex gap-2 px-3 py-2 items-center justify-between',
+            'bg-input disabled:opacity-50',
+            'cursor-pointer disabled:cursor-auto',
+            'whitespace-nowrap',
+            'focus-outline',
             "[&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
             open && 'cursor-auto',
             !noBorder && 'border',
@@ -94,7 +97,7 @@ export function ComboBox<Option>({
             <IconRemove
               tabIndex={-1}
               size='1rem'
-              className='absolute pointer-events-auto right-3 text-muted-foreground hover:text-warn-600'
+              className='absolute pointer-events-auto right-3 text-muted-foreground hover:text-destructive'
               onClick={handleClear}
             />
           ) : null}

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

@@ -2,7 +2,8 @@ import { Command as CommandPrimitive } from 'cmdk';
 import { SearchIcon } from 'lucide-react';
 
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { cn } from '@/lib/utils';
+
+import { cn } from '../utils';
 
 function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (

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

@@ -3,7 +3,7 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '../utils';
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot='dialog' {...props} />;

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

@@ -1,6 +1,6 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from '@/lib/utils';
+import { cn } from '../utils';
 
 function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot='popover' {...props} />;

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

@@ -3,7 +3,7 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '../utils';
 
 function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
   return <SelectPrimitive.Root data-slot='select' {...props} />;
@@ -19,29 +19,26 @@ function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.V
 
 function SelectTrigger({
   className,
-  size = 'default',
   children,
   noBorder,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
   noBorder?: boolean;
-  size?: 'sm' | 'default';
 }) {
   return (
     <SelectPrimitive.Trigger
       data-slot='select-trigger'
-      data-size={size}
       className={cn(
-        'data-[size=default]:h-9 data-[size=sm]:h-8',
+        'h-9',
-        'flex items-center justify-between gap-2 px-3 py-2',
+        'flex gap-2 px-3 py-2 items-center justify-between',
         'bg-input disabled:opacity-50',
         'cursor-pointer disabled:cursor-auto',
-        'data-[placeholder]:text-muted-foreground',
         'whitespace-nowrap',
-        'outline-none focus-visible:ring-[2px] focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive',
+        'focus-outline',
+        'data-[placeholder]:text-muted-foreground',
         '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
         "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        !noBorder && 'border aria-invalid:border-destructive',
+        !noBorder && 'border',
         noBorder && 'rounded-md',
         className
       )}

rsconcept/frontend/src/components/view/indicator.tsx

@@ -18,7 +18,7 @@ export function Indicator({ icon, title, titleHtml, hideTitle, noPadding, classN
   return (
     <div
       className={clsx(
-        'clr-text-controls', //
+        'cc-controls', //
         'outline-hidden',
         !noPadding && 'px-1 py-1',
         className

rsconcept/frontend/src/features/auth/components/expected-anonymous.tsx

@@ -24,7 +24,7 @@ export function ExpectedAnonymous() {
         <span> | </span>
         <TextURL text='Справка' href='/manuals' />
         <span> | </span>
-        <span className='cursor-pointer hover:underline text-sec-600' onClick={logoutAndRedirect}>
+        <span className='cursor-pointer hover:underline text-primary' aria-label='Выйти' onClick={logoutAndRedirect}>
           Выйти
         </span>
       </div>

rsconcept/frontend/src/features/auth/pages/login-page.tsx

@@ -95,7 +95,7 @@ export function LoginPage() {
 function ServerError({ error }: { error: ErrorData }): React.ReactElement | null {
   if (isAxiosError(error) && error.response && error.response.status === 400) {
     return (
-      <div className='text-sm select-text text-warn-600'>
+      <div className='text-sm select-text text-destructive'>
         На Портале отсутствует такое сочетание имени пользователя и пароля
       </div>
     );

rsconcept/frontend/src/features/auth/pages/password-change-page.tsx

@@ -88,7 +88,7 @@ export function Component() {
 // ====== Internals =========
 function ServerError({ error }: { error: ErrorData }): React.ReactElement {
   if (isAxiosError(error) && error.response && error.response.status === 404) {
-    return <div className='mx-auto mt-6 text-sm select-text text-warn-600'>Данная ссылка не действительна</div>;
+    return <div className='mx-auto mt-6 text-sm select-text text-destructive'>Данная ссылка не действительна</div>;
   }
   return <InfoError error={error} />;
 }

rsconcept/frontend/src/features/auth/pages/restore-password-page.tsx

@@ -54,7 +54,7 @@ export function Component() {
 function ServerError({ error }: { error: ErrorData }): React.ReactElement {
   if (isAxiosError(error) && error.response && error.response.status === 400) {
     return (
-      <div className='mx-auto mt-6 text-sm select-text text-warn-600'>Данный email не используется на Портале.</div>
+      <div className='mx-auto mt-6 text-sm select-text text-destructive'>Данный email не используется на Портале.</div>
     );
   }
   throw error as Error;

rsconcept/frontend/src/features/help/components/badge-help.tsx

@@ -1,11 +1,11 @@
 import React, { Suspense } from 'react';
-import clsx from 'clsx';
 
 import { type PlacesType, Tooltip } from '@/components/container';
 import { TextURL } from '@/components/control';
 import { IconHelp } from '@/components/icons';
 import { Loader } from '@/components/loader';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { usePreferencesStore } from '@/stores/preferences';
 
 import { type HelpTopic } from '../models/help-topic';
@@ -41,17 +41,17 @@ export function BadgeHelp({ topic, padding = 'p-1', className, contentClass, sty
     return null;
   }
   return (
-    <div tabIndex={-1} id={`help-${topic}`} className={clsx(padding, className)} style={style}>
+    <div tabIndex={-1} id={`help-${topic}`} className={cn(padding, className)} style={style}>
       <IconHelp size='1.25rem' className='icon-primary' />
       <Tooltip
         clickable
         anchorSelect={`#help-${topic}`}
         layer='z-topmost'
-        className={clsx('max-w-120', contentClass)}
+        className={cn('max-w-120', contentClass)}
         {...restProps}
       >
         <Suspense fallback={<Loader />}>
-          <div className='absolute right-1 text-sm top-2 clr-input' onClick={event => event.stopPropagation()}>
+          <div className='absolute right-1 text-sm top-2 bg-input' onClick={event => event.stopPropagation()}>
             <TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
           </div>
           <TopicPage topic={topic} />

rsconcept/frontend/src/features/help/items/ui/help-library.tsx

@@ -81,7 +81,7 @@ export function HelpLibrary() {
         <kbd>клик</kbd> по иконке сворачивает/разворачивает вложенные
       </li>
       <li>
-        <IconFolderEmpty size='1rem' className='inline-icon clr-text-default' /> папка без схем
+        <IconFolderEmpty size='1rem' className='inline-icon text-foreground' /> папка без схем
       </li>
       <li>
         <IconFolderEmpty size='1rem' className='inline-icon' /> папка с вложенными без схем

rsconcept/frontend/src/features/help/items/ui/help-rseditor.tsx

@@ -68,7 +68,7 @@ export function HelpRSEditor() {
             <IconChild className='inline-icon' /> отображение наследованных
           </li>
           <li>
-            <span className='bg-sec-200'>текущая конституента</span>
+            <span className='bg-selected'>текущая конституента</span>
           </li>
           <li>
             <span className='bg-(--acc-bg-green50)'>

rsconcept/frontend/src/features/library/components/editor-library-item.tsx

@@ -137,14 +137,14 @@ export function EditorLibraryItem({ schema, isAttachedToOSS }: EditorLibraryItem
         <ValueIcon
           title='Дата обновления'
           dense
-          icon={<IconDateUpdate size='1.25rem' className='text-ok-600' />}
+          icon={<IconDateUpdate size='1.25rem' className='text-constructive' />}
           value={new Date(schema.time_update).toLocaleString(intl.locale)}
         />
 
         <ValueIcon
           title='Дата создания'
           dense
-          icon={<IconDateCreate size='1.25rem' className='text-ok-600' />}
+          icon={<IconDateCreate size='1.25rem' className='text-constructive' />}
           value={new Date(schema.time_create).toLocaleString(intl.locale, {
             year: '2-digit',
             month: '2-digit',

rsconcept/frontend/src/features/library/components/icon-access-policy.tsx

@@ -6,10 +6,10 @@ import { AccessPolicy } from '../backend/types';
 export function IconAccessPolicy({ value, size = '1.25rem', className }: DomIconProps<AccessPolicy>) {
   switch (value) {
     case AccessPolicy.PRIVATE:
-      return <IconPrivate size={size} className={className ?? 'text-warn-600'} />;
+      return <IconPrivate size={size} className={className ?? 'text-destructive'} />;
     case AccessPolicy.PROTECTED:
-      return <IconProtected size={size} className={className ?? 'text-sec-600'} />;
+      return <IconProtected size={size} className={className ?? 'text-primary'} />;
     case AccessPolicy.PUBLIC:
-      return <IconPublic size={size} className={className ?? 'text-ok-600'} />;
+      return <IconPublic size={size} className={className ?? 'text-constructive'} />;
   }
 }

rsconcept/frontend/src/features/library/components/icon-item-visibility.tsx

@@ -3,8 +3,8 @@ import { type DomIconProps, IconHide, IconShow } from '@/components/icons';
 /** Icon for visibility. */
 export function IconItemVisibility({ value, size = '1.25rem', className }: DomIconProps<boolean>) {
   if (value) {
-    return <IconShow size={size} className={className ?? 'text-ok-600'} />;
+    return <IconShow size={size} className={className ?? 'text-constructive'} />;
   } else {
-    return <IconHide size={size} className={className ?? 'text-warn-600'} />;
+    return <IconHide size={size} className={className ?? 'text-destructive'} />;
   }
 }

rsconcept/frontend/src/features/library/components/icon-library-item-type.tsx

@@ -6,8 +6,8 @@ import { LibraryItemType } from '../backend/types';
 export function IconLibraryItemType({ value, size = '1.25rem', className }: DomIconProps<LibraryItemType>) {
   switch (value) {
     case LibraryItemType.RSFORM:
-      return <IconRSForm size={size} className={className ?? 'text-sec-600'} />;
+      return <IconRSForm size={size} className={className ?? 'text-primary'} />;
     case LibraryItemType.OSS:
-      return <IconOSS size={size} className={className ?? 'text-ok-600'} />;
+      return <IconOSS size={size} className={className ?? 'text-constructive'} />;
   }
 }

rsconcept/frontend/src/features/library/components/icon-location-head.tsx

@@ -6,12 +6,12 @@ import { LocationHead } from '../models/library';
 export function IconLocationHead({ value, size = '1.25rem', className }: DomIconProps<string>) {
   switch (value.substring(0, 2) as LocationHead) {
     case LocationHead.COMMON:
-      return <IconPublic size={size} className={className ?? 'text-sec-600'} />;
+      return <IconPublic size={size} className={className ?? 'text-primary'} />;
     case LocationHead.LIBRARY:
-      return <IconTemplates size={size} className={className ?? 'text-warn-600'} />;
+      return <IconTemplates size={size} className={className ?? 'text-destructive'} />;
     case LocationHead.PROJECTS:
-      return <IconBusiness size={size} className={className ?? 'text-sec-600'} />;
+      return <IconBusiness size={size} className={className ?? 'text-primary'} />;
     case LocationHead.USER:
-      return <IconUser size={size} className={className ?? 'text-ok-600'} />;
+      return <IconUser size={size} className={className ?? 'text-constructive'} />;
   }
 }

rsconcept/frontend/src/features/library/components/icon-show-subfolders.tsx

@@ -3,8 +3,8 @@ import { type DomIconProps, IconSubfolders } from '@/components/icons';
 /** Icon for subfolders. */
 export function IconShowSubfolders({ value, size = '1.25rem', className }: DomIconProps<boolean>) {
   if (value) {
-    return <IconSubfolders size={size} className={className ?? 'text-ok-600'} />;
+    return <IconSubfolders size={size} className={className ?? 'text-constructive'} />;
   } else {
-    return <IconSubfolders size={size} className={className ?? 'text-sec-600'} />;
+    return <IconSubfolders size={size} className={className ?? 'text-primary'} />;
   }
 }

rsconcept/frontend/src/features/library/components/pick-schema.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import clsx from 'clsx';
 
 import { MiniButton } from '@/components/control';
 import { createColumnHelper, DataTable, type IConditionalStyle } from '@/components/data-table';
@@ -8,6 +7,7 @@ import { Dropdown, useDropdown } from '@/components/dropdown';
 import { IconClose, IconFolderTree } from '@/components/icons';
 import { SearchBar } from '@/components/input';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { APP_COLORS } from '@/styling/colors';
 import { prefixes } from '@/utils/constants';
 
@@ -103,11 +103,11 @@ export function PickSchema({
   }
 
   return (
-    <div className={clsx('border divide-y', className)} {...restProps}>
+    <div className={cn('border divide-y', className)} {...restProps}>
-      <div className='flex justify-between clr-input items-center pr-1 rounded-t-md'>
+      <div className='flex justify-between bg-input items-center pr-1 rounded-t-md'>
         <SearchBar
           id={id ? `${id}__search` : undefined}
-          className='clr-input grow rounded-t-md'
+          className='grow rounded-t-md'
           noBorder
           query={filterText}
           onChangeQuery={newValue => setFilterText(newValue)}

rsconcept/frontend/src/features/library/components/select-item-type.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import clsx from 'clsx';
-
 import { SelectorButton } from '@/components/control';
 import { Dropdown, DropdownButton, useDropdown } from '@/components/dropdown';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { prefixes } from '@/utils/constants';
 
 import { LibraryItemType } from '../backend/types';
@@ -37,9 +36,8 @@ export function SelectItemType({
   }
 
   return (
-    <div ref={menu.ref} onBlur={menu.handleBlur} className={clsx('relative', className)} {...restProps}>
+    <div ref={menu.ref} onBlur={menu.handleBlur} className={cn('relative', className)} {...restProps}>
       <SelectorButton
-        transparent
         title={describeLibraryItemType(value)}
         hideTitle={menu.isOpen}
         className='h-full px-2 py-1 rounded-lg'

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

@@ -1,10 +1,9 @@
 'use client';
 
-import clsx from 'clsx';
-
 import { SelectorButton } from '@/components/control';
 import { Dropdown, DropdownButton, useDropdown } from '@/components/dropdown';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { prefixes } from '@/utils/constants';
 
 import { describeLocationHead, labelLocationHead } from '../labels';
@@ -36,11 +35,10 @@ export function SelectLocationHead({
     <div
       ref={menu.ref} //
       onBlur={menu.handleBlur}
-      className={clsx('text-right relative', className)}
+      className={cn('text-right relative', className)}
       {...restProps}
     >
       <SelectorButton
-        transparent
         tabIndex={-1}
         title={describeLocationHead(value)}
         hideTitle={menu.isOpen}

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

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { MiniButton } from '@/components/control';
 import { IconFolder, IconFolderClosed, IconFolderEmpty, IconFolderOpened } from '@/components/icons';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 
 import { useFolders } from '../backend/use-folders';
 import { labelFolderNode } from '../labels';
@@ -51,7 +52,7 @@ export function SelectLocation({ value, dense, prefix, onClick, className, style
   }
 
   return (
-    <div className={clsx('flex flex-col cc-scroll-y', className)} style={style}>
+    <div className={cn('flex flex-col cc-scroll-y', className)} style={style}>
       {items.map((item, index) =>
         !item.parent || !folded.includes(item.parent) ? (
           <div
@@ -61,10 +62,10 @@ 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',
-              'clr-hover cc-animate-color',
+              'cc-hover cc-animate-color',
               'cursor-pointer',
               'leading-3 sm:leading-4',
-              activeNode === item && 'clr-selected'
+              activeNode === item && 'cc-selected'
             )}
             style={{ paddingLeft: `${(item.rank > 5 ? 5 : item.rank) * 0.5 + 0.5}rem` }}
             onClick={event => onClick(event, item)}
@@ -90,9 +91,9 @@ export function SelectLocation({ value, dense, prefix, onClick, className, style
             ) : (
               <div>
                 {item.filesInside ? (
-                  <IconFolder size='1rem' className='clr-text-default' />
+                  <IconFolder size='1rem' className='text-foreground' />
                 ) : (
-                  <IconFolderEmpty size='1rem' className='clr-text-controls' />
+                  <IconFolderEmpty size='1rem' className='cc-controls' />
                 )}
               </div>
             )}

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

@@ -2,7 +2,7 @@
 
 import { type Styling } from '@/components/props';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { cn } from '@/lib/utils';
+import { cn } from '@/components/utils';
 
 import { labelVersion } from '../../rsform/labels';
 import { type IVersionInfo } from '../backend/types';

rsconcept/frontend/src/features/library/components/toolbar-item-access.tsx

@@ -66,9 +66,9 @@ export function ToolbarItemAccess({
           aria-label='Переключатель режима изменения'
           icon={
             readOnly ? (
-              <IconImmutable size='1.25rem' className='text-sec-600' />
+              <IconImmutable size='1.25rem' className='text-primary' />
             ) : (
-              <IconMutable size='1.25rem' className='text-ok-600' />
+              <IconMutable size='1.25rem' className='text-constructive' />
             )
           }
           onClick={toggleReadOnly}

rsconcept/frontend/src/features/library/components/toolbar-item-card.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import clsx from 'clsx';
-
 import { urls, useConceptNavigation } from '@/app';
 import { HelpTopic } from '@/features/help';
 import { BadgeHelp } from '@/features/help/components';
@@ -10,6 +8,7 @@ import { useRoleStore, UserRole } from '@/features/users';
 
 import { MiniButton } from '@/components/control';
 import { IconDestroy, IconSave, IconShare } from '@/components/icons';
+import { cn } from '@/components/utils';
 import { useModificationStore } from '@/stores/modification';
 import { tooltipText } from '@/utils/labels';
 import { prepareTooltip, sharePage } from '@/utils/utils';
@@ -51,7 +50,7 @@ export function ToolbarItemCard({ className, schema, onSubmit, isMutable, delete
   })();
 
   return (
-    <div className={clsx('cc-icons', className)}>
+    <div className={cn('cc-icons', className)}>
       {ossSelector}
       {isMutable || isModified ? (
         <MiniButton

rsconcept/frontend/src/features/library/pages/library-page/toolbar-search.tsx

@@ -16,6 +16,7 @@ import {
   IconUserSearch
 } from '@/components/icons';
 import { SearchBar } from '@/components/input';
+import { cn } from '@/components/utils';
 import { prefixes } from '@/utils/constants';
 import { tripleToggleColor } from '@/utils/utils';
 
@@ -76,7 +77,7 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
   }
 
   return (
-    <div className={clsx('flex gap-3 border-b text-sm clr-input items-center', className)}>
+    <div className={cn('flex gap-3 border-b text-sm bg-input items-center', className)}>
       <div className='ml-3 min-w-18 sm:min-w-30 select-none whitespace-nowrap'>
         {filtered} из {total}
       </div>
@@ -143,7 +144,6 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
             className='relative flex items-center h-full select-none'
           >
             <SelectorButton
-              transparent
               className='rounded-lg py-1'
               titleHtml={
                 (head ? describeLocationHead(head) : 'Выберите каталог') + '<br/><kbd>Ctrl + клик</kbd> - Проводник'
@@ -153,7 +153,7 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
                 head ? (
                   <IconLocationHead value={head} size='1.25rem' />
                 ) : (
-                  <IconFolderSearch size='1.25rem' className='clr-text-controls' />
+                  <IconFolderSearch size='1.25rem' className='cc-controls' />
                 )
               }
               onClick={handleFolderClick}
@@ -164,13 +164,13 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
               <DropdownButton
                 text='проводник...'
                 title='Переключение в режим Проводник'
-                icon={<IconFolderTree size='1rem' className='clr-text-controls' />}
+                icon={<IconFolderTree size='1rem' className='cc-controls' />}
                 onClick={handleToggleFolder}
               />
               <DropdownButton
                 text='отображать все'
                 title='Очистить фильтр по расположению'
-                icon={<IconFolder size='1rem' className='clr-text-controls' />}
+                icon={<IconFolder size='1rem' className='cc-controls' />}
                 onClick={() => handleChange(null)}
               />
               {Object.values(LocationHead).map((head, index) => {

rsconcept/frontend/src/features/library/pages/library-page/use-library-columns.tsx

@@ -41,7 +41,7 @@ export function useLibraryColumns() {
                 noHover
                 className='pl-2 max-h-4 -translate-y-0.5'
                 onClick={handleToggleFolder}
-                icon={<IconFolderTree size='1.25rem' className='clr-text-controls' />}
+                icon={<IconFolderTree size='1.25rem' className='cc-controls' />}
               />
             ),
             size: 50,

rsconcept/frontend/src/features/oss/components/icon-relocation-up.tsx

@@ -3,8 +3,8 @@ import { type DomIconProps, IconMoveDown, IconMoveUp } from '@/components/icons'
 /** Icon for relocation direction. */
 export function IconRelocationUp({ value, size = '1.25rem', className }: DomIconProps<boolean>) {
   if (value) {
-    return <IconMoveUp size={size} className={className ?? 'text-sec-600'} />;
+    return <IconMoveUp size={size} className={className ?? 'text-primary'} />;
   } else {
-    return <IconMoveDown size={size} className={className ?? 'text-sec-600'} />;
+    return <IconMoveDown size={size} className={className ?? 'text-primary'} />;
   }
 }

rsconcept/frontend/src/features/oss/components/pick-multi-operation.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import clsx from 'clsx';
 
 import { MiniButton } from '@/components/control';
 import { createColumnHelper, DataTable } from '@/components/data-table';
 import { IconMoveDown, IconMoveUp, IconRemove } from '@/components/icons';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { NoData } from '@/components/view';
 
 import { type IOperation } from '../models/oss';
@@ -107,7 +107,7 @@ export function PickMultiOperation({ rows, items, value, onChange, className, ..
   ];
 
   return (
-    <div className={clsx('flex flex-col gap-1 border-t border-x rounded-md clr-input', className)} {...restProps}>
+    <div className={cn('flex flex-col gap-1 border-t border-x rounded-md bg-input', className)} {...restProps}>
       <SelectOperation
         noBorder
         items={nonSelectedItems} //

rsconcept/frontend/src/features/oss/dialogs/dlg-create-operation/dlg-create-operation.tsx

@@ -99,7 +99,7 @@ export function DlgCreateOperation() {
       helpTopic={HelpTopic.CC_OSS}
     >
       <Tabs
-        selectedTabClassName='clr-selected'
+        selectedTabClassName='cc-selected'
         className='grid'
         selectedIndex={activeTab}
         onSelect={(index, last) => handleSelectTab(index as TabID, last as TabID)}

rsconcept/frontend/src/features/oss/dialogs/dlg-edit-operation/dlg-edit-operation.tsx

@@ -71,7 +71,7 @@ export function DlgEditOperation() {
       hideHelpWhen={() => activeTab !== TabID.SUBSTITUTION}
     >
       <Tabs
-        selectedTabClassName='clr-selected'
+        selectedTabClassName='cc-selected'
         className='grid'
         selectedIndex={activeTab}
         onSelect={index => setActiveTab(index as TabID)}

rsconcept/frontend/src/features/oss/dialogs/dlg-relocate-constituents.tsx

@@ -119,7 +119,7 @@ export function DlgRelocateConstituents() {
       helpTopic={HelpTopic.UI_RELOCATE_CST}
     >
       <div className='flex flex-col border'>
-        <div className='flex gap-1 items-center clr-input border-b rounded-t-md'>
+        <div className='flex gap-1 items-center bg-input border-b rounded-t-md'>
           <SelectLibraryItem
             noBorder
             className='w-1/2'

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-card/oss-stats.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-
 import { IconDownload, IconRSForm, IconRSFormImported, IconRSFormOwned, IconSynthesis } from '@/components/icons';
+import { cn } from '@/components/utils';
 import { ValueStats } from '@/components/view';
 
 import { type IOperationSchemaStats } from '../../../models/oss';
@@ -12,7 +11,7 @@ interface OssStatsProps {
 
 export function OssStats({ className, stats }: OssStatsProps) {
   return (
-    <div className={clsx('grid grid-cols-3 gap-1 justify-items-end', className)}>
+    <div className={cn('grid grid-cols-3 gap-1 justify-items-end', className)}>
       <div id='count_operations' className='w-fit flex gap-3 hover:cursor-default '>
         <span>Всего</span>
         <span>{stats.count_operations}</span>
@@ -20,32 +19,32 @@ export function OssStats({ className, stats }: OssStatsProps) {
       <ValueStats
         id='count_inputs'
         title='Загрузка'
-        icon={<IconDownload size='1.25rem' className='text-sec-600' />}
+        icon={<IconDownload size='1.25rem' className='text-primary' />}
         value={stats.count_inputs}
       />
       <ValueStats
         id='count_synthesis'
         title='Синтез'
-        icon={<IconSynthesis size='1.25rem' className='text-sec-600' />}
+        icon={<IconSynthesis size='1.25rem' className='text-primary' />}
         value={stats.count_synthesis}
       />
 
       <ValueStats
         id='count_schemas'
         title='Прикрепленные схемы'
-        icon={<IconRSForm size='1.25rem' className='text-sec-600' />}
+        icon={<IconRSForm size='1.25rem' className='text-primary' />}
         value={stats.count_schemas}
       />
       <ValueStats
         id='count_owned'
         title='Собственные'
-        icon={<IconRSFormOwned size='1.25rem' className='text-sec-600' />}
+        icon={<IconRSFormOwned size='1.25rem' className='text-primary' />}
         value={stats.count_owned}
       />
       <ValueStats
         id='count_imported'
         title='Внешние'
-        icon={<IconRSFormImported size='1.25rem' className='text-sec-600' />}
+        icon={<IconRSFormImported size='1.25rem' className='text-primary' />}
         value={stats.count_schemas - stats.count_owned}
       />
     </div>

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/node-core.tsx

@@ -34,13 +34,13 @@ export function NodeCore({ node }: NodeCoreProps) {
         <Indicator
           noPadding
           title={hasFile ? 'Связанная КС' : 'Нет связанной КС'}
-          icon={<IconRSForm className={hasFile ? 'text-ok-600' : 'text-warn-600'} size='12px' />}
+          icon={<IconRSForm className={hasFile ? 'text-constructive' : 'text-destructive'} size='12px' />}
         />
         {node.data.operation.is_consolidation ? (
           <Indicator
             noPadding
             titleHtml='<b>Внимание!</b><br />Ромбовидный синтез</br/>Возможны дубликаты конституент'
-            icon={<IconConsolidation className='text-sec-600' size='12px' />}
+            icon={<IconConsolidation className='text-primary' size='12px' />}
           />
         ) : null}
       </div>
@@ -50,7 +50,7 @@ export function NodeCore({ node }: NodeCoreProps) {
       ) : null}
 
       {!node.data.operation.is_owned ? (
-        <div className='absolute left-[2px] top-[6px] border-r rounded-none clr-input h-[22px]' />
+        <div className='absolute left-[2px] top-[6px] border-r rounded-none bg-input h-[22px]' />
       ) : null}
 
       <div

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/toolbar-oss-graph.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useReactFlow } from 'reactflow';
-import clsx from 'clsx';
 
 import { HelpTopic } from '@/features/help';
 import { BadgeHelp } from '@/features/help/components';
@@ -24,6 +23,7 @@ import {
   IconSave
 } from '@/components/icons';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { useDialogsStore } from '@/stores/dialogs';
 import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/utils';
@@ -119,10 +119,10 @@ export function ToolbarOssGraph({
 
   return (
     <div
-      className={clsx(
+      className={cn(
         'flex flex-col items-center pt-1',
         'rounded-b-2xl',
-        'hover:bg-prim-100 hover:bg-opacity-50 backdrop-blur-xs',
+        'hover:bg-background backdrop-blur-xs',
         className
       )}
       {...restProps}

rsconcept/frontend/src/features/oss/pages/oss-page/menu-main.tsx

@@ -54,7 +54,7 @@ export function MenuMain() {
         tabIndex={-1}
         title='Меню'
         hideTitle={menu.isOpen}
-        icon={<IconMenu size='1.25rem' className='clr-text-controls' />}
+        icon={<IconMenu size='1.25rem' className='cc-controls' />}
         className='h-full pl-2'
         onClick={menu.toggle}
       />

rsconcept/frontend/src/features/oss/pages/oss-page/oss-tabs.tsx

@@ -58,7 +58,7 @@ export function OssTabs({ activeTab }: OssTabsProps) {
       selectedIndex={activeTab}
       onSelect={onSelectTab}
       defaultFocus
-      selectedTabClassName='clr-selected'
+      selectedTabClassName='cc-selected'
       className='relative flex flex-col mx-auto min-w-fit items-center'
     >
       <TabList className='absolute z-sticky flex border-b-2 border-x-2 divide-x-2 bg-prim-200'>

rsconcept/frontend/src/features/rsform/components/badge-grammeme.tsx

@@ -13,7 +13,7 @@ interface BadgeGrammemeProps {
 export function BadgeGrammeme({ grammeme }: BadgeGrammemeProps) {
   return (
     <div
-      className='min-w-12 px-1 border rounded-md text-sm font-medium text-center whitespace-nowrap bg-prim-0'
+      className='min-w-12 px-1 border rounded-md text-sm font-medium text-center whitespace-nowrap bg-card'
       style={{
         borderColor: colorFgGrammeme(grammeme),
         color: colorFgGrammeme(grammeme)

rsconcept/frontend/src/features/rsform/components/icon-cst-match-mode.tsx

@@ -8,12 +8,12 @@ export function IconCstMatchMode({ value, size = '1.25rem', className }: DomIcon
     case CstMatchMode.ALL:
       return <IconFilter size={size} className={className} />;
     case CstMatchMode.TEXT:
-      return <IconText size={size} className={className ?? 'text-sec-600'} />;
+      return <IconText size={size} className={className ?? 'text-primary'} />;
     case CstMatchMode.EXPR:
-      return <IconFormula size={size} className={className ?? 'text-sec-600'} />;
+      return <IconFormula size={size} className={className ?? 'text-primary'} />;
     case CstMatchMode.TERM:
-      return <IconTerm size={size} className={className ?? 'text-sec-600'} />;
+      return <IconTerm size={size} className={className ?? 'text-primary'} />;
     case CstMatchMode.NAME:
-      return <IconAlias size={size} className={className ?? 'text-sec-600'} />;
+      return <IconAlias size={size} className={className ?? 'text-primary'} />;
   }
 }

rsconcept/frontend/src/features/rsform/components/icon-cst-type.tsx

@@ -16,20 +16,20 @@ import { CstType } from '../backend/types';
 export function IconCstType({ value, size = '1.25rem', className }: DomIconProps<CstType>) {
   switch (value) {
     case CstType.BASE:
-      return <IconCstBaseSet size={size} className={className ?? 'text-ok-600'} />;
+      return <IconCstBaseSet size={size} className={className ?? 'text-constructive'} />;
     case CstType.CONSTANT:
-      return <IconCstConstSet size={size} className={className ?? 'text-ok-600'} />;
+      return <IconCstConstSet size={size} className={className ?? 'text-constructive'} />;
     case CstType.STRUCTURED:
-      return <IconCstStructured size={size} className={className ?? 'text-ok-600'} />;
+      return <IconCstStructured size={size} className={className ?? 'text-constructive'} />;
     case CstType.TERM:
-      return <IconCstTerm size={size} className={className ?? 'text-sec-600'} />;
+      return <IconCstTerm size={size} className={className ?? 'text-primary'} />;
     case CstType.AXIOM:
-      return <IconCstAxiom size={size} className={className ?? 'text-warn-600'} />;
+      return <IconCstAxiom size={size} className={className ?? 'text-destructive'} />;
     case CstType.FUNCTION:
-      return <IconCstFunction size={size} className={className ?? 'text-sec-600'} />;
+      return <IconCstFunction size={size} className={className ?? 'text-primary'} />;
     case CstType.PREDICATE:
-      return <IconCstPredicate size={size} className={className ?? 'text-warn-600'} />;
+      return <IconCstPredicate size={size} className={className ?? 'text-destructive'} />;
     case CstType.THEOREM:
-      return <IconCstTheorem size={size} className={className ?? 'text-warn-600'} />;
+      return <IconCstTheorem size={size} className={className ?? 'text-destructive'} />;
   }
 }

rsconcept/frontend/src/features/rsform/components/icon-dependency-mode.tsx

@@ -15,12 +15,12 @@ export function IconDependencyMode({ value, size = '1.25rem', className }: DomIc
     case DependencyMode.ALL:
       return <IconSettings size={size} className={className} />;
     case DependencyMode.OUTPUTS:
-      return <IconGraphOutputs size={size} className={className ?? 'text-sec-600'} />;
+      return <IconGraphOutputs size={size} className={className ?? 'text-primary'} />;
     case DependencyMode.INPUTS:
-      return <IconGraphInputs size={size} className={className ?? 'text-sec-600'} />;
+      return <IconGraphInputs size={size} className={className ?? 'text-primary'} />;
     case DependencyMode.EXPAND_OUTPUTS:
-      return <IconGraphExpand size={size} className={className ?? 'text-sec-600'} />;
+      return <IconGraphExpand size={size} className={className ?? 'text-primary'} />;
     case DependencyMode.EXPAND_INPUTS:
-      return <IconGraphCollapse size={size} className={className ?? 'text-sec-600'} />;
+      return <IconGraphCollapse size={size} className={className ?? 'text-primary'} />;
   }
 }

rsconcept/frontend/src/features/rsform/components/pick-constituenta.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { useState } from 'react';
-import clsx from 'clsx';
 
 import { createColumnHelper, DataTable, type IConditionalStyle } from '@/components/data-table';
 import { SearchBar } from '@/components/input';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { NoData } from '@/components/view';
 import { APP_COLORS } from '@/styling/colors';
 
@@ -73,10 +73,10 @@ export function PickConstituenta({
   ];
 
   return (
-    <div className={clsx('border', className)} {...restProps}>
+    <div className={cn('border', className)} {...restProps}>
       <SearchBar
         id={id ? `${id}__search` : undefined}
-        className='clr-input border-b rounded-t-md'
+        className='bg-input border-b rounded-t-md'
         noBorder
         query={filterText}
         onChangeQuery={newValue => setFilterText(newValue)}

rsconcept/frontend/src/features/rsform/components/pick-multi-constituenta.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { useState } from 'react';
-import clsx from 'clsx';
 
 import { createColumnHelper, DataTable, type RowSelectionState } from '@/components/data-table';
 import { SearchBar } from '@/components/input';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { NoData } from '@/components/view';
 import { Graph } from '@/models/graph';
 
@@ -98,8 +98,8 @@ export function PickMultiConstituenta({
   ];
 
   return (
-    <div className={clsx(!noBorder && 'border', className)} {...restProps}>
+    <div className={cn(!noBorder && 'border', className)} {...restProps}>
-      <div className='px-3 flex justify-between items-center clr-input border-b rounded-t-md'>
+      <div className='px-3 flex justify-between items-center bg-input border-b rounded-t-md'>
         <div className='w-[24ch] select-none whitespace-nowrap'>
           {items.length > 0 ? `Выбраны ${value.length} из ${items.length}` : 'Конституенты'}
         </div>

rsconcept/frontend/src/features/rsform/components/pick-substitutions.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react';
 import { toast } from 'react-toastify';
-import clsx from 'clsx';
 
 import { type ILibraryItem } from '@/features/library';
 import { SelectLibraryItem } from '@/features/library/components';
@@ -11,6 +10,7 @@ import { MiniButton } from '@/components/control';
 import { createColumnHelper, DataTable, type IConditionalStyle } from '@/components/data-table';
 import { IconAccept, IconPageLeft, IconPageRight, IconRemove, IconReplace } from '@/components/icons';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { NoData } from '@/components/view';
 import { APP_COLORS } from '@/styling/colors';
 import { errorMsg } from '@/utils/labels';
@@ -229,9 +229,9 @@ export function PickSubstitutions({
   ];
 
   return (
-    <div className={clsx('flex flex-col', className)} {...restProps}>
+    <div className={cn('flex flex-col', className)} {...restProps}>
       <div className='flex items-center gap-3'>
-        <div className='w-60 grow flex flex-col basis-1/2 gap-1 border-x border-t clr-input rounded-t-md'>
+        <div className='w-60 grow flex flex-col basis-1/2 gap-1 border-x border-t bg-input rounded-t-md'>
           <SelectLibraryItem
             id='substitute-left-schema'
             noBorder
@@ -248,9 +248,9 @@ export function PickSubstitutions({
             onClick={toggleDelete}
             icon={
               deleteRight ? (
-                <IconPageRight size='1.5rem' className='text-sec-600' />
+                <IconPageRight size='1.5rem' className='text-primary' />
               ) : (
-                <IconPageLeft size='1.5rem' className='text-sec-600' />
+                <IconPageLeft size='1.5rem' className='text-primary' />
               )
             }
           />
@@ -263,7 +263,7 @@ export function PickSubstitutions({
           />
         </div>
 
-        <div className='w-60 grow basis-1/2 flex flex-col gap-1 border-x border-t clr-input rounded-t-md'>
+        <div className='w-60 grow basis-1/2 flex flex-col gap-1 border-x border-t bg-input rounded-t-md'>
           <SelectLibraryItem
             id='substitute-right-schema'
             noBorder

rsconcept/frontend/src/features/rsform/components/select-cst-type.tsx

@@ -1,6 +1,6 @@
 import { type Styling } from '@/components/props';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { cn } from '@/lib/utils';
+import { cn } from '@/components/utils';
 
 import { CstType } from '../backend/types';
 import { labelCstType } from '../labels';

rsconcept/frontend/src/features/rsform/components/wordform-button.tsx

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

rsconcept/frontend/src/features/rsform/dialogs/dlg-create-cst/form-create-cst.tsx

@@ -124,7 +124,7 @@ export function FormCreateCst({ schema }: FormCreateCstProps) {
           id='dlg_cst_show_comment'
           tabIndex={-1}
           type='button'
-          className='self-start cc-label text-sec-600 hover:underline select-none'
+          className='self-start cc-label text-primary hover:underline select-none'
           onClick={() => setForceComment(true)}
         >
           Добавить комментарий

rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/dlg-cst-template.tsx

@@ -71,7 +71,7 @@ export function DlgCstTemplate() {
       helpTopic={HelpTopic.RSL_TEMPLATES}
     >
       <Tabs
-        selectedTabClassName='clr-selected'
+        selectedTabClassName='cc-selected'
         className='grid'
         selectedIndex={activeTab}
         onSelect={index => setActiveTab(index as TabID)}

rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/tab-template.tsx

@@ -48,7 +48,7 @@ export function TabTemplate() {
 
   return (
     <div className='cc-fade-in'>
-      <div className='flex gap-1 border-t border-x rounded-t-md clr-input'>
+      <div className='flex gap-1 border-t border-x rounded-t-md bg-input'>
         <ComboBox
           value={selectedTemplate ?? null}
           items={templates}

rsconcept/frontend/src/features/rsform/dialogs/dlg-edit-reference/dlg-edit-reference.tsx

@@ -105,7 +105,7 @@ export function DlgEditReference() {
       className='w-160 px-6 h-128'
       helpTopic={HelpTopic.TERM_CONTROL}
     >
-      <Tabs selectedTabClassName='clr-selected' className='grid' selectedIndex={activeTab} onSelect={handleChangeTab}>
+      <Tabs selectedTabClassName='cc-selected' className='grid' selectedIndex={activeTab} onSelect={handleChangeTab}>
         <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
           <TabLabel title='Отсылка на термин в заданной словоформе' label={labelReferenceType(ReferenceType.ENTITY)} />
           <TabLabel

rsconcept/frontend/src/features/rsform/dialogs/dlg-inline-synthesis/dlg-inline-synthesis.tsx

@@ -59,7 +59,7 @@ export function DlgInlineSynthesis() {
       onSubmit={event => void methods.handleSubmit(onSubmit)(event)}
     >
       <Tabs
-        selectedTabClassName='clr-selected'
+        selectedTabClassName='cc-selected'
         className='grid'
         selectedIndex={activeTab}
         onSelect={index => setActiveTab(index as TabID)}

rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx

@@ -39,7 +39,7 @@ export function DlgShowAST() {
         className={clsx(
           'absolute z-pop top-2 right-1/2 translate-x-1/2 max-w-[60ch]',
           'px-2 rounded-2xl',
-          'backdrop-blur-xs bg-prim-100/90',
+          'backdrop-blur-xs bg-background/90',
           'text-lg text-center'
         )}
       >
@@ -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-background starting:bg-prim-100 duration-500'>
+            <span className='bg-selected cc-animate-background starting:bg-background duration-500'>
               {expression.slice(hoverNodeDebounced.start, hoverNodeDebounced.finish)}
             </span>
             <span>{expression.slice(hoverNodeDebounced.finish)}</span>

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/form-constituenta.tsx

@@ -194,7 +194,7 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
         readOnly
         label='Типизация'
         value={typification}
-        className='clr-text-default cursor-default'
+        className='cursor-default'
       />
 
       {!!activeCst.definition_formal || !isElementary ? (
@@ -266,7 +266,7 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
         <button
           type='button'
           tabIndex={-1}
-          className='self-start cc-label text-sec-600 hover:underline select-none'
+          className='self-start cc-label text-primary hover:underline select-none'
           onClick={() => setForceComment(true)}
         >
           Добавить комментарий
@@ -283,13 +283,13 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
           <div className='absolute z-pop top-1/2 -translate-y-1/2 left-full cc-icons'>
             {activeCst.has_inherited_children && !activeCst.is_inherited ? (
               <Indicator
-                icon={<IconPredecessor size='1.25rem' className='text-sec-600' />}
+                icon={<IconPredecessor size='1.25rem' className='text-primary' />}
                 titleHtml='Внимание!</br> Конституента имеет потомков<br/> в операционной схеме синтеза'
               />
             ) : null}
             {activeCst.is_inherited ? (
               <Indicator
-                icon={<IconChild size='1.25rem' className='text-sec-600' />}
+                icon={<IconChild size='1.25rem' className='text-primary' />}
                 titleHtml='Внимание!</br> Конституента является наследником<br/>'
               />
             ) : null}

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/parsing-result.tsx

@@ -25,7 +25,7 @@ export function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingRe
           <p
             tabIndex={-1}
             key={`error-${index}`}
-            className={`text-warn-600 break-all ${disabled ? '' : 'cursor-pointer'}`}
+            className={`text-destructive break-all ${disabled ? '' : 'cursor-pointer'}`}
             onClick={disabled ? undefined : () => onShowError(error)}
           >
             <span className='mr-1 font-semibold underline'>

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

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

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

@@ -22,7 +22,7 @@ export function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps)
         'h-5 sm:h-6',
         'px-1',
         'outline-hidden',
-        'clr-hover clr-text-controls cc-animate-color',
+        'cc-hover 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/features/rsform/pages/rsform-page/editor-rsform-card/rsform-stats.tsx

@@ -39,12 +39,12 @@ export function RSFormStats({ className, stats, isArchive }: RSFormStatsProps) {
       <ValueStats
         id='count_owned'
         title='Собственные'
-        icon={<IconPredecessor size='1.25rem' className='text-sec-600' />}
+        icon={<IconPredecessor size='1.25rem' className='text-primary' />}
         value={stats.count_all - stats.count_inherited}
       />
       <ValueStats
         id='count_inherited'
-        icon={<IconChild size='1.25rem' className='text-sec-600' />}
+        icon={<IconChild size='1.25rem' className='text-primary' />}
         value={stats.count_inherited}
         titleHtml={isArchive ? 'Архивные схемы не хранят<br/> информацию о наследовании' : 'Наследованные'}
       />
@@ -53,94 +53,94 @@ export function RSFormStats({ className, stats, isArchive }: RSFormStatsProps) {
         id='count_ok'
         title='Корректные'
         className='col-start-1'
-        icon={<IconStatusOK size='1.25rem' className='text-ok-600' />}
+        icon={<IconStatusOK size='1.25rem' className='text-constructive' />}
         value={stats.count_all - stats.count_errors - stats.count_property - stats.count_incalculable}
       />
       <ValueStats
         id='count_property'
         title='Неразмерные'
-        icon={<IconStatusProperty size='1.25rem' className='text-sec-600' />}
+        icon={<IconStatusProperty size='1.25rem' className='text-primary' />}
         value={stats.count_errors}
       />
       <ValueStats
         id='count_incalculable'
         title='Невычислимые'
-        icon={<IconStatusIncalculable size='1.25rem' className='text-warn-600' />}
+        icon={<IconStatusIncalculable size='1.25rem' className='text-destructive' />}
         value={stats.count_incalculable}
       />
       <ValueStats
         id='count_errors'
         title='Некорректные'
-        icon={<IconStatusError size='1.25rem' className='text-warn-600' />}
+        icon={<IconStatusError size='1.25rem' className='text-destructive' />}
         value={stats.count_errors}
       />
 
       <ValueStats
         id='count_base'
         title='Базисные множества'
-        icon={<IconCstBaseSet size='1.25rem' className='clr-text-controls' />}
+        icon={<IconCstBaseSet size='1.25rem' className='cc-controls' />}
         value={stats.count_base}
       />
       <ValueStats
         id='count_constant'
         title='Константные множества'
-        icon={<IconCstConstSet size='1.25rem' className='clr-text-controls' />}
+        icon={<IconCstConstSet size='1.25rem' className='cc-controls' />}
         value={stats.count_constant}
       />
       <ValueStats
         id='count_structured'
         title='Родовые структуры'
-        icon={<IconCstStructured size='1.25rem' className='clr-text-controls' />}
+        icon={<IconCstStructured size='1.25rem' className='cc-controls' />}
         value={stats.count_structured}
       />
       <ValueStats
         id='count_axiom'
         title='Аксиомы'
-        icon={<IconCstAxiom size='1.25rem' className='clr-text-controls' />}
+        icon={<IconCstAxiom size='1.25rem' className='cc-controls' />}
         value={stats.count_axiom}
       />
 
       <ValueStats
         id='count_term'
         title='Термы'
-        icon={<IconCstTerm size='1.25rem' className='clr-text-controls' />}
+        icon={<IconCstTerm size='1.25rem' className='cc-controls' />}
         value={stats.count_term}
       />
       <ValueStats
         id='count_function'
         title='Терм-функции'
-        icon={<IconCstFunction size='1.25rem' className='clr-text-controls' />}
+        icon={<IconCstFunction size='1.25rem' className='cc-controls' />}
         value={stats.count_function}
       />
       <ValueStats
         id='count_predicate'
         title='Предикат-функции'
-        icon={<IconCstPredicate size='1.25rem' className='clr-text-controls' />}
+        icon={<IconCstPredicate size='1.25rem' className='cc-controls' />}
         value={stats.count_predicate}
       />
       <ValueStats
         id='count_theorem'
         title='Теоремы'
-        icon={<IconCstTheorem size='1.25rem' className='clr-text-controls' />}
+        icon={<IconCstTheorem size='1.25rem' className='cc-controls' />}
         value={stats.count_theorem}
       />
 
       <ValueStats
         id='count_text_term'
         title='Термины'
-        icon={<IconTerminology size='1.25rem' className='text-sec-600' />}
+        icon={<IconTerminology size='1.25rem' className='text-primary' />}
         value={stats.count_text_term}
       />
       <ValueStats
         id='count_definition'
         title='Определения'
-        icon={<IconDefinition size='1.25rem' className='text-sec-600' />}
+        icon={<IconDefinition size='1.25rem' className='text-primary' />}
         value={stats.count_definition}
       />
       <ValueStats
         id='count_convention'
         title='Конвенции'
-        icon={<IconConvention size='1.25rem' className='text-sec-600' />}
+        icon={<IconConvention size='1.25rem' className='text-primary' />}
         value={stats.count_convention}
       />
     </div>

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/tg-node.tsx

@@ -53,7 +53,7 @@ export function TGNode(node: TGNodeInternal) {
       <div
         className={clsx(
           'w-full h-full cursor-default flex items-center justify-center rounded-full',
-          isFocused && 'border-2 border-sec-200',
+          isFocused && 'border-2 border-selected',
           label.length > LABEL_THRESHOLD ? 'text-[12px]/[16px]' : 'text-[14px]/[20px]'
         )}
         style={{

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/select-coloring.tsx

@@ -13,7 +13,7 @@ export function SelectColoring() {
   const setColoring = useTermGraphStore(state => state.setColoring);
 
   return (
-    <div className='relative border rounded-b-none select-none clr-input rounded-t-md pointer-events-auto'>
+    <div className='relative border rounded-b-none select-none bg-input rounded-t-md pointer-events-auto'>
       <div className='absolute z-pop right-10 h-9 flex items-center'>
         {coloring === 'status' ? <BadgeHelp topic={HelpTopic.UI_CST_STATUS} contentClass='min-w-100' /> : null}
         {coloring === 'type' ? <BadgeHelp topic={HelpTopic.UI_CST_CLASS} contentClass='min-w-100' /> : null}

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/view-hidden.tsx

@@ -55,7 +55,7 @@ export function ViewHidden({ items }: ViewHiddenProps) {
         onClick={toggleFolded}
       />
 
-      <div className={clsx('py-2 clr-input border-x', isFolded && 'border-b rounded-b-md')}>
+      <div className={clsx('py-2 bg-input border-x', isFolded && 'border-b rounded-b-md')}>
         <div className={clsx('w-fit select-none cc-view-hidden-header', !isFolded && 'open')}>
           {`Скрытые [${localSelected.length} | ${items.length}]`}
         </div>
@@ -65,7 +65,7 @@ export function ViewHidden({ items }: ViewHiddenProps) {
         tabIndex={-1}
         className={clsx(
           'cc-view-hidden-list flex flex-wrap gap-2 justify-center py-2 -mt-2',
-          'border-x border-b rounded-b-md bg-prim-0',
+          'border-x border-b rounded-b-md bg-popover',
           'text-sm',
           'cc-scroll-y',
           !isFolded && 'open'

rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-main.tsx

@@ -121,7 +121,7 @@ export function MenuMain() {
         tabIndex={-1}
         title='Меню'
         hideTitle={menu.isOpen}
-        icon={<IconMenu size='1.25rem' className='clr-text-controls' />}
+        icon={<IconMenu size='1.25rem' className='cc-controls' />}
         className='h-full pl-2'
         onClick={menu.toggle}
       />

rsconcept/frontend/src/features/rsform/pages/rsform-page/rstabs.tsx

@@ -76,7 +76,7 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
       selectedIndex={activeTab}
       onSelect={onSelectTab}
       defaultFocus
-      selectedTabClassName='clr-selected'
+      selectedTabClassName='cc-selected'
       className='relative flex flex-col min-w-fit items-center'
     >
       <TabList className='absolute z-sticky flex border-b-2 border-x-2 divide-x-2 bg-prim-200'>

rsconcept/frontend/src/features/rsform/pages/rsform-page/view-constituents/constituents-search.tsx

@@ -27,7 +27,7 @@ export function ConstituentsSearch({ dense }: ConstituentsSearchProps) {
   const schema = useRSEdit().schema;
 
   return (
-    <div className='flex border-b clr-input rounded-t-md'>
+    <div className='flex border-b bg-input rounded-t-md'>
       <SearchBar
         id='constituents_search'
         noBorder
@@ -42,7 +42,7 @@ export function ConstituentsSearch({ dense }: ConstituentsSearchProps) {
           noHover
           titleHtml={`Наследованные: <b>${includeInherited ? 'отображать' : 'скрывать'}</b>`}
           aria-label={`Отображение наследованных: ${includeInherited ? 'отображать' : 'скрывать'}`}
-          icon={<IconChild size='1rem' className={includeInherited ? 'icon-primary' : 'clr-text-controls'} />}
+          icon={<IconChild size='1rem' className={includeInherited ? 'icon-primary' : 'cc-controls'} />}
           className='h-fit self-center'
           onClick={toggleInherited}
         />

rsconcept/frontend/src/features/rsform/pages/rsform-page/view-constituents/select-graph-filter.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import clsx from 'clsx';
-
 import { SelectorButton } from '@/components/control';
 import { Dropdown, DropdownButton, useDropdown } from '@/components/dropdown';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { useWindowSize } from '@/hooks/use-window-size';
 import { prefixes } from '@/utils/constants';
 
@@ -28,9 +27,8 @@ export function SelectGraphFilter({ value, dense, className, onChange, ...restPr
   }
 
   return (
-    <div ref={menu.ref} onBlur={menu.handleBlur} className={clsx('relative', className)} {...restProps}>
+    <div ref={menu.ref} onBlur={menu.handleBlur} className={cn('relative', className)} {...restProps}>
       <SelectorButton
-        transparent
         tabIndex={-1}
         titleHtml='Настройка фильтрации <br/>по графу термов'
         hideTitle={menu.isOpen}

rsconcept/frontend/src/features/rsform/pages/rsform-page/view-constituents/select-match-mode.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import clsx from 'clsx';
-
 import { SelectorButton } from '@/components/control';
 import { Dropdown, DropdownButton, useDropdown } from '@/components/dropdown';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { useWindowSize } from '@/hooks/use-window-size';
 import { prefixes } from '@/utils/constants';
 
@@ -28,9 +27,8 @@ export function SelectMatchMode({ value, dense, className, onChange, ...restProp
   }
 
   return (
-    <div ref={menu.ref} onBlur={menu.handleBlur} className={clsx('relative', className)} {...restProps}>
+    <div ref={menu.ref} onBlur={menu.handleBlur} className={cn('relative', className)} {...restProps}>
       <SelectorButton
-        transparent
         titleHtml='Настройка фильтрации <br/>по проверяемым атрибутам'
         hideTitle={menu.isOpen}
         className='h-full pr-2'

rsconcept/frontend/src/features/users/pages/register-page/form-signup.tsx

@@ -156,16 +156,16 @@ function ServerError({ error }: { error: ErrorData }): React.ReactElement {
     if ('email' in error.response.data) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='mx-auto text-sm select-text text-warn-600'>{error.response.data.email}</div>
+        <div className='mx-auto text-sm select-text text-destructive'>{error.response.data.email}</div>
       );
     } else if ('username' in error.response.data) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='mx-auto text-sm select-text text-warn-600'>{error.response.data.username}</div>
+        <div className='mx-auto text-sm select-text text-destructive'>{error.response.data.username}</div>
       );
     } else {
       return (
-        <div className='mx-auto text-sm select-text text-warn-600'>
+        <div className='mx-auto text-sm select-text text-destructive'>
           <PrettyJson data={error.response} />
         </div>
       );

rsconcept/frontend/src/features/users/pages/user-profile-page/editor-password.tsx

@@ -77,7 +77,7 @@ export function EditorPassword() {
 // ====== Internals =========
 function ServerError({ error }: { error: ErrorData }): React.ReactElement {
   if (isAxiosError(error) && error.response && error.response.status === 400) {
-    return <div className='text-sm select-text text-warn-600'>Неверно введен старый пароль</div>;
+    return <div className='text-sm select-text text-destructive'>Неверно введен старый пароль</div>;
   }
   throw error as Error;
 }