M: Simplify color tooltips

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

@@ -12,26 +12,30 @@ export function HelpFormulaTree() {
       </ul>
 
       <h2>Виды узлов</h2>
-      <ul>
-        <li>
-          <span className='bg-(--acc-bg-green)'>объявление идентификатора</span>
-        </li>
-        <li>
-          <span className='bg-(--acc-bg-teal)'>глобальный идентификатор</span>
-        </li>
-        <li>
-          <span className='bg-(--acc-bg-orange)'>логическое выражение</span>
-        </li>
-        <li>
-          <span className='bg-(--acc-bg-blue)'>типизированное выражение</span>
-        </li>
-        <li>
-          <span className='bg-(--acc-bg-red)'>присвоение и итерация</span>
-        </li>
-        <li>
-          <span className='bg-secondary'>составные выражения</span>
-        </li>
-      </ul>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-(--acc-bg-green)' />
+        объявление идентификатора
+      </p>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-(--acc-bg-teal)' />
+        глобальный идентификатор
+      </p>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-(--acc-bg-orange)' />
+        логическое выражение
+      </p>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-(--acc-bg-blue)' />
+        типизированное выражение
+      </p>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-(--acc-bg-red)' />
+        присвоение и итерация
+      </p>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-secondary' />
+        составные выражения
+      </p>
 
       <h2>Команды</h2>
       <ul>

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

@@ -72,17 +72,16 @@ export function HelpRSEditor() {
               <IconChild className='inline-icon' /> отображение наследованных
             </li>
             <li>
-              <span className='bg-selected'>текущая конституента</span>
+              <span className='cc-sample-color bg-selected' />
+              выбранная конституента
             </li>
             <li>
-              <span className='bg-accent-green50'>
-                <LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> текущей
-              </span>
+              <span className='cc-sample-color bg-accent-green50' />
+              <LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> выбранной
             </li>
             <li>
-              <span className='bg-accent-orange50'>
-                <LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> текущей
-              </span>
+              <span className='cc-sample-color bg-accent-orange50' />
+              <LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> выбранной
             </li>
           </ul>
         </div>

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

@@ -23,17 +23,18 @@ export function HelpTypeGraph() {
 
       <h2>Цвета узлов</h2>
 
-      <ul>
-        <li>
-          <span className='bg-secondary'>ступень-основание</span>
-        </li>
-        <li>
-          <span className='bg-accent-teal'>ступень-булеан</span>
-        </li>
-        <li>
-          <span className='bg-accent-orange'>ступень декартова произведения</span>
-        </li>
-      </ul>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-secondary' />
+        ступень-основание
+      </p>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-accent-teal' />
+        ступень-булеан
+      </p>
+      <p className='m-0'>
+        <span className='cc-sample-color bg-accent-orange' />
+        ступень декартова произведения
+      </p>
 
       <h2>Команды</h2>
       <ul>

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/schemas-guide.tsx

@@ -44,12 +44,12 @@ export function SchemasGuide() {
         className='grid max-w-100 break-words text-base'
       >
         <div className='inline-flex items-center gap-2'>
-          <span className='w-2.5 h-2.5 border rounded-full' style={{ backgroundColor: colorBgSchemas(0) }} />
+          <span className='w-3 h-3 border rounded-full' style={{ backgroundColor: colorBgSchemas(0) }} />
           <span>Текущая схема</span>
         </div>
         {schemas.map((alias, index) => (
           <div key={`${prefixes.schemas_list}${index}`} className='inline-flex items-center gap-2'>
-            <span className='w-2.5 h-2.5 border rounded-full' style={{ backgroundColor: colorBgSchemas(index + 1) }} />
+            <span className='w-3 h-3 border rounded-full' style={{ backgroundColor: colorBgSchemas(index + 1) }} />
             <span>{alias}</span>
           </div>
         ))}

rsconcept/frontend/src/styling/components.css

@@ -72,6 +72,18 @@
   transition-duration: var(--duration-dropdown);
 }
 
+@utility cc-sample-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-right: 0.25rem;
+  transform: translateY(0.125rem);
+
+  border-width: 1px;
+  border-style: solid;
+  border-radius: calc(infinity * 1px);
+}
+
 @utility cc-badge-constituenta {
   width: 3rem;
   padding-inline: 0.25rem;