From ad224732cc924e93c8c26f369e0c48aed484d8dd Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Fri, 5 Jan 2024 12:51:47 +0100
Subject: [PATCH] feat: Link typography tokens and a new Link component in DS
 (#2729)

## Description

- Decided to not have separate colors for link, it should just use
regular text colors.
- Added a Link component to the design system, modelled after MUI Link
component

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

---------

Co-authored-by: Taylor Nowotny <86495896+taylornowotny@users.noreply.github.com>
Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
Co-authored-by: Bogdan Chadkin <trysound@yandex.ru>
---
 .../blocking-alerts/blocking-alerts.tsx       |  44 +++---
 .../app/builder/features/topbar/publish.tsx   |  36 +++--
 .../app/dashboard/projects/project-card.tsx   |  21 +--
 .../__generated__/figma-design-tokens.json    | 134 +++++++++++-------
 .../src/__generated__/figma-design-tokens.ts  |  98 +++++++++----
 .../src/components/input-field.stories.tsx    |   6 +
 .../src/components/input-field.tsx            |  41 ++++--
 .../src/components/link.stories.tsx           |  79 +++++++++++
 .../design-system/src/components/link.tsx     |  65 +++++++++
 .../src/components/text-area.stories.tsx      |   5 +
 .../src/components/text-area.tsx              |  25 +++-
 packages/design-system/src/index.ts           |   1 +
 12 files changed, 416 insertions(+), 139 deletions(-)
 create mode 100644 packages/design-system/src/components/link.stories.tsx
 create mode 100644 packages/design-system/src/components/link.tsx

diff --git a/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx b/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx
index 880fbd3618e3..a12ebf93416a 100644
--- a/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx
+++ b/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState, type ReactNode } from "react";
 import { Alert } from "./alert";
 import { useWindowResizeDebounced } from "~/shared/dom-hooks";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
-import { styled, theme } from "@webstudio-is/design-system";
+import { Link } from "@webstudio-is/design-system";
 
 const useTooSmallMessage = () => {
   const [message, setMessage] = useState<string>();
@@ -21,21 +21,11 @@ const useTooSmallMessage = () => {
   return message;
 };
 
-// @todo: move to design system
-// https://discord.com/channels/955905230107738152/1149380442315825212/1149408306671128666
-// https://discord.com/channels/955905230107738152/1048308525673238558/1184833931569266738
-const Link = styled("a", {
-  color: theme.colors.foregroundLink,
-  "&:visited": {
-    color: theme.colors.foregroundLinkVisited,
-  },
-});
-
 const useUnsupportedBrowser = () => {
   const [message, setMessage] = useState<ReactNode>();
   useEffect(() => {
     if ("chrome" in window || isFeatureEnabled("unsupportedBrowsers")) {
-      return;
+      //return;
     }
 
     setMessage(
@@ -44,23 +34,45 @@ const useUnsupportedBrowser = () => {
         <Link
           href="https://en.wikipedia.org/wiki/Chromium_(web_browser)"
           target="_blank"
+          color="inherit"
+          variant="inherit"
         >
           Chromium-based
         </Link>{" "}
         browsers such as{" "}
-        <Link href="https://www.google.com/chrome" target="_blank">
+        <Link
+          href="https://www.google.com/chrome"
+          target="_blank"
+          color="inherit"
+          variant="inherit"
+        >
           Google Chrome
         </Link>
         ,{" "}
-        <Link href="https://www.microsoft.com/en-us/edge" target="_blank">
+        <Link
+          href="https://www.microsoft.com/en-us/edge"
+          target="_blank"
+          color="inherit"
+          variant="inherit"
+        >
           Microsoft Edge
         </Link>
         ,{" "}
-        <Link href="https://brave.com/" target="_blank">
+        <Link
+          href="https://brave.com/"
+          target="_blank"
+          color="inherit"
+          variant="inherit"
+        >
           Brave
         </Link>
         ,{" "}
-        <Link href="https://arc.net/" target="_blank">
+        <Link
+          href="https://arc.net/"
+          target="_blank"
+          color="inherit"
+          variant="inherit"
+        >
           Arc
         </Link>{" "}
         and many more. We plan to support Firefox and Safari in the near future.
diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
index 0bfc6667f32a..ab074e96e7df 100644
--- a/apps/builder/app/builder/features/topbar/publish.tsx
+++ b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -19,10 +19,10 @@ import {
   ScrollArea,
   Box,
   rawTheme,
-  styled,
   Select,
   theme,
   TextArea,
+  Link,
 } from "@webstudio-is/design-system";
 import stripIndent from "strip-indent";
 import { useIsPublishDialogOpen } from "../../shared/nano-states";
@@ -187,6 +187,7 @@ const ChangeProjectDomain = ({
         <Grid gap={1}>
           <Label htmlFor={id}>Domain:</Label>
           <InputField
+            variant="mono"
             id={id}
             placeholder="Domain"
             value={domain}
@@ -477,16 +478,6 @@ const Content = (props: {
   );
 };
 
-// @todo: move to design system
-// https://discord.com/channels/955905230107738152/1149380442315825212/1149408306671128666
-// https://discord.com/channels/955905230107738152/1048308525673238558/1184833931569266738
-const Link = styled("a", {
-  color: theme.colors.foregroundLink,
-  "&:visited": {
-    color: theme.colors.foregroundLinkVisited,
-  },
-});
-
 const deployTargets = {
   vercel: {
     command: "npx vercel",
@@ -526,11 +517,19 @@ const ExportContent = () => {
         </Text>
         <Text color="subtle">
           Download and install Node v18+ from{" "}
-          <Link href="https://nodejs.org/" target="_blank" rel="noreferrer">
+          <Link
+            variant="inherit"
+            color="inherit"
+            href="https://nodejs.org/"
+            target="_blank"
+            rel="noreferrer"
+          >
             nodejs.org
           </Link>{" "}
           or with{" "}
           <Link
+            variant="inherit"
+            color="inherit"
             href="https://nodejs.org/en/download/package-manager"
             target="_blank"
             rel="noreferrer"
@@ -553,7 +552,12 @@ const ExportContent = () => {
         </Grid>
 
         <Flex gap={2}>
-          <InputField css={{ flex: 1 }} readOnly value={npxCommand} />
+          <InputField
+            css={{ flex: 1 }}
+            variant="mono"
+            readOnly
+            value={npxCommand}
+          />
 
           <Tooltip content={"Copy to clipboard"}>
             <Button
@@ -576,6 +580,8 @@ const ExportContent = () => {
           <Text color="subtle">
             Run this command to publish to{" "}
             <Link
+              variant="inherit"
+              color="inherit"
               href={deployTargets[deployTarget].docs}
               target="_blank"
               rel="noreferrer"
@@ -601,6 +607,7 @@ const ExportContent = () => {
         <Flex gap={2} align="end">
           <TextArea
             css={{ flex: 1 }}
+            variant="mono"
             readOnly
             value={stripIndent(deployTargets[deployTarget].command)
               .trimStart()
@@ -608,6 +615,7 @@ const ExportContent = () => {
           />
           <Tooltip content={"Copy to clipboard"}>
             <Button
+              css={{ flexShrink: 0 }}
               color="neutral"
               onClick={() => {
                 navigator.clipboard.writeText(
@@ -625,6 +633,8 @@ const ExportContent = () => {
         <Text color="subtle">
           Read the detailed documentation{" "}
           <Link
+            variant="inherit"
+            color="inherit"
             href="https://github.com/webstudio-is/webstudio/tree/main/packages/cli"
             target="_blank"
             rel="noreferrer"
diff --git a/apps/builder/app/dashboard/projects/project-card.tsx b/apps/builder/app/dashboard/projects/project-card.tsx
index a164b037a26e..4e6c4efa0aae 100644
--- a/apps/builder/app/dashboard/projects/project-card.tsx
+++ b/apps/builder/app/dashboard/projects/project-card.tsx
@@ -9,12 +9,12 @@ import {
   Flex,
   Grid,
   Text,
-  textVariants,
   truncate,
   theme,
   Box,
   Tooltip,
   rawTheme,
+  Link,
 } from "@webstudio-is/design-system";
 import { InfoCircleIcon, MenuIcon } from "@webstudio-is/icons";
 import { type KeyboardEvent, useEffect, useRef, useState } from "react";
@@ -79,17 +79,6 @@ const usePublishedLink = ({ domain }: { domain: string }) => {
   return { url };
 };
 
-const linkStyle = css({
-  ...textVariants.regular,
-  ...truncate(),
-  cursor: "pointer",
-  color: theme.colors.foregroundSubtle,
-  "&:hover": {
-    textDecoration: "underline",
-  },
-});
-
-// @todo use Link component once ready https://github.com/webstudio-is/webstudio/pull/2697
 const PublishedLink = ({
   domain,
   tabIndex,
@@ -99,15 +88,17 @@ const PublishedLink = ({
 }) => {
   const { url } = usePublishedLink({ domain });
   return (
-    <a
+    <Link
       href={url?.href}
       target="_blank"
       rel="noreferrer"
       tabIndex={tabIndex}
-      className={linkStyle()}
+      color="subtle"
+      underline="hover"
+      css={truncate()}
     >
       {url?.host}
-    </a>
+    </Link>
   );
 };
 
diff --git a/packages/design-system/src/__generated__/figma-design-tokens.json b/packages/design-system/src/__generated__/figma-design-tokens.json
index 395501144864..cecd554605b9 100644
--- a/packages/design-system/src/__generated__/figma-design-tokens.json
+++ b/packages/design-system/src/__generated__/figma-design-tokens.json
@@ -5,18 +5,18 @@
         {
           "color": "#0000001a",
           "type": "dropShadow",
-          "x": 0,
-          "y": 2,
-          "blur": 7,
-          "spread": 0
+          "x": "0",
+          "y": "2",
+          "blur": "7",
+          "spread": "0"
         },
         {
           "color": "#0000004d",
           "type": "dropShadow",
-          "x": 0,
-          "y": 5,
-          "blur": 17,
-          "spread": 0
+          "x": "0",
+          "y": "5",
+          "blur": "17",
+          "spread": "0"
         }
       ],
       "type": "boxShadow"
@@ -449,7 +449,7 @@
           "description": "used for destructive button and accent color on destructive toast"
         },
         "notification": {
-          "value": "#ffefef",
+          "value": "#ffe9e9",
           "type": "color",
           "description": "background for destructive toast"
         }
@@ -484,7 +484,7 @@
           "type": "color"
         },
         "notification": {
-          "value": "#edf6ff",
+          "value": "#e0f0ff",
           "type": "color",
           "description": "background for info banner & toast"
         }
@@ -979,16 +979,6 @@
         "type": "color",
         "description": "color for hidden item element within navigator item component"
       },
-      "link": {
-        "value": "#006adc",
-        "type": "color",
-        "description": "color for link text"
-      },
-      "link-visited": {
-        "value": "#793aaf",
-        "type": "color",
-        "description": "Text links that the user has visited."
-      },
       "flex-ui": {
         "main": {
           "value": "#c7c7c7",
@@ -1103,11 +1093,6 @@
         "value": "#ff22ae",
         "type": "color",
         "description": "The inverse color of our primary blue, when we want a contrasting highlight."
-      },
-      "link-not-visited": {
-        "value": "#006adc",
-        "type": "color",
-        "description": "Text links that are not yet visited."
       }
     },
     "Brand": {
@@ -1115,10 +1100,10 @@
         "value": {
           "color": "#1717171a",
           "type": "dropShadow",
-          "x": 0,
-          "y": 4,
-          "blur": 4,
-          "spread": 0
+          "x": "0",
+          "y": "4",
+          "blur": "4",
+          "spread": "0"
         },
         "type": "boxShadow",
         "description": "elevation for small things within the dashboard"
@@ -1127,10 +1112,10 @@
         "value": {
           "color": "#1717171a",
           "type": "dropShadow",
-          "x": 0,
-          "y": 8,
-          "blur": 16,
-          "spread": 0
+          "x": "0",
+          "y": "8",
+          "blur": "16",
+          "spread": "0"
         },
         "type": "boxShadow",
         "description": "elevation for big things within the dashboard"
@@ -1371,18 +1356,18 @@
         {
           "color": "#00000014",
           "type": "dropShadow",
-          "x": 0,
-          "y": 4,
-          "blur": 15,
-          "spread": 0
+          "x": "0",
+          "y": "4",
+          "blur": "15",
+          "spread": "0"
         },
         {
           "color": "#00000014",
           "type": "dropShadow",
-          "x": 0,
-          "y": 1,
-          "blur": 7,
-          "spread": 0
+          "x": "0",
+          "y": "1",
+          "blur": "7",
+          "spread": "0"
         }
       ],
       "type": "boxShadow",
@@ -1426,13 +1411,6 @@
       "value": "linear-gradient(180deg, #9697fc 0%, #4a4efa00 100%)",
       "type": "color"
     },
-    "backgrond": {
-      "menu-hint": {
-        "value": "#dedede",
-        "type": "color",
-        "description": "For the background of the hint menu item."
-      }
-    },
     "Link": {
       "value": {
         "fontFamily": "{fontFamilies.inter}",
@@ -1447,6 +1425,66 @@
       },
       "type": "typography",
       "description": "link text"
+    },
+    "Regular Link": {
+      "value": {
+        "fontFamily": "{fontFamilies.inter}",
+        "fontWeight": "{fontWeights.inter-0}",
+        "lineHeight": "{lineHeights.0}",
+        "fontSize": "{fontSize.2}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.underline}"
+      },
+      "type": "typography",
+      "description": "Regular text underlined to represent links within a body of Regular text"
+    },
+    "Label Link": {
+      "value": {
+        "fontFamily": "{fontFamilies.inter}",
+        "fontWeight": "{fontWeights.inter-2}",
+        "lineHeight": "{lineHeights.0}",
+        "fontSize": "{fontSize.2}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.underline}"
+      },
+      "type": "typography",
+      "description": "Label text with underline to represent links in Label text. Sentence case."
+    },
+    "Mono Bold Link": {
+      "value": {
+        "fontFamily": "{fontFamilies.roboto-mono}",
+        "fontWeight": "{fontWeights.roboto-mono-4}",
+        "lineHeight": "{lineHeights.0}",
+        "fontSize": "{fontSize.2}",
+        "letterSpacing": "{letterSpacing.2}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.underline}"
+      },
+      "type": "typography",
+      "description": "Mono Bold text style with underline to indicate a text link"
+    },
+    "Mono Link": {
+      "value": {
+        "fontFamily": "{fontFamilies.roboto-mono}",
+        "fontWeight": "{fontWeights.roboto-mono-3}",
+        "lineHeight": "{lineHeights.0}",
+        "fontSize": "{fontSize.2}",
+        "letterSpacing": "{letterSpacing.2}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.underline}"
+      },
+      "type": "typography",
+      "description": "Mono text style with underline to indicate a text link"
     }
   },
   "$themes": [],
diff --git a/packages/design-system/src/__generated__/figma-design-tokens.ts b/packages/design-system/src/__generated__/figma-design-tokens.ts
index d31471c506a1..b0727c97b0f4 100644
--- a/packages/design-system/src/__generated__/figma-design-tokens.ts
+++ b/packages/design-system/src/__generated__/figma-design-tokens.ts
@@ -30,20 +30,20 @@ export const lineHeights = {
 } as const;
 
 export const fontWeights = {
-  inter0: 400,
-  inter1: 700,
-  inter2: 500,
-  inter3: 700,
-  inter4: 600,
-  robotoMono4: 700,
-  manrope5: 700,
-  manrope6: 400,
-  manrope7: 600,
-  manrope8: 200,
-  manrope9: 800,
-  robotoMono3: 500,
-  inter5: 600,
-  manrope10: 800,
+  inter_0: 400,
+  inter_1: 700,
+  inter_2: 500,
+  inter_3: 700,
+  inter_4: 600,
+  robotoMono_4: 700,
+  manrope_5: 700,
+  manrope_6: 400,
+  manrope_7: 600,
+  manrope_8: 200,
+  manrope_9: 800,
+  robotoMono_3: 500,
+  inter_5: 600,
+  manrope_10: 800,
 } as const;
 
 export const letterSpacing = {
@@ -320,6 +320,48 @@ export const typography = {
     textDecoration: "underline",
     textIndent: "0px",
   },
+  regularLink: {
+    fontFamily:
+      "Inter Variable, InterVariable, Inter, -apple-system, system-ui, sans-serif",
+    fontWeight: 400,
+    fontSize: "12px",
+    lineHeight: "16px",
+    letterSpacing: "0.005em",
+    textTransform: "none",
+    textDecoration: "underline",
+    textIndent: "0px",
+  },
+  labelLink: {
+    fontFamily:
+      "Inter Variable, InterVariable, Inter, -apple-system, system-ui, sans-serif",
+    fontWeight: 500,
+    fontSize: "12px",
+    lineHeight: "16px",
+    letterSpacing: "0.005em",
+    textTransform: "none",
+    textDecoration: "underline",
+    textIndent: "0px",
+  },
+  monoBoldLink: {
+    fontFamily: "Roboto Mono, RobotoMono, menlo, monospace",
+    fontWeight: 700,
+    fontSize: "12px",
+    lineHeight: "16px",
+    letterSpacing: "0em",
+    textTransform: "none",
+    textDecoration: "underline",
+    textIndent: "0px",
+  },
+  monoLink: {
+    fontFamily: "Roboto Mono, RobotoMono, menlo, monospace",
+    fontWeight: 500,
+    fontSize: "12px",
+    lineHeight: "16px",
+    letterSpacing: "0em",
+    textTransform: "none",
+    textDecoration: "underline",
+    textIndent: "0px",
+  },
 } as const;
 
 export const textCase = {
@@ -354,13 +396,13 @@ export const color = {
   backgroundNeutralNotification: "#ffffff",
   backgroundNeutralDark: "#7e868c",
   backgroundDestructiveMain: "#dc2929",
-  backgroundDestructiveNotification: "#ffefef",
+  backgroundDestructiveNotification: "#ffe9e9",
   backgroundSuccessMain: "#00894a",
   backgroundSuccessNotification: "#e9f9ee",
   backgroundAlertMain: "#f5d90a",
   backgroundAlertNotification: "#fffbd1",
   backgroundInfoMain: "#0175dc",
-  backgroundInfoNotification: "#edf6ff",
+  backgroundInfoNotification: "#e0f0ff",
   backgroundPresetMain: "#e6e8eb",
   backgroundPresetHover: "#dfe3e6",
   backgroundLocalMain: "#e1f0ff",
@@ -469,8 +511,6 @@ export const color = {
   foregroundInfo: "#096cff",
   foregroundDisabled: "#c1c8cd",
   foregroundHiddenItem: "#7e868c",
-  foregroundLink: "#006adc",
-  foregroundLinkVisited: "#793aaf",
   foregroundFlexUiMain: "#c7c7c7",
   foregroundFlexUiHover: "#96c7f2",
   foregroundContrastMain: "#ffffff",
@@ -492,29 +532,27 @@ export const color = {
   foregroundOverwrittenMain: "#bf0007",
   foregroundOverwrittenFlexUi: "#dc3d43",
   foregroundInversePrimary: "#ff22ae",
-  foregroundLinkNotVisited: "#006adc",
   maintenanceLight: "#ededed",
   maintenanceMedium: "#c7c7c7",
   maintenanceDark: "#858585",
   maintenanceSpacerViz: "#f9c6c6",
   darkBlueFade: "linear-gradient(180deg, #11273f 0%, #11273f00 100%)",
   strokeFade: "linear-gradient(180deg, #9697fc 0%, #4a4efa00 100%)",
-  backgrondMenuHint: "#dedede",
 } as const;
 
 export const borderWidth = { "0": 1, "1": 2 } as const;
 
-export const dimension = { paragraphIndent0: "0px" } as const;
+export const dimension = { paragraphIndent_0: "0px" } as const;
 
 export const fontSizes = {
-  fontSize0: "8px",
-  fontSize1: "10px",
-  fontSize2: "12px",
-  fontSize3: "16px",
-  fontSize4: "20px",
-  fontSize5: "32px",
-  fontSize6: "48px",
-  fontSize7: "360px",
+  fontSize_0: "8px",
+  fontSize_1: "10px",
+  fontSize_2: "12px",
+  fontSize_3: "16px",
+  fontSize_4: "20px",
+  fontSize_5: "32px",
+  fontSize_6: "48px",
+  fontSize_7: "360px",
 } as const;
 
-export const other = { tokenSetOrder0: "global" } as const;
+export const other = { tokenSetOrder_0: "global" } as const;
diff --git a/packages/design-system/src/components/input-field.stories.tsx b/packages/design-system/src/components/input-field.stories.tsx
index 188aaa258163..55a52dd87d16 100644
--- a/packages/design-system/src/components/input-field.stories.tsx
+++ b/packages/design-system/src/components/input-field.stories.tsx
@@ -29,6 +29,12 @@ export const Demo = () => (
       </StoryGrid>
     </StorySection>
 
+    <StorySection title="Mono">
+      <StoryGrid horizontal>
+        <InputField defaultValue="mono text" variant="mono" />
+      </StoryGrid>
+    </StorySection>
+
     <StorySection title="Nested Controls">
       <StoryGrid horizontal>
         {inputFieldColors.map((color) => (
diff --git a/packages/design-system/src/components/input-field.tsx b/packages/design-system/src/components/input-field.tsx
index 250ae3ca25dd..5161c25f5ff1 100644
--- a/packages/design-system/src/components/input-field.tsx
+++ b/packages/design-system/src/components/input-field.tsx
@@ -31,7 +31,6 @@ export const inputFieldColors = ["placeholder", "set", "error"] as const;
 
 const inputStyle = css({
   all: "unset",
-  ...textVariants.regular,
   color: theme.colors.foregroundMain,
   flexGrow: 1,
   flexShrink: 1,
@@ -53,6 +52,15 @@ const inputStyle = css({
       margin: 0,
     },
   },
+  variants: {
+    variant: {
+      regular: textVariants.regular,
+      mono: textVariants.mono,
+    },
+  },
+  defaultVariants: {
+    variant: "regular",
+  },
 });
 
 const containerStyle = css({
@@ -154,23 +162,26 @@ type InputProps = {
   type?: (typeof inputFieldTypes)[number];
   color?: (typeof inputFieldColors)[number];
   css?: CSS;
+  variant?: "regular" | "mono";
 } & Omit<ComponentProps<"input">, "prefix" | "onFocus" | "onBlur">;
 
 const Input = forwardRef(
   (
-    { css, className, color, disabled = false, ...props }: InputProps,
+    { css, className, color, disabled = false, variant, ...props }: InputProps,
     ref: Ref<HTMLInputElement>
-  ) => (
-    <input
-      {...props}
-      spellCheck={false}
-      data-input-field-input // to distinguish from potential other inputs in prefix/suffix
-      data-color={color}
-      disabled={disabled}
-      className={inputStyle({ className, css })}
-      ref={ref}
-    />
-  )
+  ) => {
+    return (
+      <input
+        {...props}
+        spellCheck={false}
+        data-input-field-input // to distinguish from potential other inputs in prefix/suffix
+        data-color={color}
+        disabled={disabled}
+        className={inputStyle({ className, css, variant })}
+        ref={ref}
+      />
+    );
+  }
 );
 Input.displayName = "Input";
 
@@ -185,7 +196,7 @@ export const InputField = forwardRef(
       inputRef,
       onFocus,
       onBlur,
-      ...props
+      ...inputProps
     }: InputProps & {
       prefix?: ReactNode;
       suffix?: ReactNode;
@@ -212,7 +223,7 @@ export const InputField = forwardRef(
         {...focusWithinProps}
         ref={mergeRefs(ref, containerRef ?? null)}
       >
-        <Input {...props} ref={inputRef} />
+        <Input {...inputProps} ref={inputRef} />
       </Container>
     );
   }
diff --git a/packages/design-system/src/components/link.stories.tsx b/packages/design-system/src/components/link.stories.tsx
new file mode 100644
index 000000000000..044cfffeab6e
--- /dev/null
+++ b/packages/design-system/src/components/link.stories.tsx
@@ -0,0 +1,79 @@
+import { Box } from "./box";
+import { Link } from "./link";
+import { StorySection, StoryGrid } from "./storybook";
+
+export default {
+  title: "Library/Link",
+};
+
+const LinkStory = () => (
+  <>
+    <StorySection title="Variant">
+      <StoryGrid
+        css={{
+          alignItems: "flex-start",
+        }}
+      >
+        <Link href="">Regular</Link>
+        <Link variant="label" href="">
+          Label
+        </Link>
+        <Link variant="mono" href="">
+          Mono
+        </Link>
+        <Link variant="monoBold" href="">
+          Mono Bold
+        </Link>
+        <div style={{ fontSize: 20 }}>
+          <Link variant="inherit" href="">
+            Inherit
+          </Link>
+        </div>
+      </StoryGrid>
+    </StorySection>
+    <StorySection title="Underline">
+      <StoryGrid
+        css={{
+          alignItems: "flex-start",
+        }}
+      >
+        <Link href="" underline="none">
+          None
+        </Link>
+        <Link href="">Hover</Link>
+        <Link href="" underline="always">
+          Always
+        </Link>
+      </StoryGrid>
+    </StorySection>
+    <StorySection title="Colors">
+      <StoryGrid
+        css={{
+          alignItems: "flex-start",
+        }}
+      >
+        <Link color="main" href="">
+          Main
+        </Link>
+        <Box css={{ backgroundColor: "black" }}>
+          <Link color="contrast" href="">
+            Contrast
+          </Link>
+        </Box>
+        <Link color="subtle" href="">
+          Subtle
+        </Link>
+        <Link color="moreSubtle" href="">
+          More Subtle
+        </Link>
+        <div style={{ color: "blue" }}>
+          <Link color="inherit" href="">
+            Inherit
+          </Link>
+        </div>
+      </StoryGrid>
+    </StorySection>
+  </>
+);
+
+export { LinkStory as Link };
diff --git a/packages/design-system/src/components/link.tsx b/packages/design-system/src/components/link.tsx
new file mode 100644
index 000000000000..8c515b66f4ac
--- /dev/null
+++ b/packages/design-system/src/components/link.tsx
@@ -0,0 +1,65 @@
+import { styled, theme } from "../stitches.config";
+import { textVariants } from "./text";
+
+export const Link = styled("a", {
+  cursor: "pointer",
+  variants: {
+    variant: {
+      inherit: {
+        fontFamily: "inherit",
+        fontWeight: "inherit",
+        fontSize: "inherit",
+        lineHeight: "inherit",
+        letterSpacing: "inherit",
+        textTransform: "inherit",
+        textIndent: "inherit",
+        textDecoration: "underline",
+      },
+      regular: textVariants.regularLink,
+      label: textVariants.labelLink,
+      mono: textVariants.monoLink,
+      monoBold: textVariants.monoBoldLink,
+    },
+    color: {
+      main: {
+        color: theme.colors.foregroundMain,
+        "&:hover, &:visited": { color: theme.colors.foregroundMain },
+      },
+      contrast: {
+        color: theme.colors.foregroundContrastMain,
+        "&:hover, &:visited": { color: theme.colors.foregroundContrastMain },
+      },
+      subtle: {
+        color: theme.colors.foregroundTextSubtle,
+        "&:hover, &:visited": { color: theme.colors.foregroundTextSubtle },
+      },
+      moreSubtle: {
+        color: theme.colors.foregroundTextMoreSubtle,
+        "&:hover, &:visited": { color: theme.colors.foregroundTextMoreSubtle },
+      },
+      inherit: {
+        color: "inherit",
+        "&:hover, &:visited": { color: "inherit" },
+      },
+    },
+    underline: {
+      none: {
+        textDecoration: "none",
+        "&:hover": { textDecoration: "none" },
+      },
+      hover: {
+        textDecoration: "none",
+        "&:hover": { textDecoration: "underline" },
+      },
+      always: {
+        textDecoration: "underline",
+        "&:hover": { textDecoration: "underline" },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "regular",
+    color: "main",
+    underline: "hover",
+  },
+});
diff --git a/packages/design-system/src/components/text-area.stories.tsx b/packages/design-system/src/components/text-area.stories.tsx
index 027edd4c5861..5e89e15b41d0 100644
--- a/packages/design-system/src/components/text-area.stories.tsx
+++ b/packages/design-system/src/components/text-area.stories.tsx
@@ -85,6 +85,11 @@ export const Demo = () => {
           <TextArea value={value} onChange={setValue} />
         </StoryGrid>
       </StorySection>
+      <StorySection title="Mono">
+        <StoryGrid css={{ width: 250 }}>
+          <TextArea variant="mono" value={value} onChange={setValue} />
+        </StoryGrid>
+      </StorySection>
     </>
   );
 };
diff --git a/packages/design-system/src/components/text-area.tsx b/packages/design-system/src/components/text-area.tsx
index 933ac780baa3..3408c5641ba7 100644
--- a/packages/design-system/src/components/text-area.tsx
+++ b/packages/design-system/src/components/text-area.tsx
@@ -15,7 +15,7 @@ const PADDING_TOP = 6;
 const PADDING_BOTTOM = 4;
 const BORDER = 1;
 
-const gridStyle = css(textVariants.regular, {
+const gridStyle = css({
   color: theme.colors.foregroundMain,
   borderRadius: theme.borderRadius[4],
   border: `${BORDER}px solid ${theme.colors.borderMain}`,
@@ -37,6 +37,10 @@ const gridStyle = css(textVariants.regular, {
         resize: "none",
       },
     },
+    variant: {
+      regular: textVariants.regular,
+      mono: textVariants.mono,
+    },
     state: {
       invalid: {
         color: theme.colors.foregroundDestructive,
@@ -46,9 +50,12 @@ const gridStyle = css(textVariants.regular, {
       },
     },
   },
+  defaultVariants: {
+    variant: "regular",
+  },
 });
 
-const commonStyle = css(textVariants.regular, {
+const commonStyle = css({
   border: "none",
   paddingRight: theme.spacing[4],
   paddingLeft: theme.spacing[3],
@@ -71,6 +78,15 @@ const commonStyle = css(textVariants.regular, {
     color: theme.colors.foregroundDisabled,
     background: theme.colors.backgroundInputDisabled,
   },
+  variants: {
+    variant: {
+      regular: textVariants.regular,
+      mono: textVariants.mono,
+    },
+  },
+  defaultVariants: {
+    variant: "regular",
+  },
 });
 
 const textAreaStyle = css(commonStyle, {});
@@ -87,6 +103,7 @@ type Props = Omit<
   defaultValue?: string;
   onChange?: (value: string) => void;
   autoGrow?: boolean;
+  variant?: "regular" | "mono";
 };
 
 export const TextArea = forwardRef(
@@ -100,6 +117,7 @@ export const TextArea = forwardRef(
       value,
       onChange,
       autoGrow,
+      variant = "regular",
       ...props
     }: Props,
     ref: Ref<HTMLTextAreaElement>
@@ -126,6 +144,7 @@ export const TextArea = forwardRef(
         className={gridStyle({
           state,
           autoGrow,
+          variant,
           css: { height, minHeight, maxHeight },
         })}
         onClick={(event) => {
@@ -153,6 +172,7 @@ export const TextArea = forwardRef(
               css: { visibility: "hidden", ...css },
               state,
               className,
+              variant,
             })}
           >
             {textValue}{" "}
@@ -164,6 +184,7 @@ export const TextArea = forwardRef(
               css,
               state,
               className,
+              variant,
             })}
             onChange={(event) => setTextValue(event.target.value)}
             value={textValue}
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 43db7d7ce613..85221b9ef670 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -41,6 +41,7 @@ export * from "./components/input-field";
 export * from "./components/nested-input-button";
 export * from "./components/panel-tabs";
 export * from "./components/ai-command-bar";
+export * from "./components/link";
 
 // Not aligned