R: Simplify inline styles pt2

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

@@ -120,15 +120,15 @@ export function DataTable<TData extends RowData>({
   onRowDoubleClicked,
   noDataComponent,
 
+  paginationPerPage,
   paginationOptions = [10, 20, 30, 40, 50],
 
   ...restProps
 }: DataTableProps<TData>) {
   const [lastSelected, setLastSelected] = useState<string | null>(null);
 
-  const table = useDataTable({ ...restProps });
+  const table = useDataTable({ paginationPerPage, ...restProps });
 
-  const isPaginationEnabled = typeof table.getCanNextPage === 'function';
   const isEmpty = table.getRowModel().rows.length === 0;
 
   const fixedSize = useMemo(() => {
@@ -178,7 +178,7 @@ export function DataTable<TData extends RowData>({
         {!noFooter ? <TableFooter table={table} /> : null}
       </table>
 
-      {isPaginationEnabled && !isEmpty ? (
+      {!!paginationPerPage && !isEmpty ? (
         <PaginationTools
           id={id ? `${id}__pagination` : undefined}
           table={table}

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

@@ -34,29 +34,19 @@ export function Dropdown({
   margin,
   className,
   children,
-  style,
   ...restProps
 }: React.PropsWithChildren<DropdownProps>) {
   return (
     <div
       tabIndex={-1}
       className={clsx(
-        'z-topmost absolute',
+        'cc-dropdown grid bg-prim-0 border rounded-md shadow-lg text-sm',
         stretchLeft ? 'right-0' : 'left-0',
         stretchTop ? 'bottom-0' : 'top-full',
-        'grid',
+        isOpen && 'open',
-        'border rounded-md shadow-lg',
-        'clr-input',
-        'text-sm',
-        'ease-in-out duration-(--duration-dropdown) will-change-[clip-path,transform] transition-[clip-path,transform]',
         margin,
         className
       )}
-      style={{
-        transform: isOpen ? 'translateY(0)' : 'translateY(-10%)',
-        clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(10% 0% 90% 0%)',
-        ...style
-      }}
       aria-hidden={!isOpen}
       {...restProps}
     >

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

@@ -61,7 +61,7 @@ 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 cc-blur bg-prim-100/90 rounded-2xl'
+              fullScreen && 'z-pop absolute top-0 right-1/2 translate-x-1/2 backdrop-blur-xs bg-prim-100/90 rounded-2xl'
             )}
           >
             {header}
@@ -87,12 +87,12 @@ export function ModalView({
             aria-label='Закрыть'
             className={clsx(
               'my-2 mx-auto text-sm min-w-28',
-              fullScreen && 'z-pop absolute bottom-0 right-1/2 translate-x-1/2 cc-blur'
+              fullScreen && 'z-pop absolute bottom-0 right-1/2 translate-x-1/2'
             )}
             onClick={hideDialog}
           />
         ) : (
-          <div className='z-pop absolute bottom-0 right-1/2 translate-x-1/2 bg-prim-100/90 cc-blur p-3 rounded-xl'>
+          <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'>
             {' '}
             <Button text='Закрыть' aria-label='Закрыть' className='text-sm min-w-28' onClick={hideDialog} />
           </div>

rsconcept/frontend/src/components/view/embed-youtube.tsx

@@ -18,9 +18,8 @@ export function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps)
   }
   return (
     <div
-      className='relative'
+      className='relative h-0'
       style={{
-        height: 0,
         paddingBottom: `${pxHeight}px`,
         paddingLeft: `${pxWidth}px`
       }}

rsconcept/frontend/src/features/help/items/ui/help-formula-tree.tsx

@@ -1,5 +1,3 @@
-import { APP_COLORS } from '@/styling/colors';
-
 export function HelpFormulaTree() {
   return (
     <div>
@@ -12,22 +10,22 @@ export function HelpFormulaTree() {
 
       <h2>Виды узлов</h2>
       <li>
-        <span style={{ backgroundColor: APP_COLORS.bgGreen }}>объявление идентификатора</span>
+        <span className='bg-(--acc-bg-green)'>объявление идентификатора</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>
       <li>
-        <span style={{ backgroundColor: APP_COLORS.bgBlue }}>типизированное выражение</span>
+        <span className='bg-(--acc-bg-blue)'>типизированное выражение</span>
       </li>
       <li>
-        <span style={{ backgroundColor: APP_COLORS.bgRed }}>присвоение и итерация</span>
+        <span className='bg-(--acc-bg-red)'>присвоение и итерация</span>
       </li>
       <li>
-        <span style={{ backgroundColor: APP_COLORS.bgDisabled }}>составные выражения</span>
+        <span className='bg-prim-300'>составные выражения</span>
       </li>
     </div>
   );

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

@@ -16,7 +16,6 @@ import {
   IconSubfolders,
   IconUserSearch
 } from '@/components/icons';
-import { APP_COLORS } from '@/styling/colors';
 
 import { LinkTopic } from '../../components/link-topic';
 import { HelpTopic } from '../../models/help-topic';
@@ -33,7 +32,7 @@ export function HelpLibrary() {
       </p>
 
       <li>
-        <span style={{ color: APP_COLORS.fgGreen }}>зеленым текстом</span> выделены ОСС
+        <span className='text-(--acc-fg-green)'>зеленым текстом</span> выделены ОСС
       </li>
       <li>клик по строке - переход к редактированию схемы</li>
       <li>Ctrl + клик по строке откроет схему в новой вкладке</li>

rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx

@@ -7,7 +7,7 @@ import { useDropdown } from '@/components/dropdown';
 import { IconMenuFold, IconMenuUnfold } from '@/components/icons';
 import { SelectTree } from '@/components/input';
 import { useAppLayoutStore, useFitHeight } from '@/stores/app-layout';
-import { PARAMETER, prefixes } from '@/utils/constants';
+import { prefixes } from '@/utils/constants';
 
 import { describeHelpTopic, labelHelpTopic } from '../../labels';
 import { HelpTopic, topicParent } from '../../models/help-topic';
@@ -56,14 +56,11 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro
         getParent={item => topicParent.get(item) ?? item}
         getLabel={labelHelpTopic}
         getDescription={describeHelpTopic}
-        className='border-r border-t rounded-none cc-scroll-y bg-prim-200'
+        className={clsx(
-        style={{
+          'cc-topic-dropdown border-r border-t rounded-none cc-scroll-y bg-prim-200',
-          maxHeight: treeHeight,
+          menu.isOpen && 'open'
-          willChange: 'clip-path',
+        )}
-          transitionProperty: 'clip-path',
+        style={{ maxHeight: treeHeight }}
-          transitionDuration: `${PARAMETER.moveDuration}ms`,
-          clipPath: menu.isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 100% 0% 0%)'
-        }}
       />
     </div>
   );

rsconcept/frontend/src/features/library/pages/create-item-page/form-create-item.tsx

@@ -113,7 +113,8 @@ export function FormCreateItem() {
                   id='schema_file'
                   ref={inputRef}
                   type='file'
-                  style={{ display: 'none' }}
+                  aria-hidden
+                  className='hidden'
                   accept={EXTEOR_TRS_FILE}
                   onChange={handleFileChange}
                 />

rsconcept/frontend/src/features/oss/components/info-operation.tsx

@@ -74,7 +74,7 @@ export function InfoOperation({ operation }: InfoOperationProps) {
           dense
           noHeader
           noFooter
-          className='text-sm border select-none mb-2'
+          className='text-sm border-x select-none mb-2'
           data={operation.substitutions}
           columns={columns}
         />

rsconcept/frontend/src/features/oss/components/operation-tooltip.tsx

@@ -12,8 +12,7 @@ export function OperationTooltip() {
       clickable
       id={globalIDs.operation_tooltip}
       layer='z-topmost'
-      className='max-w-140 dense'
+      className='max-w-140 dense max-h-120! overflow-y-auto!'
-      style={{ maxHeight: '30rem', overflowY: 'auto' }}
       hidden={!hoverOperation}
     >
       {hoverOperation ? <InfoOperation operation={hoverOperation} /> : null}

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

@@ -131,8 +131,7 @@ export function ToolbarOssGraph({
       className={clsx(
         'flex flex-col items-center pt-1',
         'rounded-b-2xl',
-        'cc-blur',
+        'hover:bg-prim-100 hover:bg-opacity-50 backdrop-blur-xs',
-        'hover:bg-prim-100 hover:bg-opacity-50',
         className
       )}
       {...restProps}

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

@@ -35,7 +35,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',
-          'cc-blur bg-prim-100/90',
+          'backdrop-blur-xs bg-prim-100/90',
           'text-lg text-center'
         )}
       >

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

@@ -26,7 +26,7 @@ export function MGraphNode(node: MGraphNodeInternal) {
 
   return (
     <>
-      <Handle type='source' position={Position.Top} style={{ opacity: 0 }} />
+      <Handle type='source' position={Position.Top} className='opacity-0' />
       <div
         className='w-full h-full cursor-default flex items-center justify-center rounded-full'
         data-tooltip-id={globalIDs.tooltip}
@@ -40,7 +40,7 @@ export function MGraphNode(node: MGraphNodeInternal) {
       >
         {node.data.rank === 0 ? node.data.text : node.data.annotations.length > 0 ? node.data.annotations.length : ''}
       </div>
-      <Handle type='target' position={Position.Bottom} style={{ opacity: 0 }} />
+      <Handle type='target' position={Position.Bottom} className='opacity-0' />
     </>
   );
 }

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

@@ -80,7 +80,7 @@ export function ToolbarConstituenta({
   }
 
   return (
-    <div className={clsx('px-1 rounded-b-2xl cc-blur cc-icons cc-animate-position outline-hidden', className)}>
+    <div className={clsx('px-1 rounded-b-2xl backdrop-blur-xs cc-icons cc-animate-position outline-hidden', className)}>
       {schema.oss.length > 0 ? (
         <MiniSelectorOSS
           items={schema.oss}

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

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 import { type IExpressionParseDTO, type IRSErrorDescription } from '../../../backend/types';
 import { describeRSError } from '../../../labels';
 import { getRSErrorPrefix } from '../../../models/rslang-api';
@@ -14,17 +16,7 @@ export function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingRe
   const warningsCount = data ? data.errors.length - errorCount : 0;
 
   return (
-    <div
+    <div tabIndex={-1} className={clsx('cc-parsing-result text-sm border dense cc-scroll-y', isOpen && 'open')}>
-      tabIndex={-1}
-      className='text-sm border dense cc-scroll-y transition-all duration-300'
-      style={{
-        clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 0% 100% 0%)',
-        marginTop: isOpen ? '0.75rem' : '0rem',
-        padding: isOpen ? '0.25rem 0.5rem 0.25rem 0.5rem' : '0rem 0rem 0rem 0rem',
-        borderWidth: isOpen ? '1px' : '0px',
-        height: isOpen ? '4.5rem' : '0rem'
-      }}
-    >
       <p>
         Ошибок: <b>{errorCount}</b> | Предупреждений: <b>{warningsCount}</b>
       </p>

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

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { PARAMETER, prefixes } from '@/utils/constants';
+import { prefixes } from '@/utils/constants';
 
 import { TokenID } from '../../../backend/types';
 
@@ -91,19 +91,13 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP
   return (
     <div
       className={clsx(
+        'cc-rs-edit-controls',
         'max-w-112 min-w-112 xs:max-w-154 xs:min-w-154 sm:max-w-160 sm:min-w-160 md:max-w-fit mx-1 sm:mx-0',
-        'flex-wrap',
+        'flex flex-wrap',
-        'divide-solid',
         'text-xs md:text-sm',
-        'select-none'
+        'select-none',
+        isOpen && 'open'
       )}
-      style={{
-        clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 0% 100% 0%)',
-        marginTop: isOpen ? '0.25rem' : '0rem',
-        transitionProperty: 'max-height',
-        transitionDuration: `${PARAMETER.moveDuration}ms`,
-        maxHeight: isOpen ? '4.5rem' : '0rem'
-      }}
     >
       {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

@@ -1,6 +1,7 @@
 'use client';
 
 import { Handle, Position } from 'reactflow';
+import clsx from 'clsx';
 
 import { APP_COLORS } from '@/styling/colors';
 import { globalIDs } from '@/utils/constants';
@@ -13,10 +14,6 @@ import { useRSEdit } from '../../rsedit-context';
 const DESCRIPTION_THRESHOLD = 15;
 const LABEL_THRESHOLD = 3;
 
-const FONT_SIZE_MAX = 14;
-const FONT_SIZE_MED = 12;
-const FONT_SIZE_MIN = 10;
-
 /**
  * Represents graph AST node internal data.
  */
@@ -52,18 +49,19 @@ export function TGNode(node: TGNodeInternal) {
 
   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'
+        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]'
+        )}
         style={{
           backgroundColor: node.selected
             ? APP_COLORS.bgActiveSelection
             : isFocused
             ? APP_COLORS.bgPurple
-            : colorBgGraphNode(node.data, coloring),
+            : colorBgGraphNode(node.data, coloring)
-          fontSize: label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX,
-          borderWidth: isFocused ? '2px' : '0px',
-          borderColor: isFocused ? APP_COLORS.bgSelected : 'transparent'
         }}
         data-tooltip-id={globalIDs.tooltip}
         data-tooltip-html={describeCstNode(node.data)}
@@ -71,37 +69,22 @@ export function TGNode(node: TGNodeInternal) {
         onContextMenu={handleContextMenu}
         onDoubleClick={handleDoubleClick}
       >
-        <div
+        <div className='cc-node-label'>{label}</div>
-          style={{
-            fontWeight: 600,
-            WebkitTextStrokeWidth: '0.6px',
-            WebkitTextStrokeColor: APP_COLORS.bgDefault
-          }}
-        >
-          {label}
       </div>
-      </div>
+      <Handle type='source' position={Position.Bottom} className='opacity-0' />
-      <Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
       {description ? (
         <div
-          className='mt-1 w-[150px] px-1 text-center translate-x-[calc(-50%+20px)]'
+          className={clsx(
-          style={{
+            'mt-1 w-[150px] px-1 text-center translate-x-[calc(-50%+20px)]',
-            fontSize: description.length > DESCRIPTION_THRESHOLD ? FONT_SIZE_MIN : FONT_SIZE_MED
+            description.length > DESCRIPTION_THRESHOLD ? 'text-[10px]' : 'text-[12px]'
-          }}
+          )}
           onContextMenu={handleContextMenu}
           onDoubleClick={handleDoubleClick}
         >
           <div className='absolute top-0 px-1 left-0 text-center w-full line-clamp-3 hover:line-clamp-none'>
             {description}
           </div>
-          <div
+          <div aria-hidden='true' className='line-clamp-3 hover:line-clamp-none cc-text-outline'>
-            aria-hidden='true'
-            className='line-clamp-3 hover:line-clamp-none'
-            style={{
-              WebkitTextStrokeWidth: '3px',
-              WebkitTextStrokeColor: APP_COLORS.bgDefault
-            }}
-          >
             {description}
           </div>
         </div>

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

@@ -163,7 +163,7 @@ export function TGFlow() {
 
   return (
     <div className='cc-fade-in relative' tabIndex={-1} onKeyDown={handleKeyDown}>
-      <div className='cc-tab-tools flex flex-col items-center rounded-b-2xl cc-blur'>
+      <div className='cc-tab-tools flex flex-col items-center rounded-b-2xl backdrop-blur-xs'>
         <ToolbarTermGraph />
         <ToolbarFocusedCst />
         {!focusCst ? (
@@ -181,7 +181,7 @@ export function TGFlow() {
       </div>
 
       <div className='absolute z-pop top-18 sm:top-16 left-2 sm:left-3 w-54 flex flex-col pointer-events-none'>
-        <span className='px-2 pb-1 select-none whitespace-nowrap cc-blur rounded-xl'>
+        <span className='px-2 pb-1 select-none whitespace-nowrap backdrop-blur-xs rounded-xl'>
           Выбор {selected.length} из {schema.stats?.count_all ?? 0}
         </span>
         <GraphSelectors />

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/toolbar-focused-cst.tsx

@@ -2,7 +2,6 @@
 
 import { MiniButton } from '@/components/control';
 import { IconGraphInputs, IconGraphOutputs, IconReset } from '@/components/icons';
-import { APP_COLORS } from '@/styling/colors';
 
 import { useTermGraphStore } from '../../../stores/term-graph';
 import { useRSEdit } from '../rsedit-context';
@@ -37,7 +36,7 @@ export function ToolbarFocusedCst() {
 
   return (
     <div className='flex items-center cc-icons'>
-      <div className='w-31 mt-0.5 text-right select-none' style={{ color: APP_COLORS.fgPurple }}>
+      <div className='w-31 mt-0.5 text-right select-none color-(--acc-fg-purple)'>
         <span>
           Фокус
           <b className='pr-1'> {focusCst.alias} </b>

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

@@ -6,8 +6,7 @@ import { MiniButton } from '@/components/control';
 import { IconDropArrow, IconDropArrowUp } from '@/components/icons';
 import { useWindowSize } from '@/hooks/use-window-size';
 import { useFitHeight } from '@/stores/app-layout';
-import { APP_COLORS } from '@/styling/colors';
+import { globalIDs, prefixes } from '@/utils/constants';
-import { globalIDs, PARAMETER, prefixes } from '@/utils/constants';
 
 import { colorBgGraphNode } from '../../../colors';
 import { type IConstituenta } from '../../../models/rsform';
@@ -57,15 +56,7 @@ export function ViewHidden({ items }: ViewHiddenProps) {
       />
 
       <div className={clsx('py-2 clr-input border-x', isFolded && 'border-b rounded-b-md')}>
-        <div
+        <div className={clsx('w-fit select-none cc-view-hidden-header', !isFolded && 'open')}>
-          className='w-fit select-none'
-          style={{
-            transitionProperty: 'translate',
-            transitionDuration: `${PARAMETER.fastAnimation}ms`,
-            transitionTimingFunction: 'ease-out',
-            translate: isFolded ? '0.75rem' : 'calc(6.5rem - 50%)'
-          }}
-        >
           {`Скрытые [${localSelected.length} | ${items.length}]`}
         </div>
       </div>
@@ -73,19 +64,13 @@ export function ViewHidden({ items }: ViewHiddenProps) {
       <div
         tabIndex={-1}
         className={clsx(
-          'flex flex-wrap justify-center gap-2 py-2 -mt-2',
+          'cc-view-hidden-list flex flex-wrap gap-2 justify-center py-2 -mt-2',
-          'clr-input border-x border-b rounded-b-md',
+          'border-x border-b rounded-b-md bg-prim-0',
           'text-sm',
-          'cc-scroll-y'
+          'cc-scroll-y',
+          !isFolded && 'open'
         )}
-        style={{
+        style={{ maxHeight: hiddenHeight }}
-          pointerEvents: isFolded ? 'none' : 'auto',
-          maxHeight: hiddenHeight,
-          transitionProperty: 'clip-path',
-          transitionDuration: `${PARAMETER.fastAnimation}ms`,
-          transitionTimingFunction: 'ease-out',
-          clipPath: isFolded ? 'inset(10% 0% 90% 0%)' : 'inset(0% 0% 0% 0%)'
-        }}
       >
         {items.map(cstID => {
           const cst = schema.cstByID.get(cstID)!;
@@ -93,17 +78,12 @@ export function ViewHidden({ items }: ViewHiddenProps) {
             <button
               key={`${prefixes.cst_hidden_list}${cst.alias}`}
               type='button'
-              className='w-12 rounded-md text-center select-none'
+              className={clsx(
-              style={{
+                'cc-view-hidden-item w-12 rounded-md text-center select-none',
-                backgroundColor: colorBgGraphNode(cst, coloring),
+                localSelected.includes(cstID) && 'selected',
-                ...(localSelected.includes(cstID)
+                cst.is_inherited && 'inherited'
-                  ? {
+              )}
-                      outlineWidth: '2px',
+              style={{ backgroundColor: colorBgGraphNode(cst, coloring) }}
-                      outlineStyle: cst.is_inherited ? 'dashed' : 'solid',
-                      outlineColor: APP_COLORS.fgDefault
-                    }
-                  : {})
-              }}
               onClick={event => handleClick(event, cstID)}
               onContextMenu={event => handleContextMenu(event, cst)}
               onDoubleClick={() => navigateCst(cstID)}

rsconcept/frontend/src/index.css

@@ -2,7 +2,8 @@
 
 @import './styling/setup.css';
 @import './styling/overrides.css';
-@import './styling/styles.css';
+@import './styling/utilities.css';
+@import './styling/components.css';
 
 @custom-variant dark (&:is(.dark *));
 

rsconcept/frontend/src/styling/components.css

@@ -0,0 +1,186 @@
+/**
+ * Module: Utility classes for specific react components.
+ */
+
+@utility cc-tab-tools {
+  z-index: var(--z-index-pop);
+  position: absolute;
+  top: 1.7rem;
+  right: 50%;
+  padding-top: 0.4rem;
+  transform: translate(50%, 0%);
+}
+
+@utility cc-label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  cursor: default;
+  user-select: text;
+  white-space: nowrap;
+}
+
+@utility cc-tree-item {
+  position: relative;
+  padding-left: 1.5rem;
+  padding-right: 0.75rem;
+
+  cursor: pointer;
+
+  will-change: max-height, opacity, padding, border;
+  transition-property: max-height, opacity, padding, border, color, background-color;
+  transition-timing-function: var(--ease-bezier);
+  transition-duration: var(--duration-dropdown);
+}
+
+@utility cc-badge-constituenta {
+  width: 3rem;
+  padding-inline: 0.25rem;
+
+  border-width: 1px;
+  border-radius: 0.5rem;
+
+  text-align: center;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+@utility cc-table-header {
+  text-align: start;
+  padding: 0.5rem;
+
+  font-size: var(--text-xs);
+  line-height: var(--tw-leading, var(--text-xs--line-height));
+  font-weight: 500;
+  white-space: nowrap;
+
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+@utility cc-modal-wrapper {
+  isolation: isolate;
+  z-index: var(--z-index-modal);
+  position: fixed;
+  inset: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@utility cc-node-label {
+  font-weight: 600;
+  -webkit-text-stroke-width: 0.6px;
+  -webkit-text-stroke-color: var(--clr-prim-100);
+}
+
+@utility cc-text-outline {
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: var(--clr-prim-100);
+}
+
+@utility cc-dropdown {
+  position: absolute;
+  z-index: var(--z-index-topmost);
+
+  transition-property: clip-path, transform;
+  transition-duration: var(--duration-dropdown);
+  transition-timing-function: var(--ease-in-out);
+
+  transform: translateY(-10%);
+  clip-path: inset(10% 0% 90% 0%);
+
+  &.open {
+    transform: translateY(0);
+    clip-path: inset(0% 0% 0% 0%);
+  }
+}
+
+@utility cc-view-hidden-header {
+  transition-property: transform;
+  transition-duration: var(--duration-dropdown);
+  transition-timing-function: var(--ease-out);
+
+  transform: translateX(0.75rem);
+
+  &.open {
+    transform: translateX(calc(6.5rem - 50%));
+  }
+}
+
+@utility cc-view-hidden-list {
+  transition-property: clip-path;
+  transition-duration: var(--duration-dropdown);
+  transition-timing-function: var(--ease-out);
+
+  clip-path: inset(10% 0% 90% 0%);
+  pointer-events: none;
+
+  &.open {
+    clip-path: inset(0% 0% 0% 0%);
+    pointer-events: auto;
+  }
+}
+
+@utility cc-view-hidden-item {
+  outline-width: 0px;
+  outline-color: transparent;
+
+  &.selected {
+    outline-width: 2px;
+    outline-color: var(--clr-prim-999);
+    outline-style: solid;
+  }
+  &.inherited {
+    outline-style: dashed;
+  }
+}
+
+@utility cc-rs-edit-controls {
+  transition-property: max-height;
+  transition-duration: var(--duration-move);
+  transition-timing-function: var(--ease-in-out);
+
+  clip-path: inset(0% 0% 100% 0%);
+  max-height: 0;
+  margin-top: 0;
+
+  &.open {
+    clip-path: inset(0% 0% 0% 0%);
+    max-height: 4.5rem;
+    margin-top: 0.25rem;
+  }
+}
+
+@utility cc-parsing-result {
+  transition-property: clip-path, padding, margin, border, height;
+  transition-duration: var(--duration-move);
+  transition-timing-function: var(--ease-in-out);
+
+  clip-path: inset(0% 0% 100% 0%);
+  height: 0;
+  margin-top: 0;
+  padding: 0;
+  border-width: 0;
+
+  &.open {
+    clip-path: inset(0% 0% 0% 0%);
+    height: 4.5rem;
+    margin-top: 0.75rem;
+    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+  }
+}
+
+@utility cc-topic-dropdown {
+  will-change: clip-path;
+  transition-property: clip-path;
+  transition-duration: var(--duration-move);
+  transition-timing-function: var(--ease-in-out);
+
+  clip-path: inset(0% 100% 0% 0%);
+
+  &.open {
+    clip-path: inset(0% 0% 0% 0%);
+  }
+}

rsconcept/frontend/src/styling/utilities.css

@@ -1,3 +1,7 @@
+/**
+ * Module: Utility classes for stlye features.
+ */
+
 @utility font-main {
   font-family: var(--font-main);
 }
@@ -143,24 +147,6 @@
   color: var(--clr-sec-800);
 }
 
-@utility cc-tab-tools {
-  z-index: var(--z-index-pop);
-  position: absolute;
-  top: 1.7rem;
-  right: 50%;
-  padding-top: 0.4rem;
-  transform: translate(50%, 0%);
-}
-
-@utility cc-label {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  cursor: default;
-  user-select: text;
-  white-space: nowrap;
-}
-
 @utility cc-column {
   display: flex;
   flex-direction: column;
@@ -183,10 +169,6 @@
   scroll-snap-type: y mandatory;
 }
 
-@utility cc-blur {
-  backdrop-filter: blur(3px);
-}
-
 @utility cc-shadow-border {
   box-shadow: 0 1px 2px 0 var(--clr-prim-400);
 }
@@ -229,55 +211,6 @@
   transition-duration: var(--duration-select);
 }
 
-@utility cc-tree-item {
-  position: relative;
-  padding-left: 1.5rem;
-  padding-right: 0.75rem;
-
-  cursor: pointer;
-
-  will-change: max-height, opacity, padding, border;
-  transition-property: max-height, opacity, padding, border, color, background-color;
-  transition-timing-function: var(--ease-bezier);
-  transition-duration: var(--duration-dropdown);
-}
-
-@utility cc-badge-constituenta {
-  width: 3rem;
-  padding-inline: 0.25rem;
-
-  border-width: 1px;
-  border-radius: 0.5rem;
-
-  text-align: center;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-@utility cc-table-header {
-  text-align: start;
-  padding: 0.5rem;
-
-  font-size: var(--text-xs);
-  line-height: var(--tw-leading, var(--text-xs--line-height));
-  font-weight: 500;
-  white-space: nowrap;
-
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-@utility cc-modal-wrapper {
-  isolation: isolate;
-  z-index: var(--z-index-modal);
-  position: fixed;
-  inset: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 @utility cc-mask-sides {
   --mask-border-size: 2rem;
 

rsconcept/frontend/src/utils/constants.ts

@@ -7,27 +7,21 @@
  */
 export const PARAMETER = {
   smallScreen: 640, // == tailwind:sm
-  smallTreeNodes: 50, // amount of nodes threshold for size increase for large graphs
+
+  minimalTimeout: 10, // milliseconds delay for fast updates
   refreshTimeout: 100, // milliseconds delay for post-refresh actions
   notificationDelay: 300, // milliseconds delay for notifications
-  minimalTimeout: 10, // milliseconds delay for fast updates
   zoomDuration: 500, // milliseconds animation duration
-  moveDuration: 500, // milliseconds - duration of move animation
-  dropdownDuration: 200, // milliseconds - duration of dropdown animation
-  navigationDuration: 300, // milliseconds navigation duration
   navigationPopupDelay: 300, // milliseconds delay for navigation popup
-  graphPopupDelay: 500, // milliseconds delay for graph popup selections
-  graphRefreshDelay: 10, // milliseconds delay for graph viewpoint reset
 
-  fastAnimation: 200, // milliseconds - duration of fast animation
+  moveDuration: 500, // milliseconds - duration of move animation
-  fadeDuration: 300, // milliseconds - duration of fade animation
 
   ossImageWidth: 1280, // pixels - size of OSS image
   ossImageHeight: 960, // pixels - size of OSS image
 
   graphHandleSize: 3, // pixels - size of graph connection handle
-  graphNodeRadius: 20, // pixels - radius of graph node
   graphNodePadding: 5, // pixels - padding of graph node
+  graphNodeRadius: 20, // pixels - radius of graph node
 
   logicLabel: 'LOGIC',
   errorNodeLabel: '[ERROR]',