refactor: BEM convention with scss (#370)

Author: stabldev

src/lib/components/header.svelte

@@ -9,15 +9,15 @@
 	const { right_nav }: Props = $props();
 </script>
 
-<header>
-	<nav>
+<header class="header">
+	<nav class="header__nav">
 		<span>Products <coreicons-shape-chevron variant="down"></coreicons-shape-chevron></span>
 		<span class="disabled">Blog</span>
 	</nav>
-	<a href="/" class="coreproject-icon">
-		<Coreproject style="width: 8rem;" />
+	<a href="/" class="header__icon">
+		<Coreproject />
 	</a>
-	<nav>
+	<nav class="header__nav">
 		{@render right_nav?.()}
 		<a href="https://github.com/coreproject-moe" target="_blank">
 			<coreicons-logo-github></coreicons-logo-github>
@@ -26,8 +26,8 @@
 	</nav>
 </header>
 
-<style>
-	header {
+<style lang="scss">
+	.header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -46,25 +46,26 @@
 			padding-inline: 5rem;
 		}
 
-		.coreproject-icon {
+		&__icon {
 			display: none;
 			position: absolute;
 			left: 50%;
 			transform: translateX(-50%);
+			width: 8rem;
 
 			@media (width >= 40rem) {
 				display: block;
 			}
 		}
 
-		nav {
+		&__nav {
 			display: flex;
 			align-items: center;
 			gap: 2rem;
 			color: var(--color-info);
 			font-weight: 600;
 
-			& * {
+			& > * {
 				display: flex;
 				align-items: center;
 				gap: 0.5rem;

src/lib/components/highlight.svelte

@@ -6,21 +6,25 @@
 
 <div class="toaster">
 	{#each toasts_store.value as toast (toast.id)}
-		<div animate:flip={{ duration: 300 }} transition:fly={{ y: 5 }} class="toast">
+		<div animate:flip={{ duration: 300 }} transition:fly={{ y: 5 }} class="toaster__toast">
 			{#if toast.icon}
 				{@html toast.icon}
 			{:else}
 				<coreicons-shape-info></coreicons-shape-info>
 			{/if}
-			<span>{toast.message}</span>
-			<button aria-label="Close toast" onclick={() => toasts_store.dismiss(toast.id)}>
+			<span class="toaster__toast-message">{toast.message}</span>
+			<button
+				aria-label="Close toast"
+				class="toaster__toast-close-btn"
+				onclick={() => toasts_store.dismiss(toast.id)}
+			>
 				<coreicons-shape-x variant="no-border"></coreicons-shape-x>
 			</button>
 		</div>
 	{/each}
 </div>
 
-<style>
+<style lang="scss">
 	.toaster {
 		position: fixed;
 		bottom: 1rem;
@@ -33,7 +37,7 @@
 		gap: 0.5rem;
 		align-items: center;
 
-		.toast {
+		&__toast {
 			background-color: var(--color-neutral);
 			height: 3rem;
 			padding-inline: 1rem;
@@ -44,11 +48,11 @@
 			gap: 0.5rem;
 			color: var(--color-info);
 
-			span {
+			&-message {
 				font-weight: 600;
 			}
 
-			button {
+			&-close-btn {
 				font-size: 0.75rem;
 			}
 		}

src/lib/components/ui/toast/toaster.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Toaster from "$lib/components/ui/toast/toaster.svelte";
-	import "../styles/global.css";
+	import "../styles/global.scss";
 	import { defineCustomElements } from "@coreproject-moe/icons/loader";
 	let { children } = $props();