From fa4419d2ae9b072bca5f6fde853c4b35a859d412 Mon Sep 17 00:00:00 2001
From: hawkgs <hawk.dvp@gmail.com>
Date: Thu, 5 Dec 2024 16:37:29 +0200
Subject: [PATCH] docs(docs-infra): make font styles consistent in the API code
 ToC (#59072)

Since code lines are wrapped in `<button>`-s, the native font styles overrides the parent's one which results in the font-family and font-size (esp. Safari) difference. This change fixes that.

PR Close #59072
---
 adev/shared-docs/styles/docs/_code.scss           | 15 +++++++++++----
 .../api-reference-details-page.component.scss     |  7 -------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/adev/shared-docs/styles/docs/_code.scss b/adev/shared-docs/styles/docs/_code.scss
index 0b2d1aa6d2e..1b1c6e04122 100644
--- a/adev/shared-docs/styles/docs/_code.scss
+++ b/adev/shared-docs/styles/docs/_code.scss
@@ -2,6 +2,8 @@
 
 /* stylelint-disable */
 
+$code-font-size: 0.875rem;
+
 @mixin docs-code-block {
   // code across docs, inline, blocks, shell, example viewer, etc.
   code {
@@ -106,7 +108,7 @@
     code {
       display: flex;
       flex-direction: column;
-      font-size: 0.875rem;
+      font-size: $code-font-size;
       counter-reset: line;
     }
   }
@@ -222,7 +224,7 @@
       background-clip: text;
       -webkit-background-clip: text;
       color: transparent;
-      font-size: 0.875rem;
+      font-size: $code-font-size;
       font-style: normal;
       font-weight: 400;
       line-height: 1.4rem;
@@ -296,7 +298,7 @@
     padding-inline-start: 0.75rem;
     padding-inline-end: 0.5rem;
     color: var(--quaternary-contrast);
-    font-size: 0.875rem;
+    font-size: $code-font-size;
     text-align: right;
   }
 
@@ -322,8 +324,13 @@
     min-height: 1.375em;
     padding-inline: 1rem;
     color: var(--tertiary-contrast);
-
     display: block;
+    font-size: $code-font-size;
+    font-family: var(--code-font);
+    font-weight: 400;
+    text-align: left;
+    padding-block: 0.25rem;
+
     &.hidden {
       display: none;
     }
diff --git a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
index 7e922770a81..a2ac3ac7802 100644
--- a/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
+++ b/adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.scss
@@ -97,13 +97,6 @@
 
       button {
         transition: background-color 0.3s ease;
-        font-family: monospace;
-
-        &.line {
-          font-weight: 400;
-          text-align: left;
-          padding-block: 0.25rem;
-        }
 
         &.shiki-ln-line-highlighted {
           background-color: var(--senary-contrast);