ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 04:50:36 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

R: Split colors declarations

Browse Source
This commit is contained in:
Ivan 2025-02-11 21:07:23 +03:00
parent 301f388788
commit aeac2c2941
36 changed files with 117 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rsconcept/frontend/src/components/Input/SelectMulti.tsx
View File

@ -10,7 +10,7 @@ import Select, {
} from 'react-select';
import useWindowSize from '@/hooks/useWindowSize';
import { APP_COLORS, SELECT_THEME } from '@/styling/color';
import { APP_COLORS, SELECT_THEME } from '@/styling/colors';
import { IconClose, IconDropArrow, IconDropArrowUp } from '../Icons';

2
rsconcept/frontend/src/components/Input/SelectSingle.tsx
View File

@ -10,7 +10,7 @@ import Select, {
} from 'react-select';
import useWindowSize from '@/hooks/useWindowSize';
import { APP_COLORS, SELECT_THEME } from '@/styling/color';
import { APP_COLORS, SELECT_THEME } from '@/styling/colors';
import { IconClose, IconDropArrow, IconDropArrowUp } from '../Icons';

2
rsconcept/frontend/src/components/Loader.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
interface LoaderProps {
/** Scale of the loader from 1 to 10. */

2
rsconcept/frontend/src/features/help/components/InfoCstClass.tsx
View File

@ -1,8 +1,8 @@
import clsx from 'clsx';
import { colorBgCstClass } from '@/features/rsform/colors';
import { describeCstClass, labelCstClass } from '@/features/rsform/labels';
import { CstClass } from '@/features/rsform/models/rsform';
import { colorBgCstClass } from '@/styling/color';
import { prefixes } from '@/utils/constants';
interface InfoCstClassProps {

2
rsconcept/frontend/src/features/help/components/InfoCstStatus.tsx
View File

@ -1,8 +1,8 @@
import clsx from 'clsx';
import { colorBgCstStatus } from '@/features/rsform/colors';
import { describeExpressionStatus, labelExpressionStatus } from '@/features/rsform/labels';
import { ExpressionStatus } from '@/features/rsform/models/rsform';
import { colorBgCstStatus } from '@/styling/color';
import { prefixes } from '@/utils/constants';
interface InfoCstStatusProps {

2
rsconcept/frontend/src/features/help/items/ui/HelpFormulaTree.tsx
View File

@ -1,4 +1,4 @@
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
function HelpFormulaTree() {
return (

2
rsconcept/frontend/src/features/help/items/ui/HelpLibrary.tsx
View File

@ -16,7 +16,7 @@ import {
IconSubfolders,
IconUserSearch
} from '@/components/Icons';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { LinkTopic } from '../../components/LinkTopic';
import { HelpTopic } from '../../models/helpTopic';

2
rsconcept/frontend/src/features/help/items/ui/HelpRSEditor.tsx
View File

@ -18,7 +18,7 @@ import {
IconTree,
IconTypeGraph
} from '@/components/Icons';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { LinkTopic } from '../../components/LinkTopic';
import { HelpTopic } from '../../models/helpTopic';

2
rsconcept/frontend/src/features/help/items/ui/HelpRSGraphTerm.tsx
View File

@ -20,7 +20,7 @@ import {
IconText,
IconTypeGraph
} from '@/components/Icons';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { LinkTopic } from '../../components/LinkTopic';
import { HelpTopic } from '../../models/helpTopic';

2
rsconcept/frontend/src/features/help/items/ui/HelpTypeGraph.tsx
View File

@ -1,4 +1,4 @@
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { LinkTopic } from '../../components/LinkTopic';
import { HelpTopic } from '../../models/helpTopic';

2
rsconcept/frontend/src/features/library/pages/LibraryPage/TableLibraryItems.tsx
View File

@ -14,7 +14,7 @@ import { useLabelUser } from '@/features/users/backend/useLabelUser';
import useWindowSize from '@/hooks/useWindowSize';
import { useFitHeight } from '@/stores/appLayout';
import { usePreferencesStore } from '@/stores/preferences';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import BadgeLocation from '../../components/BadgeLocation';
import { ILibraryItem, LibraryItemType } from '../../models/library';

2
rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/TabSynthesis.tsx
View File

@ -1,7 +1,7 @@
import { TextArea } from '@/components/Input';
import PickSubstitutions from '@/features/rsform/components/PickSubstitutions';
import { IRSForm } from '@/features/rsform/models/rsform';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { ICstSubstitute } from '../../models/oss';

2
rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx
View File

@ -22,7 +22,7 @@ import { CProps } from '@/components/props';
import { useLibrary } from '@/features/library/backend/useLibrary';
import { useMainHeight } from '@/stores/appLayout';
import { useModificationStore } from '@/stores/modification';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { PARAMETER } from '@/utils/constants';
import { errors } from '@/utils/labels';

78
rsconcept/frontend/src/styling/color.ts → rsconcept/frontend/src/features/rsform/colors.ts
View File

@ -1,77 +1,11 @@
/**
* Module: Single place for all color definitions in code (see index.css for full defs).
*/
import { GramData, Grammeme, NounGrams, PartOfSpeech, VerbGrams } from '@/features/rsform/models/language';
import { CstClass, ExpressionStatus, IConstituenta } from '@/features/rsform/models/rsform';
import { ISyntaxTreeNode, TokenID } from '@/features/rsform/models/rslang';
import { TMGraphNode } from '@/features/rsform/models/TMGraph';
import { GraphColoring } from '@/features/rsform/stores/termGraph';
import { APP_COLORS } from '@/styling/colors';
import { PARAMETER } from '@/utils/constants';
/** Semantic colors for application. */
// prettier-ignore
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)',
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)',
bgGreen: 'var(--acc-bg-green)',
bgBlue: 'var(--acc-bg-blue)',
bgPurple: 'var(--acc-bg-purple)',
bgTeal: 'var(--acc-bg-teal)',
bgOrange: 'var(--acc-bg-orange)',
bgGreen25: 'var(--acc-bg-green25)',
bgGreen50: 'var(--acc-bg-green50)',
bgOrange50: 'var(--acc-bg-orange50)',
fgRed: 'var(--acc-fg-red)',
fgGreen: 'var(--acc-fg-green)',
fgBlue: 'var(--acc-fg-blue)',
fgPurple: 'var(--acc-fg-purple)',
fgTeal: 'var(--acc-fg-teal)',
fgOrange: 'var(--acc-fg-orange)'
}
/**
* Represents Select component theme.
*/
export const SELECT_THEME = {
primary: APP_COLORS.bgPrimary,
primary75: APP_COLORS.bgSelected,
primary50: APP_COLORS.bgHover,
primary25: APP_COLORS.bgHover,
danger: APP_COLORS.fgWarning,
dangerLight: APP_COLORS.bgWarning,
neutral0: APP_COLORS.bgInput,
neutral5: APP_COLORS.bgDefault,
neutral10: APP_COLORS.border,
neutral20: APP_COLORS.border,
neutral30: APP_COLORS.border,
neutral40: APP_COLORS.fgDisabled,
neutral50: APP_COLORS.fgDisabled, // placeholder
neutral60: APP_COLORS.fgDefault,
neutral70: APP_COLORS.fgWarning,
neutral80: APP_COLORS.fgDefault,
neutral90: APP_COLORS.fgWarning
};
import { GramData, Grammeme, NounGrams, PartOfSpeech, VerbGrams } from './models/language';
import { CstClass, ExpressionStatus, IConstituenta } from './models/rsform';
import { ISyntaxTreeNode, TokenID } from './models/rslang';
import { TMGraphNode } from './models/TMGraph';
import { GraphColoring } from './stores/termGraph';
/**
* Represents Brackets highlights theme.

3
rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx
View File

@ -2,9 +2,10 @@ import clsx from 'clsx';
import { CProps } from '@/components/props';
import { useTooltipsStore } from '@/stores/tooltips';
import { APP_COLORS, colorFgCstStatus } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { globals } from '@/utils/constants';
import { colorFgCstStatus } from '../colors';
import { CstClass, IConstituenta } from '../models/rsform';
interface BadgeConstituentaProps extends CProps.Styling {

3
rsconcept/frontend/src/features/rsform/components/BadgeGrammeme.tsx
View File

@ -1,7 +1,8 @@
import clsx from 'clsx';
import { APP_COLORS, colorFgGrammeme } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { colorFgGrammeme } from '../colors';
import { labelGrammeme } from '../labels';
import { GramData } from '../models/language';

2
rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx
View File

@ -7,7 +7,7 @@ import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/D
import { CProps } from '@/components/props';
import { SearchBar } from '@/components/shared/SearchBar';
import { NoData } from '@/components/View';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { describeConstituenta } from '../labels';
import { IConstituenta } from '../models/rsform';

2
rsconcept/frontend/src/features/rsform/components/PickSchema.tsx
View File

@ -11,7 +11,7 @@ import { CProps } from '@/components/props';
import { SearchBar } from '@/components/shared/SearchBar';
import { ILibraryItem, LibraryItemID, LibraryItemType } from '@/features/library/models/library';
import { matchLibraryItem } from '@/features/library/models/libraryAPI';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { prefixes } from '@/utils/constants';
import SelectLocation from '../../library/components/SelectLocation';

2
rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx
View File

@ -12,7 +12,7 @@ import { NoData } from '@/components/View';
import SelectLibraryItem from '@/features/library/components/SelectLibraryItem';
import { ILibraryItem } from '@/features/library/models/library';
import { ICstSubstitute, IMultiSubstitution } from '@/features/oss/models/oss';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { errors } from '@/utils/labels';
import { ConstituentaID, IConstituenta, IRSForm } from '../models/rsform';

2
rsconcept/frontend/src/features/rsform/components/RSInput/RSInput.tsx
View File

@ -10,7 +10,7 @@ import { forwardRef, useRef } from 'react';
import { Label } from '@/components/Input';
import { usePreferencesStore } from '@/stores/preferences';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { ConstituentaID, IRSForm } from '../../models/rsform';
import { generateAlias, getCstTypePrefix, guessCstType } from '../../models/rsformAPI';

2
rsconcept/frontend/src/features/rsform/components/RSInput/bracketMatching.ts
View File

@ -1,7 +1,7 @@
import { bracketMatching, MatchResult } from '@codemirror/language';
import { Decoration, EditorView } from '@codemirror/view';
import { BRACKETS_THEME } from '@/styling/color';
import { BRACKETS_THEME } from '../../colors';
const matchingMark = Decoration.mark({ class: 'cc-matchingBracket' });
const nonMatchingMark = Decoration.mark({ class: 'cc-nonmatchingBracket' });

2
rsconcept/frontend/src/features/rsform/components/RefsInput/RefsInput.tsx
View File

@ -11,7 +11,7 @@ import { forwardRef, useRef, useState } from 'react';
import { Label } from '@/components/Input';
import { DialogType, useDialogsStore } from '@/stores/dialogs';
import { usePreferencesStore } from '@/stores/preferences';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { CodeMirrorWrapper } from '@/utils/codemirror';
import { ReferenceType } from '../../models/language';

3
rsconcept/frontend/src/features/rsform/components/RefsInput/tooltip.ts
View File

@ -3,9 +3,10 @@ import { Extension } from '@codemirror/state';
import { hoverTooltip, TooltipView } from '@codemirror/view';
import clsx from 'clsx';
import { APP_COLORS, colorFgGrammeme } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { findContainedNodes, findReferenceAt } from '@/utils/codemirror';
import { colorFgGrammeme } from '../../colors';
import { labelGrammeme } from '../../labels';
import { describeConstituentaTerm } from '../../labels';
import { IEntityReference, ISyntacticReference } from '../../models/language';

2
rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx
View File

@ -8,7 +8,7 @@ import { MiniButton } from '@/components/Control';
import DataTable, { IConditionalStyle } from '@/components/DataTable';
import { IconAccept, IconRemove, IconReset } from '@/components/Icons';
import { NoData } from '@/components/View';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import PickConstituenta from '../../components/PickConstituenta';
import RSInput from '../../components/RSInput';

2
rsconcept/frontend/src/features/rsform/dialogs/DlgEditVersions/TableVersions.tsx
View File

@ -7,7 +7,7 @@ import { MiniButton } from '@/components/Control';
import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/DataTable';
import { IconRemove } from '@/components/Icons';
import { IVersionInfo, VersionID } from '@/features/library/models/library';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
interface TableVersionsProps {
processing: boolean;

3
rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/graph/ASTNode.tsx
View File

@ -2,8 +2,9 @@
import { Handle, Position } from 'reactflow';
import { APP_COLORS, colorBgSyntaxTree } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { colorBgSyntaxTree } from '../../../colors';
import { labelSyntaxTree } from '../../../labels';
import { ISyntaxTreeNode } from '../../../models/rslang';

2
rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx
View File

@ -1,6 +1,6 @@
import { EdgeProps, SimpleBezierEdge } from 'reactflow';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
/**
* Represents graph TMGraph edge internal data.

6
rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx
View File

@ -2,10 +2,12 @@
import { Handle, Position } from 'reactflow';
import { TMGraphNode } from '@/features/rsform/models/TMGraph';
import { APP_COLORS, colorBgTMGraphNode } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { globals } from '@/utils/constants';
import { colorBgTMGraphNode } from '../../../colors';
import { TMGraphNode } from '../../../models/TMGraph';
/**
* Represents graph TMGraph node internal data.
*/

3
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
View File

@ -4,10 +4,11 @@ import clsx from 'clsx';
import { StatusIcon } from '@/components/DomainIcons';
import { Loader } from '@/components/Loader';
import { APP_COLORS, colorStatusBar } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { globals } from '@/utils/constants';
import { prepareTooltip } from '@/utils/utils';
import { colorStatusBar } from '../../../colors';
import { labelExpressionStatus } from '../../../labels';
import { ExpressionStatus, IConstituenta } from '../../../models/rsform';
import { inferStatus } from '../../../models/rsformAPI';

2
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx
View File

@ -2,9 +2,9 @@ import { Tooltip } from '@/components/Container';
import { IconHelp } from '@/components/Icons';
import { useLibrary } from '@/features/library/backend/useLibrary';
import { LibraryItemID } from '@/features/library/models/library';
import { colorBgSchemas } from '@/styling/color';
import { globals, prefixes } from '@/utils/constants';
import { colorBgSchemas } from '../../../colors';
import { IRSForm } from '../../../models/rsform';
interface SchemasGuideProps {

3
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
View File

@ -23,11 +23,12 @@ import { Overlay } from '@/components/Container';
import { CProps } from '@/components/props';
import { useMainHeight } from '@/stores/appLayout';
import { useDialogsStore } from '@/stores/dialogs';
import { APP_COLORS, colorBgGraphNode } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { PARAMETER } from '@/utils/constants';
import { errors } from '@/utils/labels';
import { useMutatingRSForm } from '../../../backend/useMutatingRSForm';
import { colorBgGraphNode } from '../../../colors';
import InfoConstituenta from '../../../components/InfoConstituenta';
import ToolbarGraphSelection from '../../../components/ToolbarGraphSelection';
import { ConstituentaID, CstType, IConstituenta, IRSForm } from '../../../models/rsform';

2
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx
View File

@ -2,7 +2,7 @@
import { MiniButton } from '@/components/Control';
import { IconGraphInputs, IconGraphOutputs, IconReset } from '@/components/Icons';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { IConstituenta } from '../../../models/rsform';
import { useRSEdit } from '../RSEditContext';

3
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
View File

@ -9,9 +9,10 @@ import { CProps } from '@/components/props';
import useWindowSize from '@/hooks/useWindowSize';
import { useFitHeight } from '@/stores/appLayout';
import { useTooltipsStore } from '@/stores/tooltips';
import { APP_COLORS, colorBgGraphNode } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { globals, PARAMETER, prefixes } from '@/utils/constants';
import { colorBgGraphNode } from '../../../colors';
import { ConstituentaID, IRSForm } from '../../../models/rsform';
import { GraphColoring, useTermGraphStore } from '../../../stores/termGraph';
import { useRSEdit } from '../RSEditContext';

2
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
View File

@ -2,7 +2,7 @@
import { Handle, Position } from 'reactflow';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { truncateToLastWord } from '@/utils/utils';
const MAX_DESCRIPTION_LENGTH = 65;

2
rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx
View File

@ -4,7 +4,7 @@ import { useEffect } from 'react';
import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/DataTable';
import { NoData, TextContent } from '@/components/View';
import { APP_COLORS } from '@/styling/color';
import { APP_COLORS } from '@/styling/colors';
import { PARAMETER, prefixes } from '@/utils/constants';
import BadgeConstituenta from '../../../components/BadgeConstituenta';

67
rsconcept/frontend/src/styling/colors.ts Normal file
View File

@ -0,0 +1,67 @@
/**
* Module: Single place for all color definitions in code (see index.css for full defs).
*/
/** Semantic colors for application. */
// prettier-ignore
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)',
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)',
bgGreen: 'var(--acc-bg-green)',
bgBlue: 'var(--acc-bg-blue)',
bgPurple: 'var(--acc-bg-purple)',
bgTeal: 'var(--acc-bg-teal)',
bgOrange: 'var(--acc-bg-orange)',
bgGreen25: 'var(--acc-bg-green25)',
bgGreen50: 'var(--acc-bg-green50)',
bgOrange50: 'var(--acc-bg-orange50)',
fgRed: 'var(--acc-fg-red)',
fgGreen: 'var(--acc-fg-green)',
fgBlue: 'var(--acc-fg-blue)',
fgPurple: 'var(--acc-fg-purple)',
fgTeal: 'var(--acc-fg-teal)',
fgOrange: 'var(--acc-fg-orange)'
}
/**
* Represents Select component theme.
*/
export const SELECT_THEME = {
primary: APP_COLORS.bgPrimary,
primary75: APP_COLORS.bgSelected,
primary50: APP_COLORS.bgHover,
primary25: APP_COLORS.bgHover,
danger: APP_COLORS.fgWarning,
dangerLight: APP_COLORS.bgWarning,
neutral0: APP_COLORS.bgInput,
neutral5: APP_COLORS.bgDefault,
neutral10: APP_COLORS.border,
neutral20: APP_COLORS.border,
neutral30: APP_COLORS.border,
neutral40: APP_COLORS.fgDisabled,
neutral50: APP_COLORS.fgDisabled, // placeholder
neutral60: APP_COLORS.fgDefault,
neutral70: APP_COLORS.fgWarning,
neutral80: APP_COLORS.fgDefault,
neutral90: APP_COLORS.fgWarning
};