Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@wix/design-system-tokens
Advanced tools
This package contains:
style-dictionary
script to process these files and create required output.style-dictionary
.If you're looking to contribute, refer to Add Tokens Guide.
Source files which are used to generate style-dictionary output are stored in src/tokens
directory in JSON format. These files are processed by style-dictionary, which transforms data into a specific structure & format and outputs files to root tokens
directory.
To generate output, run
$ yarn generate
Since this package just exports static files, the build
script is only used to prepare package for publishing by moving generated files to the root of the package to allow more elegant imports.
Build entry point is generate.ts
file which controls the execution of input parsing & output generation. Main configuration for expected output is stored in build-config.ts
file. Current solution is partly customized, we use custom Format and Transform to suit our needs.
You can find more details on Style Dictionary and its' configuration here.
Tokens are available in 2 themes - default and Studio. Default theme resides at the root of the package, while Studio theme is under the studio
directory. Each theme has files named foundation
, semantic
and component
, these correspond directly to the tiers of the tokens. File named all
contains the tokens from all of the tiers.
Style Dictionary allows to create your own output format, it's called Formats. These are our custom formats:
css/properties-stylable
It outputs Stylable file with .st.css
extension. This file contains:
.root
class.@property st-global(--wds-color-border-dark-primary);
...
.root {
--wds-color-border-dark-primary: #868aa5;
...
}
Style Dictionary supports defining your own custom token value parsers, they're called Transforms. We have several custom transforms.
color/gradient
Only applies to tokens which have attribute "type": "gradient"
. Refer to transforms/color-gradient.ts
to find object structure definition. Outputs linear-gradient function to be assigned to background
property.
background: var(--wds-color-fill-gradient-light-bottom-to-top);
shadow/box
Only applies to tokens which have attribute "type": "shadow"
. Refer to transforms/shadow.ts
to find object structure definition. Outputs shadow values to be assigned to box-shadow property.
box-shadow: var(--wds-shadow-focus-warning);
size/px-custom
Only applies to tokens which have attribute "type": "float"
. Adds px
unit to token values.
FAQs
Design system tokens
We found that @wix/design-system-tokens demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 27 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.