2.10.0

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 2.10.0
+
+- (New) Added a new application theme inspired by the modern Foundry design. Sheets with no explicit support will render as system default.
+
 # 2.9.1
 
 - (Maintenance) Update Polygot styling to be compatible with new-new-new-new version.

README.md

@@ -89,6 +89,10 @@ Image shows a journal with Dalvyn's CRB styled journals enabled.
 
 <img src="./promo/web/token-action-hud.jpg">
 
+#### Foundry 2 Application Theme
+
+<img src="./promo/web/foundry2-theme.jpg">
+
 ## Features
 
 Besides the theme, Dorako UI also has a bunch of UI-adjacent features, including:

languages/en.json

@@ -28,7 +28,8 @@
           "choice": {
             "no-theme": "No theme",
             "light-theme": "Light Dorako UI",
-            "dark-theme": "Dark Dorako UI"
+            "dark-theme": "Dark Dorako UI",
+            "foundry2-theme": "Foundry 2"
           }
         },
         "frosted-glass": {

module.json

@@ -111,6 +111,7 @@
     "modules/settings/settings.js",
     "modules/dark-theme-hooks.js",
     "modules/base-theme-hooks.js",
+    "modules/foundry2-theme.js",
     "modules/message-hooks.js",
     "modules/premium-module-hooks.js",
     "modules/consts.js",

modules/base-theme-hooks.js

@@ -4,6 +4,8 @@ import { baseThemeApplications, baseThemePf2eSheets, MODULE_NAME, premiumModuleS
 for (const appName of [...baseThemeApplications]) {
   Hooks.on("render" + appName, (app, html, data) => {
     if (app.constructor.name.startsWith("SWPF")) return; // SWPFCompendiumTOC, SWPFSheet
+    const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+    if (theme === "no-theme" || theme === "foundry2-theme") return;
     const excludeString = game.settings.get("pf2e-dorako-ui", "customization.excluded-applications");
     if (excludeString.toLowerCase().includes(appName.toLowerCase())) {
       console.debug(
@@ -75,7 +77,7 @@ Hooks.on("renderTokenActionHUD", (app, html, data) => {
 // Add .dorako-ui to all .dialog applications
 Hooks.on("renderDialog", (app, html, data) => {
   const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
-  if (theme === "no-theme") {
+  if (theme === "no-theme" || theme === "foundry2-theme") {
     console.debug(`${MODULE_NAME} | render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
     return;
   }
@@ -95,7 +97,7 @@ Hooks.on("renderApplication", (app, html, data) => {
   if (html0.classList.contains("dialog")) return;
   if (!html0.classList.contains("window-app")) return;
   const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
-  if (theme === "no-theme") {
+  if (theme === "no-theme" || theme === "foundry2-theme") {
     console.debug(`${MODULE_NAME} | render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
     return;
   }
@@ -119,7 +121,7 @@ for (const app of [...baseThemePf2eSheets]) {
     // if (!app.constructor.name.endsWith("PF2e")) return; <- SpellPreparationSheet doesn't end with PF2e
     if (!html0.classList.contains("window-app")) return;
     const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
-    if (theme === "no-theme") {
+    if (theme === "no-theme" || theme === "foundry2-theme") {
       return;
     }
     console.debug(
@@ -168,7 +170,7 @@ Hooks.on("renderCharacterSheetPF2e", (app, html, data) => {
 // Re-organize NPC sheets, do not apply base styling to selects or input fields
 Hooks.on("renderNPCSheetPF2e", (app, html, data) => {
   const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
-  if (theme === "no-theme") {
+  if (theme === "no-theme" || theme === "foundry2-theme") {
     console.debug(`${MODULE_NAME} | render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
     return;
   }

modules/dark-theme-hooks.js

@@ -10,7 +10,7 @@ import {
 // Supported dark theme
 function markAsDarkTheme(app, html) {
   const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
-  if (theme === "no-theme" || theme === "light-theme") return;
+  if (theme === "no-theme" || theme === "light-theme" || theme === "foundry2-theme") return;
   let html0 = html[0];
   if (html0.matches(premiumModuleSelector)) {
     console.debug(
@@ -26,7 +26,7 @@ function markAsDarkTheme(app, html) {
 // Critical hit/fumble deck
 Hooks.on("renderJournalSheetPF2e", (app, html) => {
   const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
-  if (theme === "no-theme") return;
+  if (theme === "no-theme" || theme === "foundry2-theme") return;
   if (!html[0].id.includes("JournalSheetPF2e-Compendium-pf2e-criticaldeck")) return;
   console.debug(
     `${MODULE_NAME} | renderJournalSheetPF2e | critical-hit-fumble-deck | theme: ${theme} => add .dorako-ui .dark-theme`

modules/foundry2-theme.js

@@ -0,0 +1,73 @@
+import { baseThemeApplications, baseThemePf2eSheets, MODULE_NAME, premiumModuleSelector } from "./consts.js";
+
+// Add .dorako-ui to all always-styled applications (Does not include pf2e sheets)
+for (const appName of [...baseThemeApplications]) {
+  Hooks.on("render" + appName, (app, html, data) => {
+    if (app.constructor.name.startsWith("SWPF")) return; // SWPFCompendiumTOC, SWPFSheet
+    const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+    if (theme !== "foundry2-theme") return;
+    const excludeString = game.settings.get("pf2e-dorako-ui", "customization.excluded-applications");
+    if (excludeString.toLowerCase().includes(appName.toLowerCase())) {
+      console.debug(
+        `${MODULE_NAME} | render${app.constructor.name} | is included in excluded applications string ${excludeString} => do not add .foundry2`
+      );
+      return;
+    }
+    console.debug(`${MODULE_NAME} | baseThemeApplications | render${app.constructor.name} => add .foundry2`);
+    html.addClass("foundry2");
+  });
+}
+
+Hooks.on("renderApplication", (app, html, data) => {
+  let html0 = html[0];
+  //   if (html0.classList.contains("dialog")) return;
+  if (html0.classList.contains("editable")) return;
+  if (!html0.classList.contains("window-app")) return;
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme !== "foundry2-theme") {
+    return;
+  }
+  const fakeDialogPatterns = ["popup", "dialog"];
+  for (const fakeDialogPattern of [...fakeDialogPatterns]) {
+    if (app.constructor.name.toLowerCase().includes(fakeDialogPattern)) {
+      console.debug(
+        `${MODULE_NAME} | render${app.constructor.name} | constructor includes '${fakeDialogPattern}' => add .dialog`
+      );
+      html.addClass("dialog");
+    }
+  }
+  html.addClass("foundry2");
+  //   app.options?.classes?.push("foundry2");
+  html.find("form button[type='submit']").addClass("bright");
+  html.find(".item-controls button[data-action='apply']").addClass("bright");
+  html.find("form button[data-action='save']").addClass("bright");
+  html.find("nav.sheet-tabs .item").addClass("button");
+});
+
+Hooks.on("renderDialog", (app, html, data) => {
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme !== "foundry2-theme") {
+    return;
+  }
+  console.debug(`${MODULE_NAME} | render${app.constructor.name} | pushing .foundry2 class option`);
+  html.addClass("foundry2");
+});
+
+Hooks.on("renderItemSheet", (app, html, data) => {
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme !== "foundry2-theme") {
+    return;
+  }
+  //   app.options?.classes?.push("foundry2");
+  html.addClass("foundry2");
+  html.find("form > nav a").addClass("button");
+});
+
+// Hooks.on("renderSettingsConfig", (app, html, data) => {
+//   const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+//   if (theme !== "foundry2-theme") {
+//     return;
+//   }
+
+//   html.find("form button[type='submit']").addClass("bright");
+// });

modules/misc-hooks.js

@@ -244,6 +244,28 @@ for (const application of ["Application", ...baseThemePf2eSheets]) {
     let titleElement = html.closest(".app").find(".window-title");
     openBtn.insertAfter(titleElement);
   });
+
+  Hooks.on("render" + application, (app, html, data) => {
+    if (!game.settings.get(`${MODULE_NAME}`, "misc.enable-debug-mode")) {
+      return;
+    }
+    let isFoundry2 = html[0].classList.contains("foundry2");
+    let symbol = isFoundry2 ? "fa-thin" : "fas";
+
+    let openBtn = $(
+      `<a class="header-button foundry2-toggle" alt="Toggle Foundry2" data-tooltip="Foundry2" data-tooltip-direction="UP">
+        <i class="fa-fw ${symbol} fa-f"></i>
+    </a>`
+    );
+    openBtn.click((ev) => {
+      html[0].classList.toggle("foundry2");
+      openBtn.find("i").toggleClass("fa-thin");
+      openBtn.find("i").toggleClass("fas");
+    });
+    html.closest(".app").find(".foundry2-toggle").remove();
+    let titleElement = html.closest(".app").find(".window-title");
+    openBtn.insertAfter(titleElement);
+  });
 }
 
 Hooks.once("ready", (app, html, data) => {

modules/premium-module-hooks.js

@@ -75,7 +75,7 @@ Hooks.on("renderApplication", (app, html, data) => {
   // TODO: This also triggers for SceneConfigPF2e
   if (isPremiumApplication(app, html, data, app.constructor.name)) return;
   const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
-  if (theme === "no-theme") {
+  if (theme === "no-theme" || theme == "foundry2-theme") {
     return;
   }
   console.debug(`${MODULE_NAME} | render${app.constructor.name} | is .window-app => add .dorako-ui`);

modules/settings/settings.js

@@ -68,6 +68,16 @@ Hooks.once("init", async () => {
     ChatRollPrivacy.init();
   }
 
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme === "foundry2-theme") {
+    document.querySelector("#tooltip").classList.add("foundry2");
+    $("#tooltip").attr("data-theme", "foundry2");
+    $("#fps").attr("data-theme", "foundry2");
+  } else if (theme !== "no-theme") {
+    $("#tooltip").attr("data-theme", "dorako-ui");
+    $("#fps").attr("data-theme", "dorako-ui");
+  }
+
   util.debug("registered settings");
 
   injectCSS("dorako-ui");

modules/settings/theme-settings.js

@@ -106,14 +106,9 @@ export class ThemeSettings extends SettingsMenuDorakoUI {
           "no-theme": "pf2e-dorako-ui.settings.theme.application-theme.choice.no-theme",
           "light-theme": "pf2e-dorako-ui.settings.theme.application-theme.choice.light-theme",
           "dark-theme": "pf2e-dorako-ui.settings.theme.application-theme.choice.dark-theme",
+          "foundry2-theme": "pf2e-dorako-ui.settings.theme.application-theme.choice.foundry2-theme",
         },
-        requiresReload: false, // re-render all windows
-        onChange: () => {
-          const apps = Object.values(ui.windows).filter((w) => w instanceof Application);
-          for (const app of apps) {
-            app.render();
-          }
-        },
+        requiresReload: true, // re-render all windows
       },
       "npc-sheet-theme": {
         name: "pf2e-dorako-ui.settings.theme.npc-sheet-theme.name",

sass/_colors.scss

@@ -139,9 +139,9 @@ $adjusted-lower: #cc3311 !default;
   --gold-and-glow: 0 0 0 1px var(--tertiary), 0 0 0 2px var(--gold-brown), inset 0 0 3px rgba(255, 255, 255, 0.5);
   --glassy: 0px 0px 3px 0px rgba(255, 255, 255, 0.4) inset, 0px 0px 2px 1px rgba(0, 0, 0, 1),
     0px 0px 5px 0px rgba(0, 0, 0, 0.5);
-  --glassy-sharp: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 0px 5px 1px rgba(0, 0, 0, 0.8);
+  --glassy-sharp: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 1px 5px 1px rgba(0, 0, 0, 0.8);
   --glassy-sharp-inset: 0px 0px 0px 1px rgba(255, 255, 255, 0.4) inset, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset;
-  --glassy-sharp-highlight: 0px 0px 0px 1px rgba(245, 222, 179, 0.7) inset, 0px 0px 5px 1px rgba(0, 0, 0, 0.8);
+  --glassy-sharp-highlight: 0px 0px 0px 1px rgba(245, 222, 179, 0.7) inset, 0px 1px 5px 1px rgba(0, 0, 0, 0.8);
   --sheet-light: url(../img/background-light.webp);
   --sheet-dark: url(../img/background-dark4.webp);
   --header: url(../img/blue-header.webp);

sass/_misc.scss

@@ -25,6 +25,8 @@ a.inline-roll:not(.inline-result) {
   }
 }
 
+.foundry2 .tags,
+.foundry2 .tags.paizo-style,
 .tah-tags-wrapper .tags,
 .dorako-ui .message-content .tags,
 .dorako-ui .tags.paizo-style,

sass/_mixins.scss

@@ -37,3 +37,14 @@
   background-image: var(--sheet);
   background-size: cover;
 }
+
+@mixin f2-app {
+  background-color: var(--app-background);
+  border: 1px solid var(--color-cool-3);
+  text-shadow: 0px 1px 2px black;
+  border-radius: var(--border-radius);
+  --box-shadow: 0px 1px 3px 1px black;
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  color: var(--color-light-3);
+}

sass/_reset.scss

@@ -12,7 +12,3 @@ img {
   border: none;
   border-radius: 0px;
 }
-
-input:disabled {
-  border-radius: 2px;
-}

sass/foundry/_app-ui.scss

@@ -21,6 +21,24 @@
   }
 }
 
+#players.foundry2 {
+  background-color: var(--app-background);
+  border: 1px solid var(--color-cool-3);
+  text-shadow: 0px 1px 2px black;
+  --box-shadow: 0px 1px 3px 1px black;
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+
+  h3 {
+    cursor: pointer;
+    @include quick-transition;
+
+    &:hover {
+      text-shadow: 0px 0px 8px var(--color-shadow-highlight);
+    }
+  }
+}
+
 .dorako-ui.app.journal-entry:not(.premium) {
   .window-content {
     box-shadow: none;
@@ -149,7 +167,7 @@
 /* Tooltip                                   */
 /* ----------------------------------------- */
 // Exists in outermost scope
-#tooltip {
+#tooltip[data-theme="dorako-ui"] {
   @include glass;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
@@ -159,11 +177,51 @@
   text-shadow: 0px 0px 3px black;
 }
 
+#tooltip[data-theme="foundry2"] {
+  background: var(--app-background);
+  border: 1px solid var(--color-warm-1);
+  box-shadow: 0px 0px 6px var(--color-warm-2), 0px 2px 8px 1px var(--color-warm-3);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  min-height: 34px;
+  font-size: var(--font-size-20);
+  line-height: var(--font-size-20);
+  text-shadow: 0px 0px 3px black;
+}
+
+.foundry2 #context-menu {
+  background: var(--app-background);
+  border: 1px solid var(--color-warm-1);
+  box-shadow: 0px 0px 6px var(--color-warm-2), 0px 2px 8px 1px var(--color-warm-3);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  text-shadow: 0px 0px 3px black;
+  li.context-item {
+    &:first-child {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+    &:last-child {
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+    &:hover {
+      box-shadow: 0px 0px 0px 1px var(--color-warm-1);
+      background: var(--color-warm-2);
+      text-shadow: 0px 0px 3px black;
+    }
+  }
+}
+
 /* ----------------------------------------- */
 /* FPS display                               */
 /* ----------------------------------------- */
 
-#fps {
+#fps[data-theme="dorako-ui"] {
   @include glass;
   text-shadow: 0px 0px 3px black;
 }
+
+#fps[data-theme="foundry2"] {
+  @include f2-app;
+}