@hyvor/design 2.1.1 → 2.1.3

package/dist/components/Base/Base.svelte

@@ -14,7 +14,7 @@
 	let { dark = false, children }: Props = $props();
 </script>
 
-<div id="base">
+<div id="hds-base">
 	{@render children?.()}
 </div>
 

package/dist/components/Callout/Callout.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import IconCheckCircle from '@hyvor/icons/IconCheckCircle';
+	import IconExclamationCircle from '@hyvor/icons/IconExclamationCircle';
+	import IconExclamationTriangle from '@hyvor/icons/IconExclamationTriangle';
+	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
+
+	const defaultIcons = {
+		soft: undefined,
+		info: IconInfoCircle,
+		success: IconCheckCircle,
+		warning: IconExclamationCircle,
+		danger: IconExclamationTriangle
+	};
 
 	const {
 		type = 'soft',
@@ -7,34 +19,59 @@
 		children = undefined,
 		text = undefined,
 		icon = undefined,
-		...rest
+		showIcon = true,
+		fg = undefined,
+		bg = undefined
 	}: {
 		type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
 		title?: string | Snippet;
 		icon?: Snippet;
+		/** Whether to show an icon. Defaults to the icon matching `type`, unless a custom `icon` snippet is given. */
+		showIcon?: boolean;
 		text?: string | Snippet;
 		children?: Snippet;
-		[key: string]: any;
+		/** Custom text color. Overrides `type`. If `bg` is not set, a matching background is derived from it. */
+		fg?: string;
+		/** Custom background color. Overrides `type`. If `fg` is not set, a matching text color is derived from it. */
+		bg?: string;
 	} = $props();
+
+	const DefaultIcon = $derived(defaultIcons[type]);
+
+	const style = $derived.by(() => {
+		if (fg === undefined && bg === undefined) {
+			return undefined;
+		}
+
+		const finalFg = fg ?? `color-mix(in srgb, ${bg} 55%, black)`;
+		const finalBg = bg ?? `color-mix(in srgb, ${fg} 15%, white)`;
+
+		return `color: ${finalFg}; background-color: ${finalBg};`;
+	});
 </script>
 
-<div class={'callout ' + type} {...rest}>
+{#snippet iconContent()}
+	{#if icon}
+		{@render icon()}
+	{:else}
+		<DefaultIcon />
+	{/if}
+{/snippet}
+
+<div class={'callout ' + type} {style}>
 	{#if typeof title === 'string'}
 		<div class="title-wrap">
-			{#if icon}
-				<span
-					class="title-icon
-		"
-				>
-					{@render icon()}
+			{#if showIcon}
+				<span class="title-icon">
+					{@render iconContent()}
 				</span>
 			{/if}
 			<div class="title">{title}</div>
 		</div>
 	{:else if title !== undefined}
 		<div class="title-wrap">
-			{#if icon}
-				<span class="title-icon">{@render icon()}</span>
+			{#if showIcon}
+				<span class="title-icon">{@render iconContent()}</span>
 			{/if}
 
 			<div class="title">{@render title?.()}</div>
@@ -42,8 +79,8 @@
 	{/if}
 
 	<div class="text-wrap">
-		{#if icon && !title}
-			<span class="icon">{@render icon()}</span>
+		{#if showIcon && !title}
+			<span class="icon">{@render iconContent()}</span>
 		{/if}
 
 		<div class="text">
@@ -61,7 +98,7 @@
 
 <style>
 	.callout {
-		padding: 15px 25px;
+		padding: 10px 20px;
 		border-radius: var(--box-radius);
 		line-height: var(--line-height-content);
 	}
@@ -92,16 +129,16 @@
 	}
 
 	.title-wrap {
-		margin-bottom: 4px;
 		display: flex;
 		align-items: center;
 		font-weight: 600;
-		font-size: 18px;
 	}
 
 	.title-icon {
-		vertical-align: middle;
-		margin-right: 8px;
+		margin-right: 6px;
+		display: inline-flex;
+		height: var(--line-height-content);
+		align-items: center;
 	}
 
 	.text-wrap {
@@ -110,7 +147,22 @@
 	}
 
 	.icon {
-		margin-right: 8px;
-		font-size: 18px;
+		margin-right: 6px;
+		font-size: 16px;
+		display: inline-flex;
+		height: var(--line-height-content);
+		align-items: center;
+	}
+
+	.text :global(p) {
+		margin: 0.5em 0;
+	}
+
+	.text :global(p:first-child) {
+		margin-top: 0;
+	}
+
+	.text :global(p:last-child) {
+		margin-bottom: 0;
 	}
 </style>

package/dist/components/Callout/Callout.svelte.d.ts

@@ -3,9 +3,14 @@ type $$ComponentProps = {
     type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
     title?: string | Snippet;
     icon?: Snippet;
+    /** Whether to show an icon. Defaults to the icon matching `type`, unless a custom `icon` snippet is given. */
+    showIcon?: boolean;
     text?: string | Snippet;
     children?: Snippet;
-    [key: string]: any;
+    /** Custom text color. Overrides `type`. If `bg` is not set, a matching background is derived from it. */
+    fg?: string;
+    /** Custom background color. Overrides `type`. If `fg` is not set, a matching text color is derived from it. */
+    bg?: string;
 };
 declare const Callout: import("svelte").Component<$$ComponentProps, {}, "">;
 type Callout = ReturnType<typeof Callout>;

package/dist/components/Modal/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ModalFooter from './ModalFooter.svelte';
 	import type { Footer } from './modal-types.js';
+	import { portal } from './portal.js';
 	import IconX from '@hyvor/icons/IconX';
 	import IconButton from './../IconButton/IconButton.svelte';
 	import { fade, scale } from 'svelte/transition';
@@ -15,6 +16,7 @@
 		width?: string;
 		height?: string;
 		bare?: boolean;
+		appendToBody?: boolean;
 		id?: string;
 		role?: 'dialog' | 'alertdialog';
 		closeOnOutsideClick?: boolean;
@@ -34,6 +36,7 @@
 		width,
 		height,
 		bare = false,
+		appendToBody = false,
 		id = 'modal',
 		role = 'alertdialog',
 		closeOnOutsideClick = true,
@@ -101,6 +104,7 @@
 		role="presentation"
 		class="wrap"
 		bind:this={wrapEl}
+		use:portal={appendToBody ? '#hds-base' : false}
 		transition:fade|global={{ duration: 100 }}
 		onclick={(e) => handleClose(e)}
 	>
@@ -127,11 +131,7 @@
 
 					<div class="close-wrap">
 						{#if hasClose}
-							<IconButton
-								variant="invisible"
-								on:click={handleCancel}
-								aria-label="Close modal"
-							>
+							<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
 								<IconX size={25} />
 							</IconButton>
 						{/if}

package/dist/components/Modal/Modal.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     width?: string;
     height?: string;
     bare?: boolean;
+    appendToBody?: boolean;
     id?: string;
     role?: 'dialog' | 'alertdialog';
     closeOnOutsideClick?: boolean;

package/dist/components/Modal/portal.d.ts

@@ -0,0 +1,4 @@
+export declare function portal(node: HTMLElement, target?: string | HTMLElement | false): {
+    update: (t: string | HTMLElement | false) => void;
+    destroy(): void;
+};

package/dist/components/Modal/portal.js

@@ -0,0 +1,25 @@
+export function portal(node, target = false) {
+    const originalParent = node.parentNode;
+    const originalNextSibling = node.nextSibling;
+    function resolveTarget(t) {
+        if (typeof t !== 'string')
+            return t;
+        return document.querySelector(t) ?? document.body;
+    }
+    function place(t) {
+        if (t === false) {
+            if (originalParent && node.parentNode !== originalParent) {
+                originalParent.insertBefore(node, originalNextSibling);
+            }
+            return;
+        }
+        resolveTarget(t).appendChild(node);
+    }
+    place(target);
+    return {
+        update: place,
+        destroy() {
+            node.remove();
+        }
+    };
+}

package/dist/index.css

@@ -1,6 +1,6 @@
 /* font */
 :root {
-	font-family: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
+	font-family: var(--font-sans-serif);
 	font-size: 16px;
 	font-weight: 400;
 	text-rendering: optimizeLegibility;

package/dist/index.d.ts

@@ -2,3 +2,5 @@ import './variables.scss';
 import './index.css';
 import '@fontsource/readex-pro/400.css';
 import '@fontsource/readex-pro/600.css';
+import '@fontsource/source-serif-4/400.css';
+import '@fontsource/source-serif-4/600.css';

package/dist/index.js

@@ -2,3 +2,5 @@ import './variables.scss';
 import './index.css';
 import '@fontsource/readex-pro/400.css';
 import '@fontsource/readex-pro/600.css';
+import '@fontsource/source-serif-4/400.css';
+import '@fontsource/source-serif-4/600.css';

package/dist/marketing/Docs/Docs.svelte

@@ -64,6 +64,7 @@
 	<div class="nav-wrap">
 		<button
 			class="mobile-toggle hds-box"
+			class:open={mobileNavOpen}
 			onclick={(e) => {
 				e.stopPropagation();
 				mobileNavOpen = !mobileNavOpen;
@@ -76,7 +77,9 @@
 				{/if}
 				<span class="name">{page.name}</span>
 			</div>
-			<IconList size={18} />
+			<span class="mobile-toggle-icon">
+				<IconList size={18} />
+			</span>
 		</button>
 
 		<nav
@@ -113,9 +116,11 @@
 	</div>
 
 	<div class="content-wrap hds-box">
-		<content class:wide={page.wide} bind:this={contentEl}>
-			<page.content />
-		</content>
+		{#key page.slug}
+			<content class:wide={page.wide} bind:this={contentEl}>
+				<page.content />
+			</content>
+		{/key}
 	</div>
 
 	{#if !page.wide}
@@ -175,6 +180,7 @@
 			width: 100%;
 			padding: 10px 20px;
 			cursor: pointer;
+			transition: 0.15s background-color ease;
 		}
 		.mobile-toggle:hover {
 			background-color: var(--hover);
@@ -184,6 +190,14 @@
 			flex: 1;
 			text-align: left;
 		}
+
+		.mobile-toggle-icon {
+			display: inline-flex;
+			transition: 0.2s transform ease;
+		}
+		.mobile-toggle.open .mobile-toggle-icon {
+			transform: rotate(90deg);
+		}
 		.category,
 		.sep {
 			color: var(--text-light);
@@ -204,6 +218,18 @@
 		}
 		nav.open {
 			display: block;
+			animation: nav-open 0.2s ease-out;
+		}
+	}
+
+	@keyframes nav-open {
+		from {
+			opacity: 0;
+			transform: translateY(-6px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
 		}
 	}
 
@@ -261,6 +287,11 @@
 		flex: 1;
 		padding: 30px 45px;
 		min-width: 0;
+		background-image: radial-gradient(
+			ellipse 700px 300px at top right,
+			var(--accent-lightest),
+			transparent 70%
+		);
 	}
 
 	content {
@@ -268,11 +299,23 @@
 		margin: auto;
 		width: 650px;
 		max-width: 100%;
+		animation: content-in 0.35s ease;
 	}
 	content.wide {
 		width: 100%;
 	}
 
+	@keyframes content-in {
+		from {
+			opacity: 0;
+			transform: translateY(6px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
 	/* content styles */
 
 	content :global(p),
@@ -288,6 +331,7 @@
 		margin: 0 0 30px;
 		position: relative;
 		display: table;
+		font-family: var(--font-serif);
 		&:after {
 			position: absolute;
 			content: '';
@@ -295,6 +339,7 @@
 			left: 0px;
 			width: 30%;
 			height: 3px;
+			border-radius: 2px;
 			background: var(--accent);
 			margin-top: 10px;
 		}
@@ -302,6 +347,14 @@
 	content :global(a:not(.no-link-color a)) {
 		color: var(--link);
 		text-decoration: underline;
+		text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
+		transition: 0.15s text-decoration-color ease;
+	}
+	content :global(a:not(.no-link-color a):hover) {
+		text-decoration-color: var(--link);
+	}
+	content :global(p) {
+		margin: 0 0 16px;
 	}
 	content :global(li) {
 		margin-bottom: 8px;
@@ -340,6 +393,8 @@
 		transform: translateY(-50%);
 		display: inline-flex;
 		align-items: center;
+		color: var(--accent-light);
+		transition: 0.15s opacity ease;
 	}
 
 	content {

package/dist/marketing/Docs/NavItem.svelte

@@ -53,19 +53,29 @@
 	.nav-item {
 		display: flex;
 		align-items: center;
-		padding: 7px 22px;
+		padding: 7px 25px;
 		font-size: 14px;
-		border-left: 3px solid transparent;
-		transition: 0.1s background-color ease;
+		position: relative;
+		transition: 0.15s background-color ease;
 		width: 100%;
 		text-align: initial;
 	}
 
 	.nav-item.active {
-		border-left: 3px solid var(--accent);
 		background-color: var(--accent-lightest);
 	}
 
+	.nav-item.active::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 2px;
+		bottom: 2px;
+		width: 3px;
+		border-radius: 2px;
+		background: var(--accent);
+	}
+
 	.nav-item:not(.active):hover {
 		background-color: var(--hover);
 	}

package/dist/variables.scss

@@ -55,8 +55,11 @@
 	--box-radius: 20px;
 	--box-background: #fff;
 
-	--line-height-content: 26px;
+	--line-height-content: 28px;
 	--header-height: 55px;
+
+	--font-sans-serif: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
+	--font-serif: 'Source Serif 4', serif;
 }
 
 :root.dark {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.1",
+	"version": "2.1.3",
 	"license": "MIT",
 	"private": false,
 	"repository": {
@@ -60,6 +60,7 @@
 	"dependencies": {
 		"@apidevtools/json-schema-ref-parser": "^15.5.1",
 		"@fontsource/readex-pro": "^5.2.11",
+		"@fontsource/source-serif-4": "^5.3.0",
 		"@hyvor/icons": "^1.1.1",
 		"deepmerge-ts": "^7.1.5",
 		"emojibase-data": "^17.0.0",