diff --git a/docs/theming/legacy-theme-overrides.md b/docs/theming/legacy-theme-overrides.md index 7a118e0624..0a8825da1a 100644 --- a/docs/theming/legacy-theme-overrides.md +++ b/docs/theming/legacy-theme-overrides.md @@ -387,203 +387,260 @@ The `canvas` theme has specific theme variables that are meant as a basis to pro > `canvas-high-contrast` does not have this functionality, so a11y color contrast requirements (e.g. [WCAG](https://webaim.org/articles/contrast/)) are always met +Some of these branding variables — notably `ic-brand-primary` — intentionally affect many components (focus rings, tab indicators, secondary button borders, etc.) because they serve as the primary brand color hooks in the `canvas` theme. + +However, a small number of `canvas` theme branding variables are not currently consumed by any InstUI component, so changing them has no visible effect: `ic-brand-button--secondary-bgd`, `ic-brand-button--secondary-text`, `ic-link-decoration`. + +#### Common variables — broad-impact branding + +`ic-brand-primary` is the main brand color hook. It is used for borders, backgrounds, focus rings, shadows and similar accents in many components (Tabs active indicator, secondary `Button` border, `TextInput` focus ring, etc.). `ic-brand-font-color-dark` is the default dark text color used in many places. + ```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/focus/shadow/.. colors in many places',type:'hint'}]} /> + setIcBrandPrimary(v)} + messages={[{text:'border/background/focus/shadow colors in many components',type:'hint'}]} + /> - setIcBrandFontColorDark(v)} - messages={[{text:'used in lots of places for text color',type:'hint'}]} /> + setIcBrandFontColorDark(v)} + messages={[{text:'default text color in many components',type:'hint'}]} + /> - + +
+ + + + + + + + + + + + + + + +
+ ) +} + +render() +``` + +#### `Button` branding + +These variables only affect the `primary` color `Button`. -

Button branding

+```ts +--- +type: example +--- +const Example = () => { + const [icBrandButtonPrimaryBgd, setIcBrandButtonPrimaryBgd] = useState(canvas['ic-brand-button--primary-bgd']) + const [icBrandButtonPrimaryText, setIcBrandButtonPrimaryText] = useState(canvas['ic-brand-button--primary-text']) + + return ( +
- 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'}]} /> + setIcBrandButtonPrimaryBgd(v)} + messages={[{text:"primary Button background",type:'hint'}]} + /> - setIcBrandButtonSecondaryBgd(v)} - messages={[{text:'Unused in InstUI',type:'hint'}]} /> -
- setIcBrandButtonSecondaryText(v)} - messages={[{text:'Unused in InstUI',type:'hint'}]}/> + setIcBrandButtonPrimaryText(v)} + messages={[{text:"primary Button text color",type:'hint'}]} + /> + + +
+ + + +
+ ) +} + +render() +``` + +#### `Link` and `Billboard` branding + +`ic-link-color` sets the color of non-inverse `Link` and of clickable `Billboard`. + +```ts +--- +type: example +--- +const Example = () => { + const [icLinkColor, setIcLinkColor] = useState(canvas['ic-link-color']) + + return ( +
+ + + setIcLinkColor(v)} + messages={[{text:'used by non-inverse Link and clickable Billboard',type:'hint'}]} + /> -
- -
- - - - - - - - - - - -