F: More color simplifications

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-inert-foreground bg-background'
+        'text-xs sm:text-sm select-none whitespace-nowrap text-muted-foreground bg-background'
       )}
     >
       <nav className='flex gap-3' aria-label='Вторичная навигация'>

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

@@ -97,7 +97,7 @@ export function ComboBox<Option>({
             <IconRemove
               tabIndex={-1}
               size='1rem'
-              className='absolute pointer-events-auto right-3 text-muted-foreground hover:text-destructive'
+              className='cc-remove absolute pointer-events-auto right-3'
               onClick={handleClear}
             />
           ) : null}

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
 import { ChevronDownIcon } from 'lucide-react';
 
 import { IconRemove } from '../icons';
@@ -93,18 +92,15 @@ export function ComboMulti<Option>({
           )}
           style={style}
         >
-          <div className='flex flex-wrap items-center'>
+          <div className='flex flex-wrap gap-1 items-center'>
             {value.length === 0 ? <div className='text-muted-foreground'>{placeholder}</div> : null}
             {value.map(item => (
-              <div
+              <div key={idFunc(item)} className='flex px-1 items-center border rounded-lg bg-accent text-sm'>
-                key={idFunc(item)}
-                className={clsx('m-1', 'flex px-1 items-center', 'border rounded-lg', 'bg-accent', 'text-sm')}
-              >
                 {labelValueFunc(item)}
                 <IconRemove
                   tabIndex={-1}
                   size='1rem'
-                  className='text-muted-foreground hover:text-destructive'
+                  className='cc-remove'
                   onClick={event => {
                     event.stopPropagation();
                     handleRemoveValue(item);
@@ -119,7 +115,7 @@ export function ComboMulti<Option>({
             <IconRemove
               tabIndex={-1}
               size='1rem'
-              className='absolute pointer-events-auto right-3 text-muted-foreground hover:text-destructive'
+              className='cc-remove absolute pointer-events-auto right-3'
               onClick={handleClear}
             />
           ) : null}

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

@@ -25,7 +25,7 @@ export function HelpFormulaTree() {
         <span className='bg-(--acc-bg-red)'>присвоение и итерация</span>
       </li>
       <li>
-        <span className='bg-prim-300'>составные выражения</span>
+        <span className='bg-secondary'>составные выражения</span>
       </li>
     </div>
   );

rsconcept/frontend/src/features/library/dialogs/dlg-edit-editors/dlg-edit-editors.tsx

@@ -50,7 +50,7 @@ export function DlgEditEditors() {
           title='Очистить список'
           noHover
           className='py-0 align-middle'
-          icon={<IconRemove size='1.5rem' className='icon-red' />}
+          icon={<IconRemove size='1.5rem' className='cc-remove' />}
           onClick={() => setSelected([])}
           disabled={selected.length === 0}
         />

rsconcept/frontend/src/features/library/dialogs/dlg-edit-versions/table-versions.tsx

@@ -66,7 +66,7 @@ export function TableVersions({ processing, items, onDelete, selected, onSelect
           className='align-middle'
           noHover
           noPadding
-          icon={<IconRemove size='1.25rem' className='icon-red' />}
+          icon={<IconRemove size='1.25rem' className='cc-remove' />}
           onClick={event => handleDeleteVersion(event, props.row.original.id)}
           disabled={processing}
         />

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

@@ -79,7 +79,7 @@ export function PickMultiOperation({ rows, items, value, onChange, className, ..
       id: 'actions',
       size: 0,
       cell: props => (
-        <div className='flex gap-1 w-fit'>
+        <div className='flex w-fit'>
           <MiniButton
             title='Удалить'
             noHover

rsconcept/frontend/src/features/rsform/colors.ts

@@ -2,7 +2,6 @@ import { APP_COLORS } from '@/styling/colors';
 import { PARAMETER } from '@/utils/constants';
 
 import { TokenID } from './backend/types';
-import { Grammeme, NounGrams, PartOfSpeech, VerbGrams } from './models/language';
 import { CstClass, ExpressionStatus, type IConstituenta } from './models/rsform';
 import { type ISyntaxTreeNode } from './models/rslang';
 import { type TypificationGraphNode } from './models/typification-graph';
@@ -87,7 +86,7 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode): string {
     case TokenID.NT_FUNC_CALL:
     case TokenID.NT_ARGUMENTS:
     case TokenID.NT_RECURSIVE_SHORT:
-      return APP_COLORS.bgDisabled;
+      return APP_COLORS.bgControls;
 
     case TokenID.ASSIGN:
     case TokenID.ITERATE:
@@ -219,24 +218,6 @@ export function colorBgSchemas(schema_index: number): string {
   return APP_COLORS.bgBlue;
 }
 
-/** Determines foreground color for {@link Grammeme}. */
-export function colorFgGrammeme(gram: Grammeme): string {
-  if (PartOfSpeech.includes(gram)) {
-    return APP_COLORS.fgBlue;
-  }
-  if (NounGrams.includes(gram)) {
-    return APP_COLORS.fgGreen;
-  }
-  if (VerbGrams.includes(gram)) {
-    return APP_COLORS.fgTeal;
-  }
-  if (!Object.values(Grammeme).includes(gram)) {
-    return APP_COLORS.fgRed;
-  } else {
-    return APP_COLORS.fgPurple;
-  }
-}
-
 /** Determines graph color for {@link IConstituenta}. */
 export function colorBgGraphNode(cst: IConstituenta, coloringScheme: GraphColoring): string {
   if (coloringScheme === 'type') {

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

@@ -1,4 +1,3 @@
-import { colorFgGrammeme } from '../colors';
 import { labelGrammeme } from '../labels';
 import { type Grammeme } from '../models/language';
 
@@ -12,13 +11,7 @@ interface BadgeGrammemeProps {
  */
 export function BadgeGrammeme({ grammeme }: BadgeGrammemeProps) {
   return (
-    <div
+    <div className='min-w-12 px-1 border text-center whitespace-nowrap rounded-lg bg-card text-sm'>
-      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)
-      }}
-    >
       {labelGrammeme(grammeme)}
     </div>
   );

rsconcept/frontend/src/features/rsform/components/refs-input/tooltip.ts

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import { APP_COLORS } from '@/styling/colors';
 import { findContainedNodes } from '@/utils/codemirror';
 
-import { colorFgGrammeme } from '../../colors';
 import { describeConstituentaTerm, labelGrammeme } from '../../labels';
 import { type IEntityReference, type ISyntacticReference } from '../../models/language';
 import { parseGrammemes } from '../../models/language-api';
@@ -87,11 +86,8 @@ function domTooltipEntityReference(ref: IEntityReference, cst: IConstituenta | n
   parseGrammemes(ref.form).forEach(gramStr => {
     const gram = document.createElement('div');
     gram.id = `tooltip-${gramStr}`;
-    gram.className = 'min-w-12 px-1 border rounded-md text-sm text-center whitespace-nowrap';
+    gram.className = 'min-w-12 px-1 border rounded-lg text-sm text-center whitespace-nowrap';
     gram.style.borderWidth = '1px';
-    gram.style.borderColor = colorFgGrammeme(gramStr);
-    gram.style.color = colorFgGrammeme(gramStr);
-    gram.style.fontWeight = '600';
     gram.style.backgroundColor = APP_COLORS.bgInput;
     gram.innerText = labelGrammeme(gramStr);
     grams.appendChild(gram);

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

@@ -90,7 +90,7 @@ export function TabArguments() {
             noPadding
             noHover
             className='align-middle'
-            icon={<IconRemove size='1.25rem' className='icon-red' />}
+            icon={<IconRemove size='1.25rem' className='cc-remove' />}
             onClick={() => handleClearArgument(props.row.original)}
           />
         ) : null

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

@@ -188,7 +188,7 @@ export function DlgEditWordForms() {
             title='Сбросить все словоформы'
             noHover
             className='py-0 align-middle'
-            icon={<IconRemove size='1.5rem' className='icon-red' />}
+            icon={<IconRemove size='1.5rem' className='cc-remove' />}
             onClick={handleResetAll}
             disabled={isProcessing || forms.length === 0}
           />

rsconcept/frontend/src/features/rsform/dialogs/dlg-edit-word-forms/table-word-forms.tsx

@@ -51,7 +51,7 @@ export function TableWordForms({ forms, setForms, onFormSelect }: TableWordForms
           noHover
           noPadding
           className='align-middle'
-          icon={<IconRemove size='1.25rem' className='icon-red' />}
+          icon={<IconRemove size='1.25rem' className='cc-remove' />}
           onClick={() => handleDeleteRow(props.row.index)}
         />
       )

rsconcept/frontend/src/features/users/components/table-users.tsx

@@ -34,7 +34,7 @@ export function TableUsers({ items, onDelete }: TableUsersProps) {
           className='align-middle'
           noHover
           noPadding
-          icon={<IconRemove size='1.25rem' className='icon-red' />}
+          icon={<IconRemove size='1.25rem' className='cc-remove' />}
           onClick={() => onDelete(props.row.original.id)}
         />
       )

rsconcept/frontend/src/index.css

@@ -35,21 +35,16 @@
   --color-prim-0: var(--clr-prim-0);
   --color-prim-100: var(--clr-prim-100);
   --color-prim-200: var(--clr-prim-200);
-  --color-prim-300: var(--clr-prim-300);
   --color-prim-400: var(--clr-prim-400);
   --color-prim-600: var(--clr-prim-600);
-  --color-prim-800: var(--clr-prim-800);
   --color-prim-999: var(--clr-prim-999);
 
   --color-sec-0: var(--clr-sec-0);
   --color-sec-100: var(--clr-sec-100);
   --color-sec-200: var(--clr-sec-200);
-  --color-sec-300: var(--clr-sec-300);
   --color-sec-400: var(--clr-sec-400);
   --color-sec-600: var(--clr-sec-600);
 
-  --color-warn-100: var(--clr-warn-100);
-
   /* stylelint-disable-next-line custom-property-pattern */
   --z-index-*: initial;
   --z-index-bottom: 0;
@@ -93,11 +88,11 @@
 
   --color-primary: var(--clr-sec-600);
   --color-primary-foreground: var(--clr-sec-0);
+  --color-primary-border: var(--clr-sec-400);
   --color-secondary: var(--clr-prim-200);
   --color-secondary-foreground: var(--color-foreground);
   --color-muted: var(--clr-prim-100);
-  --color-muted-foreground: var(--clr-prim-800);
+  --color-muted-foreground: var(--clr-prim-600);
-  --color-inert-foreground: var(--clr-prim-600);
   --color-accent: var(--clr-sec-100);
   --color-accent-foreground: var(--color-foreground);
   --color-selected: var(--clr-sec-200);

rsconcept/frontend/src/styling/colors.ts

@@ -8,12 +8,10 @@ export const APP_COLORS = {
   bgDefault:          'var(--clr-prim-100)',
   bgInput:            'var(--clr-prim-0)', 
   bgControls:         'var(--clr-prim-200)',
-  bgDisabled:         'var(--clr-prim-300)',
   bgPrimary:          'var(--clr-sec-600)',
   bgSelected:         'var(--clr-sec-200)',
   bgActiveSelection:  'var(--clr-select-node)',
   bgHover:            'var(--clr-sec-100)',
-  bgWarning:          'var(--clr-warn-100)',
   
   border:             'var(--clr-prim-400)',
 

rsconcept/frontend/src/styling/components.css

@@ -3,7 +3,7 @@
  */
 
 @utility cc-btn-nav {
-  color: var(--color-muted-foreground);
+  color: color-mix(in oklab, var(--color-foreground) 50%, transparent);
   border-radius: 0.75rem;
 
   cursor: pointer;
@@ -21,11 +21,13 @@
 @utility cc-btn-primary {
   color: var(--color-foreground);
   background-color: var(--color-selected);
+  border-color: var(--color-primary-border);
 
   &:focus-visible,
   &:hover:not(:disabled) {
     color: var(--color-primary-foreground);
     background-color: var(--color-primary);
+    border-color: var(--color-primary);
   }
 }
 

rsconcept/frontend/src/styling/constants.css

@@ -23,21 +23,16 @@
   --clr-prim-0:       oklch(100% 0 0deg);
   --clr-prim-100:     oklch(098% 0 0deg);
   --clr-prim-200:     oklch(095% 0 0deg);
-  --clr-prim-300:     oklch(092% 0 0deg);
   --clr-prim-400:     oklch(085% 0 0deg);
   --clr-prim-600:     oklch(070% 0 0deg);
-  --clr-prim-800:     oklch(055% 0 0deg);
   --clr-prim-999:     oklch(000% 0 0deg);
 
   --clr-sec-0:        oklch(100% 0 0deg);
   --clr-sec-100:      oklch(095% 0.050 262deg);
   --clr-sec-200:      oklch(088% 0.050 262deg);
-  --clr-sec-300:      oklch(080% 0.100 262deg);
   --clr-sec-400:      oklch(075% 0.150 262deg);
   --clr-sec-600:      oklch(060% 0.250 262deg);
 
-
-  --clr-warn-100:     oklch(094% 0.050 27deg);
   --clr-warn-600:     oklch(060% 0.250 27deg);
   --clr-ok-600:       oklch(060% 0.250 138deg);
 
@@ -69,20 +64,16 @@
   --clr-prim-0:       oklch(015% 0 0deg);
   --clr-prim-100:     oklch(022% 0 0deg);
   --clr-prim-200:     oklch(030% 0 0deg);
-  --clr-prim-300:     oklch(036% 0 0deg);
   --clr-prim-400:     oklch(050% 0 0deg);
   --clr-prim-600:     oklch(065% 0 0deg);
-  --clr-prim-800:     oklch(085% 0 0deg);
   --clr-prim-999:     oklch(095% 0 0deg);
 
   --clr-sec-0:        oklch(100% 0 0deg);
   --clr-sec-100:      oklch(025% 0.200 295deg);
   --clr-sec-200:      oklch(035% 0.150 295deg);
-  --clr-sec-300:      oklch(045% 0.150 295deg);
   --clr-sec-400:      oklch(055% 0.200 295deg);
   --clr-sec-600:      oklch(070% 0.250 295deg);
 
-  --clr-warn-100:     oklch(025% 0.100 27deg);
   --clr-warn-600:     oklch(065% 0.200 27deg);
   --clr-ok-600:       oklch(065% 0.200 138deg);
 

rsconcept/frontend/src/styling/overrides.css

@@ -8,7 +8,7 @@
 
 :root {
   /* Import overrides */
-  --toastify-color-dark: var(--clr-prim-300);
+  --toastify-color-dark: var(--clr-prim-200);
 
   --toastify-toast-width: 20rem;
   --toastify-toast-padding: 0.75rem;
@@ -43,7 +43,7 @@
 }
 
 .cm-editor.cm-focused {
-  border-color: var(--clr-prim-400);
+  border-color: var(--clr-sec-600);
   outline: 2px solid var(--clr-sec-600);
 }
 
@@ -61,7 +61,7 @@
   background-color: var(--clr-prim-0);
 
   .selected & {
-    border-color: var(--clr-prim-800);
+    border-color: var(--clr-prim-600);
   }
 }
 
@@ -116,7 +116,7 @@
   &.selected {
     outline-offset: 4px;
     outline-color: var(--clr-select-node);
-    border-color: var(--clr-prim-800);
+    border-color: var(--clr-prim-999);
   }
 }
 

rsconcept/frontend/src/styling/utilities.css

@@ -59,7 +59,16 @@
   background-color: transparent;
 
   &:disabled {
-    color: var(--color-inert-foreground);
+    color: var(--color-muted-foreground);
+    opacity: 0.75;
+  }
+}
+
+@utility cc-remove {
+  color: var(--color-muted-foreground);
+
+  &:hover:not(:disabled) {
+    color: var(--color-destructive);
   }
 }