RC-68 | Sheet Setup

Apps/HeroSkillsCardV1/content.hbs

@@ -0,0 +1 @@
+<div class="HeroSkillsCardV1"></div>

Apps/HeroSkillsCardV1/style.css

@@ -0,0 +1,32 @@
+.ripcrypt .HeroSummaryCardV1 {
+
+	/* Foundry Variable Tweaks */
+	--input-height: 1rem;
+
+	display: grid;
+	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 2.5fr);
+	grid-template-rows: repeat(15, minmax(0, 1fr));
+	column-gap: var(--col-gap);
+
+	background: var(--base-background);
+	color: var(--base-text);
+
+	.col-header {
+		background: var(--section-header-background);
+		color: var(--section-header-text);
+	}
+	.row-alt {
+		background: var(--alt-row-background);
+		color: var(--alt-row-text);
+	}
+
+	label, .label {
+		box-sizing: border-box;
+		padding: 2px 4px;
+		text-transform: uppercase;
+		font-size: var(--font-size-14);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-weight: bold;
+	}
+}

Apps/HeroSummaryCardV1/content.hbs

@@ -182,13 +182,14 @@
 					{{#if @root.meta.editable}}
 						<button
 							type="button"
-							class="roll"
+							class="roll icon"
 							data-action="roll"
 							data-formula="{{ability.value}}d8rc4"
 							data-flavor="{{ability.name}} Roll (Difficulty: 4)"
 						>
 							<rc-icon
 								var:size="20px"
+								var:fill="currentColor"
 								name="icons/roll"
 							></rc-icon>
 						</button>

Apps/HeroSummaryCardV1/style.css

@@ -8,15 +8,16 @@
 	grid-template-rows: repeat(15, minmax(0, 1fr));
 	column-gap: var(--col-gap);
 
-	background: white;
-	color: black;
+	background: var(--base-background);
+	color: var(--base-text);
 
 	.col-header {
-		background: black;
-		color: white;
+		background: var(--section-header-background);
+		color: var(--section-header-text);
 	}
 	.row-alt {
-		background: rgba(0,0,0, 0.3);
+		background: var(--alt-row-background);
+		color: var(--alt-row-text);
 	}
 
 	label, .label {
@@ -132,7 +133,7 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		border: 2px solid black;
+		border: 2px solid var(--accent-1);
 		border-radius: 50%;
 		font-size: 1.5rem;
 		position: relative;
@@ -161,7 +162,7 @@
 				content: "";
 				width: 69%;
 				height: 2px;
-				background: black;
+				background: var(--accent-1);
 				transform: rotate(-45deg);
 			}
 

Apps/apps.css

@@ -0,0 +1,2 @@
+@import url("./HeroSummaryCardV1/style.css");
+@import url("./HeroSkillsCardV1/style.css");

Apps/common.css

@@ -1,3 +1,5 @@
+@import url("./vars.css");
+
 @import url("./elements/button.css");
 @import url("./elements/input.css");
 @import url("./elements/select.css");

Apps/elements/button.css

@@ -1,8 +1,10 @@
 .ripcrypt > .window-content button {
 	all: revert;
 	padding: 2px 4px;
+	background: var(--button-background);
+	color: var(--button-text);
 
-	&.roll {
+	&.icon {
 		padding: 0;
 		border-radius: 50%;
 		outline: none;

Apps/elements/input.css

@@ -7,12 +7,13 @@
 		font-family: inherit;
 		font-size: inherit;
 		position: relative;
-		background: none;
+		background: var(--input-background);
+		color: var(--input-text);
 		padding: 0px 4px;
 
 		&[type="text"],
 		&[type="number"] {
-			border-bottom: 2px dashed purple;
+			border-bottom: var(--input-underline);
 		}
 	}
 }

Apps/themes/dark.css

@@ -0,0 +1,22 @@
+.theme-rc-dark,
+.theme-dark {
+	--accent-1: #056162;
+	--accent-2: #04262a;
+	--accent-3: #4fb258;
+
+	--section-header-text: white;
+	--section-header-background: var(--accent-1);
+
+	--base-text: white;
+	--base-background: black;
+
+	--alt-row-text: white;
+	--alt-row-background: var(--accent-2);
+
+	--input-underline: 2px dashed var(--accent-3);
+	--input-background: inherit;
+	--input-text: white;
+
+	--button-background: black;
+	--button-text: var(--accent-3);
+}

Apps/themes/light.css

@@ -0,0 +1,14 @@
+.theme-rc-light,
+.theme-light {
+	--header-text: white;
+	--header-background: black;
+
+	--section-header-text: white;
+	--section-header-background: black;
+
+	--alt-row-text: black;
+	--alt-row-background: rgba(0,0,0, 0.3);
+
+	--base-text: black;
+	--base-background: white;
+}

Apps/vars.css

@@ -0,0 +1,2 @@
+@import url("./themes/dark.css");
+/* @import url("./themes/light.css"); */

assets/icons/roll.svg

@@ -1,6 +1,5 @@
 <svg width="83" height="95" viewBox="0 0 83 95" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
-  <title>Layer 1</title>
   <path id="svg_1" d="m77.95688,69.37862c0,-1.375 1.1133,-2.4883 2.4883,-2.4883s2.4883,1.1133 2.4883,2.4883l0,0.53516c0,1.375 -1.1133,2.4883 -2.4883,2.4883s-2.4883,-1.1133 -2.4883,-2.4883l0,-0.53516zm-49.355,-34.766c1.4609,-1.4648 3.832,-1.4648 5.2969,0c1.4609,1.4609 1.4609,3.832 0,5.2969c-1.4648,1.4609 -3.832,1.4609 -5.2969,0c-1.4648,-1.4648 -1.4648,-3.832 0,-5.2969zm20.453,20.453c1.4648,-1.4609 3.832,-1.4609 5.2969,0c1.4648,1.4648 1.4648,3.832 0,5.2969c-1.4609,1.4648 -3.832,1.4648 -5.2969,0c-1.4609,-1.4609 -1.4609,-3.832 0,-5.2969zm-10.227,-10.227c1.4609,-1.4648 3.832,-1.4648 5.293,0c1.4648,1.4609 1.4648,3.832 0,5.293c-1.4609,1.4648 -3.832,1.4648 -5.293,0c-1.4648,-1.4609 -1.4648,-3.832 0,-5.293zm-9.8594,-20.359l25.016,0c2.8828,0 5.5039,1.1797 7.4062,3.082l0.00781,0.00781c1.9023,1.9023 3.082,4.5273 3.082,7.4062l0,25.016c0,2.8828 -1.1797,5.5039 -3.082,7.4062l-0.00781,0.00782c-1.9023,1.90229 -4.5273,3.08199 -7.4062,3.08199l-25.016,0c-2.8828,0 -5.5039,-1.1797 -7.4062,-3.08199l-0.00781,-0.00782c-1.9023,-1.9023 -3.082,-4.5273 -3.082,-7.4062l0,-25.016c0,-2.8828 1.1797,-5.5039 3.082,-7.4062l0.00781,-0.00781c1.9023,-1.9023 4.5273,-3.082 7.4062,-3.082zm25.016,5l-25.016,0c-1.5156,0 -2.8906,0.61719 -3.8867,1.6094c-0.99219,0.99609 -1.6094,2.375 -1.6094,3.8867l0,25.016c0,1.5156 0.61719,2.8906 1.6094,3.8867c0.99609,0.99219 2.375,1.6094 3.8867,1.6094l25.016,0c1.5156,0 2.8906,-0.61719 3.8867,-1.6094c0.99219,-0.99609 1.6094,-2.375 1.6094,-3.8867l0,-25.016c0,-1.5156 -0.61719,-2.8906 -1.6094,-3.8867c-0.99609,-0.99219 -2.375,-1.6094 -3.8867,-1.6094zm18.355,42.309c1.1914,-0.69141 2.7188,-0.28516 3.4062,0.91016c0.69141,1.1914 0.28516,2.7188 -0.91016,3.4062l-32.113,18.539c-0.84766,0.49219 -1.8672,0.42578 -2.6328,-0.08203l-38.828,-22.418c-0.80078,-0.46094 -1.25,-1.2969 -1.25,-2.1562l-0.01172,-45c0,-1.0117 0.60156,-1.8867 1.4688,-2.2773l38.766,-22.379c0.80859,-0.46484 1.7695,-0.42578 2.5195,0.02344l38.934,22.477c0.80078,0.46094 1.25,1.2969 1.25,2.1562l0,36.395c0,1.375 -1.1133,2.4883 -2.4883,2.4883s-2.4883,-1.1133 -2.4883,-2.4883l0,-34.961l-36.48,-21.062l-36.473,21.059l0,42.141l36.469,21.055l30.867,-17.82l-0.00522,-0.00647z"/>
  </g>
 </svg>

langs/en-ca.json

@@ -9,7 +9,8 @@
 	},
 	"RipCrypt": {
 		"sheet-names": {
-			"HeroSummaryCardV1": "Hero Stat Card"
+			"HeroSummaryCardV1": "Hero Stat Card",
+			"HeroSkillsCardV1": "Hero Skill Card"
 		},
 		"common": {
 			"empty": "---",

module/Apps/ActorSheets/HeroSkillsCardV1.mjs

@@ -0,0 +1,52 @@
+import { filePath } from "../../consts.mjs";
+import { gameTerms } from "../../gameTerms.mjs";
+import { GenericAppMixin } from "../GenericApp.mjs";
+import { localizer } from "../../utils/Localizer.mjs";
+import { Logger } from "../../utils/Logger.mjs";
+
+const { HandlebarsApplicationMixin } = foundry.applications.api;
+const { ActorSheetV2 } = foundry.applications.sheets;
+
+export class HeroSkillsCardV1 extends GenericAppMixin(HandlebarsApplicationMixin(ActorSheetV2)) {
+
+	// #region Options
+	static DEFAULT_OPTIONS = {
+		classes: [
+			`ripcrypt--actor`,
+			`ripcrypt--HeroSkillsCardV1`,
+		],
+		position: {
+			width: `auto`,
+			height: `auto`,
+		},
+		window: {
+			resizable: false,
+		},
+		actions: {
+		},
+		form: {
+			submitOnChange: true,
+			closeOnSubmit: false,
+		},
+	};
+
+	static PARTS = {
+		content: {
+			template: filePath(`Apps/HeroSkillsCardV1/content.hbs`),
+		},
+	};
+	// #endregion
+
+	// #region Lifecycle
+	async _preparePartContext(partId, ctx, opts) {
+		ctx = await super._preparePartContext(partId, ctx, opts);
+		ctx.actor = this.document;
+
+		Logger.debug(`Context:`, ctx);
+		return ctx;
+	};
+	// #endregion
+
+	// #region Actions
+	// #endregion
+};

module/Apps/GenericApp.mjs

@@ -18,6 +18,10 @@ export function GenericAppMixin(HandlebarsApp) {
 				roll: this.rollDice,
 			},
 		};
+
+		static themes = {
+			dark: `SETTINGS.UI.FIELDS.colorScheme.dark`,
+		};
 		// #endregion
 
 		// #region Lifecycle

module/hooks/init.mjs

@@ -1,4 +1,5 @@
 // Applications
+import { HeroSkillsCardV1 } from "../Apps/ActorSheets/HeroSkillsCardV1.mjs";
 import { HeroSummaryCardV1 } from "../Apps/ActorSheets/HeroSummaryCardV1.mjs";
 
 // Data Models
@@ -38,6 +39,12 @@ Hooks.once(`init`, () => {
 		makeDefault: true,
 		types: [`hero`],
 		label: `RipCrypt.sheet-names.HeroSummaryCardV1`,
+		themes: HeroSummaryCardV1.themes,
+	});
+	Actors.registerSheet(game.system.id, HeroSkillsCardV1, {
+		types: [`hero`],
+		label: `RipCrypt.sheet-names.HeroSkillsCardV1`,
+		themes: HeroSkillsCardV1.themes,
 	});
 	// #endregion
 	// #endregion

system.json

@@ -19,7 +19,7 @@
 	],
 	"styles": [
 		"Apps/common.css",
-		"Apps/HeroSummaryCardV1/style.css"
+		"Apps/apps.css"
 	],
 	"languages": [
 		{