feat: link style variants

lib/links.css.ts

@@ -1,17 +1,50 @@
-import { style } from '@vanilla-extract/css';
+import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import { genericVars } from './design-system.css.js';
 import { colorThemeVars } from './schemes/color.css.js';
 import { hsl } from './utils.js';
 
-export const linkStyle = style({
+export type LinkVariant = 'strong' | 'standard' | 'weak';
+
+const linkColorVar = createVar();
+
+const linkStyle = style({
+  vars: {
+    [linkColorVar]: hsl(
+      colorThemeVars.accent.h,
+      colorThemeVars.accent.s,
+      colorThemeVars.accent.l,
+    ),
+  },
   cursor: 'pointer',
-  selectors: {
-    '&:hover': {
+});
+
+export const linkStyleVariant = styleVariants(
+  {
+    strong: {
+      color: linkColorVar,
+      fontWeight: genericVars.text.weight.semiBold,
+    },
+    standard: {
+      color: linkColorVar,
+    },
+    weak: {
       textDecoration: 'underline',
+      selectors: {
+        '&:hover': {
+          color: linkColorVar,
+        },
+      },
     },
-  },
-  color: hsl(
-    colorThemeVars.accent.h,
-    colorThemeVars.accent.s,
-    colorThemeVars.accent.l,
-  ),
-});
+  } as const,
+  (cssProps) => [
+    linkStyle,
+    {
+      selectors: {
+        '&:hover': {
+          textDecoration: 'underline',
+        },
+      },
+      ...cssProps,
+    },
+  ],
+);

lib/links.tsx

@@ -1,16 +1,14 @@
 import type { FC } from 'react';
 import { Box, BoxBasedComponentProps } from './core.js';
-import { linkStyle } from './links.css.js';
+import { linkStyleVariant, LinkVariant } from './links.css.js';
 
-export const TextLink: FC<BoxBasedComponentProps<'span' | 'a'>> = ({
-  children,
-  className,
-  ...props
-}) => (
+export const TextLink: FC<
+  BoxBasedComponentProps<'span' | 'a'> & { weight?: LinkVariant }
+> = ({ children, className, weight = 'standard', ...props }) => (
   <Box
-    // if someone is trying to use it as a link, use an anchor tag
+    // if someone is trying to use this as a link, use an anchor element
     component={'href' in props ? 'a' : 'span'}
-    className={[linkStyle, className]}
+    className={[linkStyleVariant[weight], className]}
     {...props}
   >
     {children}

src/pages/typography.tsx

@@ -44,13 +44,22 @@ export const TypographyPage: FC = () => (
       </Text>
       <Text>
         Sometimes I like to look at{' '}
-        <TextLink href="/buttons">button components</TextLink> on my computer.
+        <TextLink href="/buttons">button components</TextLink> and{' '}
+        <TextLink href="/panels" weight="strong">
+          strong panels
+        </TextLink>{' '}
+        or{' '}
+        <TextLink href="/buttons" weight="weak">
+          weak badges
+        </TextLink>{' '}
+        on my computer.
       </Text>
     </Block>
     <Block>
       <Heading level="1">
         Sometimes I like to look at{' '}
-        <TextLink href="/buttons">button components</TextLink> on my computer.
+        <TextLink href="/buttons">button components</TextLink> or on my
+        computer.
       </Heading>
     </Block>
     <Callout tone="critical">