Skip to content

Custom component theming#2530

Open
HerrTopi wants to merge 4 commits intomasterfrom
custom-component-theming
Open

Custom component theming#2530
HerrTopi wants to merge 4 commits intomasterfrom
custom-component-theming

Conversation

@HerrTopi
Copy link
Copy Markdown
Contributor

@HerrTopi HerrTopi commented Apr 28, 2026

Summary

Enables consumers to build their own components on top of InstUI's new theming system by passing a generateComponentTheme function directly to useStyleNew / withStyleNew, instead of requiring the component theme to be pre-registered in the theme object.

  • useStyleNew and withStyleNew now accept an optional generateComponentTheme parameter. When provided, it receives { primitives, semantics, sharedTokens } and returns the component theme — so consumer-authored components can derive their own tokens from InstUI's theming primitives without modifying the theme.
  • Renames so the public API matches the long-term plan:
    • useStyleLegacyuseStyle (kept stable for old-theme consumers)
    • useStyle (new theming) → useStyleNew
    • withStyleLegacywithStyle
    • withStyle (new theming) → withStyleNew
  • All v1 (legacy theme) and v2 (new theme) component sources are updated to import from the renamed entry points. Contributor docs and the new-theme-overrides guide are updated to reference useStyleNew.

Test plan

  • Start pnpm run dev, open the docs app, and spot-check a few v2 components (e.g. Avatar, Button, RadioInput, TextInput, Tooltip, View) — they render correctly under the default theme and respect themeOverride via InstUISettingsProvider and prop-level overrides
  • Verify a consumer flow: render a custom component that calls useStyleNew with its own generateComponentTheme (pass a component theme to any component to try) and confirm that:
    • tokens are derived from the active InstUI theme's primitives/semantics/sharedTokens
    • themeOverride prop and InstUISettingsProvider components overrides are applied on top of the consumer-provided base theme
  • Confirm existing v1 components (legacy theme) still render unchanged after the useStyleLegacy → useStyle / withStyleLegacy → withStyle rename

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 28, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2530/

Built to branch gh-pages at 2026-05-06 08:26 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@HerrTopi HerrTopi force-pushed the custom-component-theming branch from 48b1e3f to 1d40756 Compare April 28, 2026 10:03
@HerrTopi HerrTopi force-pushed the custom-component-theming branch from 1d40756 to ad47fc5 Compare April 29, 2026 11:49
@HerrTopi HerrTopi self-assigned this Apr 29, 2026
@HerrTopi HerrTopi requested a review from matyasf May 5, 2026 11:26
… definition so they can build their own components with InstUI
@HerrTopi HerrTopi force-pushed the custom-component-theming branch from 9147b01 to 74c76a5 Compare May 6, 2026 08:22
Comment thread CHANGELOG.md

## [11.7.2](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2) (2026-04-23)


Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the change here?

Comment thread packages/ui/CHANGELOG.md
Comment on lines +10 to +18
- **many:** small fixes for doc and fix component directory mapping in "dev" script ([39f0c99](https://github.com/instructure/instructure-ui/commit/39f0c991315e39d30e1f24b3142b986d5b9041ee))

### Features

* **ui,ui-options,ui-drilldown:** rework Drilldown ([0562fe2](https://github.com/instructure/instructure-ui/commit/0562fe2b43e3235fc78c4981ada504c1a2f10d1a))

- **ui,ui-options,ui-drilldown:** rework Drilldown ([0562fe2](https://github.com/instructure/instructure-ui/commit/0562fe2b43e3235fc78c4981ada504c1a2f10d1a))

### BREAKING CHANGES

* **ui,ui-options,ui-drilldown:** the component got a new version in this release
- **ui,ui-options,ui-drilldown:** the component got a new version in this release
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are there these changes?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants