Update colors to use scss, add Modal

src/_variables.scss

@@ -1,2 +1,13 @@
 $background-color: #1b1b20;
+
+$primary-color: #2e3042;
+$primary-accent-color: #263447;
+
+$secondary-color: #dfdfe9;
+$secondary-accent-color: #adadbb;
+
+$danger-color: #be3329;
+$danger-accent-color: #ddaeb2;
+$danger-active-color: #b69092;
+
 $font-family: Verdana, Geneva, Tahoma, sans-serif;

src/lib/components/Button.svelte

@@ -1,71 +1,50 @@
 <script lang="ts">
-	import { colors } from '$lib/theme';
-
 	type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'danger';
 
 	export let variant: ButtonType = 'primary';
-
-	function getStyles(buttonType: ButtonType) {
-		switch (buttonType) {
-			case 'primary':
-				return {
-					backgroundColor: colors.primaryColor,
-					color: colors.secondaryColor,
-					activeColor: colors.primaryAccentColor
-				};
-			case 'secondary':
-				return {
-					backgroundColor: colors.secondaryColor,
-					color: colors.primaryColor,
-					activeColor: colors.secondaryAccentColor
-				};
-			case 'tertiary':
-				return {
-					backgroundColor: 'transparent',
-					color: colors.secondaryColor,
-					activeColor: colors.primaryAccentColor
-				};
-			case 'danger':
-				return {
-					backgroundColor: colors.dangerAccentColor,
-					color: colors.dangerColor,
-					activeColor: colors.dangerActivecolor
-				};
-		}
-	}
-
-	const { backgroundColor, color, activeColor } = getStyles(variant);
 </script>
 
-<button
+<button class={variant} {...$$restProps} on:click>
-	style:--color={color}
-	style:--background-color={backgroundColor}
-	style:--active={activeColor}
-	{...$$restProps}
-	on:click
->
 	<slot />
 </button>
 
-<style>
+<style lang="scss">
-	button {
+	@mixin button(
+		$bg-color: $primary-color,
+		$color: $secondary-color,
+		$active-color: $primary-accent-color
+	) {
 		border-style: none;
 		border-radius: 6px;
 		padding: 2px 10px 2px 10px;
-		font-family: var(--font-family);
+		font-family: $font-family;
 		height: 40px;
 		max-height: 40px;
 		font-weight: bold;
-		color: var(--color);
+		color: $color;
 		border: 1px solid;
-		background-color: var(--background-color);
+		background-color: $bg-color;
+
+		&:hover {
+			cursor: pointer;
+		}
+		&:active {
+			background-color: $active-color;
+		}
 	}
 
-	button:hover {
+	.primary {
-		cursor: pointer;
+		@include button();
+	}
+	.secondary {
+		@include button($secondary-color, $primary-color, $secondary-accent-color);
 	}
 
-	button:active {
+	.tertiary {
-		background-color: var(--active);
+		@include button(transparent, $secondary-color, $primary-accent-color);
+	}
+
+	.danger {
+		@include button($danger-accent-color, $danger-color, $danger-active-color);
 	}
 </style>

src/lib/components/FileUpload.svelte

@@ -1,8 +1,4 @@
 <script lang="ts">
-	import type { Entry } from '@zip.js/zip.js';
-	import Button from './Button.svelte';
-	import { colors } from '$lib/theme';
-
 	export let accept: string | null | undefined = undefined;
 	export let files: FileList | null | undefined = undefined;
 	export let multiple: boolean | null | undefined = true;
@@ -30,14 +26,13 @@
 
 <button
 	on:click={onClick}
-	style:--border={colors.secondaryColor}
 	on:dragover|preventDefault
 	on:drop|preventDefault|stopPropagation={onDrop}
 >
-	<p style:color={colors.secondaryColor}><slot>Upload</slot></p>
+	<p><slot>Upload</slot></p>
 </button>
 
-<style>
+<style lang="scss">
 	input {
 		display: none;
 	}
@@ -46,11 +41,12 @@
 		width: 500px;
 		height: 100px;
 		border-radius: 12px;
-		border: 2px dashed var(--border);
+		border: 2px dashed $secondary-color;
 	}
 
 	p {
 		font-weight: bold;
 		font-size: 16px;
+		color: $secondary-color;
 	}
 </style>

src/lib/components/Modal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	export let modal: HTMLDialogElement;
+
+	function closeClicked() {
+		modal.close();
+	}
+</script>
+
+<dialog bind:this={modal}>
+	<button on:click={closeClicked}>X</button>
+	<h2 class="title">
+		<slot name="title" />
+	</h2>
+	<slot name="content" />
+	<div class="action">
+		<slot name="action" />
+	</div>
+</dialog>
+
+<style lang="scss">
+	dialog {
+		background-color: $secondary-color;
+		width: clamp(50vw, 500px, 90%);
+		border: 2px solid $primary-color;
+		border-radius: 12px;
+	}
+	dialog::backdrop {
+		background-color: rgba(black, 0.5);
+	}
+
+	button {
+		color: black;
+		font-weight: bold;
+		position: absolute;
+		right: 10px;
+		top: 10px;
+		font-size: large;
+	}
+
+	.action {
+		float: right;
+	}
+
+	.title {
+		text-align: center;
+	}
+</style>

src/lib/components/NavBar.svelte

@@ -8,7 +8,6 @@
 
 	import { currentManga, currentVolume } from '$lib/catalog';
 
-	import { colors } from '$lib/theme';
 	import { writable } from 'svelte/store';
 	let title: string | undefined = 'Mokuro';
 	let back: string | undefined = undefined;
@@ -40,7 +39,7 @@
 </script>
 
 <nav>
-	<div style:background-color={colors.primaryColor}>
+	<div>
 		{#if back}
 			<a href={back}><h2>Back</h2></a>
 			<h2>{title}</h2>
@@ -50,13 +49,14 @@
 	</div>
 </nav>
 
-<style>
+<style lang="scss">
 	nav {
 		position: relative;
 		width: 100%;
 		z-index: 1;
 	}
 	div {
+		background-color: $primary-color;
 		display: flex;
 		flex: 1;
 		justify-content: space-between;

src/lib/components/Snackbar.svelte

@@ -1,31 +1,25 @@
 <script lang="ts">
-	import { colorAlpha, colors } from '$lib/theme';
 	import { snackbarStore } from '$lib/util/snackbar';
 	import { fade, fly } from 'svelte/transition';
 </script>
 
 {#if $snackbarStore?.message && $snackbarStore?.visible}
-	<div
+	<div in:fly={{ y: 200, duration: 500 }} out:fade={{ duration: 500 }}>
-		in:fly={{ y: 200, duration: 500 }}
-		out:fade={{ duration: 500 }}
-		style:--background={colorAlpha(colors.primaryAccentColor, 0.9)}
-		style:--border={colors.secondaryColor}
-		class="toast"
-	>
 		{$snackbarStore?.message}
 	</div>
 {/if}
 
-<style>
+<style lang="scss">
-	.toast {
+	div {
-		background-color: var(--background);
+		background-color: rgba($primary-accent-color, 0.9);
 		position: fixed;
 		right: 10px;
 		bottom: 10px;
 		padding: 20px;
 		border-radius: 6px;
-		border: 1px solid var(--border);
+		border: 1px solid $secondary-color;
 		min-width: 250px;
 		display: flex;
+		z-index: 2;
 	}
 </style>

src/lib/theme.ts

@@ -1,26 +0,0 @@
-export const colors = {
-	backgroundColor: '#1b1b20',
-
-	primaryColor: '#2e3042',
-	primaryAccentColor: '#263447',
-
-	secondaryColor: '#dfdfe9',
-	secondaryAccentColor: ' #adadbb',
-
-	dangerColor: '#be3329',
-	dangerAccentColor: '#ddaeb2',
-	dangerActivecolor: '#b69092'
-};
-
-export function colorAlpha(hex: string, alpha: number) {
-	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-
-	if (result) {
-		const { r, g, b } = {
-			r: parseInt(result[1], 16),
-			g: parseInt(result[2], 16),
-			b: parseInt(result[3], 16)
-		}
-		return `rgba(${r},${g},${b},${alpha})`
-	}
-}

src/routes/+page.svelte

@@ -2,11 +2,29 @@
 	import { goto } from '$app/navigation';
 	import Button from '$lib/components/Button.svelte';
 	import Catalog from '$lib/components/Catalog.svelte';
+	import Modal from '$lib/components/Modal.svelte';
+	import { showSnackbar } from '$lib/util/snackbar';
 
 	function onClick() {
 		goto('/upload');
 	}
+
+	let modal: HTMLDialogElement;
 </script>
 
-<Button on:click={onClick}>Upload</Button>
+<Button variant="primary" on:click={onClick}>Upload</Button>
+<Button variant="secondary" on:click={() => showSnackbar('Snackbar')}>Upload</Button>
+<Button variant="tertiary" on:click={() => modal.showModal()}>Upload</Button>
+<Button variant="danger" on:click={onClick}>Upload</Button>
+<Modal bind:modal>
+	<div slot="title">Title</div>
+	<div slot="content">
+		Content
+		<input type="text" />
+	</div>
+	<div slot="action">
+		<Button on:click={() => modal.close()}>Action</Button>
+		<Button variant="secondary" on:click={() => modal.close()}>Close</Button>
+	</div>
+</Modal>
 <Catalog />