Continue working on v2 of the PC sheet (w/ Material design now)

module/sheets/Actors/PC/Improved.mjs

@@ -8,8 +8,8 @@ export class PlayerSheetv2 extends GenericActorSheet {
 				template: `systems/dotdungeon/templates/actors/char-sheet/v2/sheet.hbs`,
 				tabs: [
 					{
-						// group: `page`,
+						group: `page`,
-						navSelector: `.potato`,
+						navSelector: `nav`,
 						contentSelector: `.tab-content`,
 						initial: `tab1`,
 					},

styles/mixins/_material.scss

@@ -0,0 +1,6 @@
+@mixin elevate($height) {
+	background-color: var(--elevation-#{$height}dp);
+	-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);
+}

styles/sheets/actor/char-sheet/themes/dark.scss

@@ -1,7 +1,28 @@
-$bg-base: #202b38;
+$t: transparent;
+
+$background: #0a0a0a;
+$surface: #121212;
+$primary: $t;
+$secondary: $t;
+$on-background: $t;
+$on-surface: $t;
+$on-primary: $t;
+$on-secondary: $t;
 
 .actor--pc {
-	--sheet-bg: #{$bg-base};
+	--sheet-bg: #{$background};
-	--nav-bg: var(--panel-bg);
+	--nav-bg: #{$surface};
-	--panel-bg: rgba(255, 255, 255, 0.05);
+	--panel-bg: #{$surface};
+
+	/* Elevation backgrounds to following Material design */
+	--elevation-0dp: #{$surface};
+	--elevation-1dp: color-mix(in lab, #{$surface}, white 5%);
+	--elevation-2dp: color-mix(in lab, #{$surface}, white 7%);
+	--elevation-3dp: color-mix(in lab, #{$surface}, white 8%);
+	--elevation-4dp: color-mix(in lab, #{$surface}, white 9%);
+	--elevation-6dp: color-mix(in lab, #{$surface}, white 11%);
+	--elevation-8dp: color-mix(in lab, #{$surface}, white 12%);
+	--elevation-12dp: color-mix(in lab, #{$surface}, white 14%);
+	--elevation-16dp: color-mix(in lab, #{$surface}, white 15%);
+	--elevation-24dp: color-mix(in lab, #{$surface}, white 16%);
 }

styles/sheets/actor/char-sheet/themes/material-design.scss

@@ -0,0 +1,167 @@
+:root {
+	--md-source: #005500;
+	/* primary */
+	--md-ref-palette-primary0: #000000;
+	--md-ref-palette-primary10: #002200;
+	--md-ref-palette-primary20: #003a00;
+	--md-ref-palette-primary25: #004600;
+	--md-ref-palette-primary30: #005300;
+	--md-ref-palette-primary35: #12600b;
+	--md-ref-palette-primary40: #226d19;
+	--md-ref-palette-primary50: #3d8730;
+	--md-ref-palette-primary60: #56a248;
+	--md-ref-palette-primary70: #70bd5f;
+	--md-ref-palette-primary80: #8bd978;
+	--md-ref-palette-primary90: #a6f691;
+	--md-ref-palette-primary95: #caffb9;
+	--md-ref-palette-primary98: #edffe1;
+	--md-ref-palette-primary99: #f7ffee;
+	--md-ref-palette-primary100: #ffffff;
+	/* secondary */
+	--md-ref-palette-secondary0: #000000;
+	--md-ref-palette-secondary10: #380038;
+	--md-ref-palette-secondary20: #5b005b;
+	--md-ref-palette-secondary25: #6c056c;
+	--md-ref-palette-secondary30: #7a1979;
+	--md-ref-palette-secondary35: #892886;
+	--md-ref-palette-secondary40: #973693;
+	--md-ref-palette-secondary50: #b450ae;
+	--md-ref-palette-secondary60: #d26ac9;
+	--md-ref-palette-secondary70: #f084e6;
+	--md-ref-palette-secondary80: #ffaaf3;
+	--md-ref-palette-secondary90: #ffd7f5;
+	--md-ref-palette-secondary95: #ffebf8;
+	--md-ref-palette-secondary98: #fff7f9;
+	--md-ref-palette-secondary99: #fffbff;
+	--md-ref-palette-secondary100: #ffffff;
+	/* tertiary */
+	--md-ref-palette-tertiary0: #000000;
+	--md-ref-palette-tertiary10: #002022;
+	--md-ref-palette-tertiary20: #003739;
+	--md-ref-palette-tertiary25: #104245;
+	--md-ref-palette-tertiary30: #1e4d50;
+	--md-ref-palette-tertiary35: #2b595c;
+	--md-ref-palette-tertiary40: #386568;
+	--md-ref-palette-tertiary50: #517f82;
+	--md-ref-palette-tertiary60: #6b989c;
+	--md-ref-palette-tertiary70: #85b3b6;
+	--md-ref-palette-tertiary80: #a0cfd2;
+	--md-ref-palette-tertiary90: #bcebee;
+	--md-ref-palette-tertiary95: #caf9fd;
+	--md-ref-palette-tertiary98: #e7feff;
+	--md-ref-palette-tertiary99: #f3ffff;
+	--md-ref-palette-tertiary100: #ffffff;
+	/* neutral */
+	--md-ref-palette-neutral0: #000000;
+	--md-ref-palette-neutral10: #1a1c18;
+	--md-ref-palette-neutral20: #2f312d;
+	--md-ref-palette-neutral25: #3a3c38;
+	--md-ref-palette-neutral30: #454743;
+	--md-ref-palette-neutral35: #51534e;
+	--md-ref-palette-neutral40: #5d5f5a;
+	--md-ref-palette-neutral50: #767872;
+	--md-ref-palette-neutral60: #90918c;
+	--md-ref-palette-neutral70: #abaca6;
+	--md-ref-palette-neutral80: #c6c7c1;
+	--md-ref-palette-neutral90: #e2e3dc;
+	--md-ref-palette-neutral95: #f1f1eb;
+	--md-ref-palette-neutral98: #f9faf3;
+	--md-ref-palette-neutral99: #fcfdf6;
+	--md-ref-palette-neutral100: #ffffff;
+	/* neutral-variant */
+	--md-ref-palette-neutral-variant0: #000000;
+	--md-ref-palette-neutral-variant10: #181d15;
+	--md-ref-palette-neutral-variant20: #2c3229;
+	--md-ref-palette-neutral-variant25: #373d34;
+	--md-ref-palette-neutral-variant30: #43483f;
+	--md-ref-palette-neutral-variant35: #4e544a;
+	--md-ref-palette-neutral-variant40: #5a6056;
+	--md-ref-palette-neutral-variant50: #73796e;
+	--md-ref-palette-neutral-variant60: #8d9387;
+	--md-ref-palette-neutral-variant70: #a7ada1;
+	--md-ref-palette-neutral-variant80: #c3c8bc;
+	--md-ref-palette-neutral-variant90: #dfe4d7;
+	--md-ref-palette-neutral-variant95: #edf3e5;
+	--md-ref-palette-neutral-variant98: #f6fbee;
+	--md-ref-palette-neutral-variant99: #f9fef1;
+	--md-ref-palette-neutral-variant100: #ffffff;
+	/* error */
+	--md-ref-palette-error0: #000000;
+	--md-ref-palette-error10: #410002;
+	--md-ref-palette-error20: #690005;
+	--md-ref-palette-error25: #7e0007;
+	--md-ref-palette-error30: #93000a;
+	--md-ref-palette-error35: #a80710;
+	--md-ref-palette-error40: #ba1a1a;
+	--md-ref-palette-error50: #de3730;
+	--md-ref-palette-error60: #ff5449;
+	--md-ref-palette-error70: #ff897d;
+	--md-ref-palette-error80: #ffb4ab;
+	--md-ref-palette-error90: #ffdad6;
+	--md-ref-palette-error95: #ffedea;
+	--md-ref-palette-error98: #fff8f7;
+	--md-ref-palette-error99: #fffbff;
+	--md-ref-palette-error100: #ffffff;
+	/* light */
+	--md-sys-color-primary-light: #226d19;
+	--md-sys-color-on-primary-light: #ffffff;
+	--md-sys-color-primary-container-light: #a6f691;
+	--md-sys-color-on-primary-container-light: #002200;
+	--md-sys-color-secondary-light: #973693;
+	--md-sys-color-on-secondary-light: #ffffff;
+	--md-sys-color-secondary-container-light: #ffd7f5;
+	--md-sys-color-on-secondary-container-light: #380038;
+	--md-sys-color-tertiary-light: #386568;
+	--md-sys-color-on-tertiary-light: #ffffff;
+	--md-sys-color-tertiary-container-light: #bcebee;
+	--md-sys-color-on-tertiary-container-light: #002022;
+	--md-sys-color-error-light: #ba1a1a;
+	--md-sys-color-error-container-light: #ffdad6;
+	--md-sys-color-on-error-light: #ffffff;
+	--md-sys-color-on-error-container-light: #410002;
+	--md-sys-color-background-light: #fcfdf6;
+	--md-sys-color-on-background-light: #1a1c18;
+	--md-sys-color-surface-light: #fcfdf6;
+	--md-sys-color-on-surface-light: #1a1c18;
+	--md-sys-color-surface-variant-light: #dfe4d7;
+	--md-sys-color-on-surface-variant-light: #43483f;
+	--md-sys-color-outline-light: #73796e;
+	--md-sys-color-inverse-on-surface-light: #f1f1eb;
+	--md-sys-color-inverse-surface-light: #2f312d;
+	--md-sys-color-inverse-primary-light: #8bd978;
+	--md-sys-color-shadow-light: #000000;
+	--md-sys-color-surface-tint-light: #226d19;
+	--md-sys-color-outline-variant-light: #c3c8bc;
+	--md-sys-color-scrim-light: #000000;
+	/* dark */
+	--md-sys-color-primary-dark: #8bd978;
+	--md-sys-color-on-primary-dark: #003a00;
+	--md-sys-color-primary-container-dark: #005300;
+	--md-sys-color-on-primary-container-dark: #a6f691;
+	--md-sys-color-secondary-dark: #ffaaf3;
+	--md-sys-color-on-secondary-dark: #5b005b;
+	--md-sys-color-secondary-container-dark: #7a1979;
+	--md-sys-color-on-secondary-container-dark: #ffd7f5;
+	--md-sys-color-tertiary-dark: #a0cfd2;
+	--md-sys-color-on-tertiary-dark: #003739;
+	--md-sys-color-tertiary-container-dark: #1e4d50;
+	--md-sys-color-on-tertiary-container-dark: #bcebee;
+	--md-sys-color-error-dark: #ffb4ab;
+	--md-sys-color-error-container-dark: #93000a;
+	--md-sys-color-on-error-dark: #690005;
+	--md-sys-color-on-error-container-dark: #ffdad6;
+	--md-sys-color-background-dark: #1a1c18;
+	--md-sys-color-on-background-dark: #e2e3dc;
+	--md-sys-color-surface-dark: #1a1c18;
+	--md-sys-color-on-surface-dark: #e2e3dc;
+	--md-sys-color-surface-variant-dark: #43483f;
+	--md-sys-color-on-surface-variant-dark: #c3c8bc;
+	--md-sys-color-outline-dark: #8d9387;
+	--md-sys-color-inverse-on-surface-dark: #1a1c18;
+	--md-sys-color-inverse-surface-dark: #e2e3dc;
+	--md-sys-color-inverse-primary-dark: #226d19;
+	--md-sys-color-shadow-dark: #000000;
+	--md-sys-color-surface-tint-dark: #8bd978;
+	--md-sys-color-outline-variant-dark: #43483f;
+	--md-sys-color-scrim-dark: #000000;
+}

styles/sheets/actor/char-sheet/v2.scss

@@ -1,11 +1,26 @@
 @use "./themes/dark.scss";
+@use "../../../mixins/material" as material;
 
 .dotdungeon .actor--pc {
-	background: var(--sheet-bg);
+	background-color: var(--sheet-bg);
 	display: grid;
 	grid-template-rows: 1fr minmax(min-content, 50px);
 
+	color: white;
+
+	.panel-0dp { @include material.elevate(0); margin: 1rem; padding: 10px; }
+	.panel-1dp { @include material.elevate(1); margin: 1rem; padding: 10px; }
+	.panel-2dp { @include material.elevate(2); margin: 1rem; padding: 10px; }
+	.panel-3dp { @include material.elevate(3); margin: 1rem; padding: 10px; }
+	.panel-4dp { @include material.elevate(4); margin: 1rem; padding: 10px; }
+	.panel-6dp { @include material.elevate(6); margin: 1rem; padding: 10px; }
+	.panel-8dp { @include material.elevate(8); margin: 1rem; padding: 10px; }
+	.panel-12dp { @include material.elevate(12); margin: 1rem; padding: 10px; }
+	.panel-16dp { @include material.elevate(16); margin: 1rem; padding: 10px; }
+	.panel-24dp { @include material.elevate(24); margin: 1rem; padding: 10px; }
+
 	nav {
-		background: var(--panel-bg);
+		background-color: var(--nav-bg);
+		@include material.elevate(02)
 	}
 }

styles/sheets/actor/mvp.scss

@@ -271,7 +271,7 @@
 
 @include bp-m {
 	.dotdungeon {
-		.actor--pc {
+		.actor--pc-mvp {
 			grid-template-columns: repeat(2, minmax(0, 1fr));
 			grid-template-rows: repeat(15, min-content);
 			grid-template-areas:
@@ -311,7 +311,7 @@
 
 @include bp-s {
 	.dotdungeon {
-		.actor--pc {
+		.actor--pc-mvp {
 			grid-template-columns: 1fr;
 			grid-template-rows: repeat(12, min-content);
 			grid-template-areas:

templates/actors/char-sheet/v2/sheet.hbs

@@ -1,22 +1,39 @@
 <form autocomplete="off" class="actor--pc">
 	{{!-- All panels here --}}
 	<section class="tab-content">
-		<div class="tab" data-group="page" data-tab="tab1">
+		<div class="tab" data-group="page" data-tab="avatar">Avatar</div>
-			<h1>Tab 1</h1>
+		<div class="tab" data-group="page" data-tab="stats">
-		</div>
+			<div class="panel-1dp">
-		<div class="tab" data-group="page" data-tab="tab2">
+				<h2>Build</h2>
-			<h1>Tab 2</h1>
+			</div>
-		</div>
+			<div class="panel-1dp">
-		<div class="tab" data-group="page" data-tab="tab3">
+				<h2>Meta</h2>
-			<h1>Tab 3</h1>
+			</div>
+			<div class="panel-1dp">
+				<h2>Presence</h2>
+			</div>
+			<div class="panel-1dp">
+				<h2>Hands</h2>
+			</div>
+			<div class="panel-1dp">
+				<h2>Tilt</h2>
+			</div>
+			<div class="panel-1dp">
+				<h2>RNG</h2>
+			</div>
 		</div>
+		<div class="tab" data-group="page" data-tab="combat">Combat</div>
+		<div class="tab" data-group="page" data-tab="inventory">Inventory</div>
+		<div class="tab" data-group="page" data-tab="spells">Spells</div>
 	</section>
 
 
 	{{!-- Tab list here --}}
-	<div class="potato" data-group="page">
+	<nav data-group="page">
-		<a data-tab="tab1">Tab 1</a>
+		<button type="button" data-tab="avatar">Avatar</button>
-		<a data-tab="tab2">Tab 2</a>
+		<button type="button" data-tab="stats">Stats / Skills</button>
-		<a data-tab="tab3">Tab 3</a>
+		<button type="button" data-tab="combat">Combat</button>
-	</div>
+		<button type="button" data-tab="inventory">Inventory</button>
+		<button type="button" data-tab="spells">Spells</button>
+	</nav>
 </form>