visual tweaks for CodeBlock component, code and kbd elements (#4828)

Author: Simek

website/src/css/customTheme.scss

@@ -29,8 +29,8 @@
   --rn-note-background: rgba(255, 229, 100, 0.25);
 
   --docsearch-key-background: none;
-  --docsearch-searchbox-background: white;
-  --docsearch-modal-background: white;
+  --docsearch-searchbox-background: var(--ifm-background-color);
+  --docsearch-modal-background: var(--ifm-background-color);
   --docsearch-subtle-color: var(--ifm-table-border-color);
   --docsearch-container-background: rgba(32, 35, 42, 0.6);
   --docsearch-muted-color: #969faf;
@@ -49,11 +49,13 @@
     "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 
+  --ifm-background-color: white;
   --ifm-color-primary: #06bcee;
   --ifm-color-primary-75: #087ea4cc;
   --ifm-code-background: rgba(0, 0, 0, 0.06);
   --ifm-font-size-base: 17px;
-  --ifm-code-font-size: 92%;
+  --ifm-code-font-size: 90%;
+  --ifm-code-padding-vertical: 0.05rem;
   --ifm-spacing-horizontal: 16px;
   --ifm-navbar-item-padding-horizontal: 18px;
   --ifm-menu-link-padding-horizontal: 0;
@@ -67,7 +69,7 @@
   --ifm-table-head-color: var(--subtle);
   --ifm-link-hover-decoration: none;
   --ifm-navbar-background-color: var(--deepdark);
-  --ifm-pre-line-height: 1.5;
+  --ifm-pre-line-height: 1.4;
   --ifm-tabs-padding-vertical: 6px;
   --ifm-color-warning: #ffe564;
   --ifm-alert-color: var(--ifm-font-color-base);
@@ -146,6 +148,7 @@ html[data-theme="dark"] {
     inset 0 -2px 0 0 var(--dark), inset 0 0 1px 1px var(--light),
     0 2px 2px 0 rgba(3, 4, 9, 0.3);
 
+  --ifm-background-color: #1b1b1d;
   --ifm-code-background: rgba(255, 255, 255, 0.06);
   --ifm-toc-border-color: var(--dark);
   --ifm-color-emphasis-300: var(--dark);
@@ -154,8 +157,6 @@ html[data-theme="dark"] {
   --ifm-table-stripe-background: rgba(0, 0, 0, 0.08);
   --ifm-table-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
 
-  --docsearch-searchbox-background: var(--ifm-background-color);
-  --docsearch-modal-background: var(--ifm-background-color);
   --docsearch-container-background: rgba(0, 0, 0, 0.6);
   --docsearch-muted-color: #7f8497;
   --docsearch-subtle-color: #282833;
@@ -329,13 +330,11 @@ hr {
     margin-top: 0;
   }
 
-  pre code {
-    line-height: 1.4 !important;
-  }
-
   code {
     border-color: transparent;
     vertical-align: baseline;
+    position: relative;
+    top: -0.5px;
   }
 
   kbd {
@@ -344,7 +343,7 @@ hr {
     margin: 0 2px;
     position: relative;
     padding: 0.2rem 0.3rem;
-    background: none;
+    background: var(--ifm-background-color);
     box-shadow: var(--key-shadow);
     display: inline-block;
     text-align: center;
@@ -376,8 +375,8 @@ hr {
 
     code {
       background-color: transparent;
-      position: relative;
       padding-inline: 0;
+      font-size: 92%;
     }
 
     .hermes-logo {
@@ -506,10 +505,11 @@ hr {
 
   div[class*="codeBlockContainer"] {
     box-shadow: none;
+    background: none;
     border-radius: var(--ifm-global-radius);
 
     pre {
-      border-radius: var(--ifm-global-radius);
+      border-radius: 0 0 var(--ifm-global-radius) var(--ifm-global-radius);
     }
 
     button {
@@ -521,6 +521,10 @@ hr {
   div[class*="codeBlockContent"] {
     display: grid;
     min-width: 100%;
+
+    &:first-child pre {
+      border-radius: var(--ifm-global-radius);
+    }
   }
 
   div[class*="codeBlockLines"] {
@@ -2019,8 +2023,9 @@ article .component-grid {
   grid-column-gap: 22px;
 
   .component {
-    border: 1px solid var(--ifm-color-emphasis-500);
+    border: 1px solid var(--ifm-table-border-color);
     border-radius: var(--ifm-global-radius);
+    box-shadow: var(--ifm-table-box-shadow);
     margin: 0 auto 24px;
     width: 100%;
     display: inline-block;
@@ -2043,7 +2048,7 @@ article .component-grid {
       font-weight: 600;
       margin: 0;
       padding: 0 10px;
-      background-color: var(--ifm-color-info-darkest);
+      background-color: var(--home-button-primary);
       color: var(--home-button-primary-text);
       line-height: 36px;
 
@@ -2059,9 +2064,7 @@ article .component-grid {
       color: var(--ifm-font-color-base);
 
       code {
-        font-size: 15px;
-        padding: 0 1px;
-        top: 0;
+        background-color: var(--ifm-code-background);
       }
     }
   }