Finish implementing the Add Spell button

module/documents/Actor/Player.mjs

@@ -1,5 +1,10 @@
 export class PlayerActor {
-	static createCustomSpell() {};
+	static createCustomSpell() {
+		this.createEmbeddedDocuments(
+			"Item",
+			[{ type: `spell`, name: `New Spell` }]
+		);
+	};
 
 	static async updateEmbeddedDocument($event) {
 		let data = $event.target.dataset;

styles/_vars.scss

@@ -4,10 +4,22 @@ $title-font: 'Pixelify Sans', sans-serif;
 $body-font: sans-serif;
 $input-font: $body-font;
 $background: #f2f2f2;
+/*
+Greens:
+	Dark Cyan: #32908F, #048A81
+	Verdigris: #48A9A6
+	Cambridge Blue: #72BDA3
+	Carribean Current: #28666E
 
+Reds:
+	Indian Red: #C1666B
+	Persian Red: #C3423F
+	Wine: #7C3238
+	Penn Red: #960200
+*/
 
-$colour-confirm: #00aa00;
-$text-on-confirm: black;
+$colour-confirm: #048A81;
+$text-on-confirm: white;
 
 $colour-neutral: #007ACC;
 $text-on-neutral: white;

styles/global/buttons.scss

@@ -10,6 +10,10 @@
 		border-radius: 4px;
 		transition: 400ms;
 		padding: 4px 8px;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		gap: 4px;
 
 		&.confirm {
 			background: $colour-confirm;

styles/global/icons.scss

@@ -2,6 +2,9 @@ $iconSizes: 12, 14, 16, 18, 20, 22, 24;
 
 .dotdungeon.dotdungeon.dotdungeon.dotdungeon {
 	.icon {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
 
 		// The various icon sizes
 		@each $size in $iconSizes {

templates/actors/char-sheet-mvp/panels/spells.pc.hbs

@@ -65,11 +65,14 @@
 
 	<div class="flex-row">
 		<button
-			class="confirm add-spell equal-padding"
+			class="confirm add-spell"
 		>
-			<div class="icon icon--20">
+			<div aria-hidden="true" class="icon icon--20">
 				{{{ icons.create }}}
 			</div>
+			<span>
+				Add Spell
+			</span>
 		</button>
 	</div>
 {{/ dotdungeon.panel}}