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 🙏

© 2026 – Pkg Stats / Ryan Hefner

@starterlib/tokens

v0.8.0

Published

Jetons de design du socle frontal starter : couleurs semantiques, echelles, contraste WCAG. Aucune dependance de rendu, Angular compris.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

arnoldkomarnoldkom

Keywords

startersocle-frontaltokens

Readme

@starterlib/tokens

Jetons de design du socle frontal starter : couleurs semantiques, echelles, themes clair et sombre, et la feuille CSS engendree depuis le TypeScript.

Aucune dependance, Angular compris. Le paquet reste donc consommable par un courriel, un document PDF ou un outil de design, et le contraste se teste sans monter le moindre composant.

Installation

pnpm add @starterlib/tokens

Feuille CSS

@import '@starterlib/tokens/styles/starter-tokens.css';

Elle pose les variables --st-* sur :root, le theme sombre sous [data-theme='sombre'] et sous prefers-color-scheme: dark, et reduit les durees sous prefers-reduced-motion. color-scheme suit le theme effectif : les controles natifs, les barres de defilement et le remplissage automatique restent dans le bon theme meme quand l'utilisateur force un theme contraire a son systeme.

Elle obeit aussi a la PERSONNE, pas seulement au theme :

  • prefers-contrast: more — le filet decoratif devient le filet fort, et le texte discret redevient du texte, par alias du theme courant ;
  • @media print — les jetons clairs, quel que soit le theme a l'ecran ;
  • html { scroll-padding-block-start: var(--st-hauteur-entete, 0px) } — la hauteur que st-app-shell mesure sur son en-tete collant, pour qu'un arret de tabulation ne remonte jamais dessous (WCAG 2.4.11). Sans coquille, zero.

Points de rupture

Un partiel Sass, engendre comme la feuille, et la meme echelle en TypeScript :

@use '@starterlib/tokens/styles/ruptures' as rupture;

.grille {
  @include rupture.depuis('lg') {
    grid-template-columns: 1fr 3fr;
  }
}
// aussi : rupture.$rupture-lg (64rem), rupture.$ruptures (la carte)
import { RUPTURES } from '@starterlib/tokens';

inject(BreakpointObserver).observe(RUPTURES.lg.requete); // '(min-width: 64rem)'
RUPTURES.lg.px; // 1024

En rem, mobile d'abord : une requete de media en rem suit la taille de police choisie par la personne dans son navigateur, la ou des px l'ignoreraient. Une valeur ecrite a la main la ou l'echelle existe est un defaut, et le socle se le garde (pnpm test sur ui).

Le theme se force par attribut, et l'attribut l'emporte dans les deux sens :

<html data-theme="sombre"></html>

API TypeScript

import { themes, contraste, echelles } from '@starterlib/tokens';
  • themes.clair et themes.sombre : couleurs semantiques.
  • echelles : espacement, typographie, rayons, ombres, durees, plans.
  • RUPTURES : les points de rupture en px, en rem et en requete de media.
  • contraste(a, b) : rapport WCAG, employe par les tests du depot.

Niveau 3 — reglages de composant

Les quelques valeurs qu'une application peut poser sans forker une feuille de style. Elles sont listees en commentaire en tete de la feuille engendree, et dans jetonsDeComposant cote TypeScript.

/* Toute l'application */
:root {
  --st-commande-rayon: var(--st-rayon-pleine);
}

/* Ou une zone seulement */
.tableau-dense {
  --st-tableau-cellule-bloc: var(--st-espacement-1);
}

| Reglage | Defaut | Pour | | ----------------------------- | -------------------------- | ------------------------------------------ | | --st-commande-hauteur | --st-cible-tactile-min | hauteur minimale des boutons et des champs | | --st-commande-rayon | --st-rayon-md | identite de marque | | --st-surface-rayon | --st-rayon-md | carte, dialogue, menu, popover | | --st-tableau-cellule-bloc | --st-espacement-3 | densite verticale d'un tableau | | --st-tableau-cellule-ligne | --st-espacement-3 | densite horizontale | | --st-tableau-largeur-case | 3rem | colonne des cases a cocher | | --st-calendrier-jour-taille | --st-cible-tactile-min | calendrier dense | | --st-anim-chargement | propre a chaque indicateur | rythme d'un indicateur d'activite | | --st-anim-respiration | 1600ms | rythme sous mouvement reduit |

⚠️ Le socle ne les DECLARE jamais : il les lit au point d'usage, avec un repli. Une declaration sur l'hote d'un composant l'emporterait sur la valeur heritee, et votre reglage n'aurait aucun effet — sans le moindre message. Une garde du depot le verifie, et le banc en vrai navigateur verifie qu'un reglage pose a la racine atteint bien les composants.

⚠️ Aucune couleur n'est ouverte ici. Une couleur se change au niveau semantique : deux sources de verite pour le meme bleu, et les paires de contraste verifiees ne garantissent plus rien.

⚠️ Un reglage ne descend pas sous un plancher d'accessibilite. Un jour de calendrier reste au-dessus de la cible minimale, quoi qu'on pose.

Garde de non-derive

Le CSS est engendre, jamais ecrit a la main — la feuille comme le partiel des ruptures. pnpm tokens:css:check echoue si un fichier livre ne correspond plus aux jetons TypeScript — meme principe que le controle de contrat cote backend.

Accessibilite

25 paires semantiques sont verifiees en AA dans les deux themes par les tests du paquet. Toute exemption porte une raison ecrite et reste perceptible.