don't use @apply in title component

jrmajor · Dec 17, 2024 · 3fb00d0 · 3fb00d0
1 parent 94bcbe6
commit 3fb00d0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git 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
@@ -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>