npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vasilenka-invoker

v1.0.15

Published

Meridian.id official styleguide

Downloads

98

Readme

Invoker

Craft you page, faster! 🚀

alt text

license

Table of Contents

  1. Colors
  2. Typography
  3. Space

Install

NPM

npm install --save vasilenka-invoker

Primitives

The basic building blocks for every components and pages we created.

Colors

A11y first

Semua produk yang kita buat harus memenuhi tingkat kontras WCAG AA. Kontras yang rendah akan menyulitkan orang yang memiliki daya penglihatan yang rendah, buta warna, atau ketika penggunaan dalam situasi yang tidak optimal (e.g. outdoor ketika matahari sangat cerah).

Semua palet warna di bawah ini memiliki label rasio kontras warna yang sudah diuji dengan warna putih. Untuk penggunaan pada warna selain putih, kamu dapat melakukan validasi sendiri dengan menggunakan tools berikut:

  1. https://colorable.jxnblk.com
  2. https://contrastchecker.com
  3. http://accessible-colors.com
  4. https://usecontrast.com - macOS desktop app

Tingkat kontras minimum yang dibutuhkan bergantung pada text-size dan text-weight. Text yang berukuran besar (large scale text) dan bold akan lebih mudah untuk dibaca, sedangkan text yang berukuran kecil dan regular membutuhkan level kontras yang lebih tinggi untuk lebih mudah dibaca.

Untuk memastikan produk yang kita buat memenuhi a11y, gunakan rasio kontras WCAG AA (>= 4.5) untuk small text dan WCAG AA Large (>=3.00) untuk large text.

AA Large — Legible untuk large text, yaitu text size >= 18pt untuk text style regular atau text size >= 14pt untuk style bold. Based on WCAG 2.0: https://www.w3.org/TR/WCAG20/#larger-scaledef

How to read color palette ?

alt-text alt-text

Brand Colors

Primary Colors - Jeans

Primary link and actions

$brand-primary-100 // Default for large text
$brand-primary-200 // Default for small text
$brand-primary-300 // Hover and tap

alt-text alt-text alt-text

Secondary Colors - Scarlet

Primary actions

$brand-secondary-100  // Default for large text
$brand-secondary-200  // Default for small text
$brand-secondary-300  // Hover and tap

alt-text alt-text alt-text

Dark Colors

Text colors

Semua dark colors sudah diuji dengan background putih #FFFFFF serta dan memenuhi standar contrast ratio WCAG AA. Untuk penggunaan dengan background selain warna putih silahkan lakukan pengujian lagi.

$dark-hex-70 // Heading
$dark-hex-60 // Heading and Body text in text-heavy page such as blog post
$dark-hex-50 // Body text
$dark-hex-40 // Caption and subtitle

// Alternaive colors using alpha value.
// Preferable!
$dark-alpha-70
$dark-alpha-60
$dark-alpha-50
$dark-alpha-40

alt-text alt-text alt-text alt-text

System Colors

Danger - Rose

$sys-danger-100 // Use for Danger Background or Large text
$sys-danger-200 // Default for small text
$sys-danger-300 // Hover, active, focus and tap

alt-text alt-text alt-text

Warning - Amber

Only use these palettes as background color and use at least $dark-60 as text for the warning.

$sys-warning-100
$sys-warning-200
$sys-warning-300

alt-text alt-text alt-text

Success - Verdant

$sys-success-100 // Use for success background
$sys-success-200 // Default for small text
$sys-success-300 // Hover, active, focus and tap

alt-text alt-text alt-text

Background

Use these colors for background only.

Semua background color sudah diuji dan memenuhi standar contrast WCAG AA untuk penggunaan pada warna teks $dark-50, $dark-60, dan $dark-70. Untuk penggunaan dengan teks $dark-40, dapat mengacu pada contrast ratio pada gambar masing-masing warna.

Dust

$bg-dust-100
$bg-dust-200
$bg-dust-300

alt-text alt-text alt-text

Rose

$bg-rose-100
$bg-rose-200
$bg-rose-300

alt-text alt-text alt-text

Scarlet

$bg-scarlet-100
$bg-scarlet-200
$bg-scarlet-300

alt-text alt-text alt-text

Sea

$bg-sea-100
$bg-sea-200
$bg-sea-300

alt-text alt-text alt-text

Plump

$bg-plump-100
$bg-plump-200
$bg-plump-300

alt-text alt-text alt-text

Sage

$bg-sage-100
$bg-sage-200
$bg-sage-300

alt-text alt-text alt-text

Sky

$bg-sky-100
$bg-sky-200
$bg-sky-300

alt-text alt-text alt-text

Verdant

$bg-verdant-100
$bg-verdant-200
$bg-verdant-300

alt-text alt-text alt-text

Banana

$bg-banana-100
$bg-banana-200
$bg-banana-300

alt-text alt-text alt-text

Sand

$bg-sand-100
$bg-sand-200
$bg-sand-300

alt-text alt-text alt-text

Space

Spacing tokens are used for padding, margins, and position coordinates. Semua nilai spacing dihitung berdasarkan 16px sebagai basis.

Space Step

alt-text

Space Inset

alt-text

Space Inline

alt-text

Space Stack

alt-text

Space Squish

alt-text

Space Stretch

alt-text

Typography

Text is one of the main way we can deliver the information to the user. Keeping consist and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI and to foster familiarity.

Here's a list of type scale and it's property that we used across the brand.

alt-text