diff --git a/Theming-and-Style-Rules.md b/Theming-and-Style-Rules.md new file mode 100644 index 0000000..0337c8e --- /dev/null +++ b/Theming-and-Style-Rules.md @@ -0,0 +1,37 @@ +# Getting Started +This page is dedicated to help community developers how wants develop their modules using Daggerheart Game System style and design rules, this page will guide to how you can access this styles and guidance to use them in your applications. + +## Using style in Applications +To use the styles you need to reference the `.dh-style` class into your application, it's strongly recommended to use `aplicationV2` and `dialogv2` since the versions 1 will be depreciated soon. + +```js +const { ActorSheetV2 } = foundry.applications.sheets; +const { DialogV2 } = foundry.applications.api; + +export class YourBaseActorSheet extends HandlebarsApplicationMixin(ActorSheetV2) { + static DEFAULT_OPTIONS = { + classes: ['daggerheart', 'module', 'application', 'dh-style'], + // ... + } + + static async openDialog(_, button) { + const confirmed = await DialogV2.confirm({ + window: { + title: 'Title', + icon: 'fa-solid fa-user' + }, + content: 'Lorem Ipsum', + classes: ['daggerheart', 'module', 'dialog', 'dh-style'] + }); + + if (!confirmed) return; + + // ... + } +} +``` + +At this point your module will be using the game system style, be aware the styles are applied into the html elements, so it may have some conflicts with some styles you already build into your module + +### Next Pages +[[Style Rules]] \ No newline at end of file