npmpackage.info

@paprika/tokens

🌶 A robust + accessible UI component library for React applications by Galvanize.

3.0.0

MIT

JavaScript

2.92 kB

3,001,394 1.8

Installations

npm install @paprika/tokens

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.19.0

NPM Version

8.19.3 Score

84.2

Supply Chain

85.2

Quality

80.4

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

10

Total

1,116

Closed

142

Merged

964

Issues

Open

45

Total

199

Closed

154

Releases

Unable to fetch releases

Contributors

378

Unable to fetch Contributors

View all 378 contributors

Languages

JavaScript

MDX

TypeScript

SCSS

PHP

Makefile

HTML

JavaScript (89.35%)

MDX (5.86%)

TypeScript (4.33%)

SCSS (0.39%)

PHP (0.06%)

Makefile (0.01%)

Developer

acl-services

Download Statistics

Total Downloads

3,001,394

Last Day

1,848

Last Week

8,202

Last Month

36,323

Last Year

414,104

GitHub Statistics

54 Stars

7,140 Commits

9 Forks

43 Watching

85 Branches

378 Contributors

Bundle Size

7.74 kB

Minified

2.92 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

3.0.0

Package Id

@paprika/tokens@3.0.0

Unpacked Size

58.98 kB

Size

12.44 kB

File Count

NPM Version

8.19.3

Node Version

16.19.0

Publised On

18 Feb 2023

Total Downloads

Cumulative downloads

Total Downloads

3,001,394

Last day

40%

1,848

Compared to previous day

Last week

-21.7%

8,202

Compared to previous week

Last month

21.8%

36,323

Compared to previous month

Last year

-54.3%

414,104

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

@paprika/tokens

Description

The tokens package is the implementation of the Starling Design System's design tokens for use with Sass and JavaScript (for use with styled-components).

They include an extensive colour palette, spacing values, and other CSS properties to keep the styling conssitent for apps created with Paprika.

On the Paprika wiki pages, you can read more about using design tokens.

The Starling Design System site has a tokens reference page.

Installation

1yarn add @paprika/tokens

or with npm:

1npm install @paprika/tokens

Usage

tokens are intended for use internally and externally.

Internally, when contributors create Paprika components, and externally, when application developers consume Paprika to create user interfaces with the Starling Design System.

Consumers

Typically consumers will be using tokens with Sass. They can be included in any Sass file with:

1@import "@paprika/tokens/lib/tokens.scss";

Then you should be able to use variables like $space and $color--black-lighten-10.

Contributors

When using tokens in Paprika, or even in an application that uses styled-components or another CSS-in-JS framework, the tokens can be imported with:

1import tokens from "@paprika/tokens";

Then you can access the tokens from that tokens object, like tokens.space or tokens.color.blackLighten10.

With styled-components you will usually use them in a template string, interpolated like ${tokens.space}.

Adding New Tokens

The source file for the tokens is src/tokens.yaml. New tokens can be added there and then generated for Sass, JavaScript and even for the Starling Design System reference page by running the folloing in the packages/Tokens directory:

1yarn pretranspile

Which will generate the following:

tokens.js
tokens.json
tokens.scss
tokens.md

Links

No vulnerabilities found.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

46 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-p3vf-v8qc-cwcr
Warn: Project is vulnerable to: GHSA-gx9m-whjm-85jf
Warn: Project is vulnerable to: GHSA-mmhx-hmjr-r674
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

1.8

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@paprika/tokens

Installations

Developer Guide

Yes

CommonJS

16.19.0

8.19.3

Score

Pull Requests

10

1,116

142

964

Issues

45

199

154

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

acl-services

Download Statistics

GitHub Statistics

Bundle Size

7.74 kB

2.92 kB

Maintainers

Package Meta Information

Total Downloads

3,001,394

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@paprika/tokens

Description

Installation

Usage

Consumers

Contributors

Adding New Tokens

Links

10

10

0

0

0

0

0

0

0

0

1.8

/10