Add code variant in Text component

packages/app-elements/src/styles/global.css

@@ -132,7 +132,7 @@
 
   --font-*: initial;
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  --font-mono: "Roboto Mono", system-ui;
+  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
   --text-*: initial;
   --text-2xs: 0.75rem;

packages/app-elements/src/ui/atoms/CodeBlock.tsx

@@ -53,7 +53,7 @@ export const CodeBlock = withSkeletonTemplate<CodeBlockProps>(
         <div className="flex group w-full rounded bg-gray-50 in-[.overlay-container]:bg-gray-200">
           <div
             className={cn(
-              "flex flex-col w-full px-4 py-2.5 text-teal text-sm font-mono marker:font-bold border-none break-all",
+              "flex flex-col w-full px-4 py-2.5 text-primary text-sm font-mono marker:font-bold border-none break-all",
               typeof children !== "string" ? "whitespace-pre-wrap" : "",
             )}
             data-testid="codeblock-content"

packages/app-elements/src/ui/atoms/Text.tsx

@@ -9,7 +9,14 @@ type TextVariant =
   | "info"
   | "plain"
   | "disabled"
-type TextSize = "x-small" | "small" | "regular" | "large" | "inherit"
+  | "code"
+type TextSize =
+  | "xx-small"
+  | "x-small"
+  | "small"
+  | "regular"
+  | "large"
+  | "inherit"
 type TextWeight = "regular" | "medium" | "semibold" | "bold" | "inherit"
 type TextAlignment = "center" | "left" | "right" | "inherit"
 type TextWrap = "normal" | "nowrap" | "inherit"
@@ -43,12 +50,14 @@ function Text({
     "text-gray-500": variant === "info",
     "text-orange-600": variant === "warning",
     "text-gray-300": variant === "disabled",
+    "font-mono font-semibold! bg-gray-100 rounded-sm p-1.5": variant === "code",
     // weight
     "font-regular": weight === "regular",
     "font-medium": weight === "medium",
     "font-semibold": weight === "semibold",
     "font-bold": weight === "bold",
     // size
+    "text-2xs": size === "xx-small",
     "text-xs": size === "x-small",
     "text-sm": size === "small",
     "text-base": size === "regular",

packages/docs/.storybook/preview-head.html

@@ -1,13 +1,5 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" />
-<link
-  href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
-  rel="stylesheet"
-/>
-<link 
-  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,500;1,500&display=swap" 
-  rel="stylesheet"
-/>
 <link rel="stylesheet" href="storybook-preview.css" />
 <script>
   window.global = window;
-</script>
+</script>

packages/docs/src/stories/atoms/Text.stories.tsx

@@ -32,3 +32,13 @@ Success.args = {
   children:
     "Commerce Layer is a multi-market commerce API and order management system",
 }
+
+export const CodeinLine: StoryFn = () => (
+  <div>
+    Use{" "}
+    <Text variant="code" size="x-small">
+      InputDateRange
+    </Text>{" "}
+    in between other text.
+  </div>
+)