R: Simplify inline styles pt3

rsconcept/frontend/src/app/application-layout.tsx

@@ -27,7 +27,7 @@ export function ApplicationLayout() {
     <NavigationState>
       <div className='min-w-80 antialiased h-full max-w-480 mx-auto'>
         <ToasterThemed
-          className={clsx('text-[14px]', noNavigationAnimation ? 'mt-6' : 'mt-14')}
+          className={clsx('text-[14px]/[20px]', noNavigationAnimation ? 'mt-6' : 'mt-14')}
           autoClose={3000}
           draggable={false}
           pauseOnFocusLoss={false}

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

@@ -40,7 +40,7 @@ export function Dropdown({
     <div
       tabIndex={-1}
       className={clsx(
-        'cc-dropdown grid bg-prim-0 border rounded-md shadow-lg text-sm',
+        'cc-dropdown isolate z-topmost absolute grid bg-prim-0 border rounded-md shadow-lg text-sm',
         stretchLeft ? 'right-0' : 'left-0',
         stretchTop ? 'bottom-0' : 'top-full',
         isOpen && 'open',

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

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

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

@@ -18,7 +18,6 @@ import {
   IconTree,
   IconTypeGraph
 } from '@/components/icons';
-import { APP_COLORS } from '@/styling/colors';
 
 import { LinkTopic } from '../../components/link-topic';
 import { HelpTopic } from '../../models/help-topic';
@@ -69,15 +68,15 @@ export function HelpRSEditor() {
             <IconChild className='inline-icon' /> отображение наследованных
           </li>
           <li>
-            <span style={{ backgroundColor: APP_COLORS.bgSelected }}>текущая конституента</span>
+            <span className='bg-sec-200'>текущая конституента</span>
           </li>
           <li>
-            <span style={{ backgroundColor: APP_COLORS.bgGreen50 }}>
+            <span className='bg-(--acc-bg-green50)'>
               <LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> текущей
             </span>
           </li>
           <li>
-            <span style={{ backgroundColor: APP_COLORS.bgOrange50 }}>
+            <span className='bg-(--acc-bg-orange50)'>
               <LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> текущей
             </span>
           </li>

rsconcept/frontend/src/features/help/items/ui/help-rsgraph-term.tsx

@@ -19,7 +19,6 @@ import {
   IconText,
   IconTypeGraph
 } from '@/components/icons';
-import { APP_COLORS } from '@/styling/colors';
 
 import { LinkTopic } from '../../components/link-topic';
 import { HelpTopic } from '../../models/help-topic';
@@ -49,7 +48,7 @@ export function HelpRSGraphTerm() {
           <h1>Изменение узлов</h1>
           <li>Клик на узел – выделение</li>
           <li>
-            Левый клик – выбор <span style={{ color: APP_COLORS.fgPurple }}>фокус-конституенты</span>
+            Левый клик – выбор <span className='text-(--acc-fg-purple)'>фокус-конституенты</span>
           </li>
           <li>
             <IconReset className='inline-icon' /> Esc – сбросить выделение

rsconcept/frontend/src/features/help/items/ui/help-type-graph.tsx

@@ -1,5 +1,3 @@
-import { APP_COLORS } from '@/styling/colors';
-
 import { LinkTopic } from '../../components/link-topic';
 import { HelpTopic } from '../../models/help-topic';
 
@@ -21,13 +19,13 @@ export function HelpTypeGraph() {
 
       <h2>Виды узлов</h2>
       <li>
-        <span style={{ backgroundColor: APP_COLORS.bgControls }}>ступень-основание</span>
+        <span className='bg-prim-200'>ступень-основание</span>
       </li>
       <li>
-        <span style={{ backgroundColor: APP_COLORS.bgTeal }}>ступень-булеан</span>
+        <span className='bg-(--acc-bg-teal)'>ступень-булеан</span>
       </li>
       <li>
-        <span style={{ backgroundColor: APP_COLORS.bgOrange }}>ступень декартова произведения</span>
+        <span className='bg-(--acc-bg-orange)'>ступень декартова произведения</span>
       </li>
     </div>
   );

rsconcept/frontend/src/features/library/pages/library-page/view-side-location.tsx

@@ -1,4 +1,5 @@
 import { toast } from 'react-toastify';
+import clsx from 'clsx';
 
 import { useAuthSuspense } from '@/features/auth';
 import { HelpTopic } from '@/features/help';
@@ -6,9 +7,8 @@ import { BadgeHelp } from '@/features/help/components';
 
 import { MiniButton } from '@/components/control';
 import { IconFolderEdit, IconFolderTree } from '@/components/icons';
-import { useWindowSize } from '@/hooks/use-window-size';
 import { useFitHeight } from '@/stores/app-layout';
-import { PARAMETER, prefixes } from '@/utils/constants';
+import { prefixes } from '@/utils/constants';
 import { infoMsg } from '@/utils/labels';
 
 import { useLibrary } from '../../backend/use-library';
@@ -25,7 +25,6 @@ interface ViewSideLocationProps {
 export function ViewSideLocation({ isVisible, onRenameLocation }: ViewSideLocationProps) {
   const { user, isAnonymous } = useAuthSuspense();
   const { items } = useLibrary();
-  const { isSmall } = useWindowSize();
 
   const location = useLibrarySearchStore(state => state.location);
   const setLocation = useLibrarySearchStore(state => state.setLocation);
@@ -62,15 +61,10 @@ export function ViewSideLocation({ isVisible, onRenameLocation }: ViewSideLocati
 
   return (
     <div
-      className='max-w-40 sm:max-w-60 flex flex-col text:xs sm:text-sm select-none'
+      className={clsx(
-      style={{
+        'max-w-40 sm:max-w-60 flex flex-col text:xs sm:text-sm select-none cc-side-location',
-        transitionProperty: 'width, min-width, opacity',
+        isVisible && 'open min-w-[10rem] sm:min-w-[15rem]'
-        transitionDuration: `${PARAMETER.moveDuration}ms`,
+      )}
-        transitionTimingFunction: 'ease-out',
-        minWidth: isVisible ? (isSmall ? '10rem' : '15rem') : '0',
-        width: isVisible ? '100%' : '0',
-        opacity: isVisible ? 1 : 0
-      }}
     >
       <div className='h-8 flex justify-between items-center pr-1 pl-0.5'>
         <BadgeHelp topic={HelpTopic.UI_LIBRARY} contentClass='text-sm' offset={5} place='right-start' />

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

@@ -7,7 +7,6 @@ import { PickSubstitutions } from '@/features/rsform/components';
 
 import { TextArea } from '@/components/input';
 import { useDialogsStore } from '@/stores/dialogs';
-import { APP_COLORS } from '@/styling/colors';
 
 import { type IOperationUpdateDTO } from '../../backend/types';
 import { SubstitutionValidator } from '../../models/oss-api';
@@ -45,12 +44,7 @@ export function TabSynthesis() {
         )}
       />
 
-      <TextArea
+      <TextArea disabled value={validator.msg} rows={4} className={isCorrect ? '' : 'border-(--acc-fg-red) border-2'} />
-        disabled
-        value={validator.msg}
-        rows={4}
-        style={{ borderColor: isCorrect ? undefined : APP_COLORS.fgRed, borderWidth: isCorrect ? undefined : '2px' }}
-      />
     </div>
   );
 }

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

@@ -1,5 +1,7 @@
 'use client';
 
+import clsx from 'clsx';
+
 import { IconConsolidation, IconRSForm } from '@/components/icons';
 import { Indicator } from '@/components/view';
 import { globalIDs } from '@/utils/constants';
@@ -52,13 +54,10 @@ export function NodeCore({ node }: NodeCoreProps) {
       ) : null}
 
       <div
-        className='text-center line-clamp-2'
+        className={clsx(
-        style={{
+          'text-center line-clamp-2 pl-[4px]',
-          fontSize: longLabel ? '12px' : '14px',
+          longLabel ? 'text-[12px]/[16px] pr-[10px]' : 'text-[14px]/[20px] pr-[4px]'
-          lineHeight: longLabel ? '16px' : '20px',
+        )}
-          paddingLeft: '4px',
-          paddingRight: longLabel ? '10px' : '4px'
-        }}
       >
         {node.data.label}
       </div>

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

@@ -1,5 +1,3 @@
-import { APP_COLORS } from '@/styling/colors';
-
 import { colorFgGrammeme } from '../colors';
 import { labelGrammeme } from '../labels';
 import { type GramData } from '../models/language';
@@ -15,11 +13,10 @@ 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'
+      className='min-w-12 px-1 border rounded-md text-sm font-medium text-center whitespace-nowrap bg-prim-0'
       style={{
         borderColor: colorFgGrammeme(grammeme),
-        color: colorFgGrammeme(grammeme),
+        color: colorFgGrammeme(grammeme)
-        backgroundColor: APP_COLORS.bgInput
       }}
     >
       {labelGrammeme(grammeme)}

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

@@ -1,16 +1,12 @@
 'use client';
 
 import { Handle, Position } from 'reactflow';
-
+import clsx from 'clsx';
-import { APP_COLORS } from '@/styling/colors';
 
 import { colorBgSyntaxTree } from '../../../colors';
 import { labelSyntaxTree } from '../../../labels';
 import { type ISyntaxTreeNode } from '../../../models/rslang';
 
-const FONT_SIZE_MAX = 14;
-const FONT_SIZE_MED = 12;
-
 const LABEL_THRESHOLD = 3;
 
 /**
@@ -30,24 +26,20 @@ export function ASTNode(node: ASTNodeInternal) {
 
   return (
     <>
-      <Handle type='target' position={Position.Top} style={{ opacity: 0 }} />
+      <Handle type='target' position={Position.Top} className='opacity-0' />
       <div
         className='w-full h-full cursor-default flex items-center justify-center rounded-full'
         style={{ backgroundColor: colorBgSyntaxTree(node.data) }}
       />
-      <Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
+      <Handle type='source' position={Position.Bottom} className='opacity-0' />
       <div
-        className='font-math mt-1 w-fit text-center translate-x-[calc(-50%+20px)]'
+        className={clsx(
-        style={{ fontSize: label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX }}
+          'font-math mt-1 w-fit text-center translate-x-[calc(-50%+20px)]',
+          label.length > LABEL_THRESHOLD ? 'text-[12px]/[16px]' : 'text-[14px]/[20px]'
+        )}
       >
         <div className='absolute top-0 left-0 text-center w-full'>{label}</div>
-        <div
+        <div aria-hidden className='cc-ast-label-outline'>
-          aria-hidden='true'
-          style={{
-            WebkitTextStrokeWidth: 2,
-            WebkitTextStrokeColor: APP_COLORS.bgDefault
-          }}
-        >
           {label}
         </div>
       </div>

rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/mgraph-node.tsx

@@ -2,7 +2,6 @@
 
 import { Handle, Position } from 'reactflow';
 
-import { APP_COLORS } from '@/styling/colors';
 import { globalIDs } from '@/utils/constants';
 
 import { colorBgTMGraphNode } from '../../../colors';
@@ -28,15 +27,10 @@ export function MGraphNode(node: MGraphNodeInternal) {
     <>
       <Handle type='source' position={Position.Top} className='opacity-0' />
       <div
-        className='w-full h-full cursor-default flex items-center justify-center rounded-full'
+        className='cc-node-label w-full h-full cursor-default flex items-center justify-center rounded-full'
         data-tooltip-id={globalIDs.tooltip}
         data-tooltip-html={tooltipText}
-        style={{
+        style={{ backgroundColor: colorBgTMGraphNode(node.data) }}
-          backgroundColor: colorBgTMGraphNode(node.data),
-          fontWeight: 600,
-          WebkitTextStrokeWidth: '0.6px',
-          WebkitTextStrokeColor: APP_COLORS.bgDefault
-        }}
       >
         {node.data.rank === 0 ? node.data.text : node.data.annotations.length > 0 ? node.data.annotations.length : ''}
       </div>

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-edit-controls.tsx

@@ -98,6 +98,7 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP
         'select-none',
         isOpen && 'open'
       )}
+      aria-hidden={!isOpen}
     >
       {MAIN_FIRST_ROW.map(token => (
         <RSTokenButton key={`${prefixes.rsedit_btn}${token}`} token={token} onInsert={onEdit} disabled={disabled} />

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

@@ -54,7 +54,7 @@ export function TGNode(node: TGNodeInternal) {
         className={clsx(
           'w-full h-full cursor-default flex items-center justify-center rounded-full',
           isFocused && 'border-2 border-sec-200',
-          label.length > LABEL_THRESHOLD ? 'text-[12px]' : 'text-[14px]'
+          label.length > LABEL_THRESHOLD ? 'text-[12px]/[16px]' : 'text-[14px]/[20px]'
         )}
         style={{
           backgroundColor: node.selected
@@ -76,7 +76,7 @@ export function TGNode(node: TGNodeInternal) {
         <div
           className={clsx(
             'mt-1 w-[150px] px-1 text-center translate-x-[calc(-50%+20px)]',
-            description.length > DESCRIPTION_THRESHOLD ? 'text-[10px]' : 'text-[12px]'
+            description.length > DESCRIPTION_THRESHOLD ? 'text-[10px]/[12px]' : 'text-[12px]/[16px]'
           )}
           onContextMenu={handleContextMenu}
           onDoubleClick={handleDoubleClick}
@@ -84,7 +84,7 @@ export function TGNode(node: TGNodeInternal) {
           <div className='absolute top-0 px-1 left-0 text-center w-full line-clamp-3 hover:line-clamp-none'>
             {description}
           </div>
-          <div aria-hidden='true' className='line-clamp-3 hover:line-clamp-none cc-text-outline'>
+          <div aria-hidden className='line-clamp-3 hover:line-clamp-none cc-text-outline'>
             {description}
           </div>
         </div>

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

@@ -70,6 +70,7 @@ export function ViewHidden({ items }: ViewHiddenProps) {
           'cc-scroll-y',
           !isFolded && 'open'
         )}
+        aria-hidden={isFolded}
         style={{ maxHeight: hiddenHeight }}
       >
         {items.map(cstID => {

rsconcept/frontend/src/styling/components.css

@@ -21,7 +21,6 @@
 }
 
 @utility cc-tree-item {
-  position: relative;
   padding-left: 1.5rem;
   padding-right: 0.75rem;
 
@@ -80,10 +79,12 @@
   -webkit-text-stroke-color: var(--clr-prim-100);
 }
 
-@utility cc-dropdown {
+@utility cc-ast-label-outline {
-  position: absolute;
+  -webkit-text-stroke-width: 2px;
-  z-index: var(--z-index-topmost);
+  -webkit-text-stroke-color: var(--clr-prim-100);
+}
 
+@utility cc-dropdown {
   transition-property: clip-path, transform;
   transition-duration: var(--duration-dropdown);
   transition-timing-function: var(--ease-in-out);
@@ -97,6 +98,21 @@
   }
 }
 
+@utility cc-side-location {
+  transition-property: width, min-width, opacity;
+  transition-duration: var(--duration-move);
+  transition-timing-function: var(--ease-bezier);
+
+  opacity: 0;
+  width: 0;
+  min-width: 0;
+
+  &.open {
+    opacity: 1;
+    width: 100%;
+  }
+}
+
 @utility cc-view-hidden-header {
   transition-property: transform;
   transition-duration: var(--duration-dropdown);

rsconcept/frontend/src/styling/setup.css

@@ -169,7 +169,3 @@
 @utility border {
   border-radius: 0.25rem;
 }
-
-@utility sticky {
-  z-index: 20;
-}