@vectara/vectara-ui 13.13.3 → 13.13.5

package/lib/components/code/_index.scss

@@ -27,7 +27,7 @@
   padding: $sizeM $sizeL;
   background-color: var(--vui-color-light-shade);
   color: var(--vui-color-text);
-  font-family: "Roboto Mono", monospace;
+  font-family: var(--vui-font-family-monospace);
   // Ensure PrismJS components wrap their lines.
   word-wrap: break-word !important;
   // Ensure PrismJS components wrap their lines instead of making the container super-wide.

package/lib/components/context/Theme.d.ts

@@ -1,5 +1,6 @@
 export type Theme = {
     fontFamily?: string;
+    fontFamilyMonospace?: string;
     colorAccentShade?: string;
     colorAccentShadeRgb?: string;
     colorAccentLightShade?: string;

package/lib/components/context/Theme.js

@@ -1,6 +1,7 @@
 import { ColorTranslator } from "colortranslator";
 const fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
   "Droid Sans", "Helvetica Neue", sans-serif`;
+const fontFamilyMonospace = '"Roboto Mono", monospace';
 export const toRgba = (hex, alpha) => {
     return new ColorTranslator(hex, { legacyCSS: true }).setA(alpha).RGBA;
 };
@@ -44,6 +45,7 @@ const colorBorderLightShade = "#e3e4f3";
 export const LIGHT_THEME = {
     // Font
     fontFamily,
+    fontFamilyMonospace,
     // Semantic colors
     colorAccentShade,
     colorAccentShadeRgb: toRgb(colorAccentShade),
@@ -133,6 +135,7 @@ export const toStyle = (theme) => {
     const vars = {
         // Font
         "--vui-font-family": theme.fontFamily,
+        "--vui-font-family-monospace": theme.fontFamilyMonospace,
         // Semantic colors
         "--vui-color-accent-shade": theme.colorAccentShade,
         "--vui-color-accent-shade-rgb": theme.colorAccentShadeRgb,

package/lib/components/typography/_text.scss

@@ -41,32 +41,40 @@ $textRhythm: $sizeM;
 
   pre:not(:has(> code)),
   code {
+    display: block;
+    padding: $sizeXs $sizeS;
     background-color: var(--vui-color-light-shade);
-    padding: $sizeXxxs $sizeXxs;
+    font-family: var(--vui-font-family-monospace);
+    border-radius: $sizeXs;
+    margin-bottom: $textRhythm;
   }
 
   pre:has(> code) {
     display: block;
-    background-color: var(--vui-color-light-shade);
     padding: $sizeXs $sizeS;
+    background-color: var(--vui-color-light-shade);
     margin-bottom: $textRhythm;
     border-radius: $sizeXs;
+    font-family: var(--vui-font-family-monospace);
   }
 
   pre > code {
     word-wrap: break-word;
     word-break: break-word;
     white-space: pre-wrap;
+    font-family: var(--vui-font-family-monospace);
+    margin-bottom: 0;
   }
 
-  p > pre:only-child,
-  p > code:only-child {
-    display: block;
-    padding: $sizeXs $sizeS;
+  p pre,
+  p code {
+    display: inline;
+    padding: $sizeXxxs $sizeXxs;
     border: none;
     border-radius: $sizeXs;
     overflow: auto;
     background-color: var(--vui-color-light-shade);
+    font-family: var(--vui-font-family-monospace);
   }
 
   blockquote {
@@ -135,6 +143,7 @@ $textRhythm: $sizeM;
   code,
   pre {
     font-size: $fontSize * 0.85;
+    font-family: var(--vui-font-family-monospace);
   }
 
   h1 {

package/lib/styles/index.css

@@ -1423,7 +1423,7 @@ fieldset {
   padding: 16px 24px;
   background-color: var(--vui-color-light-shade);
   color: var(--vui-color-text);
-  font-family: "Roboto Mono", monospace;
+  font-family: var(--vui-font-family-monospace);
   word-wrap: break-word !important;
   word-break: break-word !important;
   white-space: pre-wrap !important;
@@ -5457,29 +5457,37 @@ h2.react-datepicker__current-month {
 }
 .vuiText pre:not(:has(> code)),
 .vuiText code {
+  display: block;
+  padding: 8px 12px;
   background-color: var(--vui-color-light-shade);
-  padding: 2px 4px;
+  font-family: var(--vui-font-family-monospace);
+  border-radius: 8px;
+  margin-bottom: 16px;
 }
 .vuiText pre:has(> code) {
   display: block;
-  background-color: var(--vui-color-light-shade);
   padding: 8px 12px;
+  background-color: var(--vui-color-light-shade);
   margin-bottom: 16px;
   border-radius: 8px;
+  font-family: var(--vui-font-family-monospace);
 }
 .vuiText pre > code {
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
+  font-family: var(--vui-font-family-monospace);
+  margin-bottom: 0;
 }
-.vuiText p > pre:only-child,
-.vuiText p > code:only-child {
-  display: block;
-  padding: 8px 12px;
+.vuiText p pre,
+.vuiText p code {
+  display: inline;
+  padding: 2px 4px;
   border: none;
   border-radius: 8px;
   overflow: auto;
   background-color: var(--vui-color-light-shade);
+  font-family: var(--vui-font-family-monospace);
 }
 .vuiText blockquote {
   border-left: 4px solid var(--vui-color-light-shade);
@@ -5545,6 +5553,7 @@ h2.react-datepicker__current-month {
 .vuiText--xs code,
 .vuiText--xs pre {
   font-size: 10.2px;
+  font-family: var(--vui-font-family-monospace);
 }
 .vuiText--xs h1 {
   font-size: 24px;
@@ -5599,6 +5608,7 @@ h2.react-datepicker__current-month {
 .vuiText--s code,
 .vuiText--s pre {
   font-size: 11.9px;
+  font-family: var(--vui-font-family-monospace);
 }
 .vuiText--s h1 {
   font-size: 28px;
@@ -5653,6 +5663,7 @@ h2.react-datepicker__current-month {
 .vuiText--m code,
 .vuiText--m pre {
   font-size: 13.6px;
+  font-family: var(--vui-font-family-monospace);
 }
 .vuiText--m h1 {
   font-size: 32px;
@@ -5707,6 +5718,7 @@ h2.react-datepicker__current-month {
 .vuiText--l code,
 .vuiText--l pre {
   font-size: 15.3px;
+  font-family: var(--vui-font-family-monospace);
 }
 .vuiText--l h1 {
   font-size: 36px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "13.13.3",
+  "version": "13.13.5",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",