@wix/design-system-tokens 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +38 -0
  2. package/all.st.css +7 -7
  3. package/component.st.css +4 -4
  4. package/package.json +2 -2
  5. package/semantic.st.css +3 -3
  6. package/studio/all.st.css +4 -4
  7. package/studio/component.st.css +4 -4
package/README.md CHANGED
@@ -21,3 +21,41 @@ You can find more details on Style Dictionary and its' configuration [here](http
21
21
 
22
22
  ## Consumption
23
23
  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.
24
+
25
+ ## Custom Formats
26
+ Style Dictionary allows to create your own output format, it's called Formats. These are our custom formats:
27
+
28
+ ### `css/properties-stylable`
29
+
30
+ It outputs [Stylable](https://stylable.io/) file with `.st.css` extension. This file contains:
31
+ 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.
32
+ 2. Variable definitions under `.root` class.
33
+
34
+ ```
35
+ @property st-global(--wds-color-border-dark-primary);
36
+ ...
37
+ .root {
38
+ --wds-color-border-dark-primary: #868aa5;
39
+ ...
40
+ }
41
+ ```
42
+
43
+ ## Custom Transforms
44
+ Style Dictionary supports defining your own custom token value parsers, they're called Transforms. We have several custom transforms.
45
+
46
+ ### `color/gradient`
47
+ 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.
48
+
49
+ ```
50
+ background: var(--wds-color-fill-gradient-light-bottom-to-top);
51
+ ```
52
+
53
+ ### `shadow/box`
54
+ 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.
55
+
56
+ ```
57
+ box-shadow: var(--wds-shadow-focus-warning);
58
+ ```
59
+
60
+ ### `size/px-custom`
61
+ Only applies to tokens which have attribute `"type": "float"`. Adds `px` unit to token values.
package/all.st.css CHANGED
@@ -755,8 +755,8 @@
755
755
  @property st-global(--wds-tag-size-small);
756
756
  @property st-global(--wds-tag-size-tiny);
757
757
  @property st-global(--wds-testimonial-list-gap);
758
- @property st-global(--wds-thumbnails-border);
759
- @property st-global(--wds-thumbnails-gap);
758
+ @property st-global(--wds-thumbnail-border-radius);
759
+ @property st-global(--wds-thumbnail-gap);
760
760
  @property st-global(--wds-toggle-button-padding-left-large);
761
761
  @property st-global(--wds-toggle-button-padding-left-large-round);
762
762
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -1033,10 +1033,10 @@
1033
1033
  --wds-color-fill-accent-8: #CC180B;
1034
1034
  --wds-color-fill-accent-9: #59005F;
1035
1035
  --wds-color-fill-accent-10: #1F8845;
1036
- --wds-color-fill-ai-primary: #5a48f5;
1037
- --wds-color-fill-ai-primary-active: #5a48f5;
1036
+ --wds-color-fill-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
1037
+ --wds-color-fill-ai-primary-active: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
1038
1038
  --wds-color-fill-ai-primary-disabled: rgba(0, 6, 36, .3);
1039
- --wds-color-fill-ai-primary-hover: #4d3dd0;
1039
+ --wds-color-fill-ai-primary-hover: linear-gradient(81deg, #0021FF -177.08%, #116DFF 31.96%, #5FF2AE 99.97%);
1040
1040
  --wds-color-fill-ai-secondary: #d6d1fc;
1041
1041
  --wds-color-fill-ai-secondary-active: #d6d1fc;
1042
1042
  --wds-color-fill-ai-secondary-disabled: rgba(0, 6, 36, .1);
@@ -1564,8 +1564,8 @@
1564
1564
  --wds-tag-size-small: 24px;
1565
1565
  --wds-tag-size-tiny: 18px;
1566
1566
  --wds-testimonial-list-gap: 30px;
1567
- --wds-thumbnails-border: 6px;
1568
- --wds-thumbnails-gap: 12px;
1567
+ --wds-thumbnail-border-radius: 6px;
1568
+ --wds-thumbnail-gap: 12px;
1569
1569
  --wds-toggle-button-padding-left-large: 9px;
1570
1570
  --wds-toggle-button-padding-left-large-round: 12px;
1571
1571
  --wds-toggle-button-padding-left-medium: 6px;
package/component.st.css CHANGED
@@ -289,8 +289,8 @@
289
289
  @property st-global(--wds-tag-size-small);
290
290
  @property st-global(--wds-tag-size-tiny);
291
291
  @property st-global(--wds-testimonial-list-gap);
292
- @property st-global(--wds-thumbnails-border);
293
- @property st-global(--wds-thumbnails-gap);
292
+ @property st-global(--wds-thumbnail-border-radius);
293
+ @property st-global(--wds-thumbnail-gap);
294
294
  @property st-global(--wds-toggle-button-padding-left-large);
295
295
  @property st-global(--wds-toggle-button-padding-left-large-round);
296
296
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -632,8 +632,8 @@
632
632
  --wds-tag-size-small: 24px;
633
633
  --wds-tag-size-tiny: 18px;
634
634
  --wds-testimonial-list-gap: 30px;
635
- --wds-thumbnails-border: 6px;
636
- --wds-thumbnails-gap: 12px;
635
+ --wds-thumbnail-border-radius: 6px;
636
+ --wds-thumbnail-gap: 12px;
637
637
  --wds-toggle-button-padding-left-large: 9px;
638
638
  --wds-toggle-button-padding-left-large-round: 12px;
639
639
  --wds-toggle-button-padding-left-medium: 6px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -32,5 +32,5 @@
32
32
  "groupId": "com.wixpress"
33
33
  }
34
34
  },
35
- "falconPackageHash": "ad8d3b8b1ec523085179424b28dd3636f49d3b64fd877979093b1b97"
35
+ "falconPackageHash": "0a8ddcba8e868cd4240d736cbab9ce7ab1995d42fa182a1a2ca71474"
36
36
  }
package/semantic.st.css CHANGED
@@ -398,10 +398,10 @@
398
398
  --wds-color-fill-accent-8: #CC180B;
399
399
  --wds-color-fill-accent-9: #59005F;
400
400
  --wds-color-fill-accent-10: #1F8845;
401
- --wds-color-fill-ai-primary: #5a48f5;
402
- --wds-color-fill-ai-primary-active: #5a48f5;
401
+ --wds-color-fill-ai-primary: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
402
+ --wds-color-fill-ai-primary-active: linear-gradient(60deg, #0021FF 0%, #116DFF 65%, #5FF2AE 96%);
403
403
  --wds-color-fill-ai-primary-disabled: rgba(0, 6, 36, .3);
404
- --wds-color-fill-ai-primary-hover: #4d3dd0;
404
+ --wds-color-fill-ai-primary-hover: linear-gradient(81deg, #0021FF -177.08%, #116DFF 31.96%, #5FF2AE 99.97%);
405
405
  --wds-color-fill-ai-secondary: #d6d1fc;
406
406
  --wds-color-fill-ai-secondary-active: #d6d1fc;
407
407
  --wds-color-fill-ai-secondary-disabled: rgba(0, 6, 36, .1);
package/studio/all.st.css CHANGED
@@ -728,8 +728,8 @@
728
728
  @property st-global(--wds-tag-size-small);
729
729
  @property st-global(--wds-tag-size-tiny);
730
730
  @property st-global(--wds-testimonial-list-gap);
731
- @property st-global(--wds-thumbnails-border);
732
- @property st-global(--wds-thumbnails-gap);
731
+ @property st-global(--wds-thumbnail-border-radius);
732
+ @property st-global(--wds-thumbnail-gap);
733
733
  @property st-global(--wds-toggle-button-padding-left-large);
734
734
  @property st-global(--wds-toggle-button-padding-left-large-round);
735
735
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -1510,8 +1510,8 @@
1510
1510
  --wds-tag-size-small: 24px;
1511
1511
  --wds-tag-size-tiny: 20px;
1512
1512
  --wds-testimonial-list-gap: 24px;
1513
- --wds-thumbnails-border: 4px;
1514
- --wds-thumbnails-gap: 12px;
1513
+ --wds-thumbnail-border-radius: 4px;
1514
+ --wds-thumbnail-gap: 12px;
1515
1515
  --wds-toggle-button-padding-left-large: 8px;
1516
1516
  --wds-toggle-button-padding-left-large-round: 12px;
1517
1517
  --wds-toggle-button-padding-left-medium: 6px;
package/studio/component.st.css CHANGED
@@ -289,8 +289,8 @@
289
289
  @property st-global(--wds-tag-size-small);
290
290
  @property st-global(--wds-tag-size-tiny);
291
291
  @property st-global(--wds-testimonial-list-gap);
292
- @property st-global(--wds-thumbnails-border);
293
- @property st-global(--wds-thumbnails-gap);
292
+ @property st-global(--wds-thumbnail-border-radius);
293
+ @property st-global(--wds-thumbnail-gap);
294
294
  @property st-global(--wds-toggle-button-padding-left-large);
295
295
  @property st-global(--wds-toggle-button-padding-left-large-round);
296
296
  @property st-global(--wds-toggle-button-padding-left-medium);
@@ -632,8 +632,8 @@
632
632
  --wds-tag-size-small: 24px;
633
633
  --wds-tag-size-tiny: 20px;
634
634
  --wds-testimonial-list-gap: 24px;
635
- --wds-thumbnails-border: 4px;
636
- --wds-thumbnails-gap: 12px;
635
+ --wds-thumbnail-border-radius: 4px;
636
+ --wds-thumbnail-gap: 12px;
637
637
  --wds-toggle-button-padding-left-large: 8px;
638
638
  --wds-toggle-button-padding-left-large-round: 12px;
639
639
  --wds-toggle-button-padding-left-medium: 6px;