Skip to content
Manyone Library

Preset Manyone UI

UnoCSS preset with utility classes for Manyone UI.

Source Code

Installation

Since our @manyone packages are private on npmjs you must authenticate to install it with npm login.

If you’re not part of the Manyone organisation on npmjs.com, reach out to Caroline, Patrik or Lau.

pnpm add -D @manyone/unocss @manyone/ui

Configuration

UnoCSS Preset

To use the Manyone UI UnoCSS preset, you need to import it in your uno.config.ts file:

uno.config.ts
import { defineConfig } from 'unocss';
import { presetClamp } from '@manyone/unocss';
import { presetManyoneUI } from '@manyone/ui';


export default defineConfig({
  presets: [
    presetClamp(), // is required for this preset to work
    presetManyoneUI(),
    // ...other presets
  ],
});

If you need the breakpoints as a ts const they can be imported as well:

import { breakpoints, getBreakpoint } from '@manyone/ui';

Fonts

To get the fonts you must import the .css that register the @font-faces used in the UnoCSS preset:

Layout.astro
---
import '@manyone/ui/fonts.css';
---

Usage

This preset provide a set of utility classes for Manyone UI.

For example, you can use the following classes to style your text:

<h1 class="text-headline-lg"></h1>
<p class="text-body-md"></p>

UnoCSS Rules

Rules included covers:

  • Typography
  • Colors
  • Spacing (coming soon)

For all rules and shortcuts included in this preset, please refer directly to the source code.

Typography

text-headline-lg

text-headline-md

text-headline-sm

text-body-lg

text-body-md

text-body-sm

See more examples here.

Colors

Colors can either be used via the set theme colors in utility classes such as bg or text:

Light mode

bg-many-fg-primary

text-many-button-text

bg-many-fg-nav

text-many-button-text

bg-many-fg-secondary

text-many-fg-primary

bg-many-fg-stroke

text-many-fg-primary

bg-many-nav-button

text-many-fg-primary

bg-many-button-bg

text-many-button-text

bg-many-button-hover-bg

text-many-button-text

Dark mode

bg-many-fg-primary

text-many-button-text

bg-many-fg-nav

text-many-button-text

bg-many-fg-secondary

text-many-fg-primary

bg-many-fg-stroke

text-many-fg-primary

bg-many-nav-button

text-many-fg-primary

bg-many-button-bg

text-many-button-text

bg-many-button-hover-bg

text-many-button-text

Or you can use the CSS variables directly:

<div class="bg-[--color-theme-dark-bg-500]">
  <h1 class="text-[--color-base-deep-blue]">Hello world</h1>
  <p class="text-[--color-base-blue-100]">Lorem imsum dolar memet.</p>
</div>

They can also be imported in js/ts files:

import { colors } from '@manyone/ui';

To get an overview of all variables and theme colors check the source code.

Spacing

Might be included in the future.