From 3fb00d071dd315d97594370fbb6fc8aefb2001d9 Mon Sep 17 00:00:00 2001
From: Jeremiasz Major <jrh.mjr@gmail.com>
Date: Tue, 17 Dec 2024 20:24:52 +0100
Subject: [PATCH] don't use `@apply` in title component

---
 resources/js/Components/Title.svelte | 10 +++-------
 resources/views/app.blade.php        |  2 +-
 2 files changed, 4 insertions(+), 8 deletions(-)
diff --git a/resources/js/Components/Title.svelte b/resources/js/Components/Title.svelte
index ab25150d..f48dcf39 100644
--- a/resources/js/Components/Title.svelte
+++ b/resources/js/Components/Title.svelte
@@ -36,18 +36,13 @@
 {/if}
 
 <style>
-	@import '../../css/style.css' reference;
-
 	.title {
 		position: relative;
-		@apply after:bg-brand-primary dark:after:bg-brand-primary-dark;
-	}
-
-	.sub {
-		@apply after:bg-brand-lighter dark:after:bg-brand-lighter-dark;
 	}
 
 	.title::after {
+		background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary-dark));
+		content: '';
 		display: block;
 		position: absolute;
 		z-index: -1;
@@ -58,6 +53,7 @@
 	}
 
 	.sub::after {
+		background-color: light-dark(var(--color-brand-lighter), var(--color-brand-lighter-dark));
 		top: calc(100% - 0.455rem);
 		left: -0.25rem;
 		width: calc(100% + 0.5rem);
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index d0a3208c..1d234469 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -30,7 +30,7 @@
       ></script>
     @endif
   </head>
-  <body class="font-sans text-gray-900 bg-gray-200 dark:bg-gray-950 dark:text-gray-200">
+  <body class="bg-gray-200 font-sans text-gray-900 scheme-light-dark dark:bg-gray-950 dark:text-gray-200">
     @inertia
   </body>
 </html>
