// Edit or add component theme classes and styles for base and carbon variants. Use when changing component appearance, Tailwind classes, theme tokens, Divider/Button themes, or files matching *.theme.ts.
Add a new Vue component to @indielayer/ui with themes, tests, docs, and registry exports. Use when creating a new component, adding X-prefixed components, or scaffolding under packages/ui/src/components.
Prepare @indielayer/ui changes for release with changesets and conventional commits. Use when versioning, publishing, changelog, semver, or before merging user-facing library changes.
Create or update component documentation pages in packages/ui/docs. Use when adding docs, demos, DocumentPage, usage.vue, or component doc routes.
| name | component-theme |
| description | Edit or add component theme classes and styles for base and carbon variants. Use when changing component appearance, Tailwind classes, theme tokens, Divider/Button themes, or files matching *.theme.ts. |
| disable-model-invocation | true |
For component <Name>:
theme/<Name>.base.theme.tstheme/<Name>.carbon.theme.tsImport *Theme from ../<Name>.vue.
const theme: ButtonTheme = {
classes: {
wrapper({ props, slots, data }) { return ['...'] },
},
styles({ props, colors, css, data }) { /* CSS variables */ },
}
export default theme
Export in both:
packages/ui/src/themes/base/components.tspackages/ui/src/themes/carbon/components.tsKey must match the theme name used in useTheme('<Name>', ...).
When changing layout, states, or tokens in one variant, apply the same logical change to the other unless the carbon design intentionally differs.
Reference: packages/ui/src/components/button/theme/Button.base.theme.ts