fix(filter): Introduce mono font styling for LogLevelChip with Roboto…

… Mono fallback (fixes #154). (#156)
y-scope · Dec 31, 2024 · 8041816 · 8041816
1 parent af322a6
commit 8041816
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/public/index.html b/public/index.html
@@ -11,6 +11,8 @@
     <link rel="preconnect" crossorigin href="https://fonts.gstatic.com">
     <link rel="stylesheet"
           href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap">
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap">
 </head>
 <body>
 <div id="root"></div>

diff --git a/src/components/StatusBar/LogLevelSelect/LogLevelChip.css b/src/components/StatusBar/LogLevelSelect/LogLevelChip.css
@@ -1,6 +1,9 @@
 .log-level-chip {
     /* stylelint-disable-next-line custom-property-pattern */
     --Chip-radius: 0;
+
+    font-family: var(--ylv-ui-mono-font-family), monospace !important;
+    font-weight: 600 !important;
 }
 
 .log-level-chip span {

diff --git a/src/index.css b/src/index.css
@@ -14,6 +14,8 @@ html {
     /* font-family globals */
     --ylv-ui-font-family: -apple-system, "BlinkMacSystemFont", system-ui, "Ubuntu", "Droid Sans",
         "Inter";
+    --ylv-ui-mono-font-family: "SF Mono", monaco, menlo, "Ubuntu Mono", "Liberation Mono",
+        "DejaVu Sans Mono", "Roboto Mono";
 
     /* size globals */
     --ylv-status-bar-height: 32px;