Fix high contrast mode issues (#1910)

Additionally adds css variables to be used by plugins

Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -69,22 +69,15 @@ const BreadcrumbNav = styled.nav`
   width: 100%;
 
   /* move slash to end */
-
   li + li::before {
     content: none;
   }
 
-  li:not(:last-child)::after {
-    color: #b5b5b5; //$breadcrumb-item-separator-color
-    content: "\\0002f";
-  }
-
   li:first-child {
     margin-left: 0.75rem;
   }
 
   /* sizing of each item */
-
   li {
     max-width: 375px;
 
@@ -111,11 +104,6 @@ const ActionBar = styled.div`
   }
 `;
 
-// TODO ersetzen?
-const PrefixButton = styled.div`
-  border-right: 1px solid lightgray;
-`;
-
 const BreadcrumbNode: FC<{ clickable: boolean; text: string; url: string; current?: boolean }> = ({
   clickable,
   text,
@@ -198,7 +186,7 @@ const Breadcrumb: FC<Props> = ({
   const renderBreadcrumbNav = () => {
     let prefixButtons = null;
     if (preButtons) {
-      prefixButtons = <PrefixButton className="mr-2">{preButtons}</PrefixButton>;
+      prefixButtons = <div className="mr-2 prefix-button">{preButtons}</div>;
     }
 
     let homeUrl = baseUrl + "/";