ui: Centralize monospace font styles in app.css (#23272)

diff --git a/tools/ui/src/app.css b/tools/ui/src/app.css
index 10480f977be864a422d3a0be01d441316fcfd133..d6dc6670c0c79e9e7a60d8600d00dc68ffc1e06b 100644 (file)
--- a/tools/ui/src/app.css
+++ b/tools/ui/src/app.css
@@ -40,6 +40,9 @@
        --sidebar-ring: oklch(0.708 0 0);
        --code-background: oklch(0.985 0 0);
        --code-foreground: oklch(0.145 0 0);
+       --font-mono:
+               ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+               'Liberation Mono', Menlo, monospace;
        --layer-popover: 1000000;
 
        --chat-form-area-height: 8rem;
@@ -172,6 +175,10 @@
        *::-webkit-scrollbar-thumb:hover {
                background: hsl(var(--muted-foreground) / 0.5);
        }
+
+       :where(code, pre, kbd, samp) {
+               font-family: var(--font-mono);
+       }
 }
 
 @layer utilities {

diff --git a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte
index b4d69b932ab31227ea132d87ee904add09d3a259..4c74206f1beec9da0eeefbaa5ed2f064271ea5e1 100644 (file)
--- a/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte
@@ -379,9 +379,6 @@
                border-radius: 1rem;
                background: hsl(var(--muted) / 0.3);
                color: var(--foreground);
-               font-family:
-                       ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
-                       'Liberation Mono', Menlo, monospace;
                font-size: 0.875rem;
                line-height: 1.6;
                white-space: pre-wrap;

diff --git a/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte b/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte
index c1b71e4519ef40953f230c96d36d5dcaeb2e99e2..3a11854b6e4a5c46017fc1432fd5f3bc6ca666ce 100644 (file)
--- a/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte
+++ b/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte
@@ -742,9 +742,6 @@
                padding: 0.125rem 0.375rem;
                border-radius: 0.375rem;
                font-size: 0.875rem;
-               font-family:
-                       ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
-                       'Liberation Mono', Menlo, monospace;
        }
 
        div :global(pre) {

diff --git a/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte b/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte
index 41d59324cb4723ccac247334279e0b492ad83594..c4d1706bfe1b406afe8df97627573890cdfde32e 100644 (file)
--- a/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte
+++ b/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte
@@ -80,12 +80,6 @@
 </div>
 
 <style>
-       .code-preview-wrapper {
-               font-family:
-                       ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
-                       'Liberation Mono', Menlo, monospace;
-       }
-
        .code-preview-wrapper pre {
                background: transparent;
        }