"Extending" Themes

[kitsonk]

User Story

As a developer, I need a clear pattern for extending themes, taking an existing theme and adding additional widget classes, additional styles to widgets, and potentially overriding some of the theme styles.

Specific Use Case

I have a corporate theme which has been provided. Our project requires that we add/adjust some of the styles for our project, therefore I need to extend that base theme. I do not expect to utilise !important to achieve this.

[tomdye]

I believe that in this situation you would take the corporate theme as a base. In your new theme you would re-export the parts of the base theme that you want to use as-is and would utilise compose to customise and change the theme for particular components.

example

/* base/theme.ts */
import * as textInput from './textInput.m.css';
import * as button from './button.m.css';

export default {
   textInput,
   button
};

/* custom/theme.ts */
import * as textInput from '../base/textInput.m.css'; // use base textInput theme
import * as button from './button.m.css'; // use custom button style

export default {
   textInput,
   button
};

/* custom/button.m.css */
.root {
   /* use root class from base theme */
   composes 'root' from '../base/button.m.css'; 
}

.text {
   /* provide new text class */
   color: red;
}

[bitpshr]

Thanks for the explanation @tomdye. I like the idea of exporting a custom theme that either explicitly exports base component styles as-is, or exports custom styles that use @composes to extend the base styles. I like that this can be on a per-component basis, too. I also think that potential tooling developed as part of #276 could ease the pain of knowing what classes must be extended if passing custom styles.

I think this information should be captured in a tutorial.

Action items:

• Create a ticket to add a tutorial for this content Theme tutorial: add info about extending themes dojo.io#292