Add experimental high contrast mode (#1845)

Add an experimental high contrast color theme to SCM-Manager. The high contrast mode uses a dark background and color with a high contrast for a better accessibility.
The change adds the theme to ui-styles and theme switcher to the storybook of ui-components.

scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.stories.tsx

@@ -26,7 +26,7 @@ import { MemoryRouter } from "react-router-dom";
 import { storiesOf } from "@storybook/react";
 import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
 
-storiesOf("Forms|AddKeyValueEntryToTableField", module)
+storiesOf("Forms/AddKeyValueEntryToTableField", module)
   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => (
     <div className="m-6">

scm-ui/ui-components/src/forms/Checkbox.stories.tsx

@@ -105,7 +105,7 @@ const LegacyEvents: FC = () => {
   );
 };
 
-storiesOf("Forms|Checkbox", module)
+storiesOf("Forms/Checkbox", module)
   .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Default", () => (
     <Spacing>

scm-ui/ui-components/src/forms/DropDown.stories.tsx

@@ -25,7 +25,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import DropDown from "./DropDown";
 
-storiesOf("Forms|DropDown", module)
+storiesOf("Forms/DropDown", module)
   .add("Default", () => (
     <DropDown
       options={["en", "de", "es"]}

scm-ui/ui-components/src/forms/FileInput.stories.tsx

@@ -63,7 +63,7 @@ const ReactHookForm: FC = () => {
   );
 };
 
-storiesOf("Forms|FileInput", module)
+storiesOf("Forms/FileInput", module)
   .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Default", () => <ReactHookForm />);

scm-ui/ui-components/src/forms/InputField.stories.tsx

@@ -127,7 +127,7 @@ const LegacyEvents: FC = () => {
   );
 };
 
-storiesOf("Forms|InputField", module)
+storiesOf("Forms/InputField", module)
   .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("AutoFocus", () => <InputField label="Field with AutoFocus" autofocus={true} />)

scm-ui/ui-components/src/forms/Radio.stories.tsx

@@ -112,7 +112,7 @@ const LegacyEvents: FC = () => {
   );
 };
 
-storiesOf("Forms|Radio", module)
+storiesOf("Forms/Radio", module)
   .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Default", () => (
     <Spacing>

scm-ui/ui-components/src/forms/Select.stories.tsx

@@ -198,7 +198,7 @@ const PreselectOption: FC = () => {
   );
 };
 
-storiesOf("Forms|Select", module)
+storiesOf("Forms/Select", module)
   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Add no existing value", () => <AddNoExistingValue />)
   .add("Ref", () => <Ref />)

scm-ui/ui-components/src/forms/Textarea.stories.tsx

@@ -170,7 +170,7 @@ const LegacyEvents: FC = () => {
   );
 };
 
-storiesOf("Forms|Textarea", module)
+storiesOf("Forms/Textarea", module)
   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("OnChange", () => <OnChangeTextarea />)
   .add("OnSubmit", () => <OnSubmitTextare />)