@equinor/echo-components 0.26.6 → 0.26.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/echo-components",
-  "version": "0.26.6",
+  "version": "0.26.8",
   "dependencies": {
     "chart.js": "4.5.0",
     "react-datepicker": "8.4.0",
@@ -8,9 +8,10 @@
     "react-window": "1.8.11"
   },
   "peerDependencies": {
-    "@equinor/echo-utils": ">= 0.26.6 < 0.27.0",
+    "@equinor/echo-utils": ">= 0.26.8 < 0.27.0",
     "@equinor/eds-core-react": "0.43.0",
     "@equinor/eds-icons": "0.22.0",
+    "@equinor/eds-tokens": "0.9.2",
     "classnames": "2.5.1",
     "lodash": ">= 4.17.21 < 5",
     "react": ">= 17.0.2",

package/src/components/echoButton/EchoActionButton.d.ts

@@ -0,0 +1,13 @@
+import { IconProps } from '@equinor/eds-core-react';
+import { EchoButtonProps } from './EchoButton';
+interface EchoActionButtonProps extends EchoButtonProps {
+    iconAlign?: 'left' | 'right';
+    iconProps: Exclude<IconProps, 'size'>;
+}
+/**
+ * Wrapper for EDS button with icon and  UI preferences support..
+ * It uses EchoButton as a base and adds icon support.
+ * NB: IconProps should never be allowed to be undefined, if you don't want to use an icon, use EchoButton instead.
+ */
+export declare const EchoActionButton: import("react").ForwardRefExoticComponent<EchoActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/src/components/echoButton/EchoButton.d.ts

@@ -0,0 +1,14 @@
+import { ButtonProps } from '@equinor/eds-core-react';
+export type EchoButtonProps = ButtonProps;
+/**
+ * Wrapper for EDS Button with UI preferences support.
+ * If EDS implements mode and density in the future (as in figma), this can be removed.
+ */
+export declare const EchoButton: import("react").ForwardRefExoticComponent<{
+    color?: "primary" | "secondary" | "danger";
+    variant?: "contained" | "contained_icon" | "outlined" | "ghost" | "ghost_icon";
+    href?: string;
+    disabled?: boolean;
+    type?: string;
+    fullWidth?: boolean;
+} & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;

package/src/components/echoMenu/EchoMenu.d.ts

@@ -0,0 +1,9 @@
+import { MenuItemProps, MenuProps } from '@equinor/eds-core-react';
+/**
+ * Wrapper for the EDS Menu component with UI preferences support.
+ */
+declare const EchoMenu: {
+    (props: MenuProps): import("react/jsx-runtime").JSX.Element;
+    Item: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { EchoMenu };

package/src/components/index.d.ts

@@ -12,8 +12,11 @@ export * from './dialog/SaveAsDialog';
 export * from './dialogGenerator/DialogGenerator';
 export * from './dropdown/Dropdown';
 export * from './echoBottomBar/EchoBottomBar';
+export * from './echoButton/EchoActionButton';
+export * from './echoButton/EchoButton';
 export * from './echoCard/index';
 export * from './echoHeader/EchoHeader';
+export * from './echoMenu/EchoMenu';
 export * from './floatingActionButton';
 export * from './floatingActionButton/FloatingActionButton';
 export * from './functionalLocationListItem/FunctionalLocationListItem';
@@ -21,6 +24,7 @@ export * from './horizontalTabView';
 export * from './iconLink/compactIconLink/CompactIconLink';
 export * from './iconLink/inlineTagIconLink/InlineTagIconLink';
 export * from './itemMarker/ItemMarker';
+export * from './itemMarker/ItemMarkerChip';
 export type { ItemMarkerChipProps } from './itemMarker/ItemMarkerChip';
 export * from './itemMarker/ItemMarkerIcon';
 export * from './itemMarker/MultipleItemMarkers';

package/src/icons/echoAssets/groups.d.ts

@@ -0,0 +1,5 @@
+import { IconData } from '@equinor/eds-icons';
+export declare const group_default: IconData;
+export declare const group_ungroup: IconData;
+export declare const group_new: IconData;
+export declare const group_move: IconData;

package/src/icons/echoAssets/index.d.ts

@@ -1,6 +1,7 @@
 export * from './badges';
 export * from './external';
 export * from './general';
+export * from './groups';
 export * from './maps';
 export * from './markerIcons';
 export * from './misc';

package/src/index.d.ts

@@ -1,11 +1,17 @@
 import './style-reset.css';
+import '@equinor/eds-tokens/tokens.css';
+import './theme/echoPrimitives.generated.css';
+import './theme/echoModes.generated.css';
 import './theme/theme.css';
 export * from './components';
 export * from './elements';
 export * from './helpers';
 export * from './hooks';
 export * from './icons';
+export * from './providers/UIPreferenceProvider';
 export * from './structure';
+export { echoPrimitives } from './theme/echoPrimitives.generated';
+export { echoModes } from './theme/echoModes.generated';
 export { themeConst } from './theme/themeConst';
 export * from './types';
 export * from './utils';

package/src/providers/UIPreferenceProvider.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+export type Mode = 'light' | 'dark';
+export type Density = 'default' | 'compact';
+interface UIPreferencesContextType {
+    mode: Mode;
+    density: Density;
+    /** Shorthand for checking if current mode is dark. */
+    isDarkMode: boolean;
+}
+interface UIPreferencesProviderProps {
+    children: ReactNode;
+    mode: Mode;
+    density: Density;
+}
+/**
+ * Adds a context provider for UI preferences, allowing components to access the current mode and density.
+ * Mostly we should not use this directly, but rather build our components based on reusable components that use this context.
+ * Sometimes we will need something custom for our component, and that is when we use the useUIPreferences hook and style our components.
+ *
+ * Example usage:
+ *
+ * In your parent component, wrap your components with the `UIPreferencesProvider`:
+ * ```tsx
+ * <UIPreferencesProvider mode="dark" density="compact">
+ *   <YourComponent />
+ * </UIPreferencesProvider>
+ * ```
+ * If the components inside already supports dark mode and compact styling they will now appear compact
+ * and in dark mode. If not, you need to do some styling.
+ * In `YourComponent`, you can access the preferences like this if you need to implement custom mode/density styles:
+ * ```tsx
+ * const { mode, density, isDarkMode } = useUIPreferences();
+ *
+ * return (
+ *     <div className={classNames({[styles.dark]: isDarkMode })}>
+ *        <p className={styles.text}>My css makes me change color based on modes.</p>
+ *        <EchoButton>I don't need custom styling, I already support dark mode.</EchoButton>
+ *     </div>
+ * );
+ * ```
+ * And in your CSS, you can use the class to style based on the mode:
+ * ```css
+ * .text {
+ *   color: black;
+ * }
+ * .dark .text {
+ *   color: white;
+ *  }
+ *
+
+ */
+export declare const UIPreferencesProvider: ({ children, mode, density }: UIPreferencesProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useUIPreferences: () => UIPreferencesContextType;
+export {};

package/src/theme/echoModes.generated.d.ts

@@ -0,0 +1,447 @@
+export declare const echoModes: {
+    readonly sapPmTypesTextIconPm01: "#000000";
+    readonly sapPmTypesTextIconPm02: "#000000";
+    readonly sapPmTypesTextIconPm03: "#000000";
+    readonly sapPmTypesTextIconPm04: "#000000";
+    readonly sapPmTypesTextIconPm05: "#ffffff";
+    readonly sapPmTypesTextIconPm06: "#000000";
+    readonly sapPmTypesTextIconPm10: "#ffffff";
+    readonly sapPmTypesTextIconPm15: "#ffffff";
+    readonly sapPmTypesTextIconPm20: "#000000";
+    readonly sapPmTypesFillPm01: "#e24973";
+    readonly sapPmTypesFillPm02: "#52c0ff";
+    readonly sapPmTypesFillPm03: "#ff9200";
+    readonly sapPmTypesFillPm04: "#40d38f";
+    readonly sapPmTypesFillPm05: "#b30d2f";
+    readonly sapPmTypesFillPm06: "#fdca01";
+    readonly sapPmTypesFillPm10: "#004088";
+    readonly sapPmTypesFillPm15: "#00977b";
+    readonly sapPmTypesFillPm20: "#ffaebf";
+    readonly defaultModesTextIconMossGreen: "#ffffff";
+    readonly defaultModesTextIconMultiple: "#ffffff";
+    readonly defaultModesTextIconUnknown: "#000000";
+    readonly defaultModesTextIconBlack: "#ffffff";
+    readonly defaultModesTextIconWhite: "#000000";
+    readonly defaultModesFillMossGreen: "#007079";
+    readonly defaultModesFillMultiple: "#3d3d3d";
+    readonly defaultModesFillUnknown: "#bebebe";
+    readonly defaultModesFillBlack: "#000000";
+    readonly defaultModesFillWhite: "#ffffff";
+    readonly sapDatesFillCompleted: "#c7c7c7";
+    readonly sapDatesFillUnknown: "#9e9e9e";
+    readonly sapDatesFill_1Year: "#358132";
+    readonly sapDatesFill_6_12Months: "#4bb748";
+    readonly sapDatesFill_3_6Months: "#c1e7c1";
+    readonly sapDatesFill_1_3Months: "#ffc67a";
+    readonly sapDatesFill_8Days_1Month: "#ff9200";
+    readonly sapDatesFill_0_7Days: "#eb0000";
+    readonly sapDatesFillExpired: "#b30d2f";
+    readonly sapDatesTextIconCompleted: "#000000";
+    readonly sapDatesTextIconUnknown: "#000000";
+    readonly sapDatesTextIcon_1Year: "#ffffff";
+    readonly sapDatesTextIcon_6_12Months: "#000000";
+    readonly sapDatesTextIcon_3_6Months: "#000000";
+    readonly sapDatesTextIcon_1_3Months: "#000000";
+    readonly sapDatesTextIcon_8Days_1Month: "#000000";
+    readonly sapDatesTextIcon_0_7Days: "#ffffff";
+    readonly sapDatesTextIconExpired: "#ffffff";
+    readonly sapActiveOrCompletedFillActive: "#ff9200";
+    readonly sapActiveOrCompletedFillCompleted: "#4bb748";
+    readonly sapActiveOrCompletedFillBoth: "#3d3d3d";
+    readonly sapActiveOrCompletedTextIconActive: "#000000";
+    readonly sapActiveOrCompletedTextIconCompleted: "#000000";
+    readonly sapActiveOrCompletedTextIconBoth: "#ffffff";
+    readonly sapFailureImpactFillXNoFailure: "#4bb748";
+    readonly sapFailureImpactFillUUnwell: "#ff9200";
+    readonly sapFailureImpactFillSSeriouslyIll: "#eb0000";
+    readonly sapFailureImpactFillDDead: "#b30d2f";
+    readonly sapFailureImpactFillNoData: "#c7c7c7";
+    readonly sapFailureImpactTextIconXNoFailure: "#000000";
+    readonly sapFailureImpactTextIconUUnwell: "#000000";
+    readonly sapFailureImpactTextIconSSeriouslyIll: "#ffffff";
+    readonly sapFailureImpactTextIconDDead: "#ffffff";
+    readonly sapFailureImpactTextIconNoData: "#000000";
+    readonly stidStatusFillAsbuilt: "#007079";
+    readonly stidStatusFillPlanned: "#4bb748";
+    readonly stidStatusFillFuture: "#52c0ff";
+    readonly stidStatusFillHistoric: "#ff7d98";
+    readonly stidStatusFillOutOfService: "#ff9200";
+    readonly stidStatusFillReserved: "#243746";
+    readonly stidStatusFillVoided: "#eb0000";
+    readonly stidStatusFillDefault: "#dcdcdc";
+    readonly stidStatusTextIconsAsbuilt: "#ffffff";
+    readonly stidStatusTextIconsPlanned: "#000000";
+    readonly stidStatusTextIconsFuture: "#000000";
+    readonly stidStatusTextIconsHistoric: "#000000";
+    readonly stidStatusTextIconsOutOfService: "#000000";
+    readonly stidStatusTextIconsReserved: "#ffffff";
+    readonly stidStatusTextIconsVoided: "#ffffff";
+    readonly stidStatusTextIconsDefault: "#000000";
+    readonly procosysCommpkStatusFillRfccSent: "#bcf316";
+    readonly procosysCommpkStatusFillRfccPartly: "#c7f316";
+    readonly procosysCommpkStatusFillRfcc: "#60f316";
+    readonly procosysCommpkStatusFillRfocSent: "#0dccf2";
+    readonly procosysCommpkStatusFillRfocPartly: "#1accf2";
+    readonly procosysCommpkStatusFillRfoc: "#0d59f2";
+    readonly procosysCommpkStatusFillRfccRejected: "#ff1243";
+    readonly procosysCommpkStatusTextIconRfccSent: "#000000";
+    readonly procosysCommpkStatusTextIconRfccPartly: "#000000";
+    readonly procosysCommpkStatusTextIconRfcc: "#000000";
+    readonly procosysCommpkStatusTextIconRfocSent: "#000000";
+    readonly procosysCommpkStatusTextIconRfocPartly: "#000000";
+    readonly procosysCommpkStatusTextIconRfoc: "#ffffff";
+    readonly procosysCommpkStatusTextIconRfccRejected: "#ffffff";
+    readonly procosysStatusMccrOgCpclFillOk: "#23ef2a";
+    readonly procosysStatusMccrOgCpclFillOs: "#52c0ff";
+    readonly procosysStatusMccrOgCpclFillPa: "#f94693";
+    readonly procosysStatusMccrOgCpclFillPb: "#ffdd00";
+    readonly procosysStatusMccrOgCpclFillUnknown: "#bebebe";
+    readonly procosysStatusMccrOgCpclTextIconOk: "#000000";
+    readonly procosysStatusMccrOgCpclTextIconOs: "#000000";
+    readonly procosysStatusMccrOgCpclTextIconPa: "#000000";
+    readonly procosysStatusMccrOgCpclTextIconPb: "#000000";
+    readonly procosysStatusMccrOgCpclTextIconUnknown: "#000000";
+    readonly valvePositionFillLc: "#ce183e";
+    readonly valvePositionFillLo: "#4bb748";
+    readonly valvePositionTextIconLc: "#ffffff";
+    readonly valvePositionTextIconLo: "#000000";
+    readonly iocAnnotationStatusFillOnWatch: "#ff9200";
+    readonly iocAnnotationStatusFillInProgress: "#0084c4";
+    readonly iocAnnotationStatusFillOnNote: "#e6e6e6";
+    readonly iocAnnotationStatusFillError: "#ffc1c1";
+    readonly iocAnnotationStatusFillArchive: "#4bb748";
+    readonly iocAnnotationStatusTextIconsOnWatch: "#000000";
+    readonly iocAnnotationStatusTextIconsInProgress: "#000000";
+    readonly iocAnnotationStatusTextIconsOnNote: "#000000";
+    readonly iocAnnotationStatusTextIconsError: "#000000";
+    readonly iocAnnotationStatusTextIconsArchive: "#000000";
+    readonly iocOperationsDisciplineFillAutomation: "#e6e6e6";
+    readonly iocOperationsDisciplineFillElectrical: "#e6e6e6";
+    readonly iocOperationsDisciplineFillFiscalMetering: "#e6e6e6";
+    readonly iocOperationsDisciplineFillNox: "#e6e6e6";
+    readonly iocOperationsDisciplineFillProcess: "#e6e6e6";
+    readonly iocOperationsDisciplineFillProcessControl: "#e6e6e6";
+    readonly iocOperationsDisciplineFillProductionDeviation: "#e6e6e6";
+    readonly iocOperationsDisciplineFillProductionTechnology: "#e6e6e6";
+    readonly iocOperationsDisciplineFillRisersAndFlowlines: "#e6e6e6";
+    readonly iocOperationsDisciplineFillRotatingMachinery: "#e6e6e6";
+    readonly iocOperationsDisciplineFillSafetyAndAutomationSystems: "#e6e6e6";
+    readonly iocOperationsDisciplineFillTelecommunication: "#e6e6e6";
+    readonly iocOperationsDisciplineFillValves: "#e6e6e6";
+    readonly iocOperationsDisciplineFillWindTurbines: "#e6e6e6";
+    readonly iocOperationsDisciplineTextIconsAutomation: "#000000";
+    readonly iocOperationsDisciplineTextIconsElectrical: "#000000";
+    readonly iocOperationsDisciplineTextIconsFiscalMetering: "#000000";
+    readonly iocOperationsDisciplineTextIconsNox: "#000000";
+    readonly iocOperationsDisciplineTextIconsProcess: "#000000";
+    readonly iocOperationsDisciplineTextIconsProcessControl: "#000000";
+    readonly iocOperationsDisciplineTextIconsProductionDeviation: "#000000";
+    readonly iocOperationsDisciplineTextIconsProductionTechnology: "#000000";
+    readonly iocOperationsDisciplineTextIconsRisersAndFlowlines: "#000000";
+    readonly iocOperationsDisciplineTextIconsRotatingMachinery: "#000000";
+    readonly iocOperationsDisciplineTextIconsSafetyAndAutomationSystems: "#000000";
+    readonly iocOperationsDisciplineTextIconsTelecommunication: "#000000";
+    readonly iocOperationsDisciplineTextIconsValves: "#000000";
+    readonly iocOperationsDisciplineTextIconsWindTurbines: "#000000";
+    readonly _3dDisciplinesFillArchitect: "#555555";
+    readonly _3dDisciplinesFillElectro: "#008e8e";
+    readonly _3dDisciplinesFillHvac: "#954c43";
+    readonly _3dDisciplinesFillInstrument: "#850085";
+    readonly _3dDisciplinesFillMechanical: "#007a00";
+    readonly _3dDisciplinesFillPiping: "#c0c0c0";
+    readonly _3dDisciplinesFillPipeSupport: "#727272";
+    readonly _3dDisciplinesFillSafety: "#7a0000";
+    readonly _3dDisciplinesFillStructural: "#c08850";
+    readonly _3dDisciplinesFillTelecom: "#7a1a1a";
+    readonly _3dDisciplinesFillUndetermined: "#248cff";
+    readonly _3dDisciplinesTextIconArchitect: "#ffffff";
+    readonly _3dDisciplinesTextIconElectro: "#ffffff";
+    readonly _3dDisciplinesTextIconHvac: "#ffffff";
+    readonly _3dDisciplinesTextIconInstrument: "#ffffff";
+    readonly _3dDisciplinesTextIconMechanical: "#ffffff";
+    readonly _3dDisciplinesTextIconPiping: "#000000";
+    readonly _3dDisciplinesTextIconPipeSupport: "#000000";
+    readonly _3dDisciplinesTextIconSafety: "#ffffff";
+    readonly _3dDisciplinesTextIconStructural: "#000000";
+    readonly _3dDisciplinesTextIconTelecom: "#ffffff";
+    readonly _3dDisciplinesTextIconUndetermined: "#000000";
+    readonly sapNotificationTypesFillM1: "#e24973";
+    readonly sapNotificationTypesFillM2: "#52c0ff";
+    readonly sapNotificationTypesFillM3: "#ff9200";
+    readonly sapNotificationTypesFillM4: "#40d38f";
+    readonly sapNotificationTypesFillM5: "#b30d2f";
+    readonly sapNotificationTypesFillM6: "#fdca01";
+    readonly sapNotificationTypesTextIconsM1: "#000000";
+    readonly sapNotificationTypesTextIconsM2: "#000000";
+    readonly sapNotificationTypesTextIconsM3: "#000000";
+    readonly sapNotificationTypesTextIconsM4: "#000000";
+    readonly sapNotificationTypesTextIconsM5: "#ffffff";
+    readonly sapNotificationTypesTextIconsM6: "#000000";
+    readonly ecmMeasuringValuesFill_00: "#9e9e9e";
+    readonly ecmMeasuringValuesFill_01: "#4bb748";
+    readonly ecmMeasuringValuesFill_02: "#fff099";
+    readonly ecmMeasuringValuesFill_03: "#fdca01";
+    readonly ecmMeasuringValuesFill_04: "#ff9200";
+    readonly ecmMeasuringValuesFill_05: "#eb0000";
+    readonly ecmMeasuringValuesTextIcon_00: "#000000";
+    readonly ecmMeasuringValuesTextIcon_01: "#000000";
+    readonly ecmMeasuringValuesTextIcon_02: "#000000";
+    readonly ecmMeasuringValuesTextIcon_03: "#000000";
+    readonly ecmMeasuringValuesTextIcon_04: "#000000";
+    readonly ecmMeasuringValuesTextIcon_05: "#ffffff";
+    readonly _3dScaffoldingFillPlanned: "#4bb748";
+    readonly _3dScaffoldingFillAsbuilt: "#007079";
+    readonly _3dScaffoldingFillTemporary: "#fdca01";
+    readonly _3dScaffoldingFillModelColor: "#3d3d3d";
+    readonly _3dScaffoldingFillUnknown: "#bebebe";
+    readonly _3dScaffoldingTextIconPlanned: "#000000";
+    readonly _3dScaffoldingTextIconAsbuilt: "#ffffff";
+    readonly _3dScaffoldingTextIconTemporary: "#000000";
+    readonly _3dScaffoldingTextIconModelColor: "#ffffff";
+    readonly _3dScaffoldingTextIconUnknown: "#000000";
+    readonly sapPriorityFillLow: "#4bb748";
+    readonly sapPriorityFillMedium: "#ff9200";
+    readonly sapPriorityFillHigh: "#eb0000";
+    readonly sapPriorityFillUndefined: "#c7c7c7";
+    readonly sapPriorityTextIconLow: "#000000";
+    readonly sapPriorityTextIconMedium: "#000000";
+    readonly sapPriorityTextIconHigh: "#ffffff";
+    readonly sapPriorityTextIconUndefined: "#000000";
+    readonly sapUnsafeFailModeFillMadeSafe: "#4bb748";
+    readonly sapUnsafeFailModeFillInPast: "#ff9200";
+    readonly sapUnsafeFailModeFillOutstanding: "#eb0000";
+    readonly sapUnsafeFailModeFillUndefined: "#c7c7c7";
+    readonly sapUnsafeFailModeTextIconMadeSafe: "#000000";
+    readonly sapUnsafeFailModeTextIconInPast: "#000000";
+    readonly sapUnsafeFailModeTextIconOutstanding: "#ffffff";
+    readonly sapUnsafeFailModeTextIconUndefined: "#000000";
+    readonly ecmGasketMeasuringValuesFill_00: "#9e9e9e";
+    readonly ecmGasketMeasuringValuesFill_10: "#4bb748";
+    readonly ecmGasketMeasuringValuesFill_20: "#fff099";
+    readonly ecmGasketMeasuringValuesFill_30: "#ff9200";
+    readonly ecmGasketMeasuringValuesFill_40: "#eb0000";
+    readonly ecmGasketMeasuringValuesFill_50: "#0084c4";
+    readonly ecmGasketMeasuringValuesTextIcon_00: "#000000";
+    readonly ecmGasketMeasuringValuesTextIcon_10: "#000000";
+    readonly ecmGasketMeasuringValuesTextIcon_20: "#000000";
+    readonly ecmGasketMeasuringValuesTextIcon_30: "#000000";
+    readonly ecmGasketMeasuringValuesTextIcon_40: "#ffffff";
+    readonly ecmGasketMeasuringValuesTextIcon_50: "#ffffff";
+    readonly ecmSurfaceCoatingConditionValuesFill_1: "#358132";
+    readonly ecmSurfaceCoatingConditionValuesFill_2: "#4bb748";
+    readonly ecmSurfaceCoatingConditionValuesFill_3: "#fff099";
+    readonly ecmSurfaceCoatingConditionValuesFill_4: "#fdca01";
+    readonly ecmSurfaceCoatingConditionValuesFill_5: "#ff9200";
+    readonly ecmSurfaceCoatingConditionValuesFill_6: "#eb0000";
+    readonly ecmSurfaceCoatingConditionValuesTextIcon_1: "#ffffff";
+    readonly ecmSurfaceCoatingConditionValuesTextIcon_2: "#000000";
+    readonly ecmSurfaceCoatingConditionValuesTextIcon_3: "#000000";
+    readonly ecmSurfaceCoatingConditionValuesTextIcon_4: "#000000";
+    readonly ecmSurfaceCoatingConditionValuesTextIcon_5: "#000000";
+    readonly ecmSurfaceCoatingConditionValuesTextIcon_6: "#ffffff";
+    readonly ecmWallThicknessLossDiameterFill_10: "#358132";
+    readonly ecmWallThicknessLossDiameterFill_20: "#e24973";
+    readonly ecmWallThicknessLossDiameterFill_30: "#52c0ff";
+    readonly ecmWallThicknessLossDiameterFill_40: "#40d38f";
+    readonly ecmWallThicknessLossDiameterFill_50: "#ffaebf";
+    readonly ecmWallThicknessLossDiameterFill_60: "#ad6200";
+    readonly ecmWallThicknessLossDiameterFill_70: "#8c1159";
+    readonly ecmWallThicknessLossDiameterFill_80: "#fdca01";
+    readonly ecmWallThicknessLossDiameterFill_90: "#0084c4";
+    readonly ecmWallThicknessLossDiameterFill_95: "#9e9e9e";
+    readonly ecmWallThicknessLossDiameterTextIcon_10: "#ffffff";
+    readonly ecmWallThicknessLossDiameterTextIcon_20: "#000000";
+    readonly ecmWallThicknessLossDiameterTextIcon_30: "#000000";
+    readonly ecmWallThicknessLossDiameterTextIcon_40: "#000000";
+    readonly ecmWallThicknessLossDiameterTextIcon_50: "#000000";
+    readonly ecmWallThicknessLossDiameterTextIcon_60: "#ffffff";
+    readonly ecmWallThicknessLossDiameterTextIcon_70: "#ffffff";
+    readonly ecmWallThicknessLossDiameterTextIcon_80: "#000000";
+    readonly ecmWallThicknessLossDiameterTextIcon_90: "#ffffff";
+    readonly ecmWallThicknessLossDiameterTextIcon_95: "#000000";
+    readonly _3d_360ImagesFillRecent: "#4bb748";
+    readonly _3d_360ImagesFillDated: "#fdca01";
+    readonly _3d_360ImagesFillHistoric: "#eb0000";
+    readonly _3d_360ImagesTextIconRecent: "#000000";
+    readonly _3d_360ImagesTextIconDated: "#000000";
+    readonly _3d_360ImagesTextIconHistoric: "#ffffff";
+    readonly stidNotificationsSeverityFillHighSeverity: "#ff949b";
+    readonly stidNotificationsSeverityFillMediumSeverity: "#ffdaa8";
+    readonly stidNotificationsSeverityFillLowSeverity: "#c1e7c1";
+    readonly stidNotificationsSeverityFillDefaultSeverity: "#e6e6e6";
+    readonly stidNotificationsSeverityTextIconHighSeverity: "#000000";
+    readonly stidNotificationsSeverityTextIconMediumSeverity: "#000000";
+    readonly stidNotificationsSeverityTextIconLowSeverity: "#000000";
+    readonly stidNotificationsSeverityTextIconDefaultSeverity: "#000000";
+    readonly stidOfpDocumentsFillOfpdark: "#ffdaa8";
+    readonly stidOfpDocumentsFillOfplight: "#ffe7d6";
+    readonly stidOfpDocumentsFillBlue: "#d5eaf4";
+    readonly stidOfpDocumentsFillGrey: "#c7c7c7";
+    readonly stidOfpDocumentsTextIconOfpdark: "#000000";
+    readonly stidOfpDocumentsTextIconOfplight: "#000000";
+    readonly stidOfpDocumentsTextIconNone: "#000000";
+    readonly stidOfpDocumentsTextIconBlue: "#000000";
+    readonly stidOfpDocumentsTextIconGrey: "#000000";
+    readonly defaultTrafficLightStrongFillDarkRed: "#b30d2f";
+    readonly defaultTrafficLightStrongFillRed: "#eb0000";
+    readonly defaultTrafficLightStrongFillDarkOrange: "#ad6200";
+    readonly defaultTrafficLightStrongFillOrange: "#ff9200";
+    readonly defaultTrafficLightStrongFillDarkYellow: "#fdca01";
+    readonly defaultTrafficLightStrongFillYellow: "#fff099";
+    readonly defaultTrafficLightStrongFillGreen: "#4bb748";
+    readonly defaultTrafficLightStrongFillDarkGreen: "#358132";
+    readonly defaultTrafficLightStrongFillGrey: "#9e9e9e";
+    readonly defaultTrafficLightStrongFillBlack: "#000000";
+    readonly defaultTrafficLightStrongFillBlue: "#0084c4";
+    readonly defaultTrafficLightStrongTextIconDarkRed: "#ffffff";
+    readonly defaultTrafficLightStrongTextIconRed: "#ffffff";
+    readonly defaultTrafficLightStrongTextIconDarkOrange: "#ffffff";
+    readonly defaultTrafficLightStrongTextIconOrange: "#000000";
+    readonly defaultTrafficLightStrongTextIconDarkYellow: "#000000";
+    readonly defaultTrafficLightStrongTextIconYellow: "#000000";
+    readonly defaultTrafficLightStrongTextIconGreen: "#000000";
+    readonly defaultTrafficLightStrongTextIconDarkGreen: "#ffffff";
+    readonly defaultTrafficLightStrongTextIconGrey: "#000000";
+    readonly defaultTrafficLightStrongTextIconBlack: "#ffffff";
+    readonly defaultTrafficLightStrongTextIconBlue: "#ffffff";
+    readonly defaultTrafficLightWeakFillRed: "#ff949b";
+    readonly defaultTrafficLightWeakFillLightRed: "#ffc1c1";
+    readonly defaultTrafficLightWeakFillOrange: "#ffc67a";
+    readonly defaultTrafficLightWeakFillMediumOrange: "#ffdaa8";
+    readonly defaultTrafficLightWeakFillLightOrange: "#ffe7d6";
+    readonly defaultTrafficLightWeakFillYellow: "#fff8d6";
+    readonly defaultTrafficLightWeakFillLightGreen: "#e6faec";
+    readonly defaultTrafficLightWeakFillMediumGreen: "#c1e7c1";
+    readonly defaultTrafficLightWeakFillGreen: "#a1daa0";
+    readonly defaultTrafficLightWeakFillBlue: "#d5eaf4";
+    readonly defaultTrafficLightWeakFillGrey: "#c7c7c7";
+    readonly defaultTrafficLightWeakFillLightGrey: "#e6e6e6";
+    readonly defaultTrafficLightWeakTextIconRed: "#000000";
+    readonly defaultTrafficLightWeakTextIconLightRed: "#000000";
+    readonly defaultTrafficLightWeakTextIconOrange: "#000000";
+    readonly defaultTrafficLightWeakTextIconMediumOrange: "#000000";
+    readonly defaultTrafficLightWeakTextIconLightOrange: "#000000";
+    readonly defaultTrafficLightWeakTextIconYellow: "#000000";
+    readonly defaultTrafficLightWeakTextIconLightGreen: "#000000";
+    readonly defaultTrafficLightWeakTextIconMediumGreen: "#000000";
+    readonly defaultTrafficLightWeakTextIconGreen: "#000000";
+    readonly defaultTrafficLightWeakTextIconBlue: "#000000";
+    readonly defaultTrafficLightWeakTextIconGrey: "#000000";
+    readonly defaultTrafficLightWeakTextIconLightGrey: "#000000";
+    readonly defaultRandomFillRandom_1: "#e24973";
+    readonly defaultRandomFillRandom_2: "#52c0ff";
+    readonly defaultRandomFillRandom_3: "#ff9200";
+    readonly defaultRandomFillRandom_4: "#40d38f";
+    readonly defaultRandomFillRandom_5: "#b30d2f";
+    readonly defaultRandomFillRandom_6: "#fdca01";
+    readonly defaultRandomFillRandom_7: "#004088";
+    readonly defaultRandomFillRandom_8: "#00977b";
+    readonly defaultRandomFillRandom_9: "#ffaebf";
+    readonly defaultRandomFillRandom_10: "#0084c4";
+    readonly defaultRandomFillRandom_11: "#eb0037";
+    readonly defaultRandomFillRandom_12: "#8c1159";
+    readonly defaultRandomFillRandom_13: "#005f57";
+    readonly defaultRandomFillRandom_14: "#ad6200";
+    readonly defaultRandomFillRandom_15: "#243746";
+    readonly defaultRandomFillMultiple: "#3d3d3d";
+    readonly defaultRandomTextIconRandom_1: "#000000";
+    readonly defaultRandomTextIconRandom_2: "#000000";
+    readonly defaultRandomTextIconRandom_3: "#000000";
+    readonly defaultRandomTextIconRandom_4: "#000000";
+    readonly defaultRandomTextIconRandom_5: "#ffffff";
+    readonly defaultRandomTextIconRandom_6: "#000000";
+    readonly defaultRandomTextIconRandom_7: "#ffffff";
+    readonly defaultRandomTextIconRandom_8: "#ffffff";
+    readonly defaultRandomTextIconRandom_9: "#000000";
+    readonly defaultRandomTextIconRandom_10: "#ffffff";
+    readonly defaultRandomTextIconRandom_11: "#ffffff";
+    readonly defaultRandomTextIconRandom_12: "#ffffff";
+    readonly defaultRandomTextIconRandom_13: "#ffffff";
+    readonly defaultRandomTextIconRandom_14: "#ffffff";
+    readonly defaultRandomTextIconRandom_15: "#ffffff";
+    readonly defaultRandomTextIconMultiple: "#ffffff";
+    readonly _3dSsuNoiseFill_110Dba: "#574293";
+    readonly _3dSsuNoiseFill_106_110Dba: "#794595";
+    readonly _3dSsuNoiseFill_101_105Dba: "#af8dbf";
+    readonly _3dSsuNoiseFill_96_100Dba: "#dd5145";
+    readonly _3dSsuNoiseFill_91_95Dba: "#e89633";
+    readonly _3dSsuNoiseFill_86_90Dba: "#f5d636";
+    readonly _3dSsuNoiseFill_81_85Dba: "#fbf07b";
+    readonly _3dSsuNoiseFill_76_80Dba: "#b1d48f";
+    readonly _3dSsuNoiseFill_75Dba: "#d3fda1";
+    readonly _3dSsuNoiseTextIcon_110Dba: "#ffffff";
+    readonly _3dSsuNoiseTextIcon_106_110Dba: "#ffffff";
+    readonly _3dSsuNoiseTextIcon_101_105Dba: "#000000";
+    readonly _3dSsuNoiseTextIcon_96_100Dba: "#000000";
+    readonly _3dSsuNoiseTextIcon_91_95Dba: "#000000";
+    readonly _3dSsuNoiseTextIcon_86_90Dba: "#000000";
+    readonly _3dSsuNoiseTextIcon_81_85Dba: "#000000";
+    readonly _3dSsuNoiseTextIcon_76_80Dba: "#000000";
+    readonly _3dSsuNoiseTextIcon_75Dba: "#000000";
+    readonly gruppeModusFillDanger: "#eb0000";
+    readonly gruppeModusFillWarning: "#ff9200";
+    readonly gruppeModusFillOk: "#4bb748";
+    readonly gruppeModusTextIconDanger: "#ffffff";
+    readonly gruppeModusTextIconWarning: "#000000";
+    readonly gruppeModusTextIconOk: "#000000";
+    readonly projectEngineeringCodeFillA: "#e24973";
+    readonly projectEngineeringCodeFillB: "#52c0ff";
+    readonly projectEngineeringCodeFillC: "#ff9200";
+    readonly projectEngineeringCodeFillD: "#40d38f";
+    readonly projectEngineeringCodeFillE: "#b30d2f";
+    readonly projectEngineeringCodeFillF: "#fdca01";
+    readonly projectEngineeringCodeFillG: "#004088";
+    readonly projectEngineeringCodeFillO: "#00977b";
+    readonly projectEngineeringCodeTextIconA: "#000000";
+    readonly projectEngineeringCodeTextIconB: "#000000";
+    readonly projectEngineeringCodeTextIconC: "#000000";
+    readonly projectEngineeringCodeTextIconD: "#000000";
+    readonly projectEngineeringCodeTextIconE: "#ffffff";
+    readonly projectEngineeringCodeTextIconF: "#000000";
+    readonly projectEngineeringCodeTextIconG: "#ffffff";
+    readonly projectEngineeringCodeTextIconO: "#ffffff";
+    readonly rovOperatedValvesFillOpen: "#4bb748";
+    readonly rovOperatedValvesFillClosed: "#eb0000";
+    readonly rovOperatedValvesFillUknown: "#9e9e9e";
+    readonly rovOperatedValvesTextIonsOpen: "#000000";
+    readonly rovOperatedValvesTextIonsClosed: "#ffffff";
+    readonly rovOperatedValvesTextIonsUknown: "#000000";
+    readonly otherSynergiSafeXFillSeverity_1: "#4bb748";
+    readonly otherSynergiSafeXFillSeverity_2: "#4bb748";
+    readonly otherSynergiSafeXFillSeverity_3: "#fdca01";
+    readonly otherSynergiSafeXFillSeverity_4: "#eb0000";
+    readonly otherSynergiSafeXFillSeverity_5: "#eb0000";
+    readonly otherSynergiSafeXTextIconSeverity_1: "#000000";
+    readonly otherSynergiSafeXTextIconSeverity_2: "#000000";
+    readonly otherSynergiSafeXTextIconSeverity_3: "#000000";
+    readonly otherSynergiSafeXTextIconSeverity_4: "#ffffff";
+    readonly otherSynergiSafeXTextIconSeverity_5: "#ffffff";
+    readonly defaultSelectioncolorsColorSelectioncolor1: "#fa00ff";
+    readonly defaultSelectioncolorsColorSelectioncolor2: "#ff5c00";
+    readonly defaultSelectioncolorsColorSelectioncolor3: "#faff00";
+    readonly defaultSelectioncolorsColorSelectioncolor4: "#9eff00";
+    readonly defaultSelectioncolorsColorSelectioncolor5: "#00bb13";
+    readonly defaultSelectioncolorsColorSelectioncolor6: "#05ffc3";
+    readonly defaultSelectioncolorsColorSelectioncolor7: "#00d1ff";
+    readonly defaultSelectioncolorsColorSelectioncolor8: "#0066ff";
+    readonly defaultSelectioncolorsColorSelectioncolor9: "#0007b0";
+    readonly defaultSelectioncolorsColorSelectioncolor10: "#7304ff";
+    readonly defaultSelectioncolorsColorSelectioncolor11: "#ff0000";
+    readonly defaultSelectioncolorsColorSelectioncolor12: "#ff006b";
+    readonly defaultSelectioncolorsColorSelectioncolor13: "#000000";
+    readonly defaultSelectioncolorsColorSelectioncolor14: "#ffffff";
+    readonly defaultSelectioncolorsTextIconSelectioncolor1: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor2: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor3: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor4: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor5: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor6: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor7: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor8: "#ffffff";
+    readonly defaultSelectioncolorsTextIconSelectioncolor9: "#ffffff";
+    readonly defaultSelectioncolorsTextIconSelectioncolor10: "#ffffff";
+    readonly defaultSelectioncolorsTextIconSelectioncolor11: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor12: "#000000";
+    readonly defaultSelectioncolorsTextIconSelectioncolor13: "#ffffff";
+    readonly defaultSelectioncolorsTextIconSelectioncolor14: "#000000";
+};