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
Usage
Accent Colors
Low (Svelte)

Dependencies

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} />