From 16960d742e962bc90efd7b18e0be4f7d27925d6d Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 16 Dec 2021 17:54:39 +0100
Subject: [PATCH] High contrast mode findings (#1892)

Fixes most of the flaws in high contrast mode.
---
 gradle/changelog/high_contrast.yaml           |   2 +
 scm-ui/ui-components/src/Autocomplete.tsx     |  13 +-
 scm-ui/ui-components/src/Breadcrumb.tsx       |   1 +
 scm-ui/ui-components/src/CardColumnGroup.tsx  |   8 +-
 scm-ui/ui-components/src/DangerZone.tsx       |   1 +
 scm-ui/ui-components/src/Icon.tsx             |   2 +-
 scm-ui/ui-components/src/Logo.stories.tsx     |   1 +
 .../src/__snapshots__/storyshots.test.ts.snap | 926 +++++++++---------
 scm-ui/ui-components/src/forms/FileInput.tsx  |   2 +-
 scm-ui/ui-components/src/forms/FileUpload.tsx |   2 +-
 .../src/forms/TriStateCheckbox.tsx            |   4 +-
 .../src/modals/FullscreenModal.tsx            |   2 +-
 scm-ui/ui-components/src/modals/Modal.tsx     |  10 +-
 scm-ui/ui-components/src/popover/Popover.tsx  |  33 +-
 .../src/repos/HealthCheckFailureDetail.tsx    |   4 +-
 .../src/repos/RepositoryEntry.tsx             |  15 +-
 .../src/repos/annotate/AnnotateLine.tsx       |   1 +
 .../src/repos/annotate/Popover.tsx            |  31 +-
 scm-ui/ui-components/src/styleConstants.ts    |   3 +-
 scm-ui/ui-styles/src/components/_main.scss    |  67 +-
 scm-ui/ui-styles/src/highcontrast.scss        | 361 +++++--
 scm-ui/ui-styles/src/light.scss               |  77 +-
 scm-ui/ui-styles/src/variables/_derived.scss  |  31 +-
 .../admin/plugins/components/PluginEntry.tsx  |   1 +
 .../ui-webapp/src/components/HeaderButton.tsx |   1 +
 scm-ui/ui-webapp/src/components/InfoBox.tsx   |   2 +-
 scm-ui/ui-webapp/src/components/LoginForm.tsx |   3 +-
 .../InitializationAdminAccountStep.tsx        |   2 +-
 .../src/containers/NavigationBar.tsx          |   1 +
 .../src/containers/Notifications.tsx          |  24 +-
 .../ui-webapp/src/containers/OmniSearch.tsx   |   2 +
 .../branches/components/AheadBehindTag.tsx    |   4 +-
 .../components/BranchCommitDateCommitter.tsx  |   2 +-
 .../repos/branches/components/BranchRow.tsx   |   2 +-
 .../codeSection/components/CodeActionBar.tsx  |   2 +-
 .../codeSection/containers/FileSearch.tsx     |   1 +
 .../form/RepositoryFormSwitcher.tsx           |   2 +-
 .../src/repos/containers/ExportRepository.tsx |   3 +-
 .../src/repos/sources/containers/Content.tsx  |   4 +-
 .../src/repos/tags/components/TagDetail.tsx   |   2 +-
 .../src/repos/tags/components/TagRow.tsx      |   2 +-
 scm-ui/ui-webapp/src/search/Syntax.tsx        |   2 +-
 42 files changed, 937 insertions(+), 722 deletions(-)
 create mode 100644 gradle/changelog/high_contrast.yaml

diff --git a/gradle/changelog/high_contrast.yaml b/gradle/changelog/high_contrast.yaml
new file mode 100644
index 0000000000..c836c49efe
--- /dev/null
+++ b/gradle/changelog/high_contrast.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: High contrast mode flaws ([#1892](https://github.com/scm-manager/scm-manager/pull/1892))
diff --git a/scm-ui/ui-components/src/Autocomplete.tsx b/scm-ui/ui-components/src/Autocomplete.tsx
index 6e4dad2475..5c84cd68be 100644
--- a/scm-ui/ui-components/src/Autocomplete.tsx
+++ b/scm-ui/ui-components/src/Autocomplete.tsx
@@ -47,7 +47,7 @@ class Autocomplete extends React.Component<Props, State> {
   static defaultProps = {
     placeholder: "Type here",
     loadingMessage: "Loading...",
-    noOptionsMessage: "No suggestion available",
+    noOptionsMessage: "No suggestion available"
   };
 
   handleInputChange = (newValue: ValueType<SelectValue>, action: ActionMeta) => {
@@ -64,7 +64,7 @@ class Autocomplete extends React.Component<Props, State> {
     selectValue: ValueType<SelectValue>,
     selectOptions: readonly SelectValue[]
   ): boolean => {
-    const isNotDuplicated = !selectOptions.map((option) => option.label).includes(inputValue);
+    const isNotDuplicated = !selectOptions.map(option => option.label).includes(inputValue);
     const isNotEmpty = inputValue !== "";
     return isNotEmpty && isNotDuplicated;
   };
@@ -79,7 +79,7 @@ class Autocomplete extends React.Component<Props, State> {
       noOptionsMessage,
       loadSuggestions,
       creatable,
-      className,
+      className
     } = this.props;
 
     return (
@@ -88,6 +88,7 @@ class Autocomplete extends React.Component<Props, State> {
         <div className="control">
           {creatable ? (
             <AsyncCreatable
+              className="autocomplete-entry"
               cacheOptions
               loadOptions={loadSuggestions}
               onChange={this.handleInputChange}
@@ -96,13 +97,13 @@ class Autocomplete extends React.Component<Props, State> {
               loadingMessage={() => loadingMessage}
               noOptionsMessage={() => noOptionsMessage}
               isValidNewOption={this.isValidNewOption}
-              onCreateOption={(value) => {
+              onCreateOption={value => {
                 this.selectValue({
                   label: value,
                   value: {
                     id: value,
-                    displayName: value,
-                  },
+                    displayName: value
+                  }
                 });
               }}
               aria-label={helpText || label}
diff --git a/scm-ui/ui-components/src/Breadcrumb.tsx b/scm-ui/ui-components/src/Breadcrumb.tsx
index c7cf2e4bdd..66bdfff194 100644
--- a/scm-ui/ui-components/src/Breadcrumb.tsx
+++ b/scm-ui/ui-components/src/Breadcrumb.tsx
@@ -110,6 +110,7 @@ const ActionBar = styled.div`
   }
 `;
 
+// TODO ersetzen?
 const PrefixButton = styled.div`
   border-right: 1px solid lightgray;
 `;
diff --git a/scm-ui/ui-components/src/CardColumnGroup.tsx b/scm-ui/ui-components/src/CardColumnGroup.tsx
index 3897e001b7..99f0fbcbec 100644
--- a/scm-ui/ui-components/src/CardColumnGroup.tsx
+++ b/scm-ui/ui-components/src/CardColumnGroup.tsx
@@ -41,13 +41,13 @@ class CardColumnGroup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false,
+      collapsed: false
     };
   }
 
   toggleCollapse = () => {
-    this.setState((prevState) => ({
-      collapsed: !prevState.collapsed,
+    this.setState(prevState => ({
+      collapsed: !prevState.collapsed
     }));
   };
 
@@ -89,7 +89,7 @@ class CardColumnGroup extends React.Component<Props, State> {
             {icon}
           </span>{" "}
           {url ? (
-            <Link to={url} className="has-text-dark">
+            <Link to={url} className="has-text-secondary-more">
               {name}
             </Link>
           ) : (
diff --git a/scm-ui/ui-components/src/DangerZone.tsx b/scm-ui/ui-components/src/DangerZone.tsx
index 8c94135558..b96397f201 100644
--- a/scm-ui/ui-components/src/DangerZone.tsx
+++ b/scm-ui/ui-components/src/DangerZone.tsx
@@ -40,6 +40,7 @@ export const DangerZone = styled.div`
     }
   }
 
+  // TODO ersetzen?
   > *:not(:last-child) {
     padding-bottom: 1.5rem;
     border-bottom: solid 2px whitesmoke;
diff --git a/scm-ui/ui-components/src/Icon.tsx b/scm-ui/ui-components/src/Icon.tsx
index e6db67698f..f610344b3f 100644
--- a/scm-ui/ui-components/src/Icon.tsx
+++ b/scm-ui/ui-components/src/Icon.tsx
@@ -40,7 +40,7 @@ type Props = {
 
 const Icon: FC<Props> = ({
   iconStyle = "fas",
-  color = "grey-light",
+  color = "secondary",
   title,
   name,
   className,
diff --git a/scm-ui/ui-components/src/Logo.stories.tsx b/scm-ui/ui-components/src/Logo.stories.tsx
index 7502bbc8f2..01608379e3 100644
--- a/scm-ui/ui-components/src/Logo.stories.tsx
+++ b/scm-ui/ui-components/src/Logo.stories.tsx
@@ -26,6 +26,7 @@ import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import Logo from "./Logo";
 
+// TODO Ersetzen?
 const Wrapper = styled.div`
   padding: 2em;
   background-color: black;
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index ff36b7ad27..4ab1b8a5e1 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -926,7 +926,7 @@ exports[`Storyshots CardColumn Default 1`] = `
     >
       <i
         aria-label="avatar"
-        className="fas fa-fw fa-icons fa-2x fa-fw has-text-grey-light"
+        className="fas fa-fw fa-icons fa-2x fa-fw has-text-secondary"
         onKeyPress={[Function]}
       />
     </figure>
@@ -1097,7 +1097,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
       >
         <i
           aria-label="avatar"
-          className="fas fa-fw fa-icons fa-2x fa-fw has-text-grey-light"
+          className="fas fa-fw fa-icons fa-2x fa-fw has-text-secondary"
           onKeyPress={[Function]}
         />
       </figure>
@@ -2586,7 +2586,7 @@ exports[`Storyshots Forms/FileInput Default 1`] = `
             </span>
           </span>
           <span
-            className="file-name has-text-weight-light has-text-grey-light"
+            className="file-name has-text-weight-light has-text-secondary"
           >
             fileInput.noFileChosen
           </span>
@@ -4038,7 +4038,7 @@ exports[`Storyshots GroupEntry Default 1`] = `
         >
           <i
             aria-label="avatar"
-            className="fas fa-fw fa-icons fa-2x fa-fw has-text-grey-light"
+            className="fas fa-fw fa-icons fa-2x fa-fw has-text-secondary"
             onKeyPress={[Function]}
           />
         </div>
@@ -4116,7 +4116,7 @@ exports[`Storyshots GroupEntry With long texts 1`] = `
         >
           <i
             aria-label="avatar"
-            className="fas fa-fw fa-icons fa-2x fa-fw has-text-grey-light"
+            className="fas fa-fw fa-icons fa-2x fa-fw has-text-secondary"
             onKeyPress={[Function]}
           />
         </div>
@@ -4249,7 +4249,7 @@ exports[`Storyshots Icon Colors 1`] = `
 >
   <i
     aria-label="default color"
-    className="fas fa-fw fa-cat has-text-grey-light"
+    className="fas fa-fw fa-cat has-text-secondary"
     onKeyPress={[Function]}
     title="default color"
   />
@@ -4327,7 +4327,7 @@ exports[`Storyshots Icon Default 1`] = `
   className="Iconstories__Wrapper-sc-1g657fe-0 jVnSlu"
 >
   <i
-    className="fas fa-fw fa-cat has-text-grey-light"
+    className="fas fa-fw fa-cat has-text-secondary"
     onKeyPress={[Function]}
   />
   <i
@@ -4382,25 +4382,25 @@ exports[`Storyshots Icon More options 1`] = `
 >
   <i
     aria-label="rotate-270"
-    className="fas fa-fw fa-snowboarding fa-rotate-270 has-text-grey-light"
+    className="fas fa-fw fa-snowboarding fa-rotate-270 has-text-secondary"
     onKeyPress={[Function]}
     title="rotate-270"
   />
   <i
     aria-label="spin"
-    className="fas fa-fw fa-spinner fa-spin has-text-grey-light"
+    className="fas fa-fw fa-spinner fa-spin has-text-secondary"
     onKeyPress={[Function]}
     title="spin"
   />
   <i
     aria-label="custom sizing"
-    className="fas fa-fw fa-cat has-text-grey-light is-size-4"
+    className="fas fa-fw fa-cat has-text-secondary is-size-4"
     onKeyPress={[Function]}
     title="custom sizing"
   />
   <i
     aria-label="custom background"
-    className="fas fa-fw fa-hand-sparkles has-text-grey-light has-background-primary-25"
+    className="fas fa-fw fa-hand-sparkles has-text-secondary has-background-primary-25"
     onKeyPress={[Function]}
     title="custom background"
   />
@@ -4413,55 +4413,55 @@ exports[`Storyshots Icon Sizing 1`] = `
 >
   <i
     aria-label="default size"
-    className="fas fa-fw fa-cat has-text-grey-light"
+    className="fas fa-fw fa-cat has-text-secondary"
     onKeyPress={[Function]}
     title="default size"
   />
   <i
     aria-label="fa-xs"
-    className="fas fa-fw fa-cat fa-xs has-text-grey-light"
+    className="fas fa-fw fa-cat fa-xs has-text-secondary"
     onKeyPress={[Function]}
     title="fa-xs"
   />
   <i
     aria-label="fa-sm"
-    className="fas fa-fw fa-cat fa-sm has-text-grey-light"
+    className="fas fa-fw fa-cat fa-sm has-text-secondary"
     onKeyPress={[Function]}
     title="fa-sm"
   />
   <i
     aria-label="fa-lg"
-    className="fas fa-fw fa-cat fa-lg has-text-grey-light"
+    className="fas fa-fw fa-cat fa-lg has-text-secondary"
     onKeyPress={[Function]}
     title="fa-lg"
   />
   <i
     aria-label="fa-2x"
-    className="fas fa-fw fa-cat fa-2x has-text-grey-light"
+    className="fas fa-fw fa-cat fa-2x has-text-secondary"
     onKeyPress={[Function]}
     title="fa-2x"
   />
   <i
     aria-label="fa-3x"
-    className="fas fa-fw fa-cat fa-3x has-text-grey-light"
+    className="fas fa-fw fa-cat fa-3x has-text-secondary"
     onKeyPress={[Function]}
     title="fa-3x"
   />
   <i
     aria-label="fa-5x"
-    className="fas fa-fw fa-cat fa-5x has-text-grey-light"
+    className="fas fa-fw fa-cat fa-5x has-text-secondary"
     onKeyPress={[Function]}
     title="fa-5x"
   />
   <i
     aria-label="fa-7x"
-    className="fas fa-fw fa-cat fa-7x has-text-grey-light"
+    className="fas fa-fw fa-cat fa-7x has-text-secondary"
     onKeyPress={[Function]}
     title="fa-7x"
   />
   <i
     aria-label="fa-10x"
-    className="fas fa-fw fa-cat fa-10x has-text-grey-light"
+    className="fas fa-fw fa-cat fa-10x has-text-secondary"
     onKeyPress={[Function]}
     title="fa-10x"
   />
@@ -4583,7 +4583,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -4616,7 +4616,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -5751,7 +5751,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -5794,7 +5794,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -5823,7 +5823,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -5886,7 +5886,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -5934,7 +5934,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -5982,7 +5982,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6030,7 +6030,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6059,7 +6059,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6223,7 +6223,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6416,7 +6416,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6464,7 +6464,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6493,7 +6493,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6591,7 +6591,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6694,7 +6694,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6807,7 +6807,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -6855,7 +6855,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -7031,7 +7031,7 @@ exports[`Storyshots MarkdownView Header Anchor Links 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7082,7 +7082,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7113,7 +7113,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7137,7 +7137,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7271,7 +7271,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7379,7 +7379,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7455,7 +7455,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7479,7 +7479,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7631,7 +7631,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7655,7 +7655,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7750,7 +7750,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7826,7 +7826,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7850,7 +7850,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7957,7 +7957,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -7981,7 +7981,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8115,7 +8115,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8236,7 +8236,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8351,7 +8351,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8375,7 +8375,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8535,7 +8535,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8661,7 +8661,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8737,7 +8737,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8761,7 +8761,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8830,7 +8830,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8873,7 +8873,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -8983,7 +8983,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9007,7 +9007,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9065,7 +9065,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9089,7 +9089,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9231,7 +9231,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9274,7 +9274,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9349,7 +9349,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9373,7 +9373,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9436,7 +9436,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9460,7 +9460,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9555,7 +9555,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9643,7 +9643,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9667,7 +9667,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9709,7 +9709,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9733,7 +9733,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9819,7 +9819,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9947,7 +9947,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -9971,7 +9971,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10040,7 +10040,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10096,7 +10096,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10172,7 +10172,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10196,7 +10196,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10246,7 +10246,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10270,7 +10270,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10326,7 +10326,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10376,7 +10376,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10400,7 +10400,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10450,7 +10450,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10474,7 +10474,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10517,7 +10517,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10593,7 +10593,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10617,7 +10617,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10667,7 +10667,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10691,7 +10691,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10773,7 +10773,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10816,7 +10816,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10970,7 +10970,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -10994,7 +10994,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11089,7 +11089,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11170,7 +11170,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11194,7 +11194,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11237,7 +11237,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11417,7 +11417,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11441,7 +11441,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11562,7 +11562,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11651,7 +11651,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11675,7 +11675,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11718,7 +11718,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11761,7 +11761,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11824,7 +11824,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11848,7 +11848,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11917,7 +11917,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -11978,7 +11978,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12106,7 +12106,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12130,7 +12130,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12208,7 +12208,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12285,7 +12285,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12441,7 +12441,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12465,7 +12465,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12549,7 +12549,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12573,7 +12573,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12668,7 +12668,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12898,7 +12898,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -12922,7 +12922,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13004,7 +13004,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13080,7 +13080,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13104,7 +13104,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13190,7 +13190,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13297,7 +13297,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13407,7 +13407,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13431,7 +13431,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13487,7 +13487,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13543,7 +13543,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13606,7 +13606,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13630,7 +13630,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13738,7 +13738,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13796,7 +13796,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13844,7 +13844,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13936,7 +13936,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -13960,7 +13960,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14020,7 +14020,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14070,7 +14070,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14120,7 +14120,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14167,7 +14167,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14191,7 +14191,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14236,7 +14236,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14315,7 +14315,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14363,7 +14363,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14387,7 +14387,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14434,7 +14434,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14458,7 +14458,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14518,7 +14518,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14558,7 +14558,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14630,7 +14630,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14654,7 +14654,7 @@ and this project adheres to
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -14849,7 +14849,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -14882,7 +14882,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -14911,7 +14911,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -14940,7 +14940,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -14969,7 +14969,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -14998,7 +14998,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -15027,7 +15027,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -15056,7 +15056,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -15085,7 +15085,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -15114,7 +15114,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -15143,7 +15143,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -15172,7 +15172,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16431,7 +16431,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16474,7 +16474,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16503,7 +16503,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16566,7 +16566,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16614,7 +16614,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16662,7 +16662,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16710,7 +16710,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16739,7 +16739,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -16903,7 +16903,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17096,7 +17096,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17144,7 +17144,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17173,7 +17173,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17271,7 +17271,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17374,7 +17374,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17487,7 +17487,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17535,7 +17535,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17814,7 +17814,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17897,7 +17897,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17926,7 +17926,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17955,7 +17955,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -17984,7 +17984,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18052,7 +18052,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18120,7 +18120,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18149,7 +18149,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18178,7 +18178,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18207,7 +18207,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18275,7 +18275,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18378,7 +18378,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18481,7 +18481,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18549,7 +18549,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18617,7 +18617,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18720,7 +18720,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18823,7 +18823,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18891,7 +18891,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -18959,7 +18959,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -19027,7 +19027,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -19056,7 +19056,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -19085,7 +19085,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -19114,7 +19114,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -19182,7 +19182,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               >
                 <i
                   aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-grey-light"
+                  className="fas fa-fw fa-link has-text-secondary"
                   onClick={[Function]}
                   onKeyPress={[Function]}
                 />
@@ -22448,7 +22448,7 @@ exports[`Storyshots Repositories/Changesets With multiple signatures and not fou
                     onMouseOver={[Function]}
                   >
                     <i
-                      className="fas fa-fw fa-key has-text-grey-light SignatureIcon__StyledIcon-sc-1mwf1m5-0 iaXXnw mx-2 pt-1"
+                      className="fas fa-fw fa-key has-text-secondary SignatureIcon__StyledIcon-sc-1mwf1m5-0 iaXXnw mx-2 pt-1"
                       onKeyPress={[Function]}
                     />
                   </div>
@@ -22688,7 +22688,7 @@ exports[`Storyshots Repositories/Changesets With unknown signature 1`] = `
                     onMouseOver={[Function]}
                   >
                     <i
-                      className="fas fa-fw fa-key has-text-grey-light SignatureIcon__StyledIcon-sc-1mwf1m5-0 iaXXnw mx-2 pt-1"
+                      className="fas fa-fw fa-key has-text-secondary SignatureIcon__StyledIcon-sc-1mwf1m5-0 iaXXnw mx-2 pt-1"
                       onKeyPress={[Function]}
                     />
                   </div>
@@ -73976,13 +73976,13 @@ exports[`Storyshots Repositories/RepositoryEntry Archived 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -74085,13 +74085,13 @@ exports[`Storyshots Repositories/RepositoryEntry Avatar EP 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -74197,13 +74197,13 @@ exports[`Storyshots Repositories/RepositoryEntry Before Title EP 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -74306,13 +74306,13 @@ exports[`Storyshots Repositories/RepositoryEntry Default 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -74427,13 +74427,13 @@ exports[`Storyshots Repositories/RepositoryEntry Exporting 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -74549,13 +74549,13 @@ exports[`Storyshots Repositories/RepositoryEntry HealthCheck Failure 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -74681,13 +74681,13 @@ exports[`Storyshots Repositories/RepositoryEntry MultiRepositoryTags 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -74803,13 +74803,13 @@ exports[`Storyshots Repositories/RepositoryEntry RepositoryFlag EP 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -74912,13 +74912,13 @@ exports[`Storyshots Repositories/RepositoryEntry With long texts 1`] = `
               title="overview.contact"
             >
               <i
-                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable has-hover-visible"
                 onKeyPress={[Function]}
               />
             </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 cjcvcz is-clickable is-size-5 has-hover-visible"
               onClick={[Function]}
               onKeyPress={[Function]}
               title="overview.clone"
@@ -75235,7 +75235,7 @@ Array [
   >
     <i
       aria-label=""
-      className="fas fa-fw fa-quote-left has-text-grey-light"
+      className="fas fa-fw fa-quote-left has-text-secondary"
       onKeyPress={[Function]}
     />
     
@@ -75243,7 +75243,7 @@ Array [
     
     <i
       aria-label=""
-      className="fas fa-fw fa-quote-right has-text-grey-light"
+      className="fas fa-fw fa-quote-right has-text-secondary"
       onKeyPress={[Function]}
     />
      
@@ -75251,7 +75251,7 @@ Array [
      
     <i
       aria-label=""
-      className="fas fa-fw fa-quote-left has-text-grey-light"
+      className="fas fa-fw fa-quote-left has-text-secondary"
       onKeyPress={[Function]}
     />
     
@@ -75259,7 +75259,7 @@ Array [
     
     <i
       aria-label=""
-      className="fas fa-fw fa-quote-right has-text-grey-light"
+      className="fas fa-fw fa-quote-right has-text-secondary"
       onKeyPress={[Function]}
     />
   </div>,
@@ -75268,7 +75268,7 @@ Array [
   >
     <i
       aria-label=""
-      className="fas fa-fw fa-quote-left has-text-grey-light"
+      className="fas fa-fw fa-quote-left has-text-secondary"
       onKeyPress={[Function]}
     />
     
@@ -75276,7 +75276,7 @@ Array [
     
     <i
       aria-label=""
-      className="fas fa-fw fa-quote-right has-text-grey-light"
+      className="fas fa-fw fa-quote-right has-text-secondary"
       onKeyPress={[Function]}
     />
      
@@ -75284,7 +75284,7 @@ Array [
      
     <i
       aria-label=""
-      className="fas fa-fw fa-quote-left has-text-grey-light"
+      className="fas fa-fw fa-quote-left has-text-secondary"
       onKeyPress={[Function]}
     />
     
@@ -75292,7 +75292,7 @@ Array [
     
     <i
       aria-label=""
-      className="fas fa-fw fa-quote-right has-text-grey-light"
+      className="fas fa-fw fa-quote-right has-text-secondary"
       onKeyPress={[Function]}
     />
   </div>,
@@ -75366,7 +75366,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75409,7 +75409,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75438,7 +75438,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75501,7 +75501,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75549,7 +75549,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75597,7 +75597,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75645,7 +75645,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75674,7 +75674,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75772,7 +75772,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -75981,7 +75981,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76089,7 +76089,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76147,7 +76147,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76176,7 +76176,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76325,7 +76325,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76493,7 +76493,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76522,7 +76522,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76635,7 +76635,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76683,7 +76683,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76868,7 +76868,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -76982,7 +76982,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77011,7 +77011,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77151,7 +77151,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77320,7 +77320,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77418,7 +77418,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77506,7 +77506,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77624,7 +77624,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77715,7 +77715,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77770,7 +77770,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77799,7 +77799,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77885,7 +77885,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -77971,7 +77971,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78057,7 +78057,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78143,7 +78143,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78229,7 +78229,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78315,7 +78315,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78401,7 +78401,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78487,7 +78487,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78516,7 +78516,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78564,7 +78564,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78593,7 +78593,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78653,7 +78653,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78682,7 +78682,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78742,7 +78742,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78771,7 +78771,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78800,7 +78800,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78829,7 +78829,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78889,7 +78889,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78918,7 +78918,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78947,7 +78947,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -78976,7 +78976,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79036,7 +79036,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79065,7 +79065,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79094,7 +79094,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79123,7 +79123,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79183,7 +79183,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79212,7 +79212,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79241,7 +79241,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79270,7 +79270,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79330,7 +79330,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79359,7 +79359,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79388,7 +79388,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79417,7 +79417,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79477,7 +79477,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79506,7 +79506,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79535,7 +79535,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79564,7 +79564,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79593,7 +79593,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79622,7 +79622,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79651,7 +79651,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79711,7 +79711,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79740,7 +79740,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79769,7 +79769,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79798,7 +79798,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79827,7 +79827,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79856,7 +79856,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79885,7 +79885,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79914,7 +79914,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79943,7 +79943,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -79972,7 +79972,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80032,7 +80032,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80061,7 +80061,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80090,7 +80090,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80119,7 +80119,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80167,7 +80167,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80196,7 +80196,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80225,7 +80225,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80254,7 +80254,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80302,7 +80302,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80331,7 +80331,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80360,7 +80360,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80389,7 +80389,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80437,7 +80437,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80466,7 +80466,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80495,7 +80495,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80524,7 +80524,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80553,7 +80553,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80582,7 +80582,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80642,7 +80642,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80671,7 +80671,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80731,7 +80731,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80760,7 +80760,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80808,7 +80808,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80856,7 +80856,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80904,7 +80904,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80933,7 +80933,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -80981,7 +80981,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81029,7 +81029,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81077,7 +81077,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81125,7 +81125,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81173,7 +81173,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81221,7 +81221,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81269,7 +81269,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81298,7 +81298,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81358,7 +81358,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81387,7 +81387,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81435,7 +81435,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81483,7 +81483,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81531,7 +81531,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81579,7 +81579,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81627,7 +81627,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81675,7 +81675,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81723,7 +81723,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81752,7 +81752,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81781,7 +81781,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81810,7 +81810,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81870,7 +81870,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81899,7 +81899,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81928,7 +81928,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -81957,7 +81957,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82005,7 +82005,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82034,7 +82034,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82063,7 +82063,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82092,7 +82092,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82121,7 +82121,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82150,7 +82150,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82210,7 +82210,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82239,7 +82239,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82268,7 +82268,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82297,7 +82297,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82451,7 +82451,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82661,7 +82661,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82791,7 +82791,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -82921,7 +82921,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83051,7 +83051,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83181,7 +83181,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83311,7 +83311,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83350,7 +83350,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83379,7 +83379,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83408,7 +83408,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83437,7 +83437,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83466,7 +83466,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83526,7 +83526,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83555,7 +83555,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83615,7 +83615,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83644,7 +83644,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83707,7 +83707,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83736,7 +83736,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83796,7 +83796,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83825,7 +83825,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83854,7 +83854,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83883,7 +83883,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83938,7 +83938,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -83978,7 +83978,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84007,7 +84007,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84036,7 +84036,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84065,7 +84065,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84094,7 +84094,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84123,7 +84123,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84152,7 +84152,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84181,7 +84181,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84210,7 +84210,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84239,7 +84239,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84268,7 +84268,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84297,7 +84297,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84326,7 +84326,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84355,7 +84355,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84395,7 +84395,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84444,7 +84444,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84473,7 +84473,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84502,7 +84502,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84531,7 +84531,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84560,7 +84560,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84589,7 +84589,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84649,7 +84649,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84678,7 +84678,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84860,7 +84860,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84889,7 +84889,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84960,7 +84960,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -84989,7 +84989,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85112,7 +85112,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85141,7 +85141,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85212,7 +85212,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85241,7 +85241,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85428,7 +85428,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85457,7 +85457,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85528,7 +85528,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85557,7 +85557,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85628,7 +85628,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85719,7 +85719,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85792,7 +85792,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85821,7 +85821,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85885,7 +85885,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -85914,7 +85914,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86008,7 +86008,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86037,7 +86037,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86135,7 +86135,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86218,7 +86218,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86321,7 +86321,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86394,7 +86394,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86492,7 +86492,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86540,7 +86540,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86569,7 +86569,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86627,7 +86627,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86761,7 +86761,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86839,7 +86839,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86912,7 +86912,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -86975,7 +86975,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -87038,7 +87038,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -87126,7 +87126,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
           >
             <i
               aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-grey-light"
+              className="fas fa-fw fa-link has-text-secondary"
               onClick={[Function]}
               onKeyPress={[Function]}
             />
@@ -89547,7 +89547,7 @@ exports[`Storyshots Table Default 1`] = `
         Last Name
         <i
           aria-label="sort-amount-down icon"
-          className="fas fa-fw fa-sort-amount-down has-text-grey-light ml-1 is-invisible"
+          className="fas fa-fw fa-sort-amount-down has-text-secondary ml-1 is-invisible"
           onKeyPress={[Function]}
         />
       </th>
@@ -89633,7 +89633,7 @@ exports[`Storyshots Table Table with Word-Break 1`] = `
         Id
         <i
           aria-label="sort-alpha-down icon"
-          className="fas fa-fw fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
+          className="fas fa-fw fa-sort-alpha-down has-text-secondary ml-1 is-invisible"
           onKeyPress={[Function]}
         />
       </th>
@@ -89646,7 +89646,7 @@ exports[`Storyshots Table Table with Word-Break 1`] = `
         Name
         <i
           aria-label="sort-alpha-down icon"
-          className="fas fa-fw fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
+          className="fas fa-fw fa-sort-alpha-down has-text-secondary ml-1 is-invisible"
           onKeyPress={[Function]}
         />
       </th>
@@ -89688,7 +89688,7 @@ exports[`Storyshots Table TextColumn 1`] = `
         Id
         <i
           aria-label="sort-alpha-down icon"
-          className="fas fa-fw fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
+          className="fas fa-fw fa-sort-alpha-down has-text-secondary ml-1 is-invisible"
           onKeyPress={[Function]}
         />
       </th>
@@ -89701,7 +89701,7 @@ exports[`Storyshots Table TextColumn 1`] = `
         Name
         <i
           aria-label="sort-alpha-down icon"
-          className="fas fa-fw fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
+          className="fas fa-fw fa-sort-alpha-down has-text-secondary ml-1 is-invisible"
           onKeyPress={[Function]}
         />
       </th>
@@ -89714,7 +89714,7 @@ exports[`Storyshots Table TextColumn 1`] = `
         Description
         <i
           aria-label="sort-alpha-down icon"
-          className="fas fa-fw fa-sort-alpha-down has-text-grey-light ml-1 is-invisible"
+          className="fas fa-fw fa-sort-alpha-down has-text-secondary ml-1 is-invisible"
           onKeyPress={[Function]}
         />
       </th>
diff --git a/scm-ui/ui-components/src/forms/FileInput.tsx b/scm-ui/ui-components/src/forms/FileInput.tsx
index f479f47f1f..057823327b 100644
--- a/scm-ui/ui-components/src/forms/FileInput.tsx
+++ b/scm-ui/ui-components/src/forms/FileInput.tsx
@@ -102,7 +102,7 @@ const FileInput: FC<Props> = ({
           {file?.name ? (
             <span className="file-name">{file?.name}</span>
           ) : (
-            <span className="file-name has-text-weight-light has-text-grey-light">
+            <span className="file-name has-text-weight-light has-text-secondary">
               {filenamePlaceholder || t("fileInput.noFileChosen")}
             </span>
           )}
diff --git a/scm-ui/ui-components/src/forms/FileUpload.tsx b/scm-ui/ui-components/src/forms/FileUpload.tsx
index b960eeb817..e5165ae368 100644
--- a/scm-ui/ui-components/src/forms/FileUpload.tsx
+++ b/scm-ui/ui-components/src/forms/FileUpload.tsx
@@ -60,7 +60,7 @@ const FileUpload: FC<Props> = ({ handleFile, filenamePlaceholder = "", disabled
         {file?.name ? (
           <span className="file-name">{file?.name}</span>
         ) : (
-          <span className="file-name has-text-weight-light has-text-grey-light	">{filenamePlaceholder}</span>
+          <span className="file-name has-text-weight-light has-text-secondary">{filenamePlaceholder}</span>
         )}
       </label>
     </div>
diff --git a/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx b/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
index 6e92c48ad3..95b4d2d230 100644
--- a/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
+++ b/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
@@ -51,11 +51,11 @@ const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label,
 
   let color;
   if (disabled) {
-    color = "grey-light";
+    color = "secondary";
   } else if (checked || indeterminate) {
     color = "link";
   } else {
-    color = "black";
+    color = "secondary-most";
   }
 
   // We need a tabIndex to make the checkbox accessible from keyboard.
diff --git a/scm-ui/ui-components/src/modals/FullscreenModal.tsx b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
index 8cb6a27ffc..7d8a4f0611 100644
--- a/scm-ui/ui-components/src/modals/FullscreenModal.tsx
+++ b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
@@ -45,7 +45,7 @@ const FullSizedModal = styled(Modal)`
 
 const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active, closeButtonLabel }) => {
   const [t] = useTranslation("repos");
-  const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="grey" />;
+  const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="secondary" />;
 
   return <FullSizedModal title={title} closeFunction={closeFunction} body={body} footer={footer} active={active} />;
 };
diff --git a/scm-ui/ui-components/src/modals/Modal.tsx b/scm-ui/ui-components/src/modals/Modal.tsx
index adbfaeeab9..bcda9f486b 100644
--- a/scm-ui/ui-components/src/modals/Modal.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.tsx
@@ -45,7 +45,7 @@ type Props = {
 };
 
 const SizedModal = styled.div<{ size?: ModalSize }>`
-  width: ${(props) => (props.size ? `${modalSizes[props.size]}%` : "640px")};
+  width: ${props => (props.size ? `${modalSizes[props.size]}%` : "640px")};
 `;
 
 export const Modal: FC<Props> = ({
@@ -55,9 +55,9 @@ export const Modal: FC<Props> = ({
   footer,
   active,
   className,
-  headColor = "light",
-  headTextColor = "black",
-  size,
+  headColor = "secondary-less",
+  headTextColor = "secondary-most",
+  size
 }) => {
   const portalRootElement = usePortalRootElement("modalsRoot");
   const initialFocusRef = useRef(null);
@@ -65,7 +65,7 @@ export const Modal: FC<Props> = ({
     includeContainer: true,
     initialFocus: initialFocusRef.current,
     returnFocus: true,
-    updateNodes: false,
+    updateNodes: false
   });
 
   if (!portalRootElement) {
diff --git a/scm-ui/ui-components/src/popover/Popover.tsx b/scm-ui/ui-components/src/popover/Popover.tsx
index 53451ced9e..d89205688c 100644
--- a/scm-ui/ui-components/src/popover/Popover.tsx
+++ b/scm-ui/ui-components/src/popover/Popover.tsx
@@ -41,29 +41,10 @@ type ContainerProps = {
 };
 
 const PopoverContainer = styled.div<ContainerProps>`
-  position: absolute;
-  z-index: 100;
-  width: ${(props) => props.width}px;
-  display: block;
+  width: ${props => props.width}px;
 
   &:before {
-    position: absolute;
-    content: "";
-    border-style: solid;
-    pointer-events: none;
-    height: 0;
-    width: 0;
-    top: 100%;
-    left: ${(props) => props.width / 2}px;
-    border-color: transparent;
-    border-bottom-color: white;
-    border-left-color: white;
-    border-width: 0.4rem;
-    margin-left: -0.4rem;
-    margin-top: -0.4rem;
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    transform: rotate(-45deg);
+    left: ${props => props.width / 2}px;
   }
 `;
 
@@ -71,7 +52,7 @@ const PopoverHeading = styled.div`
   height: 1.5em;
 `;
 
-const Popover: FC<Props> = (props) => {
+const Popover: FC<Props> = props => {
   if (!props.show) {
     return null;
   }
@@ -89,13 +70,13 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover",
+      type: "enter-popover"
     });
   };
 
   const onMouseLeave = () => {
     dispatch({
-      type: "leave-popover",
+      type: "leave-popover"
     });
   };
 
@@ -105,7 +86,7 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
     <PopoverContainer
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className="box"
+      className="box popover"
       style={{ top: `${top}px`, left: `${left}px` }}
       width={width!}
       ref={ref}
@@ -118,7 +99,7 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 };
 
 Popover.defaultProps = {
-  width: 120,
+  width: 120
 };
 
 export default Popover;
diff --git a/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx b/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx
index 3ac5f2b8ef..598f908e21 100644
--- a/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx
+++ b/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx
@@ -38,7 +38,7 @@ type Props = {
 const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }) => {
   const [t] = useTranslation("repos");
 
-  const footer = <Button label={t("healthCheckFailure.close")} action={closeFunction} color="grey" />;
+  const footer = <Button label={t("healthCheckFailure.close")} action={closeFunction} color="secondary" />;
 
   return (
     <Modal
@@ -52,7 +52,7 @@ const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }
       active={active}
       footer={footer}
       headColor={"danger"}
-      headTextColor={"white"}
+      headTextColor="secondary-least"
     />
   );
 };
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
index cf9d5e6d15..30a0daca8e 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
@@ -49,9 +49,6 @@ const ContentRightContainer = styled.div`
 
 const QuickAction = styled(Icon)`
   margin-top: 0.2rem;
-  :hover {
-    color: #363636 !important;
-  }
 `;
 
 const ContactAvatar = styled.img`
@@ -79,9 +76,15 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
 
   const renderContactIcon = () => {
     if (avatarFactory) {
-      return <ContactAvatar className="has-rounded-border" src={avatarFactory({ mail: repository.contact })} alt={repository.contact} />;
+      return (
+        <ContactAvatar
+          className="has-rounded-border"
+          src={avatarFactory({ mail: repository.contact })}
+          alt={repository.contact}
+        />
+      );
     }
-    return <QuickAction className={classNames("is-clickable")} name="envelope" color="info" />;
+    return <QuickAction className={classNames("is-clickable", "has-hover-visible")} name="envelope" color="info" />;
   };
 
   const createContentRight = () => (
@@ -124,7 +127,7 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
           </ContactActionWrapper>
         ) : null}
         <QuickAction
-          className={classNames("is-clickable", "is-size-5")}
+          className={classNames("is-clickable", "is-size-5", "has-hover-visible")}
           name="download"
           color="info"
           onClick={() => setOpenCloneModal(true)}
diff --git a/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx b/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
index 512cee4c3e..13a9f3c1d3 100644
--- a/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
@@ -58,6 +58,7 @@ const LineNumber = styled(LineElement)`
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  // TODO: ERSETZEN?
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
 
diff --git a/scm-ui/ui-components/src/repos/annotate/Popover.tsx b/scm-ui/ui-components/src/repos/annotate/Popover.tsx
index 54351fb037..5f368d6968 100644
--- a/scm-ui/ui-components/src/repos/annotate/Popover.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/Popover.tsx
@@ -34,32 +34,7 @@ import { Action } from "./actions";
 import { useTranslation } from "react-i18next";
 
 const PopoverContainer = styled.div`
-  position: absolute;
   left: 2.25em;
-  z-index: 100;
-  width: 30em;
-  display: block;
-
-  &:before {
-    position: absolute;
-    content: "";
-    border-style: solid;
-    pointer-events: none;
-    height: 0;
-    width: 0;
-    top: 100%;
-    left: 5.5em;
-    border-color: transparent;
-    border-bottom-color: white;
-    border-left-color: white;
-    border-width: 0.4rem;
-    margin-left: -0.4rem;
-    margin-top: -0.4rem;
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
-    transform: rotate(-45deg);
-  }
 `;
 
 const PopoverHeading = styled.div`
@@ -97,13 +72,13 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover",
+      type: "enter-popover"
     });
   };
 
   const OnMouseLeave = () => {
     dispatch({
-      type: "leave-popover",
+      type: "leave-popover"
     });
   };
 
@@ -113,7 +88,7 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
       ref={ref}
       onMouseEnter={onMouseEnter}
       onMouseLeave={OnMouseLeave}
-      className="box"
+      className="box popover"
       style={{ top: `${top}px` }}
     >
       <PopoverHeading className="is-clearfix">
diff --git a/scm-ui/ui-components/src/styleConstants.ts b/scm-ui/ui-components/src/styleConstants.ts
index b1d7f22e30..85feabba70 100644
--- a/scm-ui/ui-components/src/styleConstants.ts
+++ b/scm-ui/ui-components/src/styleConstants.ts
@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+// TODO erweitern
 export const colors = [
   "black",
   "dark",
@@ -32,7 +33,7 @@ export const colors = [
   "info",
   "success",
   "warning",
-  "danger",
+  "danger"
 ] as const;
 export type Color = typeof colors[number];
 
diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss
index a9b85bc537..95816e8025 100644
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -174,33 +174,6 @@ footer.footer {
   background-color: $danger-25;
 }
 
-// TODO
-/*.has-background-danger-high-contrast {
-  background-color: $high-contrast-danger;
-}
-.has-background-danger-high-contrast-75 {
-  background-color: $high-contrast-danger-75;
-}
-.has-background-danger-high-contrast-50 {
-  background-color: $high-contrast-danger-50;
-}
-.has-background-danger-high-contrast-25 {
-  background-color: $high-contrast-danger-25;
-}
-
-.has-background-high-contrast-light-gray {
-  background-color: $high-contrast-light-gray;
-}
-.has-background-high-contrast-light-gray-75 {
-  background-color: $light-75;
-}
-.has-background-high-contrast-light-gray-50 {
-  background-color: $light-50;
-}
-.has-background-high-contrast-light-gray-25 {
-  background-color: $light-25;
-}*/
-
 // tags
 .tag:not(body) {
   border: 1px solid transparent;
@@ -370,6 +343,35 @@ footer.footer {
   }
 }
 
+.popover {
+  position: absolute;
+  z-index: 100;
+  width: 30em;
+  display: block;
+
+  &:before {
+    position: absolute;
+    content: "";
+    border-style: solid;
+    pointer-events: none;
+    height: 0;
+    width: 0;
+    top: 100%;
+    left: 5.5em;
+    border-color: transparent;
+    border-width: 0.4rem;
+    margin-left: -0.4rem;
+    margin-top: -0.4rem;
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    transform: rotate(-45deg);
+  }
+}
+
+.notifications .dropdown-menu:before {
+  border: 0.4rem solid transparent;
+}
+
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "~@fortawesome/fontawesome-free/scss/solid";
@@ -551,7 +553,7 @@ ul.is-separated {
 
 // panels
 .panel {
-  border: 1px solid #dbdbdb;
+  border: 1px solid $border;
   border-radius: 0.25rem;
 
   .panel-heading {
@@ -833,6 +835,11 @@ form .field:not(.is-grouped) {
   color: $text !important;
 }
 
-.has-background-accent {
-  background: $background-accent;
+.autocomplete-entry > div {
+  border-color: $blue-light;
+
+  &:hover,
+  &.is-hovered {
+    border-color: #4a4a4a;
+  }
 }
diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss
index 49841fb2ee..c4be0f5023 100644
--- a/scm-ui/ui-styles/src/highcontrast.scss
+++ b/scm-ui/ui-styles/src/highcontrast.scss
@@ -30,8 +30,6 @@ $background: $grey-dark;
 $text: $white-ter;
 $text-strong: $white-bis;
 
-$background-accent: $grey-darker;
-
 $red: #e63453;
 // TODO check if we could replace red in commons,
 // without breaking the light mode
@@ -53,7 +51,7 @@ $footer-color: $white-ter;
 $box-background-color: scale-color($scheme-main, $lightness: 15%);
 $box-background-color: $grey-darker;
 
-$modal-card-head-background-color: $grey-dark;
+$modal-card-head-background-color: $black-ter;
 $modal-card-body-background-color: $scheme-main;
 
 $input-placeholder-color: $white;
@@ -66,17 +64,13 @@ $tooltip-background-color: $white-bis;
 $tooltip-background-opacity: 0.9 !default;
 $tooltip-color: $scheme-main;
 
-// WTF
-$high-contrast-background-color: #050514;
-$high-contrast-light-gray: #f2f2f2;
-
 @import "utils/_post.scss";
 
-
+// SyntaxHighlighter
 :root {
   --sh-base-color: #fff;
-  --sh-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  --sh-block-background: #000;
+  --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  --sh-block-background: $scheme-main;
   --sh-inline-code-color: #ff3860;
   --sh-inline-code-background: #fbe7eb;
   --sh-comment-color: #9a9a9a;
@@ -85,8 +79,8 @@ $high-contrast-light-gray: #f2f2f2;
   --sh-selector-color: #009dff;
   --sh-operator-color: #999999;
   --sh-operator-bg: inherit;
-  --sh-variable-color: #C386CA;
-  --sh-function-color: #FF6181;
+  --sh-variable-color: #c386ca;
+  --sh-function-color: #ff6181;
   --sh-keyword-color: #00a984;
   --sh-selected-color: #7fe3cd;
   --sh-highlight-background: #f5f5f5;
@@ -96,10 +90,10 @@ $high-contrast-light-gray: #f2f2f2;
   --diff-text-color: $white-bis;
   --diff-font-family: Consolas, Courier, monospace;
   --diff-selection-background-color: #b3d7ff;
-  --diff-gutter-insert-background-color: #05C71D;
-  --diff-gutter-delete-background-color: #EB7A85;
+  --diff-gutter-insert-background-color: #05c71d;
+  --diff-gutter-delete-background-color: #eb7a85;
   --diff-gutter-selected-background-color: #fffce0;
-  --diff-code-insert-background-color: #05240B;
+  --diff-code-insert-background-color: #05240b;
   --diff-code-delete-background-color: #230608;
   --diff-code-insert-edit-background-color: #c0dc91;
   --diff-code-delete-edit-background-color: #000;
@@ -107,19 +101,7 @@ $high-contrast-light-gray: #f2f2f2;
   --diff-omit-gutter-line-color: #cb2a1d;
 }
 
-
 .button {
-
-  &.is-danger:hover,
-  &.is-danger.is-hovered {
-    background-color: scale-color($danger, $lightness: -2.5%);
-  }
-
-  &.is-danger:active,
-  &.is-danger.is-active {
-    background-color: scale-color($danger, $lightness: -4%);
-  }
-
   &.is-primary,
   &.is-info,
   &.is-link,
@@ -130,6 +112,91 @@ $high-contrast-light-gray: #f2f2f2;
       background-color: inherit;
     }
   }
+
+  &.is-primary:hover,
+  &.is-primary.is-hovered {
+    background-color: scale-color($primary, $lightness: -5%);
+  }
+
+  &.is-primary:active,
+  &.is-primary.is-active {
+    background-color: scale-color($primary, $lightness: -10%);
+  }
+
+  &.is-primary[disabled] {
+    background-color: scale-color($primary, $lightness: -50%);
+  }
+
+  &.is-info:hover,
+  &.is-info.is-hovered {
+    background-color: scale-color($info, $lightness: -5%);
+  }
+
+  &.is-info:active,
+  &.is-info.is-active {
+    background-color: scale-color($info, $lightness: -10%);
+  }
+
+  &.is-info[disabled] {
+    background-color: scale-color($info, $lightness: -50%);
+  }
+
+  &.is-link:hover,
+  &.is-link.is-hovered {
+    background-color: scale-color($link, $lightness: -5%);
+  }
+
+  &.is-link:active,
+  &.is-link.is-active {
+    background-color: scale-color($link, $lightness: -10%);
+  }
+
+  &.is-link[disabled] {
+    background-color: scale-color($link, $lightness: -50%);
+  }
+
+  &.is-success:hover,
+  &.is-success.is-hovered {
+    background-color: scale-color($success, $lightness: -5%);
+  }
+
+  &.is-success:active,
+  &.is-success.is-active {
+    background-color: scale-color($success, $lightness: -10%);
+  }
+
+  &.is-success[disabled] {
+    background-color: scale-color($success, $lightness: -50%);
+  }
+
+  &.is-warning:hover,
+  &.is-warning.is-hovered {
+    background-color: scale-color($warning, $lightness: -5%);
+  }
+
+  &.is-warning:active,
+  &.is-warning.is-active {
+    background-color: scale-color($warning, $lightness: -10%);
+  }
+
+  &.is-warning[disabled] {
+    background-color: scale-color($warning, $lightness: -50%);
+    color: #e1d4c2;
+  }
+
+  &.is-danger:hover,
+  &.is-danger.is-hovered {
+    background-color: scale-color($danger, $lightness: -5%);
+  }
+
+  &.is-danger:active,
+  &.is-danger.is-active {
+    background-color: scale-color($danger, $lightness: -10%);
+  }
+
+  &.is-danger[disabled] {
+    background-color: scale-color($danger, $lightness: -50%);
+  }
 }
 
 .menu-label {
@@ -141,23 +208,31 @@ $high-contrast-light-gray: #f2f2f2;
     color: $white-ter;
 
     &.is-active {
-      background-color: $high-contrast-background-color;
+      background-color: $scheme-main;
     }
   }
 }
+
 //footer is overwritten in _main.scss
 footer.footer {
-  background-color: $grey-dark;
-  a{
-    color: scale-color($link, $lightness:25%);
+  background-color: $black-ter;
+  a {
+    color: scale-color($link, $lightness: 25%);
   }
 }
-//card
 
+.card {
+  border: 1px solid $white-ter;
+  box-shadow: none;
+}
+
+//card
 .modal-card {
   border: 1px solid $white-ter;
- .modal-close::before, .delete::before, .modal-close::after, .delete::after {
-  background-color: $white-bis;
+
+  & .modal-close,
+  & .delete {
+    background-color: $white-ter;
   }
 }
 
@@ -187,6 +262,9 @@ footer.footer {
     &.is-darker {
       background-color: $grey-dark;
     }
+    &:first-child {
+      border-left-width: 9px;
+    }
   }
 
   &.is-hoverable tbody tr:not(.is-selected):hover {
@@ -196,26 +274,15 @@ footer.footer {
 
 // panels
 .panel {
-  border: 1px solid $white-bis;
-  border-radius: 0.25rem;
+  border-color: $white-bis;
 
   .panel-heading {
-    border: none;
-    border-bottom: 1px solid $border;
-    border-radius: 0.25rem 0.25rem 0 0;
-    background-color: $grey-darker;
+    background-color: $black-ter;
   }
 
   .panel-footer {
-    background-color: $grey-darker;
+    background-color: $black-ter;
     color: $white-bis;
-    font-size: 1.25em;
-    font-weight: 300;
-    line-height: 1.25;
-    padding: 0.5em 0.75em;
-    border: none;
-    border-top: 1px solid $border;
-    border-radius: 0 0 0.25rem 0.25rem;
   }
 }
 
@@ -225,10 +292,12 @@ footer.footer {
 }
 
 .diff-gutter-conflict {
-  background-color: #FFD11A;
+  background-color: #ffd11a;
 }
 
-.diff-gutter-delete,.diff-gutter-insert, .diff-gutter-conflict {
+.diff-gutter-delete,
+.diff-gutter-insert,
+.diff-gutter-conflict {
   color: $scheme-main;
 }
 
@@ -265,57 +334,57 @@ td:first-child.diff-gutter-conflict:before {
 .tag:not(body) {
   border: 1px solid transparent;
   background-color: $white;
-  .is-delete::before, .is-delete::after {
+
+  &.is-delete {
+    &::before,
+    &::after {
+      background-color: $scheme-main;
+    }
+
+    &:hover::before,
+    &:hover::after {
+      background-color: $white-bis;
+    }
+  }
+
+  //dark tags have light borders to separate from background
+  &.is-dark,
+  &.is-black {
+    border: 1px solid $white-bis;
+  }
+
+  //blue text in light tags
+  &.is-light .has-text-link {
+    color: scale-color($link, $lightness: -50%) !important;
+  }
+
+  //outline-tags
+  &.is-outlined {
     background-color: $scheme-main;
   }
 }
 
-.tag:not(body).is-delete::before, .tag:not(body).is-delete::after {
-  background-color: $scheme-main;
-}
-.tag:not(body).is-delete:hover::before, .tag:not(body).is-delete:hover::after {
-  background-color: $white-bis;
-}
-
-//dark tags have light borders to separate from background
-.tag:not(body).is-dark, .tag:not(body).is-black {
-  border: 1px solid $white-bis;
-}
-
-//blue text in light tags
-.tag.is-light .has-text-link {
-  color: scale-color($link, $lightness: -50%) !important;
-}
-//outline-tags
-.tag:not(body).is-outlined {
-  background-color: $scheme-main;
-}
-
 //cards receive white border
 .box-link-shadow {
   box-shadow: 0 0 0 1px $white-bis;
 }
 
-//some modals have lighter backgrounds in head
-//TODO: fix with meta-class (contains light color in light-mode, dark color in dark mode
-.has-background-light {
-  background-color: $grey-dark !important;
-}
-
-//they also often have black text, this is a stop-gap
-//TODO: fix with meta-class (contains dark color in light-mode, light color in dark mode
-.modal-card-title.has-text-black {
-  color: $white-bis !important;
-}
-
-//fix triangle for pop-overs
 .popover {
-  color: #00a984;
+  border: 1px solid $white-ter;
+
+  &:before {
+    border-bottom-color: $grey-dark;
+    border-left-color: $grey-dark;
+  }
 }
-.popover .popover-content::before
-{
-  border-bottom-color: $grey-dark !important;
-  border-left-color: $grey-dark !important;
+
+.notifications .dropdown-menu {
+  border: 1px solid $white-ter;
+
+  &:before {
+    border-bottom-color: $white-ter;
+    border-left-color: $white-ter;
+  }
 }
 
 //make horizontal lines pop more
@@ -323,14 +392,112 @@ hr {
   background-color: $white-bis;
 }
 
-//Login and logout overwrite white-ter background
-.hero-body .has-background-white-ter {
-  background-color: $grey-dark !important;
-}
-
 //Display darker version of background image
 .has-scm-background {
   background-image: url(images/scmManagerHeroDark.jpg) !important;
-  background-size: cover;
-  background-position: top center;
+}
+
+.has-text-secondary-least {
+  color: $scheme-main !important;
+}
+a.has-text-secondary-least:hover,
+a.has-text-secondary-least:focus {
+  color: lighten($scheme-main, 10%) !important;
+}
+.has-background-secondary-least {
+  background-color: $scheme-main !important;
+}
+
+.has-text-secondary-less {
+  color: $black-ter !important;
+}
+a.has-text-secondary-less:hover,
+a.has-text-secondary-less:focus {
+  color: lighten($black-ter, 10%) !important;
+}
+.has-background-secondary-less {
+  background-color: $black-ter !important;
+}
+
+.has-text-secondary {
+  color: $white-bis !important;
+}
+a.has-text-secondary:hover,
+a.has-text-secondary:focus {
+  color: lighten($white-bis, 10%) !important;
+}
+.has-background-secondary {
+  background-color: $white-bis !important;
+}
+
+.has-text-secondary-more {
+  color: $white-ter !important;
+}
+a.has-text-secondary-more:hover,
+a.has-text-secondary-more:focus {
+  color: lighten($white-ter, 10%) !important;
+}
+.has-background-secondary-more {
+  background-color: $white-ter !important;
+}
+
+.has-text-secondary-most {
+  color: $white !important;
+}
+a.has-text-secondary-most:hover,
+a.has-text-secondary-most:focus {
+  color: lighten($white, 10%) !important;
+}
+.has-background-secondary-most {
+  background-color: $white !important;
+}
+
+.has-hover-visible:hover {
+  color: $white-bis !important;
+}
+
+.select select[disabled],
+[disabled].textarea,
+[disabled].input,
+fieldset[disabled] .select select,
+.select fieldset[disabled] select,
+fieldset[disabled] .textarea,
+fieldset[disabled] .input {
+  color: $white-bis;
+}
+
+[disabled].textarea::placeholder,
+[disabled].input::placeholder,
+fieldset[disabled] .textarea::placeholder,
+fieldset[disabled] .input::placeholder {
+  color: $white-bis;
+}
+
+.repository-export-info-box {
+  background-color: $high-contrast-info-25;
+  border: 0.2rem solid;
+}
+
+.search-syntax-accordion {
+  border: 1px solid $info;
+  box-shadow: none;
+}
+
+.autocomplete-entry > div {
+  background-color: $scheme-main;
+  color: $white-bis;
+
+  /* Text input */
+  &:nth-child(2) * {
+    color: $white-bis;
+  }
+
+  /* Suggestions */
+  &:nth-child(3) {
+    border: 1px solid $info;
+
+    > div div:hover {
+      background-color: #4672fe !important;
+    }
+  }
 }
diff --git a/scm-ui/ui-styles/src/light.scss b/scm-ui/ui-styles/src/light.scss
index 40670c246e..ac2061026f 100644
--- a/scm-ui/ui-styles/src/light.scss
+++ b/scm-ui/ui-styles/src/light.scss
@@ -25,16 +25,14 @@
 @import "utils/_pre.scss";
 // colors defined in variables/commons.scss
 $subtitle-color: #666;
-$warning-invert: #88550D;
-$button-disabled-opacity: .25;
-
-$background-accent: $white-ter;
+$warning-invert: #88550d;
+$button-disabled-opacity: 0.25;
 
 @import "utils/_post.scss";
 
 :root {
   --sh-base-color: #363636;
-  --sh-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  --sh-font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   --sh-block-background: #ffffff;
   --sh-inline-code-color: #ff3860;
   --sh-inline-code-background: #fbe7eb;
@@ -52,3 +50,72 @@ $background-accent: $white-ter;
   --sh-highlight-accent: #99d8f3;
 }
 
+.popover:before {
+  border-bottom-color: white;
+  border-left-color: white;
+  box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
+}
+
+.notifications .dropdown-menu:before {
+  border-bottom-color: white;
+  border-left-color: white;
+}
+
+.has-text-secondary-least {
+  color: $white !important;
+}
+a.has-text-secondary-least:hover,
+a.has-text-secondary-least:focus {
+  color: lighten($white, 10%) !important;
+}
+.has-background-secondary-least {
+  background-color: $white !important;
+}
+
+.has-text-secondary-less {
+  color: $white-ter !important;
+}
+a.has-text-secondary-less:hover,
+a.has-text-secondary-less:focus {
+  color: lighten($white-ter, 10%) !important;
+}
+.has-background-secondary-less {
+  background-color: $white-ter !important;
+}
+
+.has-text-secondary {
+  color: $grey-light !important;
+}
+a.has-text-secondary:hover,
+a.has-text-secondary:focus {
+  color: lighten($grey-light, 10%) !important;
+}
+.has-background-secondary {
+  background-color: $grey-light !important;
+}
+
+.has-text-secondary-more {
+  color: $grey-darker !important;
+}
+a.has-text-secondary-more:hover,
+a.has-text-secondary-more:focus {
+  color: lighten($grey-darker, 10%) !important;
+}
+.has-background-secondary-more {
+  background-color: $grey-darker !important;
+}
+
+.has-text-secondary-most {
+  color: $black !important;
+}
+a.has-text-secondary-most:hover,
+a.has-text-secondary-most:focus {
+  color: lighten($black, 10%) !important;
+}
+.has-background-secondary-most {
+  background-color: $black !important;
+}
+
+.has-hover-visible:hover {
+  color: $grey-darker !important;
+}
diff --git a/scm-ui/ui-styles/src/variables/_derived.scss b/scm-ui/ui-styles/src/variables/_derived.scss
index 1a88f729d5..d730e9d3b5 100644
--- a/scm-ui/ui-styles/src/variables/_derived.scss
+++ b/scm-ui/ui-styles/src/variables/_derived.scss
@@ -43,13 +43,24 @@ $danger-75: scale-color($danger, $lightness: 25%);
 $danger-50: scale-color($danger, $lightness: 50%);
 $danger-25: scale-color($danger, $lightness: 75%);
 
-// TODO
-// $high-contrast-danger-75: scale-color($high-contrast-danger, $lightness: 25%);
-// $high-contrast-danger-50: scale-color($high-contrast-danger, $lightness: 50%);
-// $high-contrast-danger-25: scale-color($high-contrast-danger, $lightness: 75%);
-
-// TODO
-// high-contrast light gray
-// $light-75: darken($high-contrast-light-gray, 15%);
-// $light-50: darken($high-contrast-light-gray, 30%);
-// $light-25: darken($high-contrast-light-gray, 45%);
+$high-contrast-dark-75: scale-color($dark, $lightness: -25%);
+$high-contrast-dark-50: scale-color($dark, $lightness: -50%);
+$high-contrast-dark-25: scale-color($dark, $lightness: -75%);
+$high-contrast-info-75: scale-color($info, $lightness: -25%);
+$high-contrast-info-50: scale-color($info, $lightness: -50%);
+$high-contrast-info-25: scale-color($info, $lightness: -75%);
+$high-contrast-link-75: scale-color($link, $lightness: -25%);
+$high-contrast-link-50: scale-color($link, $lightness: -50%);
+$high-contrast-link-25: scale-color($link, $lightness: -75%);
+$high-contrast-primary-75: scale-color($primary, $lightness: -25%);
+$high-contrast-primary-25: scale-color($primary, $lightness: -75%);
+$high-contrast-primary-50: scale-color($primary, $lightness: -50%);
+$high-contrast-success-75: scale-color($success, $lightness: -25%);
+$high-contrast-success-50: scale-color($success, $lightness: -50%);
+$high-contrast-success-25: scale-color($success, $lightness: -75%);
+$high-contrast-warning-75: scale-color($warning, $lightness: -25%);
+$high-contrast-warning-50: scale-color($warning, $lightness: -50%);
+$high-contrast-warning-25: scale-color($warning, $lightness: -75%);
+$high-contrast-danger-75: scale-color($danger, $lightness: -25%);
+$high-contrast-danger-50: scale-color($danger, $lightness: -50%);
+$high-contrast-danger-25: scale-color($danger, $lightness: -75%);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
index 100fe4622e..9325b4969c 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
@@ -43,6 +43,7 @@ const ActionbarWrapper = styled.div`
   }
 `;
 
+// TODO: ersetzen?
 const IconWrapperStyle = styled.span.attrs(props => ({
   className: "level-item mb-0 p-2 is-clickable"
 }))`
diff --git a/scm-ui/ui-webapp/src/components/HeaderButton.tsx b/scm-ui/ui-webapp/src/components/HeaderButton.tsx
index af92faef76..b68bfc7928 100644
--- a/scm-ui/ui-webapp/src/components/HeaderButton.tsx
+++ b/scm-ui/ui-webapp/src/components/HeaderButton.tsx
@@ -26,6 +26,7 @@ import styled from "styled-components";
 import { devices } from "@scm-manager/ui-components";
 
 const HeaderButton = styled.div`
+  // TODO: ersetzen?
   @media screen and (max-width: ${devices.desktop.width - 1}px) {
     border-top: 1px solid white;
     margin-top: 1rem;
diff --git a/scm-ui/ui-webapp/src/components/InfoBox.tsx b/scm-ui/ui-webapp/src/components/InfoBox.tsx
index 57a8103fcd..bd0c9e4a83 100644
--- a/scm-ui/ui-webapp/src/components/InfoBox.tsx
+++ b/scm-ui/ui-webapp/src/components/InfoBox.tsx
@@ -68,7 +68,7 @@ class InfoBox extends React.Component<Props> {
                 "image",
                 "box",
                 "has-text-weight-bold",
-                "has-text-white",
+                "has-text-secondary-least",
                 "has-background-info",
                 "is-flex",
                 "is-flex-direction-column",
diff --git a/scm-ui/ui-webapp/src/components/LoginForm.tsx b/scm-ui/ui-webapp/src/components/LoginForm.tsx
index 65808dfdd2..0ecdb769d4 100644
--- a/scm-ui/ui-webapp/src/components/LoginForm.tsx
+++ b/scm-ui/ui-webapp/src/components/LoginForm.tsx
@@ -46,6 +46,7 @@ const AvatarWrapper = styled.figure`
   padding-bottom: 20px;
 `;
 
+//TODO Ersetzen?
 const AvatarImage = styled(Image)`
   width: 128px;
   height: 128px;
@@ -99,7 +100,7 @@ class LoginForm extends React.Component<Props, State> {
   render() {
     const { loading, t } = this.props;
     return (
-      <div className="column is-4 box has-text-centered has-background-white-ter">
+      <div className="column is-4 box has-text-centered has-background-secondary-less">
         <h3 className="title">{t("login.title")}</h3>
         <p className="subtitle">{t("login.subtitle")}</p>
         <TopMarginBox className="box">
diff --git a/scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx b/scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx
index 788a4a08b2..1709031d48 100644
--- a/scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx
+++ b/scm-ui/ui-webapp/src/containers/InitializationAdminAccountStep.tsx
@@ -120,7 +120,7 @@ const InitializationAdminAccountStep: FC<Props> = ({ data }) => {
   }
 
   const component = (
-    <div className="column is-8 box  has-background-white-ter">
+    <div className="column is-8 box  has-background-secondary-less">
       <form onSubmit={handleSubmit(onSubmit)}>
         <h3 className="title">{t("title")}</h3>
         <h4 className="subtitle">{t("adminStep.title")}</h4>
diff --git a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
index 3df4cede78..d6d528fc6a 100644
--- a/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
+++ b/scm-ui/ui-webapp/src/containers/NavigationBar.tsx
@@ -85,6 +85,7 @@ const StyledNavBar = styled.nav`
     padding: 0;
   }
 
+  //TODO Ersetzen?
   .navbar-brand {
     @media screen and (max-width: ${devices.desktop.width - 1}px) {
       border-bottom: 1px solid white;
diff --git a/scm-ui/ui-webapp/src/containers/Notifications.tsx b/scm-ui/ui-webapp/src/containers/Notifications.tsx
index b0ba6e19e9..abdbfa226b 100644
--- a/scm-ui/ui-webapp/src/containers/Notifications.tsx
+++ b/scm-ui/ui-webapp/src/containers/Notifications.tsx
@@ -65,15 +65,10 @@ const DropDownMenu = styled.div`
   &:before {
     position: absolute;
     content: "";
-    border-style: solid;
     pointer-events: none;
     height: 0;
     width: 0;
-    top: 0;
-    border-color: transparent;
-    border-bottom-color: white;
-    border-left-color: white;
-    border-width: 0.4rem;
+    top: -7px; // top padding of dropdown-menu + border-spacing
     transform-origin: center;
     transform: rotate(135deg);
 
@@ -132,7 +127,7 @@ const NotificationEntry: FC<EntryProps> = ({ notification, removeToast }) => {
         ) : (
           <Icon
             name="trash"
-            color="black"
+            color="secondary-most"
             className="is-clickable"
             title={t("notifications.dismiss")}
             onClick={remove}
@@ -143,12 +138,6 @@ const NotificationEntry: FC<EntryProps> = ({ notification, removeToast }) => {
   );
 };
 
-const DismissAllButton = styled(Button)`
-  &:hover > * {
-    color: white !important;
-  }
-`;
-
 type ClearEntryProps = {
   notifications: NotificationCollection;
   clearToasts: () => void;
@@ -164,9 +153,9 @@ const ClearEntry: FC<ClearEntryProps> = ({ notifications, clearToasts }) => {
   return (
     <div className={classNames("dropdown-item", "has-text-centered")}>
       <ErrorNotification error={error} />
-      <DismissAllButton className="is-outlined" color="link" loading={isLoading} action={clear}>
-        <Icon color="link" name="trash" className="mr-1" alt="" /> {t("notifications.dismissAll")}
-      </DismissAllButton>
+      <Button className="is-outlined" color="link" loading={isLoading} action={clear}>
+        <Icon color="inherit" name="trash" className="mr-1" alt="" /> {t("notifications.dismissAll")}
+      </Button>
     </div>
   );
 };
@@ -188,7 +177,7 @@ const NotificationList: FC<Props> = ({ data, clear, remove }) => {
         </tbody>
       </table>
       {all.length > 6 ? (
-        <p className={classNames("has-text-centered", "has-text-grey")}>
+        <p className={classNames("has-text-centered", "has-text-secondary")}>
           {t("notifications.xMore", { count: all.length - 6 })}
         </p>
       ) : null}
@@ -348,6 +337,7 @@ const Notifications: FC<NotificationProps> = ({ className }) => {
       <NotificationSubscription notifications={notifications} remove={remove} />
       <div
         className={classNames(
+          "notifications",
           "dropdown",
           "is-hoverable",
           {
diff --git a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
index 35b8c8f607..0ef97b7b28 100644
--- a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
+++ b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx
@@ -71,6 +71,7 @@ const EmptyHits: FC = () => {
   );
 };
 
+// TODO ersetzen
 const ResultHeading = styled.h3`
   border-bottom: 1px solid lightgray;
 `;
@@ -79,6 +80,7 @@ const DropdownMenu = styled.div`
   max-width: 20rem;
 `;
 
+// TODO ersetzen
 const ResultFooter = styled.div`
   border-top: 1px solid lightgray;
 `;
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
index 904b09db4d..0742858408 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/AheadBehindTag.tsx
@@ -96,7 +96,7 @@ const AheadBehindTag: FC<Props> = ({ branch, details, hiddenMobile, verbose }) =
         <Behind className="column is-half is-flex is-flex-direction-column is-align-items-flex-end p-0">
           <Count className="is-size-7 pr-1">{behindText}</Count>
           <Bar
-            className="has-rounded-border-left has-background-grey"
+            className="has-rounded-border-left has-background-secondary"
             width={calculateBarLength(details.changesetsBehind)}
             direction="left"
           />
@@ -104,7 +104,7 @@ const AheadBehindTag: FC<Props> = ({ branch, details, hiddenMobile, verbose }) =
         <Ahead className="column is-half is-flex is-flex-direction-column is-align-items-flex-start p-0">
           <Count className="is-size-7 pl-1">{aheadText}</Count>
           <Bar
-            className="has-rounded-border-right has-background-grey"
+            className="has-rounded-border-right has-background-secondary"
             width={calculateBarLength(details.changesetsAhead)}
             direction="right"
           />
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
index 8f5ba88305..2cc6a4cdd4 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
@@ -31,7 +31,7 @@ import { useTranslation } from "react-i18next";
 const BranchCommitDateCommitter: FC<{ branch: Branch }> = ({ branch }) => {
   const [t] = useTranslation("repos");
 
-  const committedAt = <DateFromNow className={classNames("is-size-7", "has-text-grey")} date={branch.lastCommitDate} />;
+  const committedAt = <DateFromNow className={classNames("is-size-7", "has-text-secondary")} date={branch.lastCommitDate} />;
   if (branch.lastCommitter?.name) {
     return (
       <>
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
index f1ee1d5a5f..49f00616eb 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
@@ -76,7 +76,7 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
           {branch.name}
         </ReactLink>
         {branch.lastCommitDate && (
-          <span className={classNames("has-text-grey", "is-ellipsis-overflow", "is-size-7", "ml-4")}>
+          <span className={classNames("has-text-secondary", "is-ellipsis-overflow", "is-size-7", "ml-4")}>
             <BranchCommitDateCommitter branch={branch} />
           </span>
         )}
diff --git a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
index acde30e8d8..c8a235c79e 100644
--- a/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/components/CodeActionBar.tsx
@@ -58,7 +58,7 @@ const CodeActionBar: FC<Props> = ({ selectedBranch, branches, onSelectBranch, sw
   const location = useLocation();
 
   return (
-    <ActionBar className={"has-background-accent"}>
+    <ActionBar className="has-background-secondary-less">
       <FlexShrinkLevel
         left={
           branches &&
diff --git a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
index e5c187cfe6..c56c88953e 100644
--- a/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
+++ b/scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx
@@ -44,6 +44,7 @@ type Params = {
   revision: string;
 };
 
+// TODO ersetzen?
 const HomeLink = styled(Link)`
   border-right: 1px solid lightgray;
 `;
diff --git a/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx b/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx
index 04e8611a7f..f516309470 100644
--- a/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx
@@ -57,7 +57,7 @@ const RepositoryFormButton: FC<RepositoryForm> = ({ path, icon, label }) => {
       color={isSelected ? "link is-selected" : undefined}
       link={!isSelected ? href : undefined}
     >
-      <Icon className="pr-2" name={icon} color={isSelected ? "white" : "default"} alt="" />
+      <Icon className="pr-2" name={icon} color={isSelected ? "secondary-least" : "inherit"} alt="" />
       <p className={classNames("is-hidden-mobile", "is-hidden-tablet-only")}>{t(`plugins:${label}`, label)}</p>
     </Button>
   );
diff --git a/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx b/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
index 0dc4c31a3b..291b93b3d1 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
@@ -41,7 +41,6 @@ import classNames from "classnames";
 
 const InfoBox = styled.div`
   white-space: pre-line;
-  background-color: #ccecf9;
   border-radius: 2px;
   border-left: 0.2rem solid;
   border-color: #33b2e8;
@@ -59,7 +58,7 @@ const ExportInterruptedNotification = () => {
 const ExportInfoBox: FC<{ exportInfo: ExportInfo }> = ({ exportInfo }) => {
   const [t] = useTranslation("repos");
   return (
-    <InfoBox className={classNames("my-4", "p-4")}>
+    <InfoBox className={classNames("my-4", "p-4", "has-background-info-25", "repository-export-info-box")}>
       <strong>{t("export.exportInfo.infoBoxTitle")}</strong>
       <p>{t("export.exportInfo.exporter", { username: exportInfo.exporterName })}</p>
       <p>
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index c604285db5..cfa6c7f555 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -170,8 +170,8 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
     if (!collapsed) {
       return (
         <>
-          <div className="panel-block has-background-white-bis">
-            <table className="table has-background-white-bis">
+          <div className="panel-block has-background-secondary-less">
+            <table className="table has-background-secondary-less">
               <tbody>
                 <tr>
                   <td>{t("sources.content.path")}</td>
diff --git a/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx b/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
index 5eb18ff057..d2f82678f5 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
@@ -52,7 +52,7 @@ const TagDetail: FC<Props> = ({ repository, tag }) => {
         <SignatureIcon signatures={tag.signatures} className="ml-2 mb-5" />
         <div className={classNames("is-ellipsis-overflow", "is-size-7", "ml-2")}>
           {t("tags.overview.created")}{" "}
-          <DateFromNow className={classNames("is-size-7", "has-text-grey")} date={tag.date} />
+          <DateFromNow className={classNames("is-size-7", "has-text-secondary")} date={tag.date} />
         </div>
       </div>
       <div className="media-right">
diff --git a/scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx b/scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx
index a14da71eba..d1897df853 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx
@@ -58,7 +58,7 @@ const TagRow: FC<Props> = ({ tag, baseUrl, onDelete }) => {
       <td>
         <RouterLink to={to} title={tag.name}>
           {tag.name}
-          <span className={classNames("has-text-grey", "is-ellipsis-overflow", "ml-2", "is-size-7")}>
+          <span className={classNames("has-text-secondary", "is-ellipsis-overflow", "ml-2", "is-size-7")}>
             {t("tags.overview.created")} <DateFromNow date={tag.date} />
           </span>
         </RouterLink>
diff --git a/scm-ui/ui-webapp/src/search/Syntax.tsx b/scm-ui/ui-webapp/src/search/Syntax.tsx
index 1eb61c224f..1de57ecc4f 100644
--- a/scm-ui/ui-webapp/src/search/Syntax.tsx
+++ b/scm-ui/ui-webapp/src/search/Syntax.tsx
@@ -53,7 +53,7 @@ const Expandable: FC<ExpandableProps> = ({ header, children, className }) => {
   const [t] = useTranslation("commons");
   const [expanded, setExpanded] = useState(false);
   return (
-    <div className={classNames("card", className)}>
+    <div className={classNames("card search-syntax-accordion", className)}>
       <header onClick={() => setExpanded(!expanded)} className="card-header is-clickable">
         <span className="card-header-title">{header}</span>
         <span className="card-header-icon">