mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-11 19:25:21 +01:00
Updated Theming and Style Rules (markdown)
Murilo Brito
parent
322f0b3746
commit
f78e8be006
1 changed files with 143 additions and 2 deletions
|
|
@ -33,5 +33,146 @@ 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
|
||||
|
||||
### Next Pages
|
||||
[[Style Rules]]
|
||||
### Summary
|
||||
- [Style Rules](#style-rules)
|
||||
- [Colors](#colors)
|
||||
- [Typography](#typography)
|
||||
- [Applications Layouts](#applications-layouts)
|
||||
- [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.
|
||||
|
||||
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 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.
|
||||
|
||||
# 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.
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
```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:
|
||||
|
||||
```css
|
||||
h1 {
|
||||
// first light color, then dark color
|
||||
colors: light-dark(var(--golden), var(--dark-blue));
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
<img width="200" 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.
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-family: 'Cinzel Decorative';
|
||||
// font-size 32px for Applications
|
||||
// font-size 24px for Dialog and Chat
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
font-family: 'Cinzel';
|
||||
// font-size 20px for Applications
|
||||
// font-size 16px for Dialog and Chat
|
||||
}
|
||||
|
||||
h4, h5 {
|
||||
font-family: 'Montserrat';
|
||||
// font-size 16px for Applications
|
||||
// font-size 16px for Dialog and Chat
|
||||
}
|
||||
|
||||
p,
|
||||
span,
|
||||
textarea,
|
||||
label,
|
||||
select,
|
||||
table,
|
||||
fieldset legend,
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='search'],
|
||||
li {
|
||||
font-family: 'Montserrat';
|
||||
// font-size 14px for Applications
|
||||
// font-size 14px for Dialog and Chat
|
||||
}
|
||||
```
|
||||
|
||||
# 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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
<img width="627" 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.
|
||||
|
||||
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.
|
||||
|
||||
<img width="641" 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.
|
||||
|
||||
```js
|
||||
static async openDialog(_, button) {
|
||||
const confirmed = await DialogV2.confirm({
|
||||
window: {
|
||||
title: 'Title',
|
||||
icon: 'fa-solid fa-user'
|
||||
},
|
||||
content: 'content.hbs',
|
||||
// 'daggerheart', 'dialog' and 'dh-style' must be included to styles work proprely
|
||||
classes: ['daggerheart', 'dialog', 'dh-style', 'module']
|
||||
});
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
{{!-- content.hbs --}}
|
||||
<section id="your-dialog-sectionn">
|
||||
{{!-- you can include the title using coping this element --}}
|
||||
<header class="dialog-header">
|
||||
<h1>Dialog Title</h1>
|
||||
</header>
|
||||
|
||||
{{!-- your content --}}
|
||||
</section>
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue