@wix/design-system-tokens - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

package.json

		{
		"name": "@wix/design-system-tokens",
		"version": "1.3.0",
		"version": "1.3.1",
		"packageManager": "yarn@3.5.0",
		@@ -35,3 +35,3 @@ "author": "augustinasv@wix.com",
		},
		"falconPackageHash": "ad8d3b8b1ec523085179424b28dd3636f49d3b64fd877979093b1b97"
		"falconPackageHash": "0a8ddcba8e868cd4240d736cbab9ce7ab1995d42fa182a1a2ca71474"
		}

README.md

		@@ -24,1 +24,39 @@ # Wix Design System Tokens
		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](https://stylable.io/) file with `.st.css` extension. This file contains:
		1. Variable declarations using partially correct [@property rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/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](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

all.st.css