Fix code blocks background color (#1593)

* Update CONTRIBUTING.md

* Update README.md

* Update CONTRIBUTING.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update CONTRIBUTING.md

* Mention content types are private by default (#1587)

* Mention content types are private by default

* Tweak wording

* Fix styles for Code Blocks on Dev Docs Integrations examples

* Update styles color tokens 'neutral' overrides

* Fix styles for Sidebar theme and close button positioning on mobile view

---------

Co-authored-by: Pierre Wizla <[email protected]>

Author: udimberto

docusaurus/src/scss/_tokens-overrides.scss

@@ -8,8 +8,16 @@
   --ifm-font-color-base: var(--strapi-neutral-800);
 
   --ifm-color-content-secondary: var(--strapi-neutral-600);
+  --ifm-color-emphasis-100: var(--strapi-neutral-100);
   --ifm-color-emphasis-200: var(--strapi-neutral-150);
   --ifm-color-emphasis-300: var(--strapi-neutral-200);
+  --ifm-color-emphasis-400: var(--strapi-neutral-300);
+  --ifm-color-emphasis-500: var(--strapi-neutral-400);
+  --ifm-color-emphasis-600: var(--strapi-neutral-500);
+  --ifm-color-emphasis-700: var(--strapi-neutral-600);
+  --ifm-color-emphasis-800: var(--strapi-neutral-700);
+  --ifm-color-emphasis-900: var(--strapi-neutral-800);
+  --ifm-color-emphasis-1000: var(--strapi-neutral-1000);
 
   --ifm-color-primary: var(--strapi-primary-600);
   --ifm-color-primary-dark: #29784c;
@@ -41,6 +49,17 @@
   --ifm-color-content: var(--strapi-neutral-800);
   --ifm-font-color-base: var(--strapi-neutral-800);
 
+  --ifm-color-emphasis-100: var(--strapi-neutral-100);
+  --ifm-color-emphasis-200: var(--strapi-neutral-150);
+  --ifm-color-emphasis-300: var(--strapi-neutral-200);
+  --ifm-color-emphasis-400: var(--strapi-neutral-300);
+  --ifm-color-emphasis-500: var(--strapi-neutral-400);
+  --ifm-color-emphasis-600: var(--strapi-neutral-500);
+  --ifm-color-emphasis-700: var(--strapi-neutral-600);
+  --ifm-color-emphasis-800: var(--strapi-neutral-700);
+  --ifm-color-emphasis-900: var(--strapi-neutral-800);
+  --ifm-color-emphasis-1000: var(--strapi-neutral-1000);
+
   --ifm-color-primary: var(--strapi-primary-500);
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;

docusaurus/src/scss/api-call.scss

@@ -1,6 +1,6 @@
 /** Component: API Call / Request / Response */
 
-.api-call {
+:root {
   --custom-api-call-color: var(--strapi-neutral-0);
   --custom-api-call-gap: var(--strapi-spacing-4);
   --custom-api-call-heading-font-size: var(--strapi-font-size-sm);
@@ -12,19 +12,21 @@
   --custom-api-call-response-content-background-color: var(--strapi-neutral-900);
   --custom-api-call-request-heading-background-color: var(--strapi-neutral-600);
   --custom-api-call-request-content-background-color: var(--strapi-neutral-700);
+}
 
+.api-call {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: var(--custom-api-call-gap);
-  color: var(--custom-api-call-color);
   margin-bottom: var(--custom-api-call-gap);
 
   &__request__content,
   &__request__heading,
   &__response__content,
   &__response__heading {
     background-color: var(--custom-api-call-background-color);
+    color: var(--custom-api-call-color);
   }
 
   &__request,
@@ -90,15 +92,15 @@
 
 /** Dark mode */
 @include dark {
-  .api-call {
-    --custom-api-call-color: var(--strapi-neutral-1000);
+  --custom-api-call-color: var(--strapi-neutral-1000);
 
-    --custom-api-call-request-heading-background-color: var(--strapi-neutral-300);
-    --custom-api-call-request-content-background-color: var(--strapi-neutral-200);
+  --custom-api-call-request-heading-background-color: var(--strapi-neutral-300);
+  --custom-api-call-request-content-background-color: var(--strapi-neutral-200);
 
-    --custom-api-call-response-heading-background-color: var(--strapi-neutral-150);
-    --custom-api-call-response-content-background-color: var(--strapi-neutral-100);
+  --custom-api-call-response-heading-background-color: var(--strapi-neutral-150);
+  --custom-api-call-response-content-background-color: var(--strapi-neutral-100);
 
+  .api-call {
     &__request {
       &__content {
         pre {

docusaurus/src/scss/sidebar.scss

@@ -15,8 +15,6 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]';
       var(--ifm-navbar-padding-vertical)
       var(--custom-navbar-sidebar-horizontal-padding)
     ;
-
-    gap: var(--custom-navbar-items-gap);
   }
 
   &__back {