TaskBoard - Theming
Separate TaskBoard structural styles, theme variables, UI-part styles, and state hooks.
#Style Imports
import '@primeui/taskboard-style/style.css';
import '@primeui/taskboard-style/themes/primeone.css';style.css contains structural layout, public classes, and CSS variable usage. themes/primeone.css supplies PrimeOne token values for those variables. Import both before copied UI-part styles.
Add copied PrimeOne UI-part styles after the runtime styles when the CLI-installed parts need their component CSS.
import '@/components/primeui/taskboard/assets/style/components.css';#Structural Variables
| Variable group | Use |
|---|---|
--p-taskboard-background, --p-taskboard-color, --p-taskboard-border-radius | Root surface, text, and shell shape. |
--p-taskboard-column-gap, --p-taskboard-card-gap, --p-taskboard-columns-padding, --p-taskboard-column-body-padding, --p-taskboard-column-footer-padding | Layout spacing. |
--p-taskboard-column-min-width, --p-taskboard-column-max-width, --p-taskboard-column-header-min-height | Column sizing and header height. |
--p-taskboard-column-background, --p-taskboard-column-border-radius | Column surface and shape. |
--p-taskboard-card-border-radius, --p-taskboard-card-selected-ring-color, --p-taskboard-card-selected-shadow, --p-taskboard-card-focus-shadow | Card shape, selected state, and focus. |
--p-taskboard-drop-indicator-color, --p-taskboard-drag-preview-shadow, --p-taskboard-drag-preview-rotation | Drag preview and drop marker. |
--p-taskboard-focus-ring-color, --p-taskboard-focus-ring-width | Focus ring. |
--p-taskboard-column-status-todo-color, --p-taskboard-column-status-in-progress-color, --p-taskboard-column-status-done-color, --p-taskboard-column-status-blocked-color | Column status accents. |
--p-taskboard-swimlane-header-width, --p-taskboard-swimlane-min-height, --p-taskboard-swimlane-cell-min-height, --p-taskboard-swimlane-border-color | Swimlane layout and borders. |
--p-taskboard-scrollbar-width, --p-taskboard-scrollbar-thumb, --p-taskboard-scrollbar-track | Board and column scrollbars. |
--p-taskboard-transition-duration, --p-taskboard-transition-timing, --p-taskboard-animation-duration | Runtime motion timing. |
Demo helper variables such as --p-taskboard-demo-control-* support showcase controls and are not required for application boards.
#Density and State Classes
Density values add p-taskboard-density-compact, p-taskboard-density-standard, or p-taskboard-density-comfortable on the root. Runtime state classes describe selected, dragging, focused, filtered, collapsed, pinned, locked, WIP warning, WIP exceeded, RTL, and print state. Print hooks include the active body state, the printing root, and marked ancestors so app shells do not clip the board. Use those hooks for board-level styling and keep product card markup inside slots or UI parts.
Scope product overrides to a local class on TaskBoard.Root so multiple boards can use different density, color, or swimlane treatments on the same page.
#UI Parts
PrimeOne copied parts ship component CSS for card, advanced card, column header, swimlane header, and swimlane column header. Tailwind copied parts keep most styling in utility classes. Both layers remain editable app code after the CLI copies them. Context menus and dialogs use the app's overlay components and styles.