@wix/design-system-tokens 1.3.0 → 1.3.2

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 (8) hide show
  1. package/README.md +38 -0
  2. package/all.st.css +15 -15
  3. package/component.st.css +9 -9
  4. package/foundation.st.css +1 -1
  5. package/package.json +2 -2
  6. package/semantic.st.css +5 -5
  7. package/studio/all.st.css +9 -9
  8. package/studio/component.st.css +9 -9
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
@@ -480,7 +480,7 @@
480
480
  @property st-global(--wds-field-set-gap-large);
481
481
  @property st-global(--wds-field-set-gap-medium);
482
482
  @property st-global(--wds-field-set-gap-small);
483
- @property st-global(--wds-field-set-gap-tiny);
483
+ @property st-global(--wds-field-set-label-gap);
484
484
  @property st-global(--wds-font-family-default);
485
485
  @property st-global(--wds-font-letter-spacing-0);
486
486
  @property st-global(--wds-font-letter-spacing-100);
@@ -521,7 +521,7 @@
521
521
  @property st-global(--wds-font-weight-bold);
522
522
  @property st-global(--wds-font-weight-medium);
523
523
  @property st-global(--wds-font-weight-regular);
524
- @property st-global(--wds-form-field-gap);
524
+ @property st-global(--wds-form-field-label-gap);
525
525
  @property st-global(--wds-gallery-item-border);
526
526
  @property st-global(--wds-gallery-item-padding-left-medium);
527
527
  @property st-global(--wds-gallery-item-padding-left-small);
@@ -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);
@@ -1288,8 +1288,8 @@
1288
1288
  --wds-feature-list-gap: 30px;
1289
1289
  --wds-field-set-gap-large: 18px;
1290
1290
  --wds-field-set-gap-medium: 12px;
1291
- --wds-field-set-gap-small: 9px;
1292
- --wds-field-set-gap-tiny: 6px;
1291
+ --wds-field-set-gap-small: 6px;
1292
+ --wds-field-set-label-gap: 9px;
1293
1293
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1294
1294
  --wds-font-letter-spacing-0: 0;
1295
1295
  --wds-font-letter-spacing-100: 1px;
@@ -1298,7 +1298,7 @@
1298
1298
  --wds-font-line-height-300: 24px;
1299
1299
  --wds-font-line-height-400: 28px;
1300
1300
  --wds-font-line-height-500: 36px;
1301
- --wds-font-line-height-body-extra-tiny: 18px;
1301
+ --wds-font-line-height-body-extra-tiny: 12px;
1302
1302
  --wds-font-line-height-body-medium: 28px;
1303
1303
  --wds-font-line-height-body-small: 18px;
1304
1304
  --wds-font-line-height-body-tiny: 18px;
@@ -1308,7 +1308,7 @@
1308
1308
  --wds-font-line-height-heading-4: 24px;
1309
1309
  --wds-font-line-height-heading-5: 24px;
1310
1310
  --wds-font-line-height-heading-6: 18px;
1311
- --wds-font-size-100: 11px;
1311
+ --wds-font-size-100: 10px;
1312
1312
  --wds-font-size-200: 12px;
1313
1313
  --wds-font-size-300: 14px;
1314
1314
  --wds-font-size-400: 15px;
@@ -1317,7 +1317,7 @@
1317
1317
  --wds-font-size-700: 20px;
1318
1318
  --wds-font-size-800: 21px;
1319
1319
  --wds-font-size-900: 28px;
1320
- --wds-font-size-body-extra-tiny: 11px;
1320
+ --wds-font-size-body-extra-tiny: 10px;
1321
1321
  --wds-font-size-body-medium: 16px;
1322
1322
  --wds-font-size-body-small: 14px;
1323
1323
  --wds-font-size-body-tiny: 12px;
@@ -1330,7 +1330,7 @@
1330
1330
  --wds-font-weight-bold: 700;
1331
1331
  --wds-font-weight-medium: 500;
1332
1332
  --wds-font-weight-regular: 400;
1333
- --wds-form-field-gap: 9px;
1333
+ --wds-form-field-label-gap: 9px;
1334
1334
  --wds-gallery-item-border: 8px;
1335
1335
  --wds-gallery-item-padding-left-medium: 18px;
1336
1336
  --wds-gallery-item-padding-left-small: 12px;
@@ -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
@@ -105,8 +105,8 @@
105
105
  @property st-global(--wds-field-set-gap-large);
106
106
  @property st-global(--wds-field-set-gap-medium);
107
107
  @property st-global(--wds-field-set-gap-small);
108
- @property st-global(--wds-field-set-gap-tiny);
109
- @property st-global(--wds-form-field-gap);
108
+ @property st-global(--wds-field-set-label-gap);
109
+ @property st-global(--wds-form-field-label-gap);
110
110
  @property st-global(--wds-gallery-item-border);
111
111
  @property st-global(--wds-gallery-item-padding-left-medium);
112
112
  @property st-global(--wds-gallery-item-padding-left-small);
@@ -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);
@@ -447,9 +447,9 @@
447
447
  --wds-feature-list-gap: 30px;
448
448
  --wds-field-set-gap-large: 18px;
449
449
  --wds-field-set-gap-medium: 12px;
450
- --wds-field-set-gap-small: 9px;
451
- --wds-field-set-gap-tiny: 6px;
452
- --wds-form-field-gap: 9px;
450
+ --wds-field-set-gap-small: 6px;
451
+ --wds-field-set-label-gap: 9px;
452
+ --wds-form-field-label-gap: 9px;
453
453
  --wds-gallery-item-border: 8px;
454
454
  --wds-gallery-item-padding-left-medium: 18px;
455
455
  --wds-gallery-item-padding-left-small: 12px;
@@ -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/foundation.st.css CHANGED
@@ -278,7 +278,7 @@
278
278
  --wds-font-line-height-300: 24px;
279
279
  --wds-font-line-height-400: 28px;
280
280
  --wds-font-line-height-500: 36px;
281
- --wds-font-size-100: 11px;
281
+ --wds-font-size-100: 10px;
282
282
  --wds-font-size-200: 12px;
283
283
  --wds-font-size-300: 14px;
284
284
  --wds-font-size-400: 15px;
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.2",
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": "ad85e7f2ed7b8919ae9cf56e83dda09c74707bd8d90dd11eb1430820"
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);
@@ -571,7 +571,7 @@
571
571
  --wds-color-text-success: #25a55a;
572
572
  --wds-color-text-urgent: #fe620f;
573
573
  --wds-color-text-warning: #ffb700;
574
- --wds-font-line-height-body-extra-tiny: 18px;
574
+ --wds-font-line-height-body-extra-tiny: 12px;
575
575
  --wds-font-line-height-body-medium: 28px;
576
576
  --wds-font-line-height-body-small: 18px;
577
577
  --wds-font-line-height-body-tiny: 18px;
@@ -581,7 +581,7 @@
581
581
  --wds-font-line-height-heading-4: 24px;
582
582
  --wds-font-line-height-heading-5: 24px;
583
583
  --wds-font-line-height-heading-6: 18px;
584
- --wds-font-size-body-extra-tiny: 11px;
584
+ --wds-font-size-body-extra-tiny: 10px;
585
585
  --wds-font-size-body-medium: 16px;
586
586
  --wds-font-size-body-small: 14px;
587
587
  --wds-font-size-body-tiny: 12px;
package/studio/all.st.css CHANGED
@@ -476,7 +476,7 @@
476
476
  @property st-global(--wds-field-set-gap-large);
477
477
  @property st-global(--wds-field-set-gap-medium);
478
478
  @property st-global(--wds-field-set-gap-small);
479
- @property st-global(--wds-field-set-gap-tiny);
479
+ @property st-global(--wds-field-set-label-gap);
480
480
  @property st-global(--wds-font-family-default);
481
481
  @property st-global(--wds-font-letter-spacing-0);
482
482
  @property st-global(--wds-font-letter-spacing-100);
@@ -517,7 +517,7 @@
517
517
  @property st-global(--wds-font-weight-bold);
518
518
  @property st-global(--wds-font-weight-medium);
519
519
  @property st-global(--wds-font-weight-regular);
520
- @property st-global(--wds-form-field-gap);
520
+ @property st-global(--wds-form-field-label-gap);
521
521
  @property st-global(--wds-gallery-item-border);
522
522
  @property st-global(--wds-gallery-item-padding-left-medium);
523
523
  @property st-global(--wds-gallery-item-padding-left-small);
@@ -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);
@@ -1257,8 +1257,8 @@
1257
1257
  --wds-feature-list-gap: 24px;
1258
1258
  --wds-field-set-gap-large: 16px;
1259
1259
  --wds-field-set-gap-medium: 12px;
1260
- --wds-field-set-gap-small: 8px;
1261
- --wds-field-set-gap-tiny: 6px;
1260
+ --wds-field-set-gap-small: 6px;
1261
+ --wds-field-set-label-gap: 8px;
1262
1262
  --wds-font-family-default: Madefor, "Helvetica Neue", Helvetica,Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif;
1263
1263
  --wds-font-letter-spacing-0: 0;
1264
1264
  --wds-font-letter-spacing-100: 1px;
@@ -1299,7 +1299,7 @@
1299
1299
  --wds-font-weight-bold: 700;
1300
1300
  --wds-font-weight-medium: 500;
1301
1301
  --wds-font-weight-regular: 400;
1302
- --wds-form-field-gap: 8px;
1302
+ --wds-form-field-label-gap: 8px;
1303
1303
  --wds-gallery-item-border: 4px;
1304
1304
  --wds-gallery-item-padding-left-medium: 18px;
1305
1305
  --wds-gallery-item-padding-left-small: 12px;
@@ -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
@@ -105,8 +105,8 @@
105
105
  @property st-global(--wds-field-set-gap-large);
106
106
  @property st-global(--wds-field-set-gap-medium);
107
107
  @property st-global(--wds-field-set-gap-small);
108
- @property st-global(--wds-field-set-gap-tiny);
109
- @property st-global(--wds-form-field-gap);
108
+ @property st-global(--wds-field-set-label-gap);
109
+ @property st-global(--wds-form-field-label-gap);
110
110
  @property st-global(--wds-gallery-item-border);
111
111
  @property st-global(--wds-gallery-item-padding-left-medium);
112
112
  @property st-global(--wds-gallery-item-padding-left-small);
@@ -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);
@@ -447,9 +447,9 @@
447
447
  --wds-feature-list-gap: 24px;
448
448
  --wds-field-set-gap-large: 16px;
449
449
  --wds-field-set-gap-medium: 12px;
450
- --wds-field-set-gap-small: 8px;
451
- --wds-field-set-gap-tiny: 6px;
452
- --wds-form-field-gap: 8px;
450
+ --wds-field-set-gap-small: 6px;
451
+ --wds-field-set-label-gap: 8px;
452
+ --wds-form-field-label-gap: 8px;
453
453
  --wds-gallery-item-border: 4px;
454
454
  --wds-gallery-item-padding-left-medium: 18px;
455
455
  --wds-gallery-item-padding-left-small: 12px;
@@ -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;