cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-11 19:25:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed Grammatical structure, need revision for intent possibly.

Nikhil Nagarajan 2025-12-06 16:59:48 -05:00
parent f78e8be006
commit fe1038b8ab
1 changed files with 23 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

64
Theming-and-Style-Rules.md

@ -1,8 +1,8 @@
# 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.
This page is dedicated to help community developers who want to develop their modules using Foundryborne's (Daggerheart Game System) style and design rules. This page will guide on how one can access these styles and provide guidance in order to use them in their 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.
In order to use the styles, Developers need to setup reference to the `.dh-style` class into their application. It is strongly recommended to use `applicationV2` and `dialogv2` since the version 1 will be depreciated soon in future FoundryVTT releases.
```js
const { ActorSheetV2 } = foundry.applications.sheets;
@ -31,7 +31,7 @@ export class YourBaseActorSheet extends HandlebarsApplicationMixin(ActorSheetV2)
}
```
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
At this point, the module will be using the game system style but, be aware that the styles are applied into the html elements, so it may have some conflicts with some styles that was already build into the module.
### Summary
- [Style Rules](#style-rules)
@ -41,42 +41,24 @@ At this point your module will be using the game system style, be aware the styl
- [Dialogs Layout](#dialogs-layout)
# Style Rules
Once applied the class in your application or dialog, things should be appear styled, since most of style is applied directly into the html elements, styles are applied in foundry templates too like `inputForm` and `inputGroup` for example.
Once applied the class in the module's application or dialog, things should appear to be styled since most of style is applied directly into the html elements. Styles are applied in foundry templates too like `inputForm` and `inputGroup` for example.
The styles should be enough to most use but feel free to adjust the size of fonts, weight or the flex-direction of the label and form input to fit in you project.
The styles should be enough for most use cases but feel free to adjust the size of fonts, weights or the flex-direction of the label and form input to fit in the module project.
The style designed to this system is made to keep the identity of Daggerheart material, but not equal because this game system is not associated or have a directly correlation with Darringnton Press. This style was made with three words in mind: fancy, fantasy and modern. In the next topics you will be guided about some rules you should follow when work in your modules.
The style designed for this system is made to keep the identity of Daggerheart material, but it is not representative because this game system is not associated or have a directly correlation with Darrington Press. This style was made with three words in mind: fancy, fantasy and modern. The following topics will provide guidance about some rules one should follow when implementing their modules.
# Colors
The system comes with some colors and variations based on opacity, most of them are already applied in most of elements and they follow a principle of three color, where one is the main colors and the other are there to complement the main one. Each dark and light theme follow this principle to guide and color rules at the system.
The system comes with some colors and variations based on opacity by default and most of them are already applied in nearly all elements and they follow the principle of three colors, where one is the main color and the others are there to complement the main one. Each dark and light theme follow this principle to guide and provide color rules for the system.
<img width="auto" height="280" alt="Colors" src="https://github.com/user-attachments/assets/42793e22-c2c1-4d94-bfd2-cd2cbdc469ee" />
Maybe in some situation one may need to use the colors in their CSS file. To access these colors, the developers can use the CSS variable where they can check by clicking [here](https://github.com/Foundryborne/daggerheart/blob/main/styles/less/utils/colors.less).
Maybe in some situation will need to use the colors in your css file for some reason, to access this colors you can use css variable where you can check clicking [here](https://github.com/Foundryborne/daggerheart/blob/main/styles/less/utils/colors.less).
There are some ways to setup the dark and light theme for colors, but for simplicity we suggest using the CSS method `light-dark()` to keep things simple.
There is some ways to setting the dark and light theme for colors, but to simplicity i suggest use the css method `light-dark()` to keep things simple
> To theming colors in chat messages, it is a work that is difficult because one would need to look at the classes where `light-dark()` method don´t work due to interface theming and works only in applications and dialog.
> To theming colors in chat messages is a work more hard because you need to look at the classes, `light-dark()` method don´t work to interface theming, only applications
Here some example to use colors:
```css
h1 {
// first light color, then dark color
colors: light-dark(var(--golden), var(--dark-blue));
}
```
The system comes with some colors and variations based on opacity, most of them are already applied in most of elements and they follow a principle of three color, where one is the main colors and the other are there to complement the main one. Each dark and light theme follow this principle to guide and color rules at the system.
<img width="400" height="280" alt="Colors" src="https://github.com/user-attachments/assets/42793e22-c2c1-4d94-bfd2-cd2cbdc469ee" />
Maybe in some situation will need to use the colors in your css file for some reason, to access this colors you can use css variable where you can check clicking [here](https://github.com/Foundryborne/daggerheart/blob/main/styles/less/utils/colors.less).
There is some ways to setting the dark and light theme for colors, but to simplicity i suggest use the css method `light-dark()` to keep things simple
> To theming colors in chat messages is a work more hard because you need to look at the classes, `light-dark()` method don´t work to interface theming, only applications
Here some example to use colors:
Here some example to use the colors stated above:
```css
h1 {
@ -85,11 +67,11 @@ h1 {
}
```
The typography was chosen to bring the `fancy` pillar in the design. similar to colors, it was applied a rule of three to build the hierarchy of fonts to be used in most of applications, the font size still can be adjusted to fit in your project.
The typography was chosen to bring the `fancy` pillar in the system design. Similar to colors, it was applied to the rule of three to build the hierarchy of fonts to be used in most of applications. The font size can be adjusted to fit in the module project.
<img width="200" height="280" alt="Font Family" src="https://github.com/user-attachments/assets/c61fb42a-43af-4bb8-ac7d-579404eafba8" />
<img width="auto" height="280" alt="Font Family" src="https://github.com/user-attachments/assets/c61fb42a-43af-4bb8-ac7d-579404eafba8" />
Using the typography is just need to use the html elements, here is listed the elements and the font-family used to each element and a suggestion to font-size to apply on them.
In order to use the typography, one can use the html elements by default. Given below is the list of the elements and the font-family used for each element with respective suggestions to font-size.
```css
h1 {
@ -128,24 +110,24 @@ li {
```
# Applications Layouts
In this style system it comes with some guides to build the layouts to make usage and use as a reference for you future applications modules. The header in this system style was changed to fit less space like the usual header in foundry applications.
In this page we provide some guides to build the layouts to make usage and use as a reference for future applications modules. The header style in this system was changed to fit less space like the usual header in foundry applications.
The header was changed to fit in this style, removing the title of header, keeping only the button controls, and moving to a absolute position, so the window content can get more space and use of the available space, and in environments and cards case, to have a more approach of a usual card style.
Hence sometimes the header was changed to fit in this style by removing the title of header, keeping only the button controls, and moving them to an absolute position, so that the window content can get more space and use out of the available space. And in environments and loadout cards use case, it was to align the approach of a usual card system.
All golden lines represents the borders of each part, and should be added in the application as well, thickness of 1px and solid, dashed lines represent the limit between the section inside of each application.
All golden lines represents the borders of each part, and should be added in the application as well with thickness of 1px and solid. Dashed lines represent the limit between the section inside of each application.
<img width="627" height="562" alt="Applications Layouts" src="https://github.com/user-attachments/assets/e7f604af-8267-4e84-9e63-e09d87e44c7c" />
<img width="auto" height="562" alt="Applications Layouts" src="https://github.com/user-attachments/assets/e7f604af-8267-4e84-9e63-e09d87e44c7c" />
# Dialogs Layout
Dialogs are more freely to the developer choose the layout for fit the porpoise of the module, so must rules here are for styles.
Dialogs are usually left freely to the developers to choose the layout fit for the purpose of the module. But so must the rules here for styles.
Different from the [Applications Layouts](#applications-layouts) the header in dialogs have a title and a icon together, the icons used comes from https://fontawesome.com/ library, optionally you can not add the title in the header if you think the title inside the dialog is more then enough to use.
They are different from the [Applications Layouts](#applications-layouts) where the header in dialogs have a title and a icon together, the icons used comes from https://fontawesome.com/ library, optionally one may not add the title in the header if the title inside the dialog is more than enough to describe.
<img width="641" height="552" alt="Dialog Layout" src="https://github.com/user-attachments/assets/7de27084-a431-4454-9f42-0520eca5812c" />
<img width="auto" height="552" alt="Dialog Layout" src="https://github.com/user-attachments/assets/7de27084-a431-4454-9f42-0520eca5812c" />
### Building a dialog
Here is simple example to show how you can build your own dialog using foundryborne design system.
Here is a simple example to show how developers can build their own dialog using Foundryborne design system.
```js
static async openDialog(_, button) {