Hyvor Design System (HDS)

Hyvor Design System, HDS, is a collection of Svelte UI components for building HYVOR products. It is open-source and you can view the source code on Github. However, it is not recommended to use HDS on non-HYVOR projects as it is not designed to be a general-purpose UI library.

HDS across HYVOR

We are incrementally adopting HDS in our products. Here is the current status:

Product

Accent Colors

Dependencies

Front-end: Svelte and SvelteKit (static only)
Font: Readex Pro (via @fontsource/readex-pro)
Icons: Bootstrap Icons

Variables

Each HYVOR product has a different accent color scheme, while most of the other colors are the same. See src/lib/variables.css for all available variables. In most cases, you will only have to change the following variables for each product:

:root {
    --accent: #000;
    --accent-light: #bdbdbd;
    --accent-lightest: #fafafa;
}

--accent - The accent color of the product. Used for buttons, links, etc. Must be a dark color to be used with white text.
--accent-light - A lighter version of the accent color. Used for hover effects. Must be a light color to be used with dark text.
--accent-lightest - A very light version of the accent color. Used for backgrounds. Must be closer to white.

Installation

First, install these two packages:

npm i @hyvor/design
npm i @hyvor/icons

Next, wrap the main layout with <Base>. This component handles a few features like dark mode and internationalization.

// src/routes/+layout.svelte
<script>
    import { Base } from "@hyvor/design/components";
</script>

<Base>
    <slot />
</Base>

Then, use the other components as you need!

Import basic components from @hyvor/design/components
Import marketing components from @hyvor/design/marketing
Import icons from @hyvor/icons. See Icons below for more information.

<script>
    import { TextInput, Checkbox } from "@hyvor/design/components";
    import { DocsNav, Header } from '@hyvor/design/marketing';
    import { IconSearch } from '@hyvor/icons';
</script>

<IconSearch size={14} />

Icons

HDS uses Bootstrap Icons for icons, which contains over 2000 icons. Svelte components for each icon are available in the @hyvor/icons package. In addition to general SVG attributes, the svelte component supports size to set the width and height of the icon.

<script>
    import { IconSearch } from "@hyvor/icons";
</script>

<Search size={14} />

Events

Form elements in HDS forward the following events from the underlying HTML elements:

on:keyup
on:keydown
on:keypress
on:focus
on:blur
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:change
on:input (only <TextInput> and <Textarea>)

<Checkbox on:change={handleFocus} />