align-self and align now override CSS properties instead of CSS varia…

…bles; this is important because that keeps the alignment classes utility-first and overrides the w-* and h-* classes because they are specified after. Technically the w-* and h-* classes can be specified elsewhere but they are tightly coupled for now.

src/runtime/runtime.ts

@@ -50,15 +50,15 @@ const Duomo: IRuntime = {
 
 		if (mode !== "production") {
 			const handleKeyDownDarkMode = (e: KeyboardEvent) => {
-				if (!e.ctrlKey && (e.key.toLowerCase() === "d" || e.keyCode === 68)) {
+				if (e.ctrlKey && (e.key.toLowerCase() === "d" || e.keyCode === 68)) {
 					Duomo.toggleDarkMode()
 				}
 			}
 			document.addEventListener("keydown", handleKeyDownDarkMode)
 			deferers.push(() => document.removeEventListener("keydown", handleKeyDownDarkMode))
 
 			const handleKeyDownDebugMode = (e: KeyboardEvent) => {
-				if (e.ctrlKey && (e.key.toLowerCase() === "d" || e.keyCode === 68)) {
+				if (!e.ctrlKey && (e.key.toLowerCase() === "d" || e.keyCode === 68)) {
 					Duomo.toggleDebugMode()
 				}
 			}

src/sass/core/grid.scss

@@ -5,7 +5,6 @@
 		@if matches($v, core) {
 			.grid {
 				display: grid;
-				align-self: var(--dm-align-self);
 			}
 		}
 

src/sass/extensions/stacks.scss

@@ -65,7 +65,7 @@ $-align-opts: (
 			flex-direction: row;
 			justify-content: center;
 			align-self: var(--dm-align-self);
-			align-items: var(--dm-align);
+			align-items: center;
 			min-width: min-content; // Needed for `overflow-x-scroll`
 		}
 
@@ -103,7 +103,7 @@ $-align-opts: (
 			flex-direction: column;
 			justify-content: center;
 			align-self: var(--dm-align-self);
-			align-items: var(--dm-align);
+			align-items: center;
 			min-width: auto; // Needed for `overflow-x-scroll`
 		}
 
@@ -213,7 +213,7 @@ $-align-opts: (
 
 		@each $mk, $mv in $-align-self-opts {
 			#{variant($mk, $v)} {
-				--dm-align-self: #{$mv};
+				align-self: #{$mv};
 			}
 		}
 
@@ -223,7 +223,7 @@ $-align-opts: (
 
 		@each $mk, $mv in $-align-opts {
 			#{variant($mk, $v)} {
-				--dm-align: #{$mv};
+				align-items: #{$mv};
 			}
 		}