F: UI semantic styling improvements

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

@@ -28,6 +28,7 @@ export function ApplicationLayout() {
       <div className='min-w-80 antialiased h-full max-w-480 mx-auto'>
         <ToasterThemed
           className={clsx('sm:text-[14px]/[20px] text-[12px]/[16px]', noNavigationAnimation ? 'mt-6' : 'mt-14')}
+          aria-label='Оповещения'
           autoClose={3000}
           draggable={false}
           pauseOnFocusLoss={false}

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

@@ -11,7 +11,7 @@ export const GlobalTooltips = () => {
         id={globalIDs.tooltip}
         layer='z-topmost'
         place='right-start'
-        className='mt-8 max-w-80 break-words'
+        className='mt-8 max-w-80 break-words rounded-lg!'
       />
       <Tooltip
         float

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

@@ -19,13 +19,13 @@ export function HelpTypeGraph() {
 
       <h2>Виды узлов</h2>
       <li>
-        <span className='bg-prim-200'>ступень-основание</span>
+        <span className='bg-secondary'>ступень-основание</span>
       </li>
       <li>
-        <span className='bg-(--acc-bg-teal)'>ступень-булеан</span>
+        <span className='bg-accent-teal'>ступень-булеан</span>
       </li>
       <li>
-        <span className='bg-(--acc-bg-orange)'>ступень декартова произведения</span>
+        <span className='bg-accent-orange'>ступень декартова произведения</span>
       </li>
     </div>
   );

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

@@ -57,7 +57,7 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro
         getLabel={labelHelpTopic}
         getDescription={describeHelpTopic}
         className={clsx(
-          'cc-topic-dropdown border-r border-t rounded-none cc-scroll-y bg-prim-200',
+          'cc-topic-dropdown border-r border-t rounded-none cc-scroll-y bg-secondary',
           menu.isOpen && 'open'
         )}
         style={{ maxHeight: treeHeight }}

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

@@ -29,7 +29,7 @@ export function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps)
         'cc-scroll-y',
         'self-start',
         'border-x border-t rounded-none',
-        'text-xs sm:text-sm bg-prim-200',
+        'text-xs sm:text-sm bg-secondary',
         'select-none'
       )}
       style={{ maxHeight: topicsHeight }}

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

@@ -104,7 +104,7 @@ export function DlgCreateOperation() {
         selectedIndex={activeTab}
         onSelect={(index, last) => handleSelectTab(index as TabID, last as TabID)}
       >
-        <TabList className='z-pop mx-auto -mb-5 flex border divide-x rounded-none bg-prim-200'>
+        <TabList className='z-pop mx-auto -mb-5 flex border divide-x rounded-none bg-secondary'>
           <TabLabel
             title={describeOperationType(OperationType.INPUT)}
             label={labelOperationType(OperationType.INPUT)}

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

@@ -76,7 +76,7 @@ export function DlgEditOperation() {
         selectedIndex={activeTab}
         onSelect={index => setActiveTab(index as TabID)}
       >
-        <TabList className='mb-3 mx-auto w-fit flex border divide-x rounded-none bg-prim-200'>
+        <TabList className='mb-3 mx-auto w-fit flex border divide-x rounded-none bg-secondary'>
           <TabLabel title='Текстовые поля' label='Карточка' className='w-32' />
           {target.operation_type === OperationType.SYNTHESIS ? (
             <TabLabel title='Выбор аргументов операции' label='Аргументы' className='w-32' />

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css

@@ -0,0 +1,26 @@
+@import '../../../../../../styling/reactflow.css';
+
+/* stylelint-disable selector-class-pattern */
+
+.react-flow__node-input,
+.react-flow__node-synthesis {
+  cursor: pointer;
+
+  border-radius: 5px;
+  padding: 2px;
+  height: fit-content;
+
+  outline-offset: -2px;
+  outline-style: solid;
+  outline-color: transparent;
+
+  transition-property: outline-offset;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+
+  &.selected {
+    outline-offset: 4px;
+    outline-color: var(--color-graph-selected);
+    border-color: var(--color-foreground);
+  }
+}

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

@@ -28,6 +28,8 @@ import { type ContextMenuData, NodeContextMenu } from './node-context-menu';
 import { ToolbarOssGraph } from './toolbar-oss-graph';
 import { useGetLayout } from './use-get-layout';
 
+import './graph/styles.css';
+
 const ZOOM_MAX = 2;
 const ZOOM_MIN = 0.5;
 export const VIEW_PADDING = 0.2;

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

@@ -61,7 +61,7 @@ export function OssTabs({ activeTab }: OssTabsProps) {
       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'>
+      <TabList className='absolute z-sticky flex border-b-2 border-x-2 divide-x-2 bg-secondary'>
         <MenuOssTabs />
 
         <TabLabel label='Карточка' title={schema.title ?? ''} />

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

@@ -76,7 +76,7 @@ export function DlgCstTemplate() {
         selectedIndex={activeTab}
         onSelect={index => setActiveTab(index as TabID)}
       >
-        <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
+        <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-secondary'>
           <TabLabel label='Шаблон' title='Выбор шаблона выражения' className='w-32' />
           <TabLabel label='Аргументы' title='Подстановка аргументов шаблона' className='w-32' />
           <TabLabel label='Конституента' title='Редактирование конституенты' className='w-32' />

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

@@ -107,7 +107,7 @@ export function DlgEditReference() {
       helpTopic={HelpTopic.TERM_CONTROL}
     >
       <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'>
+        <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-secondary'>
           <TabLabel title='Отсылка на термин в заданной словоформе' label={labelReferenceType(ReferenceType.ENTITY)} />
           <TabLabel
             title='Установление синтаксической связи с отсылкой на термин'

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

@@ -64,7 +64,7 @@ export function DlgInlineSynthesis() {
         selectedIndex={activeTab}
         onSelect={index => setActiveTab(index as TabID)}
       >
-        <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-prim-200'>
+        <TabList className='mb-3 mx-auto flex border divide-x rounded-none bg-secondary'>
           <TabLabel
             label='Схема' //
             title='Источник конституент'

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

@@ -9,6 +9,8 @@ import { ASTEdgeTypes } from './graph/ast-edge-types';
 import { applyLayout } from './graph/ast-layout';
 import { ASTNodeTypes } from './graph/ast-node-types';
 
+import './graph/styles.css';
+
 interface ASTFlowProps {
   data: SyntaxTree;
   onNodeEnter: (node: Node) => void;

rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css

@@ -0,0 +1,25 @@
+@import '../../../../../styling/reactflow.css';
+
+/* stylelint-disable selector-class-pattern */
+
+.react-flow__node-token {
+  cursor: default;
+
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+
+  outline-offset: -2px;
+  outline-style: solid;
+  outline-color: transparent;
+
+  transition-property: outline-offset;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+
+  &.selected {
+    outline-offset: 4px;
+    outline-color: var(--color-graph-selected);
+    border-color: transparent;
+  }
+}

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

@@ -30,6 +30,7 @@ export function MGraphNode(node: MGraphNodeInternal) {
         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}
+        data-tooltip-hidden={node.dragging}
         style={{ backgroundColor: colorBgTMGraphNode(node.data) }}
       >
         {node.data.rank === 0 ? node.data.text : node.data.annotations.length > 0 ? node.data.annotations.length : ''}

rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css

@@ -0,0 +1,25 @@
+@import '../../../../../styling/reactflow.css';
+
+/* stylelint-disable selector-class-pattern */
+
+.react-flow__node-step {
+  cursor: default;
+
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+
+  outline-offset: -2px;
+  outline-style: solid;
+  outline-color: transparent;
+
+  transition-property: outline-offset;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+
+  &.selected {
+    outline-offset: 4px;
+    outline-color: var(--color-graph-selected);
+    border-color: transparent;
+  }
+}

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

@@ -9,6 +9,8 @@ import { TMGraphEdgeTypes } from './graph/mgraph-edge-types';
 import { applyLayout } from './graph/mgraph-layout';
 import { TMGraphNodeTypes } from './graph/mgraph-node-types';
 
+import './graph/styles.css';
+
 const ZOOM_MAX = 2;
 const ZOOM_MIN = 0.5;
 

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css

@@ -0,0 +1,25 @@
+@import '../../../../../../styling/reactflow.css';
+
+/* stylelint-disable selector-class-pattern */
+
+.react-flow__node-concept {
+  cursor: default;
+
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+
+  outline-offset: -2px;
+  outline-style: solid;
+  outline-color: transparent;
+
+  transition-property: outline-offset;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+
+  &.selected {
+    outline-offset: 4px;
+    outline-color: var(--color-graph-selected);
+    border-color: transparent;
+  }
+}

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

@@ -32,6 +32,8 @@ import { ToolbarTermGraph } from './toolbar-term-graph';
 import { useFilteredGraph } from './use-filtered-graph';
 import { ViewHidden } from './view-hidden';
 
+import './graph/styles.css';
+
 const ZOOM_MAX = 3;
 const ZOOM_MIN = 0.25;
 export const VIEW_PADDING = 0.3;

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

@@ -79,7 +79,7 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
       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'>
+      <TabList className='absolute z-sticky flex border-b-2 border-x-2 divide-x-2 bg-secondary'>
         <MenuRSTabs />
 
         <TabLabel

rsconcept/frontend/src/index.css

@@ -45,6 +45,8 @@
   --color-sec-400: var(--clr-sec-400);
   --color-sec-600: var(--clr-sec-600);
 
+  --color-graph-selected: var(--clr-select-node);
+
   --color-accent-red: var(--acc-bg-red);
   --color-accent-green: var(--acc-bg-green);
   --color-accent-green25: var(--acc-bg-green25);

rsconcept/frontend/src/styling/components.css

@@ -45,7 +45,7 @@
   background-color: transparent;
 
   :focus-within > & {
-    color: var(--color-ring);
+    color: var(--color-primary);
   }
 }
 
@@ -193,7 +193,7 @@
   outline-color: transparent;
 
   &.selected {
-    outline: 2px solid var(--clr-prim-999);
+    outline: 2px solid var(--color-foreground);
   }
 
   &.inherited {

rsconcept/frontend/src/styling/constants.css

@@ -56,10 +56,6 @@
   --acc-fg-purple:    oklch(060% 0.250 295deg);
   --acc-fg-teal:      oklch(060% 0.140 210deg);
   --acc-fg-orange:    oklch(060% 0.150 62deg);
-
-  /* React Tooltip */
-  --rt-color-white:   var(--clr-prim-0);
-  --rt-color-dark:    var(--clr-prim-999);
 }
 
 /* Dark Theme */
@@ -101,8 +97,4 @@
   --acc-fg-purple:    oklch(075% 0.150 295deg);
   --acc-fg-teal:      oklch(075% 0.150 210deg);
   --acc-fg-orange:    oklch(075% 0.150 62deg);
-
-  /* React Tooltip */
-  --rt-color-white:   var(--clr-prim-999);
-  --rt-color-dark:    var(--clr-prim-0);
 }

rsconcept/frontend/src/styling/imports.css

@@ -1,5 +0,0 @@
-/**
- * Module: List external styling imports.
- */
-
-@import 'reactflow/dist/style.css';

rsconcept/frontend/src/styling/overrides.css

@@ -2,25 +2,43 @@
 * Module: Override imported components CSS styling.
 */
 @import './constants.css';
-@import './imports.css';
 
 /* stylelint-disable selector-class-pattern */
 
 :root {
-  /* Import overrides */
+  /* Toastify */
-  --toastify-color-dark: var(--clr-prim-200);
+  --toastify-color-dark: var(--color-secondary);
 
   --toastify-toast-width: 20rem;
   --toastify-toast-padding: 0.75rem;
 
-  --toastify-toast-min-height: 4rem;
+  --toastify-toast-min-height: 0;
   --toastify-toast-max-height: 40rem;
 }
 
+/* Light Theme */
+/* prettier-ignore */
+:not(.dark):root {
+  /* React Tooltip */
+  --rt-color-white:   var(--color-input);
+  --rt-color-dark:    var(--color-foreground);
+
+}
+
+/* Dark Theme */
+/* prettier-ignore */
+.dark:root {
+  /* React Tooltip */
+  --rt-color-white:   var(--color-foreground);
+  --rt-color-dark:    var(--color-input);
+}
+
+/* ----- Code Mirror ------ */
+
 .cm-tooltip {
   z-index: 100;
 
-  border-color: var(--clr-prim-400);
+  border-color: var(--color-border);
   border-width: 1px;
   border-radius: 0.25rem;
 }
@@ -39,7 +57,7 @@
   overflow-y: auto;
   overscroll-behavior-y: contain;
 
-  border-color: var(--clr-prim-400);
+  border-color: var(--color-border);
   border-width: 1px;
   border-radius: 0.25rem;
 
@@ -47,103 +65,12 @@
 }
 
 .cm-editor.cm-focused {
-  border-color: var(--clr-sec-600);
+  border-color: var(--color-primary);
-  outline: 2px solid var(--clr-sec-600);
+  outline: 2px solid var(--color-primary);
 }
 
 .cm-editor .cm-placeholder {
   font-family: var(--font-main);
-  color: var(--clr-prim-600);
+  color: var(--color-muted-foreground);
   user-select: none;
 }
-
-.react-flow__handle {
-  cursor: default !important;
-  border-radius: 9999px;
-
-  border-color: var(--clr-prim-400);
-  background-color: var(--clr-prim-0);
-
-  .selected & {
-    border-color: var(--clr-prim-600);
-  }
-}
-
-.react-flow__pane {
-  cursor: default;
-}
-
-.react-flow__edge {
-  cursor: default;
-}
-
-.react-flow__attribution {
-  font-size: var(--font-size-sm);
-  font-family: var(--font-ui);
-  font-weight: 400;
-  margin: 1rem;
-
-  background-color: transparent;
-  color: var(--clr-prim-600);
-}
-
-[class*='react-flow__node-'] {
-  font-size: 14px;
-  border: 1px solid;
-
-  color: var(--clr-prim-999);
-  border-color: var(--clr-prim-400);
-  background-color: var(--clr-prim-0);
-
-  &:hover:not(.selected) {
-    box-shadow: 0 0 0 2px var(--clr-sec-200) !important;
-  }
-}
-
-.react-flow__node-input,
-.react-flow__node-synthesis {
-  cursor: pointer;
-
-  border-radius: 5px;
-  padding: 2px;
-  width: 150px;
-  height: fit-content;
-
-  outline-offset: -2px;
-  outline-style: solid;
-  outline-color: transparent;
-
-  transition-property: outline-offset;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-select);
-
-  &.selected {
-    outline-offset: 4px;
-    outline-color: var(--clr-select-node);
-    border-color: var(--clr-prim-999);
-  }
-}
-
-.react-flow__node-step,
-.react-flow__node-token,
-.react-flow__node-concept {
-  cursor: default;
-
-  border-radius: 100%;
-  width: 40px;
-  height: 40px;
-
-  outline-offset: -2px;
-  outline-style: solid;
-  outline-color: transparent;
-
-  transition-property: outline-offset;
-  transition-timing-function: var(--transition-bezier);
-  transition-duration: var(--duration-select);
-
-  &.selected {
-    outline-offset: 4px;
-    outline-color: var(--clr-select-node);
-    border-color: transparent;
-  }
-}

rsconcept/frontend/src/styling/reactflow.css

@@ -0,0 +1,73 @@
+/**
+* Module: react-flow base style overrides.
+*/
+@import 'reactflow/dist/style.css';
+
+/* stylelint-disable selector-class-pattern */
+
+.react-flow__handle {
+  cursor: default !important;
+  border-radius: 9999px;
+
+  border-color: var(--color-border);
+  background-color: var(--color-card);
+
+  .selected & {
+    border-color: var(--color-muted-foreground);
+  }
+}
+
+.react-flow__pane {
+  cursor: default;
+}
+
+.react-flow__edge {
+  cursor: default;
+}
+
+.react-flow__attribution {
+  font-size: var(--font-size-sm);
+  font-family: var(--font-ui);
+  font-weight: 400;
+  margin: 1rem;
+
+  background-color: transparent;
+  color: var(--color-muted-foreground);
+}
+
+[class*='react-flow__node-'] {
+  font-size: 14px;
+  border: 1px solid;
+
+  color: var(--color-foreground);
+  border-color: var(--color-border);
+  background-color: var(--color-card);
+
+  &:hover:not(.selected) {
+    box-shadow: 0 0 0 2px var(--color-selected) !important;
+  }
+}
+
+.react-flow__node-token,
+.react-flow__node-concept {
+  /* stylelint-disable-next-line at-rule-no-deprecated */
+  cursor: default;
+
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+
+  outline-offset: -2px;
+  outline-style: solid;
+  outline-color: transparent;
+
+  transition-property: outline-offset;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+
+  &.selected {
+    outline-offset: 4px;
+    outline-color: var(--color-graph-selected);
+    border-color: transparent;
+  }
+}

rsconcept/frontend/src/styling/setup.css

@@ -18,8 +18,8 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--clr-prim-400);
+    border-color: var(--color-border);
-    accent-color: var(--clr-sec-600);
+    accent-color: var(--color-primary);
   }
 
   html {
@@ -60,9 +60,9 @@
     line-height: var(--line-height);
     font-family: var(--font-main);
 
-    color: var(--clr-prim-999);
+    color: var(--color-foreground);
-    border-color: var(--clr-prim-400);
+    border-color: var(--color-border);
-    background-color: var(--clr-prim-100);
+    background-color: var(--color-background);
   }
 
   @media only screen and (width <= 639px) {
@@ -78,7 +78,7 @@
   }
 
   ::placeholder {
-    color: var(--clr-prim-600);
+    color: var(--color-muted-foreground);
     user-select: none;
   }