ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

R: Improve styling semantics pt1

Browse Source
This commit is contained in:
Ivan 2024-12-17 10:52:36 +03:00
parent e70f7e45b9
commit d250a9fda0
29 changed files with 201 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
rsconcept/frontend/README.md
View File

@ -14,8 +14,7 @@ Styling conventions
- inner layout: px-3 py-2 flex flex-col gap-3 justify-between items-center - inner layout: px-3 py-2 flex flex-col gap-3 justify-between items-center
- overflow behavior: overflow-scroll overscroll-contain - overflow behavior: overflow-scroll overscroll-contain
- border: borer-2 outline-none shadow-md - border: borer-2 outline-none shadow-md
- colors: clr-controls - text: text-start text-sm font-semibold whitespace-nowrap bg-prim-200 fg-app-100
- text: text-start text-sm font-semibold whitespace-nowrap
- behavior modifiers: select-none disabled:cursor-auto - behavior modifiers: select-none disabled:cursor-auto
- transitions: - transitions:
</pre> </pre>

12
rsconcept/frontend/src/app/Footer.tsx
View File

@ -16,17 +16,17 @@ function Footer() {
'z-navigation', 'z-navigation',
'mx-auto', 'mx-auto',
'px-3 py-2 flex flex-col items-center gap-1', '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'> <div className='flex gap-3'>
<TextURL text='Библиотека' href='/library' color='clr-footer' /> <TextURL text='Библиотека' href='/library' color='' />
<TextURL text='Справка' href='/manuals' color='clr-footer' /> <TextURL text='Справка' href='/manuals' color='' />
<TextURL text='Центр Концепт' href={external_urls.concept} color='clr-footer' /> <TextURL text='Центр Концепт' href={external_urls.concept} color='' />
<TextURL text='Экстеор' href='/manuals?topic=exteor' color='clr-footer' /> <TextURL text='Экстеор' href='/manuals?topic=exteor' color='' />
</div> </div>
<div> <div>
<p className='clr-footer'>© 2024 ЦИВТ КОНЦЕПТ</p> <p>© 2024 ЦИВТ КОНЦЕПТ</p>
</div> </div>
</footer> </footer>
); );

34
rsconcept/frontend/src/components/DomainIcons.tsx
View File

@ -49,7 +49,7 @@ export interface DomIconProps<RequestData> extends IconProps {
export function ItemTypeIcon({ value, size = '1.25rem', className }: DomIconProps<LibraryItemType>) { export function ItemTypeIcon({ value, size = '1.25rem', className }: DomIconProps<LibraryItemType>) {
switch (value) { switch (value) {
case LibraryItemType.RSFORM: case LibraryItemType.RSFORM:
return <IconRSForm size={size} className={className ?? 'clr-text-primary'} />; return <IconRSForm size={size} className={className ?? 'text-sec-600'} />;
case LibraryItemType.OSS: case LibraryItemType.OSS:
return <IconOSS size={size} className={className ?? 'text-ok-600'} />; 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: case AccessPolicy.PRIVATE:
return <IconPrivate size={size} className={className ?? 'text-warn-600'} />; return <IconPrivate size={size} className={className ?? 'text-warn-600'} />;
case AccessPolicy.PROTECTED: case AccessPolicy.PROTECTED:
return <IconProtected size={size} className={className ?? 'clr-text-primary'} />; return <IconProtected size={size} className={className ?? 'text-sec-600'} />;
case AccessPolicy.PUBLIC: case AccessPolicy.PUBLIC:
return <IconPublic size={size} className={className ?? 'text-ok-600'} />; return <IconPublic size={size} className={className ?? 'text-ok-600'} />;
} }
@ -81,7 +81,7 @@ export function SubfoldersIcon({ value, size = '1.25rem', className }: DomIconPr
if (value) { if (value) {
return <IconSubfolders size={size} className={className ?? 'text-ok-600'} />; return <IconSubfolders size={size} className={className ?? 'text-ok-600'} />;
} else { } 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>) { export function LocationIcon({ value, size = '1.25rem', className }: DomIconProps<string>) {
switch (value.substring(0, 2) as LocationHead) { switch (value.substring(0, 2) as LocationHead) {
case LocationHead.COMMON: case LocationHead.COMMON:
return <IconPublic size={size} className={className ?? 'clr-text-primary'} />; return <IconPublic size={size} className={className ?? 'text-sec-600'} />;
case LocationHead.LIBRARY: case LocationHead.LIBRARY:
return <IconTemplates size={size} className={className ?? 'text-warn-600'} />; return <IconTemplates size={size} className={className ?? 'text-warn-600'} />;
case LocationHead.PROJECTS: case LocationHead.PROJECTS:
return <IconBusiness size={size} className={className ?? 'clr-text-primary'} />; return <IconBusiness size={size} className={className ?? 'text-sec-600'} />;
case LocationHead.USER: case LocationHead.USER:
return <IconUser size={size} className={className ?? 'text-ok-600'} />; 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: case DependencyMode.ALL:
return <IconSettings size={size} className={className} />; return <IconSettings size={size} className={className} />;
case DependencyMode.OUTPUTS: case DependencyMode.OUTPUTS:
return <IconGraphOutputs size={size} className={className ?? 'clr-text-primary'} />; return <IconGraphOutputs size={size} className={className ?? 'text-sec-600'} />;
case DependencyMode.INPUTS: 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: 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: 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: case CstMatchMode.ALL:
return <IconFilter size={size} className={className} />; return <IconFilter size={size} className={className} />;
case CstMatchMode.TEXT: case CstMatchMode.TEXT:
return <IconText size={size} className={className ?? 'clr-text-primary'} />; return <IconText size={size} className={className ?? 'text-sec-600'} />;
case CstMatchMode.EXPR: case CstMatchMode.EXPR:
return <IconFormula size={size} className={className ?? 'clr-text-primary'} />; return <IconFormula size={size} className={className ?? 'text-sec-600'} />;
case CstMatchMode.TERM: case CstMatchMode.TERM:
return <IconTerm size={size} className={className ?? 'clr-text-primary'} />; return <IconTerm size={size} className={className ?? 'text-sec-600'} />;
case CstMatchMode.NAME: 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: case CstType.STRUCTURED:
return <IconCstStructured size={size} className={className ?? 'text-ok-600'} />; return <IconCstStructured size={size} className={className ?? 'text-ok-600'} />;
case CstType.TERM: case CstType.TERM:
return <IconCstTerm size={size} className={className ?? 'clr-text-primary'} />; return <IconCstTerm size={size} className={className ?? 'text-sec-600'} />;
case CstType.AXIOM: case CstType.AXIOM:
return <IconCstAxiom size={size} className={className ?? 'text-warn-600'} />; return <IconCstAxiom size={size} className={className ?? 'text-warn-600'} />;
case CstType.FUNCTION: case CstType.FUNCTION:
return <IconCstFunction size={size} className={className ?? 'clr-text-primary'} />; return <IconCstFunction size={size} className={className ?? 'text-sec-600'} />;
case CstType.PREDICATE: case CstType.PREDICATE:
return <IconCstPredicate size={size} className={className ?? 'text-warn-600'} />; return <IconCstPredicate size={size} className={className ?? 'text-warn-600'} />;
case CstType.THEOREM: case CstType.THEOREM:
@ -174,8 +174,8 @@ export function CstTypeIcon({ value, size = '1.25rem', className }: DomIconProps
/** Icon for relocation direction. */ /** Icon for relocation direction. */
export function RelocateUpIcon({ value, size = '1.25rem', className }: DomIconProps<boolean>) { export function RelocateUpIcon({ value, size = '1.25rem', className }: DomIconProps<boolean>) {
if (value) { if (value) {
return <IconMoveUp size={size} className={className ?? 'clr-text-primary'} />; return <IconMoveUp size={size} className={className ?? 'text-sec-600'} />;
} else { } else {
return <IconMoveDown size={size} className={className ?? 'clr-text-primary'} />; return <IconMoveDown size={size} className={className ?? 'text-sec-600'} />;
} }
} }

4
rsconcept/frontend/src/components/select/PickSubstitutions.tsx
View File

@ -247,9 +247,9 @@ function PickSubstitutions({
onClick={toggleDelete} onClick={toggleDelete}
icon={ icon={
deleteRight ? ( 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' />
) )
} }
/> />

2
rsconcept/frontend/src/components/ui/Checkbox.tsx
View File

@ -68,7 +68,7 @@ function Checkbox({
'border rounded-sm', 'border rounded-sm',
{ {
'clr-primary': value !== false, 'clr-primary': value !== false,
'bg-app-100': value === false 'bg-prim-100': value === false
} }
)} )}
> >

2
rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
View File

@ -69,7 +69,7 @@ function CheckboxTristate({
'border rounded-sm', 'border rounded-sm',
{ {
'clr-primary': value !== false, 'clr-primary': value !== false,
'bg-app-100': value === false 'bg-prim-100': value === false
} }
)} )}
> >

4
rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
View File

@ -64,7 +64,7 @@ function PaginationTools<TData>({
<input <input
id={id ? `${id}__page` : undefined} id={id ? `${id}__page` : undefined}
title='Номер страницы. Выделите для ручного ввода' title='Номер страницы. Выделите для ручного ввода'
className='w-6 text-center bg-app-100' className='w-6 text-center bg-prim-100'
value={table.getState().pagination.pageIndex + 1} value={table.getState().pagination.pageIndex + 1}
onChange={event => { onChange={event => {
const page = event.target.value ? Number(event.target.value) - 1 : 0; const page = event.target.value ? Number(event.target.value) - 1 : 0;
@ -94,7 +94,7 @@ function PaginationTools<TData>({
id={id ? `${id}__per_page` : undefined} id={id ? `${id}__per_page` : undefined}
value={table.getState().pagination.pageSize} value={table.getState().pagination.pageSize}
onChange={handlePaginationOptionsChange} onChange={handlePaginationOptionsChange}
className='mx-2 cursor-pointer bg-app-100' className='mx-2 cursor-pointer bg-prim-100'
> >
{paginationOptions.map(pageSize => ( {paginationOptions.map(pageSize => (
<option key={`${prefixes.page_size}${pageSize}`} value={pageSize}> <option key={`${prefixes.page_size}${pageSize}`} value={pageSize}>

2
rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
View File

@ -73,7 +73,7 @@ function TableBody<TData>({
className={clsx( className={clsx(
'cc-scroll-row clr-hover', 'cc-scroll-row clr-hover',
!noHeader && 'scroll-mt-[calc(2px+2rem)]', !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) : []) }} style={{ ...(conditionalRowStyles ? getRowStyles(row) : []) }}
> >

2
rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
View File

@ -22,7 +22,7 @@ function TableHeader<TData>({
}: TableHeaderProps<TData>) { }: TableHeaderProps<TData>) {
return ( return (
<thead <thead
className='bg-app-100 cc-shadow-border' className='bg-prim-100 cc-shadow-border'
style={{ style={{
top: headPosition, top: headPosition,
position: 'sticky' position: 'sticky'

6
rsconcept/frontend/src/components/ui/Modal.tsx
View File

@ -93,16 +93,16 @@ function Modal({
return ( return (
<div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'> <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 <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} onClick={hideWindow}
/> />
<div <div
className={clsx( className={clsx(
'cc-animate-modal', 'cc-animate-modal',
'z-modal absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-1/2', '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'> <Overlay position='right-2 top-2'>

2
rsconcept/frontend/src/components/ui/SelectTree.tsx
View File

@ -89,7 +89,7 @@ function SelectTree<ItemType>({
className={clsx( className={clsx(
'pr-3 pl-6 border-b', 'pr-3 pl-6 border-b',
'cc-scroll-row', 'cc-scroll-row',
'clr-controls clr-hover', 'bg-prim-200 clr-hover',
'cursor-pointer', 'cursor-pointer',
value === item && 'clr-selected' value === item && 'clr-selected'
)} )}

2
rsconcept/frontend/src/components/ui/TabLabel.tsx
View File

@ -20,7 +20,7 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
className={clsx( className={clsx(
'min-w-[5.5rem] h-full', 'min-w-[5.5rem] h-full',
'px-2 py-1 flex justify-center', 'px-2 py-1 flex justify-center',
'clr-tab', 'clr-hover bg-prim-200',
'text-sm whitespace-nowrap font-controls', 'text-sm whitespace-nowrap font-controls',
'select-none hover:cursor-pointer', 'select-none hover:cursor-pointer',
'outline-none', 'outline-none',

2
rsconcept/frontend/src/components/ui/TextURL.tsx
View File

@ -20,7 +20,7 @@ interface TextURLProps {
/** /**
* Displays a text with a clickable link. * 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}`; const design = `cursor-pointer hover:underline ${color}`;
if (href) { if (href) {
return ( return (

2
rsconcept/frontend/src/components/wrap/ExpectedAnonymous.tsx
View File

@ -22,7 +22,7 @@ function ExpectedAnonymous() {
<span> | </span> <span> | </span>
<TextURL text='Справка' href='/manuals' /> <TextURL text='Справка' href='/manuals' />
<span> | </span> <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> </span>
</div> </div>

2
rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
View File

@ -119,7 +119,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
id='dlg_cst_show_comment' id='dlg_cst_show_comment'
tabIndex={-1} tabIndex={-1}
type='button' 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)} onClick={() => setForceComment(true)}
> >
Добавить комментарий Добавить комментарий

2
rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
View File

@ -30,7 +30,7 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
> >
<Overlay <Overlay
position='top-2 right-1/2 translate-x-1/2' 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} {!hoverNode || isDragging ? expression : null}
{!isDragging && hoverNode ? ( {!isDragging && hoverNode ? (

2
rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx
View File

@ -64,7 +64,7 @@ function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) {
className={clsx( className={clsx(
'border-r border-t rounded-none', // prettier: split-lines 'border-r border-t rounded-none', // prettier: split-lines
'cc-scroll-y', 'cc-scroll-y',
'clr-controls' 'bg-prim-200'
)} )}
style={{ style={{
maxHeight: calculateHeight('4rem + 2px'), maxHeight: calculateHeight('4rem + 2px'),

3
rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
View File

@ -28,8 +28,7 @@ function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) {
'cc-scroll-y', 'cc-scroll-y',
'self-start', 'self-start',
'border-x border-t rounded-none', 'border-x border-t rounded-none',
'clr-controls', 'text-xs sm:text-sm bg-prim-200',
'text-xs sm:text-sm',
'select-none' 'select-none'
)} )}
style={{ maxHeight: calculateHeight('1rem + 2px') }} style={{ maxHeight: calculateHeight('1rem + 2px') }}

10
rsconcept/frontend/src/pages/OssPage/EditorOssCard/OssStats.tsx
View File

@ -22,32 +22,32 @@ function OssStats({ stats }: OssStatsProps) {
</div> </div>
<ValueStats <ValueStats
id='count_inputs' 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} value={stats.count_inputs}
title='Загрузка' title='Загрузка'
/> />
<ValueStats <ValueStats
id='count_synthesis' 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} value={stats.count_synthesis}
title='Синтез' title='Синтез'
/> />
<ValueStats <ValueStats
id='count_schemas' 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} value={stats.count_schemas}
title='Прикрепленные схемы' title='Прикрепленные схемы'
/> />
<ValueStats <ValueStats
id='count_owned' 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} value={stats.count_owned}
title='Собственные' title='Собственные'
/> />
<ValueStats <ValueStats
id='count_imported' 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} value={stats.count_schemas - stats.count_owned}
title='Внешние' title='Внешние'
/> />

2
rsconcept/frontend/src/pages/OssPage/EditorOssGraph/graph/NodeCore.tsx
View File

@ -35,7 +35,7 @@ function NodeCore({ node }: NodeCoreProps) {
<Indicator <Indicator
noPadding noPadding
titleHtml='<b>Внимание!</b><br />Ромбовидный синтез</br/>Возможны дубликаты конституент' titleHtml='<b>Внимание!</b><br />Ромбовидный синтез</br/>Возможны дубликаты конституент'
icon={<IconConsolidation className='clr-text-primary' size='12px' />} icon={<IconConsolidation className='text-sec-600' size='12px' />}
hideTitle={!controller.showTooltip} hideTitle={!controller.showTooltip}
/> />
) : null} ) : null}

6
rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
View File

@ -252,7 +252,7 @@ function FormConstituenta({
id='cst_disable_comment' id='cst_disable_comment'
type='button' type='button'
tabIndex={-1} 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)} onClick={() => setForceComment(true)}
> >
Добавить комментарий Добавить комментарий
@ -271,13 +271,13 @@ function FormConstituenta({
<Overlay position='top-[0.1rem] left-[0.4rem]' className='cc-icons'> <Overlay position='top-[0.1rem] left-[0.4rem]' className='cc-icons'>
{state.has_inherited_children && !state.is_inherited ? ( {state.has_inherited_children && !state.is_inherited ? (
<Indicator <Indicator
icon={<IconPredecessor size='1.25rem' className='clr-text-primary' />} icon={<IconPredecessor size='1.25rem' className='text-sec-600' />}
titleHtml='Внимание!</br> Конституента имеет потомков<br/> в операционной схеме синтеза' titleHtml='Внимание!</br> Конституента имеет потомков<br/> в операционной схеме синтеза'
/> />
) : null} ) : null}
{state.is_inherited ? ( {state.is_inherited ? (
<Indicator <Indicator
icon={<IconChild size='1.25rem' className='clr-text-primary' />} icon={<IconChild size='1.25rem' className='text-sec-600' />}
titleHtml='Внимание!</br> Конституента является наследником<br/>' titleHtml='Внимание!</br> Конституента является наследником<br/>'
/> />
) : null} ) : null}

12
rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
View File

@ -41,13 +41,13 @@ function RSFormStats({ stats, isArchive }: RSFormStatsProps) {
</div> </div>
<ValueStats <ValueStats
id='count_owned' 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} value={stats.count_all - stats.count_inherited}
title='Собственные' title='Собственные'
/> />
<ValueStats <ValueStats
id='count_inherited' 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} value={stats.count_inherited}
titleHtml={isArchive ? 'Архивные схемы не хранят<br/> информацию о наследовании' : 'Наследованные'} titleHtml={isArchive ? 'Архивные схемы не хранят<br/> информацию о наследовании' : 'Наследованные'}
/> />
@ -61,7 +61,7 @@ function RSFormStats({ stats, isArchive }: RSFormStatsProps) {
/> />
<ValueStats <ValueStats
id='count_property' 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} value={stats.count_errors}
title='Неразмерные' title='Неразмерные'
/> />
@ -130,19 +130,19 @@ function RSFormStats({ stats, isArchive }: RSFormStatsProps) {
<ValueStats <ValueStats
id='count_text_term' 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} value={stats.count_text_term}
title='Термины' title='Термины'
/> />
<ValueStats <ValueStats
id='count_definition' 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} value={stats.count_definition}
title='Определения' title='Определения'
/> />
<ValueStats <ValueStats
id='count_convention' 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} value={stats.count_convention}
title='Конвенции' title='Конвенции'
/> />

2
rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarItemAccess.tsx
View File

@ -44,7 +44,7 @@ function ToolbarItemAccess({ visible, toggleVisible, readOnly, toggleReadOnly, c
title={readOnly ? 'Изменение: запрещено' : 'Изменение: разрешено'} title={readOnly ? 'Изменение: запрещено' : 'Изменение: разрешено'}
icon={ icon={
readOnly ? ( 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' /> <IconMutable size='1.25rem' className='text-ok-600' />
) )

22
rsconcept/frontend/src/styling/color.ts
View File

@ -12,21 +12,21 @@ import { PARAMETER } from '@/utils/constants';
/** Semantic colors for application. */ /** Semantic colors for application. */
// prettier-ignore // prettier-ignore
export const APP_COLORS = { export const APP_COLORS = {
bgDefault: 'var(--clr-app-100)', bgDefault: 'var(--clr-prim-100)',
bgInput: 'var(--clr-app-0)', bgInput: 'var(--clr-prim-0)',
bgControls: 'var(--clr-app-200)', bgControls: 'var(--clr-prim-200)',
bgDisabled: 'var(--clr-app-300)', bgDisabled: 'var(--clr-prim-300)',
bgPrimary: 'var(--clr-prim-200)', bgPrimary: 'var(--clr-sec-600)',
bgSelected: 'var(--clr-prim-600)', bgSelected: 'var(--clr-sec-200)',
bgActiveSelection: 'var(--clr-select-node)', bgActiveSelection: 'var(--clr-select-node)',
bgHover: 'var(--clr-prim-800)', bgHover: 'var(--clr-sec-100)',
bgWarning: 'var(--clr-warn-100)', bgWarning: 'var(--clr-warn-100)',
border: 'var(--clr-app-400)', border: 'var(--clr-prim-400)',
fgDefault: 'var(--clr-app-999)', fgDefault: 'var(--clr-prim-999)',
fgSelected: 'var(--clr-app-999)', fgSelected: 'var(--clr-prim-999)',
fgDisabled: 'var(--clr-app-800)', fgDisabled: 'var(--clr-prim-800)',
fgWarning: 'var(--clr-warn-600)', fgWarning: 'var(--clr-warn-600)',
bgRed: 'var(--acc-bg-red)', bgRed: 'var(--acc-bg-red)',

70
rsconcept/frontend/src/styling/constants.css
View File

@ -20,34 +20,36 @@
--duration-modal: 300ms; --duration-modal: 300ms;
--duration-fade: 300ms; --duration-fade: 300ms;
--duration-select: 100ms; --duration-select: 100ms;
--transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
} }
/* Light Theme */ /* Light Theme */
/* prettier-ignore */ /* prettier-ignore */
:not(.dark):root { :not(.dark):root {
--clr-app-0: hsl(000, 000%, 100%); --clr-prim-0: hsl(000, 000%, 100%);
--clr-app-100: hsl(000, 000%, 098%); --clr-prim-100: hsl(000, 000%, 098%);
--clr-app-200: hsl(000, 000%, 094%); --clr-prim-200: hsl(000, 000%, 094%);
--clr-app-300: hsl(000, 000%, 091%); --clr-prim-300: hsl(000, 000%, 091%);
--clr-app-400: hsl(000, 000%, 080%); --clr-prim-400: hsl(000, 000%, 080%);
--clr-app-600: hsl(000, 000%, 065%); --clr-prim-600: hsl(000, 000%, 065%);
--clr-app-800: hsl(000, 000%, 047%); --clr-prim-800: hsl(000, 000%, 047%);
--clr-app-999: hsl(000, 000%, 000%); --clr-prim-999: hsl(000, 000%, 000%);
--clr-prim-100: hsl(220, 100%, 050%); --clr-sec-0: hsl(000, 000%, 100%);
--clr-prim-200: hsl(220, 100%, 060%); --clr-sec-100: hsl(190, 080%, 094%);
--clr-prim-300: hsl(220, 100%, 070%); --clr-sec-200: hsl(220, 080%, 092%);
--clr-prim-400: hsl(220, 100%, 080%); --clr-sec-300: hsl(220, 100%, 080%);
--clr-prim-600: hsl(220, 080%, 092%); --clr-sec-400: hsl(220, 100%, 070%);
--clr-prim-800: hsl(190, 080%, 094%); --clr-sec-600: hsl(220, 100%, 060%);
--clr-prim-999: hsl(000, 000%, 100%); --clr-sec-800: hsl(220, 100%, 050%);
--clr-warn-100: hsl(000, 100%, 095%); --clr-warn-100: hsl(000, 100%, 095%);
--clr-warn-600: hsl(000, 072%, 051%); --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 */ /* Highlight accents */
--acc-bg-red: hsl(000, 100%, 089%); --acc-bg-red: hsl(000, 100%, 089%);
@ -59,7 +61,7 @@
--acc-bg-green25: hsl(100, 100%, 096%); --acc-bg-green25: hsl(100, 100%, 096%);
--acc-bg-green50: hsl(100, 100%, 090%); --acc-bg-green50: hsl(100, 100%, 090%);
--acc-bg-orange50:hsl(028, 100%, 090%); --acc-bg-orange50: hsl(028, 100%, 090%);
--acc-fg-red: hsl(000, 090%, 045%); --acc-fg-red: hsl(000, 090%, 045%);
--acc-fg-green: hsl(100, 090%, 035%); --acc-fg-green: hsl(100, 090%, 035%);
@ -72,29 +74,29 @@
/* Dark Theme */ /* Dark Theme */
/* prettier-ignore */ /* prettier-ignore */
.dark:root { .dark:root {
--clr-app-0: hsl(000, 000%, 005%); --clr-prim-0: hsl(000, 000%, 005%);
--clr-app-100: hsl(000, 000%, 009%); --clr-prim-100: hsl(000, 000%, 009%);
--clr-app-200: hsl(000, 000%, 015%); --clr-prim-200: hsl(000, 000%, 015%);
--clr-app-300: hsl(000, 000%, 022%); --clr-prim-300: hsl(000, 000%, 022%);
--clr-app-400: hsl(000, 000%, 035%); --clr-prim-400: hsl(000, 000%, 035%);
--clr-app-600: hsl(000, 000%, 055%); --clr-prim-600: hsl(000, 000%, 055%);
--clr-app-800: hsl(000, 000%, 080%); --clr-prim-800: hsl(000, 000%, 080%);
--clr-app-999: hsl(000, 000%, 093%); --clr-prim-999: hsl(000, 000%, 093%);
--clr-prim-100: hsl(267, 070%, 070%); --clr-sec-800: hsl(267, 070%, 070%);
--clr-prim-200: hsl(267, 050%, 060%); --clr-sec-600: hsl(267, 050%, 060%);
--clr-prim-300: hsl(267, 050%, 050%); --clr-sec-400: hsl(267, 050%, 050%);
--clr-prim-400: hsl(267, 050%, 040%); --clr-sec-300: hsl(267, 050%, 040%);
--clr-prim-600: hsl(267, 050%, 032%); --clr-sec-200: hsl(267, 050%, 032%);
--clr-prim-800: hsl(269, 030%, 028%); --clr-sec-100: hsl(269, 030%, 028%);
--clr-prim-999: hsl(000, 000%, 100%); --clr-sec-0: hsl(000, 000%, 100%);
--clr-warn-100: hsl(000, 100%, 015%); --clr-warn-100: hsl(000, 100%, 015%);
--clr-warn-600: hsl(000, 080%, 055%); --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 */ /* Highlight accents */
--acc-bg-red: hsl(000, 080%, 037%); --acc-bg-red: hsl(000, 080%, 037%);
@ -106,7 +108,7 @@
--acc-bg-green25: hsl(100, 080%, 009%); --acc-bg-green25: hsl(100, 080%, 009%);
--acc-bg-green50: hsl(100, 080%, 017%); --acc-bg-green50: hsl(100, 080%, 017%);
--acc-bg-orange50:hsl(035, 100%, 016%); --acc-bg-orange50: hsl(035, 100%, 016%);
--acc-fg-red: hsl(000, 080%, 045%); --acc-fg-red: hsl(000, 080%, 045%);
--acc-fg-green: hsl(100, 080%, 035%); --acc-fg-green: hsl(100, 080%, 035%);

34
rsconcept/frontend/src/styling/overrides.css
View File

@ -6,7 +6,7 @@
:root { :root {
/* Import overrides */ /* Import overrides */
--toastify-color-dark: var(--clr-app-300); --toastify-color-dark: var(--clr-prim-300);
} }
.cm-tooltip { .cm-tooltip {
@ -18,7 +18,7 @@
overflow-y: auto; overflow-y: auto;
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
border-color: var(--clr-app-400); border-color: var(--clr-prim-400);
border-width: 1px; border-width: 1px;
border-radius: 0.25rem; border-radius: 0.25rem;
@ -28,26 +28,26 @@
padding-bottom: 0.15rem; padding-bottom: 0.15rem;
} }
.cm-editor.cm-focused { .cm-editor.cm-focused {
border-color: var(--clr-app-400); border-color: var(--clr-prim-400);
outline-color: var(--clr-prim-200); outline-color: var(--clr-sec-600);
outline-style: solid; outline-style: solid;
outline-width: 2px; outline-width: 2px;
} }
.cm-editor .cm-placeholder { .cm-editor .cm-placeholder {
font-family: var(--font-main); font-family: var(--font-main);
color: var(--clr-app-600); color: var(--clr-prim-600);
} }
.react-flow__handle { .react-flow__handle {
cursor: default !important; cursor: default !important;
border-radius: 9999px; border-radius: 9999px;
border-color: var(--clr-app-400); border-color: var(--clr-prim-400);
background-color: var(--clr-app-0); background-color: var(--clr-prim-0);
.selected & { .selected & {
border-color: var(--clr-app-800); border-color: var(--clr-prim-800);
} }
} }
@ -66,20 +66,20 @@
margin-right: 3px; margin-right: 3px;
background-color: transparent; background-color: transparent;
color: var(--clr-app-600); color: var(--clr-prim-600);
} }
[class*='react-flow__node-'] { [class*='react-flow__node-'] {
font-size: 14px; font-size: 14px;
border: 1px solid; border: 1px solid;
background-color: var(--clr-app-0); background-color: var(--clr-prim-0);
color: var(--clr-app-999); color: var(--clr-prim-999);
border-color: var(--clr-app-400); border-color: var(--clr-prim-400);
background-color: var(--clr-app-0); background-color: var(--clr-prim-0);
&:hover:not(.selected) { &: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; outline-color: transparent;
transition-property: outline-offset; 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); transition-duration: var(--duration-select);
&.selected { &.selected {
outline-offset: 4px; outline-offset: 4px;
outline-color: var(--clr-select-node); 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; outline-color: transparent;
transition-property: outline-offset; 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); transition-duration: var(--duration-select);
&.selected { &.selected {

12
rsconcept/frontend/src/styling/setup.css
View File

@ -58,9 +58,9 @@ body {
line-height: var(--line-height); line-height: var(--line-height);
font-family: var(--font-main); font-family: var(--font-main);
color: var(--clr-app-999); color: var(--clr-prim-999);
border-color: var(--clr-app-400); border-color: var(--clr-prim-400);
background-color: var(--clr-app-100); background-color: var(--clr-prim-100);
} }
@media only screen and (max-width: 639px) { @media only screen and (max-width: 639px) {
@ -78,14 +78,14 @@ body {
} }
::selection { ::selection {
background: var(--clr-prim-800); background: var(--clr-sec-100);
tr :hover& { tr :hover& {
background: var(--clr-warn-100); background: var(--clr-warn-100);
} }
} }
::placeholder { ::placeholder {
color: var(--clr-app-600); color: var(--clr-prim-600);
} }
/* Wrapping headers */ /* Wrapping headers */
@ -170,7 +170,7 @@ div:not(.dense) > p:not(:last-child) {
.divide-y, .divide-y,
.divide-x-2, .divide-x-2,
.divide-y-2 { .divide-y-2 {
border-color: var(--clr-app-400); border-color: var(--clr-prim-400);
& > :not([hidden]) ~ :not([hidden]) { & > :not([hidden]) ~ :not([hidden]) {
border-color: inherit; border-color: inherit;
} }

73
rsconcept/frontend/src/styling/styles.css
View File

@ -21,73 +21,61 @@
} }
@layer components { @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 { .clr-input {
background-color: var(--clr-app-0); background-color: var(--clr-prim-0);
&:disabled { &:disabled {
background-color: var(--clr-app-100); background-color: var(--clr-prim-100);
} }
} }
.clr-controls, .clr-selected {
.clr-tab, color: var(--clr-prim-999);
background-color: var(--clr-sec-200);
}
.clr-btn-default { .clr-btn-default {
background-color: var(--clr-app-200); background-color: var(--clr-prim-200);
} }
.clr-primary, .clr-primary,
.clr-btn-primary:hover, .clr-btn-primary:hover,
.clr-btn-primary:focus-visible { .clr-btn-primary:focus-visible {
@apply transition; @apply transition;
color: var(--clr-prim-999); color: var(--clr-sec-0);
background-color: var(--clr-prim-200); background-color: var(--clr-sec-600);
} }
.clr-selected,
.clr-btn-primary { .clr-btn-primary {
color: var(--clr-app-999); color: var(--clr-prim-999);
background-color: var(--clr-prim-600); background-color: var(--clr-sec-200);
} }
:is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled { :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
@apply transition; @apply transition;
color: var(--clr-app-800); color: var(--clr-prim-800);
background-color: var(--clr-app-200); 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; @apply transition;
color: var(--clr-app-999); color: var(--clr-prim-999);
background-color: var(--clr-prim-800); background-color: var(--clr-sec-100);
} }
:is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible, :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
.focus-frame:has(:focus-visible) { .focus-frame:has(:focus-visible) {
outline-width: 2px; outline-width: 2px;
outline-style: solid; outline-style: solid;
outline-color: var(--clr-prim-200); outline-color: var(--clr-sec-600);
}
.clr-text-primary {
color: var(--clr-prim-100);
} }
.clr-text-controls, .clr-text-controls,
.clr-btn-nav, .clr-btn-nav,
.clr-btn-clear { .clr-btn-clear {
color: var(--clr-app-800); color: var(--clr-prim-800);
background-color: transparent; background-color: transparent;
&:disabled { &:disabled {
color: var(--clr-app-600); color: var(--clr-prim-600);
} }
} }
@ -95,13 +83,13 @@
input:disabled:not(::placeholder), input:disabled:not(::placeholder),
textarea:disabled:not(::placeholder) { textarea:disabled:not(::placeholder) {
opacity: 1; opacity: 1;
-webkit-text-fill-color: var(--clr-app-999); -webkit-text-fill-color: var(--clr-prim-999);
color: var(--clr-app-999); color: var(--clr-prim-999);
} }
.icon-primary { .icon-primary {
:not([disabled]) > & { :not([disabled]) > & {
color: var(--clr-prim-100); color: var(--clr-sec-800);
} }
} }
@ -123,7 +111,7 @@
margin-left: 0.1rem; margin-left: 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
transform: translate(0, -0.2rem); transform: translate(0, -0.2rem);
color: var(--clr-prim-100); color: var(--clr-sec-800);
} }
.cc-tab-tools { .cc-tab-tools {
@ -172,18 +160,13 @@
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
} }
.cc-modal-blur {
opacity: 0.3;
backdrop-filter: blur(2px);
}
.cc-shadow-border { .cc-shadow-border {
@apply shadow-sm shadow-[var(--clr-app-400)]; box-shadow: 0 1px 2px 0 var(--clr-prim-400);
} }
.cc-animate-position { .cc-animate-position {
transition-property: transform top left bottom right margin padding; 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); transition-duration: var(--duration-move);
} }
@ -191,7 +174,7 @@
opacity: 1; opacity: 1;
transition-property: opacity; 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); transition-duration: var(--duration-fade);
@starting-style { @starting-style {
@ -204,7 +187,7 @@
opacity: 1; opacity: 1;
transition-property: clip-path, opacity; 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); transition-duration: var(--duration-modal);
@starting-style { @starting-style {

20
rsconcept/frontend/tailwind.config.js
View File

@ -9,17 +9,8 @@ export default {
transparent: 'transparent', transparent: 'transparent',
current: 'currentColor', current: 'currentColor',
inherit: 'inherit', 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: { prim: {
0: 'var(--clr-prim-0)',
100: 'var(--clr-prim-100)', 100: 'var(--clr-prim-100)',
200: 'var(--clr-prim-200)', 200: 'var(--clr-prim-200)',
300: 'var(--clr-prim-300)', 300: 'var(--clr-prim-300)',
@ -28,6 +19,15 @@ export default {
800: 'var(--clr-prim-800)', 800: 'var(--clr-prim-800)',
999: 'var(--clr-prim-999)' 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: { warn: {
100: 'var(--clr-warn-100)', 100: 'var(--clr-warn-100)',
600: 'var(--clr-warn-600)' 600: 'var(--clr-warn-600)'