@hyvor/design 0.0.67 → 0.0.68

package/dist/marketing/Header/Header.svelte

@@ -11,20 +11,18 @@ export let darkToggle = true;
 </script>
 
 <header>
-
 	<Container as="nav">
-
 		<div class="nav-start">
-            <a class="nav-brand" href="/">
-                <img src={logo} alt="Hyvor Logo" width="30" height="30" />
+			<a class="nav-brand" href="/">
+				<img src={logo} alt="Hyvor Logo" width="30" height="30" />
 				<span class="brand-product">
 					<span class="brand">{name}</span>
 					{#if subName}
 						<span class="product">{subName}</span>
 					{/if}
 				</span>
-            </a>
-        </div>
+			</a>
+		</div>
 
 		<div class="nav-center">
 			<slot name="center" />
@@ -35,7 +33,6 @@ export let darkToggle = true;
 		</div>
 
 		<div class="dark-mobile">
-
 			{#if darkToggle}
 				<span class="dark-toggle-wrap">
 					<DarkToggle />
@@ -60,15 +57,11 @@ export let darkToggle = true;
 					</div>
 				</Dropdown>
 			</span> -->
-
 		</div>
 
 		<span class="mobile-nav-wrap">
 			<Dropdown align="end" width={300}>
-				<IconButton 
-					variant="invisible" 
-					slot="trigger"
-				>
+				<IconButton variant="invisible" slot="trigger">
 					<IconList size={18} />
 				</IconButton>
 				<div slot="content" class="mobile-content">
@@ -81,9 +74,7 @@ export let darkToggle = true;
 				</div>
 			</Dropdown>
 		</span>
-
 	</Container>
-
 </header>
 
 <div class="header-space" />
@@ -184,7 +175,8 @@ header :global(nav) {
     display: inline-block;
   }
 }
-.mobile-content, .mobile-inner {
+.mobile-content,
+.mobile-inner {
   display: flex;
   flex-direction: column;
 }

package/dist/marketing/Logo/LogoBlogs.svelte

@@ -0,0 +1,41 @@
+<script>export let size = 40;
+</script>
+
+<svg width={size} height={size} viewBox="0 0 132.29166 132.29167" version="1.1">
+	<g id="layer1">
+		<g id="g1067">
+			<rect
+				style="mix-blend-mode:normal;fill:#f1e8e8;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				id="rect1001"
+				width="77.870262"
+				height="123.57672"
+				x="26.535261"
+				y="5.0260782"
+				ry="38.935131"
+				transform="rotate(-0.58211807)"
+			/>
+			<path
+				id="path1003"
+				style="mix-blend-mode:normal;fill:#896c6b;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				d="m 105.07895,65.75026 0.23219,22.852048 C 105.53028,110.17126 88.342531,127.71185 66.773582,127.931 45.204632,128.15014 27.664036,110.96239 27.44489,89.393446 L 27.212709,66.541399 Z"
+			/>
+			<g id="g1011" transform="matrix(1.0727824,0,0,1.0727824,-4.7282157,-11.786447)">
+				<path
+					id="path1005"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 59.684412,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1007"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 86.142762,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1009"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 72.699971,55.496735 c 0,2.381274 -3.065933,4.311677 -6.847956,4.311677 -3.782022,0 -6.847956,-1.930403 -6.847956,-4.311677"
+				/>
+			</g>
+		</g>
+	</g>
+</svg>

package/dist/marketing/Logo/LogoBlogs.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoBlogsProps = typeof __propDef.props;
+export type LogoBlogsEvents = typeof __propDef.events;
+export type LogoBlogsSlots = typeof __propDef.slots;
+export default class LogoBlogs extends SvelteComponent<LogoBlogsProps, LogoBlogsEvents, LogoBlogsSlots> {
+}
+export {};

package/dist/marketing/Logo/LogoCore.svelte

@@ -0,0 +1,41 @@
+<script>export let size = 40;
+</script>
+
+<svg width={size} height={size} viewBox="0 0 500 500" version="1.1">
+	<g id="layer1">
+		<g id="g5140" transform="translate(-986.41349,-538.31731)">
+			<rect
+				style="mix-blend-mode:normal;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:27.0548;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				id="rect1001"
+				width="294.31281"
+				height="467.06161"
+				x="1081.1842"
+				y="567.30737"
+				ry="147.1564"
+				transform="rotate(-0.582118)"
+			/>
+			<path
+				id="path1003"
+				style="mix-blend-mode:normal;fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:27.0548;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				d="m 1383.5623,786.82223 0.8775,86.36995 c 0.8283,81.52045 -64.1333,147.81562 -145.6537,148.64392 -81.5205,0.8282 -147.8157,-64.13337 -148.6439,-145.65379 l -0.8776,-86.36995 z"
+			/>
+			<g id="g1011" transform="matrix(4.0546107,0,0,4.0546107,968.54304,493.77011)">
+				<path
+					id="path1005"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 59.684412,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1007"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 86.142762,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1009"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 72.699971,55.496735 c 0,2.381274 -3.065933,4.311677 -6.847956,4.311677 -3.782022,0 -6.847956,-1.930403 -6.847956,-4.311677"
+				/>
+			</g>
+		</g>
+	</g>
+</svg>

package/dist/marketing/Logo/LogoCore.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoCoreProps = typeof __propDef.props;
+export type LogoCoreEvents = typeof __propDef.events;
+export type LogoCoreSlots = typeof __propDef.slots;
+export default class LogoCore extends SvelteComponent<LogoCoreProps, LogoCoreEvents, LogoCoreSlots> {
+}
+export {};

package/dist/marketing/Logo/LogoFortguard.svelte

@@ -0,0 +1,49 @@
+<script>export let size = 40;
+</script>
+
+<svg width={size} height={size} viewBox="0 0 132.29166 132.29167" version="1.1">
+	<defs id="defs959" />
+	<sodipodi:namedview
+		id="base"
+		pagecolor="#ffffff"
+		bordercolor="#666666"
+		borderopacity="1.0"
+		units="px"
+	/>
+	<g id="layer1">
+		<g id="g1067">
+			<rect
+				style="mix-blend-mode:normal;fill:#fbf7ff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				id="rect1001"
+				width="77.870262"
+				height="123.57672"
+				x="26.535261"
+				y="5.0260782"
+				ry="38.935131"
+				transform="rotate(-0.58211807)"
+			/>
+			<path
+				id="path1003"
+				style="mix-blend-mode:normal;fill:#836096;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:7.15826;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+				d="m 105.07895,65.75026 0.23219,22.852048 C 105.53028,110.17126 88.342531,127.71185 66.773582,127.931 45.204632,128.15014 27.664036,110.96239 27.44489,89.393446 L 27.212709,66.541399 Z"
+			/>
+			<g id="g1011" transform="matrix(1.0727824,0,0,1.0727824,-4.7282157,-11.786447)">
+				<path
+					id="path1005"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 59.684412,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1007"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 86.142762,40.713463 c 0,-2.381274 -3.065933,-4.311677 -6.847956,-4.311677 -3.782022,0 -6.847956,1.930403 -6.847956,4.311677"
+				/>
+				<path
+					id="path1009"
+					style="fill:none;stroke:#000000;stroke-width:6.19866;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+					d="m 72.699971,55.496735 c 0,2.381274 -3.065933,4.311677 -6.847956,4.311677 -3.782022,0 -6.847956,-1.930403 -6.847956,-4.311677"
+				/>
+			</g>
+		</g>
+	</g>
+</svg>

package/dist/marketing/Logo/LogoFortguard.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoFortguardProps = typeof __propDef.props;
+export type LogoFortguardEvents = typeof __propDef.events;
+export type LogoFortguardSlots = typeof __propDef.slots;
+export default class LogoFortguard extends SvelteComponent<LogoFortguardProps, LogoFortguardEvents, LogoFortguardSlots> {
+}
+export {};

package/dist/marketing/Logo/LogoTalk.svelte

@@ -0,0 +1,27 @@
+<script>export let size = 40;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 132.292 132.292"
+	><g stroke-width="7.158" stroke="#000" fill-rule="evenodd"
+		><rect
+			width="77.87"
+			height="123.577"
+			x="26.535"
+			y="5.026"
+			ry="38.935"
+			transform="rotate(359.418)"
+			fill="#fff3d3"
+		/><path
+			d="M105.079 65.75l.232 22.852c.219 21.569-16.969 39.11-38.538 39.329s-39.11-16.969-39.329-38.538l-.232-22.852z"
+			fill="#ffd969"
+		/></g
+	><path
+		d="M59.3 31.89c0-2.555-3.289-4.625-7.346-4.625s-7.346 2.071-7.346 4.625m43.076 0c0-2.555-3.289-4.625-7.346-4.625s-7.346 2.071-7.346 4.625m.271 15.859c0 2.555-3.289 4.625-7.346 4.625s-7.346-2.071-7.346-4.625"
+		stroke="#000"
+		paint-order="stroke fill markers"
+		fill="none"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="6.65"
+	/></svg
+>

package/dist/marketing/Logo/LogoTalk.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LogoTalkProps = typeof __propDef.props;
+export type LogoTalkEvents = typeof __propDef.events;
+export type LogoTalkSlots = typeof __propDef.slots;
+export default class LogoTalk extends SvelteComponent<LogoTalkProps, LogoTalkEvents, LogoTalkSlots> {
+}
+export {};

package/dist/stores/dark.js

@@ -1,25 +1,25 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 export const dark = writable(false);
 export function setInitialState() {
     const isDark = isDarkScheme();
     if (isDark) {
         dark.set(true);
     }
-    dark.subscribe(isDark => {
+    dark.subscribe((isDark) => {
         if (isDark) {
-            document.documentElement.classList.add("dark");
-            window.localStorage.setItem("scheme-dark", "true");
+            document.documentElement.classList.add('dark');
+            window.localStorage.setItem('scheme-dark', 'true');
         }
         else {
-            document.documentElement.classList.remove("dark");
-            window.localStorage.removeItem("scheme-dark");
+            document.documentElement.classList.remove('dark');
+            window.localStorage.removeItem('scheme-dark');
         }
     });
 }
 function isDarkScheme() {
-    const localStorageData = window.localStorage.getItem("scheme-dark");
+    const localStorageData = window.localStorage.getItem('scheme-dark');
     if (localStorageData) {
         return !!localStorageData;
     }
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }

package/dist/variables.scss

@@ -1,86 +1,79 @@
 /* variables */
 :root {
-
-    /**
+	/**
     * Each app should have its own accent colors
     * --accent should be usable with light text
     * --accent-light and --accent-lightest should be usable with dark text
     */
-    --accent: #000;
+	--accent: #000;
 	--accent-light: #bdbdbd;
 	--accent-lightest: #fafafa;
-    --accent-text: #fff;
-
+	--accent-text: #fff;
 
 	--border: #e1e1e1;
 
-    --text: #000;
-    --text-light: #777;
+	--text: #000;
+	--text-light: #777;
 	--text-white: #fff;
 
-
-    /* 
+	/* 
     * Generally used colors
     * In most cases, no need to extend these colors
     */
-    --green-light: #cadfca;
-    --green: #5d995d;
-    --green-dark: #335c33;
-
-    --red-dark:#ab2525;
-    --red:#db7474;
-    --red-light:#ffdfdf;
+	--green-light: #cadfca;
+	--green: #5d995d;
+	--green-dark: #335c33;
 
-    --blue-dark: #334b81;
-    --blue:#5875b9;
-    --blue-light: #dae5ff;
+	--red-dark: #ab2525;
+	--red: #db7474;
+	--red-light: #ffdfdf;
 
-    --orange-dark: #8b5b04;
-    --orange: #e2b500;
-    --orange-light: #efe3b4;
+	--blue-dark: #334b81;
+	--blue: #5875b9;
+	--blue-light: #dae5ff;
 
-    --gray-light: #ddd;
-    --gray: #999;
-    --gray-dark: #555;
+	--orange-dark: #8b5b04;
+	--orange: #e2b500;
+	--orange-light: #efe3b4;
 
+	--gray-light: #ddd;
+	--gray: #999;
+	--gray-dark: #555;
 
-    --hover: #fafafa;
+	--hover: #fafafa;
 	--link: #1d85d2;
 
-    --input: #f3f3f3;
-    --input-hover: #ccc; /* checkbox/radio */
+	--input: #f3f3f3;
+	--input-hover: #ccc; /* checkbox/radio */
 
-    --box-shadow: 0 0 30px #0000000d;
-    --box-shadow-light: 0 0 10px 6px rgba(0,0,0,.06);
-    --box-radius: 20px;
-    --box-background: #fff;
-
-    --line-height-content: 26px;
-    --header-height: 55px;
+	--box-shadow: 0 0 30px #0000000d;
+	--box-shadow-light: 0 0 10px 6px rgba(0, 0, 0, 0.06);
+	--box-radius: 20px;
+	--box-background: #fff;
 
+	--line-height-content: 26px;
+	--header-height: 55px;
 }
 
 :root.dark {
+	--background: #000;
 
-    --background: #000;
-
-    --text: #fff;
-    --text-light: #999;
-    --box-background: #1c1c1c;
-
-    --accent-light: #555;
-    --accent-lightest: #333;
+	--text: #fff;
+	--text-light: #999;
+	--box-background: #1c1c1c;
 
-    --border: #4a4a4a;
-    --link: #7cb6e1;
-    --hover: #232323;
+	--accent-light: #555;
+	--accent-lightest: #333;
 
-    --input: #333;
+	--border: #4a4a4a;
+	--link: #7cb6e1;
+	--hover: #232323;
 
+	--input: #333;
 }
 
 $breakpoint-xs: 320px;
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
-$breakpoint-xl: 1200px;
+$breakpoint-xl: 1200px;

package/package.json

@@ -1,60 +1,61 @@
 {
-    "name": "@hyvor/design",
-    "version": "0.0.67",
-    "license": "MIT",
-    "private": false,
-    "scripts": {
-        "dev": "vite dev",
-        "build": "vite build && npm run package",
-        "preview": "vite preview",
-        "package": "svelte-kit sync && svelte-package && publint",
-        "prepublishOnly": "npm run package",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-    },
-    "exports": {
-        "./components": {
-            "types": "./dist/components/index.d.ts",
-            "svelte": "./dist/components/index.js"
-        },
-        "./marketing": {
-            "types": "./dist/marketing/index.d.ts",
-            "svelte": "./dist/marketing/index.js"
-        }
-    },
-    "files": [
-        "dist",
-        "!dist/**/*.test.*",
-        "!dist/**/*.spec.*"
-    ],
-    "peerDependencies": {
-        "@sveltejs/kit": "^2.0.0",
-        "sass": "^1.68.0",
-        "svelte": "^4.0.0"
-    },
-    "devDependencies": {
-        "@sveltejs/adapter-static": "^3.0.0",
-        "@sveltejs/package": "^2.0.0",
-        "@sveltejs/vite-plugin-svelte": "^3.0.0",
-        "publint": "^0.1.9",
-        "svelte": "^4.0.5",
-        "svelte-check": "^3.4.3",
-        "tslib": "^2.4.1",
-        "typescript": "^5.0.0",
-        "vite": "^5.0.0"
-    },
-    "dependencies": {
-        "@fontsource/readex-pro": "^5.0.8",
-        "@hyvor/icons": "^0.0.3",
-        "deepmerge-ts": "^5.1.0",
-        "highlight.js": "^11.9.0",
-        "intl-messageformat": "^10.5.11",
-        "npm": "^10.4.0",
-        "svelte-awesome-color-picker": "^3.0.4",
-        "tocbot": "^4.25.0"
-    },
-    "type": "module",
-    "publishConfig": {
-        "access": "public"
-    }
+	"name": "@hyvor/design",
+	"version": "0.0.68",
+	"license": "MIT",
+	"private": false,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"exports": {
+		"./components": {
+			"types": "./dist/components/index.d.ts",
+			"svelte": "./dist/components/index.js"
+		},
+		"./marketing": {
+			"types": "./dist/marketing/index.d.ts",
+			"svelte": "./dist/marketing/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"@sveltejs/kit": "^2.0.0",
+		"sass": "^1.68.0",
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^3.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"publint": "^0.1.9",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.0"
+	},
+	"dependencies": {
+		"@fontsource/readex-pro": "^5.0.8",
+		"@hyvor/icons": "^0.0.3",
+		"deepmerge-ts": "^5.1.0",
+		"highlight.js": "^11.9.0",
+		"intl-messageformat": "^10.5.11",
+		"svelte-awesome-color-picker": "^3.0.4",
+		"tocbot": "^4.25.0"
+	},
+	"type": "module",
+	"publishConfig": {
+		"access": "public"
+	}
 }