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"); */