Theming
All SDK components use CSS custom properties for styling and render inside Shadow DOM. Override the defaults on the host element or a parent container to match your brand.
Basic Usage
css
hyphen-task-sidebar {
--hyphen-color-text: #1a1a1a;
--hyphen-color-bg: #ffffff;
--hyphen-color-border: #e5e5e5;
--hyphen-color-bg-hover: #f0f0f0;
--hyphen-font-family: 'Inter', sans-serif;
--hyphen-radius: 8px;
}
Properties set on a parent element cascade to all SDK components within it:
css
/* Apply to all components at once */
.ops-console {
--hyphen-font-family: 'Inter', sans-serif;
--hyphen-color-text: #1a1a1a;
--hyphen-color-bg: #ffffff;
--hyphen-radius: 8px;
}
Custom Properties Reference
Typography
| Property | Default | Description |
|---|---|---|
--hyphen-font-family |
System stack | Font family for all text |
--hyphen-font-size |
14px |
Base font size |
Colors
| Property | Default | Description |
|---|---|---|
--hyphen-color-text |
#1a1a1a |
Primary text |
--hyphen-color-text-secondary |
#6b6b6b |
Secondary text (labels, timestamps) |
--hyphen-color-bg |
#fff |
Component background |
--hyphen-color-bg-secondary |
#f7f7f7 |
Alternate background (table rows, sections) |
--hyphen-color-bg-hover |
#f0f0f0 |
Hover state background |
--hyphen-color-border |
#e5e5e5 |
Border color |
--hyphen-color-focus |
#000 |
Focus ring color |
--hyphen-color-error |
#dc2626 |
Error states and destructive actions |
--hyphen-color-success |
#16a34a |
Success states and confirmations |
Layout
| Property | Default | Description |
|---|---|---|
--hyphen-radius |
6px |
Border radius for cards and inputs |
--hyphen-shadow |
0 1px 2px rgba(0,0,0,0.05) |
Card shadow |
Dark Mode
Override the color properties to implement dark mode:
css
@media (prefers-color-scheme: dark) {
.ops-console {
--hyphen-color-text: #e5e5e5;
--hyphen-color-text-secondary: #a0a0a0;
--hyphen-color-bg: #1a1a1a;
--hyphen-color-bg-secondary: #2a2a2a;
--hyphen-color-bg-hover: #333333;
--hyphen-color-border: #404040;
--hyphen-color-focus: #e5e5e5;
--hyphen-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
}
Per-Component Overrides
Each component can be styled independently:
css
/* Compact sidebar */
hyphen-task-sidebar {
--hyphen-font-size: 13px;
--hyphen-radius: 4px;
}
/* Larger data grid */
hyphen-data-grid {
--hyphen-font-size: 15px;
}
Shadow DOM Isolation
Components render inside Shadow DOM. This means:
- Your page styles don't leak in. A
table { border: 2px solid red }rule on your page won't affect the data grid. - Component styles don't leak out. SDK styles won't interfere with your page layout.
- CSS custom properties pass through. This is the only way to style SDK components — by design.
You cannot target internal elements with external CSS selectors (like hyphen-data-grid td). Use the custom properties listed above for all styling customization.