website refactor

2026-01-18 23:24:30 +01:00
parent aeaa43f4d3
commit 182056a57b
487 changed files with 1783 additions and 2170 deletions
--- a/apps/website/ui/Surface.tsx
+++ b/apps/website/ui/Surface.tsx
@@ -0,0 +1,97 @@
+import React, { ElementType, ForwardedRef, forwardRef, ReactNode } from 'react';
+import { Box, BoxProps } from './Box';
+import { ThemeRadii, ThemeShadows } from './theme/Theme';
+
+/**
+ * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
+ * 
+ * Surface is a styled container with background, border, and shadow.
+ * 
+ * - DO NOT add layout props (flex, grid, gap) - use Stack or Grid instead.
+ * - DO NOT add positioning props (absolute, top, zIndex).
+ * 
+ * If you need a more specific layout, create a new component in apps/website/components.
+ */
+
+export interface SurfaceProps<T extends ElementType = 'div'> extends BoxProps<T> {
+  as?: T;
+  children?: ReactNode;
+  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
+  rounded?: keyof ThemeRadii | 'none';
+  shadow?: keyof ThemeShadows | 'none';
+}
+
+export const Surface = forwardRef(<T extends ElementType = 'div'>(
+  { 
+    as,
+    children, 
+    variant = 'default',
+    rounded = 'none',
+    shadow = 'none',
+    ...props 
+  }: SurfaceProps<T>,
+  ref: ForwardedRef<HTMLElement>
+) => {
+  const variantStyles: Record<string, React.CSSProperties> = {
+    default: { backgroundColor: 'var(--ui-color-bg-surface)' },
+    dark: { backgroundColor: 'var(--ui-color-bg-base)' },
+    muted: { backgroundColor: 'var(--ui-color-bg-surface-muted)' },
+    glass: { 
+      backgroundColor: 'rgba(20, 22, 25, 0.6)', 
+      backdropFilter: 'blur(12px)',
+      WebkitBackdropFilter: 'blur(12px)'
+    },
+    discord: {
+      background: 'linear-gradient(to bottom, var(--ui-color-bg-base), var(--ui-color-bg-surface))'
+    },
+    'discord-inner': {
+      background: 'linear-gradient(to br, var(--ui-color-bg-surface), var(--ui-color-bg-base), var(--ui-color-bg-surface))'
+    },
+    'gradient-blue': {
+      background: 'linear-gradient(to br, rgba(25, 140, 255, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
+    },
+    'gradient-gold': {
+      background: 'linear-gradient(to br, rgba(255, 190, 77, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
+    },
+    'gradient-purple': {
+      background: 'linear-gradient(to br, rgba(147, 51, 234, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
+    },
+    'gradient-green': {
+      background: 'linear-gradient(to br, rgba(111, 227, 122, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      border: '1px solid var(--ui-color-border-default)'
+    },
+    'rarity-common': {
+      backgroundColor: 'rgba(107, 114, 128, 0.1)',
+      border: '1px solid rgba(107, 114, 128, 0.5)'
+    },
+    'rarity-rare': {
+      backgroundColor: 'rgba(96, 165, 250, 0.1)',
+      border: '1px solid rgba(96, 165, 250, 0.5)'
+    },
+    'rarity-epic': {
+      backgroundColor: 'rgba(192, 132, 252, 0.1)',
+      border: '1px solid rgba(192, 132, 252, 0.5)'
+    },
+    'rarity-legendary': {
+      backgroundColor: 'rgba(255, 190, 77, 0.1)',
+      border: '1px solid rgba(255, 190, 77, 0.5)'
+    }
+  };
+
+  const style: React.CSSProperties = {
+    ...variantStyles[variant],
+    borderRadius: rounded !== 'none' ? `var(--ui-radius-${String(rounded)})` : undefined,
+    boxShadow: shadow !== 'none' ? `var(--ui-shadow-${String(shadow)})` : undefined,
+  };
+
+  return (
+    <Box as={as} ref={ref} {...(props as any)} style={style}>
+      {children}
+    </Box>
+  );
+});
+
+Surface.displayName = 'Surface';