@hyvor/design 0.0.67 → 0.0.68

package/dist/components/CodeBlock/prism.scss

@@ -1,12 +1,375 @@
-    /* PrismJS 1.26.0
+/* PrismJS 1.26.0
 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+json+markup-templating+php+twig+yaml&plugins=line-highlight+line-numbers */
-code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
-pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}@media print{.line-highlight{-webkit-print-color-adjust:exact;color-adjust:exact}}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:after,.line-numbers .line-highlight:before{content:none}pre[id].linkable-line-numbers span.line-numbers-rows{pointer-events:all}pre[id].linkable-line-numbers span.line-numbers-rows>span:before{cursor:pointer}pre[id].linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:rgba(128,128,128,.2)}
-pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
+code[class*='language-'],
+pre[class*='language-'] {
+	color: #000;
+	background: 0 0;
+	text-shadow: 0 1px #fff;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+code[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+pre[class*='language-']::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+code[class*='language-'] ::selection,
+code[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+pre[class*='language-']::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+@media print {
+	code[class*='language-'],
+	pre[class*='language-'] {
+		text-shadow: none;
+	}
+}
+pre[class*='language-'] {
+	padding: 1em;
+	margin: 0.5em 0;
+	overflow: auto;
+}
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+	background: #f5f2f0;
+}
+:not(pre) > code[class*='language-'] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+	white-space: normal;
+}
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+	color: #708090;
+}
+.token.punctuation {
+	color: #999;
+}
+.token.namespace {
+	opacity: 0.7;
+}
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+	color: #905;
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.inserted,
+.token.selector,
+.token.string {
+	color: #690;
+}
+.language-css .token.string,
+.style .token.string,
+.token.entity,
+.token.operator,
+.token.url {
+	color: #9a6e3a;
+	background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+.token.class-name,
+.token.function {
+	color: #dd4a68;
+}
+.token.important,
+.token.regex,
+.token.variable {
+	color: #e90;
+}
+.token.bold,
+.token.important {
+	font-weight: 700;
+}
+.token.italic {
+	font-style: italic;
+}
+.token.entity {
+	cursor: help;
+}
+pre[data-line] {
+	position: relative;
+	padding: 1em 0 1em 3em;
+}
+.line-highlight {
+	position: absolute;
+	left: 0;
+	right: 0;
+	padding: inherit 0;
+	margin-top: 1em;
+	background: hsla(24, 20%, 50%, 0.08);
+	background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0));
+	pointer-events: none;
+	line-height: inherit;
+	white-space: pre;
+}
+@media print {
+	.line-highlight {
+		-webkit-print-color-adjust: exact;
+		color-adjust: exact;
+	}
+}
+.line-highlight:before,
+.line-highlight[data-end]:after {
+	content: attr(data-start);
+	position: absolute;
+	top: 0.4em;
+	left: 0.6em;
+	min-width: 1em;
+	padding: 0 0.5em;
+	background-color: hsla(24, 20%, 50%, 0.4);
+	color: #f4f1ef;
+	font: bold 65%/1.5 sans-serif;
+	text-align: center;
+	vertical-align: 0.3em;
+	border-radius: 999px;
+	text-shadow: none;
+	box-shadow: 0 1px #fff;
+}
+.line-highlight[data-end]:after {
+	content: attr(data-end);
+	top: auto;
+	bottom: 0.4em;
+}
+.line-numbers .line-highlight:after,
+.line-numbers .line-highlight:before {
+	content: none;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows {
+	pointer-events: all;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
+	cursor: pointer;
+}
+pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
+	background-color: rgba(128, 128, 128, 0.2);
+}
+pre[class*='language-'].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+pre[class*='language-'].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em;
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.line-numbers-rows > span {
+	display: block;
+	counter-increment: linenumber;
+}
+.line-numbers-rows > span:before {
+	content: counter(linenumber);
+	color: #999;
+	display: block;
+	padding-right: 0.8em;
+	text-align: right;
+}
 
 /* to make jsx look the same as HTML */
-pre[class="language-tsx"] .token.class-name{color:#905}
+pre[class='language-tsx'] .token.class-name {
+	color: #905;
+}
 
 :root.dark {
-    code[class*=language-],pre[class*=language-]{color:#d4d4d4;text-shadow:none;font-family:Menlo,Monaco,Consolas,"Andale Mono","Ubuntu Mono","Courier New",monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#264f78}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#262626}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#262626}.namespace{opacity:.7}.token.boolean,.token.doctype .token.doctype-tag,.token.entity,.token.important,.token.keyword,.token.operator.arrow,.token.punctuation.interpolation-punctuation,.token.tag{color:#569cd6}.token.atrule .token.url,.token.attr-name,.token.console,.token.constant,.token.doctype .token.name,.token.exports .token.maybe-class-name,.token.imports .token.maybe-class-name,.token.interpolation,.token.parameter,.token.property,.token.variable,code[class*=language-javascript],code[class*=language-jsx],code[class*=language-tsx],code[class*=language-typescript],pre[class*=language-javascript],pre[class*=language-jsx],pre[class*=language-tsx],pre[class*=language-typescript]{color:#9cdcfe}.token.comment,.token.prolog{color:#6a9955}.language-html .language-css .token.punctuation,.language-html .language-javascript .token.punctuation,.token.atrule .token.url .token.punctuation,.token.attr-value .token.punctuation.attr-equals,.token.entity,.token.operator,.token.punctuation,code[class*=language-html],pre[class*=language-html]{color:#d4d4d4}.token.boolean,.token.constant,.token.inserted,.token.number,.token.property,.token.symbol,.token.tag,.token.unit{color:#b5cea8}.token.atrule,.token.attr-name,.token.attr-value,.token.attr-value .token.punctuation,.token.builtin,.token.char,.token.deleted,.token.selector,.token.string,code[class*=language-css],pre[class*=language-css]{color:#ce9178}.language-css .token.string.url{text-decoration:underline}.token.atrule .token.rule,.token.keyword.control-flow,.token.keyword.module{color:#c586c0}.language-regex .token.anchor,.token.atrule .token.url .token.function,.token.function,.token.function .token.maybe-class-name{color:#dcdcaa}.token.regex{color:#d16969}.token.italic{font-style:italic}.token.class-name,.token.maybe-class-name,.token.namespace{color:#4ec9b0}.token.escape,.token.selector{color:#d7ba7d}.language-html .token.punctuation,.token.cdata,.token.tag .token.punctuation{color:grey}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight.line-highlight{background:#f7ebc6;box-shadow:inset 5px 0 0 #f7d87c;z-index:0}
-}
+	code[class*='language-'],
+	pre[class*='language-'] {
+		color: #d4d4d4;
+		text-shadow: none;
+		font-family: Menlo, Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', 'Courier New', monospace;
+		direction: ltr;
+		text-align: left;
+		white-space: pre;
+		word-spacing: normal;
+		word-break: normal;
+		line-height: 1.5;
+		-moz-tab-size: 4;
+		-o-tab-size: 4;
+		tab-size: 4;
+		-webkit-hyphens: none;
+		-moz-hyphens: none;
+		-ms-hyphens: none;
+		hyphens: none;
+	}
+	code[class*='language-'] ::selection,
+	code[class*='language-']::selection,
+	pre[class*='language-'] ::selection,
+	pre[class*='language-']::selection {
+		text-shadow: none;
+		background: #264f78;
+	}
+	@media print {
+		code[class*='language-'],
+		pre[class*='language-'] {
+			text-shadow: none;
+		}
+	}
+	pre[class*='language-'] {
+		padding: 1em;
+		margin: 0.5em 0;
+		overflow: auto;
+		background: #262626;
+	}
+	:not(pre) > code[class*='language-'] {
+		padding: 0.1em 0.3em;
+		border-radius: 0.3em;
+		color: #db4c69;
+		background: #262626;
+	}
+	.namespace {
+		opacity: 0.7;
+	}
+	.token.boolean,
+	.token.doctype .token.doctype-tag,
+	.token.entity,
+	.token.important,
+	.token.keyword,
+	.token.operator.arrow,
+	.token.punctuation.interpolation-punctuation,
+	.token.tag {
+		color: #569cd6;
+	}
+	.token.atrule .token.url,
+	.token.attr-name,
+	.token.console,
+	.token.constant,
+	.token.doctype .token.name,
+	.token.exports .token.maybe-class-name,
+	.token.imports .token.maybe-class-name,
+	.token.interpolation,
+	.token.parameter,
+	.token.property,
+	.token.variable,
+	code[class*='language-javascript'],
+	code[class*='language-jsx'],
+	code[class*='language-tsx'],
+	code[class*='language-typescript'],
+	pre[class*='language-javascript'],
+	pre[class*='language-jsx'],
+	pre[class*='language-tsx'],
+	pre[class*='language-typescript'] {
+		color: #9cdcfe;
+	}
+	.token.comment,
+	.token.prolog {
+		color: #6a9955;
+	}
+	.language-html .language-css .token.punctuation,
+	.language-html .language-javascript .token.punctuation,
+	.token.atrule .token.url .token.punctuation,
+	.token.attr-value .token.punctuation.attr-equals,
+	.token.entity,
+	.token.operator,
+	.token.punctuation,
+	code[class*='language-html'],
+	pre[class*='language-html'] {
+		color: #d4d4d4;
+	}
+	.token.boolean,
+	.token.constant,
+	.token.inserted,
+	.token.number,
+	.token.property,
+	.token.symbol,
+	.token.tag,
+	.token.unit {
+		color: #b5cea8;
+	}
+	.token.atrule,
+	.token.attr-name,
+	.token.attr-value,
+	.token.attr-value .token.punctuation,
+	.token.builtin,
+	.token.char,
+	.token.deleted,
+	.token.selector,
+	.token.string,
+	code[class*='language-css'],
+	pre[class*='language-css'] {
+		color: #ce9178;
+	}
+	.language-css .token.string.url {
+		text-decoration: underline;
+	}
+	.token.atrule .token.rule,
+	.token.keyword.control-flow,
+	.token.keyword.module {
+		color: #c586c0;
+	}
+	.language-regex .token.anchor,
+	.token.atrule .token.url .token.function,
+	.token.function,
+	.token.function .token.maybe-class-name {
+		color: #dcdcaa;
+	}
+	.token.regex {
+		color: #d16969;
+	}
+	.token.italic {
+		font-style: italic;
+	}
+	.token.class-name,
+	.token.maybe-class-name,
+	.token.namespace {
+		color: #4ec9b0;
+	}
+	.token.escape,
+	.token.selector {
+		color: #d7ba7d;
+	}
+	.language-html .token.punctuation,
+	.token.cdata,
+	.token.tag .token.punctuation {
+		color: grey;
+	}
+	pre[class*='language-'] > code[class*='language-'] {
+		position: relative;
+		z-index: 1;
+	}
+	.line-highlight.line-highlight {
+		background: #f7ebc6;
+		box-shadow: inset 5px 0 0 #f7d87c;
+		z-index: 0;
+	}
+}

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -15,50 +15,50 @@ function handleClose() {
 </script>
 
 <span class="color-picker">
-    <button
-        style:width="{size}px"
-        style:height="{size}px"
-        style:background-color={color}
-        on:click={() => {
-            if (show) {
-                handleClose();
-            } else {
-                show = true;
-            }
-        }}
-    ></button>
+	<button
+		style:width="{size}px"
+		style:height="{size}px"
+		style:background-color={color}
+		on:click={() => {
+			if (show) {
+				handleClose();
+			} else {
+				show = true;
+			}
+		}}
+	></button>
 
-    {#if show}
-        <div
-            class="color-picker-wrap"
-            use:clickOutside={{
-                callback: () => handleClose(),
-            }}
-        >
-            <ColorPicker
-                bind:hex={color}
-                --input-size={size + "px"}
-                isDialog={false}
-                isAlpha={false}
-                on:input={handleInput}
-            />
-        </div>
-    {/if}
+	{#if show}
+		<div
+			class="color-picker-wrap"
+			use:clickOutside={{
+				callback: () => handleClose()
+			}}
+		>
+			<ColorPicker
+				bind:hex={color}
+				--input-size={size + 'px'}
+				isDialog={false}
+				isAlpha={false}
+				on:input={handleInput}
+			/>
+		</div>
+	{/if}
 </span>
 
 <style>
-    span {
-        position: relative;
-    }
-    button {
-        border-radius: 50%;
-        border: 1px solid var(--border);
-    }
-    div {
-        position: absolute;
-        left: 0;
-        top: 100%;
-        width: 0;
-        z-index: 1000;
-    }
+	span {
+		position: relative;
+	}
+	button {
+		border-radius: 50%;
+		border: 1px solid var(--border);
+	}
+	div {
+		position: absolute;
+		left: 0;
+		top: 100%;
+		width: 0;
+		z-index: 1000;
+	}
 </style>

package/dist/components/Dark/DarkProvider.svelte

@@ -6,12 +6,12 @@ onMount(() => {
 </script>
 
 <svelte:head>
-    <script>
-        // to prevent white screen on page load
-        // until the dark mode is initialized from the store
-        const isDarkMode = !!localStorage.getItem("scheme-dark");
-        if (isDarkMode) {
-            document.documentElement.classList.add('dark');
-        }
-    </script>
-</svelte:head>
+	<script>
+		// to prevent white screen on page load
+		// until the dark mode is initialized from the store
+		const isDarkMode = !!localStorage.getItem('scheme-dark');
+		if (isDarkMode) {
+			document.documentElement.classList.add('dark');
+		}
+	</script>
+</svelte:head>

package/dist/components/Dark/DarkToggle.svelte

@@ -6,13 +6,10 @@ function handleClick() {
 }
 </script>
 
-<IconButton
-    on:click={handleClick}
-    variant="invisible"
->
-    {#if $dark}
-        <IconMoonStarsFill size={18} />
-    {:else}
-        <IconSunFill size={18} />
-    {/if}
-</IconButton>
+<IconButton on:click={handleClick} variant="invisible">
+	{#if $dark}
+		<IconMoonStarsFill size={18} />
+	{:else}
+		<IconSunFill size={18} />
+	{/if}
+</IconButton>

package/dist/components/Divider/Divider.svelte

@@ -5,10 +5,9 @@ export let margin = 0;
 export let align = "center";
 </script>
 
-
 <div
-    class="line"
-    style="
+	class="line"
+	style="
     background-color: {color};
         height: {height}px;
         width: {width}%;
@@ -21,7 +20,7 @@ export let align = "center";
 />
 
 <style>
-    .line {
-        display: block;
-    }
-</style>
+	.line {
+		display: block;
+	}
+</style>