2.10.6

Dorako · Oct 17, 2023 · bf97fb3 · bf97fb3
1 parent b5e1845
commit bf97fb3
Show file tree

Hide file tree

Showing 24 changed files with 3,639 additions and 1,649 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 2.10.6
+
+- (Refinement) Added Foundry 2 styling for PC sheets and Kingdom sheets. All sheets should now be styled.
+
 # 2.10.5
 
 - (Refinement) Added Foundry 2 styling for the Critical fumble deck journals also...

diff --git a/modules/base-theme-hooks.js b/modules/base-theme-hooks.js
@@ -6,7 +6,8 @@ for (const appName of [...baseThemeApplications]) {
     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");
+    const excludeString =
+      game.settings.get("pf2e-dorako-ui", "customization.excluded-applications") + ", MonksEnhancedJournal";
     if (excludeString.toLowerCase().includes(appName.toLowerCase())) {
       console.debug(
         `${MODULE_NAME} | render${app.constructor.name} | is included in excluded applications string ${excludeString} => do not add .dorako-ui`

diff --git a/modules/foundry2-theme.js b/modules/foundry2-theme.js
@@ -29,6 +29,15 @@ Hooks.on("renderApplication", (app, html, data) => {
   if (theme !== "foundry2-theme") {
     return;
   }
+  const excludeString =
+    game.settings.get("pf2e-dorako-ui", "customization.excluded-applications") + ", MonksEnhancedJournal";
+  if (excludeString.toLowerCase().includes(app.constructor.name.toLowerCase())) {
+    console.debug(
+      `${MODULE_NAME} | render${app.constructor.name} | is included in excluded applications string ${excludeString} => do not add .foundry2`
+    );
+    return;
+  }
+
   const fakeDialogPatterns = ["popup", "dialog"];
   for (const fakeDialogPattern of [...fakeDialogPatterns]) {
     if (app.constructor.name.toLowerCase().includes(fakeDialogPattern)) {
@@ -65,9 +74,7 @@ Hooks.on("renderItemSheet", (app, html, data) => {
   html.find("form > nav a").addClass("button");
 });
 
-for (const app of [
-  ...baseThemePf2eSheets.filter((elem) => elem !== "KingdomSheetPF2e" && elem !== "CharacterSheetPF2e"),
-]) {
+for (const app of [...baseThemePf2eSheets]) {
   Hooks.on("render" + app, (app, html, data) => {
     const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
     if (theme !== "foundry2-theme") return;
@@ -81,14 +88,11 @@ for (const app of [
   });
 }
 
-for (const app of ["CharacterSheetPF2e", "KingdomSheetPF2e"]) {
+for (const app of ["CharacterSheetPF2e"]) {
   Hooks.on("render" + app, (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} | theme: ${theme}, no explicit support, fall back to .dorako-ui.dark-theme`
-    );
-    html.addClass("dorako-ui");
-    html.addClass("dark-theme");
+    console.debug(`${MODULE_NAME} | render${app.constructor.name} | theme: ${theme} => add .foundry2-pc`);
+    html.addClass("foundry2-pc");
   });
 }
diff --git a/sass/_colors.scss b/sass/_colors.scss
@@ -66,8 +66,10 @@ $adjusted-lower: #cc3311 !default;
 :root {
   /* Global */
   --primary: #{$primary-color};
+  --system-primary: #{$primary-color};
   --primary-light: #{color.scale($primary-color, $lightness: +20%)};
   --primary-dark: #{color.scale($primary-color, $lightness: -40%)};
+  --system-secondary: #{$secondary-color};
   --secondary: #{$secondary-color};
   --secondary-light: #{color.scale($secondary-color, $lightness: +25%)};
   --secondary-dark: #{color.scale($secondary-color, $lightness: -45%)};

diff --git a/sass/_mixins.scss b/sass/_mixins.scss
@@ -39,13 +39,12 @@
 }
 
 @mixin f2-app {
-  background-color: var(--app-background);
-  border: 1px solid var(--color-cool-3);
+  background: var(--color-cool-5-75);
+  border: 1px solid var(--color-cool-4);
   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);
 }
 
@@ -63,52 +62,133 @@
   @include f2-app;
   @include quick-transition;
 
-  &:hover,
+  --button-background-color: var(--color-cool-5-75);
+  --button-border-color: var(--color-cool-4);
+  --button-text-color: var(--color-light-3);
+  --button-focus-outline-color: var(--color-warm-2);
+  --button-hover-background-color: var(--color-warm-2);
+  --button-hover-border-color: var(--color-warm-1);
+  --button-hover-text-color: var(--color-light-1);
+
+  background: var(--button-background-color);
+  border: 1px solid var(--button-border-color);
+  color: var(--button-text-color);
+  box-shadow: var(--box-shadow);
+  text-decoration: none;
+  cursor: pointer;
+  text-shadow: 0px 1px 2px black;
+  transition: background-color 0.5s, border-color 0.5s;
+
+  &:not(.disabled, :disabled):hover {
+    background: var(--button-hover-background-color);
+    color: var(--button-hover-text-color);
+    border-color: var(--button-hover-border-color);
+  }
+
   &.active {
-    background: var(--color-warm-2);
-    border-color: var(--color-warm-1);
-    box-shadow: var(--box-shadow);
-    color: var(--color-light-2);
-    text-decoration: unset;
+    background: var(--button-hover-background-color);
+    outline: 1px solid var(--button-focus-outline-color);
+    border-color: var(--button-hover-border-color);
+    color: var(--button-hover-text-color);
+  }
+
+  &.disabled,
+  &:disabled {
+    --button-background-color: var(--color-warm-5);
+    --button-border-color: var(--color-warm-4);
+    --button-hover-background-color: var(--color-cool-5);
+    --button-text-color: var(--color-light-5);
+  }
+
+  &.bright {
+    --button-background-color: var(--color-warm-1);
+    --button-border-color: var(--color-cool-5);
+    --button-text-color: var(--color-cool-5);
+    --button-hover-background-color: #fda948;
+    --button-hover-border-color: var(--color-warm-2);
+    --button-hover-text-color: #000000;
+    text-shadow: unset;
+
+    &.disabled,
+    &:disabled {
+      --button-background-color: var(--color-cool-4);
+      --button-hover-background-color: var(--color-cool-4);
+      --button-text-color: var(--color-light-5);
+      --button-hover-text-color: var(--color-light-5);
+      --button-hover-border-color: transparent;
+    }
   }
 }
 
 @mixin f2-button-cool {
-  @include f2-app;
-  @include quick-transition;
-  background: var(--color-cool-3);
-  border-color: var(--color-cool-2);
+  @include f2-button-warm;
+  --button-background-color: var(--color-cool-3);
+  --button-border-color: var(--color-cool-2);
+  --button-text-color: var(--color-light-2);
+  --button-focus-outline-color: var(--color-warm-1);
+  --button-hover-background-color: var(--color-cool-2);
+  --button-hover-border-color: var(--color-cool-1);
+  --button-hover-text-color: var(--color-light-1);
 
-  &:hover,
-  &.active {
-    background: var(--color-cool-2);
-    border-color: var(--color-warm-1);
-    color: var(--color-light-2);
-    box-shadow: var(--box-shadow);
-    text-decoration: unset;
-    &:hover {
-      border-color: var(--color-cool-1);
-    }
+  &:disabled {
+    --button-background-color: var(--color-cool-5);
+    --button-border-color: var(--color-cool-4);
+    --button-hover-background-color: var(--color-cool-5);
+    --button-text-color: var(--color-light-5);
   }
 }
 
 @mixin f2-input {
-  @include f2-app;
-  @include quick-transition;
-  background: var(--color-cool-4);
-  border: 1px solid var(--color-cool-3);
-  border-radius: 3px;
-  text-shadow: unset;
-  padding: 0px calc(0.1em + 3px);
+  --input-background-color: var(--color-cool-4);
+  --input-border-color: transparent;
+  --input-border-color: var(--color-cool-3);
+  --input-focus-text-color: var(--color-light-2);
+  --input-text-color: var(--color-light-3);
+  --input-placeholder-color: var(--color-light-4);
+  --input-text-selection-color: var(--color-cool-3);
+  --input-focus-outline-color: var(--color-cool-3);
+  --box-shadow: 0px 1px 3px 1px black;
+
+  background: var(--input-background-color);
+  border: 1px solid var(--input-border-color) !important;
+  color: var(--input-text-color);
+  box-shadow: var(--box-shadow) !important;
+  align-items: center;
+  height: var(--input-height);
+  line-height: var(--input-height);
+  padding: 0 0.5rem;
+  border-radius: 4px;
+  outline: 1px solid transparent;
+  user-select: text;
+  font-size: var(--font-size-14);
+  transition: outline-color 0.5s;
 
-  &:hover,
+  &:not(:disabled, .disabled):hover,
   &:focus {
-    outline: 2px solid var(--color-cool-3);
-    border: 1px solid var(--color-cool-3);
+    outline: 2px solid var(--input-focus-outline-color);
+    border: 1px solid var(--input-border-color);
+    color: var(--input-focus-text-color);
     box-shadow: var(--box-shadow);
   }
+
+  &.disabled,
+  &:disabled {
+    --input-text-color: var(--color-light-6);
+    --input-background-color: var(--color-cool-5);
+    --input-border-color: var(--color-cool-4);
+  }
+
   &::placeholder {
-    color: var(--color-light-4);
+    color: var(--input-placeholder-color);
+  }
+
+  &::selection {
+    color: var(--input-text-color);
+    background: var(--input-focus-outline-color);
+  }
+
+  &[type="checkbox"] {
+    border: unset;
   }
 }
 

diff --git a/sass/foundry/_app-ui.scss b/sass/foundry/_app-ui.scss
@@ -22,12 +22,7 @@
 }
 
 #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);
+  @include f2-app;
 
   h3 {
     cursor: pointer;