Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@wix/design-system-tokens

Package Overview
Dependencies
Maintainers
26
Versions
121
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wix/design-system-tokens

Design system tokens

  • 1.15.1
  • npm
  • Socket score

Version published
Weekly downloads
1.4K
increased by45.11%
Maintainers
26
Weekly downloads
 
Created
Source

Wix Design System Tokens

This package contains:

  1. JSON files containing WDS token definitions.
  2. style-dictionary script to process these files and create required output.
  3. output generated with style-dictionary.

How it works

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 & Configuration

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.

Consumption

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.

Custom Formats

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:

  1. Variable declarations using partially correct @property rule syntax, which in this form is only valid for Stylable pre-processor.
  2. Variable definitions under .root class.
@property st-global(--wds-color-border-dark-primary);
...
.root {
  --wds-color-border-dark-primary: #868aa5;
  ...
}

Custom Transforms

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

Package last updated on 12 Apr 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc