mirror of
https://github.com/simstudioai/sim.git
synced 2026-02-15 00:44:56 -05:00
2daf34386e
* feat(claude): added rules * fix(copilot): chat loading; refactor(copilot): components, utils, hooks * fix(copilot): options selection strikethrough * fix(copilot): options render inside thinking * fix(copilot): checkpoints, user-input; improvement(code): colors * fix(copilot): scrolling, tool-call truncation, thinking ui * fix(copilot): tool call spacing and shimmer/actions on previous messages * improvement(copilot): queue * addressed comments
42 lines
826 B
Markdown
42 lines
826 B
Markdown
---
|
|
paths:
|
|
- "apps/sim/**/*.tsx"
|
|
- "apps/sim/**/*.css"
|
|
---
|
|
|
|
# Styling Rules
|
|
|
|
## Tailwind
|
|
|
|
1. **No inline styles** - Use Tailwind classes
|
|
2. **No duplicate dark classes** - Skip `dark:` when value matches light mode
|
|
3. **Exact values** - `text-[14px]`, `h-[26px]`
|
|
4. **Transitions** - `transition-colors` for interactive states
|
|
|
|
## Conditional Classes
|
|
|
|
```typescript
|
|
import { cn } from '@/lib/utils'
|
|
|
|
<div className={cn(
|
|
'base-classes',
|
|
isActive && 'active-classes',
|
|
disabled ? 'opacity-60' : 'hover:bg-accent'
|
|
)} />
|
|
```
|
|
|
|
## CSS Variables
|
|
|
|
For dynamic values (widths, heights) synced with stores:
|
|
|
|
```typescript
|
|
// In store
|
|
setWidth: (width) => {
|
|
set({ width })
|
|
document.documentElement.style.setProperty('--sidebar-width', `${width}px`)
|
|
}
|
|
|
|
// In component
|
|
<aside style={{ width: 'var(--sidebar-width)' }} />
|
|
```
|