diff --git a/docs/guides/using-theme-overrides.md b/docs/guides/using-theme-overrides.md index 83ef3e58c7..a7e6dad751 100644 --- a/docs/guides/using-theme-overrides.md +++ b/docs/guides/using-theme-overrides.md @@ -180,3 +180,209 @@ type: example ``` + +### Branding (user customizable theming) + +The `canvas` theme has specific theme variables that are meant as a basis to provide end users a customizability of this theme, e.g. a university can use their own colors throughout the UI. This is used by [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). + +> `canvas-high-contrast` does not have this functionality, so a11y color contrast requirements (e.g. [WCAG](https://webaim.org/articles/contrast/)) are always met + +```ts +--- +type: example +--- +const Example = () => { + // global stuff + const [icBrandPrimary, setIcBrandPrimary] = useState(canvas['ic-brand-primary']) + const [icBrandFontColorDark, setIcBrandFontColorDark] = useState(canvas['ic-brand-font-color-dark']) + // Link + const [icLinkColor, setIcLinkColor] = useState(canvas['ic-link-color']) + const [icLinkDecoration, setIcLinkDecoration] = useState(canvas['ic-link-decoration']) + // Button + const [icBrandButtonPrimaryBgd, setIcBrandButtonPrimaryBgd] = useState(canvas['ic-brand-button--primary-bgd']) + const [icBrandButtonPrimaryText, setIcBrandButtonPrimaryText] = useState(canvas['ic-brand-button--primary-text']) + const [icBrandButtonSecondaryBgd, setIcBrandButtonSecondaryBgd] = useState(canvas['ic-brand-button--secondary-bgd']) + const [icBrandButtonSecondaryText, setIcBrandButtonSecondaryText] = useState(canvas['ic-brand-button--secondary-text']) + // SideNavBar + const [icBrandGlobalNavBgd, setIcBrandGlobalNavBgd] = useState(canvas['ic-brand-global-nav-bgd']) + const [icGlobalNavLinkHover, setIcGlobalNavLinkHover] = useState(canvas['ic-global-nav-link-hover']) + const [icBrandGlobalNavIcIconSvgFill, setIcBrandGlobalNavIcIconSvgFill] = useState(canvas['ic-brand-global-nav-ic-icon-svg-fill']) + const [icBrandGlobalNavIcIconSvgFillActive, setIcBrandGlobalNavIcIconSvgFillActive] = useState(canvas['ic-brand-global-nav-ic-icon-svg-fill--active']) + const [icBrandGlobalNavMenuItemTextColor, setIcBrandGlobalNavMenuItemTextColor] = useState(canvas['ic-brand-global-nav-menu-item__text-color']) + const [icBrandGlobalNavMenuItemTextColorActive, setIcBrandGlobalNavMenuItemTextColorActive] = useState(canvas['ic-brand-global-nav-menu-item__text-color--active']) + + return ( +
+

Common variables

+ + + setIcBrandPrimary(v)} + messages={[{text:'used for border/background/shadow/focus colors in many places',type:'hint'}]} /> + + + setIcBrandFontColorDark(v)} + messages={[{text:'used in lots of places for text color',type:'hint'}]} /> + + + +

Button branding

+ + + setIcBrandButtonPrimaryBgd(v)} + messages={[{text:"Used by 'primary' color buttons for background",type:'hint'}]} /> +
+ setIcBrandButtonPrimaryText(v)} + messages={[{text:"Used by 'primary' color buttons for text color",type:'hint'}]} /> + + + setIcBrandButtonSecondaryBgd(v)} + messages={[{text:'Unused in InstUI',type:'hint'}]} /> +
+ setIcBrandButtonSecondaryText(v)} + messages={[{text:'Unused in InstUI',type:'hint'}]}/> + + +
+ +
+ + + + + + + +