Add Modal

src/docs/layout/page.svelte

@@ -19,7 +19,7 @@
 	let api
 	if ($page.url.pathname.includes('components')) {
 		if (import.meta.env.DEV) {
-			import(`../../../package/components/${title}.svelte?raw&sveld`).then(
+			import(`../../package/components/${title}.svelte?raw&sveld`).then(
 				(output) => (api = output.default)
 			)
 		} else {

src/package/components/Button.svelte

@@ -78,11 +78,11 @@
 		border-radius: var(--rounded);
 		transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out;
 
-		&:hover {
+		&:hover:not(&--color-transparent) {
 			filter: brightness(0.85);
 		}
 
-		&:active {
+		&:active:not(&--color-transparent) {
 			transform: scale(0.95);
 			filter: brightness(0.8);
 		}
@@ -114,6 +114,15 @@
 			&-transparent {
 				background-color: transparent;
 				box-shadow: none;
+				filter: brightness(1) !important;
+
+				&:hover {
+					background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
+				}
+
+				&:active {
+					background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0 0);
+				}
 			}
 
 			&-danger {
@@ -122,8 +131,8 @@
 			}
 
 			&-danger-light {
-				background-color: var(--color-popup-danger-bg);
-				color: var(--color-popup-danger-text);
+				background-color: var(--color-danger-bg);
+				color: var(--color-danger-text);
 			}
 		}
 

src/package/components/Modal.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { fade, fly } from 'svelte/transition'
+	import Button from './Button.svelte'
+	import { classCombine } from '../utils/classCombine'
+	import IconX from 'virtual:icons/heroicons-outline/x'
+	import { t } from 'svelte-intl-precompile'
+
+	export let open = false
+
+	/** Set the width of the modal */
+	export let size: 'md' | 'lg' = 'md'
+
+	export let title = ''
+
+	/** If enabled, clicking outside the modal with close it */
+	export let dismissable = true
+
+	function close() {
+		open = false
+	}
+</script>
+
+{#if open}
+	<div
+		class="modal-background"
+		transition:fade={{ duration: 300 }}
+		on:click={() => {
+			if (dismissable) close()
+		}} />
+
+	<div
+		class={classCombine(['modal', `modal--size-${size}`, 'card'])}
+		transition:fly={{ y: 400, duration: 250 }}>
+		<div class="modal__top">
+			<h2 class="title-secondary">{title}</h2>
+			<Button title="Close" color="transparent" on:click={close}>
+				<IconX width={20} />
+			</Button>
+		</div>
+
+		<slot />
+
+		<div class="modal__buttons">
+			<Button on:click={close}><IconX /> Cancel</Button>
+			<slot name="button" />
+		</div>
+	</div>
+{/if}
+
+<style lang="postcss">
+	:global(.base.theme-dark > .modal, .base.theme-oled > .modal) {
+		border: 1px solid var(--color-divider);
+	}
+
+	.modal-background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: hsla(0, 0%, 0%, 0.5);
+		backdrop-filter: blur(3px);
+		z-index: 20;
+	}
+
+	.modal {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		width: 80%;
+		z-index: 21;
+		max-height: calc(100% - 2rem);
+		overflow-y: auto;
+
+		&--size {
+			&-md {
+				max-width: 600px;
+			}
+			&-lg {
+				max-width: 750px;
+			}
+		}
+
+		&__top {
+			background-color: var(--color-bg);
+			margin: -1rem -1rem 0.5rem -1rem;
+			padding: 1rem 1rem 1rem 1.5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		&__danger {
+			margin: -1.5rem -1rem 0.5rem;
+			background-color: var(--color-danger-bg);
+			padding: 1rem 1.25rem;
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+			color: var(--color-danger-text);
+			border-color: var(--color-danger-text);
+			border-width: 0.15rem 0;
+			border-style: solid;
+
+			:global(.icon) {
+				height: 1.5rem;
+				width: 1.5rem;
+			}
+		}
+
+		:global(p),
+		:global(ul),
+		:global(ol) {
+			line-height: 1.5;
+			margin: 0;
+
+			:global(a) {
+				color: var(--color-link);
+
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+
+		&__buttons {
+			margin-top: 1rem;
+			display: flex;
+			justify-content: flex-end;
+			gap: 1rem;
+		}
+	}
+</style>

src/package/components/ModalDeletion.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import Modal from './Modal.svelte'
+	import Button from './Button.svelte'
+	import TextInput from './TextInput.svelte'
+	import { t } from 'svelte-intl-precompile'
+	import IconExclamation from 'virtual:icons/heroicons-outline/exclamation'
+	import IconTrash from 'virtual:icons/heroicons-outline/trash'
+	import { markdown } from '../utils'
+
+	export let key: string
+	export let type: 'project' | 'version' | 'account' | 'image'
+
+	export let open = false
+
+	let keyInput = ''
+</script>
+
+<Modal title={$t(`modal.deletion.${type}.title`)} bind:open>
+	{#if type === 'account' || 'project'}
+		<div class="important-banner">
+			<IconExclamation /><span>{$t('modal.deletion.generic.important')}</span>
+		</div>
+	{/if}
+	{@html markdown($t(`modal.deletion.${type}.description`))}
+	<span class="verify-label">{@html $t('modal.deletion.generic.verify', { values: { key } })}</span>
+	<TextInput
+		placeholder={$t('modal.deletion.generic.placeholder', { values: { key } })}
+		bind:value={keyInput} />
+	<Button color="danger" slot="button" disabled={key !== keyInput}>
+		<IconTrash />
+		{$t(`modal.deletion.${type}.action`)}
+	</Button>
+</Modal>
+
+<style lang="postcss">
+	.important-banner {
+		margin: -1.5rem -1rem 0.5rem;
+		background-color: var(--color-danger-bg);
+		padding: 1rem 1.25rem;
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		color: var(--color-danger-text);
+		border-color: var(--color-danger-text);
+		border-width: 0.15rem 0;
+		border-style: solid;
+
+		:global(.icon) {
+			height: 1.5rem;
+			width: 1.5rem;
+		}
+	}
+
+	.verify-label {
+		font-weight: var(--font-weight-bold);
+	}
+
+	:global(i) {
+		font-weight: var(--font-weight-normal);
+	}
+</style>

src/package/index.ts

@@ -14,6 +14,10 @@ export { default as Chips } from './components/Chips.svelte'
 
 export { default as FormField } from './components/FormField.svelte'
 
+export { default as Modal } from './components/Modal.svelte'
+
+export { default as ModalDeletion } from './components/ModalDeletion.svelte'
+
 export { default as NavRow } from './components/NavRow.svelte'
 
 export { default as Pagination } from './components/Pagination.svelte'

src/package/styles/themes/dark.postcss

@@ -54,8 +54,8 @@
 	--color-ad-link: hsl(200, 70%, 50%);
 
 	/* Popup colors */
-	--color-popup-danger-bg: hsl(355, 70%, 20%);
-	--color-popup-danger-text: hsl(342, 70%, 75%);
+	--color-danger-bg: hsl(355, 70%, 20%);
+	--color-danger-text: hsl(342, 70%, 75%);
 
 	--color-input-light: hsl(220, 13%, 20%);
 

src/package/styles/themes/light.postcss

@@ -54,9 +54,9 @@
 	--color-ad-bg: hsl(200, 70%, 82%);
 	--color-ad-link: hsl(200, 80%, 40%);
 
-	/* Popup colors */
-	--color-popup-danger-bg: hsl(355, 70%, 88%);
-	--color-popup-danger-text: hsl(342, 70%, 35%);
+	/* Danger colors */
+	--color-danger-bg: hsl(355, 70%, 88%);
+	--color-danger-text: hsl(342, 70%, 35%);
 
 	/* Scrollbar color */
 	--color-scrollbar-thumb: hsl(220, 13%, 70%);

src/routes/__layout.svelte

@@ -1,3 +1,13 @@
+<script context="module" lang="ts">
+	import { addMessages, init } from 'svelte-intl-precompile'
+	import en from '$locales/en'
+	addMessages('en', en)
+	init({
+		initialLocale: 'en',
+		fallbackLocale: 'en',
+	})
+</script>
+
 <script lang="ts">
 	import '$package/styles.postcss'
 	import '../docs/styles/prism-one-dark.css'

src/routes/components/FormField.md

@@ -1,8 +1,6 @@
 ```svelte example raised
 <script lang="ts">
-	import { FormField } from 'omorphia'
-	import { Slider } from 'omorphia'
-	import { TextInput } from 'omorphia'
+	import { FormField, Slider, TextInput } from 'omorphia'
 </script>
 
 <FormField label="Favorite number">

src/routes/components/Modal.md

@@ -0,0 +1,15 @@
+```svelte example raised
+<script lang="ts">
+	import { Modal, Checkbox, Button } from 'omorphia'
+	import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
+
+	let open = false
+</script>
+
+<Checkbox bind:checked={open}>Open modal</Checkbox>
+
+<Modal title="Example modal" danger cancelButton bind:open>
+	<p>Secret message goes here!</p>
+	<Button color="primary" slot="button"><IconArrowRight /> Continue</Button>
+</Modal>
+```

src/routes/components/ModalDeletion.md

@@ -0,0 +1,16 @@
+```svelte example raised
+<script lang="ts">
+	import { ModalDeletion, Button } from 'omorphia'
+
+	let open = false
+</script>
+
+<Button
+	color="danger"
+	on:click={() => {
+		open = true
+	}}>
+	Delete account
+</Button>
+<ModalDeletion type="account" key="venashial" bind:open />
+```