Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
@balena/design-tokens
Advanced tools
Design tokens are small bits of design decisions that can be used across different platforms and projects. They define the visual language of a product, and help create a consistent experience across different platforms.
Practically, this package will serve two purposes:
primary.main
or quartenary.lightest
, tokens convey meaning and context. Examples: color.text.accent
or color.bg.success.strong
.npm install @balena/design-tokens
import tokens from '@balena/design-tokens';
console.log(tokens.color.text.accent.value); // outputs '#1496e1'
You can also import categories directly:
import { color } from '@balena/design-tokens';
console.log(color.text.accent.value); // outputs '#1496e1'
The file @balena/design-tokens/build/css/tokens.css
contains all the tokens as CSS custom properties.
The way you would import this file depends on the project. In a typical create-react-app
project (or similar)
you should be able to import it in a tsx file:
import '@balena/design-tokens/build/css/tokens.css';
The custom properties will be added to the :root
element, and you can use them anywhere like so:
.alert.success {
border: solid 1px var(--color-border-success);
background-color: var(--color-bg-success);
color: var(--color-text-success);
}
A JSON object containing all tokens with extra information is also available for documentation purposes.
The tokens are exported from our Figma Design System library: https://www.figma.com/file/P7wVVPymUK4ekV6QOa3i0s/Design-System?type=design&t=hi4n82bo8vGO8noO-6
The export is a 3 steps process:
tokens/design-tokens.json
with the one you downloadednpm run build
to generate the new tokens in the build
folderTODO: this process can be greatly improved by using the "Send Design Tokens to URL" feature of the plugin, which would allow for a more streamlined process.
Please replicate the settings exactly as shown in the screenshots below:
This package uses Style Dictionary to generate the tokens. The tokens are defined in tokens/design-tokens.json
, and the build process will generate the tokens in the build
folder.
npm install
npm start
npm run build
npm run test
See scripts/transform.ts
.
Custom formats were created to generate the ES module and its typescript declarations, as standard formats didn't meet our requirements:
import { color } from '@balena/design-tokens'
)The goal of this package is to offer engineers the easiest way possible to implement design decisions into their own projects. In this respect, we decided to shorten the path of the tokens as much as possible. So we don't use a "default" modifier, instead we reduce the path to the minimum:
❌ color.bg.accent.default
✅ color.bg.accent
By using a _
prefix, we can also easily filter out the default tokens from the Figma plugin in Style Dictionary CSS transform. But this is not available for JS objects, and that's the point of the flattenDefaultTokens
.
v0.11.0
FAQs
## What's this?
The npm package @balena/design-tokens receives a total of 1,118 weekly downloads. As such, @balena/design-tokens popularity was classified as popular.
We found that @balena/design-tokens demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.