From aeac2c29414d5300f90b818048557fa6c64e5871 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Tue, 11 Feb 2025 21:07:23 +0300 Subject: [PATCH] R: Split colors declarations --- .../src/components/Input/SelectMulti.tsx | 2 +- .../src/components/Input/SelectSingle.tsx | 2 +- rsconcept/frontend/src/components/Loader.tsx | 2 +- .../features/help/components/InfoCstClass.tsx | 2 +- .../help/components/InfoCstStatus.tsx | 2 +- .../help/items/ui/HelpFormulaTree.tsx | 2 +- .../features/help/items/ui/HelpLibrary.tsx | 2 +- .../features/help/items/ui/HelpRSEditor.tsx | 2 +- .../help/items/ui/HelpRSGraphTerm.tsx | 2 +- .../features/help/items/ui/HelpTypeGraph.tsx | 2 +- .../pages/LibraryPage/TableLibraryItems.tsx | 2 +- .../dialogs/DlgEditOperation/TabSynthesis.tsx | 2 +- .../pages/OssPage/EditorOssGraph/OssFlow.tsx | 2 +- .../color.ts => features/rsform/colors.ts} | 78 ++----------------- .../rsform/components/BadgeConstituenta.tsx | 3 +- .../rsform/components/BadgeGrammeme.tsx | 3 +- .../rsform/components/PickConstituenta.tsx | 2 +- .../features/rsform/components/PickSchema.tsx | 2 +- .../rsform/components/PickSubstitutions.tsx | 2 +- .../rsform/components/RSInput/RSInput.tsx | 2 +- .../components/RSInput/bracketMatching.ts | 2 +- .../rsform/components/RefsInput/RefsInput.tsx | 2 +- .../rsform/components/RefsInput/tooltip.ts | 3 +- .../dialogs/DlgCstTemplate/TabArguments.tsx | 2 +- .../dialogs/DlgEditVersions/TableVersions.tsx | 2 +- .../dialogs/DlgShowAST/graph/ASTNode.tsx | 3 +- .../DlgShowTypeGraph/graph/CartesianEdge.tsx | 2 +- .../DlgShowTypeGraph/graph/MGraphNode.tsx | 6 +- .../EditorRSExpression/StatusBar.tsx | 3 +- .../EditorTermGraph/SchemasGuide.tsx | 2 +- .../RSFormPage/EditorTermGraph/TGFlow.tsx | 3 +- .../EditorTermGraph/ToolbarFocusedCst.tsx | 2 +- .../RSFormPage/EditorTermGraph/ViewHidden.tsx | 3 +- .../EditorTermGraph/graph/TGNode.tsx | 2 +- .../TableSideConstituents.tsx | 2 +- rsconcept/frontend/src/styling/colors.ts | 67 ++++++++++++++++ 36 files changed, 117 insertions(+), 107 deletions(-) rename rsconcept/frontend/src/{styling/color.ts => features/rsform/colors.ts} (75%) create mode 100644 rsconcept/frontend/src/styling/colors.ts diff --git a/rsconcept/frontend/src/components/Input/SelectMulti.tsx b/rsconcept/frontend/src/components/Input/SelectMulti.tsx index 810679d9..8e08812a 100644 --- a/rsconcept/frontend/src/components/Input/SelectMulti.tsx +++ b/rsconcept/frontend/src/components/Input/SelectMulti.tsx @@ -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'; diff --git a/rsconcept/frontend/src/components/Input/SelectSingle.tsx b/rsconcept/frontend/src/components/Input/SelectSingle.tsx index ade9a245..a8bedbd6 100644 --- a/rsconcept/frontend/src/components/Input/SelectSingle.tsx +++ b/rsconcept/frontend/src/components/Input/SelectSingle.tsx @@ -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'; diff --git a/rsconcept/frontend/src/components/Loader.tsx b/rsconcept/frontend/src/components/Loader.tsx index e6f34b2f..4b30c880 100644 --- a/rsconcept/frontend/src/components/Loader.tsx +++ b/rsconcept/frontend/src/components/Loader.tsx @@ -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. */ diff --git a/rsconcept/frontend/src/features/help/components/InfoCstClass.tsx b/rsconcept/frontend/src/features/help/components/InfoCstClass.tsx index 32d50826..79bf0c13 100644 --- a/rsconcept/frontend/src/features/help/components/InfoCstClass.tsx +++ b/rsconcept/frontend/src/features/help/components/InfoCstClass.tsx @@ -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 { diff --git a/rsconcept/frontend/src/features/help/components/InfoCstStatus.tsx b/rsconcept/frontend/src/features/help/components/InfoCstStatus.tsx index ce406ed8..d2b058ec 100644 --- a/rsconcept/frontend/src/features/help/components/InfoCstStatus.tsx +++ b/rsconcept/frontend/src/features/help/components/InfoCstStatus.tsx @@ -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 { diff --git a/rsconcept/frontend/src/features/help/items/ui/HelpFormulaTree.tsx b/rsconcept/frontend/src/features/help/items/ui/HelpFormulaTree.tsx index 55c593e8..fe59d6bd 100644 --- a/rsconcept/frontend/src/features/help/items/ui/HelpFormulaTree.tsx +++ b/rsconcept/frontend/src/features/help/items/ui/HelpFormulaTree.tsx @@ -1,4 +1,4 @@ -import { APP_COLORS } from '@/styling/color'; +import { APP_COLORS } from '@/styling/colors'; function HelpFormulaTree() { return ( diff --git a/rsconcept/frontend/src/features/help/items/ui/HelpLibrary.tsx b/rsconcept/frontend/src/features/help/items/ui/HelpLibrary.tsx index 5157efed..db15d5ec 100644 --- a/rsconcept/frontend/src/features/help/items/ui/HelpLibrary.tsx +++ b/rsconcept/frontend/src/features/help/items/ui/HelpLibrary.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/help/items/ui/HelpRSEditor.tsx b/rsconcept/frontend/src/features/help/items/ui/HelpRSEditor.tsx index fd4a9eaa..8a07eb56 100644 --- a/rsconcept/frontend/src/features/help/items/ui/HelpRSEditor.tsx +++ b/rsconcept/frontend/src/features/help/items/ui/HelpRSEditor.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/help/items/ui/HelpRSGraphTerm.tsx b/rsconcept/frontend/src/features/help/items/ui/HelpRSGraphTerm.tsx index f455321b..21670e60 100644 --- a/rsconcept/frontend/src/features/help/items/ui/HelpRSGraphTerm.tsx +++ b/rsconcept/frontend/src/features/help/items/ui/HelpRSGraphTerm.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/help/items/ui/HelpTypeGraph.tsx b/rsconcept/frontend/src/features/help/items/ui/HelpTypeGraph.tsx index 678fe710..1af0ebd3 100644 --- a/rsconcept/frontend/src/features/help/items/ui/HelpTypeGraph.tsx +++ b/rsconcept/frontend/src/features/help/items/ui/HelpTypeGraph.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/library/pages/LibraryPage/TableLibraryItems.tsx b/rsconcept/frontend/src/features/library/pages/LibraryPage/TableLibraryItems.tsx index a7cce635..07d694f6 100644 --- a/rsconcept/frontend/src/features/library/pages/LibraryPage/TableLibraryItems.tsx +++ b/rsconcept/frontend/src/features/library/pages/LibraryPage/TableLibraryItems.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/TabSynthesis.tsx b/rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/TabSynthesis.tsx index 2ade526a..3ed70f2e 100644 --- a/rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/TabSynthesis.tsx +++ b/rsconcept/frontend/src/features/oss/dialogs/DlgEditOperation/TabSynthesis.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx index 6602756f..df13292c 100644 --- a/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx +++ b/rsconcept/frontend/src/features/oss/pages/OssPage/EditorOssGraph/OssFlow.tsx @@ -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'; diff --git a/rsconcept/frontend/src/styling/color.ts b/rsconcept/frontend/src/features/rsform/colors.ts similarity index 75% rename from rsconcept/frontend/src/styling/color.ts rename to rsconcept/frontend/src/features/rsform/colors.ts index 5f8b7324..fa8f47e8 100644 --- a/rsconcept/frontend/src/styling/color.ts +++ b/rsconcept/frontend/src/features/rsform/colors.ts @@ -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. diff --git a/rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx b/rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx index 700bb60e..2d296bea 100644 --- a/rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx +++ b/rsconcept/frontend/src/features/rsform/components/BadgeConstituenta.tsx @@ -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 { diff --git a/rsconcept/frontend/src/features/rsform/components/BadgeGrammeme.tsx b/rsconcept/frontend/src/features/rsform/components/BadgeGrammeme.tsx index f3a8d079..da14773e 100644 --- a/rsconcept/frontend/src/features/rsform/components/BadgeGrammeme.tsx +++ b/rsconcept/frontend/src/features/rsform/components/BadgeGrammeme.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx b/rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx index 3b08436f..4949bb8d 100644 --- a/rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx +++ b/rsconcept/frontend/src/features/rsform/components/PickConstituenta.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/components/PickSchema.tsx b/rsconcept/frontend/src/features/rsform/components/PickSchema.tsx index 0035a233..4427bf13 100644 --- a/rsconcept/frontend/src/features/rsform/components/PickSchema.tsx +++ b/rsconcept/frontend/src/features/rsform/components/PickSchema.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx b/rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx index 4d6c4f87..6f20f454 100644 --- a/rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx +++ b/rsconcept/frontend/src/features/rsform/components/PickSubstitutions.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/components/RSInput/RSInput.tsx b/rsconcept/frontend/src/features/rsform/components/RSInput/RSInput.tsx index 77f6e64f..599684ab 100644 --- a/rsconcept/frontend/src/features/rsform/components/RSInput/RSInput.tsx +++ b/rsconcept/frontend/src/features/rsform/components/RSInput/RSInput.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/components/RSInput/bracketMatching.ts b/rsconcept/frontend/src/features/rsform/components/RSInput/bracketMatching.ts index 96d8d145..0c8d5905 100644 --- a/rsconcept/frontend/src/features/rsform/components/RSInput/bracketMatching.ts +++ b/rsconcept/frontend/src/features/rsform/components/RSInput/bracketMatching.ts @@ -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' }); diff --git a/rsconcept/frontend/src/features/rsform/components/RefsInput/RefsInput.tsx b/rsconcept/frontend/src/features/rsform/components/RefsInput/RefsInput.tsx index 6d9bdc76..ebf4fa50 100644 --- a/rsconcept/frontend/src/features/rsform/components/RefsInput/RefsInput.tsx +++ b/rsconcept/frontend/src/features/rsform/components/RefsInput/RefsInput.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/components/RefsInput/tooltip.ts b/rsconcept/frontend/src/features/rsform/components/RefsInput/tooltip.ts index 684f0403..31df8536 100644 --- a/rsconcept/frontend/src/features/rsform/components/RefsInput/tooltip.ts +++ b/rsconcept/frontend/src/features/rsform/components/RefsInput/tooltip.ts @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx index c2481d03..00d4a613 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgCstTemplate/TabArguments.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgEditVersions/TableVersions.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgEditVersions/TableVersions.tsx index e5877ee5..f62200e7 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/DlgEditVersions/TableVersions.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgEditVersions/TableVersions.tsx @@ -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; diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/graph/ASTNode.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/graph/ASTNode.tsx index 2bd06cf9..e739adab 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/graph/ASTNode.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgShowAST/graph/ASTNode.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx index 7e77f686..b24bc9ff 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/CartesianEdge.tsx @@ -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. diff --git a/rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx b/rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx index e5f98551..335ca46d 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/DlgShowTypeGraph/graph/MGraphNode.tsx @@ -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. */ diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx index 44f024f8..4fc03de4 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/StatusBar.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx index 571d525c..903a6d2f 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/SchemasGuide.tsx @@ -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 { diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx index 5b50e533..87027fe1 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx index 58cf3e50..6d0fd875 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ToolbarFocusedCst.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx index f029b46a..e5bfa89a 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx @@ -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'; diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx index e025114c..2adb4646 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx @@ -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; diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx index 9546a173..53ae58aa 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx @@ -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'; diff --git a/rsconcept/frontend/src/styling/colors.ts b/rsconcept/frontend/src/styling/colors.ts new file mode 100644 index 00000000..d04924e1 --- /dev/null +++ b/rsconcept/frontend/src/styling/colors.ts @@ -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 +};