fix: add Menlo font to code snippet and highlight components (#2115)

Teradata · Mar 11, 2024 · 6bcd603 · 6bcd603
1 parent e811a72
commit 6bcd603
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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" }
   }
 }