Skip to content

Commit 1ea6ce5

Browse files
git-nandorgit-nandor
committed
docs: update new theme override branding examples
1 parent b9d06e1 commit 1ea6ce5

1 file changed

Lines changed: 98 additions & 13 deletions

File tree

‎docs/theming/new-theme-overrides.md‎

Lines changed: 98 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -605,6 +605,13 @@ type: example
605605
606606
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.
607607

608+
> **Theme support for branding:**
609+
>
610+
> - **`canvas` (legacy)** — branding overrides are supported.
611+
> - **`light`** — branding support is coming soon.
612+
> - **`dark`** — branding support is coming soon.
613+
> - **High-contrast themes** — branding will **never** be available, by design. These themes maintain WCAG-compliant color contrast at all times, so user-customizable colors cannot override them.
614+
608615
| Legacy variable | New semantic token |
609616
| --------------------------------------------------- | --------------------------------------- |
610617
| `ic-brand-primary` | `brandPrimary` |
@@ -633,11 +640,32 @@ A handful of legacy variables are not in the new system, for two different reaso
633640
type: example
634641
---
635642
const Example = () => {
636-
const [brandPrimary, setBrandPrimary] = useState(canvas['ic-brand-primary'])
637-
const [brandFontColorDark, setBrandFontColorDark] = useState(canvas['ic-brand-font-color-dark'])
643+
// Branding overrides work the same way across all new-system themes.
644+
// Switch the "Base theme" selector to verify the override applies to canvas, light, and dark.
645+
const themes = { canvas, light }
646+
const [themeName, setThemeName] = useState('canvas')
647+
648+
const defaults = canvas.newTheme.semantics(canvas.newTheme.primitives).color.institutional
649+
const [brandPrimary, setBrandPrimary] = useState(defaults.brandPrimary)
650+
const [brandFontColorDark, setBrandFontColorDark] = useState(defaults.brandFontColorDark)
638651
639652
return (
640653
<div>
654+
<View as="div" margin="0 0 small">
655+
<SimpleSelect
656+
renderLabel="Base theme"
657+
value={themeName}
658+
onChange={(_e, { value }) => setThemeName(value)}
659+
>
660+
<SimpleSelect.Option id="canvas" value="canvas">canvas</SimpleSelect.Option>
661+
<SimpleSelect.Option id="light" value="light" isDisabled>
662+
light (coming soon)
663+
</SimpleSelect.Option>
664+
<SimpleSelect.Option id="dark" value="dark" isDisabled>
665+
dark (coming soon)
666+
</SimpleSelect.Option>
667+
</SimpleSelect>
668+
</View>
641669
<Flex gap="small">
642670
<Flex.Item size="45%">
643671
<TextInput
@@ -657,7 +685,7 @@ const Example = () => {
657685
</Flex.Item>
658686
</Flex>
659687
<hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
660-
<InstUISettingsProvider theme={canvas}>
688+
<InstUISettingsProvider theme={themes[themeName]}>
661689
<InstUISettingsProvider
662690
themeOverride={{
663691
semantics: {
@@ -700,11 +728,30 @@ These semantics only affect the `primary` color `Button`.
700728
type: example
701729
---
702730
const Example = () => {
703-
const [brandButtonPrimaryBgd, setBrandButtonPrimaryBgd] = useState(canvas['ic-brand-button--primary-bgd'])
704-
const [brandButtonPrimaryText, setBrandButtonPrimaryText] = useState(canvas['ic-brand-button--primary-text'])
731+
const themes = { canvas, light }
732+
const [themeName, setThemeName] = useState('canvas')
733+
734+
const defaults = canvas.newTheme.semantics(canvas.newTheme.primitives).color.institutional
735+
const [brandButtonPrimaryBgd, setBrandButtonPrimaryBgd] = useState(defaults.brandButtonPrimaryBgd)
736+
const [brandButtonPrimaryText, setBrandButtonPrimaryText] = useState(defaults.brandButtonPrimaryText)
705737
706738
return (
707739
<div>
740+
<View as="div" margin="0 0 small">
741+
<SimpleSelect
742+
renderLabel="Base theme"
743+
value={themeName}
744+
onChange={(_e, { value }) => setThemeName(value)}
745+
>
746+
<SimpleSelect.Option id="canvas" value="canvas">canvas</SimpleSelect.Option>
747+
<SimpleSelect.Option id="light" value="light" isDisabled>
748+
light (coming soon)
749+
</SimpleSelect.Option>
750+
<SimpleSelect.Option id="dark" value="dark" isDisabled>
751+
dark (coming soon)
752+
</SimpleSelect.Option>
753+
</SimpleSelect>
754+
</View>
708755
<Flex gap="small">
709756
<Flex.Item size="45%">
710757
<TextInput
@@ -724,7 +771,7 @@ const Example = () => {
724771
</Flex.Item>
725772
</Flex>
726773
<hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
727-
<InstUISettingsProvider theme={canvas}>
774+
<InstUISettingsProvider theme={themes[themeName]}>
728775
<InstUISettingsProvider
729776
themeOverride={{
730777
semantics: {
@@ -753,10 +800,29 @@ render(<Example/>)
753800
type: example
754801
---
755802
const Example = () => {
756-
const [linkColor, setLinkColor] = useState(canvas['ic-link-color'])
803+
const themes = { canvas, light }
804+
const [themeName, setThemeName] = useState('canvas')
805+
806+
const defaults = canvas.newTheme.semantics(canvas.newTheme.primitives).color.institutional
807+
const [linkColor, setLinkColor] = useState(defaults.linkColor)
757808
758809
return (
759810
<div>
811+
<View as="div" margin="0 0 small">
812+
<SimpleSelect
813+
renderLabel="Base theme"
814+
value={themeName}
815+
onChange={(_e, { value }) => setThemeName(value)}
816+
>
817+
<SimpleSelect.Option id="canvas" value="canvas">canvas</SimpleSelect.Option>
818+
<SimpleSelect.Option id="light" value="light" isDisabled>
819+
light (coming soon)
820+
</SimpleSelect.Option>
821+
<SimpleSelect.Option id="dark" value="dark" isDisabled>
822+
dark (coming soon)
823+
</SimpleSelect.Option>
824+
</SimpleSelect>
825+
</View>
760826
<Flex gap="small">
761827
<Flex.Item size="60%">
762828
<TextInput
@@ -768,7 +834,7 @@ const Example = () => {
768834
</Flex.Item>
769835
</Flex>
770836
<hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
771-
<InstUISettingsProvider theme={canvas}>
837+
<InstUISettingsProvider theme={themes[themeName]}>
772838
<InstUISettingsProvider
773839
themeOverride={{
774840
semantics: {
@@ -809,13 +875,32 @@ These semantics control the `SideNavBar` background, hover state, and menu item
809875
type: example
810876
---
811877
const Example = () => {
812-
const [brandGlobalNavBgd, setBrandGlobalNavBgd] = useState(canvas['ic-brand-global-nav-bgd'])
813-
const [globalNavLinkHover, setGlobalNavLinkHover] = useState(canvas['ic-global-nav-link-hover'])
814-
const [brandGlobalNavMenuItemTextColor, setBrandGlobalNavMenuItemTextColor] = useState(canvas['ic-brand-global-nav-menu-item__text-color'])
815-
const [brandGlobalNavMenuItemTextColorActive, setBrandGlobalNavMenuItemTextColorActive] = useState(canvas['ic-brand-global-nav-menu-item__text-color--active'])
878+
const themes = { canvas, light }
879+
const [themeName, setThemeName] = useState('canvas')
880+
881+
const defaults = canvas.newTheme.semantics(canvas.newTheme.primitives).color.institutional
882+
const [brandGlobalNavBgd, setBrandGlobalNavBgd] = useState(defaults.brandGlobalNavBgd)
883+
const [globalNavLinkHover, setGlobalNavLinkHover] = useState(defaults.globalNavLinkHover)
884+
const [brandGlobalNavMenuItemTextColor, setBrandGlobalNavMenuItemTextColor] = useState(defaults.brandGlobalNavMenuItemTextColor)
885+
const [brandGlobalNavMenuItemTextColorActive, setBrandGlobalNavMenuItemTextColorActive] = useState(defaults.brandGlobalNavMenuItemTextColorActive)
816886
817887
return (
818888
<div>
889+
<View as="div" margin="0 0 small">
890+
<SimpleSelect
891+
renderLabel="Base theme"
892+
value={themeName}
893+
onChange={(_e, { value }) => setThemeName(value)}
894+
>
895+
<SimpleSelect.Option id="canvas" value="canvas">canvas</SimpleSelect.Option>
896+
<SimpleSelect.Option id="light" value="light" isDisabled>
897+
light (coming soon)
898+
</SimpleSelect.Option>
899+
<SimpleSelect.Option id="dark" value="dark" isDisabled>
900+
dark (coming soon)
901+
</SimpleSelect.Option>
902+
</SimpleSelect>
903+
</View>
819904
<Flex gap="small">
820905
<Flex.Item size="45%">
821906
<TextInput renderLabel="brandGlobalNavBgd" value={brandGlobalNavBgd} onChange={(e, v) => setBrandGlobalNavBgd(v)}/>
@@ -827,7 +912,7 @@ const Example = () => {
827912
</Flex.Item>
828913
</Flex>
829914
<hr style={{width:'100%', margin:'2rem 0 1rem'}}/>
830-
<InstUISettingsProvider theme={canvas}>
915+
<InstUISettingsProvider theme={themes[themeName]}>
831916
<InstUISettingsProvider
832917
themeOverride={{
833918
semantics: {

0 commit comments

Comments
 (0)