MOar

inc/module-class.php

@@ -1,5 +1,7 @@
 <?php function sleek_module_class ($styles) {
 	$classes[] = 'section';
 
+	\Sleek\Utils\log($styles);
+
 	return implode(' ', $classes);
 }

modules/invise-example-module/style.scss

@@ -1,8 +1,4 @@
 #invise-example-module {
-	> .bg {
-		display: none;
-	}
-
 	> div {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));

src/sass/components/bg.scss

@@ -0,0 +1,44 @@
+.bg--dark {
+	--text-color: white;
+	--heading-color: white;
+	--link-color: white;
+
+	background-color: black;
+	color: var(--text-color);
+}
+
+// Media
+.bg--media,
+.bg--media-light {
+	position: relative;
+
+	> figure.bg {
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+
+		img,
+		video {
+			object-fit: cover;
+			object-position: center center;
+		}
+	}
+}
+
+// Dark media
+.bg--media {
+	--text-color: white;
+	--heading-color: white;
+	--link-color: white;
+
+	color: var(--text-color);
+}
+
+// Light media
+.bg--media-light {
+	--text-color: black;
+	--heading-color: black;
+	--link-color: black;
+
+	color: var(--text-color);
+}