Package Exports
- @rokkit/themes
- @rokkit/themes/base
- @rokkit/themes/base/breadcrumbs
- @rokkit/themes/base/button
- @rokkit/themes/base/card
- @rokkit/themes/base/carousel
- @rokkit/themes/base/connector
- @rokkit/themes/base/display
- @rokkit/themes/base/floating-action
- @rokkit/themes/base/floating-navigation
- @rokkit/themes/base/graph-paper
- @rokkit/themes/base/grid
- @rokkit/themes/base/index
- @rokkit/themes/base/input
- @rokkit/themes/base/item
- @rokkit/themes/base/list
- @rokkit/themes/base/menu
- @rokkit/themes/base/pill
- @rokkit/themes/base/progress
- @rokkit/themes/base/range
- @rokkit/themes/base/rating
- @rokkit/themes/base/reveal
- @rokkit/themes/base/search-filter
- @rokkit/themes/base/select
- @rokkit/themes/base/shine
- @rokkit/themes/base/stepper
- @rokkit/themes/base/switch
- @rokkit/themes/base/table
- @rokkit/themes/base/tabs
- @rokkit/themes/base/tilt
- @rokkit/themes/base/timeline
- @rokkit/themes/base/toggle
- @rokkit/themes/base/toolbar
- @rokkit/themes/base/tree
- @rokkit/themes/base/upload-progress
- @rokkit/themes/base/upload-target
- @rokkit/themes/glass
- @rokkit/themes/glass/button
- @rokkit/themes/glass/card
- @rokkit/themes/glass/floating-action
- @rokkit/themes/glass/floating-navigation
- @rokkit/themes/glass/index
- @rokkit/themes/glass/input
- @rokkit/themes/glass/list
- @rokkit/themes/glass/menu
- @rokkit/themes/glass/range
- @rokkit/themes/glass/search-filter
- @rokkit/themes/glass/select
- @rokkit/themes/glass/switch
- @rokkit/themes/glass/table
- @rokkit/themes/glass/tabs
- @rokkit/themes/glass/timeline
- @rokkit/themes/glass/toggle
- @rokkit/themes/glass/toolbar
- @rokkit/themes/glass/tree
- @rokkit/themes/material
- @rokkit/themes/material/button
- @rokkit/themes/material/card
- @rokkit/themes/material/floating-action
- @rokkit/themes/material/floating-navigation
- @rokkit/themes/material/index
- @rokkit/themes/material/input
- @rokkit/themes/material/list
- @rokkit/themes/material/menu
- @rokkit/themes/material/range
- @rokkit/themes/material/search-filter
- @rokkit/themes/material/select
- @rokkit/themes/material/switch
- @rokkit/themes/material/table
- @rokkit/themes/material/tabs
- @rokkit/themes/material/timeline
- @rokkit/themes/material/toggle
- @rokkit/themes/material/toolbar
- @rokkit/themes/material/tree
- @rokkit/themes/minimal
- @rokkit/themes/minimal/button
- @rokkit/themes/minimal/card
- @rokkit/themes/minimal/floating-action
- @rokkit/themes/minimal/floating-navigation
- @rokkit/themes/minimal/index
- @rokkit/themes/minimal/input
- @rokkit/themes/minimal/list
- @rokkit/themes/minimal/menu
- @rokkit/themes/minimal/range
- @rokkit/themes/minimal/search-filter
- @rokkit/themes/minimal/select
- @rokkit/themes/minimal/switch
- @rokkit/themes/minimal/table
- @rokkit/themes/minimal/tabs
- @rokkit/themes/minimal/timeline
- @rokkit/themes/minimal/toggle
- @rokkit/themes/minimal/toolbar
- @rokkit/themes/minimal/tree
- @rokkit/themes/rokkit
- @rokkit/themes/rokkit/button
- @rokkit/themes/rokkit/card
- @rokkit/themes/rokkit/connector
- @rokkit/themes/rokkit/floating-action
- @rokkit/themes/rokkit/floating-navigation
- @rokkit/themes/rokkit/grid
- @rokkit/themes/rokkit/index
- @rokkit/themes/rokkit/input
- @rokkit/themes/rokkit/list
- @rokkit/themes/rokkit/menu
- @rokkit/themes/rokkit/range
- @rokkit/themes/rokkit/search-filter
- @rokkit/themes/rokkit/select
- @rokkit/themes/rokkit/switch
- @rokkit/themes/rokkit/table
- @rokkit/themes/rokkit/tabs
- @rokkit/themes/rokkit/timeline
- @rokkit/themes/rokkit/toggle
- @rokkit/themes/rokkit/toolbar
- @rokkit/themes/rokkit/tree
- @rokkit/themes/rokkit/upload-progress
- @rokkit/themes/rokkit/upload-target
- @rokkit/themes/styles
Readme
@rokkit/themes
Theme styles for @rokkit/ui headless components.
Architecture
This package follows a headless component + themed styles pattern:
- Components (
@rokkit/ui) - Provide structure, behavior, and accessibility via data attributes - Themes (
@rokkit/themes) - Provide visual styling that targets those data attributes
Directory Structure
src/
├── base/ # Structural styles (layout, positioning)
│ ├── index.css # All base styles
│ └── menu.css # Menu structural styles
├── rokkit/ # Default theme (gradients + borders)
│ ├── index.css # All rokkit theme styles
│ └── menu.css # Menu themed styles
├── minimal/ # Clean + subtle theme
├── material/ # Elevation + shadows theme
├── glass/ # Blur + transparency theme
└── index.css # Main entry (imports base + all themes)Usage
Full Theme (base + all themes)
import '@rokkit/themes'Base Only (for custom theming)
import '@rokkit/themes/base'Rokkit Theme Only
import '@rokkit/themes/rokkit'Individual Component Styles
import '@rokkit/themes/base/menu.css'
import '@rokkit/themes/rokkit/menu.css'Data Attributes
Components use semantic data attributes for styling hooks:
Common Attributes
| Attribute | Values | Description |
|---|---|---|
data-size |
sm, md, lg |
Size variant |
data-disabled |
true |
Disabled state |
data-align |
left, right |
Alignment |
Menu-Specific Attributes
| Attribute | Description |
|---|---|
data-menu |
Menu container |
data-menu-trigger |
Trigger button |
data-menu-dropdown |
Dropdown panel |
data-menu-item |
Menu item |
data-menu-item-custom |
Custom snippet wrapper |
data-menu-group |
Group container |
data-menu-group-label |
Group header |
data-menu-divider |
Divider line |
data-menu-open |
Open state on container |
Theme Scoping
Rokkit is the default theme — its styles apply without any wrapper.
Other themes are scoped with data-style to allow switching:
<div data-style="minimal">
<!-- Components here use minimal theme -->
</div>For global application, set on the root element:
<html data-style="material"></html>Creating Custom Themes
- Copy
src/rokkit/tosrc/my-theme/ - Modify styles using same data attribute selectors
- Wrap selectors with
[data-style='my-theme']scope - Import your theme alongside or instead of rokkit
CSS Custom Properties
Themes use semantic CSS custom properties for consistency:
/* Surface colors (backgrounds) */
--surface-z0 through --surface-z10
/* Text colors */
--text-primary, --text-secondary, --text-muted
/* Interactive colors */
--primary, --primary-hover, --primary-active
/* State colors */
--success, --warning, --error, --info