3.3.0

Dorako · Dec 6, 2023 · 9eeca5a · 9eeca5a
1 parent 25213fb
commit 9eeca5a
Show file tree

Hide file tree

Showing 28 changed files with 783 additions and 1,002 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,14 @@
+# 3.3.0
+
+- (Custom CSS) Renamed some CSS variables for clarity.
+- (Custom CSS) Check the new [Documentation](https://github.com/Dorako/pf2e-dorako-ui/wiki/Theme-Variables).
+- (Refinement) Made the Foundry 2 chat message theme much more reactive to player color. Rolltype no longer influences background color, but instead colors the rolltype indicator in the header.
+- (New) Added new "Do it Yourself" themes. These themes contain Dorako UI's theme framework, require you to supply your own custom CSS. Check the [Wiki](https://github.com/Dorako/pf2e-dorako-ui/wiki) for getting started.
+
 # 3.2.4
 
 - (BG3) Updated styling for BG3 theme NPC sheet and Familiar sheets.
-- (Custom CSS) Breaking change due to rename [data-dorako-ui-theme] -> [data-theme].
+- (Custom CSS) Breaking change due to rename `[data-dorako-ui-theme]` -> `[data-theme]`.
 - (Refinement) Removed text-selection colors.
 - (Refinement) Changed :hover style for compendium browser rows.
 

diff --git a/esmodules/settings/theme-settings.js b/esmodules/settings/theme-settings.js
@@ -30,6 +30,7 @@ export class ThemeSettings extends SettingsMenuDorakoUI {
           bg3: "pf2e-dorako-ui.text.bg3",
           discord: "pf2e-dorako-ui.text.discord",
           opaque: "pf2e-dorako-ui.text.opaque",
+          custom: "pf2e-dorako-ui.text.custom",
         },
         requiresReload: true, // re-render all windows
         onChange: (choice) => {},
@@ -49,6 +50,8 @@ export class ThemeSettings extends SettingsMenuDorakoUI {
           bg3: "pf2e-dorako-ui.text.bg3",
           "discord-light": `pf2e-dorako-ui.text.discord-light`,
           "discord-dark": "pf2e-dorako-ui.text.discord-dark",
+          "custom-light": "pf2e-dorako-ui.text.custom-light",
+          "custom-dark": "pf2e-dorako-ui.text.custom-dark",
         },
         requiresReload: true, // re-render all windows
         onChange: (choice) => {},
@@ -92,6 +95,8 @@ export class ThemeSettings extends SettingsMenuDorakoUI {
           "bg3-blue": "pf2e-dorako-ui.text.bg3-blue",
           "discord-light": `pf2e-dorako-ui.text.discord-light`,
           "discord-dark": "pf2e-dorako-ui.text.discord-dark",
+          "custom-light": "pf2e-dorako-ui.text.custom-light",
+          "custom-dark": "pf2e-dorako-ui.text.custom-dark",
         },
         requiresReload: true, // re-render all windows
         onChange: (choice) => {},
@@ -112,6 +117,8 @@ export class ThemeSettings extends SettingsMenuDorakoUI {
           "bg3-blue": "pf2e-dorako-ui.text.bg3-blue",
           "discord-light": `pf2e-dorako-ui.text.discord-light`,
           "discord-dark": "pf2e-dorako-ui.text.discord-dark",
+          "custom-light": "pf2e-dorako-ui.text.custom-light",
+          "custom-dark": "pf2e-dorako-ui.text.custom-dark",
         },
         requiresReload: true, // re-render all windows
         onChange: (choice) => {},

diff --git a/esmodules/ui-theme.js b/esmodules/ui-theme.js
@@ -32,6 +32,10 @@ export function lookupThemeAndSchemeForKey(key) {
       return { dorakoUiTheme: "discord-light", colorScheme: "light" };
     case "discord-dark":
       return { dorakoUiTheme: "discord-dark", colorScheme: "dark" };
+    case "custom-light":
+      return { dorakoUiTheme: "custom-light", colorScheme: "light" };
+    case "custom-dark":
+      return { dorakoUiTheme: "custom-dark", colorScheme: "dark" };
     default:
       return "", "";
   }

diff --git a/languages/en.json b/languages/en.json
@@ -31,6 +31,9 @@
       "opaque": "Opaque",
       "alliance": "Opposition dark",
       "gm-vs-players": "GM dark",
+      "custom": "⚠️ Do It Yourself 👷",
+      "custom-light": "⚠️ Do It Yourself (Light) 👷",
+      "custom-dark": "⚠️ Do It Yourself (Dark) 👷",
       "colors": {
         "red": "Red",
         "blue": "Blue",

diff --git a/sass/_colors.scss b/sass/_colors.scss
@@ -221,8 +221,8 @@ $adjusted-lower: #cc3311 !default;
   --color-level-red-bg: rgba(211, 20, 4, 0.4); // custom from website
   --color-level-red-border: #d31404; // custom from website
 
-  --color-scrollbar: #5d142b;
-  --color-scrollbar-border: #8d151b;
+  --scrollbar-thumb-background: #5d142b;
+  --scrollbar-thumb-border-color: #8d151b;
 }
 
 /* ----------------------------------------- */

diff --git a/sass/_mixins.scss b/sass/_mixins.scss
@@ -30,8 +30,7 @@
 
 @mixin dui-app {
   background: var(--app-background);
-  border: var(--app-border-style);
-  border-color: var(--app-border-color);
+  border: var(--app-border-width) solid var(--app-border-color);
   text-shadow: var(--app-text-shadow);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
@@ -51,8 +50,7 @@
 @mixin dui-button {
   @include dui-app;
   background: var(--button-background);
-  border: var(--app-border-style);
-  border-color: var(--button-border-color);
+  border: var(--app-border-width) solid var(--button-border-color);
   color: var(--button-text-color);
   box-shadow: var(--box-shadow);
   text-decoration: none;
@@ -62,8 +60,7 @@
   &:not(.disabled, :disabled):hover {
     background: var(--button-hover-background);
     color: var(--button-hover-text-color);
-    border: var(--app-border-style);
-    border-color: var(--button-hover-border-color);
+    border: var(--app-border-width) solid var(--button-hover-border-color);
     box-shadow: var(--box-shadow);
   }
 
@@ -93,11 +90,11 @@
   transition: background 0.1s ease-in-out;
   --button-background: var(--accent-color);
   --button-border-color: var(--accent-color-dark);
-  --button-text-color: var(--button-bright-text-color);
+  --button-text-color: var(--accent-text-color);
   --app-text-shadow: none;
-  --button-hover-background: var(--accent-text-color);
+  --button-hover-background: var(--accent-color-light);
   --button-hover-border-color: var(--accent-color);
-  --button-hover-text-color: var(--button-bright-text-color);
+  --button-hover-text-color: var(--accent-text-color);
 
   &:disabled {
     --button-background: color-mix(in srgb, var(--button-background) 50%, transparent 50%);
@@ -124,7 +121,7 @@
 
 @mixin dui-input {
   background: var(--input-background);
-  border: var(--app-border-style);
+  border: var(--app-border-width) solid;
   border-color: var(--input-border-color) !important;
   color: var(--input-text-color);
   box-shadow: var(--box-shadow) !important;
@@ -141,7 +138,7 @@
   &:not(:disabled, .disabled, [type="checkbox"]):hover,
   &:focus {
     outline: 1px solid var(--input-focus-outline-color);
-    border: var(--app-border-style);
+    border: var(--app-border-width) solid;
     border-color: var(--input-border-color);
     color: var(--input-focus-text-color);
     box-shadow: var(--box-shadow);
@@ -176,7 +173,7 @@
 @mixin dui-tooltip {
   @include dui-app;
   background: var(--app-background);
-  border: var(--app-border-style) var(--app-border-color);
+  border: var(--app-border-width) solid var(--app-border-color);
   box-shadow: var(--window-app-box-shadow);
   border-radius: var(--border-radius);
   backdrop-filter: blur(5px);

diff --git a/sass/module-support/_dfce.scss b/sass/module-support/_dfce.scss
@@ -34,7 +34,7 @@
       @include dui-button;
       &.active {
         background-color: var(--color-primary-2);
-        border: var(--app-border-style);
+        border: var(--app-border-width) solid;
         border-color: var(--app-border-color);
       }
     }

diff --git a/sass/module-support/_forien-quest-log.scss b/sass/module-support/_forien-quest-log.scss
@@ -60,7 +60,7 @@
   &.window-app.forien-quest-preview .quest-body .quest-info .quest-col-right .quest-rewards ul li,
   &.window-app.forien-quest-preview .quest-body .quest-info .quest-col-right .quest-tasks ul li {
     @include dui-app;
-    border-color: var(--color-scrollbar-border);
+    border-color: var(--scrollbar-thumb-border-color);
     background: var(--color-primary-3);
   }
 

diff --git a/sass/module-support/_monks.scss b/sass/module-support/_monks.scss
@@ -846,7 +846,7 @@ body.compact-ui #navigation[data-theme] .monks-scene-navigation #nav-toggle {
     }
 
     a.folder-name {
-      --app-border-style: 2px solid;
+      --app-border-width: 2px;
     }
 
     &.view a {
@@ -861,7 +861,7 @@ body.compact-ui #navigation[data-theme] .monks-scene-navigation #nav-toggle {
 
   &#navigation.background .monks-scene-navigation .scene-list {
     @include dui-app;
-    --app-border-style: 2px solid;
+    --app-border-width: 2px;
     gap: 5px;
   }
 }

diff --git a/sass/module-support/_pf2e-idle-hud.scss b/sass/module-support/_pf2e-idle-hud.scss
@@ -101,7 +101,7 @@
   &#pf2e-token-hud .no-macro {
     @include dui-app;
     background: var(--color-primary-3);
-    border: 1px solid var(--color-scrollbar-border);
+    border: 1px solid var(--scrollbar-thumb-border-color);
   }
 
   &#pf2e-token-hud .sidebar.spells .expended img {

diff --git a/sass/module-support/_pf2e-toolbelt.scss b/sass/module-support/_pf2e-toolbelt.scss
@@ -23,27 +23,7 @@
 
 [data-theme] {
   &.chat-message [data-action="spell-template-clear"] {
-    --button-background: var(--accent-color);
-    --button-border-color: var(--accent-text-color);
-    --button-text-color: var(--color-secondary-5);
-    --button-hover-background: #fda948;
-    --button-hover-border-color: var(--color-primary-2);
-    --button-hover-text-color: #000000;
-    text-shadow: none;
-
-    &.disabled,
-    &:disabled {
-      --button-background: var(--color-secondary-4);
-      --button-hover-background: var(--color-secondary-4);
-      --button-text-color: var(--text-color-5);
-      --button-hover-text-color: var(--text-color-5);
-      --button-hover-border-color: transparent;
-    }
-
-    &:not(.disabled, :disabled):hover {
-      --button-hover-background: var(--accent-text-color);
-      --button-hover-border-color: var(--accent-color);
-    }
+    @include dui-button-bright;
   }
 
   &.chat-message .message-content + .pf2e-toolbelt-target-damage .target-damage-application button {
@@ -53,16 +33,16 @@
     &[data-action="target-shield-block"] {
       &:hover {
         background-color: var(--color-secondary-2);
-        border: var(--app-border-style);
+        border: var(--app-border-width) solid;
         border-color: var(--color-secondary-1);
       }
       &.shield-activated {
         background-color: var(--color-secondary-1);
-        border: var(--app-border-style);
+        border: var(--app-border-width) solid;
         border-color: var(--color-secondary-2);
         &:hover {
           background-color: var(--color-secondary-2);
-          border: var(--app-border-style);
+          border: var(--app-border-width) solid;
           border-color: var(--color-secondary-1);
         }
       }

diff --git a/sass/module-support/_token-action-hud.scss b/sass/module-support/_token-action-hud.scss
@@ -8,7 +8,7 @@
   &.locked-tooltip.tah-tooltip :is(a.content-link, a.inline-roll),
   &.tah-tooltip :is(a.content-link, a.inline-roll),
   &.active:has(.tah-tooltip-wrapper) :is(a.content-link, a.inline-roll) {
-    background: var(--inline-bg);
+    background: var(--inline-background);
     border: 1px solid var(--inline-border-color);
     color: var(--inline-text-color) !important;
     box-shadow: var(--inline-box-shadow);