Skip to content

WIP refactor(many): allow overriding semantic theme layer in new components#2487

Open
matyasf wants to merge 2 commits intomasterfrom
allow_semantic_override
Open

WIP refactor(many): allow overriding semantic theme layer in new components#2487
matyasf wants to merge 2 commits intomasterfrom
allow_semantic_override

Conversation

@matyasf
Copy link
Copy Markdown
Collaborator

@matyasf matyasf commented Mar 24, 2026 •
edited
Loading

To test: This override should work in v11.7

const AppExample = () => {
  canvas.newTheme.semantics.fontFamily.heading= "monospace"
  return (
    <InstUISettingsProvider theme={canvas}>
      <Heading level="h3">
        I have monospace font family from the override
      </Heading>
    </InstUISettingsProvider>
  )
}

render(<AppExample />)

does NOT work:

  • semantics override
  • primitives override

@matyasf matyasf self-assigned this Mar 24, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 24, 2026 •
edited
Loading

PR Preview Action v1.8.1

QR code for preview link

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

Built to branch gh-pages at 2026-03-24 19:13 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@matyasf
refactor(many): type themeOverride correctly for v2 components, remov…
342c979 
…e FormFieldLabel from v2

FormFieldLabel was deprecated
remove a not needed themeOverride from ColopPicker since its doing nothing now

INSTUI-4971
matyasf
matyasf commented Mar 24, 2026
View reviewed changes
packages/emotion/src/useStyle.ts
Comment on lines +85 to +87
baseComponentTheme = theme.newTheme.components[
componentWithTokensId as keyof NewComponentTypes
](theme.newTheme.semantics)
Copy link
Copy Markdown
Collaborator Author

@matyasf matyasf Mar 24, 2026

Choose a reason for hiding this comment

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

This is the main fix. Now themes are arrow functions and their value is calculated here, so overrides in the code can take effect

matyasf
matyasf commented Mar 24, 2026
View reviewed changes
packages/ui-alerts/src/Alert/v2/props.ts

type AlertProps = AlertOwnProps &
WithStyleProps<AlertTheme, AlertStyle> &
WithStyleProps<ReturnType<NewComponentTypes['Alert']>, AlertStyle> &
Copy link
Copy Markdown
Collaborator Author

@matyasf matyasf Mar 24, 2026

Choose a reason for hiding this comment

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

Another fix -- now the themeOverride object is typed properly in new components

@matyasf matyasf requested a review from HerrTopi March 26, 2026 10:03
@ToMESSKa ToMESSKa mentioned this pull request Apr 1, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@HerrTopi HerrTopi Awaiting requested review from HerrTopi

At least 2 approving reviews are required to merge this pull request.

Assignees

@matyasf matyasf

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@matyasf