alighasami
3d5eaf9445
Security: Sync from Public / sync-from-public (push) Has been cancelled
Test: Benchmark Nightly / build (push) Has been cancelled
Test: Benchmark Nightly / Notify Cats on failure (push) Has been cancelled
CI: Python / Checks (push) Has been cancelled
Test: Evals Python / Workflow Comparison Python (push) Has been cancelled
Util: Check Docs URLs / check-docs-urls (push) Has been cancelled
Test: Visual Storybook / Cloudflare Pages (push) Has been cancelled
Test: E2E Performance / build-and-test-performance (push) Has been cancelled
Test: Workflows Nightly / Run Workflow Tests (push) Has been cancelled
Util: Cleanup CI Docker Images / Delete stale CI images (push) Has been cancelled
Test: Benchmark Destroy Env / build (push) Has been cancelled
Util: Update Node Popularity / update-popularity (push) Has been cancelled
Test: E2E Coverage Weekly / Coverage Tests (push) Has been cancelled
129 lines
2.6 KiB
Markdown
129 lines
2.6 KiB
Markdown
# AGENTS.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-2
|
|
|
|
/* Success Colors */
|
|
--color--success--shade-1
|
|
--color--success
|
|
--color--success--tint-1
|
|
--color--success--tint-2
|
|
--color--success--tint-3
|
|
--color--success--tint-4
|
|
|
|
/* 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-3
|
|
--color--danger--tint-4
|
|
|
|
/* Text Colors */
|
|
--color--text--shade-1
|
|
--color--text
|
|
--color--text--tint-1
|
|
--color--text--tint-2
|
|
--color--text--tint-3
|
|
--color--text--danger
|
|
|
|
/* Foreground Colors */
|
|
--color--foreground--shade-2
|
|
--color--foreground--shade-1
|
|
--color--foreground
|
|
--color--foreground--tint-1
|
|
--color--foreground--tint-2
|
|
|
|
/* Background Colors */
|
|
--color--background--shade-2
|
|
--color--background--shade-1
|
|
--color--background
|
|
--color--background--light-2
|
|
--color--background--light-3
|
|
```
|
|
|
|
#### Spacing
|
|
```css
|
|
--spacing--5xs: 2px
|
|
--spacing--4xs: 4px
|
|
--spacing--3xs: 6px
|
|
--spacing--2xs: 8px
|
|
--spacing--xs: 12px
|
|
--spacing--sm: 16px
|
|
--spacing--md: 20px
|
|
--spacing--lg: 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--sm: 14px
|
|
--font-size--md: 16px
|
|
--font-size--lg: 18px
|
|
--font-size--xl: 20px
|
|
--font-size--2xl: 28px
|
|
|
|
--line-height--sm: 1.25
|
|
--line-height--md: 1.3
|
|
--line-height--lg: 1.35
|
|
--line-height--xl: 1.5
|
|
|
|
--font-weight--regular: 400
|
|
--font-weight--bold: 600
|
|
--font-family: InterVariable, sans-serif
|
|
```
|
|
|
|
#### Borders
|
|
```css
|
|
--radius--sm: 2px
|
|
--radius: 4px
|
|
--radius--lg: 8px
|
|
--radius--xl: 12px
|
|
|
|
--border-width: 1px
|
|
--border-style: solid
|
|
--border: var(--border-width) var(--border-style) var(--color--foreground)
|
|
```
|
|
|
|
### Debounce Timing
|
|
|
|
Use centralized constants from `@/app/constants/durations` instead of hardcoding:
|
|
|
|
```typescript
|
|
import { DEBOUNCE_TIME, getDebounceTime } from '@/app/constants';
|
|
|
|
useDebounceFn(() => { ... }, getDebounceTime(DEBOUNCE_TIME.INPUT.SEARCH));
|
|
```
|
|
|
|
Categories: `UI`, `INPUT`, `API`, `TELEMETRY`, `COLLABORATION`, `CONNECTION`.
|