[DOCS] Update terminal and code snippets style (#9419)

docs/docusaurus/docusaurus.config.js

@@ -82,7 +82,7 @@ module.exports = {
       contextualSearch: true,
     },
     prism: {
-      theme: require('prism-react-renderer/themes/vsDark'),
+      theme: require('./src/theme/CodeBlock/theme'),
     },
     colorMode: {
       disableSwitch: true,

docs/docusaurus/src/css/code_block.scss

@@ -0,0 +1,72 @@
+:root {
+  --code-snippets-title-color: #FAFAFA;
+  --code-snippets-title-background-color: #292F43;
+}
+
+div.theme-code-block {
+  box-shadow: 3px 3px 10px var(--black-15);
+  position: relative;
+
+  pre code {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    font-size: var(--p-md-font-size);
+  }
+
+  &:hover {
+    & > div:not(:only-child):first-child + div button {
+      opacity: 1;
+    }
+  }
+
+  // Code Block Title
+  & > div:not(:only-child):first-child {
+    background-color: var(--code-snippets-title-background-color);
+    box-shadow: 3px 3px 10px var(--black-15);
+    align-items: center;
+    border-bottom: none;
+    color: var(--code-snippets-title-color);
+    display: flex;
+    font-size: var(--p-md-font-size);
+    opacity: 0.75;
+    text-transform: capitalize;
+
+    &::before {
+      background: url('/img/file-solid.svg') 0 50% no-repeat;
+      content: '';
+      display: inline-block;
+      height: 1em;
+      margin-right: 0.5rem;
+      width: 1em;
+    }
+
+    // Code Block Content
+    & + div {
+      position: static;
+    }
+  }
+
+  &.language-bash div:not(:only-child):first-child::before{
+    background: url('/img/terminal-input-icon.svg') 0 50% no-repeat;
+    width: 1.25em;
+  }
+
+  // Button group
+  .prism-code + div:has(button) {
+    top: calc(var(--ifm-pre-padding) / 2);
+
+    &:hover {
+      opacity: 0.75 !important;
+    }
+
+    button {
+      background: transparent;
+      border: none;
+      opacity: 0.75 !important;
+
+      svg path {
+        fill: var(--code-snippets-title-color);
+      }
+    }
+  }
+}

docs/docusaurus/src/css/custom.scss

@@ -9,16 +9,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
 
-@import "sass_variables";
+@import "sass_variables.scss";
 @import "typography.scss";
 @import "left_navigation.scss";
 @import "navbar.scss";
 @import "tabs.scss";
 @import "searchBar.scss";
 @import "alerts.scss";
 @import "pagination.scss";
-@import "overview_pages";
 @import "breadcrumbs.scss";
+@import "overview_pages.scss";
+@import "code_block.scss";
+
 /* You can override the default Infima variables here. */
 :root {
     --ifm-font-color-base: #404041;
@@ -51,6 +53,7 @@
      /* Colors */
       --white: #fff;
       --black: #000;
+      --black-15: rgba(0, 0, 0, .15);
       --blue-100: #eefaff;
       --blue-200: #dff5ff;
       --blue-300: #bfeaff;

docs/docusaurus/src/theme/CodeBlock/theme.js

@@ -0,0 +1,89 @@
+const codeBlockTheme = {
+    plain: {
+        color: "#D8D8D8",
+        backgroundColor: "#373F58"
+    },
+    styles: [{
+        types: ["prolog"],
+        style: {
+            color: "rgb(0, 0, 128)"
+        }
+    }, {
+        types: ["comment"],
+        style: {
+            color: "#B6C647"
+        }
+    }, {
+        types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
+        style: {
+            color: "#F3C62D"
+        }
+    }, {
+        types: ["number", "inserted"],
+        style: {
+            color: "#FD9BC1"
+        }
+    }, {
+        types: ["constant"],
+        style: {
+            color: "rgb(100, 102, 149)"
+        }
+    }, {
+        types: ["attr-name", "variable"],
+        style: {
+            color: "rgb(156, 220, 254)"
+        }
+    }, {
+        types: ["deleted", "string", "attr-value", "template-punctuation"],
+        style: {
+            color: "#CE9178"
+        }
+    }, {
+        types: ["selector"],
+        style: {
+            color: "rgb(215, 186, 125)"
+        }
+    }, {
+        // Fix tag color
+        types: ["tag"],
+        style: {
+            color: "rgb(78, 201, 176)"
+        }
+    }, {
+        // Fix tag color for HTML
+        types: ["tag"],
+        languages: ["markup"],
+        style: {
+            color: "rgb(86, 156, 214)"
+        }
+    }, {
+        types: ["punctuation", "operator"],
+        style: {
+            color: "#E1C2FA"
+        }
+    }, {
+        // Fix punctuation color for HTML
+        types: ["punctuation"],
+        languages: ["markup"],
+        style: {
+            color: "#808080"
+        }
+    }, {
+        types: ["function"],
+        style: {
+            color: "#E1C2FA"
+        }
+    }, {
+        types: ["class-name"],
+        style: {
+            color: "rgb(78, 201, 176)"
+        }
+    }, {
+        types: ["char"],
+        style: {
+            color: "rgb(209, 105, 105)"
+        }
+    }]
+};
+
+module.exports = codeBlockTheme