Proto selection UI/models

src-web/components/core/Button.tsx

@@ -60,7 +60,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         size === 'md' && 'h-md px-3',
         size === 'sm' && 'h-sm px-2.5 text-sm',
         size === 'xs' && 'h-xs px-2 text-sm',
-        variant === 'border' && 'border',
         // Solids
         variant === 'solid' && color === 'custom' && 'ring-blue-500/50',
         variant === 'solid' &&
@@ -82,12 +81,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
           color === 'danger' &&
           'bg-red-400 text-white enabled:hocus:bg-red-500 ring-red-500/50',
         // Borders
+        variant === 'border' && 'border',
         variant === 'border' &&
           color === 'default' &&
-          'border-highlight text-gray-700 enabled:hocus:border-focus enabled:hocus:text-gray-1000 ring-blue-500/50',
+          'border-highlight text-gray-700 enabled:hocus:border-focus enabled:hocus:text-gray-800 ring-blue-500/50',
         variant === 'border' &&
           color === 'gray' &&
-          'border-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000 ring-blue-500/50',
+          'border-gray-500/70 text-gray-700 enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-800 ring-blue-500/50',
         variant === 'border' &&
           color === 'primary' &&
           'border-blue-500/70 text-blue-700 enabled:hocus:border-blue-500 ring-blue-500/50',

src-web/components/core/InlineCode.tsx

@@ -6,7 +6,7 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
     <code
       className={classNames(
         className,
-        'font-mono text-sm bg-highlight border-0 border-gray-200',
+        'font-mono text-xs bg-highlight border-0 border-gray-200/30',
         'px-1.5 py-0.5 rounded text-gray-800 shadow-inner',
       )}
       {...props}

src-web/components/core/Link.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Icon } from './Icon';
+
+interface Props extends HTMLAttributes<HTMLAnchorElement> {
+  href: string;
+}
+
+export function Link({ href, children, className, ...other }: Props) {
+  const isExternal = href.match(/^https?:\/\//);
+
+  className = classNames(className, 'relative underline hover:text-violet-600');
+
+  if (isExternal) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={classNames(className, 'pr-4')}
+        {...other}
+      >
+        <span className="underline">{children}</span>
+        <Icon className="inline absolute right-0.5 top-0.5" size="xs" icon="externalLink" />
+      </a>
+    );
+  }
+
+  return (
+    <RouterLink to={href} className={className} {...other}>
+      {children}
+    </RouterLink>
+  );
+}