From 91dbd0e88f2bf3c6b5f4b397359d3b9d0f37cec5 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 16 Dec 2024 23:52:11 +0300
Subject: [PATCH] F: Rework colors using tailwind configs

---
 .../frontend/src/app/ApplicationLayout.tsx    |   2 +-
 rsconcept/frontend/src/app/ErrorFallback.tsx  |   2 +-
 .../src/app/Navigation/Navigation.tsx         |   1 -
 .../src/app/Navigation/UserDropdown.tsx       |   1 +
 .../frontend/src/components/DomainIcons.tsx   |  28 +-
 .../src/components/RSInput/RSInput.tsx        |  25 +-
 .../src/components/RSInput/bracketMatching.ts |  10 +-
 .../src/components/RefsInput/RefsInput.tsx    |  19 +-
 .../src/components/RefsInput/tooltip.ts       |   9 +-
 .../src/components/info/BadgeConstituenta.tsx |  13 +-
 .../src/components/info/BadgeGrammeme.tsx     |  10 +-
 .../src/components/info/InfoCstClass.tsx      |   5 +-
 .../src/components/info/InfoCstStatus.tsx     |   5 +-
 .../src/components/info/InfoError.tsx         |   3 +-
 .../components/select/PickConstituenta.tsx    |   7 +-
 .../select/PickMultiConstituenta.tsx          |   4 +-
 .../src/components/select/PickSchema.tsx      |   5 +-
 .../components/select/PickSubstitutions.tsx   |  20 +-
 .../frontend/src/components/ui/Checkbox.tsx   |   2 +-
 .../src/components/ui/CheckboxTristate.tsx    |   2 +-
 .../ui/DataTable/PaginationTools.tsx          |   4 +-
 .../src/components/ui/DataTable/TableBody.tsx |   8 +-
 .../components/ui/DataTable/TableHeader.tsx   |   2 +-
 .../frontend/src/components/ui/Loader.tsx     |   7 +-
 .../frontend/src/components/ui/Modal.tsx      |   4 +-
 .../src/components/ui/SelectMulti.tsx         |  15 +-
 .../src/components/ui/SelectSingle.tsx        |  13 +-
 .../frontend/src/components/ui/TextURL.tsx    |   2 +-
 .../src/components/wrap/ExpectedAnonymous.tsx |   2 +-
 .../src/context/ConceptOptionsContext.tsx     |  11 -
 .../DlgConstituentaTemplate/TabArguments.tsx  |   6 +-
 .../dialogs/DlgCreateCst/FormCreateCst.tsx    |   2 +-
 .../dialogs/DlgEditOperation/TabSynthesis.tsx |   5 +-
 .../dialogs/DlgEditVersions/TableVersions.tsx |   6 +-
 .../src/dialogs/DlgShowAST/DlgShowAST.tsx     |   5 +-
 .../src/dialogs/DlgShowAST/graph/ASTNode.tsx  |   8 +-
 .../DlgShowTypeGraph/graph/CartesianEdge.tsx  |   7 +-
 .../DlgShowTypeGraph/graph/MGraphNode.tsx     |   9 +-
 .../pages/LibraryPage/TableLibraryItems.tsx   |   9 +-
 rsconcept/frontend/src/pages/LoginPage.tsx    |   2 +-
 .../ManualsPage/items/ui/HelpFormulaTree.tsx  |  15 +-
 .../ManualsPage/items/ui/HelpLibrary.tsx      |   5 +-
 .../ManualsPage/items/ui/HelpRSEditor.tsx     |   9 +-
 .../ManualsPage/items/ui/HelpRSGraphTerm.tsx  |   5 +-
 .../ManualsPage/items/ui/HelpTypeGraph.tsx    |   9 +-
 .../pages/OssPage/EditorOssGraph/OssFlow.tsx  |   5 +-
 .../OssPage/EditorOssGraph/graph/NodeCore.tsx |   2 +-
 .../frontend/src/pages/PasswordChangePage.tsx |   4 +-
 .../EditorConstituenta/FormConstituenta.tsx   |   4 +-
 .../EditorRSExpression/ParsingResult.tsx      |   2 +-
 .../EditorRSExpression/StatusBar.tsx          |   6 +-
 .../EditorRSFormCard/EditorLibraryItem.tsx    |   4 +-
 .../EditorRSFormCard/RSFormStats.tsx          |   6 +-
 .../EditorRSFormCard/ToolbarItemAccess.tsx    |   2 +-
 .../RSFormPage/EditorRSList/TableRSList.tsx   |   4 +-
 .../EditorTermGraph/SchemasGuide.tsx          |   6 +-
 .../RSFormPage/EditorTermGraph/TGFlow.tsx     |  13 +-
 .../EditorTermGraph/ToolbarFocusedCst.tsx     |   5 +-
 .../RSFormPage/EditorTermGraph/ViewHidden.tsx |   8 +-
 .../EditorTermGraph/graph/TGNode.tsx          |   9 +-
 .../TableSideConstituents.tsx                 |  17 +-
 .../src/pages/RegisterPage/FormSignup.tsx     |   6 +-
 .../src/pages/RestorePasswordPage.tsx         |   2 +-
 .../pages/UserProfilePage/EditorPassword.tsx  |   4 +-
 .../pages/UserProfilePage/EditorProfile.tsx   |   2 +-
 rsconcept/frontend/src/styling/color.ts       | 372 ++++++------------
 rsconcept/frontend/src/styling/constants.css  | 142 ++++---
 rsconcept/frontend/src/styling/overrides.css  |  97 ++---
 rsconcept/frontend/src/styling/setup.css      |  63 ++-
 rsconcept/frontend/src/styling/styles.css     | 143 ++-----
 rsconcept/frontend/src/utils/codemirror.ts    |   9 +-
 rsconcept/frontend/src/utils/utils.ts         |   2 +-
 rsconcept/frontend/tailwind.config.js         |  31 ++
 rsconcept/frontend/vite.config.ts             |   5 +-
 74 files changed, 536 insertions(+), 782 deletions(-)

diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index a4b6ec07..a9c0d87c 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/rsconcept/frontend/src/app/ApplicationLayout.tsx
@@ -13,7 +13,7 @@ function ApplicationLayout() {
   const { viewportHeight, mainHeight, showScroll } = useConceptOptions();
   return (
     <NavigationState>
-      <div className='min-w-[20rem] clr-app antialiased h-full max-w-[120rem] mx-auto'>
+      <div className='min-w-[20rem] antialiased h-full max-w-[120rem] mx-auto'>
         <ConceptToaster
           className='mt-[4rem] text-[14px]' // prettier: split lines
           autoClose={3000}
diff --git a/rsconcept/frontend/src/app/ErrorFallback.tsx b/rsconcept/frontend/src/app/ErrorFallback.tsx
index 4447a277..5f2b5ea8 100644
--- a/rsconcept/frontend/src/app/ErrorFallback.tsx
+++ b/rsconcept/frontend/src/app/ErrorFallback.tsx
@@ -5,7 +5,7 @@ import Button from '../components/ui/Button';
 
 function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   return (
-    <div className='flex flex-col gap-3 items-center antialiased clr-app' role='alert'>
+    <div className='flex flex-col gap-3 items-center antialiased' role='alert'>
       <h1>Что-то пошло не так!</h1>
       <Button onClick={resetErrorBoundary} text='Попробовать еще раз' />
       <InfoError error={error as Error} />
diff --git a/rsconcept/frontend/src/app/Navigation/Navigation.tsx b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
index b223295f..3b836073 100644
--- a/rsconcept/frontend/src/app/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
@@ -29,7 +29,6 @@ function Navigation() {
       className={clsx(
         'z-navigation', // prettier: split lines
         'sticky top-0 left-0 right-0',
-        'clr-app',
         'select-none'
       )}
     >
diff --git a/rsconcept/frontend/src/app/Navigation/UserDropdown.tsx b/rsconcept/frontend/src/app/Navigation/UserDropdown.tsx
index c8e03b1a..18405f50 100644
--- a/rsconcept/frontend/src/app/Navigation/UserDropdown.tsx
+++ b/rsconcept/frontend/src/app/Navigation/UserDropdown.tsx
@@ -63,6 +63,7 @@ function UserDropdown({ isOpen, hideDropdown }: UserDropdownProps) {
 
   function handleToggleDarkMode() {
     toggleDarkMode();
+    hideDropdown();
   }
 
   return (
diff --git a/rsconcept/frontend/src/components/DomainIcons.tsx b/rsconcept/frontend/src/components/DomainIcons.tsx
index 956e65ad..71dddf3d 100644
--- a/rsconcept/frontend/src/components/DomainIcons.tsx
+++ b/rsconcept/frontend/src/components/DomainIcons.tsx
@@ -51,7 +51,7 @@ export function ItemTypeIcon({ value, size = '1.25rem', className }: DomIconProp
     case LibraryItemType.RSFORM:
       return <IconRSForm size={size} className={className ?? 'clr-text-primary'} />;
     case LibraryItemType.OSS:
-      return <IconOSS size={size} className={className ?? 'clr-text-green'} />;
+      return <IconOSS size={size} className={className ?? 'text-ok-600'} />;
   }
 }
 
@@ -59,27 +59,27 @@ export function ItemTypeIcon({ value, size = '1.25rem', className }: DomIconProp
 export function PolicyIcon({ value, size = '1.25rem', className }: DomIconProps<AccessPolicy>) {
   switch (value) {
     case AccessPolicy.PRIVATE:
-      return <IconPrivate size={size} className={className ?? 'clr-text-red'} />;
+      return <IconPrivate size={size} className={className ?? 'text-warn-600'} />;
     case AccessPolicy.PROTECTED:
       return <IconProtected size={size} className={className ?? 'clr-text-primary'} />;
     case AccessPolicy.PUBLIC:
-      return <IconPublic size={size} className={className ?? 'clr-text-green'} />;
+      return <IconPublic size={size} className={className ?? 'text-ok-600'} />;
   }
 }
 
 /** Icon for visibility. */
 export function VisibilityIcon({ value, size = '1.25rem', className }: DomIconProps<boolean>) {
   if (value) {
-    return <IconShow size={size} className={className ?? 'clr-text-green'} />;
+    return <IconShow size={size} className={className ?? 'text-ok-600'} />;
   } else {
-    return <IconHide size={size} className={className ?? 'clr-text-red'} />;
+    return <IconHide size={size} className={className ?? 'text-warn-600'} />;
   }
 }
 
 /** Icon for subfolders. */
 export function SubfoldersIcon({ value, size = '1.25rem', className }: DomIconProps<boolean>) {
   if (value) {
-    return <IconSubfolders size={size} className={className ?? 'clr-text-green'} />;
+    return <IconSubfolders size={size} className={className ?? 'text-ok-600'} />;
   } else {
     return <IconSubfolders size={size} className={className ?? 'clr-text-primary'} />;
   }
@@ -91,11 +91,11 @@ export function LocationIcon({ value, size = '1.25rem', className }: DomIconProp
     case LocationHead.COMMON:
       return <IconPublic size={size} className={className ?? 'clr-text-primary'} />;
     case LocationHead.LIBRARY:
-      return <IconTemplates size={size} className={className ?? 'clr-text-red'} />;
+      return <IconTemplates size={size} className={className ?? 'text-warn-600'} />;
     case LocationHead.PROJECTS:
       return <IconBusiness size={size} className={className ?? 'clr-text-primary'} />;
     case LocationHead.USER:
-      return <IconUser size={size} className={className ?? 'clr-text-green'} />;
+      return <IconUser size={size} className={className ?? 'text-ok-600'} />;
   }
 }
 
@@ -153,21 +153,21 @@ export function StatusIcon({ value, size = '1.25rem', className }: DomIconProps<
 export function CstTypeIcon({ value, size = '1.25rem', className }: DomIconProps<CstType>) {
   switch (value) {
     case CstType.BASE:
-      return <IconCstBaseSet size={size} className={className ?? 'clr-text-green'} />;
+      return <IconCstBaseSet size={size} className={className ?? 'text-ok-600'} />;
     case CstType.CONSTANT:
-      return <IconCstConstSet size={size} className={className ?? 'clr-text-green'} />;
+      return <IconCstConstSet size={size} className={className ?? 'text-ok-600'} />;
     case CstType.STRUCTURED:
-      return <IconCstStructured size={size} className={className ?? 'clr-text-green'} />;
+      return <IconCstStructured size={size} className={className ?? 'text-ok-600'} />;
     case CstType.TERM:
       return <IconCstTerm size={size} className={className ?? 'clr-text-primary'} />;
     case CstType.AXIOM:
-      return <IconCstAxiom size={size} className={className ?? 'clr-text-red'} />;
+      return <IconCstAxiom size={size} className={className ?? 'text-warn-600'} />;
     case CstType.FUNCTION:
       return <IconCstFunction size={size} className={className ?? 'clr-text-primary'} />;
     case CstType.PREDICATE:
-      return <IconCstPredicate size={size} className={className ?? 'clr-text-red'} />;
+      return <IconCstPredicate size={size} className={className ?? 'text-warn-600'} />;
     case CstType.THEOREM:
-      return <IconCstTheorem size={size} className={className ?? 'clr-text-red'} />;
+      return <IconCstTheorem size={size} className={className ?? 'text-warn-600'} />;
   }
 }
 
diff --git a/rsconcept/frontend/src/components/RSInput/RSInput.tsx b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
index c67fef37..9ee15edd 100644
--- a/rsconcept/frontend/src/components/RSInput/RSInput.tsx
+++ b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
@@ -13,6 +13,7 @@ import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
 import { generateAlias, getCstTypePrefix, guessCstType } from '@/models/rsformAPI';
 import { extractGlobals } from '@/models/rslangAPI';
+import { APP_COLORS } from '@/styling/color';
 
 import { ccBracketMatching } from './bracketMatching';
 import { rsNavigation } from './clickNavigation';
@@ -63,7 +64,7 @@ const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
     },
     ref
   ) => {
-    const { darkMode, colors } = useConceptOptions();
+    const { darkMode } = useConceptOptions();
 
     const internalRef = useRef<ReactCodeMirrorRef>(null);
     const thisRef = !ref || typeof ref === 'function' ? internalRef : ref;
@@ -73,27 +74,27 @@ const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
       theme: darkMode ? 'dark' : 'light',
       settings: {
         fontFamily: 'inherit',
-        background: !disabled ? colors.bgInput : colors.bgDefault,
-        foreground: colors.fgDefault,
-        selection: colors.bgHover,
-        caret: colors.fgDefault
+        background: !disabled ? APP_COLORS.bgInput : APP_COLORS.bgDefault,
+        foreground: APP_COLORS.fgDefault,
+        selection: APP_COLORS.bgHover,
+        caret: APP_COLORS.fgDefault
       },
       styles: [
-        { tag: tags.name, color: colors.fgPurple, cursor: schema ? 'default' : cursor }, // GlobalID
-        { tag: tags.variableName, color: colors.fgGreen }, // LocalID
-        { tag: tags.propertyName, color: colors.fgTeal }, // Radical
-        { tag: tags.keyword, color: colors.fgBlue }, // keywords
-        { tag: tags.literal, color: colors.fgBlue }, // literals
+        { tag: tags.name, color: APP_COLORS.fgPurple, cursor: schema ? 'default' : cursor }, // GlobalID
+        { tag: tags.variableName, color: APP_COLORS.fgGreen }, // LocalID
+        { tag: tags.propertyName, color: APP_COLORS.fgTeal }, // Radical
+        { tag: tags.keyword, color: APP_COLORS.fgBlue }, // keywords
+        { tag: tags.literal, color: APP_COLORS.fgBlue }, // literals
         { tag: tags.controlKeyword, fontWeight: '400' }, // R | I | D
         { tag: tags.unit, fontSize: '0.75rem' }, // indices
-        { tag: tags.brace, color: colors.fgPurple, fontWeight: '600' } // braces (curly brackets)
+        { tag: tags.brace, color: APP_COLORS.fgPurple, fontWeight: '600' } // braces (curly brackets)
       ]
     });
 
     const editorExtensions = [
       EditorView.lineWrapping,
       RSLanguage,
-      ccBracketMatching(darkMode),
+      ccBracketMatching(),
       ...(!schema || !onOpenEdit ? [] : [rsNavigation(schema, onOpenEdit)]),
       ...(noTooltip || !schema ? [] : [rsHoverTooltip(schema, onOpenEdit !== undefined)])
     ];
diff --git a/rsconcept/frontend/src/components/RSInput/bracketMatching.ts b/rsconcept/frontend/src/components/RSInput/bracketMatching.ts
index a1955f40..96d8d145 100644
--- a/rsconcept/frontend/src/components/RSInput/bracketMatching.ts
+++ b/rsconcept/frontend/src/components/RSInput/bracketMatching.ts
@@ -1,7 +1,7 @@
 import { bracketMatching, MatchResult } from '@codemirror/language';
 import { Decoration, EditorView } from '@codemirror/view';
 
-import { bracketsDarkT, bracketsLightT } from '@/styling/color';
+import { BRACKETS_THEME } from '@/styling/color';
 
 const matchingMark = Decoration.mark({ class: 'cc-matchingBracket' });
 const nonMatchingMark = Decoration.mark({ class: 'cc-nonmatchingBracket' });
@@ -16,16 +16,14 @@ function bracketRender(match: MatchResult) {
   return decorations;
 }
 
-const darkTheme = EditorView.baseTheme(bracketsDarkT);
+const theme = EditorView.baseTheme(BRACKETS_THEME);
 
-const lightTheme = EditorView.baseTheme(bracketsLightT);
-
-export function ccBracketMatching(darkMode: boolean) {
+export function ccBracketMatching() {
   return [
     bracketMatching({
       renderMatch: bracketRender,
       brackets: '{}[]()'
     }),
-    darkMode ? darkTheme : lightTheme
+    theme
   ];
 }
diff --git a/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx b/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
index 78a10c74..b8858161 100644
--- a/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
+++ b/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
@@ -13,6 +13,7 @@ import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import DlgEditReference from '@/dialogs/DlgEditReference';
 import { ReferenceType } from '@/models/language';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
+import { APP_COLORS } from '@/styling/color';
 import { CodeMirrorWrapper } from '@/utils/codemirror';
 import { PARAMETER } from '@/utils/constants';
 
@@ -91,7 +92,7 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
     },
     ref
   ) => {
-    const { darkMode, colors } = useConceptOptions();
+    const { darkMode } = useConceptOptions();
 
     const [isFocused, setIsFocused] = useState(false);
 
@@ -110,15 +111,15 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
       theme: darkMode ? 'dark' : 'light',
       settings: {
         fontFamily: 'inherit',
-        background: !disabled ? colors.bgInput : colors.bgDefault,
-        foreground: colors.fgDefault,
-        selection: colors.bgHover,
-        caret: colors.fgDefault
+        background: !disabled ? APP_COLORS.bgInput : APP_COLORS.bgDefault,
+        foreground: APP_COLORS.fgDefault,
+        selection: APP_COLORS.bgHover,
+        caret: APP_COLORS.fgDefault
       },
       styles: [
-        { tag: tags.name, color: colors.fgPurple, cursor: 'default' }, // EntityReference
-        { tag: tags.literal, color: colors.fgTeal, cursor: 'default' }, // SyntacticReference
-        { tag: tags.comment, color: colors.fgRed } // Error
+        { tag: tags.name, color: APP_COLORS.fgPurple, cursor: 'default' }, // EntityReference
+        { tag: tags.literal, color: APP_COLORS.fgTeal, cursor: 'default' }, // SyntacticReference
+        { tag: tags.comment, color: APP_COLORS.fgRed } // Error
       ]
     });
 
@@ -127,7 +128,7 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
       EditorView.contentAttributes.of({ spellcheck: 'true' }),
       NaturalLanguage,
       ...(!schema || !onOpenEdit ? [] : [refsNavigation(schema, onOpenEdit)]),
-      ...(schema ? [refsHoverTooltip(schema, colors, onOpenEdit !== undefined)] : [])
+      ...(schema ? [refsHoverTooltip(schema, onOpenEdit !== undefined)] : [])
     ];
 
     function handleChange(newValue: string) {
diff --git a/rsconcept/frontend/src/components/RefsInput/tooltip.ts b/rsconcept/frontend/src/components/RefsInput/tooltip.ts
index fa9cbc0f..7d26b6ca 100644
--- a/rsconcept/frontend/src/components/RefsInput/tooltip.ts
+++ b/rsconcept/frontend/src/components/RefsInput/tooltip.ts
@@ -4,7 +4,6 @@ import { hoverTooltip } from '@codemirror/view';
 
 import { IEntityReference, ISyntacticReference } from '@/models/language';
 import { IRSForm } from '@/models/rsform';
-import { IColorTheme } from '@/styling/color';
 import {
   domTooltipEntityReference,
   domTooltipSyntacticReference,
@@ -14,7 +13,7 @@ import {
 
 import { RefEntity } from './parse/parser.terms';
 
-export const tooltipProducer = (schema: IRSForm, colors: IColorTheme, canClick?: boolean) => {
+export const tooltipProducer = (schema: IRSForm, canClick?: boolean) => {
   return hoverTooltip((view, pos) => {
     const parse = findReferenceAt(pos, view.state);
     if (!parse) {
@@ -27,7 +26,7 @@ export const tooltipProducer = (schema: IRSForm, colors: IColorTheme, canClick?:
         pos: parse.start,
         end: parse.end,
         above: false,
-        create: () => domTooltipEntityReference(parse.ref as IEntityReference, cst, colors, canClick)
+        create: () => domTooltipEntityReference(parse.ref as IEntityReference, cst, canClick)
       };
     } else {
       let masterText: string | undefined = undefined;
@@ -54,6 +53,6 @@ export const tooltipProducer = (schema: IRSForm, colors: IColorTheme, canClick?:
   });
 };
 
-export function refsHoverTooltip(schema: IRSForm, colors: IColorTheme, canClick?: boolean): Extension {
-  return [tooltipProducer(schema, colors, canClick)];
+export function refsHoverTooltip(schema: IRSForm, canClick?: boolean): Extension {
+  return [tooltipProducer(schema, canClick)];
 }
diff --git a/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx b/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
index bc08161b..878eef61 100644
--- a/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
+++ b/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 
 import { CstClass, IConstituenta } from '@/models/rsform';
-import { colorFgCstStatus, IColorTheme } from '@/styling/color';
+import { APP_COLORS, colorFgCstStatus } from '@/styling/color';
 
 import { CProps } from '../props';
 import TooltipConstituenta from './TooltipConstituenta';
@@ -12,15 +12,12 @@ interface BadgeConstituentaProps extends CProps.Styling {
 
   /** Constituenta to display. */
   value: IConstituenta;
-
-  /** Color theme to use. */
-  theme: IColorTheme;
 }
 
 /**
  * Displays a badge with a constituenta alias and information tooltip.
  */
-function BadgeConstituenta({ value, prefixID, className, style, theme }: BadgeConstituentaProps) {
+function BadgeConstituenta({ value, prefixID, className, style }: BadgeConstituentaProps) {
   return (
     <div
       id={`${prefixID}${value.id}`}
@@ -33,9 +30,9 @@ function BadgeConstituenta({ value, prefixID, className, style, theme }: BadgeCo
         className
       )}
       style={{
-        borderColor: colorFgCstStatus(value.status, theme),
-        color: colorFgCstStatus(value.status, theme),
-        backgroundColor: value.cst_class === CstClass.BASIC ? theme.bgGreen25 : theme.bgInput,
+        borderColor: colorFgCstStatus(value.status),
+        color: colorFgCstStatus(value.status),
+        backgroundColor: value.cst_class === CstClass.BASIC ? APP_COLORS.bgGreen25 : APP_COLORS.bgInput,
         ...style
       }}
     >
diff --git a/rsconcept/frontend/src/components/info/BadgeGrammeme.tsx b/rsconcept/frontend/src/components/info/BadgeGrammeme.tsx
index 551328ca..8dea738d 100644
--- a/rsconcept/frontend/src/components/info/BadgeGrammeme.tsx
+++ b/rsconcept/frontend/src/components/info/BadgeGrammeme.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { GramData } from '@/models/language';
-import { colorFgGrammeme } from '@/styling/color';
+import { APP_COLORS, colorFgGrammeme } from '@/styling/color';
 import { labelGrammeme } from '@/utils/labels';
 
 interface BadgeGrammemeProps {
@@ -14,7 +13,6 @@ interface BadgeGrammemeProps {
  * Displays a badge with a grammeme tag.
  */
 function BadgeGrammeme({ grammeme }: BadgeGrammemeProps) {
-  const { colors } = useConceptOptions();
   return (
     <div
       className={clsx(
@@ -24,9 +22,9 @@ function BadgeGrammeme({ grammeme }: BadgeGrammemeProps) {
         'text-sm font-medium text-center whitespace-nowrap'
       )}
       style={{
-        borderColor: colorFgGrammeme(grammeme, colors),
-        color: colorFgGrammeme(grammeme, colors),
-        backgroundColor: colors.bgInput
+        borderColor: colorFgGrammeme(grammeme),
+        color: colorFgGrammeme(grammeme),
+        backgroundColor: APP_COLORS.bgInput
       }}
     >
       {labelGrammeme(grammeme)}
diff --git a/rsconcept/frontend/src/components/info/InfoCstClass.tsx b/rsconcept/frontend/src/components/info/InfoCstClass.tsx
index 02605505..ddc062cb 100644
--- a/rsconcept/frontend/src/components/info/InfoCstClass.tsx
+++ b/rsconcept/frontend/src/components/info/InfoCstClass.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { CstClass } from '@/models/rsform';
 import { colorBgCstClass } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
@@ -11,8 +10,6 @@ interface InfoCstClassProps {
 }
 
 function InfoCstClass({ header }: InfoCstClassProps) {
-  const { colors } = useConceptOptions();
-
   return (
     <div className='flex flex-col gap-1 mb-2 dense'>
       {header ? <h1>{header}</h1> : null}
@@ -21,7 +18,7 @@ function InfoCstClass({ header }: InfoCstClassProps) {
           <p key={`${prefixes.cst_status_list}${index}`}>
             <span
               className={clsx('inline-block', 'min-w-[7rem]', 'px-1', 'border', 'text-center text-sm font-controls')}
-              style={{ backgroundColor: colorBgCstClass(cstClass, colors) }}
+              style={{ backgroundColor: colorBgCstClass(cstClass) }}
             >
               {labelCstClass(cstClass)}
             </span>
diff --git a/rsconcept/frontend/src/components/info/InfoCstStatus.tsx b/rsconcept/frontend/src/components/info/InfoCstStatus.tsx
index ba95a5b9..73e70375 100644
--- a/rsconcept/frontend/src/components/info/InfoCstStatus.tsx
+++ b/rsconcept/frontend/src/components/info/InfoCstStatus.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ExpressionStatus } from '@/models/rsform';
 import { colorBgCstStatus } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
@@ -11,8 +10,6 @@ interface InfoCstStatusProps {
 }
 
 function InfoCstStatus({ title }: InfoCstStatusProps) {
-  const { colors } = useConceptOptions();
-
   return (
     <div className='flex flex-col gap-1 mb-2 dense'>
       {title ? <h1>{title}</h1> : null}
@@ -28,7 +25,7 @@ function InfoCstStatus({ title }: InfoCstStatusProps) {
                 'border',
                 'text-center text-sm font-controls'
               )}
-              style={{ backgroundColor: colorBgCstStatus(status, colors) }}
+              style={{ backgroundColor: colorBgCstStatus(status) }}
             >
               {labelExpressionStatus(status)}
             </span>
diff --git a/rsconcept/frontend/src/components/info/InfoError.tsx b/rsconcept/frontend/src/components/info/InfoError.tsx
index b3b7bdfe..c65e9025 100644
--- a/rsconcept/frontend/src/components/info/InfoError.tsx
+++ b/rsconcept/frontend/src/components/info/InfoError.tsx
@@ -63,8 +63,7 @@ function InfoError({ error }: InfoErrorProps) {
         'cc-fade-in',
         'min-w-[25rem]',
         'px-3 py-2 flex flex-col',
-        'clr-text-red',
-        'text-sm font-semibold',
+        'text-warn-600 text-sm font-semibold',
         'select-text'
       )}
     >
diff --git a/rsconcept/frontend/src/components/select/PickConstituenta.tsx b/rsconcept/frontend/src/components/select/PickConstituenta.tsx
index c1007387..0c0b714e 100644
--- a/rsconcept/frontend/src/components/select/PickConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickConstituenta.tsx
@@ -5,10 +5,10 @@ import { useEffect, useState } from 'react';
 
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
 import SearchBar from '@/components/ui/SearchBar';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { IConstituenta } from '@/models/rsform';
 import { matchConstituenta } from '@/models/rsformAPI';
+import { APP_COLORS } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';
 
@@ -47,7 +47,6 @@ function PickConstituenta({
   className,
   ...restProps
 }: PickConstituentaProps) {
-  const { colors } = useConceptOptions();
   const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);
   const [filterText, setFilterText] = useState(initialFilter);
 
@@ -70,7 +69,7 @@ function PickConstituenta({
       size: 65,
       minSize: 65,
       maxSize: 65,
-      cell: props => <BadgeConstituenta theme={colors} value={props.row.original} prefixID={prefixID} />
+      cell: props => <BadgeConstituenta value={props.row.original} prefixID={prefixID} />
     }),
     columnHelper.accessor(cst => describeFunc(cst), {
       id: 'description',
@@ -82,7 +81,7 @@ function PickConstituenta({
   const conditionalRowStyles: IConditionalStyle<IConstituenta>[] = [
     {
       when: (cst: IConstituenta) => cst.id === value?.id,
-      style: { backgroundColor: colors.bgSelected }
+      style: { backgroundColor: APP_COLORS.bgSelected }
     }
   ];
 
diff --git a/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx b/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
index 337d1bc3..d121baec 100644
--- a/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
 import DataTable, { createColumnHelper, RowSelectionState } from '@/components/ui/DataTable';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { Graph } from '@/models/Graph';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';
@@ -44,7 +43,6 @@ function PickMultiConstituenta({
   className,
   ...restProps
 }: PickMultiConstituentaProps) {
-  const { colors } = useConceptOptions();
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [filtered, setFiltered] = useState<IConstituenta[]>(data);
   const [filterText, setFilterText] = useState('');
@@ -111,7 +109,7 @@ function PickMultiConstituenta({
       id: 'alias',
       header: () => <span className='pl-3'>Имя</span>,
       size: 65,
-      cell: props => <BadgeConstituenta theme={colors} value={props.row.original} prefixID={prefixID} />
+      cell: props => <BadgeConstituenta value={props.row.original} prefixID={prefixID} />
     }),
     columnHelper.accessor(cst => describeConstituenta(cst), {
       id: 'description',
diff --git a/rsconcept/frontend/src/components/select/PickSchema.tsx b/rsconcept/frontend/src/components/select/PickSchema.tsx
index 9f8ac9d3..eb555af8 100644
--- a/rsconcept/frontend/src/components/select/PickSchema.tsx
+++ b/rsconcept/frontend/src/components/select/PickSchema.tsx
@@ -4,11 +4,11 @@ import { useIntl } from 'react-intl';
 
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
 import SearchBar from '@/components/ui/SearchBar';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useLibrary } from '@/context/LibraryContext';
 import useDropdown from '@/hooks/useDropdown';
 import { ILibraryItem, LibraryItemID, LibraryItemType } from '@/models/library';
 import { matchLibraryItem } from '@/models/libraryAPI';
+import { APP_COLORS } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
 
 import { IconClose, IconFolderTree } from '../Icons';
@@ -45,7 +45,6 @@ function PickSchema({
   ...restProps
 }: PickSchemaProps) {
   const intl = useIntl();
-  const { colors } = useConceptOptions();
   const { folders } = useLibrary();
 
   const [filterText, setFilterText] = useState(initialFilter);
@@ -99,7 +98,7 @@ function PickSchema({
   const conditionalRowStyles: IConditionalStyle<ILibraryItem>[] = [
     {
       when: (item: ILibraryItem) => item.id === value,
-      style: { backgroundColor: colors.bgSelected }
+      style: { backgroundColor: APP_COLORS.bgSelected }
     }
   ];
 
diff --git a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
index b55125ec..e07167fa 100644
--- a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
+++ b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
@@ -8,10 +8,10 @@ import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import SelectConstituenta from '@/components/select/SelectConstituenta';
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ILibraryItem } from '@/models/library';
 import { ICstSubstitute, IMultiSubstitution } from '@/models/oss';
 import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';
+import { APP_COLORS } from '@/styling/color';
 import { errors } from '@/utils/labels';
 
 import { IconAccept, IconPageLeft, IconPageRight, IconRemove, IconReplace } from '../Icons';
@@ -46,8 +46,6 @@ function PickSubstitutions({
   className,
   ...restProps
 }: PickSubstitutionsProps) {
-  const { colors } = useConceptOptions();
-
   const [leftArgument, setLeftArgument] = useState<ILibraryItem | undefined>(
     schemas.length === 1 ? schemas[0] : undefined
   );
@@ -164,11 +162,7 @@ function PickSubstitutions({
       id: 'left_alias',
       size: 65,
       cell: props => (
-        <BadgeConstituenta
-          theme={colors}
-          value={props.row.original.substitution}
-          prefixID={`${prefixID}_${props.row.index}_1_`}
-        />
+        <BadgeConstituenta value={props.row.original.substitution} prefixID={`${prefixID}_${props.row.index}_1_`} />
       )
     }),
     columnHelper.display({
@@ -180,11 +174,7 @@ function PickSubstitutions({
       id: 'right_alias',
       size: 65,
       cell: props => (
-        <BadgeConstituenta
-          theme={colors}
-          value={props.row.original.original}
-          prefixID={`${prefixID}_${props.row.index}_2_`}
-        />
+        <BadgeConstituenta value={props.row.original.original} prefixID={`${prefixID}_${props.row.index}_2_`} />
       )
     }),
     columnHelper.accessor(item => item.original_source.alias, {
@@ -227,9 +217,7 @@ function PickSubstitutions({
   const conditionalRowStyles: IConditionalStyle<IMultiSubstitution>[] = [
     {
       when: (item: IMultiSubstitution) => item.is_suggestion,
-      style: {
-        backgroundColor: colors.bgOrange50
-      }
+      style: { backgroundColor: APP_COLORS.bgOrange50 }
     }
   ];
 
diff --git a/rsconcept/frontend/src/components/ui/Checkbox.tsx b/rsconcept/frontend/src/components/ui/Checkbox.tsx
index c50bdf10..034e4959 100644
--- a/rsconcept/frontend/src/components/ui/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/ui/Checkbox.tsx
@@ -68,7 +68,7 @@ function Checkbox({
           'border rounded-sm',
           {
             'clr-primary': value !== false,
-            'clr-app': value === false
+            'bg-app-100': value === false
           }
         )}
       >
diff --git a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
index 18c142f5..73554aed 100644
--- a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
+++ b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
@@ -69,7 +69,7 @@ function CheckboxTristate({
           'border rounded-sm',
           {
             'clr-primary': value !== false,
-            'clr-app': value === false
+            'bg-app-100': value === false
           }
         )}
       >
diff --git a/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx b/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
index 68c0a9f0..f5fd179a 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
@@ -64,7 +64,7 @@ function PaginationTools<TData>({
         <input
           id={id ? `${id}__page` : undefined}
           title='Номер страницы. Выделите для ручного ввода'
-          className='w-6 text-center clr-app'
+          className='w-6 text-center bg-app-100'
           value={table.getState().pagination.pageIndex + 1}
           onChange={event => {
             const page = event.target.value ? Number(event.target.value) - 1 : 0;
@@ -94,7 +94,7 @@ function PaginationTools<TData>({
         id={id ? `${id}__per_page` : undefined}
         value={table.getState().pagination.pageSize}
         onChange={handlePaginationOptionsChange}
-        className='mx-2 cursor-pointer clr-app'
+        className='mx-2 cursor-pointer bg-app-100'
       >
         {paginationOptions.map(pageSize => (
           <option key={`${prefixes.page_size}${pageSize}`} value={pageSize}>
diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
index a6565f26..62a54498 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
@@ -71,13 +71,9 @@ function TableBody<TData>({
         <tr
           key={row.id}
           className={clsx(
-            'cc-scroll-row',
+            'cc-scroll-row clr-hover',
             !noHeader && 'scroll-mt-[calc(2px+2rem)]',
-            row.getIsSelected()
-              ? 'clr-selected clr-hover'
-              : index % 2 === 0
-              ? 'clr-controls clr-hover'
-              : 'clr-app clr-hover'
+            row.getIsSelected() ? 'clr-selected' : index % 2 === 0 ? 'clr-controls' : 'bg-app-100'
           )}
           style={{ ...(conditionalRowStyles ? getRowStyles(row) : []) }}
         >
diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
index 3715f134..7b113d78 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
@@ -22,7 +22,7 @@ function TableHeader<TData>({
 }: TableHeaderProps<TData>) {
   return (
     <thead
-      className='clr-app cc-shadow-border'
+      className='bg-app-100 cc-shadow-border'
       style={{
         top: headPosition,
         position: 'sticky'
diff --git a/rsconcept/frontend/src/components/ui/Loader.tsx b/rsconcept/frontend/src/components/ui/Loader.tsx
index 2747b5b4..09f35ae4 100644
--- a/rsconcept/frontend/src/components/ui/Loader.tsx
+++ b/rsconcept/frontend/src/components/ui/Loader.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
+import { APP_COLORS } from '@/styling/color';
 
 interface LoaderProps {
   /** Scale of the loader from 1 to 10. */
@@ -55,11 +55,10 @@ const animatePulse = (startBig: boolean, duration: string) => {
  * Displays animated loader.
  */
 function Loader({ scale = 5, circular }: LoaderProps) {
-  const { colors } = useConceptOptions();
   if (circular) {
     return (
       <div className='flex justify-center' aria-label='three-circles-loading' aria-busy='true' role='progressbar'>
-        <svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 100 100' fill={colors.bgPrimary}>
+        <svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 100 100' fill={APP_COLORS.bgPrimary}>
           <path d='M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z'>
             {animateRotation('2.25s')}
           </path>
@@ -75,7 +74,7 @@ function Loader({ scale = 5, circular }: LoaderProps) {
   } else {
     return (
       <div className='flex justify-center' aria-busy='true' role='progressbar'>
-        <svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 120 30' fill={colors.bgPrimary}>
+        <svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 120 30' fill={APP_COLORS.bgPrimary}>
           <circle cx='15' cy='15' r='16'>
             {animatePulse(true, '0.8s')}
           </circle>
diff --git a/rsconcept/frontend/src/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index ddbca86a..d9b4f4e6 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@@ -95,14 +95,14 @@ function Modal({
     <div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
       <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-blur')} />
       <div
-        className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop')}
+        className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop opacity-30')}
         onClick={hideWindow}
       />
       <div
         className={clsx(
           'cc-animate-modal',
           'z-modal absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2',
-          'border rounded-xl clr-app'
+          'border rounded-xl bg-app-100'
         )}
       >
         <Overlay position='right-2 top-2'>
diff --git a/rsconcept/frontend/src/components/ui/SelectMulti.tsx b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
index edd9f638..757ddbbc 100644
--- a/rsconcept/frontend/src/components/ui/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectMulti.tsx
@@ -9,9 +9,8 @@ import Select, {
   StylesConfig
 } from 'react-select';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
-import { selectDarkT, selectLightT } from '@/styling/color';
+import { APP_COLORS, SELECT_THEME } from '@/styling/color';
 
 import { IconClose, IconDropArrow, IconDropArrowUp } from '../Icons';
 
@@ -51,9 +50,7 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
   noPortal,
   ...restProps
 }: SelectMultiProps<Option, Group>) {
-  const { darkMode, colors } = useConceptOptions();
   const size = useWindowSize();
-  const themeColors = !darkMode ? selectLightT : selectDarkT;
 
   const adjustedStyles: StylesConfig<Option, true, Group> = {
     container: defaultStyles => ({
@@ -71,10 +68,10 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
       padding: '0.25rem 0.75rem',
       fontSize: '0.875rem',
       lineHeight: '1.25rem',
-      backgroundColor: isSelected ? colors.bgSelected : styles.backgroundColor,
-      color: isSelected ? colors.fgSelected : styles.color,
+      backgroundColor: isSelected ? APP_COLORS.bgSelected : styles.backgroundColor,
+      color: isSelected ? APP_COLORS.fgSelected : styles.color,
       borderWidth: '1px',
-      borderColor: colors.border
+      borderColor: APP_COLORS.border
     }),
     menuPortal: styles => ({
       ...styles,
@@ -89,7 +86,7 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
     multiValue: styles => ({
       ...styles,
       borderRadius: '0.5rem',
-      backgroundColor: colors.bgSelected
+      backgroundColor: APP_COLORS.bgSelected
     }),
     dropdownIndicator: base => ({
       ...base,
@@ -119,7 +116,7 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
         },
         colors: {
           ...theme.colors,
-          ...themeColors
+          ...SELECT_THEME
         }
       })}
       menuPortalTarget={!noPortal ? document.body : null}
diff --git a/rsconcept/frontend/src/components/ui/SelectSingle.tsx b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
index 0e053856..87f44a80 100644
--- a/rsconcept/frontend/src/components/ui/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectSingle.tsx
@@ -9,9 +9,8 @@ import Select, {
   StylesConfig
 } from 'react-select';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
-import { selectDarkT, selectLightT } from '@/styling/color';
+import { APP_COLORS, SELECT_THEME } from '@/styling/color';
 
 import { IconClose, IconDropArrow, IconDropArrowUp } from '../Icons';
 
@@ -53,9 +52,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
   noBorder,
   ...restProps
 }: SelectSingleProps<Option, Group>) {
-  const { darkMode, colors } = useConceptOptions();
   const size = useWindowSize();
-  const themeColors = !darkMode ? selectLightT : selectDarkT;
 
   const adjustedStyles: StylesConfig<Option, false, Group> = {
     container: defaultStyles => ({
@@ -82,10 +79,10 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
       padding: '0.25rem 0.75rem',
       fontSize: '0.875rem',
       lineHeight: '1.25rem',
-      backgroundColor: isSelected ? colors.bgSelected : defaultStyles.backgroundColor,
-      color: isSelected ? colors.fgSelected : defaultStyles.color,
+      backgroundColor: isSelected ? APP_COLORS.bgSelected : defaultStyles.backgroundColor,
+      color: isSelected ? APP_COLORS.fgSelected : defaultStyles.color,
       borderWidth: '1px',
-      borderColor: colors.border
+      borderColor: APP_COLORS.border
     }),
     input: defaultStyles => ({ ...defaultStyles }),
     placeholder: defaultStyles => ({ ...defaultStyles }),
@@ -117,7 +114,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
         },
         colors: {
           ...theme.colors,
-          ...themeColors
+          ...SELECT_THEME
         }
       })}
       menuPortalTarget={!noPortal ? document.body : null}
diff --git a/rsconcept/frontend/src/components/ui/TextURL.tsx b/rsconcept/frontend/src/components/ui/TextURL.tsx
index 4a73be00..ee8971be 100644
--- a/rsconcept/frontend/src/components/ui/TextURL.tsx
+++ b/rsconcept/frontend/src/components/ui/TextURL.tsx
@@ -20,7 +20,7 @@ interface TextURLProps {
 /**
  * Displays a text with a clickable link.
  */
-function TextURL({ text, href, title, color = 'clr-text-url', onClick }: TextURLProps) {
+function TextURL({ text, href, title, color = 'text-prim-100', onClick }: TextURLProps) {
   const design = `cursor-pointer hover:underline ${color}`;
   if (href) {
     return (
diff --git a/rsconcept/frontend/src/components/wrap/ExpectedAnonymous.tsx b/rsconcept/frontend/src/components/wrap/ExpectedAnonymous.tsx
index 8c980b48..aa755d4d 100644
--- a/rsconcept/frontend/src/components/wrap/ExpectedAnonymous.tsx
+++ b/rsconcept/frontend/src/components/wrap/ExpectedAnonymous.tsx
@@ -22,7 +22,7 @@ function ExpectedAnonymous() {
         <span> | </span>
         <TextURL text='Справка' href='/manuals' />
         <span> | </span>
-        <span className='cursor-pointer hover:underline clr-text-url' onClick={logoutAndRedirect}>
+        <span className='cursor-pointer hover:underline text-prim-100' onClick={logoutAndRedirect}>
           Выйти
         </span>
       </div>
diff --git a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
index d992e1d4..118337e5 100644
--- a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
+++ b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
@@ -4,7 +4,6 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState }
 
 import Tooltip from '@/components/ui/Tooltip';
 import useLocalStorage from '@/hooks/useLocalStorage';
-import { darkT, IColorTheme, lightT } from '@/styling/color';
 import { globals, PARAMETER, storage } from '@/utils/constants';
 import { contextOutsideScope } from '@/utils/labels';
 
@@ -12,8 +11,6 @@ interface IOptionsContext {
   viewportHeight: string;
   mainHeight: string;
 
-  colors: IColorTheme;
-
   darkMode: boolean;
   toggleDarkMode: () => void;
 
@@ -60,8 +57,6 @@ export const OptionsState = ({ children }: React.PropsWithChildren) => {
   const [folderMode, setFolderMode] = useLocalStorage<boolean>(storage.librarySearchFolderMode, true);
   const [location, setLocation] = useLocalStorage<string>(storage.librarySearchLocation, '');
 
-  const [colors, setColors] = useState<IColorTheme>(lightT);
-
   const [noNavigationAnimation, setNoNavigationAnimation] = useState(false);
   const [noFooter, setNoFooter] = useState(false);
   const [showScroll, setShowScroll] = useState(false);
@@ -80,10 +75,6 @@ export const OptionsState = ({ children }: React.PropsWithChildren) => {
     setDarkClass(darkMode);
   }, [darkMode]);
 
-  useEffect(() => {
-    setColors(darkMode ? darkT : lightT);
-  }, [darkMode, setColors]);
-
   const toggleNoNavigation = useCallback(() => {
     if (noNavigation) {
       setNoNavigationAnimation(false);
@@ -109,7 +100,6 @@ export const OptionsState = ({ children }: React.PropsWithChildren) => {
 
   const toggleDarkMode = useCallback(() => {
     setDarkMode(prev => !prev);
-    window.location.reload();
   }, [setDarkMode]);
 
   const mainHeight = useMemo(() => {
@@ -131,7 +121,6 @@ export const OptionsState = ({ children }: React.PropsWithChildren) => {
       value={{
         darkMode,
         adminMode,
-        colors,
         noNavigationAnimation,
         noNavigation,
         noFooter,
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabArguments.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabArguments.tsx
index 7e643bb0..0ece94c6 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabArguments.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabArguments.tsx
@@ -10,9 +10,9 @@ import PickConstituenta from '@/components/select/PickConstituenta';
 import DataTable, { IConditionalStyle } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
 import NoData from '@/components/ui/NoData';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { IArgumentValue } from '@/models/rslang';
+import { APP_COLORS } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
 
 interface TabArgumentsProps {
@@ -29,8 +29,6 @@ export interface IArgumentsState {
 const argumentsHelper = createColumnHelper<IArgumentValue>();
 
 function TabArguments({ state, schema, partialUpdate }: TabArgumentsProps) {
-  const { colors } = useConceptOptions();
-
   const [selectedCst, setSelectedCst] = useState<IConstituenta | undefined>(undefined);
   const [selectedArgument, setSelectedArgument] = useState<IArgumentValue | undefined>(undefined);
   const [argumentValue, setArgumentValue] = useState('');
@@ -124,7 +122,7 @@ function TabArguments({ state, schema, partialUpdate }: TabArgumentsProps) {
   const conditionalRowStyles: IConditionalStyle<IArgumentValue>[] = [
     {
       when: (arg: IArgumentValue) => arg.alias === selectedArgument?.alias,
-      style: { backgroundColor: colors.bgSelected }
+      style: { backgroundColor: APP_COLORS.bgSelected }
     }
   ];
 
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
index 385f4463..c485e323 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
@@ -119,7 +119,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           id='dlg_cst_show_comment'
           tabIndex={-1}
           type='button'
-          className='self-start cc-label clr-text-url hover:underline'
+          className='self-start cc-label text-prim-100 hover:underline'
           onClick={() => setForceComment(true)}
         >
           Добавить комментарий
diff --git a/rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx b/rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx
index 03e0d9c4..ac896a62 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx
@@ -2,9 +2,9 @@ import { ErrorData } from '@/components/info/InfoError';
 import PickSubstitutions from '@/components/select/PickSubstitutions';
 import TextArea from '@/components/ui/TextArea';
 import DataLoader from '@/components/wrap/DataLoader';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ICstSubstitute } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
+import { APP_COLORS } from '@/styling/color';
 import { prefixes } from '@/utils/constants';
 
 interface TabSynthesisProps {
@@ -29,7 +29,6 @@ function TabSynthesis({
   setSubstitutions,
   suggestions
 }: TabSynthesisProps) {
-  const { colors } = useConceptOptions();
   return (
     <DataLoader isLoading={loading} error={error}>
       <div className='cc-fade-in cc-column mt-3'>
@@ -45,7 +44,7 @@ function TabSynthesis({
           disabled
           value={validationText}
           rows={4}
-          style={{ borderColor: isCorrect ? undefined : colors.fgRed }}
+          style={{ borderColor: isCorrect ? undefined : APP_COLORS.fgRed }}
         />
       </div>
     </DataLoader>
diff --git a/rsconcept/frontend/src/dialogs/DlgEditVersions/TableVersions.tsx b/rsconcept/frontend/src/dialogs/DlgEditVersions/TableVersions.tsx
index df96f4dc..1d2d5cbc 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditVersions/TableVersions.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditVersions/TableVersions.tsx
@@ -6,8 +6,8 @@ import { useIntl } from 'react-intl';
 import { IconRemove } from '@/components/Icons';
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { IVersionInfo, VersionID } from '@/models/library';
+import { APP_COLORS } from '@/styling/color';
 
 interface TableVersionsProps {
   processing: boolean;
@@ -21,8 +21,6 @@ const columnHelper = createColumnHelper<IVersionInfo>();
 
 function TableVersions({ processing, items, onDelete, selected, onSelect }: TableVersionsProps) {
   const intl = useIntl();
-  const { colors } = useConceptOptions();
-
   const columns = [
     columnHelper.accessor('version', {
       id: 'version',
@@ -74,7 +72,7 @@ function TableVersions({ processing, items, onDelete, selected, onSelect }: Tabl
     {
       when: (version: IVersionInfo) => version.id === selected,
       style: {
-        backgroundColor: colors.bgSelected
+        backgroundColor: APP_COLORS.bgSelected
       }
     }
   ];
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
index 7fa7f41a..e627f866 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
@@ -5,7 +5,6 @@ import { ReactFlowProvider } from 'reactflow';
 
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import Overlay from '@/components/ui/Overlay';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
 import { SyntaxTree } from '@/models/rslang';
 
@@ -17,7 +16,6 @@ interface DlgShowASTProps extends Pick<ModalProps, 'hideWindow'> {
 }
 
 function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
-  const { colors } = useConceptOptions();
   const [hoverID, setHoverID] = useState<number | undefined>(undefined);
   const hoverNode = syntaxTree.find(node => node.uid === hoverID);
 
@@ -32,8 +30,7 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
     >
       <Overlay
         position='top-2 right-1/2 translate-x-1/2'
-        className='px-2 py-1 rounded-2xl cc-blur max-w-[60ch] text-lg text-center'
-        style={{ backgroundColor: colors.bgBlur }}
+        className='px-2 py-1 rounded-2xl cc-blur bg-app-100 max-w-[60ch] text-lg text-center'
       >
         {!hoverNode || isDragging ? expression : null}
         {!isDragging && hoverNode ? (
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST/graph/ASTNode.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST/graph/ASTNode.tsx
index 141fd065..a5fcb880 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST/graph/ASTNode.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST/graph/ASTNode.tsx
@@ -2,9 +2,8 @@
 
 import { Handle, Position } from 'reactflow';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ISyntaxTreeNode } from '@/models/rslang';
-import { colorBgSyntaxTree } from '@/styling/color';
+import { APP_COLORS, colorBgSyntaxTree } from '@/styling/color';
 import { labelSyntaxTree } from '@/utils/labels';
 
 const FONT_SIZE_MAX = 14;
@@ -25,7 +24,6 @@ interface ASTNodeInternal {
 }
 
 function ASTNode(node: ASTNodeInternal) {
-  const { colors } = useConceptOptions();
   const label = labelSyntaxTree(node.data);
 
   return (
@@ -33,7 +31,7 @@ function ASTNode(node: ASTNodeInternal) {
       <Handle type='target' position={Position.Top} style={{ opacity: 0 }} />
       <div
         className='w-full h-full cursor-default flex items-center justify-center rounded-full'
-        style={{ backgroundColor: colorBgSyntaxTree(node.data, colors) }}
+        style={{ backgroundColor: colorBgSyntaxTree(node.data) }}
       />
       <Handle type='source' position={Position.Bottom} style={{ opacity: 0 }} />
       <div
@@ -45,7 +43,7 @@ function ASTNode(node: ASTNodeInternal) {
           aria-hidden='true'
           style={{
             WebkitTextStrokeWidth: 2,
-            WebkitTextStrokeColor: colors.bgDefault
+            WebkitTextStrokeColor: APP_COLORS.bgDefault
           }}
         >
           {label}
diff --git a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx
index c93395c2..7f236d0c 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx
@@ -1,17 +1,16 @@
 import { SimpleBezierEdge } from 'reactflow';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { MGraphEdgeInternal } from '@/models/miscellaneous';
+import { APP_COLORS } from '@/styling/color';
 
 function CartesianEdge({ data, ...restProps }: MGraphEdgeInternal) {
-  const { colors } = useConceptOptions();
   return (
     <>
       <SimpleBezierEdge
         {...restProps}
         label={data?.indices.join(', ')}
-        labelBgStyle={{ fill: colors.bgDefault }}
-        labelStyle={{ fill: colors.fgDefault }}
+        labelBgStyle={{ fill: APP_COLORS.bgDefault }}
+        labelStyle={{ fill: APP_COLORS.fgDefault }}
       />
     </>
   );
diff --git a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx
index 3b76025d..0369f16c 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx
@@ -2,9 +2,8 @@
 
 import { Handle, Position } from 'reactflow';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { TMGraphNode } from '@/models/TMGraph';
-import { colorBgTMGraphNode } from '@/styling/color';
+import { APP_COLORS, colorBgTMGraphNode } from '@/styling/color';
 import { globals } from '@/utils/constants';
 
 /**
@@ -19,8 +18,6 @@ interface MGraphNodeInternal {
 }
 
 function MGraphNode(node: MGraphNodeInternal) {
-  const { colors } = useConceptOptions();
-
   const tooltipText =
     (node.data.annotations.length === 0 ? '' : `Конституенты: ${node.data.annotations.join(' ')}<br/>`) +
     node.data.text;
@@ -33,10 +30,10 @@ function MGraphNode(node: MGraphNodeInternal) {
         data-tooltip-id={globals.tooltip}
         data-tooltip-html={tooltipText}
         style={{
-          backgroundColor: colorBgTMGraphNode(node.data, colors),
+          backgroundColor: colorBgTMGraphNode(node.data),
           fontWeight: 600,
           WebkitTextStrokeWidth: '0.6px',
-          WebkitTextStrokeColor: colors.bgDefault
+          WebkitTextStrokeColor: APP_COLORS.bgDefault
         }}
       >
         {node.data.rank === 0 ? node.data.text : node.data.annotations.length > 0 ? node.data.annotations.length : ''}
diff --git a/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx b/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx
index 4f0612ad..2227b3b7 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx
@@ -18,6 +18,7 @@ import { useUsers } from '@/context/UsersContext';
 import useLocalStorage from '@/hooks/useLocalStorage';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ILibraryItem, LibraryItemType } from '@/models/library';
+import { APP_COLORS } from '@/styling/color';
 import { storage } from '@/utils/constants';
 
 interface TableLibraryItemsProps {
@@ -33,10 +34,14 @@ function TableLibraryItems({ items, resetQuery, folderMode, toggleFolderMode }:
   const router = useConceptNavigation();
   const intl = useIntl();
   const { getUserLabel } = useUsers();
-  const { calculateHeight, colors } = useConceptOptions();
+  const { calculateHeight } = useConceptOptions();
   const [itemsPerPage, setItemsPerPage] = useLocalStorage<number>(storage.libraryPagination, 50);
 
   function handleOpenItem(item: ILibraryItem, event: CProps.EventMouse) {
+    const selection = window.getSelection();
+    if (!!selection && selection.toString().length > 0) {
+      return;
+    }
     if (item.item_type === LibraryItemType.RSFORM) {
       router.push(urls.schema(item.id), event.ctrlKey || event.metaKey);
     } else if (item.item_type === LibraryItemType.OSS) {
@@ -141,7 +146,7 @@ function TableLibraryItems({ items, resetQuery, folderMode, toggleFolderMode }:
     {
       when: (item: ILibraryItem) => item.item_type === LibraryItemType.OSS,
       style: {
-        color: colors.fgGreen
+        color: APP_COLORS.fgGreen
       }
     }
   ];
diff --git a/rsconcept/frontend/src/pages/LoginPage.tsx b/rsconcept/frontend/src/pages/LoginPage.tsx
index 223959d3..ffff58cb 100644
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@@ -96,7 +96,7 @@ export default LoginPage;
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
     return (
-      <div className='text-sm select-text clr-text-red'>
+      <div className='text-sm select-text text-warn-600'>
         На Портале отсутствует такое сочетание имени пользователя и пароля
       </div>
     );
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpFormulaTree.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpFormulaTree.tsx
index 575aa488..55c593e8 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpFormulaTree.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpFormulaTree.tsx
@@ -1,7 +1,6 @@
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
+import { APP_COLORS } from '@/styling/color';
 
 function HelpFormulaTree() {
-  const { colors } = useConceptOptions();
   return (
     <div>
       <h1>Дерево разбора выражения</h1>
@@ -13,22 +12,22 @@ function HelpFormulaTree() {
 
       <h2>Виды узлов</h2>
       <li>
-        <span style={{ backgroundColor: colors.bgGreen }}>объявление идентификатора</span>
+        <span style={{ backgroundColor: APP_COLORS.bgGreen }}>объявление идентификатора</span>
       </li>
       <li>
-        <span style={{ backgroundColor: colors.bgTeal }}>глобальный идентификатор</span>
+        <span style={{ backgroundColor: APP_COLORS.bgTeal }}>глобальный идентификатор</span>
       </li>
       <li>
-        <span style={{ backgroundColor: colors.bgOrange }}>логическое выражение</span>
+        <span style={{ backgroundColor: APP_COLORS.bgOrange }}>логическое выражение</span>
       </li>
       <li>
-        <span style={{ backgroundColor: colors.bgBlue }}>типизированное выражение</span>
+        <span style={{ backgroundColor: APP_COLORS.bgBlue }}>типизированное выражение</span>
       </li>
       <li>
-        <span style={{ backgroundColor: colors.bgRed }}>присвоение и итерация</span>
+        <span style={{ backgroundColor: APP_COLORS.bgRed }}>присвоение и итерация</span>
       </li>
       <li>
-        <span style={{ backgroundColor: colors.bgDisabled }}>составные выражения</span>
+        <span style={{ backgroundColor: APP_COLORS.bgDisabled }}>составные выражения</span>
       </li>
     </div>
   );
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpLibrary.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpLibrary.tsx
index 4e324567..9e9caee9 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpLibrary.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpLibrary.tsx
@@ -17,11 +17,10 @@ import {
   IconUserSearch
 } from '@/components/Icons';
 import LinkTopic from '@/components/ui/LinkTopic';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
+import { APP_COLORS } from '@/styling/color';
 
 function HelpLibrary() {
-  const { colors } = useConceptOptions();
   return (
     <div>
       <h1>Библиотека схем</h1>
@@ -33,7 +32,7 @@ function HelpLibrary() {
       </p>
 
       <li>
-        <span style={{ color: colors.fgGreen }}>зеленым текстом</span> выделены ОСС
+        <span style={{ color: APP_COLORS.fgGreen }}>зеленым текстом</span> выделены ОСС
       </li>
       <li>клик по строке - переход к редактированию схемы</li>
       <li>Ctrl + клик по строке откроет схему в новой вкладке</li>
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSEditor.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSEditor.tsx
index 992fcd3d..84d80f04 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSEditor.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSEditor.tsx
@@ -19,11 +19,10 @@ import {
   IconTypeGraph
 } from '@/components/Icons';
 import LinkTopic from '@/components/ui/LinkTopic';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
+import { APP_COLORS } from '@/styling/color';
 
 function HelpRSEditor() {
-  const { colors } = useConceptOptions();
   return (
     <div className='dense'>
       <h1>Редактор конституенты</h1>
@@ -69,15 +68,15 @@ function HelpRSEditor() {
             <IconChild className='inline-icon' /> отображение наследованных
           </li>
           <li>
-            <span style={{ backgroundColor: colors.bgSelected }}>текущая конституента</span>
+            <span style={{ backgroundColor: APP_COLORS.bgSelected }}>текущая конституента</span>
           </li>
           <li>
-            <span style={{ backgroundColor: colors.bgGreen50 }}>
+            <span style={{ backgroundColor: APP_COLORS.bgGreen50 }}>
               <LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> текущей
             </span>
           </li>
           <li>
-            <span style={{ backgroundColor: colors.bgOrange50 }}>
+            <span style={{ backgroundColor: APP_COLORS.bgOrange50 }}>
               <LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> текущей
             </span>
           </li>
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx
index 3c3755d6..d223cbc8 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx
@@ -21,11 +21,10 @@ import {
 } from '@/components/Icons';
 import Divider from '@/components/ui/Divider';
 import LinkTopic from '@/components/ui/LinkTopic';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
+import { APP_COLORS } from '@/styling/color';
 
 function HelpRSGraphTerm() {
-  const { colors } = useConceptOptions();
   return (
     <div className='flex flex-col'>
       <h1>Граф термов</h1>
@@ -50,7 +49,7 @@ function HelpRSGraphTerm() {
           <h1>Изменение узлов</h1>
           <li>Клик на конституенту – выделение</li>
           <li>
-            Alt + клик – выбор <span style={{ color: colors.fgPurple }}>фокус-конституенты</span>
+            Alt + клик – выбор <span style={{ color: APP_COLORS.fgPurple }}>фокус-конституенты</span>
           </li>
           <li>
             <IconReset className='inline-icon' /> Esc – сбросить выделение
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpTypeGraph.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpTypeGraph.tsx
index 6525d482..9896c620 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpTypeGraph.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpTypeGraph.tsx
@@ -1,9 +1,8 @@
 import LinkTopic from '@/components/ui/LinkTopic';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
+import { APP_COLORS } from '@/styling/color';
 
 function HelpTypeGraph() {
-  const { colors } = useConceptOptions();
   return (
     <div>
       <h1>Граф ступеней</h1>
@@ -21,13 +20,13 @@ function HelpTypeGraph() {
 
       <h2>Виды узлов</h2>
       <li>
-        <span style={{ backgroundColor: colors.bgControls }}>ступень-основание</span>
+        <span style={{ backgroundColor: APP_COLORS.bgControls }}>ступень-основание</span>
       </li>
       <li>
-        <span style={{ backgroundColor: colors.bgTeal }}>ступень-булеан</span>
+        <span style={{ backgroundColor: APP_COLORS.bgTeal }}>ступень-булеан</span>
       </li>
       <li>
-        <span style={{ backgroundColor: colors.bgOrange }}>ступень декартова произведения</span>
+        <span style={{ backgroundColor: APP_COLORS.bgOrange }}>ступень декартова произведения</span>
       </li>
     </div>
   );
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
index d0f92321..bb229a72 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
@@ -23,6 +23,7 @@ import { useOSS } from '@/context/OssContext';
 import useLocalStorage from '@/hooks/useLocalStorage';
 import { OssNode } from '@/models/miscellaneous';
 import { OperationID } from '@/models/oss';
+import { APP_COLORS } from '@/styling/color';
 import { PARAMETER, storage } from '@/utils/constants';
 import { errors } from '@/utils/labels';
 
@@ -40,7 +41,7 @@ interface OssFlowProps {
 }
 
 function OssFlow({ isModified, setIsModified }: OssFlowProps) {
-  const { mainHeight, colors } = useConceptOptions();
+  const { mainHeight } = useConceptOptions();
   const model = useOSS();
   const controller = useOssEdit();
   const flow = useReactFlow();
@@ -192,7 +193,7 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
     const nodesBounds = getNodesBounds(nodes);
     const viewport = getViewportForBounds(nodesBounds, imageWidth, imageHeight, ZOOM_MIN, ZOOM_MAX);
     toPng(canvas, {
-      backgroundColor: colors.bgDefault,
+      backgroundColor: APP_COLORS.bgDefault,
       width: imageWidth,
       height: imageHeight,
       style: {
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
index 1bc98369..fbfedb0a 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
@@ -28,7 +28,7 @@ function NodeCore({ node }: NodeCoreProps) {
         <Indicator
           noPadding
           title={hasFile ? 'Связанная КС' : 'Нет связанной КС'}
-          icon={<IconRSForm className={hasFile ? 'clr-text-green' : 'clr-text-red'} size='12px' />}
+          icon={<IconRSForm className={hasFile ? 'text-ok-600' : 'text-warn-600'} size='12px' />}
           hideTitle={!controller.showTooltip}
         />
         {node.data.operation.is_consolidation ? (
diff --git a/rsconcept/frontend/src/pages/PasswordChangePage.tsx b/rsconcept/frontend/src/pages/PasswordChangePage.tsx
index 0e6ee157..070de72b 100644
--- a/rsconcept/frontend/src/pages/PasswordChangePage.tsx
+++ b/rsconcept/frontend/src/pages/PasswordChangePage.tsx
@@ -25,7 +25,7 @@ function PasswordChangePage() {
   const [newPasswordRepeat, setNewPasswordRepeat] = useState('');
 
   const passwordColor =
-    !!newPassword && !!newPasswordRepeat && newPassword !== newPasswordRepeat ? 'clr-warning' : 'clr-input';
+    !!newPassword && !!newPasswordRepeat && newPassword !== newPasswordRepeat ? 'bg-warn-100' : 'clr-input';
 
   const canSubmit = !!newPassword && !!newPasswordRepeat && newPassword === newPasswordRepeat;
 
@@ -102,7 +102,7 @@ export default PasswordChangePage;
 // ====== Internals =========
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 404) {
-    return <div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данная ссылка не действительна</div>;
+    return <div className='mx-auto mt-6 text-sm select-text text-warn-600'>Данная ссылка не действительна</div>;
   } else {
     return <InfoError error={error} />;
   }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index 9bc28de8..c6755331 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -186,7 +186,7 @@ function FormConstituenta({
             readOnly
             label='Типизация'
             value={typification}
-            colors='clr-app clr-text-default cursor-default'
+            colors='bg-transparent clr-text-default cursor-default'
           />
         ) : null}
         {state ? (
@@ -252,7 +252,7 @@ function FormConstituenta({
                 id='cst_disable_comment'
                 type='button'
                 tabIndex={-1}
-                className='self-start cc-label clr-text-url hover:underline'
+                className='self-start cc-label text-prim-100 hover:underline'
                 onClick={() => setForceComment(true)}
               >
                 Добавить комментарий
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
index acf43e09..e132d4b2 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ParsingResult.tsx
@@ -33,7 +33,7 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
           <p
             tabIndex={-1}
             key={`error-${index}`}
-            className={`clr-text-red break-all ${disabled ? '' : 'cursor-pointer'}`}
+            className={`text-warn-600 break-all ${disabled ? '' : 'cursor-pointer'}`}
             onClick={disabled ? undefined : () => onShowError(error)}
           >
             <span className='mr-1 font-semibold underline'>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
index 3ce0ffaa..666a6a40 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
@@ -4,12 +4,11 @@ import clsx from 'clsx';
 
 import { StatusIcon } from '@/components/DomainIcons';
 import Loader from '@/components/ui/Loader';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ExpressionStatus } from '@/models/rsform';
 import { type IConstituenta } from '@/models/rsform';
 import { inferStatus } from '@/models/rsformAPI';
 import { IExpressionParse, ParsingStatus } from '@/models/rslang';
-import { colorStatusBar } from '@/styling/color';
+import { APP_COLORS, colorStatusBar } from '@/styling/color';
 import { globals } from '@/utils/constants';
 import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
 
@@ -22,7 +21,6 @@ interface StatusBarProps {
 }
 
 function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }: StatusBarProps) {
-  const { colors } = useConceptOptions();
   const status = (() => {
     if (isModified) {
       return ExpressionStatus.UNKNOWN;
@@ -46,7 +44,7 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
         'focus-frame',
         'transition-colors duration-500'
       )}
-      style={{ backgroundColor: processing ? colors.bgDefault : colorStatusBar(status, colors) }}
+      style={{ backgroundColor: processing ? APP_COLORS.bgDefault : colorStatusBar(status) }}
       data-tooltip-id={globals.tooltip}
       data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
       onClick={onAnalyze}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
index 849d7b90..ee371e55 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
@@ -130,7 +130,7 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
         <ValueIcon
           dense
           disabled
-          icon={<IconDateUpdate size='1.25rem' className='clr-text-green' />}
+          icon={<IconDateUpdate size='1.25rem' className='text-ok-600' />}
           value={new Date(item.time_update).toLocaleString(intl.locale)}
           title='Дата обновления'
         />
@@ -138,7 +138,7 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
         <ValueIcon
           dense
           disabled
-          icon={<IconDateCreate size='1.25rem' className='clr-text-green' />}
+          icon={<IconDateCreate size='1.25rem' className='text-ok-600' />}
           value={new Date(item.time_create).toLocaleString(intl.locale, {
             year: '2-digit',
             month: '2-digit',
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
index df48b449..c207f327 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
@@ -55,7 +55,7 @@ function RSFormStats({ stats, isArchive }: RSFormStatsProps) {
       <ValueStats
         className='col-start-1'
         id='count_ok'
-        icon={<IconStatusOK size='1.25rem' className='clr-text-green' />}
+        icon={<IconStatusOK size='1.25rem' className='text-ok-600' />}
         value={stats.count_all - stats.count_errors - stats.count_property - stats.count_incalculable}
         title='Корректные'
       />
@@ -67,13 +67,13 @@ function RSFormStats({ stats, isArchive }: RSFormStatsProps) {
       />
       <ValueStats
         id='count_incalculable'
-        icon={<IconStatusIncalculable size='1.25rem' className='clr-text-red' />}
+        icon={<IconStatusIncalculable size='1.25rem' className='text-warn-600' />}
         value={stats.count_incalculable}
         title='Невычислимые'
       />
       <ValueStats
         id='count_errors'
-        icon={<IconStatusError size='1.25rem' className='clr-text-red' />}
+        icon={<IconStatusError size='1.25rem' className='text-warn-600' />}
         value={stats.count_errors}
         title='Некорректные'
       />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx
index 7d31c110..7f700ca0 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx
@@ -46,7 +46,7 @@ function ToolbarItemAccess({ visible, toggleVisible, readOnly, toggleReadOnly, c
             readOnly ? (
               <IconImmutable size='1.25rem' className='clr-text-primary' />
             ) : (
-              <IconMutable size='1.25rem' className='clr-text-green' />
+              <IconMutable size='1.25rem' className='text-ok-600' />
             )
           }
           onClick={toggleReadOnly}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx
index e90875be..761c0eaf 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/TableRSList.tsx
@@ -9,7 +9,6 @@ import DataTable, { createColumnHelper, RowSelectionState, VisibilityState } fro
 import NoData from '@/components/ui/NoData';
 import TextContent from '@/components/ui/TextContent';
 import TextURL from '@/components/ui/TextURL';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
 import { PARAMETER, prefixes } from '@/utils/constants';
@@ -46,7 +45,6 @@ function TableRSList({
   onEdit,
   onCreateNew
 }: TableRSListProps) {
-  const { colors } = useConceptOptions();
   const windowSize = useWindowSize();
 
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
@@ -78,7 +76,7 @@ function TableRSList({
       size: 65,
       minSize: 65,
       maxSize: 65,
-      cell: props => <BadgeConstituenta theme={colors} value={props.row.original} prefixID={prefixes.cst_list} />
+      cell: props => <BadgeConstituenta value={props.row.original} prefixID={prefixes.cst_list} />
     }),
     columnHelper.accessor(cst => labelCstTypification(cst), {
       id: 'type',
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx
index ee812e03..9a2ae762 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx
@@ -1,6 +1,5 @@
 import { IconHelp } from '@/components/Icons';
 import Tooltip from '@/components/ui/Tooltip';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useLibrary } from '@/context/LibraryContext';
 import { LibraryItemID } from '@/models/library';
 import { IRSForm } from '@/models/rsform';
@@ -12,7 +11,6 @@ interface SchemasGuideProps {
 }
 
 function SchemasGuide({ schema }: SchemasGuideProps) {
-  const { colors } = useConceptOptions();
   const library = useLibrary();
 
   const schemas = (() => {
@@ -51,7 +49,7 @@ function SchemasGuide({ schema }: SchemasGuideProps) {
         <div>
           <span
             className='min-w-[0.6rem] min-h-[0.6rem] border inline-block mr-1 rounded-full'
-            style={{ backgroundColor: colorBgSchemas(0, colors) }}
+            style={{ backgroundColor: colorBgSchemas(0) }}
           />
           Текущая схема
         </div>
@@ -59,7 +57,7 @@ function SchemasGuide({ schema }: SchemasGuideProps) {
           <div key={`${prefixes.schemas_list}${index}`}>
             <span
               className='min-w-[0.6rem] min-h-[0.6rem] border inline-block mr-1 rounded-full'
-              style={{ backgroundColor: colorBgSchemas(index + 1, colors) }}
+              style={{ backgroundColor: colorBgSchemas(index + 1) }}
             />
             {alias}
           </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
index 5eee6a65..8b488e84 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
@@ -30,7 +30,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import { GraphColoring, GraphFilterParams } from '@/models/miscellaneous';
 import { ConstituentaID, CstType, IConstituenta } from '@/models/rsform';
 import { isBasicConcept } from '@/models/rsformAPI';
-import { colorBgGraphNode } from '@/styling/color';
+import { APP_COLORS, colorBgGraphNode } from '@/styling/color';
 import { PARAMETER, storage } from '@/utils/constants';
 import { errors } from '@/utils/labels';
 
@@ -53,7 +53,7 @@ interface TGFlowProps {
 }
 
 function TGFlow({ onOpenEdit }: TGFlowProps) {
-  const { colors, mainHeight } = useConceptOptions();
+  const { mainHeight } = useConceptOptions();
   const controller = useRSEdit();
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges] = useEdgesState([]);
@@ -137,7 +137,7 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
           selected: controller.selected.includes(node.id),
           position: { x: 0, y: 0 },
           data: {
-            fill: focusCst === cst ? colors.bgPurple : colorBgGraphNode(cst, coloring, colors),
+            fill: focusCst === cst ? APP_COLORS.bgPurple : colorBgGraphNode(cst, coloring),
             label: cst.alias,
             description: !filterParams.noText ? cst.term_resolved : ''
           }
@@ -179,13 +179,12 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
     filterParams.noText,
     controller.selected,
     focusCst,
-    coloring,
-    colors
+    coloring
   ]);
 
   useEffect(() => {
     setNeedReset(true);
-  }, [controller.schema, filterParams.noText, focusCst, coloring, colors, flow.viewportInitialized]);
+  }, [controller.schema, filterParams.noText, focusCst, coloring, flow.viewportInitialized]);
 
   useEffect(() => {
     if (!controller.schema || !needReset || !flow.viewportInitialized) {
@@ -240,7 +239,7 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
     const nodesBounds = getNodesBounds(nodes);
     const viewport = getViewportForBounds(nodesBounds, imageWidth, imageHeight, ZOOM_MIN, ZOOM_MAX);
     toPng(canvas, {
-      backgroundColor: colors.bgDefault,
+      backgroundColor: APP_COLORS.bgDefault,
       width: imageWidth,
       height: imageHeight,
       style: {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx
index ffd7642d..6a955cf7 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx
@@ -4,8 +4,8 @@ import { useCallback } from 'react';
 
 import { IconGraphInputs, IconGraphOutputs, IconReset } from '@/components/Icons';
 import MiniButton from '@/components/ui/MiniButton';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { IConstituenta } from '@/models/rsform';
+import { APP_COLORS } from '@/styling/color';
 
 import { useRSEdit } from '../RSEditContext';
 
@@ -27,7 +27,6 @@ function ToolbarFocusedCst({
   toggleShowInputs,
   toggleShowOutputs
 }: ToolbarFocusedCstProps) {
-  const { colors } = useConceptOptions();
   const controller = useRSEdit();
 
   const resetSelection = useCallback(() => {
@@ -37,7 +36,7 @@ function ToolbarFocusedCst({
 
   return (
     <div className='items-center cc-icons'>
-      <div className='w-[7.8rem] text-right select-none' style={{ color: colors.fgPurple }}>
+      <div className='w-[7.8rem] text-right select-none' style={{ color: APP_COLORS.fgPurple }}>
         Фокус
         <b className='px-1'> {center.alias} </b>
       </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
index af8d0cbd..fac90a0a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
@@ -12,7 +12,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import useWindowSize from '@/hooks/useWindowSize';
 import { GraphColoring } from '@/models/miscellaneous';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
-import { colorBgGraphNode } from '@/styling/color';
+import { APP_COLORS, colorBgGraphNode } from '@/styling/color';
 import { PARAMETER, prefixes, storage } from '@/utils/constants';
 
 interface ViewHiddenProps {
@@ -27,7 +27,7 @@ interface ViewHiddenProps {
 }
 
 function ViewHidden({ items, selected, toggleSelection, setFocus, schema, coloringScheme, onEdit }: ViewHiddenProps) {
-  const { colors, calculateHeight } = useConceptOptions();
+  const { calculateHeight } = useConceptOptions();
   const windowSize = useWindowSize();
   const localSelected = items.filter(id => selected.includes(id));
   const [isFolded, setIsFolded] = useLocalStorage(storage.rsgraphFoldHidden, false);
@@ -96,12 +96,12 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
                 id={id}
                 className='min-w-[3rem] rounded-md text-center select-none'
                 style={{
-                  backgroundColor: colorBgGraphNode(cst, adjustedColoring, colors),
+                  backgroundColor: colorBgGraphNode(cst, adjustedColoring),
                   ...(localSelected.includes(cstID)
                     ? {
                         outlineWidth: '2px',
                         outlineStyle: cst.is_inherited ? 'dashed' : 'solid',
-                        outlineColor: colors.fgDefault
+                        outlineColor: APP_COLORS.fgDefault
                       }
                     : {})
                 }}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
index 681b80ac..e025114c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
@@ -2,7 +2,7 @@
 
 import { Handle, Position } from 'reactflow';
 
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
+import { APP_COLORS } from '@/styling/color';
 import { truncateToLastWord } from '@/utils/utils';
 
 const MAX_DESCRIPTION_LENGTH = 65;
@@ -32,7 +32,6 @@ interface TGNodeInternal {
 }
 
 function TGNode(node: TGNodeInternal) {
-  const { colors } = useConceptOptions();
   const description = truncateToLastWord(node.data.description, MAX_DESCRIPTION_LENGTH);
 
   return (
@@ -41,7 +40,7 @@ function TGNode(node: TGNodeInternal) {
       <div
         className='w-full h-full cursor-default flex items-center justify-center rounded-full'
         style={{
-          backgroundColor: !node.selected ? node.data.fill : colors.bgActiveSelection,
+          backgroundColor: !node.selected ? node.data.fill : APP_COLORS.bgActiveSelection,
           fontSize: node.data.label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX
         }}
       >
@@ -49,7 +48,7 @@ function TGNode(node: TGNodeInternal) {
           style={{
             fontWeight: 600,
             WebkitTextStrokeWidth: '0.6px',
-            WebkitTextStrokeColor: colors.bgDefault
+            WebkitTextStrokeColor: APP_COLORS.bgDefault
           }}
         >
           {node.data.label}
@@ -68,7 +67,7 @@ function TGNode(node: TGNodeInternal) {
             aria-hidden='true'
             style={{
               WebkitTextStrokeWidth: '3px',
-              WebkitTextStrokeColor: colors.bgDefault
+              WebkitTextStrokeColor: APP_COLORS.bgDefault
             }}
           >
             {description}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
index a1472159..c9b5ff6a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
@@ -6,8 +6,8 @@ import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/ui/DataTable';
 import NoData from '@/components/ui/NoData';
 import TextContent from '@/components/ui/TextContent';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
+import { APP_COLORS } from '@/styling/color';
 import { PARAMETER, prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';
 
@@ -30,8 +30,6 @@ function TableSideConstituents({
   onOpenEdit,
   maxHeight
 }: TableSideConstituentsProps) {
-  const { colors } = useConceptOptions();
-
   useEffect(() => {
     if (!activeCst) {
       return;
@@ -58,12 +56,7 @@ function TableSideConstituents({
       minSize: 65,
       footer: undefined,
       cell: props => (
-        <BadgeConstituenta
-          className='mr-[-0.5rem]'
-          theme={colors}
-          value={props.row.original}
-          prefixID={prefixes.cst_side_table}
-        />
+        <BadgeConstituenta className='mr-[-0.5rem]' value={props.row.original} prefixID={prefixes.cst_side_table} />
       )
     }),
     columnHelper.accessor(cst => describeConstituenta(cst), {
@@ -90,19 +83,19 @@ function TableSideConstituents({
     {
       when: (cst: IConstituenta) => !!activeCst && cst.id === activeCst?.id,
       style: {
-        backgroundColor: colors.bgSelected
+        backgroundColor: APP_COLORS.bgSelected
       }
     },
     {
       when: (cst: IConstituenta) => !!activeCst && cst.spawner === activeCst?.id && cst.id !== activeCst?.id,
       style: {
-        backgroundColor: colors.bgOrange50
+        backgroundColor: APP_COLORS.bgOrange50
       }
     },
     {
       when: (cst: IConstituenta) => activeCst?.id !== undefined && cst.spawn.includes(activeCst.id),
       style: {
-        backgroundColor: colors.bgGreen50
+        backgroundColor: APP_COLORS.bgGreen50
       }
     }
   ];
diff --git a/rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx b/rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx
index 58614037..3948bd9c 100644
--- a/rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx
@@ -175,16 +175,16 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
     if ('email' in error.response.data) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.email}.</div>
+        <div className='mx-auto text-sm select-text text-warn-600'>{error.response.data.email}.</div>
       );
     } else if ('username' in error.response.data) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.username}.</div>
+        <div className='mx-auto text-sm select-text text-warn-600'>{error.response.data.username}.</div>
       );
     } else {
       return (
-        <div className='mx-auto text-sm select-text clr-text-red'>
+        <div className='mx-auto text-sm select-text text-warn-600'>
           <PrettyJson data={error.response} />
         </div>
       );
diff --git a/rsconcept/frontend/src/pages/RestorePasswordPage.tsx b/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
index fa1f4042..67a3735f 100644
--- a/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
+++ b/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
@@ -70,7 +70,7 @@ export default RestorePasswordPage;
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
     return (
-      <div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данный email не используется на Портале.</div>
+      <div className='mx-auto mt-6 text-sm select-text text-warn-600'>Данный email не используется на Портале.</div>
     );
   } else {
     return <InfoError error={error} />;
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
index 56649d22..fd6960f4 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
@@ -24,7 +24,7 @@ function EditorPassword() {
   const [newPasswordRepeat, setNewPasswordRepeat] = useState('');
 
   const passwordColor =
-    !!newPassword && !!newPasswordRepeat && newPassword !== newPasswordRepeat ? 'clr-warning' : 'clr-input';
+    !!newPassword && !!newPasswordRepeat && newPassword !== newPasswordRepeat ? 'bg-warn-100' : 'clr-input';
 
   const canSubmit = !!oldPassword && !!newPassword && !!newPasswordRepeat && newPassword === newPasswordRepeat;
 
@@ -99,7 +99,7 @@ export default EditorPassword;
 // ====== Internals =========
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
-    return <div className='text-sm select-text clr-text-red'>Неверно введен старый пароль</div>;
+    return <div className='text-sm select-text text-warn-600'>Неверно введен старый пароль</div>;
   } else {
     return <InfoError error={error} />;
   }
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
index c7bd4286..3ff1f69c 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
@@ -98,7 +98,7 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
     if ('email' in error.response.data) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='text-sm select-text clr-text-red'>{error.response.data.email}.</div>
+        <div className='text-sm select-text text-warn-600'>{error.response.data.email}.</div>
       );
     }
   }
diff --git a/rsconcept/frontend/src/styling/color.ts b/rsconcept/frontend/src/styling/color.ts
index 6c54749c..1198ca71 100644
--- a/rsconcept/frontend/src/styling/color.ts
+++ b/rsconcept/frontend/src/styling/color.ts
@@ -9,221 +9,93 @@ import { ISyntaxTreeNode, TokenID } from '@/models/rslang';
 import { TMGraphNode } from '@/models/TMGraph';
 import { PARAMETER } from '@/utils/constants';
 
-/**
- * Represents application color theme configuration.
- */
-export interface IColorTheme {
-  bgDefault: string;
-  bgBlur: string;
-  bgInput: string;
-  bgControls: string;
-  bgDisabled: string;
-  bgPrimary: string;
-  bgSelected: string;
-  bgActiveSelection: string;
-  bgHover: string;
-  bgWarning: string;
+/** Semantic colors for application. */
+// prettier-ignore
+export const APP_COLORS = {
+  bgDefault:          'var(--clr-app-100)',
+  bgInput:            'var(--clr-app-0)', 
+  bgControls:         'var(--clr-app-200)',
+  bgDisabled:         'var(--clr-app-300)',
+  bgPrimary:          'var(--clr-prim-200)',
+  bgSelected:         'var(--clr-prim-600)',
+  bgActiveSelection:  'var(--clr-select-node)',
+  bgHover:            'var(--clr-prim-800)',
+  bgWarning:          'var(--clr-warn-100)',
+  
+  border:             'var(--clr-app-400)',
 
-  border: string;
+  fgDefault:          'var(--clr-app-999)',
+  fgSelected:         'var(--clr-app-999)', 
+  fgDisabled:         'var(--clr-app-800)',
+  fgWarning:          'var(--clr-warn-600)',
 
-  fgDefault: string;
-  fgSelected: string;
-  fgDisabled: string;
-  fgWarning: string;
+  bgRed:              'var(--acc-bg-red)',
+  bgGreen:            'var(--acc-bg-green)',
+  bgBlue:             'var(--acc-bg-blue)',
+  bgPurple:           'var(--acc-bg-purple)',
+  bgTeal:             'var(--acc-bg-teal)',
+  bgOrange:           'var(--acc-bg-orange)',
 
-  // Highlight syntax accents
-  bgRed: string;
-  bgGreen: string;
-  bgBlue: string;
-  bgPurple: string;
-  bgTeal: string;
-  bgOrange: string;
+  bgGreen25:          'var(--acc-bg-green25)',
+  bgGreen50:          'var(--acc-bg-green50)',
+  bgOrange50:         'var(--acc-bg-orange50)',
 
-  bgGreen25: string;
-  bgGreen50: string;
-  bgOrange50: string;
-
-  fgRed: string;
-  fgGreen: string;
-  fgBlue: string;
-  fgPurple: string;
-  fgTeal: string;
-  fgOrange: string;
+  fgRed:              'var(--acc-fg-red)',
+  fgGreen:            'var(--acc-fg-green)',
+  fgBlue:             'var(--acc-fg-blue)',
+  fgPurple:           'var(--acc-fg-purple)',
+  fgTeal:             'var(--acc-fg-teal)',
+  fgOrange:           'var(--acc-fg-orange)'
 }
 
 /**
- * Represents application Light theme.
+ * Represents Select component theme.
  */
-// prettier-ignore
-export const lightT: IColorTheme = {
-  bgDefault:  'hsl(000, 000%, 098%)', //var(--cl-bg-100)',
-  bgBlur:     'hsla(000, 000%, 098%, 0.8)',
-  bgInput:    'var(--cl-bg-120)',
-  bgControls: 'var(--cl-bg-80)',
-  bgDisabled: 'var(--cl-bg-60)',
-  bgPrimary:  'var(--cl-prim-bg-100)',
-  bgSelected: 'var(--cl-prim-bg-80)',
-  bgActiveSelection: 'var(--cl-teal-bg-100)',
-  bgHover:    'var(--cl-prim-bg-60)',
-  bgWarning:  'var(--cl-red-bg-100)',
-  
-  border:     'var(--cl-bg-40)',
+export const SELECT_THEME = {
+  primary: APP_COLORS.bgPrimary,
+  primary75: APP_COLORS.bgSelected,
+  primary50: APP_COLORS.bgHover,
+  primary25: APP_COLORS.bgHover,
 
-  fgDefault:  'var(--cl-fg-100)',
-  fgSelected: 'var(--cl-fg-100)',
-  fgDisabled: 'var(--cl-fg-80)',
-  fgWarning:  'var(--cl-red-fg-100)',
+  danger: APP_COLORS.fgWarning,
+  dangerLight: APP_COLORS.bgWarning,
 
-  // Highlight syntax accents
-  bgRed:      'hsl(000, 100%, 089%)',
-  bgGreen:    'hsl(100, 100%, 075%)',
-  bgBlue:     'hsl(235, 080%, 087%)',
-  bgPurple:   'hsl(274, 089%, 081%)',
-  bgTeal:     'hsl(192, 089%, 081%)',
-  bgOrange:   'hsl(028, 100%, 075%)',
-
-  bgGreen25:  'hsl(100, 100%, 096%)',
-  bgGreen50:  'hsl(100, 100%, 090%)',
-  bgOrange50: 'hsl(028, 100%, 090%)',
-
-  fgRed:      'hsl(000, 090%, 045%)',
-  fgGreen:    'hsl(100, 090%, 035%)',
-  fgBlue:     'hsl(235, 100%, 050%)',
-  fgPurple:   'hsl(270, 100%, 055%)',
-  fgTeal:     'hsl(200, 080%, 050%)',
-  fgOrange:   'hsl(030, 090%, 055%)'
+  neutral0: APP_COLORS.bgInput,
+  neutral5: APP_COLORS.bgDefault,
+  neutral10: APP_COLORS.border,
+  neutral20: APP_COLORS.border,
+  neutral30: APP_COLORS.border,
+  neutral40: APP_COLORS.fgDisabled,
+  neutral50: APP_COLORS.fgDisabled, // placeholder
+  neutral60: APP_COLORS.fgDefault,
+  neutral70: APP_COLORS.fgWarning,
+  neutral80: APP_COLORS.fgDefault,
+  neutral90: APP_COLORS.fgWarning
 };
 
 /**
- * Represents application Dark theme.
+ * Represents Brackets highlights theme.
  */
-// prettier-ignore
-export const darkT: IColorTheme = {
-  bgDefault:  'hsl(000, 000%, 005%)', //'var(--cd-bg-100)',
-  bgBlur:     'hsla(000, 000%, 005%, 0.3)',
-  bgInput:    'var(--cd-bg-120)',
-  bgControls: 'var(--cd-bg-80)',
-  bgDisabled: 'var(--cd-bg-60)',
-  bgPrimary:  'var(--cd-prim-bg-100)',
-  bgSelected: 'var(--cd-prim-bg-80)',
-  bgActiveSelection: 'var(--cd-teal-bg-100)',
-  bgHover:    'var(--cd-prim-bg-60)',
-  bgWarning:  'var(--cd-red-bg-100)',
-
-  border:     'var(--cd-bg-40)',
-
-  fgDefault:  'var(--cd-fg-100)',
-  fgSelected: 'var(--cd-fg-100)',
-  fgDisabled: 'var(--cd-fg-80)',
-  fgWarning:  'var(--cd-red-fg-100)',
-
-  // Highlight syntax accents
-  bgRed:      'hsl(000, 080%, 037%)',
-  bgGreen:    'hsl(100, 080%, 025%)',
-  bgBlue:     'hsl(235, 054%, 049%)',
-  bgPurple:   'hsl(270, 080%, 050%)',
-  bgTeal:     'hsl(192, 080%, 030%)',
-  bgOrange:   'hsl(035, 100%, 035%)',
-
-  bgGreen25:  'hsl(100, 080%, 009%)',
-  bgGreen50:  'hsl(100, 080%, 017%)',
-  bgOrange50: 'hsl(035, 100%, 016%)',
-
-  fgRed:      'hsl(000, 080%, 045%)',
-  fgGreen:    'hsl(100, 080%, 035%)',
-  fgBlue:     'hsl(235, 100%, 080%)',
-  fgPurple:   'hsl(270, 100%, 080%)',
-  fgTeal:     'hsl(192, 100%, 045%)',
-  fgOrange:   'hsl(035, 100%, 050%)'
-};
-
-/**
- * Represents Select component Light theme.
- */
-export const selectLightT = {
-  primary: lightT.bgPrimary,
-  primary75: lightT.bgSelected,
-  primary50: lightT.bgHover,
-  primary25: lightT.bgHover,
-
-  danger: lightT.fgWarning,
-  dangerLight: lightT.bgWarning,
-
-  neutral0: lightT.bgInput,
-  neutral5: lightT.bgDefault,
-  neutral10: lightT.border,
-  neutral20: lightT.border,
-  neutral30: lightT.border,
-  neutral40: lightT.fgDisabled,
-  neutral50: lightT.fgDisabled, // placeholder
-  neutral60: lightT.fgDefault,
-  neutral70: lightT.fgWarning,
-  neutral80: lightT.fgDefault,
-  neutral90: lightT.fgWarning
-};
-
-/**
- * Represents Select component Dark theme.
- */
-export const selectDarkT = {
-  primary: darkT.bgPrimary,
-  primary75: darkT.bgSelected,
-  primary50: darkT.bgHover,
-  primary25: darkT.bgHover,
-
-  danger: darkT.fgWarning,
-  dangerLight: darkT.bgWarning,
-
-  neutral0: darkT.bgInput,
-  neutral5: darkT.bgDefault,
-  neutral10: darkT.border,
-  neutral20: darkT.border,
-  neutral30: darkT.border,
-  neutral40: darkT.fgDisabled,
-  neutral50: darkT.fgDisabled, // placeholder
-  neutral60: darkT.fgDefault,
-  neutral70: darkT.fgWarning,
-  neutral80: darkT.fgDefault,
-  neutral90: darkT.fgWarning
-};
-
-/**
- * Represents Brackets highlights Light theme.
- */
-export const bracketsLightT = {
+export const BRACKETS_THEME = {
   '.cc-nonmatchingBracket': {
-    color: lightT.fgRed,
+    color: APP_COLORS.fgRed,
     fontWeight: 600
   },
   '&.cm-focused .cc-matchingBracket': {
-    backgroundColor: lightT.bgSelected,
-    color: lightT.fgSelected
-  }
-};
-
-/**
- * Represents Brackets highlights Dark theme.
- */
-export const bracketsDarkT = {
-  '.cc-nonmatchingBracket': {
-    color: darkT.fgRed,
-    fontWeight: 600
-  },
-  '&.cm-focused .cc-matchingBracket': {
-    backgroundColor: darkT.bgSelected,
-    color: darkT.fgSelected
+    backgroundColor: APP_COLORS.bgSelected,
+    color: APP_COLORS.fgSelected
   }
 };
 
 /**
  * Determines background color for {@link ISyntaxTreeNode} based on its type.
  */
-export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): string {
+export function colorBgSyntaxTree(node: ISyntaxTreeNode): string {
   switch (node.typeID) {
     case TokenID.PUNCTUATION_DEFINE:
     case TokenID.PUNCTUATION_STRUCT:
     case TokenID.ID_LOCAL:
-      return colors.bgGreen;
+      return APP_COLORS.bgGreen;
 
     case TokenID.ID_GLOBAL:
     case TokenID.ID_FUNCTION:
@@ -232,7 +104,7 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): s
     case TokenID.LIT_INTEGER:
     case TokenID.LIT_EMPTYSET:
     case TokenID.LIT_WHOLE_NUMBERS:
-      return colors.bgTeal;
+      return APP_COLORS.bgTeal;
 
     case TokenID.QUANTOR_UNIVERSAL:
     case TokenID.QUANTOR_EXISTS:
@@ -252,7 +124,7 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): s
     case TokenID.SUBSET_OR_EQ:
     case TokenID.SUBSET:
     case TokenID.NOT_SUBSET:
-      return colors.bgOrange;
+      return APP_COLORS.bgOrange;
 
     case TokenID.NT_TUPLE:
     case TokenID.NT_ENUMERATION:
@@ -272,7 +144,7 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): s
     case TokenID.CARD:
     case TokenID.BOOL:
     case TokenID.DEBOOL:
-      return colors.bgBlue;
+      return APP_COLORS.bgBlue;
 
     case TokenID.NT_FUNC_DEFINITION:
     case TokenID.NT_DECLARATIVE_EXPR:
@@ -284,17 +156,17 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): s
     case TokenID.NT_FUNC_CALL:
     case TokenID.NT_ARGUMENTS:
     case TokenID.NT_RECURSIVE_SHORT:
-      return colors.bgDisabled;
+      return APP_COLORS.bgDisabled;
 
     case TokenID.ASSIGN:
     case TokenID.ITERATE:
-      return colors.bgRed;
+      return APP_COLORS.bgRed;
   }
 
   switch (node.data.value) {
     case 'Expression':
     case 'Local':
-      return colors.bgGreen;
+      return APP_COLORS.bgGreen;
 
     case 'Global':
     case 'Radical':
@@ -304,7 +176,7 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): s
     case 'Integer':
     case 'EmptySet':
     case 'IntegerSet':
-      return colors.bgTeal;
+      return APP_COLORS.bgTeal;
 
     case 'Logic':
     case 'Logic_predicates':
@@ -331,7 +203,7 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): s
     case 'Function_decl':
     case 'Arguments':
     case 'Declaration':
-      return colors.bgBlue;
+      return APP_COLORS.bgBlue;
 
     case 'BigPr':
     case 'SmallPr':
@@ -342,138 +214,138 @@ export function colorBgSyntaxTree(node: ISyntaxTreeNode, colors: IColorTheme): s
     case 'PrefixD':
     case 'PrefixI':
     case 'PrefixR':
-      return colors.bgPurple;
+      return APP_COLORS.bgPurple;
 
     case PARAMETER.errorNodeLabel:
-      return colors.bgRed;
+      return APP_COLORS.bgRed;
   }
   // node
-  return colors.bgPurple;
+  return APP_COLORS.bgPurple;
 }
 
 /**
  * Determines background color for {@link ExpressionStatus}.
  */
-export function colorBgCstStatus(status: ExpressionStatus, colors: IColorTheme): string {
+export function colorBgCstStatus(status: ExpressionStatus): string {
   // prettier-ignore
   switch (status) {
-    case ExpressionStatus.VERIFIED: return colors.bgGreen;
-    case ExpressionStatus.INCORRECT: return colors.bgRed;
-    case ExpressionStatus.INCALCULABLE: return colors.bgOrange;
-    case ExpressionStatus.PROPERTY: return colors.bgTeal;
-    case ExpressionStatus.UNKNOWN: return colors.bgSelected;
-    case ExpressionStatus.UNDEFINED: return colors.bgBlue;
+    case ExpressionStatus.VERIFIED: return APP_COLORS.bgGreen;
+    case ExpressionStatus.INCORRECT: return APP_COLORS.bgRed;
+    case ExpressionStatus.INCALCULABLE: return APP_COLORS.bgOrange;
+    case ExpressionStatus.PROPERTY: return APP_COLORS.bgTeal;
+    case ExpressionStatus.UNKNOWN: return APP_COLORS.bgSelected;
+    case ExpressionStatus.UNDEFINED: return APP_COLORS.bgBlue;
   }
 }
 
 /**
  * Determines statusbar color for {@link ExpressionStatus}.
  */
-export function colorStatusBar(status: ExpressionStatus, colors: IColorTheme): string {
+export function colorStatusBar(status: ExpressionStatus): string {
   // prettier-ignore
   switch (status) {
-    case ExpressionStatus.VERIFIED: return colors.bgGreen50;
-    case ExpressionStatus.INCORRECT: return colors.bgRed;
-    case ExpressionStatus.INCALCULABLE: return colors.bgOrange;
-    case ExpressionStatus.PROPERTY: return colors.bgTeal;
-    case ExpressionStatus.UNKNOWN: return colors.bgSelected;
-    case ExpressionStatus.UNDEFINED: return colors.bgBlue;
+    case ExpressionStatus.VERIFIED: return APP_COLORS.bgGreen50;
+    case ExpressionStatus.INCORRECT: return APP_COLORS.bgRed;
+    case ExpressionStatus.INCALCULABLE: return APP_COLORS.bgOrange;
+    case ExpressionStatus.PROPERTY: return APP_COLORS.bgTeal;
+    case ExpressionStatus.UNKNOWN: return APP_COLORS.bgSelected;
+    case ExpressionStatus.UNDEFINED: return APP_COLORS.bgBlue;
   }
 }
 
 /**
  * Determines foreground color for {@link ExpressionStatus}.
  */
-export function colorFgCstStatus(status: ExpressionStatus, colors: IColorTheme): string {
+export function colorFgCstStatus(status: ExpressionStatus): string {
   // prettier-ignore
   switch (status) {
-    case ExpressionStatus.VERIFIED: return colors.fgGreen;
-    case ExpressionStatus.INCORRECT: return colors.fgRed;
-    case ExpressionStatus.INCALCULABLE: return colors.fgOrange;
-    case ExpressionStatus.PROPERTY: return colors.fgTeal;
-    case ExpressionStatus.UNKNOWN: return colors.fgBlue;
-    case ExpressionStatus.UNDEFINED: return colors.fgBlue;
+    case ExpressionStatus.VERIFIED: return APP_COLORS.fgGreen;
+    case ExpressionStatus.INCORRECT: return APP_COLORS.fgRed;
+    case ExpressionStatus.INCALCULABLE: return APP_COLORS.fgOrange;
+    case ExpressionStatus.PROPERTY: return APP_COLORS.fgTeal;
+    case ExpressionStatus.UNKNOWN: return APP_COLORS.fgBlue;
+    case ExpressionStatus.UNDEFINED: return APP_COLORS.fgBlue;
   }
 }
 
 /**
  * Determines background color for {@link IConstituenta} depending on its {@link CstClass}.
  */
-export function colorBgCstClass(cstClass: CstClass, colors: IColorTheme): string {
+export function colorBgCstClass(cstClass: CstClass): string {
   // prettier-ignore
   switch (cstClass) {
-    case CstClass.BASIC: return colors.bgGreen;
-    case CstClass.DERIVED: return colors.bgBlue;
-    case CstClass.STATEMENT: return colors.bgRed;
-    case CstClass.TEMPLATE: return colors.bgTeal;
+    case CstClass.BASIC: return APP_COLORS.bgGreen;
+    case CstClass.DERIVED: return APP_COLORS.bgBlue;
+    case CstClass.STATEMENT: return APP_COLORS.bgRed;
+    case CstClass.TEMPLATE: return APP_COLORS.bgTeal;
   }
 }
 
 /**
  * Determines background color for {@link IConstituenta} depending on its parent schema index.
  */
-export function colorBgSchemas(schema_index: number, colors: IColorTheme): string {
+export function colorBgSchemas(schema_index: number): string {
   if (schema_index === 0) {
-    return colors.bgGreen;
+    return APP_COLORS.bgGreen;
   }
   // prettier-ignore
   switch (schema_index % 4) {
-    case 1: return colors.bgPurple;
-    case 2: return colors.bgOrange;
-    case 3: return colors.bgTeal;
-    case 0: return colors.bgBlue;
+    case 1: return APP_COLORS.bgPurple;
+    case 2: return APP_COLORS.bgOrange;
+    case 3: return APP_COLORS.bgTeal;
+    case 0: return APP_COLORS.bgBlue;
   }
-  return colors.bgBlue;
+  return APP_COLORS.bgBlue;
 }
 
 /**
  * Determines background color for {@link GramData}.
  */
-export function colorBgGrammeme(gram: GramData, colors: IColorTheme): string {
+export function colorBgGrammeme(gram: GramData): string {
   if (PartOfSpeech.includes(gram as Grammeme)) {
-    return colors.bgBlue;
+    return APP_COLORS.bgBlue;
   }
   if (NounGrams.includes(gram as Grammeme)) {
-    return colors.bgGreen;
+    return APP_COLORS.bgGreen;
   }
   if (VerbGrams.includes(gram as Grammeme)) {
-    return colors.bgTeal;
+    return APP_COLORS.bgTeal;
   }
-  return colors.bgInput;
+  return APP_COLORS.bgInput;
 }
 
 /**
  * Determines foreground color for {@link GramData}.
  */
-export function colorFgGrammeme(gram: GramData, colors: IColorTheme): string {
+export function colorFgGrammeme(gram: GramData): string {
   if (PartOfSpeech.includes(gram as Grammeme)) {
-    return colors.fgBlue;
+    return APP_COLORS.fgBlue;
   }
   if (NounGrams.includes(gram as Grammeme)) {
-    return colors.fgGreen;
+    return APP_COLORS.fgGreen;
   }
   if (VerbGrams.includes(gram as Grammeme)) {
-    return colors.fgTeal;
+    return APP_COLORS.fgTeal;
   }
   if (!Object.values(Grammeme).includes(gram as Grammeme)) {
-    return colors.fgRed;
+    return APP_COLORS.fgRed;
   } else {
-    return colors.fgPurple;
+    return APP_COLORS.fgPurple;
   }
 }
 
 /**
  * Determines graph color for {@link IConstituenta}.
  */
-export function colorBgGraphNode(cst: IConstituenta, coloringScheme: GraphColoring, colors: IColorTheme): string {
+export function colorBgGraphNode(cst: IConstituenta, coloringScheme: GraphColoring): string {
   if (coloringScheme === 'type') {
-    return colorBgCstClass(cst.cst_class, colors);
+    return colorBgCstClass(cst.cst_class);
   }
   if (coloringScheme === 'status') {
-    return colorBgCstStatus(cst.status, colors);
+    return colorBgCstStatus(cst.status);
   }
   if (coloringScheme === 'schemas') {
-    return colorBgSchemas(cst.parent_schema_index, colors);
+    return colorBgSchemas(cst.parent_schema_index);
   }
   return '';
 }
@@ -481,12 +353,12 @@ export function colorBgGraphNode(cst: IConstituenta, coloringScheme: GraphColori
 /**
  * Determines m-graph color for {@link TMGraphNode}.
  */
-export function colorBgTMGraphNode(node: TMGraphNode, colors: IColorTheme): string {
+export function colorBgTMGraphNode(node: TMGraphNode): string {
   if (node.rank === 0) {
-    return colors.bgControls;
+    return APP_COLORS.bgControls;
   }
   if (node.parents.length === 1) {
-    return colors.bgTeal;
+    return APP_COLORS.bgTeal;
   }
-  return colors.bgOrange;
+  return APP_COLORS.bgOrange;
 }
diff --git a/rsconcept/frontend/src/styling/constants.css b/rsconcept/frontend/src/styling/constants.css
index b37dc650..a195ab21 100644
--- a/rsconcept/frontend/src/styling/constants.css
+++ b/rsconcept/frontend/src/styling/constants.css
@@ -20,52 +20,98 @@
   --duration-modal: 300ms;
   --duration-fade: 300ms;
   --duration-select: 100ms;
-
-  /* Light Theme */
-  --cl-bg-120:      hsl(000, 000%, 100%);
-  --cl-bg-100:      hsl(000, 000%, 098%);
-  --cl-bg-80:       hsl(000, 000%, 094%);
-  --cl-bg-60:       hsl(000, 000%, 091%);
-  --cl-bg-40:       hsl(000, 000%, 080%);
-
-  --cl-fg-60:       hsl(000, 000%, 065%);
-  --cl-fg-80:       hsl(000, 000%, 047%);
-  --cl-fg-100:      hsl(000, 000%, 000%);
-
-  --cl-prim-bg-100: hsl(220, 100%, 060%);
-  --cl-prim-bg-80:  hsl(220, 080%, 092%);
-  --cl-prim-bg-60:  hsl(190, 080%, 094%);
-
-  --cl-prim-fg-80:  hsl(220, 100%, 050%);
-  --cl-prim-fg-100: hsl(000, 000%, 100%);
-
-  --cl-red-bg-100:  hsl(000, 100%, 095%);
-  --cl-red-fg-100:  hsl(000, 072%, 051%);
-  --cl-green-fg-100: hsl(120, 080%, 37%);
-
-  --cl-teal-bg-100: hsl(162, 082%, 051%);
-
-  /* Dark Theme */
-  --cd-bg-120:      hsl(000, 000%, 005%);
-  --cd-bg-100:      hsl(000, 000%, 009%);
-  --cd-bg-80:       hsl(000, 000%, 015%);
-  --cd-bg-60:       hsl(000, 000%, 022%);
-  --cd-bg-40:       hsl(000, 000%, 035%);
-
-  --cd-fg-60:       hsl(000, 000%, 055%);
-  --cd-fg-80:       hsl(000, 000%, 080%);
-  --cd-fg-100:      hsl(000, 000%, 093%);
-
-  --cd-prim-bg-100: hsl(267, 050%, 050%);
-  --cd-prim-bg-80: hsl(267, 050%, 032%);
-  --cd-prim-bg-60: hsl(269, 030%, 028%);
-
-  --cd-prim-fg-80: hsl(267, 070%, 070%);
-  --cd-prim-fg-100: hsl(000, 000%, 100%);
-
-  --cd-red-bg-100: hsl(000, 100%, 015%);
-  --cd-red-fg-100: hsl(000, 080%, 055%);
-  --cd-green-fg-100: hsl(120, 080%, 042%);
-
-  --cd-teal-bg-100: hsl(162, 082%, 041%);
+}
+
+/* Light Theme */
+/* prettier-ignore */
+:not(.dark):root {
+  --clr-app-0:      hsl(000, 000%, 100%);
+  --clr-app-100:    hsl(000, 000%, 098%);
+  --clr-app-200:    hsl(000, 000%, 094%);
+  --clr-app-300:    hsl(000, 000%, 091%);
+  --clr-app-400:    hsl(000, 000%, 080%);
+  --clr-app-600:    hsl(000, 000%, 065%);
+  --clr-app-800:    hsl(000, 000%, 047%);
+  --clr-app-999:    hsl(000, 000%, 000%);
+
+  --clr-prim-100:   hsl(220, 100%, 050%);
+  --clr-prim-200:   hsl(220, 100%, 060%);
+  --clr-prim-300:   hsl(220, 100%, 070%);
+  --clr-prim-400:   hsl(220, 100%, 080%);
+  --clr-prim-600:   hsl(220, 080%, 092%);
+  --clr-prim-800:   hsl(190, 080%, 094%);
+  --clr-prim-999:   hsl(000, 000%, 100%);
+
+  --clr-warn-100:   hsl(000, 100%, 095%);
+  --clr-warn-600:   hsl(000, 072%, 051%);
+
+  --clr-ok-600:     hsl(120, 080%, 37%);
+
+  --clr-select-node:hsl(162, 082%, 051%);
+
+  /* Highlight accents */
+  --acc-bg-red:     hsl(000, 100%, 089%);
+  --acc-bg-green:   hsl(100, 100%, 075%);
+  --acc-bg-blue:    hsl(235, 080%, 087%);
+  --acc-bg-purple:  hsl(274, 089%, 081%);
+  --acc-bg-teal:    hsl(192, 089%, 081%);
+  --acc-bg-orange:  hsl(028, 100%, 075%);
+
+  --acc-bg-green25: hsl(100, 100%, 096%);
+  --acc-bg-green50: hsl(100, 100%, 090%);
+  --acc-bg-orange50:hsl(028, 100%, 090%);
+  
+  --acc-fg-red:     hsl(000, 090%, 045%);
+  --acc-fg-green:   hsl(100, 090%, 035%);
+  --acc-fg-blue:    hsl(235, 100%, 050%);
+  --acc-fg-purple:  hsl(270, 100%, 055%);
+  --acc-fg-teal:    hsl(200, 080%, 050%);
+  --acc-fg-orange:  hsl(028, 100%, 050%);
+}
+
+/* Dark Theme */
+/* prettier-ignore */
+.dark:root {
+  --clr-app-0:      hsl(000, 000%, 005%);
+  --clr-app-100:    hsl(000, 000%, 009%);
+  --clr-app-200:    hsl(000, 000%, 015%);
+  --clr-app-300:    hsl(000, 000%, 022%);
+  --clr-app-400:    hsl(000, 000%, 035%);
+  --clr-app-600:    hsl(000, 000%, 055%);
+  --clr-app-800:    hsl(000, 000%, 080%);
+  --clr-app-999:    hsl(000, 000%, 093%);
+
+  --clr-prim-100:   hsl(267, 070%, 070%);
+  --clr-prim-200:   hsl(267, 050%, 060%);
+  --clr-prim-300:   hsl(267, 050%, 050%);
+  --clr-prim-400:   hsl(267, 050%, 040%);
+  --clr-prim-600:   hsl(267, 050%, 032%);
+  --clr-prim-800:   hsl(269, 030%, 028%);
+  --clr-prim-999:   hsl(000, 000%, 100%);
+
+  --clr-warn-100:   hsl(000, 100%, 015%);
+  --clr-warn-600:   hsl(000, 080%, 055%);
+
+  --clr-ok-600:     hsl(120, 080%, 042%);
+
+  --clr-select-node:hsl(162, 082%, 041%);
+
+  /* Highlight accents */
+  --acc-bg-red:     hsl(000, 080%, 037%);
+  --acc-bg-green:   hsl(100, 080%, 025%);
+  --acc-bg-blue:    hsl(235, 054%, 049%);
+  --acc-bg-purple:  hsl(270, 080%, 050%);
+  --acc-bg-teal:    hsl(192, 080%, 030%);
+  --acc-bg-orange:  hsl(035, 100%, 035%);
+
+  --acc-bg-green25: hsl(100, 080%, 009%);
+  --acc-bg-green50: hsl(100, 080%, 017%);
+  --acc-bg-orange50:hsl(035, 100%, 016%);
+
+  --acc-fg-red:     hsl(000, 080%, 045%);
+  --acc-fg-green:   hsl(100, 080%, 035%);
+  --acc-fg-blue:    hsl(235, 100%, 080%);
+  --acc-fg-purple:  hsl(270, 100%, 080%);
+  --acc-fg-teal:    hsl(192, 100%, 045%);
+  --acc-fg-orange:  hsl(035, 100%, 050%);
 }
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
index f5f35644..26268019 100644
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/rsconcept/frontend/src/styling/overrides.css
@@ -6,7 +6,7 @@
 
 :root {
   /* Import overrides */
-  --toastify-color-dark: var(--cd-bg-60);
+  --toastify-color-dark: var(--clr-app-300);
 }
 
 .cm-tooltip {
@@ -17,48 +17,37 @@
   resize: vertical;
   overflow-y: auto;
   overscroll-behavior-y: contain;
-  border-color: var(--cl-bg-40);
-  .dark & {
-    border-color: var(--cd-bg-40);
-  }
-  @apply border rounded px-[0.375rem] py-[0.15rem];
+
+  border-color: var(--clr-app-400);
+  border-width: 1px;
+  border-radius: 0.25rem;
+
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
 }
 .cm-editor.cm-focused {
-  border-color: var(--cl-bg-40);
-  outline-color: var(--cl-prim-bg-100);
-  .dark & {
-    border-color: var(--cd-bg-40);
-    outline-color: var(--cd-prim-bg-100);
-  }
-  @apply outline-2 outline;
+  border-color: var(--clr-app-400);
+  outline-color: var(--clr-prim-200);
+  outline-style: solid;
+  outline-width: 2px;
 }
 
 .cm-editor .cm-placeholder {
-  color: var(--cl-fg-60);
-  @apply font-main;
-  .dark & {
-    color: var(--cd-fg-60);
-  }
+  font-family: var(--font-main);
+  color: var(--clr-app-600);
 }
 
 .react-flow__handle {
   cursor: default !important;
   border-radius: 9999px;
 
-  border-color: var(--cl-bg-40);
-  background-color: var(--cl-bg-120);
+  border-color: var(--clr-app-400);
+  background-color: var(--clr-app-0);
 
   .selected & {
-    border-color: var(--cd-bg-40);
-  }
-
-  .dark & {
-    border-color: var(--cd-bg-40);
-    background-color: var(--cd-bg-120);
-
-    .selected & {
-      border-color: var(--cl-bg-40);
-    }
+    border-color: var(--clr-app-800);
   }
 }
 
@@ -77,34 +66,20 @@
   margin-right: 3px;
 
   background-color: transparent;
-  color: var(--cl-fg-60);
-  .dark & {
-    color: var(--cd-fg-60);
-  }
+  color: var(--clr-app-600);
 }
 
 [class*='react-flow__node-'] {
   font-size: 14px;
-
   border: 1px solid;
 
-  background-color: var(--cl-bg-120);
-  color: var(--cl-fg-100);
-  border-color: var(--cl-bg-40);
-  background-color: var(--cl-bg-120);
+  background-color: var(--clr-app-0);
+  color: var(--clr-app-999);
+  border-color: var(--clr-app-400);
+  background-color: var(--clr-app-0);
 
   &:hover:not(.selected) {
-    box-shadow: 0 0 0 2px var(--cl-prim-bg-80) !important;
-  }
-
-  .dark & {
-    color: var(--cd-fg-100);
-    border-color: var(--cd-bg-40);
-    background-color: var(--cd-bg-120);
-
-    &:hover:not(.selected) {
-      box-shadow: 0 0 0 3px var(--cd-prim-bg-80) !important;
-    }
+    box-shadow: 0 0 0 2px var(--clr-prim-600) !important;
   }
 }
 
@@ -127,16 +102,8 @@
 
   &.selected {
     outline-offset: 4px;
-    outline-color: var(--cl-teal-bg-100);
-    border-color: var(--cd-bg-40);
-  }
-
-  .dark & {
-    &.selected {
-      outline-offset: 4px;
-      border-color: var(--cd-teal-bg-100);
-      border-color: var(--cl-bg-40);
-    }
+    outline-color: var(--clr-select-node);
+    border-color: var(--clr-app-800);
   }
 }
 
@@ -159,15 +126,7 @@
 
   &.selected {
     outline-offset: 4px;
-    outline-color: var(--cl-teal-bg-100);
+    outline-color: var(--clr-select-node);
     border-color: transparent;
   }
-
-  .dark & {
-    &.selected {
-      outline-offset: 4px;
-      border-color: var(--cd-teal-bg-100);
-      border-color: transparent;
-    }
-  }
 }
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
index 2e1a1244..ac811570 100644
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -26,7 +26,7 @@ html {
   hanging-punctuation: first last;
   color-scheme: dark light;
 
-  /* interpolate-size: allow-keywords; */
+  interpolate-size: allow-keywords;
 }
 
 body {
@@ -58,15 +58,9 @@ body {
   line-height: var(--line-height);
   font-family: var(--font-main);
 
-  color: var(--cl-fg-100);
-  border-color: var(--cl-bg-40);
-  background-color: var(--cl-bg-100);
-
-  &.dark {
-    color: var(--cd-fg-100);
-    border-color: var(--cd-bg-40);
-    background-color: var(--cd-bg-100);
-  }
+  color: var(--clr-app-999);
+  border-color: var(--clr-app-400);
+  background-color: var(--clr-app-100);
 }
 
 @media only screen and (max-width: 639px) {
@@ -84,23 +78,14 @@ body {
 }
 
 ::selection {
-  background: var(--cl-prim-bg-60);
-  .dark & {
-    background: var(--cd-prim-bg-60);
-  }
+  background: var(--clr-prim-800);
   tr :hover& {
-    background: var(--cl-red-bg-100);
-    .dark & {
-      background: var(--cd-red-bg-100);
-    }
+    background: var(--clr-warn-100);
   }
 }
 
 ::placeholder {
-  color: var(--cl-fg-60);
-  .dark & {
-    color: var(--cd-fg-60);
-  }
+  color: var(--clr-app-600);
 }
 
 /* Wrapping headers */
@@ -120,24 +105,35 @@ li {
   text-wrap: pretty;
 }
 
-div:not(.dense) > p {
-  @apply [&:not(:last-child)]:mb-2;
+div:not(.dense) > p:not(:last-child) {
+  margin-bottom: 0.5rem;
 }
 
 @layer components {
   h1 {
-    @apply text-lg font-semibold text-center;
+    font-weight: 600;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    text-align: center;
   }
 
   h2 {
-    @apply [&:not(:first-child)]:mt-2 font-semibold text-center;
-    [role='manuals'] & {
-      @apply [&:not(:first-child)]:mt-3 mb-2;
+    font-weight: 600;
+    text-align: center;
+
+    &:not(:first-child) {
+      :not([role='manuals']) & {
+        margin-top: 0.5rem;
+      }
+      [role='manuals'] & {
+        margin-top: 0.75rem;
+        margin-bottom: 0.5rem;
+      }
     }
   }
 
   b {
-    @apply font-semibold;
+    font-weight: 600;
   }
 
   code {
@@ -153,7 +149,7 @@ div:not(.dense) > p {
   }
 
   .border {
-    @apply rounded;
+    border-radius: 0.25rem;
   }
 
   .border,
@@ -174,10 +170,9 @@ div:not(.dense) > p {
   .divide-y,
   .divide-x-2,
   .divide-y-2 {
-    border-color: var(--cl-bg-40);
-    @apply divide-inherit;
-    .dark & {
-      border-color: var(--cd-bg-40);
+    border-color: var(--clr-app-400);
+    & > :not([hidden]) ~ :not([hidden]) {
+      border-color: inherit;
     }
   }
 
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index f1311275..f19a4a1f 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -21,133 +21,73 @@
 }
 
 @layer components {
-  .clr-app,
-  .clr-btn-nav {
-    background-color: var(--cl-bg-100);
-    .dark & {
-      background-color: var(--cd-bg-100);
-    }
-  }
-
   .clr-footer {
-    color: var(--cl-fg-60);
-    background-color: var(--cl-bg-100);
-    .dark & {
-      color: var(--cd-fg-60);
-      background-color: var(--cd-bg-100);
-    }
+    color: var(--clr-app-600);
+    background-color: var(--clr-app-100);
   }
 
   .cc-modal-backdrop {
     opacity: 0.5;
-    background-color: var(--cl-bg-100);
-    .dark & {
-      background-color: var(--cd-bg-100);
-    }
+    background-color: var(--clr-app-100);
   }
 
   .clr-input {
-    background-color: var(--cl-bg-120);
+    background-color: var(--clr-app-0);
     &:disabled {
-      background-color: var(--cl-bg-100);
-    }
-    .dark & {
-      background-color: var(--cd-bg-120);
-      &:disabled {
-        background-color: var(--cd-bg-100);
-      }
+      background-color: var(--clr-app-100);
     }
   }
 
   .clr-controls,
   .clr-tab,
   .clr-btn-default {
-    background-color: var(--cl-bg-80);
-    .dark & {
-      background-color: var(--cd-bg-80);
-    }
+    background-color: var(--clr-app-200);
   }
 
   .clr-primary,
   .clr-btn-primary:hover,
   .clr-btn-primary:focus-visible {
     @apply transition;
-    color: var(--cl-prim-fg-100);
-    background-color: var(--cl-prim-bg-100);
-    .dark & {
-      color: var(--cd-prim-fg-100);
-      background-color: var(--cd-prim-bg-100);
-    }
+    color: var(--clr-prim-999);
+    background-color: var(--clr-prim-200);
   }
 
   .clr-selected,
   .clr-btn-primary {
-    color: var(--cl-fg-100);
-    background-color: var(--cl-prim-bg-80);
-    .dark & {
-      color: var(--cd-fg-100);
-      background-color: var(--cd-prim-bg-80);
-    }
+    color: var(--clr-app-999);
+    background-color: var(--clr-prim-600);
   }
 
   :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
     @apply transition;
-    color: var(--cl-fg-80);
-    background-color: var(--cl-bg-60);
-    .dark & {
-      color: var(--cd-fg-80);
-      background-color: var(--cd-bg-60);
-    }
+    color: var(--clr-app-800);
+    background-color: var(--clr-app-200);
   }
 
   :is(.clr-hover, .clr-tab, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
     @apply transition;
-    color: var(--cl-fg-100);
-    background-color: var(--cl-prim-bg-60);
-    .dark & {
-      color: var(--cd-fg-100);
-      background-color: var(--cd-prim-bg-60);
-    }
+    color: var(--clr-app-999);
+    background-color: var(--clr-prim-800);
   }
 
   :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
   .focus-frame:has(:focus-visible) {
     outline-width: 2px;
     outline-style: solid;
-    outline-color: var(--cl-prim-bg-100);
-    .dark & {
-      outline-color: var(--cd-prim-bg-100);
-    }
+    outline-color: var(--clr-prim-200);
   }
 
-  .clr-text-primary,
-  .clr-text-url {
-    color: var(--cl-prim-fg-80);
-    .dark & {
-      color: var(--cd-prim-fg-80);
-    }
+  .clr-text-primary {
+    color: var(--clr-prim-100);
   }
 
   .clr-text-controls,
   .clr-btn-nav,
   .clr-btn-clear {
-    color: var(--cl-fg-80);
+    color: var(--clr-app-800);
     background-color: transparent;
     &:disabled {
-      color: var(--cl-fg-60);
-    }
-    .dark & {
-      color: var(--cd-fg-80);
-      &:disabled {
-        color: var(--cd-fg-60);
-      }
-    }
-  }
-
-  .clr-warning {
-    background-color: var(--cl-red-bg-100);
-    .dark & {
-      background-color: var(--cd-red-bg-100);
+      color: var(--clr-app-600);
     }
   }
 
@@ -155,44 +95,25 @@
   input:disabled:not(::placeholder),
   textarea:disabled:not(::placeholder) {
     opacity: 1;
-    -webkit-text-fill-color: var(--cl-fg-100);
-    color: var(--cl-fg-100);
-    .dark & {
-      opacity: 1;
-      -webkit-text-fill-color: var(--cd-fg-100);
-      color: var(--cd-fg-100);
-    }
-  }
-
-  .clr-text-red {
-    color: var(--cl-red-fg-100);
-    .dark & {
-      color: var(--cd-red-fg-100);
-    }
-  }
-
-  .clr-text-green {
-    color: var(--cl-green-fg-100);
-    .dark & {
-      color: var(--cd-green-fg-100);
-    }
+    -webkit-text-fill-color: var(--clr-app-999);
+    color: var(--clr-app-999);
   }
 
   .icon-primary {
     :not([disabled]) > & {
-      @apply clr-text-primary;
+      color: var(--clr-prim-100);
     }
   }
 
   .icon-red {
     :not([disabled]) > & {
-      @apply clr-text-red;
+      color: var(--clr-warn-600);
     }
   }
 
   .icon-green {
     :not([disabled]) > & {
-      @apply clr-text-green;
+      color: var(--clr-ok-600);
     }
   }
 
@@ -202,15 +123,23 @@
     margin-left: 0.1rem;
     margin-right: 0.1rem;
     transform: translate(0, -0.2rem);
-    @apply clr-text-primary;
+    color: var(--clr-prim-100);
   }
 
   .cc-tab-tools {
-    @apply top-[1.7rem] pt-[0.4rem] pb-1 right-1/2 translate-x-1/2;
+    top: 1.7rem;
+    right: 50%;
+    padding-top: 0.4rem;
+    transform: translate(50%, 0%);
   }
 
   .cc-label {
-    @apply text-sm font-medium cursor-default select-text whitespace-nowrap;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    cursor: default;
+    user-select: text;
+    white-space: nowrap;
   }
 
   .cc-column {
@@ -249,7 +178,7 @@
   }
 
   .cc-shadow-border {
-    @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
+    @apply shadow-sm shadow-[var(--clr-app-400)];
   }
 
   .cc-animate-position {
diff --git a/rsconcept/frontend/src/utils/codemirror.ts b/rsconcept/frontend/src/utils/codemirror.ts
index 1cbdff0c..b4c98820 100644
--- a/rsconcept/frontend/src/utils/codemirror.ts
+++ b/rsconcept/frontend/src/utils/codemirror.ts
@@ -14,8 +14,8 @@ import { parseEntityReference, parseGrammemes, parseSyntacticReference } from '@
 import { IConstituenta } from '@/models/rsform';
 import { isBasicConcept } from '@/models/rsformAPI';
 import { SyntaxTree } from '@/models/rslang';
+import { APP_COLORS, colorFgGrammeme } from '@/styling/color';
 
-import { colorFgGrammeme, IColorTheme } from '../styling/color';
 import { PARAMETER } from './constants';
 import { describeConstituentaTerm, labelCstTypification, labelGrammeme } from './labels';
 
@@ -295,7 +295,6 @@ export function domTooltipConstituenta(cst?: IConstituenta, canClick?: boolean):
 export function domTooltipEntityReference(
   ref: IEntityReference,
   cst: IConstituenta | undefined,
-  colors: IColorTheme,
   canClick?: boolean
 ): TooltipView {
   const dom = document.createElement('div');
@@ -329,10 +328,10 @@ export function domTooltipEntityReference(
       'text-sm text-center whitespace-nowrap'
     );
     gram.style.borderWidth = '1px';
-    gram.style.borderColor = colorFgGrammeme(gramStr, colors);
-    gram.style.color = colorFgGrammeme(gramStr, colors);
+    gram.style.borderColor = colorFgGrammeme(gramStr);
+    gram.style.color = colorFgGrammeme(gramStr);
     gram.style.fontWeight = '600';
-    gram.style.backgroundColor = colors.bgInput;
+    gram.style.backgroundColor = APP_COLORS.bgInput;
     gram.innerText = labelGrammeme(gramStr);
     grams.appendChild(gram);
   });
diff --git a/rsconcept/frontend/src/utils/utils.ts b/rsconcept/frontend/src/utils/utils.ts
index 61cb2cd3..31f8008b 100644
--- a/rsconcept/frontend/src/utils/utils.ts
+++ b/rsconcept/frontend/src/utils/utils.ts
@@ -150,7 +150,7 @@ export function tripleToggleColor(value: boolean | undefined): string {
   if (value === undefined) {
     return 'clr-text-controls';
   }
-  return value ? 'clr-text-green' : 'clr-text-red';
+  return value ? 'text-ok-600' : 'text-warn-600';
 }
 
 /**
diff --git a/rsconcept/frontend/tailwind.config.js b/rsconcept/frontend/tailwind.config.js
index e89c5dc7..eb9fccf6 100644
--- a/rsconcept/frontend/tailwind.config.js
+++ b/rsconcept/frontend/tailwind.config.js
@@ -5,6 +5,37 @@ export default {
   darkMode: 'class',
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      inherit: 'inherit',
+      app: {
+        0: 'var(--clr-app-0)',
+        100: 'var(--clr-app-100)',
+        200: 'var(--clr-app-200)',
+        300: 'var(--clr-app-300)',
+        400: 'var(--clr-app-400)',
+        600: 'var(--clr-app-600)',
+        800: 'var(--clr-app-800)',
+        999: 'var(--clr-app-999)'
+      },
+      prim: {
+        100: 'var(--clr-prim-100)',
+        200: 'var(--clr-prim-200)',
+        300: 'var(--clr-prim-300)',
+        400: 'var(--clr-prim-400)',
+        600: 'var(--clr-prim-600)',
+        800: 'var(--clr-prim-800)',
+        999: 'var(--clr-prim-999)'
+      },
+      warn: {
+        100: 'var(--clr-warn-100)',
+        600: 'var(--clr-warn-600)'
+      },
+      ok: {
+        600: 'var(--clr-ok-600)'
+      }
+    },
     zIndex: {
       bottom: '0',
       topmost: '99',
diff --git a/rsconcept/frontend/vite.config.ts b/rsconcept/frontend/vite.config.ts
index 78ec6d52..50237d61 100644
--- a/rsconcept/frontend/vite.config.ts
+++ b/rsconcept/frontend/vite.config.ts
@@ -12,7 +12,10 @@ const reactCompilerConfig = {
 const inlinePackages = ['react', 'react-router', 'react-dom'];
 
 // Rollup warnings that should not be displayed
-const warningsToIgnore = [['SOURCEMAP_ERROR', "Can't resolve original location of error"]];
+const warningsToIgnore = [
+  ['SOURCEMAP_ERROR', "Can't resolve original location of error"],
+  ['MODULE_LEVEL_DIRECTIVE', 'Module level directives cause errors when bundled']
+];
 
 // https://vitejs.dev/config/
 export default ({ mode }: { mode: string }) => {