Update the system CSS to use sub-layers

This is so I have more granular control over interactions between resets and intentional styles

system.json

@@ -18,8 +18,10 @@
 		"module/main.mjs"
 	],
 	"styles": [
-		"templates/css/common.css",
+		{
-		"templates/Apps/apps.css"
+			"src": "templates/css/main.css",
+			"layer": "system"
+		}
 	],
 	"languages": [
 		{

templates/Apps/apps.css

@@ -7,4 +7,23 @@
 @import url("./HeroSkillsCardV1/style.css");
 @import url("./RichEditor/style.css");
 
+@import url("./popover.css");
 @import url("./popovers/AmmoTracker/style.css");
+
+.ripcrypt {
+	.window-content {
+		flex: initial;
+		padding: 0;
+		margin: 0;
+	}
+
+	.HeroSummaryCardV1,
+	.HeroSkillsCardV1,
+	.HeroCraftCardV1 {
+		padding: 8px;
+		/* height: 270px; */
+		width: 680px;
+		--col-gap: 2px;
+		--row-gap: 4px;
+	}
+}

templates/css/common.css

@@ -1,38 +0,0 @@
-@layer exceptions;
-
-@import url("./vars.css");
-
-@import url("./popover.css");
-
-@import url("./elements/button.css");
-@import url("./elements/input.css");
-@import url("./elements/lists.css");
-@import url("./elements/p.css");
-@import url("./elements/pill-bar.css");
-@import url("./elements/prose-mirror.css") layer(exceptions);
-@import url("./elements/select.css");
-@import url("./elements/span.css");
-@import url("./elements/string-tags.css");
-@import url("./elements/table.css");
-
-.ripcrypt {
-	.window-content {
-		flex: initial;
-		padding: 0;
-		margin: 0;
-	}
-
-	.HeroSummaryCardV1,
-	.HeroSkillsCardV1,
-	.HeroCraftCardV1 {
-		padding: 8px;
-		/* height: 270px; */
-		width: 680px;
-		--col-gap: 2px;
-		--row-gap: 4px;
-	}
-
-	label, input, select {
-		cursor: pointer;
-	}
-}

templates/css/elements/button.css

@@ -1,6 +1,5 @@
 .ripcrypt:where(.popover.frameless, .hud) button,
 .ripcrypt > .window-content button {
-	all: revert;
 	display: flex;
 	justify-content: center;
 	align-items: center;

templates/css/elements/input.css

@@ -2,7 +2,6 @@
 .ripcrypt.hud,
 .ripcrypt > .window-content {
 	input, .input {
-		all: revert;
 		box-sizing: border-box;
 		border: none;
 		outline: none;

templates/css/elements/prose-mirror.css

@@ -1,3 +1,3 @@
 .ripcrypt prose-mirror * {
-	all: revert-layer !important;
+	all: revert-layer;
 }

templates/css/elements/select.css

@@ -1,7 +1,6 @@
 .ripcrypt.popover.frameless select,
 .ripcrypt.hud select,
 .ripcrypt > .window-content select {
-	all: revert;
 	appearance: auto;
 	box-sizing: border-box;
 	border: none;

templates/css/elements/table.css

@@ -1,16 +1,10 @@
 .ripcrypt.popover.frameless table,
 .ripcrypt.hud table,
 .ripcrypt > .window-content table {
-	all: revert;
 	box-sizing: border-box;
 	border-collapse: collapse;
 
-	thead, tbody, tr {
-		all: revert;
-	}
-
 	td, th {
-		all: revert;
 		padding: 2px 4px;
 		font-weight: initial;
 		text-align: left;

templates/css/main.css

@@ -0,0 +1,25 @@
+@layer resets, themes, elements, components, apps, exceptions;
+
+/* Resets */
+@import url("./resets/inputs.css") layer(resets);
+@import url("./resets/tables.css") layer(resets);
+
+/* Themes */
+@import url("./themes/dark.css") layer(themes);
+
+/* Elements */
+@import url("./elements/button.css") layer(elements);
+@import url("./elements/input.css") layer(elements);
+@import url("./elements/lists.css") layer(elements);
+@import url("./elements/p.css") layer(elements);
+@import url("./elements/pill-bar.css") layer(elements);
+@import url("./elements/select.css") layer(elements);
+@import url("./elements/span.css") layer(elements);
+@import url("./elements/string-tags.css") layer(elements);
+@import url("./elements/table.css") layer(elements);
+
+/* Applications */
+@import url("../Apps/apps.css") layer(apps);
+
+/* Exceptions */
+@import url("./elements/prose-mirror.css") layer(exceptions);

templates/css/resets/inputs.css

@@ -0,0 +1,5 @@
+.ripcrypt {
+	button, input, select {
+		all: initial;
+	}
+}

templates/css/resets/tables.css

@@ -0,0 +1,7 @@
+.ripcrypt.popover.frameless,
+.ripcrypt.hud,
+.ripcrypt > .window-content {
+	table, thead, tbody, th, tr, td {
+		all: revert;
+	}
+}

templates/css/themes/light.css

@@ -1,14 +0,0 @@
-.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;
-}