docs: update branding example#2575
Open
git-nandor wants to merge 3 commits into
Open
Conversation
|
Visual regression report✅ No changes.
Baselines come from the |
git-nandor
force-pushed
the
rework-documentation
branch
from
e713885 to
ced0fb5
Compare
git-nandor
changed the title
git-nandor
force-pushed
the
INSTUI-4993_update_branding_example
branch
from
4f5eb03 to
c75c014
Compare
matyasf
requested changes
Jun 9, 2026
matyasf
left a comment
matyasf
left a comment
Collaborator
There was a problem hiding this comment.
Looks good. Can you also port the same examples to new-theme-overrides.md too?
git-nandor
force-pushed
the
rework-documentation
branch
from
1c6da87 to
01baa9e
Compare
git-nandor
force-pushed
the
INSTUI-4993_update_branding_example
branch
from
c75c014 to
50a4f82
Compare
matyasf
requested changes
Jun 12, 2026
Comment on lines
+606
to
+618
| The new theming system exposes the equivalents of the legacy Canvas `ic-brand-*` variables under `semantics.color.institutional.*`. Overriding these has the same broad effect as Canvas's [Theme Editor](https://community.canvaslms.com/t5/Admin-Guide/How-do-I-create-a-theme-for-an-account-using-the-Theme-Editor/ta-p/242) — the Button family, `SideNavBar`, `Link`, `Billboard`, and several other components consume them automatically. | ||
|
|
||
| | Legacy variable | New semantic token | | ||
| | --------------------------------------------------- | --------------------------------------- | | ||
| | `ic-brand-primary` | `brandPrimary` | | ||
| | `ic-brand-font-color-dark` | `brandFontColorDark` | | ||
| | `ic-link-color` | `linkColor` | | ||
| | `ic-brand-button--primary-bgd` | `brandButtonPrimaryBgd` | | ||
| | `ic-brand-button--primary-text` | `brandButtonPrimaryText` | | ||
| | `ic-brand-global-nav-bgd` | `brandGlobalNavBgd` | | ||
| | `ic-global-nav-link-hover` | `globalNavLinkHover` | | ||
| | `ic-brand-global-nav-menu-item__text-color` | `brandGlobalNavMenuItemTextColor` | | ||
| | `ic-brand-global-nav-menu-item__text-color--active` | `brandGlobalNavMenuItemTextColorActive` | |
Collaborator
There was a problem hiding this comment.
hmm this should be mentioned in the upgrade guide too!
| type: example | ||
| --- | ||
| const Example = () => { | ||
| const [brandPrimary, setBrandPrimary] = useState(canvas['ic-brand-primary']) |
Collaborator
There was a problem hiding this comment.
I dont understand this code, shouldnt we here be reading brandPrimary?
| </Flex.Item> | ||
| </Flex> | ||
| <hr style={{width:'100%', margin:'2rem 0 1rem'}}/> | ||
| <InstUISettingsProvider theme={canvas}> |
Collaborator
There was a problem hiding this comment.
AFAIK we should not hardcode Canvas here (and in other examples). The point here is to show, that branding overrides work in the new canvas and light theme
| ``` | ||
|
|
||
| ### 15. Branding (user customizable theming) | ||
|
|
Collaborator
There was a problem hiding this comment.
I would also mention here, that its only possible to override in the legacy canvas and the light theme. Branding is coming soon to the dark theme, and it will never be avaialbe in the high contrast theme(s) because their point is to always have high contrast
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
INSTUI-4993
Summary
Update Legacy theme overrides doc page Branding section.
Co-Authored-By: 🤖 Claude