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
- 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>

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

@ -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>
);

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>) {
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'} />;
}
}

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

@ -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' />
)
}
/>

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

@ -68,7 +68,7 @@ function Checkbox({
'border rounded-sm',
{
'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',
{
'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
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}>

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

@ -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) : []) }}
>

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

@ -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'

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

@ -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'>

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

@ -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'
)}

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

@ -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',

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

@ -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 (

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

@ -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>

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'
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)}
>
Добавить комментарий

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

@ -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 ? (

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

@ -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'),

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

@ -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') }}

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

@ -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='Внешние'
/>

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

@ -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}

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

@ -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}

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

@ -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='Конвенции'
/>

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

@ -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' />
)

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

@ -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)',

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

@ -20,34 +20,36 @@
--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-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%);
@ -59,7 +61,7 @@
--acc-bg-green25: hsl(100, 100%, 096%);
--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-green: hsl(100, 090%, 035%);
@ -72,29 +74,29 @@
/* 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-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%);
@ -106,7 +108,7 @@
--acc-bg-green25: hsl(100, 080%, 009%);
--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-green: hsl(100, 080%, 035%);

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

@ -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 {

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

@ -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;
}

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

@ -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 {

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

@ -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)'