From 6bcd60325d526840896dee39cc8a874bbf1b189f Mon Sep 17 00:00:00 2001
From: Sahitya Buddharaju <148156994+bsahitya@users.noreply.github.com>
Date: Mon, 11 Mar 2024 10:51:43 -0500
Subject: [PATCH] fix: add Menlo font to code snippet and highlight components
 (#2115)

---
 .../src/lib/highlight.component.scss                  | 11 ++++++++---
 libs/components/src/code-snippet/code-snippet.scss    |  4 ++++
 libs/components/src/theme/_mixins.scss                |  6 ++++++
 libs/tokens/src/typography.json                       | 10 +++++++++-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/libs/angular-highlight/src/lib/highlight.component.scss b/libs/angular-highlight/src/lib/highlight.component.scss
index 9facec2d41..941165bd09 100644
--- a/libs/angular-highlight/src/lib/highlight.component.scss
+++ b/libs/angular-highlight/src/lib/highlight.component.scss
@@ -1,3 +1,6 @@
+@use '@covalent/tokens/index.scss' as tokens;
+$typography: map-get(tokens.$tokens, typography);
+
 $code-font: 'Menlo', 'Monaco', 'Andale Mono', 'lucida console', 'Courier New',
   monospace;
 $padding: 16px;
@@ -9,8 +12,7 @@ $padding: 16px;
   position: relative;
 
   pre,
-  code,
-  .highlight {
+  code {
     font-family: $code-font;
   }
 
@@ -45,8 +47,11 @@ $padding: 16px;
   .highlight {
     display: block;
     overflow-wrap: break-word;
-    line-height: 1.5;
     margin: 0;
+    font-family: map-get($typography, code-font-family);
+    font-size: map-get($typography, code-font-size);
+    font-weight: map-get($typography, code-font-weight);
+    line-height: map-get($typography, code-line-height);
   }
 
   .copy-button {
diff --git a/libs/components/src/code-snippet/code-snippet.scss b/libs/components/src/code-snippet/code-snippet.scss
index 5ee56859ad..e470e4166e 100644
--- a/libs/components/src/code-snippet/code-snippet.scss
+++ b/libs/components/src/code-snippet/code-snippet.scss
@@ -16,6 +16,10 @@
       padding: 0 16px;
       display: block;
       overflow-x: auto;
+      font-family: var(--cov-theme-code-font-family);
+      font-size: var(--cov-theme-code-font-size);
+      font-weight: var(--cov-theme-code-font-weight);
+      line-height: var(--cov-theme-code-line-height);
     }
   }
 
diff --git a/libs/components/src/theme/_mixins.scss b/libs/components/src/theme/_mixins.scss
index 7ccf33b723..a4e52443c7 100644
--- a/libs/components/src/theme/_mixins.scss
+++ b/libs/components/src/theme/_mixins.scss
@@ -331,6 +331,12 @@
   --cov-theme-code-snippet-title: #{map-get($theme, code-snippet-title)};
   --cov-theme-code-snippet-class: #{map-get($theme, code-snippet-class)};
 
+  // Code font styles
+  --cov-theme-code-font-family: #{map-get($typography, code-font-family)};
+  --cov-theme-code-font-size: #{map-get($typography, code-font-size)};
+  --cov-theme-code-font-weight: #{map-get($typography, code-font-weight)};
+  --cov-theme-code-line-height: #{map-get($typography, code-line-height)};
+
   @include data-table.data-table-theme($theme);
 
   color: var(--mdc-theme-text-primary-on-background);
diff --git a/libs/tokens/src/typography.json b/libs/tokens/src/typography.json
index aa125885d1..50aae48254 100644
--- a/libs/tokens/src/typography.json
+++ b/libs/tokens/src/typography.json
@@ -96,6 +96,14 @@
     },
     "caption-font-size": { "value": "12px", "type": "fontSizes" },
     "caption-font-weight": { "value": "400", "type": "fontWeights" },
-    "caption-line-height": { "value": "16px", "type": "lineHeights" }
+    "caption-line-height": { "value": "16px", "type": "lineHeights" },
+
+    "code-font-family": {
+      "value": "Menlo",
+      "type": "fontFamilies"
+    },
+    "code-font-size": { "value": "12px", "type": "fontSizes" },
+    "code-font-weight": { "value": "400", "type": "fontWeights" },
+    "code-line-height": { "value": "20px", "type": "lineHeights" }
   }
 }