Merge pull request 'Update the theming for Actor sheets' (#80) from theming/actor-sheet into main

Reviewed-on: #80

.vscode/settings.json

@@ -10,7 +10,8 @@
 		"*.lock": true,
 		"node_modules": true,
 		"packs": true,
-		"foundry": true
+		"foundry": true,
+		"scripts": true,
 	},
 	"html.customData": [
 		"./.vscode/components.html-data.json"

langs/en-ca.json

@@ -73,7 +73,8 @@
 			},
 			"attribute": {
 				"key": {
-					"hint": "This is the computer-friendly identifier for the attribute. When accessing the attribute in rolls, this is the name you will need to use. Changing this WILL break any existing macros you have."
+					"label": "Identifier",
+					"hint": "This is the computer-friendly name for the attribute. When accessing the attribute in rolls, this is the name you will need to use. Changing this will most likely break any existing macros you have."
 				},
 				"always-visible": "Always Visible",
 				"minimum": "Minimum",

module/data/Item/attribute.mjs

@@ -162,7 +162,7 @@ export class AttributeItemData extends foundry.abstract.TypeDataModel {
 			});
 		};
 
-		await macro?.execute({ item });
+		await macro?.execute({ item: this.parent });
 	};
 	// #endregion Methods
 };

styles/Apps/PlayerSheet.css

@@ -1,7 +1,6 @@
 .taf.PlayerSheet {
-	.sheet-header, fieldset, .content {
+	> .window-content {
-		border-radius: 8px;
+		background: var(--actor-sheet-background);
-		border: 1px solid rebeccapurple;
 	}
 
 	.sheet-header {
@@ -9,19 +8,36 @@
 		flex-direction: row;
 		align-items: center;
 		gap: 0.5rem;
-		padding: 4px;
+		padding: 0.5rem;
+		margin: -0.5rem -0.5rem 0;
+		color: var(--actor-sheet-header-colour);
+		background: var(--actor-sheet-header-background);
+		border-bottom: 1px solid var(--actor-sheet-divider-colour);
 
 		img {
 			border-radius: 4px;
 		}
+
+		input {
+			color: var(--actor-sheet-header-input-colour);
+			background: var(--actor-sheet-header-input-background);
+		}
 	}
 
 	.attributes {
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
-		justify-content: space-around;
+		justify-content: space-evenly;
-		gap: 0.5rem;
+		gap: 0.25rem;
+
+		fieldset {
+			color: var(--attribute-colour);
+			background: var(--attribute-background);
+			border-radius: 6px;
+			border: none;
+			padding: 6px;
+		}
 	}
 
 	.attr-range {
@@ -33,7 +49,15 @@
 		margin: 0 auto;
 
 		> input {
+			color: var(--attribute-colour);
+			background: var(--attribute-input-background);
 			text-align: center;
+			height: 24px;
+			min-height: unset;
+
+			&:focus {
+				outline: 1px solid var(--attribute-input-focus-colour);
+			}
 		}
 	}
 
@@ -192,17 +216,32 @@
 			font-size: 1.1rem;
 		}
 
-		input {
-			width: 50px;
-		}
-
 		input, button {
-			background: var(--item-card-header-input-background);
+			border: none;
-			color: var(--item-card-header-input-colour);
+			background: var(--attribute-input-background);
+			color: var(--attribute-input-colour);
 			text-align: center;
+			height: 24px;
+			min-height: unset;
 
 			&:disabled {
-				color: var(--item-card-header-disabled-input-colour);
+				color: var(--attribute-disabled-input-colour);
+			}
+		}
+
+		input {
+			width: 50px;
+			&:focus {
+				outline: 1px solid var(--attribute-input-focus-colour);
+			}
+		}
+
+		button {
+			&:active {
+				background: var(--attribute-button-active-background);
+			}
+			&:focus-visible {
+				outline: 1px solid var(--attribute-input-focus-colour);
 			}
 		}
 
@@ -219,6 +258,7 @@
 	}
 
 	.content {
+		border-radius: 6px;
 		flex-grow: 1;
 		overflow: hidden;
 		--table-row-color-odd: var(--table-header-bg-color);

styles/Apps/common.css

@@ -12,19 +12,34 @@
 		flex-direction: row;
 		justify-content: left;
 		align-items: center;
-		gap: 8px;
+		margin: 0 -0.5rem;
+		border-bottom: 1px solid var(--tab-nav-divider-colour);
 
 		button {
+			color: var(--tab-button-colour);
 			border: none;
 			text-shadow: none;
 			box-shadow: none;
-
+			outline: none;
-			&.active {
+			background: transparent;
-				outline: 1px solid var(--tab-button-active-border);
+			border-radius: 0;
-			}
+			border: 2px solid transparent;
+			transition: unset;
 
 			&:hover {
-				background: var(--tab-button-hover-bg);
+				color: var(--tab-button-hover-colour);
+			}
+
+			&:focus-visible {
+				color: var(--tab-button-focus-colour);
+				border-color: var(--tab-button-focus-colour);
+				border-radius: 4px;
+			}
+
+			&.active {
+				color: var(--tab-button-active-colour);
+				border-bottom: 2px solid currentColor;
+				outline: none;
 			}
 		}
 	}

styles/elements/button.css

@@ -1,4 +1,19 @@
 .taf > .window-content button {
+	&.inline {
+		color: inherit;
+		min-height: unset;
+		height: auto;
+		padding: 0;
+		background: none;
+		border: none;
+		outline: none;
+		text-decoration: underline;
+
+		&:hover {
+			background: none;
+		}
+	}
+
 	&:disabled {
 		cursor: not-allowed;
 	}

styles/elements/hr.css

@@ -2,7 +2,7 @@
 	color: inherit;
 	display: block;
 	height: 1px;
-	background: var(--divider-colour, rebeccapurple);
+	background: var(--divider-colour, var(--steel-100, currentColor));
 	border-radius: 0;
 	margin: 0;
 	padding: 0;

styles/elements/prose-mirror.css

@@ -1,13 +1,55 @@
 .taf > .window-content prose-mirror {
+	color: var(--prosemirror-colour);
+	--table-row-color-odd: var(--steel-550);
+	--table-row-color-even: var(--steel-600);
 	background: var(--prosemirror-background);
 	gap: 0;
 
+	menu {
+		background: var(--prosemirror-menu-background);
+	}
+
+	button {
+		color: var(--prosemirror-menu-colour);
+
+		&.icon.toggle {
+			border: none;
+			background: var(--prosemirror-toggle-background);
+			padding: 6px;
+
+			&:hover {
+				background: var(--prosemirror-toggle-hover-background);
+			}
+		}
+	}
+
 	.editor-content {
 		padding: 8px;
 	}
 
+	p {
+		color: inherit;
+	}
+
 	.tableWrapper th,
-	.tableWrapper td {
+	.tableWrapper td,
-		border-color: rebeccapurple;
+	table th,
+	table td {
+		border-color: var(--prosemirror-divider-colour);
+	}
+
+	table td, table th {
+		border: 1px solid var(--prosemirror-divider-colour);
+	}
+
+	pre:has(> code), code:not(pre > code) {
+		padding: 4px 6px;
+		background: var(--steel-700);
+		color: var(--steel-200);
+	}
+
+	blockquote {
+		color: inherit;
+		border-left: 2px solid var(--steel-200);
 	}
 }

styles/themes/dark.css

@@ -1,5 +1,12 @@
 .theme-dark {
-	--prosemirror-background: var(--color-cool-5);
+	/* Prose Mirror Elements */
+	--prosemirror-colour: var(--steel-100);
+	--prosemirror-background: var(--steel-650);
+	--prosemirror-toggle-background: var(--steel-700);
+	--prosemirror-toggle-hover-background: var(--steel-600);
+	--prosemirror-menu-colour: var(--steel-100);
+	--prosemirror-menu-background: var(--steel-750);
+	--prosemirror-divider-colour: var(--steel-250);
 
 	--spinner-outer-colour: white;
 	--spinner-inner-colour: #FF3D00;
@@ -8,26 +15,38 @@
 	--toggle-slider-unchecked-colour: maroon;
 	--toggle-slider-checked-colour: green;
 
-	--tab-button-active-border: rebeccapurple;
+	--tab-nav-divider-colour: var(--steel-750);
-	--tab-button-hover-bg: var(--color-cool-3);
+	--tab-button-colour: var(--steel-200);
+	--tab-button-focus-colour: var(--steel-200);
+	--tab-button-hover-colour: var(--steel-100);
+	--tab-button-active-colour: white;
 
 	/* Actor Sheet Variables */
-	/* Use --steel-850 as the main sheet background */
+	--actor-sheet-colour: var(--steel-100);
-	--inventory-summary-background: var(--steel-800);
+	--actor-sheet-background: var(--steel-850);
+	--actor-sheet-divider-colour: var(--steel-700);
+	--actor-sheet-header-colour: var(--steel-100);
+	--actor-sheet-header-background: var(--steel-900);
+	--actor-sheet-header-input-colour: var(--steel-100);
+	--actor-sheet-header-input-background: var(--steel-650);
+
+	--inventory-summary-background: var(--steel-750);
 	--inventory-summary-colour: var(--steel-100);
 	--inventory-input-background: var(--steel-650);
 	--inventory-input-colour: var(--steel-100);
 	--inventory-input-disabled-colour: var(--steel-350);
 
-	--embedded-list-header-background: var(--steel-800);
+	--embedded-list-header-background: var(--steel-750);
 	--embedded-list-header-colour: var(--steel-100);
 	--embedded-list-header-input-background: var(--steel-650);
 	--embedded-list-header-input-colour: var(--steel-100);
 
 	--attribute-background: var(--steel-700);
 	--attribute-colour: var(--steel-100);
-	--attribute-input-background: var(--steel-650);
+	--attribute-input-background: var(--steel-600);
 	--attribute-input-colour: var(--steel-100);
+	--attribute-input-focus-colour: var(--zinc-250);
+	--attribute-button-active-background: var(--steel-650);
 	--attribute-disabled-input-colour: var(--steel-350);
 
 	--item-card-background: #1d262f;
@@ -36,6 +55,7 @@
 	--item-card-header-colour: var(--steel-100);
 	--item-card-header-input-background: var(--steel-650);
 	--item-card-header-input-colour: var(--steel-100);
+	--item-card-header-input-focus-colour: var(--zinc-250);
 	--item-card-header-disabled-input-colour: var(--steel-350);
 
 	/* Item Sheet Variables */

templates/AttributeItemSheet/settings.hbs

@@ -1,7 +1,7 @@
 <div>
 	<div class="property">
 		<label for="{{meta.idp}}-key">
-			{{ localize "taf.misc.key" }}
+			{{ localize "taf.misc.attribute.key.label" }}
 		</label>
 		<input
 			type="text"

templates/PlayerSheet/primary-attributes.hbs

@@ -9,6 +9,7 @@
 					{{#if attr.system.trigger}}
 						<button
 							type="button"
+							class="inline"
 							data-action="executeTrigger"
 						>
 							{{ attr.name }}