Merge branch 'link-styles' into figma-tokens

packages/design-system/src/components/link.stories.tsx

@@ -0,0 +1,48 @@
+import { linkStyle } from "./link";
+import { StorySection, StoryGrid } from "./storybook";
+
+export default {
+  title: "Library/Link",
+};
+
+export const Link = () => (
+  <>
+    <StorySection title="Variants">
+      <StoryGrid
+        css={{
+          alignItems: "flex-start",
+        }}
+      >
+        <a className={linkStyle()} href="">
+          Regular
+        </a>
+        <a className={linkStyle({ variant: "label" })} href="">
+          Label
+        </a>
+        <a className={linkStyle({ variant: "mono" })} href="">
+          Mono
+        </a>
+      </StoryGrid>
+    </StorySection>
+    <StorySection title="Colors">
+      <StoryGrid
+        css={{
+          alignItems: "flex-start",
+        }}
+      >
+        <a className={linkStyle()} href="">
+          Main
+        </a>
+        <a className={linkStyle({ color: "contrast" })} href="">
+          Contrast
+        </a>
+        <a className={linkStyle({ color: "subtle" })} href="">
+          Subtle
+        </a>
+        <a className={linkStyle({ color: "moreSubtle" })} href="">
+          More Subtle
+        </a>
+      </StoryGrid>
+    </StorySection>
+  </>
+);

packages/design-system/src/components/link.tsx

@@ -0,0 +1,28 @@
+import { css, theme } from "../stitches.config";
+import { textVariants } from "./text";
+
+export const linkStyle = css({
+  color: theme.colors.foregroundLink,
+  "&:hover": { color: theme.colors.foregroundLinkHoverMain },
+  "&:visited": {
+    color: theme.colors.foregroundLink,
+  },
+  variants: {
+    variant: {
+      regular: textVariants.regularLink,
+      label: textVariants.labelLink,
+      mono: textVariants.monoLink,
+    },
+    color: {
+      contrast: {
+        color: theme.colors.foregroundContrastMain,
+        "&:hover": { color: theme.colors.foregroundLinkHoverContrast },
+      },
+      subtle: { color: theme.colors.foregroundLinkHoverTextSubtle },
+      moreSubtle: { color: theme.colors.foregroundLinkHoverTextMoreSubtle },
+    },
+  },
+  defaultVariants: {
+    variant: "regular",
+  },
+});