From d250a9fda0390735e1ee33f6419e35abf3c0e9cd Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 17 Dec 2024 10:52:36 +0300
Subject: [PATCH] R: Improve styling semantics pt1

---
 rsconcept/frontend/README.md                  |   3 +-
 rsconcept/frontend/src/app/Footer.tsx         |  12 +-
 .../frontend/src/components/DomainIcons.tsx   |  34 ++---
 .../components/select/PickSubstitutions.tsx   |   4 +-
 .../frontend/src/components/ui/Checkbox.tsx   |   2 +-
 .../src/components/ui/CheckboxTristate.tsx    |   2 +-
 .../ui/DataTable/PaginationTools.tsx          |   4 +-
 .../src/components/ui/DataTable/TableBody.tsx |   2 +-
 .../components/ui/DataTable/TableHeader.tsx   |   2 +-
 .../frontend/src/components/ui/Modal.tsx      |   6 +-
 .../frontend/src/components/ui/SelectTree.tsx |   2 +-
 .../frontend/src/components/ui/TabLabel.tsx   |   2 +-
 .../frontend/src/components/ui/TextURL.tsx    |   2 +-
 .../src/components/wrap/ExpectedAnonymous.tsx |   2 +-
 .../dialogs/DlgCreateCst/FormCreateCst.tsx    |   2 +-
 .../src/dialogs/DlgShowAST/DlgShowAST.tsx     |   2 +-
 .../src/pages/ManualsPage/TopicsDropdown.tsx  |   2 +-
 .../src/pages/ManualsPage/TopicsStatic.tsx    |   3 +-
 .../pages/OssPage/EditorOssCard/OssStats.tsx  |  10 +-
 .../OssPage/EditorOssGraph/graph/NodeCore.tsx |   2 +-
 .../EditorConstituenta/FormConstituenta.tsx   |   6 +-
 .../EditorRSFormCard/RSFormStats.tsx          |  12 +-
 .../EditorRSFormCard/ToolbarItemAccess.tsx    |   2 +-
 rsconcept/frontend/src/styling/color.ts       |  22 +--
 rsconcept/frontend/src/styling/constants.css  | 138 +++++++++---------
 rsconcept/frontend/src/styling/overrides.css  |  34 ++---
 rsconcept/frontend/src/styling/setup.css      |  12 +-
 rsconcept/frontend/src/styling/styles.css     |  73 ++++-----
 rsconcept/frontend/tailwind.config.js         |  20 +--
 29 files changed, 201 insertions(+), 218 deletions(-)

diff --git a/rsconcept/frontend/README.md b/rsconcept/frontend/README.md
index 4b2ccd23..58e2556c 100644
--- a/rsconcept/frontend/README.md
+++ b/rsconcept/frontend/README.md
@@ -14,8 +14,7 @@ Styling conventions
   - inner layout: px-3 py-2 flex flex-col gap-3 justify-between items-center
   - overflow behavior: overflow-scroll overscroll-contain
   - border: borer-2 outline-none shadow-md
-  - colors: clr-controls
-  - text: text-start text-sm font-semibold whitespace-nowrap
+  - text: text-start text-sm font-semibold whitespace-nowrap bg-prim-200 fg-app-100
   - behavior modifiers: select-none disabled:cursor-auto
   - transitions: 
   </pre>
diff --git a/rsconcept/frontend/src/app/Footer.tsx b/rsconcept/frontend/src/app/Footer.tsx
index c4f98a8f..b39aa0f7 100644
--- a/rsconcept/frontend/src/app/Footer.tsx
+++ b/rsconcept/frontend/src/app/Footer.tsx
@@ -16,17 +16,17 @@ function Footer() {
         'z-navigation',
         'mx-auto',
         'px-3 py-2 flex flex-col items-center gap-1',
-        'text-xs sm:text-sm select-none whitespace-nowrap'
+        'text-xs sm:text-sm select-none whitespace-nowrap text-prim-600 bg-prim-100'
       )}
     >
       <div className='flex gap-3'>
-        <TextURL text='Библиотека' href='/library' color='clr-footer' />
-        <TextURL text='Справка' href='/manuals' color='clr-footer' />
-        <TextURL text='Центр Концепт' href={external_urls.concept} color='clr-footer' />
-        <TextURL text='Экстеор' href='/manuals?topic=exteor' color='clr-footer' />
+        <TextURL text='Библиотека' href='/library' color='' />
+        <TextURL text='Справка' href='/manuals' color='' />
+        <TextURL text='Центр Концепт' href={external_urls.concept} color='' />
+        <TextURL text='Экстеор' href='/manuals?topic=exteor' color='' />
       </div>
       <div>
-        <p className='clr-footer'>© 2024 ЦИВТ КОНЦЕПТ</p>
+        <p>© 2024 ЦИВТ КОНЦЕПТ</p>
       </div>
     </footer>
   );
diff --git a/rsconcept/frontend/src/components/DomainIcons.tsx b/rsconcept/frontend/src/components/DomainIcons.tsx
index 71dddf3d..a011798d 100644
--- a/rsconcept/frontend/src/components/DomainIcons.tsx
+++ b/rsconcept/frontend/src/components/DomainIcons.tsx
@@ -49,7 +49,7 @@ export interface DomIconProps<RequestData> extends IconProps {
 export function ItemTypeIcon({ value, size = '1.25rem', className }: DomIconProps<LibraryItemType>) {
   switch (value) {
     case LibraryItemType.RSFORM:
-      return <IconRSForm size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconRSForm size={size} className={className ?? 'text-sec-600'} />;
     case LibraryItemType.OSS:
       return <IconOSS size={size} className={className ?? 'text-ok-600'} />;
   }
@@ -61,7 +61,7 @@ export function PolicyIcon({ value, size = '1.25rem', className }: DomIconProps<
     case AccessPolicy.PRIVATE:
       return <IconPrivate size={size} className={className ?? 'text-warn-600'} />;
     case AccessPolicy.PROTECTED:
-      return <IconProtected size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconProtected size={size} className={className ?? 'text-sec-600'} />;
     case AccessPolicy.PUBLIC:
       return <IconPublic size={size} className={className ?? 'text-ok-600'} />;
   }
@@ -81,7 +81,7 @@ export function SubfoldersIcon({ value, size = '1.25rem', className }: DomIconPr
   if (value) {
     return <IconSubfolders size={size} className={className ?? 'text-ok-600'} />;
   } else {
-    return <IconSubfolders size={size} className={className ?? 'clr-text-primary'} />;
+    return <IconSubfolders size={size} className={className ?? 'text-sec-600'} />;
   }
 }
 
@@ -89,11 +89,11 @@ export function SubfoldersIcon({ value, size = '1.25rem', className }: DomIconPr
 export function LocationIcon({ value, size = '1.25rem', className }: DomIconProps<string>) {
   switch (value.substring(0, 2) as LocationHead) {
     case LocationHead.COMMON:
-      return <IconPublic size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconPublic size={size} className={className ?? 'text-sec-600'} />;
     case LocationHead.LIBRARY:
       return <IconTemplates size={size} className={className ?? 'text-warn-600'} />;
     case LocationHead.PROJECTS:
-      return <IconBusiness size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconBusiness size={size} className={className ?? 'text-sec-600'} />;
     case LocationHead.USER:
       return <IconUser size={size} className={className ?? 'text-ok-600'} />;
   }
@@ -105,13 +105,13 @@ export function DependencyIcon({ value, size = '1.25rem', className }: DomIconPr
     case DependencyMode.ALL:
       return <IconSettings size={size} className={className} />;
     case DependencyMode.OUTPUTS:
-      return <IconGraphOutputs size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconGraphOutputs size={size} className={className ?? 'text-sec-600'} />;
     case DependencyMode.INPUTS:
-      return <IconGraphInputs size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconGraphInputs size={size} className={className ?? 'text-sec-600'} />;
     case DependencyMode.EXPAND_OUTPUTS:
-      return <IconGraphExpand size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconGraphExpand size={size} className={className ?? 'text-sec-600'} />;
     case DependencyMode.EXPAND_INPUTS:
-      return <IconGraphCollapse size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconGraphCollapse size={size} className={className ?? 'text-sec-600'} />;
   }
 }
 
@@ -121,13 +121,13 @@ export function MatchModeIcon({ value, size = '1.25rem', className }: DomIconPro
     case CstMatchMode.ALL:
       return <IconFilter size={size} className={className} />;
     case CstMatchMode.TEXT:
-      return <IconText size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconText size={size} className={className ?? 'text-sec-600'} />;
     case CstMatchMode.EXPR:
-      return <IconFormula size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconFormula size={size} className={className ?? 'text-sec-600'} />;
     case CstMatchMode.TERM:
-      return <IconTerm size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconTerm size={size} className={className ?? 'text-sec-600'} />;
     case CstMatchMode.NAME:
-      return <IconAlias size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconAlias size={size} className={className ?? 'text-sec-600'} />;
   }
 }
 
@@ -159,11 +159,11 @@ export function CstTypeIcon({ value, size = '1.25rem', className }: DomIconProps
     case CstType.STRUCTURED:
       return <IconCstStructured size={size} className={className ?? 'text-ok-600'} />;
     case CstType.TERM:
-      return <IconCstTerm size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconCstTerm size={size} className={className ?? 'text-sec-600'} />;
     case CstType.AXIOM:
       return <IconCstAxiom size={size} className={className ?? 'text-warn-600'} />;
     case CstType.FUNCTION:
-      return <IconCstFunction size={size} className={className ?? 'clr-text-primary'} />;
+      return <IconCstFunction size={size} className={className ?? 'text-sec-600'} />;
     case CstType.PREDICATE:
       return <IconCstPredicate size={size} className={className ?? 'text-warn-600'} />;
     case CstType.THEOREM:
@@ -174,8 +174,8 @@ export function CstTypeIcon({ value, size = '1.25rem', className }: DomIconProps
 /** Icon for relocation direction. */
 export function RelocateUpIcon({ value, size = '1.25rem', className }: DomIconProps<boolean>) {
   if (value) {
-    return <IconMoveUp size={size} className={className ?? 'clr-text-primary'} />;
+    return <IconMoveUp size={size} className={className ?? 'text-sec-600'} />;
   } else {
-    return <IconMoveDown size={size} className={className ?? 'clr-text-primary'} />;
+    return <IconMoveDown size={size} className={className ?? 'text-sec-600'} />;
   }
 }
diff --git a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
index e07167fa..b48cf6ae 100644
--- a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
+++ b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
@@ -247,9 +247,9 @@ function PickSubstitutions({
             onClick={toggleDelete}
             icon={
               deleteRight ? (
-                <IconPageRight size='1.5rem' className='clr-text-primary' />
+                <IconPageRight size='1.5rem' className='text-sec-600' />
               ) : (
-                <IconPageLeft size='1.5rem' className='clr-text-primary' />
+                <IconPageLeft size='1.5rem' className='text-sec-600' />
               )
             }
           />
diff --git a/rsconcept/frontend/src/components/ui/Checkbox.tsx b/rsconcept/frontend/src/components/ui/Checkbox.tsx
index 034e4959..291fb276 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,
-            'bg-app-100': value === false
+            'bg-prim-100': value === false
           }
         )}
       >
diff --git a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
index 73554aed..c7538deb 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,
-            'bg-app-100': value === false
+            'bg-prim-100': value === false
           }
         )}
       >
diff --git a/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx b/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
index f5fd179a..5d8d1eac 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 bg-app-100'
+          className='w-6 text-center bg-prim-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 bg-app-100'
+        className='mx-2 cursor-pointer bg-prim-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 62a54498..1e543e32 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
@@ -73,7 +73,7 @@ function TableBody<TData>({
           className={clsx(
             'cc-scroll-row clr-hover',
             !noHeader && 'scroll-mt-[calc(2px+2rem)]',
-            row.getIsSelected() ? 'clr-selected' : index % 2 === 0 ? 'clr-controls' : 'bg-app-100'
+            row.getIsSelected() ? 'clr-selected' : index % 2 === 0 ? 'bg-prim-200' : 'bg-prim-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 7b113d78..17abec57 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='bg-app-100 cc-shadow-border'
+      className='bg-prim-100 cc-shadow-border'
       style={{
         top: headPosition,
         position: 'sticky'
diff --git a/rsconcept/frontend/src/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index d9b4f4e6..41b2a31b 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@@ -93,16 +93,16 @@ function Modal({
 
   return (
     <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', 'backdrop-blur-[3px] opacity-50')} />
       <div
-        className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop opacity-30')}
+        className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'bg-prim-0 opacity-25')}
         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 bg-app-100'
+          'border rounded-xl bg-prim-100'
         )}
       >
         <Overlay position='right-2 top-2'>
diff --git a/rsconcept/frontend/src/components/ui/SelectTree.tsx b/rsconcept/frontend/src/components/ui/SelectTree.tsx
index 1790b73f..b3348420 100644
--- a/rsconcept/frontend/src/components/ui/SelectTree.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectTree.tsx
@@ -89,7 +89,7 @@ function SelectTree<ItemType>({
             className={clsx(
               'pr-3 pl-6 border-b',
               'cc-scroll-row',
-              'clr-controls clr-hover',
+              'bg-prim-200 clr-hover',
               'cursor-pointer',
               value === item && 'clr-selected'
             )}
diff --git a/rsconcept/frontend/src/components/ui/TabLabel.tsx b/rsconcept/frontend/src/components/ui/TabLabel.tsx
index 21565a0a..f6422a9e 100644
--- a/rsconcept/frontend/src/components/ui/TabLabel.tsx
+++ b/rsconcept/frontend/src/components/ui/TabLabel.tsx
@@ -20,7 +20,7 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
       className={clsx(
         'min-w-[5.5rem] h-full',
         'px-2 py-1 flex justify-center',
-        'clr-tab',
+        'clr-hover bg-prim-200',
         'text-sm whitespace-nowrap font-controls',
         'select-none hover:cursor-pointer',
         'outline-none',
diff --git a/rsconcept/frontend/src/components/ui/TextURL.tsx b/rsconcept/frontend/src/components/ui/TextURL.tsx
index ee8971be..529accb6 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 = 'text-prim-100', onClick }: TextURLProps) {
+function TextURL({ text, href, title, color = 'text-sec-600', 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 aa755d4d..ce5f9428 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 text-prim-100' onClick={logoutAndRedirect}>
+        <span className='cursor-pointer hover:underline text-sec-600' onClick={logoutAndRedirect}>
           Выйти
         </span>
       </div>
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
index c485e323..42301bc5 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 text-prim-100 hover:underline'
+          className='self-start cc-label text-sec-600 hover:underline'
           onClick={() => setForceComment(true)}
         >
           Добавить комментарий
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
index e627f866..d48e2dc2 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
@@ -30,7 +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 bg-app-100 max-w-[60ch] text-lg text-center'
+        className='px-2 py-1 rounded-2xl cc-blur bg-prim-100 max-w-[60ch] text-lg text-center'
       >
         {!hoverNode || isDragging ? expression : null}
         {!isDragging && hoverNode ? (
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx
index 971b6809..91c613f3 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx
@@ -64,7 +64,7 @@ function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) {
         className={clsx(
           'border-r border-t rounded-none', // prettier: split-lines
           'cc-scroll-y',
-          'clr-controls'
+          'bg-prim-200'
         )}
         style={{
           maxHeight: calculateHeight('4rem + 2px'),
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
index 540e3731..55f7b93d 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
@@ -28,8 +28,7 @@ function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) {
         'cc-scroll-y',
         'self-start',
         'border-x border-t rounded-none',
-        'clr-controls',
-        'text-xs sm:text-sm',
+        'text-xs sm:text-sm bg-prim-200',
         'select-none'
       )}
       style={{ maxHeight: calculateHeight('1rem + 2px') }}
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssCard/OssStats.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssCard/OssStats.tsx
index 053feaa0..6efdec46 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssCard/OssStats.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssCard/OssStats.tsx
@@ -22,32 +22,32 @@ function OssStats({ stats }: OssStatsProps) {
       </div>
       <ValueStats
         id='count_inputs'
-        icon={<IconDownload size='1.25rem' className='clr-text-primary' />}
+        icon={<IconDownload size='1.25rem' className='text-sec-600' />}
         value={stats.count_inputs}
         title='Загрузка'
       />
       <ValueStats
         id='count_synthesis'
-        icon={<IconSynthesis size='1.25rem' className='clr-text-primary' />}
+        icon={<IconSynthesis size='1.25rem' className='text-sec-600' />}
         value={stats.count_synthesis}
         title='Синтез'
       />
 
       <ValueStats
         id='count_schemas'
-        icon={<IconRSForm size='1.25rem' className='clr-text-primary' />}
+        icon={<IconRSForm size='1.25rem' className='text-sec-600' />}
         value={stats.count_schemas}
         title='Прикрепленные схемы'
       />
       <ValueStats
         id='count_owned'
-        icon={<IconRSFormOwned size='1.25rem' className='clr-text-primary' />}
+        icon={<IconRSFormOwned size='1.25rem' className='text-sec-600' />}
         value={stats.count_owned}
         title='Собственные'
       />
       <ValueStats
         id='count_imported'
-        icon={<IconRSFormImported size='1.25rem' className='clr-text-primary' />}
+        icon={<IconRSFormImported size='1.25rem' className='text-sec-600' />}
         value={stats.count_schemas - stats.count_owned}
         title='Внешние'
       />
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
index fbfedb0a..fde5dd6b 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
@@ -35,7 +35,7 @@ function NodeCore({ node }: NodeCoreProps) {
           <Indicator
             noPadding
             titleHtml='<b>Внимание!</b><br />Ромбовидный синтез</br/>Возможны дубликаты конституент'
-            icon={<IconConsolidation className='clr-text-primary' size='12px' />}
+            icon={<IconConsolidation className='text-sec-600' size='12px' />}
             hideTitle={!controller.showTooltip}
           />
         ) : null}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index c6755331..870f6555 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -252,7 +252,7 @@ function FormConstituenta({
                 id='cst_disable_comment'
                 type='button'
                 tabIndex={-1}
-                className='self-start cc-label text-prim-100 hover:underline'
+                className='self-start cc-label text-sec-600 hover:underline'
                 onClick={() => setForceComment(true)}
               >
                 Добавить комментарий
@@ -271,13 +271,13 @@ function FormConstituenta({
                 <Overlay position='top-[0.1rem] left-[0.4rem]' className='cc-icons'>
                   {state.has_inherited_children && !state.is_inherited ? (
                     <Indicator
-                      icon={<IconPredecessor size='1.25rem' className='clr-text-primary' />}
+                      icon={<IconPredecessor size='1.25rem' className='text-sec-600' />}
                       titleHtml='Внимание!</br> Конституента имеет потомков<br/> в операционной схеме синтеза'
                     />
                   ) : null}
                   {state.is_inherited ? (
                     <Indicator
-                      icon={<IconChild size='1.25rem' className='clr-text-primary' />}
+                      icon={<IconChild size='1.25rem' className='text-sec-600' />}
                       titleHtml='Внимание!</br> Конституента является наследником<br/>'
                     />
                   ) : null}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
index c207f327..143dc572 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
@@ -41,13 +41,13 @@ function RSFormStats({ stats, isArchive }: RSFormStatsProps) {
       </div>
       <ValueStats
         id='count_owned'
-        icon={<IconPredecessor size='1.25rem' className='clr-text-primary' />}
+        icon={<IconPredecessor size='1.25rem' className='text-sec-600' />}
         value={stats.count_all - stats.count_inherited}
         title='Собственные'
       />
       <ValueStats
         id='count_inherited'
-        icon={<IconChild size='1.25rem' className='clr-text-primary' />}
+        icon={<IconChild size='1.25rem' className='text-sec-600' />}
         value={stats.count_inherited}
         titleHtml={isArchive ? 'Архивные схемы не хранят<br/> информацию о наследовании' : 'Наследованные'}
       />
@@ -61,7 +61,7 @@ function RSFormStats({ stats, isArchive }: RSFormStatsProps) {
       />
       <ValueStats
         id='count_property'
-        icon={<IconStatusProperty size='1.25rem' className='clr-text-primary' />}
+        icon={<IconStatusProperty size='1.25rem' className='text-sec-600' />}
         value={stats.count_errors}
         title='Неразмерные'
       />
@@ -130,19 +130,19 @@ function RSFormStats({ stats, isArchive }: RSFormStatsProps) {
 
       <ValueStats
         id='count_text_term'
-        icon={<IconTerminology size='1.25rem' className='clr-text-primary' />}
+        icon={<IconTerminology size='1.25rem' className='text-sec-600' />}
         value={stats.count_text_term}
         title='Термины'
       />
       <ValueStats
         id='count_definition'
-        icon={<IconDefinition size='1.25rem' className='clr-text-primary' />}
+        icon={<IconDefinition size='1.25rem' className='text-sec-600' />}
         value={stats.count_definition}
         title='Определения'
       />
       <ValueStats
         id='count_convention'
-        icon={<IconConvention size='1.25rem' className='clr-text-primary' />}
+        icon={<IconConvention size='1.25rem' className='text-sec-600' />}
         value={stats.count_convention}
         title='Конвенции'
       />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx
index 7f700ca0..a5668a24 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx
@@ -44,7 +44,7 @@ function ToolbarItemAccess({ visible, toggleVisible, readOnly, toggleReadOnly, c
           title={readOnly ? 'Изменение: запрещено' : 'Изменение: разрешено'}
           icon={
             readOnly ? (
-              <IconImmutable size='1.25rem' className='clr-text-primary' />
+              <IconImmutable size='1.25rem' className='text-sec-600' />
             ) : (
               <IconMutable size='1.25rem' className='text-ok-600' />
             )
diff --git a/rsconcept/frontend/src/styling/color.ts b/rsconcept/frontend/src/styling/color.ts
index 1198ca71..5990636a 100644
--- a/rsconcept/frontend/src/styling/color.ts
+++ b/rsconcept/frontend/src/styling/color.ts
@@ -12,21 +12,21 @@ import { PARAMETER } from '@/utils/constants';
 /** 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)',
+  bgDefault:          'var(--clr-prim-100)',
+  bgInput:            'var(--clr-prim-0)', 
+  bgControls:         'var(--clr-prim-200)',
+  bgDisabled:         'var(--clr-prim-300)',
+  bgPrimary:          'var(--clr-sec-600)',
+  bgSelected:         'var(--clr-sec-200)',
   bgActiveSelection:  'var(--clr-select-node)',
-  bgHover:            'var(--clr-prim-800)',
+  bgHover:            'var(--clr-sec-100)',
   bgWarning:          'var(--clr-warn-100)',
   
-  border:             'var(--clr-app-400)',
+  border:             'var(--clr-prim-400)',
 
-  fgDefault:          'var(--clr-app-999)',
-  fgSelected:         'var(--clr-app-999)', 
-  fgDisabled:         'var(--clr-app-800)',
+  fgDefault:          'var(--clr-prim-999)',
+  fgSelected:         'var(--clr-prim-999)', 
+  fgDisabled:         'var(--clr-prim-800)',
   fgWarning:          'var(--clr-warn-600)',
 
   bgRed:              'var(--acc-bg-red)',
diff --git a/rsconcept/frontend/src/styling/constants.css b/rsconcept/frontend/src/styling/constants.css
index a195ab21..7d1f3e22 100644
--- a/rsconcept/frontend/src/styling/constants.css
+++ b/rsconcept/frontend/src/styling/constants.css
@@ -20,98 +20,100 @@
   --duration-modal: 300ms;
   --duration-fade: 300ms;
   --duration-select: 100ms;
+
+  --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* 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-0:       hsl(000, 000%, 100%);
+  --clr-prim-100:     hsl(000, 000%, 098%);
+  --clr-prim-200:     hsl(000, 000%, 094%);
+  --clr-prim-300:     hsl(000, 000%, 091%);
+  --clr-prim-400:     hsl(000, 000%, 080%);
+  --clr-prim-600:     hsl(000, 000%, 065%);
+  --clr-prim-800:     hsl(000, 000%, 047%);
+  --clr-prim-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-sec-0:        hsl(000, 000%, 100%);
+  --clr-sec-100:      hsl(190, 080%, 094%);
+  --clr-sec-200:      hsl(220, 080%, 092%);
+  --clr-sec-300:      hsl(220, 100%, 080%);
+  --clr-sec-400:      hsl(220, 100%, 070%);
+  --clr-sec-600:      hsl(220, 100%, 060%);
+  --clr-sec-800:      hsl(220, 100%, 050%);
 
-  --clr-warn-100:   hsl(000, 100%, 095%);
-  --clr-warn-600:   hsl(000, 072%, 051%);
+  --clr-warn-100:     hsl(000, 100%, 095%);
+  --clr-warn-600:     hsl(000, 072%, 051%);
 
-  --clr-ok-600:     hsl(120, 080%, 37%);
+  --clr-ok-600:       hsl(120, 080%, 37%);
 
-  --clr-select-node:hsl(162, 082%, 051%);
+  --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-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-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%);
+  --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-0:       hsl(000, 000%, 005%);
+  --clr-prim-100:     hsl(000, 000%, 009%);
+  --clr-prim-200:     hsl(000, 000%, 015%);
+  --clr-prim-300:     hsl(000, 000%, 022%);
+  --clr-prim-400:     hsl(000, 000%, 035%);
+  --clr-prim-600:     hsl(000, 000%, 055%);
+  --clr-prim-800:     hsl(000, 000%, 080%);
+  --clr-prim-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-sec-800:      hsl(267, 070%, 070%);
+  --clr-sec-600:      hsl(267, 050%, 060%);
+  --clr-sec-400:      hsl(267, 050%, 050%);
+  --clr-sec-300:      hsl(267, 050%, 040%);
+  --clr-sec-200:      hsl(267, 050%, 032%);
+  --clr-sec-100:      hsl(269, 030%, 028%);
+  --clr-sec-0:        hsl(000, 000%, 100%);
 
-  --clr-warn-100:   hsl(000, 100%, 015%);
-  --clr-warn-600:   hsl(000, 080%, 055%);
+  --clr-warn-100:     hsl(000, 100%, 015%);
+  --clr-warn-600:     hsl(000, 080%, 055%);
 
-  --clr-ok-600:     hsl(120, 080%, 042%);
+  --clr-ok-600:       hsl(120, 080%, 042%);
 
-  --clr-select-node:hsl(162, 082%, 041%);
+  --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-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-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%);
+  --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 26268019..49dc2701 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(--clr-app-300);
+  --toastify-color-dark: var(--clr-prim-300);
 }
 
 .cm-tooltip {
@@ -18,7 +18,7 @@
   overflow-y: auto;
   overscroll-behavior-y: contain;
 
-  border-color: var(--clr-app-400);
+  border-color: var(--clr-prim-400);
   border-width: 1px;
   border-radius: 0.25rem;
 
@@ -28,26 +28,26 @@
   padding-bottom: 0.15rem;
 }
 .cm-editor.cm-focused {
-  border-color: var(--clr-app-400);
-  outline-color: var(--clr-prim-200);
+  border-color: var(--clr-prim-400);
+  outline-color: var(--clr-sec-600);
   outline-style: solid;
   outline-width: 2px;
 }
 
 .cm-editor .cm-placeholder {
   font-family: var(--font-main);
-  color: var(--clr-app-600);
+  color: var(--clr-prim-600);
 }
 
 .react-flow__handle {
   cursor: default !important;
   border-radius: 9999px;
 
-  border-color: var(--clr-app-400);
-  background-color: var(--clr-app-0);
+  border-color: var(--clr-prim-400);
+  background-color: var(--clr-prim-0);
 
   .selected & {
-    border-color: var(--clr-app-800);
+    border-color: var(--clr-prim-800);
   }
 }
 
@@ -66,20 +66,20 @@
   margin-right: 3px;
 
   background-color: transparent;
-  color: var(--clr-app-600);
+  color: var(--clr-prim-600);
 }
 
 [class*='react-flow__node-'] {
   font-size: 14px;
   border: 1px solid;
 
-  background-color: var(--clr-app-0);
-  color: var(--clr-app-999);
-  border-color: var(--clr-app-400);
-  background-color: var(--clr-app-0);
+  background-color: var(--clr-prim-0);
+  color: var(--clr-prim-999);
+  border-color: var(--clr-prim-400);
+  background-color: var(--clr-prim-0);
 
   &:hover:not(.selected) {
-    box-shadow: 0 0 0 2px var(--clr-prim-600) !important;
+    box-shadow: 0 0 0 2px var(--clr-sec-200) !important;
   }
 }
 
@@ -97,13 +97,13 @@
   outline-color: transparent;
 
   transition-property: outline-offset;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: var(--transition-bezier);
   transition-duration: var(--duration-select);
 
   &.selected {
     outline-offset: 4px;
     outline-color: var(--clr-select-node);
-    border-color: var(--clr-app-800);
+    border-color: var(--clr-prim-800);
   }
 }
 
@@ -121,7 +121,7 @@
   outline-color: transparent;
 
   transition-property: outline-offset;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: var(--transition-bezier);
   transition-duration: var(--duration-select);
 
   &.selected {
diff --git a/rsconcept/frontend/src/styling/setup.css b/rsconcept/frontend/src/styling/setup.css
index ac811570..8f5d539d 100644
--- a/rsconcept/frontend/src/styling/setup.css
+++ b/rsconcept/frontend/src/styling/setup.css
@@ -58,9 +58,9 @@ body {
   line-height: var(--line-height);
   font-family: var(--font-main);
 
-  color: var(--clr-app-999);
-  border-color: var(--clr-app-400);
-  background-color: var(--clr-app-100);
+  color: var(--clr-prim-999);
+  border-color: var(--clr-prim-400);
+  background-color: var(--clr-prim-100);
 }
 
 @media only screen and (max-width: 639px) {
@@ -78,14 +78,14 @@ body {
 }
 
 ::selection {
-  background: var(--clr-prim-800);
+  background: var(--clr-sec-100);
   tr :hover& {
     background: var(--clr-warn-100);
   }
 }
 
 ::placeholder {
-  color: var(--clr-app-600);
+  color: var(--clr-prim-600);
 }
 
 /* Wrapping headers */
@@ -170,7 +170,7 @@ div:not(.dense) > p:not(:last-child) {
   .divide-y,
   .divide-x-2,
   .divide-y-2 {
-    border-color: var(--clr-app-400);
+    border-color: var(--clr-prim-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 f19a4a1f..263a0a42 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -21,73 +21,61 @@
 }
 
 @layer components {
-  .clr-footer {
-    color: var(--clr-app-600);
-    background-color: var(--clr-app-100);
-  }
-
-  .cc-modal-backdrop {
-    opacity: 0.5;
-    background-color: var(--clr-app-100);
-  }
-
   .clr-input {
-    background-color: var(--clr-app-0);
+    background-color: var(--clr-prim-0);
     &:disabled {
-      background-color: var(--clr-app-100);
+      background-color: var(--clr-prim-100);
     }
   }
 
-  .clr-controls,
-  .clr-tab,
+  .clr-selected {
+    color: var(--clr-prim-999);
+    background-color: var(--clr-sec-200);
+  }
+
   .clr-btn-default {
-    background-color: var(--clr-app-200);
+    background-color: var(--clr-prim-200);
   }
 
   .clr-primary,
   .clr-btn-primary:hover,
   .clr-btn-primary:focus-visible {
     @apply transition;
-    color: var(--clr-prim-999);
-    background-color: var(--clr-prim-200);
+    color: var(--clr-sec-0);
+    background-color: var(--clr-sec-600);
   }
 
-  .clr-selected,
   .clr-btn-primary {
-    color: var(--clr-app-999);
-    background-color: var(--clr-prim-600);
+    color: var(--clr-prim-999);
+    background-color: var(--clr-sec-200);
   }
 
   :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
     @apply transition;
-    color: var(--clr-app-800);
-    background-color: var(--clr-app-200);
+    color: var(--clr-prim-800);
+    background-color: var(--clr-prim-200);
   }
 
-  :is(.clr-hover, .clr-tab, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
+  :is(.clr-hover, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
     @apply transition;
-    color: var(--clr-app-999);
-    background-color: var(--clr-prim-800);
+    color: var(--clr-prim-999);
+    background-color: var(--clr-sec-100);
   }
 
   :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
   .focus-frame:has(:focus-visible) {
     outline-width: 2px;
     outline-style: solid;
-    outline-color: var(--clr-prim-200);
-  }
-
-  .clr-text-primary {
-    color: var(--clr-prim-100);
+    outline-color: var(--clr-sec-600);
   }
 
   .clr-text-controls,
   .clr-btn-nav,
   .clr-btn-clear {
-    color: var(--clr-app-800);
+    color: var(--clr-prim-800);
     background-color: transparent;
     &:disabled {
-      color: var(--clr-app-600);
+      color: var(--clr-prim-600);
     }
   }
 
@@ -95,13 +83,13 @@
   input:disabled:not(::placeholder),
   textarea:disabled:not(::placeholder) {
     opacity: 1;
-    -webkit-text-fill-color: var(--clr-app-999);
-    color: var(--clr-app-999);
+    -webkit-text-fill-color: var(--clr-prim-999);
+    color: var(--clr-prim-999);
   }
 
   .icon-primary {
     :not([disabled]) > & {
-      color: var(--clr-prim-100);
+      color: var(--clr-sec-800);
     }
   }
 
@@ -123,7 +111,7 @@
     margin-left: 0.1rem;
     margin-right: 0.1rem;
     transform: translate(0, -0.2rem);
-    color: var(--clr-prim-100);
+    color: var(--clr-sec-800);
   }
 
   .cc-tab-tools {
@@ -172,18 +160,13 @@
     backdrop-filter: blur(3px);
   }
 
-  .cc-modal-blur {
-    opacity: 0.3;
-    backdrop-filter: blur(2px);
-  }
-
   .cc-shadow-border {
-    @apply shadow-sm shadow-[var(--clr-app-400)];
+    box-shadow: 0 1px 2px 0 var(--clr-prim-400);
   }
 
   .cc-animate-position {
     transition-property: transform top left bottom right margin padding;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-timing-function: var(--transition-bezier);
     transition-duration: var(--duration-move);
   }
 
@@ -191,7 +174,7 @@
     opacity: 1;
 
     transition-property: opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-timing-function: var(--transition-bezier);
     transition-duration: var(--duration-fade);
 
     @starting-style {
@@ -204,7 +187,7 @@
     opacity: 1;
 
     transition-property: clip-path, opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-timing-function: var(--transition-bezier);
     transition-duration: var(--duration-modal);
 
     @starting-style {
diff --git a/rsconcept/frontend/tailwind.config.js b/rsconcept/frontend/tailwind.config.js
index eb9fccf6..28a2fd45 100644
--- a/rsconcept/frontend/tailwind.config.js
+++ b/rsconcept/frontend/tailwind.config.js
@@ -9,17 +9,8 @@ export default {
       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: {
+        0: 'var(--clr-prim-0)',
         100: 'var(--clr-prim-100)',
         200: 'var(--clr-prim-200)',
         300: 'var(--clr-prim-300)',
@@ -28,6 +19,15 @@ export default {
         800: 'var(--clr-prim-800)',
         999: 'var(--clr-prim-999)'
       },
+      sec: {
+        0: 'var(--clr-sec-0)',
+        100: 'var(--clr-sec-100)',
+        200: 'var(--clr-sec-200)',
+        300: 'var(--clr-sec-300)',
+        400: 'var(--clr-sec-400)',
+        600: 'var(--clr-sec-600)',
+        800: 'var(--clr-sec-800)'
+      },
       warn: {
         100: 'var(--clr-warn-100)',
         600: 'var(--clr-warn-600)'