@wix/design-system-tokens 1.63.1 → 1.63.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/CHANGELOG.md +6 -0
  2. package/all.css +10 -2
  3. package/all.st.css +20 -4
  4. package/component.st.css +20 -4
  5. package/package.json +2 -2
  6. package/studio/all.css +12 -4
  7. package/studio/all.st.css +22 -6
  8. package/studio/component.st.css +22 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.63.2 - 2025-01-02
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(Breadcrumbs): add styles to breadcrumbs to studio token [14410](https://github.com/wix-private/wix-design-systems/pull/14410)
6
+
1
7
  ## 1.59.0 - 2024-12-09
2
8
 
3
9
  ### Visual Breaking Changes
package/all.css CHANGED
@@ -21,11 +21,19 @@
21
21
  --wds-badge-size-small: 18px;
22
22
  --wds-badge-size-tiny: 18px;
23
23
  --wds-breadcrumbs-border-radius: 1000px;
24
+ --wds-breadcrumbs-font-size-small: 14px;
24
25
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
25
26
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
26
27
  --wds-breadcrumbs-on-white-fill-hover: #e7f0ff;
27
- --wds-breadcrumbs-padding-horizontal: 9px;
28
- --wds-breadcrumbs-padding-vertical: 6px;
28
+ --wds-breadcrumbs-padding-horizontal-large: 15px;
29
+ --wds-breadcrumbs-padding-horizontal-medium: 9px;
30
+ --wds-breadcrumbs-padding-horizontal-small: 6px;
31
+ --wds-breadcrumbs-padding-vertical-large: 6px;
32
+ --wds-breadcrumbs-padding-vertical-medium: 6px;
33
+ --wds-breadcrumbs-padding-vertical-small: 3px;
34
+ --wds-breadcrumbs-text-line-height-small: 18px;
35
+ --wds-breadcrumbs-text-weight-default: 400;
36
+ --wds-breadcrumbs-text-weight-selected: 500;
29
37
  --wds-button-border-radius-large: 1000px;
30
38
  --wds-button-border-radius-medium: 1000px;
31
39
  --wds-button-border-radius-small: 1000px;
package/all.st.css CHANGED
@@ -33,11 +33,19 @@
33
33
  @property st-global(--wds-border-width-200);
34
34
  @property st-global(--wds-border-width-none);
35
35
  @property st-global(--wds-breadcrumbs-border-radius);
36
+ @property st-global(--wds-breadcrumbs-font-size-small);
36
37
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
37
38
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
38
39
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
39
- @property st-global(--wds-breadcrumbs-padding-horizontal);
40
- @property st-global(--wds-breadcrumbs-padding-vertical);
40
+ @property st-global(--wds-breadcrumbs-padding-horizontal-large);
41
+ @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
42
+ @property st-global(--wds-breadcrumbs-padding-horizontal-small);
43
+ @property st-global(--wds-breadcrumbs-padding-vertical-large);
44
+ @property st-global(--wds-breadcrumbs-padding-vertical-medium);
45
+ @property st-global(--wds-breadcrumbs-padding-vertical-small);
46
+ @property st-global(--wds-breadcrumbs-text-line-height-small);
47
+ @property st-global(--wds-breadcrumbs-text-weight-default);
48
+ @property st-global(--wds-breadcrumbs-text-weight-selected);
41
49
  @property st-global(--wds-breakpoint-large);
42
50
  @property st-global(--wds-breakpoint-medium);
43
51
  @property st-global(--wds-breakpoint-small);
@@ -1203,11 +1211,19 @@
1203
1211
  --wds-border-width-200: 2px;
1204
1212
  --wds-border-width-none: 0;
1205
1213
  --wds-breadcrumbs-border-radius: 1000px;
1214
+ --wds-breadcrumbs-font-size-small: 14px;
1206
1215
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
1207
1216
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
1208
1217
  --wds-breadcrumbs-on-white-fill-hover: #e7f0ff;
1209
- --wds-breadcrumbs-padding-horizontal: 9px;
1210
- --wds-breadcrumbs-padding-vertical: 6px;
1218
+ --wds-breadcrumbs-padding-horizontal-large: 15px;
1219
+ --wds-breadcrumbs-padding-horizontal-medium: 9px;
1220
+ --wds-breadcrumbs-padding-horizontal-small: 6px;
1221
+ --wds-breadcrumbs-padding-vertical-large: 6px;
1222
+ --wds-breadcrumbs-padding-vertical-medium: 6px;
1223
+ --wds-breadcrumbs-padding-vertical-small: 3px;
1224
+ --wds-breadcrumbs-text-line-height-small: 18px;
1225
+ --wds-breadcrumbs-text-weight-default: 400;
1226
+ --wds-breadcrumbs-text-weight-selected: 500;
1211
1227
  --wds-breakpoint-large: 1186px;
1212
1228
  --wds-breakpoint-medium: 768px;
1213
1229
  --wds-breakpoint-small: 490px;
package/component.st.css CHANGED
@@ -20,11 +20,19 @@
20
20
  @property st-global(--wds-badge-size-small);
21
21
  @property st-global(--wds-badge-size-tiny);
22
22
  @property st-global(--wds-breadcrumbs-border-radius);
23
+ @property st-global(--wds-breadcrumbs-font-size-small);
23
24
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
24
25
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
25
26
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
26
- @property st-global(--wds-breadcrumbs-padding-horizontal);
27
- @property st-global(--wds-breadcrumbs-padding-vertical);
27
+ @property st-global(--wds-breadcrumbs-padding-horizontal-large);
28
+ @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
29
+ @property st-global(--wds-breadcrumbs-padding-horizontal-small);
30
+ @property st-global(--wds-breadcrumbs-padding-vertical-large);
31
+ @property st-global(--wds-breadcrumbs-padding-vertical-medium);
32
+ @property st-global(--wds-breadcrumbs-padding-vertical-small);
33
+ @property st-global(--wds-breadcrumbs-text-line-height-small);
34
+ @property st-global(--wds-breadcrumbs-text-weight-default);
35
+ @property st-global(--wds-breadcrumbs-text-weight-selected);
28
36
  @property st-global(--wds-button-border-radius-large);
29
37
  @property st-global(--wds-button-border-radius-medium);
30
38
  @property st-global(--wds-button-border-radius-small);
@@ -678,11 +686,19 @@
678
686
  --wds-badge-size-small: 18px;
679
687
  --wds-badge-size-tiny: 18px;
680
688
  --wds-breadcrumbs-border-radius: 1000px;
689
+ --wds-breadcrumbs-font-size-small: 14px;
681
690
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
682
691
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
683
692
  --wds-breadcrumbs-on-white-fill-hover: #e7f0ff;
684
- --wds-breadcrumbs-padding-horizontal: 9px;
685
- --wds-breadcrumbs-padding-vertical: 6px;
693
+ --wds-breadcrumbs-padding-horizontal-large: 15px;
694
+ --wds-breadcrumbs-padding-horizontal-medium: 9px;
695
+ --wds-breadcrumbs-padding-horizontal-small: 6px;
696
+ --wds-breadcrumbs-padding-vertical-large: 6px;
697
+ --wds-breadcrumbs-padding-vertical-medium: 6px;
698
+ --wds-breadcrumbs-padding-vertical-small: 3px;
699
+ --wds-breadcrumbs-text-line-height-small: 18px;
700
+ --wds-breadcrumbs-text-weight-default: 400;
701
+ --wds-breadcrumbs-text-weight-selected: 500;
686
702
  --wds-button-border-radius-large: 1000px;
687
703
  --wds-button-border-radius-medium: 1000px;
688
704
  --wds-button-border-radius-small: 1000px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.63.1",
3
+ "version": "1.63.2",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "02971806f3c6371efd0ece15dfe8fdfc23858db8236fba8c370edf7e"
36
+ "falconPackageHash": "fc4ae96434f56c405612e7853f882f4d1b16db276087ef261f9f495e"
37
37
  }
package/studio/all.css CHANGED
@@ -20,12 +20,20 @@
20
20
  --wds-badge-size-medium: 24px;
21
21
  --wds-badge-size-small: 20px;
22
22
  --wds-badge-size-tiny: 16px;
23
- --wds-breadcrumbs-border-radius: 1000px;
23
+ --wds-breadcrumbs-border-radius: 2px;
24
+ --wds-breadcrumbs-font-size-small: 12px;
24
25
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
25
26
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
26
- --wds-breadcrumbs-on-white-fill-hover: #ebf2ff;
27
- --wds-breadcrumbs-padding-horizontal: 10px;
28
- --wds-breadcrumbs-padding-vertical: 4px;
27
+ --wds-breadcrumbs-on-white-fill-hover: #edeef2;
28
+ --wds-breadcrumbs-padding-horizontal-large: 16px;
29
+ --wds-breadcrumbs-padding-horizontal-medium: 8px;
30
+ --wds-breadcrumbs-padding-horizontal-small: 4px;
31
+ --wds-breadcrumbs-padding-vertical-large: 4px;
32
+ --wds-breadcrumbs-padding-vertical-medium: 4px;
33
+ --wds-breadcrumbs-padding-vertical-small: 2px;
34
+ --wds-breadcrumbs-text-line-height-small: 16px;
35
+ --wds-breadcrumbs-text-weight-default: 400;
36
+ --wds-breadcrumbs-text-weight-selected: 700;
29
37
  --wds-button-border-radius-large: 4px;
30
38
  --wds-button-border-radius-medium: 4px;
31
39
  --wds-button-border-radius-small: 4px;
package/studio/all.st.css CHANGED
@@ -33,11 +33,19 @@
33
33
  @property st-global(--wds-border-width-200);
34
34
  @property st-global(--wds-border-width-none);
35
35
  @property st-global(--wds-breadcrumbs-border-radius);
36
+ @property st-global(--wds-breadcrumbs-font-size-small);
36
37
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
37
38
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
38
39
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
39
- @property st-global(--wds-breadcrumbs-padding-horizontal);
40
- @property st-global(--wds-breadcrumbs-padding-vertical);
40
+ @property st-global(--wds-breadcrumbs-padding-horizontal-large);
41
+ @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
42
+ @property st-global(--wds-breadcrumbs-padding-horizontal-small);
43
+ @property st-global(--wds-breadcrumbs-padding-vertical-large);
44
+ @property st-global(--wds-breadcrumbs-padding-vertical-medium);
45
+ @property st-global(--wds-breadcrumbs-padding-vertical-small);
46
+ @property st-global(--wds-breadcrumbs-text-line-height-small);
47
+ @property st-global(--wds-breadcrumbs-text-weight-default);
48
+ @property st-global(--wds-breadcrumbs-text-weight-selected);
41
49
  @property st-global(--wds-breakpoint-large);
42
50
  @property st-global(--wds-breakpoint-medium);
43
51
  @property st-global(--wds-breakpoint-small);
@@ -1197,12 +1205,20 @@
1197
1205
  --wds-border-width-100: 1px;
1198
1206
  --wds-border-width-200: 2px;
1199
1207
  --wds-border-width-none: 0;
1200
- --wds-breadcrumbs-border-radius: 1000px;
1208
+ --wds-breadcrumbs-border-radius: 2px;
1209
+ --wds-breadcrumbs-font-size-small: 12px;
1201
1210
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
1202
1211
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
1203
- --wds-breadcrumbs-on-white-fill-hover: #ebf2ff;
1204
- --wds-breadcrumbs-padding-horizontal: 10px;
1205
- --wds-breadcrumbs-padding-vertical: 4px;
1212
+ --wds-breadcrumbs-on-white-fill-hover: #edeef2;
1213
+ --wds-breadcrumbs-padding-horizontal-large: 16px;
1214
+ --wds-breadcrumbs-padding-horizontal-medium: 8px;
1215
+ --wds-breadcrumbs-padding-horizontal-small: 4px;
1216
+ --wds-breadcrumbs-padding-vertical-large: 4px;
1217
+ --wds-breadcrumbs-padding-vertical-medium: 4px;
1218
+ --wds-breadcrumbs-padding-vertical-small: 2px;
1219
+ --wds-breadcrumbs-text-line-height-small: 16px;
1220
+ --wds-breadcrumbs-text-weight-default: 400;
1221
+ --wds-breadcrumbs-text-weight-selected: 700;
1206
1222
  --wds-breakpoint-large: 1186px;
1207
1223
  --wds-breakpoint-medium: 768px;
1208
1224
  --wds-breakpoint-small: 490px;
package/studio/component.st.css CHANGED
@@ -20,11 +20,19 @@
20
20
  @property st-global(--wds-badge-size-small);
21
21
  @property st-global(--wds-badge-size-tiny);
22
22
  @property st-global(--wds-breadcrumbs-border-radius);
23
+ @property st-global(--wds-breadcrumbs-font-size-small);
23
24
  @property st-global(--wds-breadcrumbs-on-dark-fill-hover);
24
25
  @property st-global(--wds-breadcrumbs-on-grey-fill-hover);
25
26
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
26
- @property st-global(--wds-breadcrumbs-padding-horizontal);
27
- @property st-global(--wds-breadcrumbs-padding-vertical);
27
+ @property st-global(--wds-breadcrumbs-padding-horizontal-large);
28
+ @property st-global(--wds-breadcrumbs-padding-horizontal-medium);
29
+ @property st-global(--wds-breadcrumbs-padding-horizontal-small);
30
+ @property st-global(--wds-breadcrumbs-padding-vertical-large);
31
+ @property st-global(--wds-breadcrumbs-padding-vertical-medium);
32
+ @property st-global(--wds-breadcrumbs-padding-vertical-small);
33
+ @property st-global(--wds-breadcrumbs-text-line-height-small);
34
+ @property st-global(--wds-breadcrumbs-text-weight-default);
35
+ @property st-global(--wds-breadcrumbs-text-weight-selected);
28
36
  @property st-global(--wds-button-border-radius-large);
29
37
  @property st-global(--wds-button-border-radius-medium);
30
38
  @property st-global(--wds-button-border-radius-small);
@@ -676,12 +684,20 @@
676
684
  --wds-badge-size-medium: 24px;
677
685
  --wds-badge-size-small: 20px;
678
686
  --wds-badge-size-tiny: 16px;
679
- --wds-breadcrumbs-border-radius: 1000px;
687
+ --wds-breadcrumbs-border-radius: 2px;
688
+ --wds-breadcrumbs-font-size-small: 12px;
680
689
  --wds-breadcrumbs-on-dark-fill-hover: rgba(255, 255, 255, .3);
681
690
  --wds-breadcrumbs-on-grey-fill-hover: #ffffff;
682
- --wds-breadcrumbs-on-white-fill-hover: #ebf2ff;
683
- --wds-breadcrumbs-padding-horizontal: 10px;
684
- --wds-breadcrumbs-padding-vertical: 4px;
691
+ --wds-breadcrumbs-on-white-fill-hover: #edeef2;
692
+ --wds-breadcrumbs-padding-horizontal-large: 16px;
693
+ --wds-breadcrumbs-padding-horizontal-medium: 8px;
694
+ --wds-breadcrumbs-padding-horizontal-small: 4px;
695
+ --wds-breadcrumbs-padding-vertical-large: 4px;
696
+ --wds-breadcrumbs-padding-vertical-medium: 4px;
697
+ --wds-breadcrumbs-padding-vertical-small: 2px;
698
+ --wds-breadcrumbs-text-line-height-small: 16px;
699
+ --wds-breadcrumbs-text-weight-default: 400;
700
+ --wds-breadcrumbs-text-weight-selected: 700;
685
701
  --wds-button-border-radius-large: 4px;
686
702
  --wds-button-border-radius-medium: 4px;
687
703
  --wds-button-border-radius-small: 4px;