You can customize the styling of the editor and the plugins by overriding the design tokens the library exposes.
Color Tokens
Background Colors
| Token | Value | Description |
|---|
--ngx-traak-color-background-brand | #1d4ed8 | Primary brand background color |
--ngx-traak-color-background-brand-hovered | #eff6ff | Hover state for brand background |
--ngx-traak-color-background-neutral | #4b5563 | Neutral background color |
--ngx-traak-color-background-neutral-hovered | #f3f4f6 | Hover state for neutral background |
--ngx-traak-background-surface | #ffffff | Surface background color |
Border Colors
| Token | Value | Description |
|---|
--ngx-traak-color-border-neutral | #e5e5e5 | Neutral border color |
Text Colors
| Token | Value | Description |
|---|
--ngx-traak-color-text-on-surface | #4b5563 | Text color on surface background |
Effects
| Token | Value | Description |
|---|
--ngx-traak-shadow | #0000000d 0 4px 10px | Standard shadow effect |
Layout
| Token | Value | Description |
|---|
--ngx-traak-menu-width | 170px | Standard menu width |
--ngx-traak-editor-width | 50vw | Standard editor width (50% of viewport width) |
--ngx-traak-editor-height | 90vh | Standard editor height (90% of viewport height) |
Spacing
NGX-Traak uses a consistent spacing scale from 0-10:
| Token | Value | Description |
|---|
--ngx-traak-space-0 | 4px | Extra small spacing |
--ngx-traak-space-1 | 8px | Small spacing |
--ngx-traak-space-2 | 16px | Medium spacing |
--ngx-traak-space-3 | 24px | - |
--ngx-traak-space-4 | 32px | Large spacing |
--ngx-traak-space-5 | 40px | - |
--ngx-traak-space-6 | 48px | Extra large spacing |
--ngx-traak-space-7 | 56px | - |
--ngx-traak-space-8 | 64px | - |
--ngx-traak-space-9 | 72px | - |
--ngx-traak-space-10 | 80px | - |
Typography
| Token | Value | Description |
|---|
--ngx-traak-font-family | Inter, sans-serif | Standard font family |