Feature/custom user styles

src/config.ts

@@ -42,6 +42,11 @@ export interface FatexConfig {
 
     global: {
         useMarkdown: boolean;
+        styles: {
+            name: string;
+            customProperty: string;
+            defaultValue: string;
+        }[];
     };
 }
 
@@ -73,5 +78,52 @@ export const FateX: FatexConfig = {
     },
     global: {
         useMarkdown: false,
-    },
+        styles: [
+            {
+                name: "buttonShadowColor",
+                customProperty: "--fatex-button-shadow-color",
+                defaultValue: "#a0a0a0"
+            },
+            {
+                name: "headerBackgroundColor",
+                customProperty: "--fatex-header-color",
+                defaultValue: "#2f3542"
+            },
+            {
+                name: "headerTextColor",
+                customProperty: "--fatex-header-text-color",
+                defaultValue: "#ffffff"
+            },
+            {
+                name: "mainShadowColor",
+                customProperty: "--fatex-main-shadow-color",
+                defaultValue: "#2f3542"
+            },
+            {
+                name: "primarySheetColor",
+                customProperty: "--fatex-primary-color",
+                defaultValue: "#2f3542"
+            },
+            {
+                name: "scrollbarColor",
+                customProperty: "--fatex-scrollbar-color",
+                defaultValue: "#2f3542"
+            },
+            {
+                name: "sheetBackgroundColor",
+                customProperty: "--fatex-sheet-background-color",
+                defaultValue: "#f1f2f6"
+            },
+            {
+                name: "textColor1",
+                customProperty: "--fatex-text-color-1",
+                defaultValue: "#191813"
+            },
+            {
+                name: "textColor2",
+                customProperty: "--fatex-text-color-2",
+                defaultValue: "#ffffff"
+            }
+        ]
+    }
 };

src/fatex.ts

@@ -27,6 +27,7 @@ import { SkillSheet } from "./module/item/skill/SkillSheet";
 import { StressSheet } from "./module/item/stress/StressSheet";
 import { StuntSheet } from "./module/item/stunt/StuntSheet";
 import { TemplateActorsFeature } from "./module/features/TemplateActorsFeature";
+import { ThemeConfigurationFeature } from "./module/features/ThemeConfigurationFeature";
 import { GroupSheet } from "./module/actor/sheets/GroupSheet";
 import { ActorGroupFeature } from "./module/features/ActorGroupFeature";
 import { ReferenceSheet } from "./module/item/references/ReferenceSheet";
@@ -117,6 +118,7 @@ Hooks.once("init", async () => {
 /*	Register hooks      			*/
 /* -------------------------------- */
 TemplateActorsFeature.hooks();
+ThemeConfigurationFeature.hooks()
 ActorGroupFeature.hooks();
 
 /* -------------------------------- */

src/module/components/Configuration/ThemeConfiguration.ts

@@ -0,0 +1,102 @@
+// @ts-nocheck
+
+export class ThemeConfig extends FormApplication {
+    currentStyles: { [key: string]: string | undefined };
+    changesSaved: boolean;
+
+    constructor() {
+        super();
+        this.currentStyles = $(":root").css(CONFIG.FateX.global.styles.map((x) => x.customProperty));
+        this.changesSaved = false;
+    }
+
+    static get defaultOptions() {
+        return mergeObject(super.defaultOptions, {
+            title: "Theme Configuration",
+            id: "themeConfig",
+            template: "/systems/fatex/templates/apps/theme-config.hbs",
+            width: 600,
+            height: "auto",
+            closeOnSubmit: true,
+        } as BaseEntitySheet.Options);
+    }
+
+    async _updateObject() {
+        const updates = CONFIG.FateX.global.styles.reduce((properties, style) => {
+            const key = `flags.fatex.${style.name}`;
+            properties[key] = $(":root").css(style.customProperty) ?? style.defaultValue;
+
+            return properties;
+        }, {});
+
+        return game.user.update(updates);
+    }
+
+    activateListeners(html: JQuery<HTMLElement>) {
+        super.activateListeners(html);
+
+        html.find(`[type="color"]`).on("change", this.onChange.bind(this));
+        html.find(`button[name="reset"]`).on("click", this.reset.bind(this));
+        html.find(`button[name="submit"]`).on("click", this.saveChanges.bind(this));
+        html.find(`button[name="cancel"]`).on("click", this.close.bind(this));
+    }
+
+    getData(options?: Application.RenderOptions): FormApplication.Data<Record<string, unknown>, FormApplication.Options> {
+        const customPropertyValues = $(":root").css(CONFIG.FateX.global.styles.map((x) => x.customProperty));
+
+        // Create a new object where the custom property values are assigned to keys
+        // matching the component names used in the templates and default styles config.
+        const customProperties = Object.assign(
+            ...CONFIG.FateX.global.styles.map(({ name, customProperty }) => ({ [name]: customPropertyValues[customProperty] }))
+        );
+
+        // Filter out any custom properties which are currently undefined.
+        const definedCustomProperties = Object.fromEntries(Object.entries(customProperties).filter(([_, value]) => value !== undefined));
+
+        const defaultStyles = Object.assign(...CONFIG.FateX.global.styles.map(({ name, defaultValue }) => ({ [name]: defaultValue })));
+
+        // Create a new object where the default styles fill in any values not defined
+        // by CSS custom properties.
+        const currentValues = { ...defaultStyles, ...definedCustomProperties };
+
+        return mergeObject(super.getData(options), currentValues);
+    }
+
+    onChange(event: JQuery.Event) {
+        const newValue = event.currentTarget.value;
+        const componenetName = $(event.currentTarget).data("edit");
+        const customProperty = CONFIG.FateX.global.styles.find((x) => x.name === componenetName)?.customProperty;
+
+        // Update the custom property associated with the colour selector to the chosen value.
+        $(":root").css(customProperty, newValue);
+    }
+
+    reset() {
+        // Loop over the custom properties in the config file and set each of them
+        // to "unset". This will cause the fallback values to take effect, which
+        // align with the system defaults.
+        CONFIG.FateX.global.styles.forEach(({ customProperty }) => {
+            $(":root").css(customProperty, "unset");
+        });
+
+        // Rerender the sheet so that the default styles will be applied due to the
+        // lack of set custom properties.
+        this.render();
+    }
+
+    saveChanges() {
+        this.changesSaved = true;
+    }
+
+    async close(options?: FormApplication.CloseOptions): Promise<void> {
+        if (!this.changesSaved) {
+            // Loops over the user's original property values and undoes any changes
+            // they've made. Exiting via the save button will prevent this reset.
+            for (const [property, value] of Object.entries(this.currentStyles)) {
+                $(":root").css(property, value ?? "unset");
+            }
+        }
+
+        await super.close(options);
+    }
+}

src/module/features/ThemeConfigurationFeature.ts

@@ -0,0 +1,13 @@
+export class ThemeConfigurationFeature {
+    static hooks() {
+        Hooks.once("ready", () => {
+            // Set user defined CSS custom properties
+            CONFIG.FateX.global.styles.forEach(({ name, customProperty }) => {
+                // Retrieve the value stored in a user flag is there is one.
+                const value = game?.user?.getFlag("fatex", name) as string | undefined;
+
+                $(":root").css(customProperty, value ?? "unset");
+            })
+        });
+    }
+}

src/module/helper/Settings.ts

@@ -1,5 +1,16 @@
+import { ThemeConfig } from "../components/Configuration/ThemeConfiguration";
+
 export class FateXSettings {
     static registerSettings() {
+        game.settings.registerMenu("fatex", "theme", {
+            name: "Theme Settings",
+            label: "Configure Theme",
+            hint: "Allows a user to select custom color schemes for the FateX interface.",
+            icon: "fas fa-cog",
+            type: ThemeConfig,
+            restricted: false
+        });
+
         game.settings.register("fatex", "enableAlphaFeatures", {
             name: game.i18n.localize("FAx.Settings.System.Alpha.Name"),
             hint: game.i18n.localize("FAx.Settings.System.Alpha.Hint"),
@@ -9,4 +20,4 @@ export class FateXSettings {
             default: false,
         });
     }
-}
+}

src/styles/abstract/mixins.scss

@@ -3,7 +3,7 @@
     position: absolute;
     top: -1px;
     left: -1px;
-    border-top: $size solid #f1f2f6;
+    border-top: $size solid $fatex-sheet-background-color;
     border-right: $size solid transparent;
 }
 
@@ -12,7 +12,7 @@
     position: absolute;
     top: -1px;
     right: -1px;
-    border-top: $size solid #f1f2f6;
+    border-top: $size solid $fatex-sheet-background-color;
     border-left: $size solid transparent;
 }
 
@@ -21,7 +21,7 @@
     position: absolute;
     bottom: -1px;
     right: -1px;
-    border-bottom: $size solid #f1f2f6;
+    border-bottom: $size solid $fatex-sheet-background-color;
     border-left: $size solid transparent;
 }
 

src/styles/abstract/variables.scss

@@ -2,16 +2,16 @@
 $component-padding: 10px;
 
 // Colors
-$primary-color: rgba(47, 53, 66, 1);
+$primary-color: #2f3542;
 
-$sheet-background: rgb(241, 242, 246);
+$sheet-background: #f1f2f6;
 $message-background: transparentize($primary-color, 0.7);
 
 $primary-text-color: #191813;
 $light-text-color: #fff;
 
-$caution-color: rgb(242, 22, 40);
-$shadow-color: rgb(160, 160, 160);
+$caution-color: #f21628;
+$shadow-color: #a0a0a0;
 
 // Fonts
 $primary-font: "Montserrat", sans-serif;
@@ -21,3 +21,11 @@ $fatex-header-color: var(--fatex-header-color, $primary-color);
 $fatex-header-text-color: var(--fatex-header-text-color, $light-text-color);
 
 $fatex-primary-color: var(--fatex-primary-color, $primary-color);
+$fatex-sheet-background-color: var(--fatex-sheet-background-color, $sheet-background);
+
+$fatex-text-color-1: var(--fatex-text-color-1, $primary-text-color);
+$fatex-text-color-2: var(--fatex-text-color-2, $light-text-color);
+
+$fatex-main-shadow-color: var(--fatex-main-shadow-color, $primary-color);
+$fatex-button-shadow-color: var(--fatex-button-shadow-color, $shadow-color);
+$fatex-scrollbar-color: var(--fatex-scrollbar-color, $primary-color);

src/styles/base/foundry-ui.scss

@@ -4,10 +4,9 @@
 
 .window-app .window-content,
 #chat-log .message,
-#chat-form textarea,
 #chat-controls div.roll-type-select select,
-.sidebar-tab .directory-header .header-search input,
-#chat-form .cm-s-easymde {
-    background: $sheet-background;
-    color: var(--fatex-primary-text-color, $primary-text-color);
+#chat-form .cm-s-easymde,
+.chat-message .message-header {
+    background: $fatex-sheet-background-color;
+    color: $fatex-text-color-1;
 }

src/styles/components/actions.scss

@@ -4,7 +4,7 @@
     align-items: center;
     gap: 10px;
     height: 100%;
-    text-shadow: 1px 1px 2px $shadow-color;
+    text-shadow: 1px 1px 2px $fatex-button-shadow-color;
     pointer-events: none;
     z-index: 4;
 
@@ -58,7 +58,7 @@
         gap: 0;
         font-size: 16px;
         color: $fatex-primary-color;
-        text-shadow: 1px -1px 1px $sheet-background;
+        text-shadow: 1px -1px 1px $fatex-sheet-background-color;
     }
 
     &__icon {
@@ -92,12 +92,12 @@
 .fatex-js-edit-mode {
     .fatex-actions--headline,
     .fatex-actions--skill {
-        background: linear-gradient(90deg, rgba(47, 53, 66, 0) 0%, #2f3542 33%, #2f3542 100%);
+        background: linear-gradient(90deg, transparent, $fatex-primary-color 33%, $fatex-primary-color 100%);
     }
 
     .fatex-actions--item,
     .fatex-actions--section-heading {
-        background: linear-gradient(90deg, transparentize($sheet-background, 1) 0%, $sheet-background 33%, $sheet-background 100%);
+        background: linear-gradient(90deg, transparent 0%, $fatex-sheet-background-color 33%, $fatex-sheet-background-color 100%);
     }
 
     .fatex-actions__icon {

src/styles/components/actor-group/actor-group.scss

@@ -38,7 +38,7 @@
     font-weight: bold;
     text-transform: uppercase;
     font-size: 13px;
-    box-shadow: 1px 1px 1px $shadow-color;
+    box-shadow: 1px 1px 1px $fatex-button-shadow-color;
 
     &.active,
     &:hover {

src/styles/components/apps/setup.scss

@@ -75,7 +75,7 @@
         border: 1px solid $fatex-primary-color;
         border-radius: 3px;
         margin-right: $component-padding;
-        color: var(--fatex-light-text-color, $light-text-color);
+        color: $fatex-text-color-2;
         font-size: 11px;
         text-align: center;
     }

src/styles/components/checkbox.scss

@@ -14,7 +14,7 @@
         transform: translate(-60%, -40%);
         font-weight: 900;
         font-size: 24px;
-        text-shadow: 1px 1px 1px $sheet-background;
+        text-shadow: 1px 1px 1px $fatex-sheet-background-color;
     }
 
     &__icon {

src/styles/components/desk.scss

@@ -19,7 +19,6 @@
     &__content {
         grid-area: content;
         overflow-y: auto;
-        scrollbar-width: thin;
 
         &--app {
             padding: $component-padding;
@@ -49,7 +48,7 @@
 
     &__sidebar {
         min-width: 240px;
-        box-shadow: 12px 0 15px 0 $fatex-primary-color;
+        box-shadow: 12px 0 15px 0 $fatex-main-shadow-color;
     }
 
     &__tabloid {

src/styles/components/dialog.scss

@@ -7,7 +7,7 @@
 
     .window-content {
         padding: $component-padding;
-        background: $sheet-background;
+        background: $fatex-sheet-background-color;
     }
 
     .dialog-buttons {

src/styles/components/header.scss

@@ -9,7 +9,7 @@
     font-size: 23px;
     color: $fatex-header-text-color;
     background: $fatex-header-color;
-    box-shadow: 0 2px 15px 0 $fatex-header-color;
+    box-shadow: 0 2px 15px 0 $fatex-main-shadow-color;
     z-index: 5;
 
     &__combine {