@wix/design-system-tokens 1.11.1 → 1.11.3

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/all.st.css +16 -0
  2. package/component.st.css +8 -0
  3. package/foundation.st.css +8 -0
  4. package/package.json +8 -8
  5. package/studio/all.st.css +16 -0
  6. package/studio/component.st.css +8 -0
  7. package/studio/foundation.st.css +8 -0
package/all.st.css CHANGED
@@ -38,6 +38,10 @@
38
38
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
39
39
  @property st-global(--wds-breadcrumbs-padding-horizontal);
40
40
  @property st-global(--wds-breadcrumbs-padding-vertical);
41
+ @property st-global(--wds-breakpoint-large);
42
+ @property st-global(--wds-breakpoint-medium);
43
+ @property st-global(--wds-breakpoint-small);
44
+ @property st-global(--wds-breakpoint-x-large);
41
45
  @property st-global(--wds-button-border-radius-large);
42
46
  @property st-global(--wds-button-border-radius-medium);
43
47
  @property st-global(--wds-button-border-radius-small);
@@ -67,9 +71,13 @@
67
71
  @property st-global(--wds-button-padding-vertical-small);
68
72
  @property st-global(--wds-button-padding-vertical-tiny);
69
73
  @property st-global(--wds-button-size-large);
74
+ @property st-global(--wds-button-size-large-screen-small);
70
75
  @property st-global(--wds-button-size-medium);
76
+ @property st-global(--wds-button-size-medium-screen-small);
71
77
  @property st-global(--wds-button-size-small);
78
+ @property st-global(--wds-button-size-small-screen-small);
72
79
  @property st-global(--wds-button-size-tiny);
80
+ @property st-global(--wds-button-size-tiny-screen-small);
73
81
  @property st-global(--wds-button-size-x-tiny);
74
82
  @property st-global(--wds-card-border);
75
83
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -1045,6 +1053,10 @@
1045
1053
  --wds-breadcrumbs-on-white-fill-hover: #e7f0ff;
1046
1054
  --wds-breadcrumbs-padding-horizontal: 9px;
1047
1055
  --wds-breadcrumbs-padding-vertical: 6px;
1056
+ --wds-breakpoint-large: 1186px;
1057
+ --wds-breakpoint-medium: 768px;
1058
+ --wds-breakpoint-small: 490px;
1059
+ --wds-breakpoint-x-large: 1572px;
1048
1060
  --wds-button-border-radius-large: 1000px;
1049
1061
  --wds-button-border-radius-medium: 1000px;
1050
1062
  --wds-button-border-radius-small: 1000px;
@@ -1074,9 +1086,13 @@
1074
1086
  --wds-button-padding-vertical-small: 6px;
1075
1087
  --wds-button-padding-vertical-tiny: 3px;
1076
1088
  --wds-button-size-large: 42px;
1089
+ --wds-button-size-large-screen-small: 54px;
1077
1090
  --wds-button-size-medium: 36px;
1091
+ --wds-button-size-medium-screen-small: 48px;
1078
1092
  --wds-button-size-small: 30px;
1093
+ --wds-button-size-small-screen-small: 42px;
1079
1094
  --wds-button-size-tiny: 24px;
1095
+ --wds-button-size-tiny-screen-small: 36px;
1080
1096
  --wds-button-size-x-tiny: 18px;
1081
1097
  --wds-card-border: 8px;
1082
1098
  --wds-card-content-paddings-horizontal: 24px;
package/component.st.css CHANGED
@@ -54,9 +54,13 @@
54
54
  @property st-global(--wds-button-padding-vertical-small);
55
55
  @property st-global(--wds-button-padding-vertical-tiny);
56
56
  @property st-global(--wds-button-size-large);
57
+ @property st-global(--wds-button-size-large-screen-small);
57
58
  @property st-global(--wds-button-size-medium);
59
+ @property st-global(--wds-button-size-medium-screen-small);
58
60
  @property st-global(--wds-button-size-small);
61
+ @property st-global(--wds-button-size-small-screen-small);
59
62
  @property st-global(--wds-button-size-tiny);
63
+ @property st-global(--wds-button-size-tiny-screen-small);
60
64
  @property st-global(--wds-button-size-x-tiny);
61
65
  @property st-global(--wds-card-border);
62
66
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -577,9 +581,13 @@
577
581
  --wds-button-padding-vertical-small: 6px;
578
582
  --wds-button-padding-vertical-tiny: 3px;
579
583
  --wds-button-size-large: 42px;
584
+ --wds-button-size-large-screen-small: 54px;
580
585
  --wds-button-size-medium: 36px;
586
+ --wds-button-size-medium-screen-small: 48px;
581
587
  --wds-button-size-small: 30px;
588
+ --wds-button-size-small-screen-small: 42px;
582
589
  --wds-button-size-tiny: 24px;
590
+ --wds-button-size-tiny-screen-small: 36px;
583
591
  --wds-button-size-x-tiny: 18px;
584
592
  --wds-card-border: 8px;
585
593
  --wds-card-content-paddings-horizontal: 24px;
package/foundation.st.css CHANGED
@@ -9,6 +9,10 @@
9
9
  @property st-global(--wds-border-width-100);
10
10
  @property st-global(--wds-border-width-200);
11
11
  @property st-global(--wds-border-width-none);
12
+ @property st-global(--wds-breakpoint-large);
13
+ @property st-global(--wds-breakpoint-medium);
14
+ @property st-global(--wds-breakpoint-small);
15
+ @property st-global(--wds-breakpoint-x-large);
12
16
  @property st-global(--wds-color-black-100);
13
17
  @property st-global(--wds-color-black-100-transparent-0);
14
18
  @property st-global(--wds-color-black-100-transparent-5);
@@ -178,6 +182,10 @@
178
182
  --wds-border-width-100: 1px;
179
183
  --wds-border-width-200: 2px;
180
184
  --wds-border-width-none: 0;
185
+ --wds-breakpoint-large: 1186px;
186
+ --wds-breakpoint-medium: 768px;
187
+ --wds-breakpoint-small: 490px;
188
+ --wds-breakpoint-x-large: 1572px;
181
189
  --wds-color-black-100: #000624;
182
190
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
183
191
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.11.1",
3
+ "version": "1.11.3",
4
4
  "packageManager": "yarn@3.5.0",
5
5
  "author": "augustinasv@wix.com",
6
6
  "license": "MIT",
7
7
  "devDependencies": {
8
- "@types/jest": "^27.5.1",
8
+ "@types/jest": "^27.5.2",
9
9
  "eslint": "^7.32.0",
10
- "eslint-plugin-jsonc": "^2.10.0",
10
+ "eslint-plugin-jsonc": "^2.13.0",
11
11
  "jest": "^27.5.1",
12
- "style-dictionary": "^3.9.0",
13
- "ts-jest": "^29.1.1",
14
- "ts-node": "^10.9.1",
15
- "typescript": "^5.2.2"
12
+ "style-dictionary": "^3.9.2",
13
+ "ts-jest": "^29.1.2",
14
+ "ts-node": "^10.9.2",
15
+ "typescript": "^5.4.2"
16
16
  },
17
17
  "description": "Design system tokens",
18
18
  "scripts": {
@@ -33,5 +33,5 @@
33
33
  "groupId": "com.wixpress"
34
34
  }
35
35
  },
36
- "falconPackageHash": "6b6f47cf23027433422ca63cb928b438d36abc0ae54aa3a4693e4239"
36
+ "falconPackageHash": "3f1e09c0d1d17b161e16f03c704cb62876429d8a8087b6cc0e303386"
37
37
  }
package/studio/all.st.css CHANGED
@@ -38,6 +38,10 @@
38
38
  @property st-global(--wds-breadcrumbs-on-white-fill-hover);
39
39
  @property st-global(--wds-breadcrumbs-padding-horizontal);
40
40
  @property st-global(--wds-breadcrumbs-padding-vertical);
41
+ @property st-global(--wds-breakpoint-large);
42
+ @property st-global(--wds-breakpoint-medium);
43
+ @property st-global(--wds-breakpoint-small);
44
+ @property st-global(--wds-breakpoint-x-large);
41
45
  @property st-global(--wds-button-border-radius-large);
42
46
  @property st-global(--wds-button-border-radius-medium);
43
47
  @property st-global(--wds-button-border-radius-small);
@@ -67,9 +71,13 @@
67
71
  @property st-global(--wds-button-padding-vertical-small);
68
72
  @property st-global(--wds-button-padding-vertical-tiny);
69
73
  @property st-global(--wds-button-size-large);
74
+ @property st-global(--wds-button-size-large-screen-small);
70
75
  @property st-global(--wds-button-size-medium);
76
+ @property st-global(--wds-button-size-medium-screen-small);
71
77
  @property st-global(--wds-button-size-small);
78
+ @property st-global(--wds-button-size-small-screen-small);
72
79
  @property st-global(--wds-button-size-tiny);
80
+ @property st-global(--wds-button-size-tiny-screen-small);
73
81
  @property st-global(--wds-button-size-x-tiny);
74
82
  @property st-global(--wds-card-border);
75
83
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -1018,6 +1026,10 @@
1018
1026
  --wds-breadcrumbs-on-white-fill-hover: #ebf2ff;
1019
1027
  --wds-breadcrumbs-padding-horizontal: 10px;
1020
1028
  --wds-breadcrumbs-padding-vertical: 4px;
1029
+ --wds-breakpoint-large: 1186px;
1030
+ --wds-breakpoint-medium: 768px;
1031
+ --wds-breakpoint-small: 490px;
1032
+ --wds-breakpoint-x-large: 1572px;
1021
1033
  --wds-button-border-radius-large: 4px;
1022
1034
  --wds-button-border-radius-medium: 4px;
1023
1035
  --wds-button-border-radius-small: 4px;
@@ -1047,9 +1059,13 @@
1047
1059
  --wds-button-padding-vertical-small: 4px;
1048
1060
  --wds-button-padding-vertical-tiny: 2px;
1049
1061
  --wds-button-size-large: 36px;
1062
+ --wds-button-size-large-screen-small: 44px;
1050
1063
  --wds-button-size-medium: 32px;
1064
+ --wds-button-size-medium-screen-small: 40px;
1051
1065
  --wds-button-size-small: 28px;
1066
+ --wds-button-size-small-screen-small: 36px;
1052
1067
  --wds-button-size-tiny: 24px;
1068
+ --wds-button-size-tiny-screen-small: 32px;
1053
1069
  --wds-button-size-x-tiny: 18px;
1054
1070
  --wds-card-border: 4px;
1055
1071
  --wds-card-content-paddings-horizontal: 24px;
package/studio/component.st.css CHANGED
@@ -54,9 +54,13 @@
54
54
  @property st-global(--wds-button-padding-vertical-small);
55
55
  @property st-global(--wds-button-padding-vertical-tiny);
56
56
  @property st-global(--wds-button-size-large);
57
+ @property st-global(--wds-button-size-large-screen-small);
57
58
  @property st-global(--wds-button-size-medium);
59
+ @property st-global(--wds-button-size-medium-screen-small);
58
60
  @property st-global(--wds-button-size-small);
61
+ @property st-global(--wds-button-size-small-screen-small);
59
62
  @property st-global(--wds-button-size-tiny);
63
+ @property st-global(--wds-button-size-tiny-screen-small);
60
64
  @property st-global(--wds-button-size-x-tiny);
61
65
  @property st-global(--wds-card-border);
62
66
  @property st-global(--wds-card-content-paddings-horizontal);
@@ -577,9 +581,13 @@
577
581
  --wds-button-padding-vertical-small: 4px;
578
582
  --wds-button-padding-vertical-tiny: 2px;
579
583
  --wds-button-size-large: 36px;
584
+ --wds-button-size-large-screen-small: 44px;
580
585
  --wds-button-size-medium: 32px;
586
+ --wds-button-size-medium-screen-small: 40px;
581
587
  --wds-button-size-small: 28px;
588
+ --wds-button-size-small-screen-small: 36px;
582
589
  --wds-button-size-tiny: 24px;
590
+ --wds-button-size-tiny-screen-small: 32px;
583
591
  --wds-button-size-x-tiny: 18px;
584
592
  --wds-card-border: 4px;
585
593
  --wds-card-content-paddings-horizontal: 24px;
package/studio/foundation.st.css CHANGED
@@ -9,6 +9,10 @@
9
9
  @property st-global(--wds-border-width-100);
10
10
  @property st-global(--wds-border-width-200);
11
11
  @property st-global(--wds-border-width-none);
12
+ @property st-global(--wds-breakpoint-large);
13
+ @property st-global(--wds-breakpoint-medium);
14
+ @property st-global(--wds-breakpoint-small);
15
+ @property st-global(--wds-breakpoint-x-large);
12
16
  @property st-global(--wds-color-black-100);
13
17
  @property st-global(--wds-color-black-100-transparent-0);
14
18
  @property st-global(--wds-color-black-100-transparent-5);
@@ -162,6 +166,10 @@
162
166
  --wds-border-width-100: 1px;
163
167
  --wds-border-width-200: 2px;
164
168
  --wds-border-width-none: 0;
169
+ --wds-breakpoint-large: 1186px;
170
+ --wds-breakpoint-medium: 768px;
171
+ --wds-breakpoint-small: 490px;
172
+ --wds-breakpoint-x-large: 1572px;
165
173
  --wds-color-black-100: #131720;
166
174
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
167
175
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .5);