chore: Add a CLAUDE.md file with instructions for Claude Code (#17868)

packages/frontend/CLAUDE.md

@@ -0,0 +1,117 @@
+# CLAUDE.md
+
+Extra information, specific to the frontend codebase.
+
+### CSS Variables Reference
+
+Use the following CSS variables to maintain consistency across the
+application. These variables cover colors, spacing, typography, and borders.
+
+#### Colors
+```css
+/* Primary Colors */
+--color-primary-shade-1
+--color-primary
+--color-primary-tint-1
+--color-primary-tint-2
+--color-primary-tint-3
+
+/* Secondary Colors */
+--color-secondary-shade-1
+--color-secondary
+--color-secondary-tint-1
+--color-secondary-tint-3
+
+/* Success Colors */
+--color-success-shade-1
+--color-success
+--color-success-light
+--color-success-light-2
+--color-success-tint-1
+--color-success-tint-2
+
+/* Warning Colors */
+--color-warning-shade-1
+--color-warning
+--color-warning-tint-1
+--color-warning-tint-2
+
+/* Danger Colors */
+--color-danger-shade-1
+--color-danger
+--color-danger-tint-1
+--color-danger-tint-2
+
+/* Text Colors */
+--color-text-dark
+--color-text-base
+--color-text-light
+--color-text-lighter
+--color-text-xlight
+--color-text-danger
+
+/* Foreground Colors */
+--color-foreground-xdark
+--color-foreground-dark
+--color-foreground-base
+--color-foreground-light
+--color-foreground-xlight
+
+/* Background Colors */
+--color-background-dark
+--color-background-medium
+--color-background-base
+--color-background-light
+--color-background-xlight
+```
+
+#### Spacing
+```css
+--spacing-5xs: 2px
+--spacing-4xs: 4px
+--spacing-3xs: 6px
+--spacing-2xs: 8px
+--spacing-xs: 12px
+--spacing-s: 16px
+--spacing-m: 20px
+--spacing-l: 24px
+--spacing-xl: 32px
+--spacing-2xl: 48px
+--spacing-3xl: 64px
+--spacing-4xl: 128px
+--spacing-5xl: 256px
+```
+
+#### Typography
+```css
+--font-size-3xs: 10px
+--font-size-2xs: 12px
+--font-size-xs: 13px
+--font-size-s: 14px
+--font-size-m: 16px
+--font-size-l: 18px
+--font-size-xl: 20px
+--font-size-2xl: 28px
+
+--font-line-height-compact: 1.25
+--font-line-height-regular: 1.3
+--font-line-height-loose: 1.35
+--font-line-height-xloose: 1.5
+
+--font-weight-regular: 400
+--font-weight-bold: 600
+--font-family: InterVariable, sans-serif
+```
+
+#### Borders
+```css
+--border-radius-small: 2px
+--border-radius-base: 4px
+--border-radius-large: 8px
+--border-radius-xlarge: 12px
+
+--border-width-base: 1px
+--border-style-base: solid
+--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base)
+```
+