R: Split colors declarations

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

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

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. */

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 {

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 {

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 (

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

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

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

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

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

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

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

rsconcept/frontend/src/features/rsform/colors.ts

@@ -1,77 +1,11 @@
-/**
+import { APP_COLORS } from '@/styling/colors';
- * 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 { PARAMETER } from '@/utils/constants';
 
-/** Semantic colors for application. */
+import { GramData, Grammeme, NounGrams, PartOfSpeech, VerbGrams } from './models/language';
-// prettier-ignore
+import { CstClass, ExpressionStatus, IConstituenta } from './models/rsform';
-export const APP_COLORS = {
+import { ISyntaxTreeNode, TokenID } from './models/rslang';
-  bgDefault:          'var(--clr-prim-100)',
+import { TMGraphNode } from './models/TMGraph';
-  bgInput:            'var(--clr-prim-0)', 
+import { GraphColoring } from './stores/termGraph';
-  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
-};
 
 /**
  * Represents Brackets highlights theme.

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 {

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

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

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

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

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

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

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

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

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

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;

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

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.

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 } from '@/styling/colors';
-import { APP_COLORS, colorBgTMGraphNode } from '@/styling/color';
 import { globals } from '@/utils/constants';
 
+import { colorBgTMGraphNode } from '../../../colors';
+import { TMGraphNode } from '../../../models/TMGraph';
+
 /**
  * Represents graph TMGraph node internal data.
  */

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

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 {

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

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

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

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;

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

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