Begin working on a scoped CSS solution that uses a common design language across all sheets, and *just* does sheet-specific layout tasks

module/sheets/Actors/PC/PlayerSheetV2.mjs

@@ -26,6 +26,7 @@ export class PlayerSheetv2 extends GenericActorSheet {
 				],
 			}
 		);
+		opts.classes.push(`style-v3`);
 		return opts;
 	};
 

styles/dialog/DiceList.scss

@@ -1,9 +1,9 @@
-.dotdungeon:has(.dialog--dice-list) {
+.dotdungeon:not(.style-v3):has(.dialog--dice-list) {
 	max-width: 275px;
 	min-width: 275px;
 }
 
-.dotdungeon .dialog--dice-list {
+.dotdungeon:not(.style-v3) .dialog--dice-list {
 	padding: 8px;
 
 	.dice {

styles/generic.scss

@@ -8,7 +8,7 @@
 Enabling scrollbar customization on a per-sheet basis, with a relatively low
 specificity to allow easier overriding without artificially increasing it.
 */
-.dotdungeon {
+.dotdungeon:not(.style-v3) {
 	--scrollbar-width: 5px;
 	--scrollbar-handle-color: #782e22;
 	--scrollbar-handle-border-color: var(--color-border-highlight);
@@ -24,7 +24,7 @@ specificity to allow easier overriding without artificially increasing it.
 }
 
 // Reset the parts of Foundry's styling which gets in the way of what I want
-.dotdungeon > .window-content {
+.dotdungeon:not(.style-v3) > .window-content {
 
 	h2, h3, h4, h5, h6 {
 		@include fvtt_reset;
@@ -74,7 +74,7 @@ specificity to allow easier overriding without artificially increasing it.
 }
 
 // Styling that doesn't belong to any particular part of my sheet
-.dotdungeon.dotdungeon.dotdungeon.dotdungeon {
+.dotdungeon.dotdungeon.dotdungeon.dotdungeon:not(.style-v3) {
 	container-type: size;
 
 	> .window-content {

styles/global/buttons.scss

@@ -2,7 +2,7 @@
 
 @use "sass:color" as color;
 
-.dotdungeon.dotdungeon > .window-content {
+.dotdungeon.dotdungeon:not(.style-v3) > .window-content {
 	button {
 		border-radius: 4px;
 		box-sizing: border-box;

styles/global/design-v2.scss

@@ -1,5 +1,5 @@
-.item--custom,
+.item--custom:not(.style-v3),
-.actor--mob {
+.actor--mob:not(.style-v3) {
 	input {
 		border: 2px solid black;
 		background: none;

styles/global/icons.scss

@@ -1,6 +1,6 @@
 $iconSizes: 12, 14, 16, 18, 20, 22, 24;
 
-.dotdungeon.dotdungeon.dotdungeon.dotdungeon {
+.dotdungeon.dotdungeon.dotdungeon.dotdungeon:not(.style-v3) {
 	.icon {
 		display: inline-flex;
 		justify-content: center;
@@ -14,4 +14,4 @@ $iconSizes: 12, 14, 16, 18, 20, 22, 24;
 			};
 		}
 	}
-}
+}

styles/root.scss

@@ -21,4 +21,8 @@
 @use "./sheets/items/custom.scss";
 @use "./sheets/items/aspect.scss";
 @use "./sheets/items/spell.scss";
-@use "./sheets/items/pet.scss";
+@use "./sheets/items/pet.scss";
+
+/* NEW BETTER SCOPED CSS ONLY BELOW HERE */
+
+@use "./v3/index.scss";

styles/sheets/actor/mob/mob.scss

@@ -1,7 +1,7 @@
 @use "../../../vars" as *;
 @use "avatar" as *;
 
-.dotdungeon .actor--mob {
+.dotdungeon:not(.style-v3) .actor--mob {
 	--gap: 8px;
 	--avatar-size: 100px;
 	--row-height: calc((var(--avatar-size) - var(--gap)) / 2);

styles/sheets/actor/mob/v2.scss

@@ -0,0 +1,123 @@
+@use "../../../vars" as *;
+@use "avatar" as *;
+
+.dotdungeon:not(.style-v3) .actor--mob2 {
+	--gap: 8px;
+	--avatar-size: 100px;
+	--row-height: calc((var(--avatar-size) - var(--gap)) / 2);
+	padding: var(--gap);
+	display: grid;
+	grid-template-columns: var(--avatar-size) repeat(2, minmax(0, 1fr));
+	grid-template-rows: repeat(5, var(--row-height)) minmax(var(--row-height), 1fr);
+	gap: var(--gap);
+	grid-template-areas:
+		"avatar . ."
+		"avatar . ."
+		"dice tabs tabs"
+		"dice tabs tabs"
+		"dice tabs tabs"
+		"dice tabs tabs";
+
+	label, .dice {
+		border: 2px solid black;
+		border-radius: 4px;
+		gap: 4px;
+		padding: 4px;
+	}
+
+	input.masked {
+		border: 2px solid black;
+		background: none;
+		box-shadow: none;
+		&:focus {
+			transform: scale(102%);
+		}
+	}
+
+	label.mask-input {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		transition: all ease-in-out 50ms;
+
+		&:focus-within {
+			transform: scale(102%);
+		}
+
+		input {
+			text-align: right;
+			border: none;
+			background: none;
+			border-radius: 0;
+			border-bottom: 1px solid black;
+			&:focus, &:focus-visible {
+				box-shadow: none;
+			}
+		}
+
+		input.left {
+			text-align: left;
+		}
+	}
+
+	.wide {
+		grid-column: span 2;
+	}
+
+	.mask-textarea {
+		display: flex;
+		flex-direction: column;
+		transition: all ease-in-out 50ms;
+
+		&:focus-within {
+			transform: scale(102%);
+		}
+
+		textarea {
+			flex-grow: 1;
+			resize: none;
+			border: none;
+			box-shadow: none;
+			background: none;
+		}
+	}
+	.name {
+		height: 100%;
+		font-size: 1.5rem;
+		input {
+			height: 100%;
+		}
+	}
+
+	.dice {
+		grid-area: dice;
+		display: flex;
+		flex-direction: column;
+
+		.die {
+			display: flex;
+			flex-direction: row;
+			width: 100%;
+			border: 2px solid black;
+			border-radius: 4px;
+
+			.formula {
+				flex-grow: 1;
+				align-self: center;
+			}
+		}
+	}
+
+	.tabs { grid-area: tabs; }
+	.stunts {
+		grid-area: stunts;
+	}
+	.description {
+		grid-area: description;
+	}
+
+	.avatar {
+		@include avatar;
+		border-radius: 4px;
+	}
+}

styles/sheets/actor/mvp.scss

@@ -1,7 +1,7 @@
 @use "../../vars.scss" as *;
 @use "../../mixins/breakpoints" as *;
 
-.dotdungeon .actor--pc-mvp {
+.dotdungeon:not(.style-v3) .actor--pc-mvp {
 	display: grid;
 	grid-template-areas:
 		"profile stats stats"
@@ -270,7 +270,7 @@
 
 
 @include bp-m {
-	.dotdungeon {
+	.dotdungeon:not(.style-v3) {
 		.actor--pc-mvp {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 			grid-template-rows: repeat(15, min-content);
@@ -310,7 +310,7 @@
 }
 
 @include bp-s {
-	.dotdungeon {
+	.dotdungeon:not(.style-v3) {
 		.actor--pc-mvp {
 			grid-template-columns: 1fr;
 			grid-template-rows: repeat(12, min-content);

styles/sheets/actor/sync/basic.scss

@@ -1,6 +1,6 @@
 @use "../../../mixins/breakpoints" as *;
 
-.dotdungeon {
+:not(.style-v3).dotdungeon {
 	.actor--basic-sync {
 		display: flex;
 		justify-content: center;
@@ -52,7 +52,7 @@
 }
 
 @include bp-xs {
-	.dotdungeon {
+	:not(.style-v3).dotdungeon {
 		&--sync-sheet {
 			header {
 				.configure-sheet {

styles/sheets/items/aspect.scss

@@ -1,6 +1,6 @@
 @use "../../vars" as *;
 
-.dotdungeon .item--aspect {
+.dotdungeon:not(.style-v3) .item--aspect {
 	padding: 4px;
 
 	input[type=text] {

styles/sheets/items/custom.scss

@@ -1,4 +1,4 @@
-.item--custom {
+.item--custom:not(.style-v3) {
 	padding: 8px;
 	display: grid;
 	grid-template-columns: 1fr 1fr;

styles/sheets/items/pet.scss

@@ -1,6 +1,6 @@
 @use "../../vars" as *;
 
-.dotdungeon .item--pet {
+.dotdungeon:not(.style-v3) .item--pet {
 	padding: 4px;
 
 	input[type=text] {

styles/sheets/items/spell.scss

@@ -1,6 +1,6 @@
 @use "../../vars" as *;
 
-.dotdungeon .item--spell {
+.dotdungeon:not(.style-v3) .item--spell {
 	padding: 4px;
 
 	input[type=text] {

styles/sheets/partials/panel.scss

@@ -2,7 +2,7 @@
 @use "../../mixins/foundry" as *;
 @use "../../vars" as *;
 
-.dotdungeon .actor--pc-mvp .panel {
+.dotdungeon:not(.style-v3) .actor--pc-mvp .panel {
 	display: grid;
 	grid-template-rows: min-content 1fr;
 
@@ -39,7 +39,7 @@
 }
 
 @include bp-s {
-	.dotdungeon .panel__header .icon {
+	.dotdungeon:not(.style-v3) .panel__header .icon {
 		display: none;
 		visibility: hidden;
 	}

styles/sheets/partials/skill.scss

@@ -1,4 +1,4 @@
-.dotdungeon .skill {
+.dotdungeon:not(.style-v3) .skill {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;

styles/sheets/partials/stat.scss

@@ -1,4 +1,4 @@
-.dotdungeon .actor--pc-mvp .stat {
+.dotdungeon:not(.style-v3) .actor--pc-mvp .stat {
 	display: flex;
 	flex-direction: column;
 	align-items: center;

styles/v3/elements/button.scss

@@ -0,0 +1,43 @@
+@use "../mixins/material" as material;
+
+.dotdungeon.style-v3 > .window-content button {
+	@include material.elevate(2);
+	align-items: center;
+	border-radius: 4px;
+	border: none;
+	box-sizing: border-box;
+	color: inherit;
+	cursor: pointer;
+	display: inline-flex;
+	font-family: sans-serif;
+	gap: 4px;
+	justify-content: center;
+	margin: 0;
+	outline: none;
+	padding: 4px 8px;
+	transition: all 400ms ease-in-out;
+	width: initial;
+
+	&:hover, &:focus-visible {
+		@include material.elevate(4);
+	}
+	&:active {
+		@include material.elevate(6);
+	}
+
+	&:disabled {
+		opacity: 50%;
+		cursor: default;
+	}
+
+	/* Icon buttons don't use Material styling */
+	&.icon {
+		@include material.undo;
+		padding: 4px;
+
+		&:focus-visible {
+			@include material.undo;
+			// TODO : Accessible focus state
+		}
+	}
+}

styles/v3/elements/headers.scss

@@ -0,0 +1,7 @@
+.dotdungeon.style-v3 > .window-content {
+	h1, h2, h3, h4, h5, h6 {
+		border: none;
+		font-size: 1rem;
+		margin: 0;
+	}
+}

styles/v3/elements/hr.scss

@@ -0,0 +1,6 @@
+.dotdungeon.style-v3 > .window-content hr {
+	border-color: black;
+	opacity: 25%;
+	width: 100%;
+	grid-column: 1 / -1;
+}

styles/v3/elements/icons.scss

@@ -0,0 +1,17 @@
+$iconSizes: 12, 14, 16, 18, 20, 22, 24;
+
+.dotdungeon.style-v3 > .window-content {
+	.icon {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+
+		// The various icon sizes
+		@each $size in $iconSizes {
+			&--#{$size} {
+				height: #{$size}px;
+				width: #{$size}px;
+			};
+		}
+	}
+}

styles/v3/index.scss

@@ -0,0 +1,33 @@
+/* Element-Styling */
+@use "./elements/button.scss";
+@use "./elements/headers.scss";
+@use "./elements/hr.scss";
+@use "./elements/icons.scss";
+
+/* Sheet Options */
+.dotdungeon.style-v3 {
+	--scrollbar-width: 5px;
+	--scrollbar-handle-color: #782e22;
+	--scrollbar-handle-border-color: var(--color-border-highlight);
+	--color-checkbox-checked: inherit;
+	::-webkit-scrollbar {
+		width: var(--scrollbar-width);
+	}
+	::-webkit-scrollbar-thumb {
+		background: var(--scrollbar-handle-color);
+		border-color: var(--scrollbar-handle-border-color);
+		border-radius: 5px;
+	}
+
+	container-type: size;
+
+	> .window-content {
+		padding: 0;
+
+		.debug-data {
+			opacity: 60%;
+			font-family: sans-serif;
+			word-break: break-all;
+		}
+	}
+}

styles/v3/mixins/_material.scss

@@ -0,0 +1,13 @@
+@mixin elevate($height) {
+	background-color: var(--elevation-#{$height}dp-bg);
+	-webkit-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
+	-moz-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
+	box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75);
+}
+
+@mixin undo {
+	background-color: transparent;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+}

templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs

@@ -11,7 +11,7 @@
 					<h2>{{filter.label}}</h2>
 					<button
 						type="button"
-						class="item-group__create-item reduced-padding equal-padding"
+						class="icon"
 						data-embedded-create="{{@key}}"
 						aria-label="{{filter.createLabel}}"
 						data-tooltip="{{filter.createLabel}}"

templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs

@@ -8,7 +8,7 @@
 	>
 		<button
 			type="button"
-			class="collapse__toggle equal-padding reduced-padding"
+			class="collapse__toggle icon"
 			data-collapse-id="{{item.uuid}}"
 			tabindex="0"
 			aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}"

templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs

@@ -10,7 +10,7 @@
 	{{#if (eq item.system.quantity 0)}}
 		<button
 			type="button"
-			class="material__button material__button--delete equal-padding "
+			class="material__button material__button--delete icon"
 			data-embedded-delete
 			data-embedded-id="{{item.uuid}}"
 		>
@@ -23,7 +23,7 @@
 			type="button"
 			aria-hidden="true"
 			tabindex="-1"
-			class="material__button material__button--decrement equal-padding "
+			class="material__button material__button--decrement icon"
 			data-embedded-decrement="system.quantity"
 			data-embedded-id="{{item.uuid}}"
 		>
@@ -47,7 +47,7 @@
 		type="button"
 		aria-hidden="true"
 		tabindex="-1"
-		class="material__button material__button--increment equal-padding "
+		class="material__button material__button--increment icon"
 		data-embedded-increment="system.quantity"
 		data-embedded-id="{{item.uuid}}"
 	>

templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs

@@ -8,7 +8,7 @@
 	>
 		<button
 			type="button"
-			class="collapse__toggle equal-padding reduced-padding"
+			class="collapse__toggle icon"
 			data-collapse-id="{{item.uuid}}"
 			tabindex="0"
 			aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}"

templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs

@@ -8,7 +8,7 @@
 	>
 		<button
 			type="button"
-			class="collapse__toggle equal-padding reduced-padding"
+			class="collapse__toggle icon"
 			data-collapse-id="{{item.uuid}}"
 			tabindex="0"
 			aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}"

templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs

@@ -8,7 +8,7 @@
 	>
 		<button
 			type="button"
-			class="collapse__toggle equal-padding reduced-padding"
+			class="collapse__toggle icon"
 			data-collapse-id="{{item.uuid}}"
 			tabindex="0"
 			aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}"

templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs

@@ -17,7 +17,7 @@
 		</label>
 		<button
 			type="button"
-			class="equal-padding"
+			class="icon"
 			data-decrement="system.supplies"
 			aria-label="Decrease supply count by one"
 		>
@@ -32,7 +32,7 @@
 		>
 		<button
 			type="button"
-			class="equal-padding"
+			class="icon"
 			data-increment="system.supplies"
 			aria-label="Increase supply count by one"
 		>

templates/actors/mobs/main.v2.hbs

@@ -0,0 +1,32 @@
+<form autocomplete="off" class="actor--mob2">
+	<div class="avatar"></div>
+	<input
+		type="text"
+		class="name wide masked"
+		name="name"
+		value="{{actor.name}}"
+	>
+	<div class="dice">
+		Dice:
+		<button data-roll-formula="2d20" class="roll die reduced-padding neutral">
+			2d20x5
+		</button>
+		<button data-roll-formula="1d4" class="roll die reduced-padding neutral">
+			1d4
+		</button>
+		<button data-roll-formula="3d6" class="roll die reduced-padding neutral">
+			3d6
+		</button>
+		<div style="flex-grow: 1"></div>
+		<button class="confirm">Edit</button>
+	</div>
+	<div class="tabs">
+		<div class="tab-list">
+			<div class="tab">Combat</div>
+			<div class="tab">About</div>
+		</div>
+		<div class="tab-content">
+			Combat Tab
+		</div>
+	</div>
+</form>