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

F: More color simplifications

Browse Source
This commit is contained in:
Ivan 2025-04-13 19:05:47 +03:00
parent 873a26483c
commit cc119c73a4
20 changed files with 36 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rsconcept/frontend/src/app/footer.tsx
View File

@ -10,7 +10,7 @@ export function Footer() {
'z-navigation',
'mx-auto',
'px-3 py-2 flex flex-col items-center gap-1',
'text-xs sm:text-sm select-none whitespace-nowrap text-inert-foreground bg-background'
'text-xs sm:text-sm select-none whitespace-nowrap text-muted-foreground bg-background'
)}
>
<nav className='flex gap-3' aria-label='Вторичная навигация'>

2
rsconcept/frontend/src/components/ui/combo-box.tsx
View File

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

12
rsconcept/frontend/src/components/ui/combo-multi.tsx
View File

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

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

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

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

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

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

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

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

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

21
rsconcept/frontend/src/features/rsform/colors.ts
View File

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

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

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

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

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

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

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

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

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

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

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

2
rsconcept/frontend/src/features/users/components/table-users.tsx
View File

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

9
rsconcept/frontend/src/index.css
View File

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

2
rsconcept/frontend/src/styling/colors.ts
View File

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

4
rsconcept/frontend/src/styling/components.css
View File

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

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

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

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

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

11
rsconcept/frontend/src/styling/utilities.css
View File

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