@wix/design-system-tokens 1.132.0 → 1.133.0

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 (10) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/all.css +6 -0
  3. package/all.scss +6 -0
  4. package/all.st.css +12 -0
  5. package/component.st.css +12 -0
  6. package/package.json +2 -2
  7. package/studio/all.css +6 -0
  8. package/studio/all.scss +6 -0
  9. package/studio/all.st.css +12 -0
  10. package/studio/component.st.css +12 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 1.133.0 - 2025-09-12
2
+
3
+ ### Visual Breaking Changes
4
+
5
+ - breaking(CircularProgressBar): e3 tokenization [15265](https://github.com/wix-private/wix-design-systems/pull/15265)
6
+
1
7
  ## 1.132.0 - 2025-09-09
2
8
 
3
9
  ### Features
package/all.css CHANGED
@@ -317,6 +317,7 @@
317
317
  --wds-composer-sidebar-end-max-width: 240px;
318
318
  --wds-composer-sidebar-bottom-width: 90px;
319
319
  --wds-color-picker-width: 240px;
320
+ --wds-circular-progress-bar-border-width: 4px;
320
321
  --wds-checkbox-size: 16px;
321
322
  --wds-button-outline-hover: transparent;
322
323
  --wds-button-icon-offset-tiny: 12px;
@@ -1288,6 +1289,10 @@
1288
1289
  --wds-circular-progress-bar-size-small: var(--wds-space-500);
1289
1290
  --wds-circular-progress-bar-size-medium: var(--wds-space-900);
1290
1291
  --wds-circular-progress-bar-size-large: var(--wds-space-1700);
1292
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1293
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1294
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1295
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1291
1296
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1292
1297
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1293
1298
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
@@ -1839,6 +1844,7 @@
1839
1844
  --wds-clickable-card-filled-fill-disabled: var(--wds-color-fill-light-primary-disabled);
1840
1845
  --wds-clickable-card-filled-fill-active: var(--wds-color-fill-light-primary-active);
1841
1846
  --wds-clickable-card-filled-fill: var(--wds-color-fill-light-primary);
1847
+ --wds-circular-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1842
1848
  --wds-circular-progress-bar-foreground-fill-success: var(--wds-color-fill-success-primary);
1843
1849
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1844
1850
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
package/all.scss CHANGED
@@ -292,6 +292,7 @@
292
292
  --wds-color-black-100-transparent-5: rgba(0, 6, 36, .05);
293
293
  --wds-color-black-100-transparent-0: rgba(0, 6, 36, 0);
294
294
  --wds-color-black-100: #000624;
295
+ --wds-circular-progress-bar-border-width: 4px;
295
296
  --wds-checkbox-size: 16px;
296
297
  --wds-button-outline-hover: transparent;
297
298
  --wds-button-icon-offset-tiny: 12px;
@@ -1280,6 +1281,10 @@
1280
1281
  --wds-circular-progress-bar-size-small: var(--wds-space-500);
1281
1282
  --wds-circular-progress-bar-size-medium: var(--wds-space-900);
1282
1283
  --wds-circular-progress-bar-size-large: var(--wds-space-1700);
1284
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1285
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1286
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1287
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1283
1288
  --wds-checkbox-group-gap-vertical: var(--wds-space-200);
1284
1289
  --wds-checkbox-border-radius: var(--wds-border-radius-200);
1285
1290
  --wds-checkbox-border-active-hover: var(--wds-color-black-100-transparent-0);
@@ -1839,6 +1844,7 @@
1839
1844
  --wds-clickable-card-filled-fill-disabled: var(--wds-color-fill-light-primary-disabled);
1840
1845
  --wds-clickable-card-filled-fill-active: var(--wds-color-fill-light-primary-active);
1841
1846
  --wds-clickable-card-filled-fill: var(--wds-color-fill-light-primary);
1847
+ --wds-circular-progress-bar-label-font-line-height: var(--wds-font-line-height-200);
1842
1848
  --wds-circular-progress-bar-foreground-fill-success: var(--wds-color-fill-success-primary);
1843
1849
  --wds-circular-progress-bar-foreground-fill-standard: var(--wds-color-fill-standard-primary);
1844
1850
  --wds-circular-progress-bar-foreground-fill-premium: var(--wds-color-fill-premium-primary);
package/all.st.css CHANGED
@@ -295,10 +295,16 @@
295
295
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
296
296
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
297
297
  @property st-global(--wds-circular-progress-bar-background-fill-success);
298
+ @property st-global(--wds-circular-progress-bar-border-width);
298
299
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
299
300
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
300
301
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
301
302
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
303
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
304
+ @property st-global(--wds-circular-progress-bar-label-font-size);
305
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
306
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
307
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
302
308
  @property st-global(--wds-circular-progress-bar-size-large);
303
309
  @property st-global(--wds-circular-progress-bar-size-medium);
304
310
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -2330,10 +2336,16 @@
2330
2336
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
2331
2337
  --wds-circular-progress-bar-background-fill-standard: #d6e6fe;
2332
2338
  --wds-circular-progress-bar-background-fill-success: #c8e8d6;
2339
+ --wds-circular-progress-bar-border-width: 4px;
2333
2340
  --wds-circular-progress-bar-foreground-fill-error: #e62214;
2334
2341
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
2335
2342
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
2336
2343
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
2344
+ --wds-circular-progress-bar-label-font-line-height: 18px;
2345
+ --wds-circular-progress-bar-label-font-size: 10px;
2346
+ --wds-circular-progress-bar-label-font-weight: 700;
2347
+ --wds-circular-progress-bar-label-padding-large: 0px;
2348
+ --wds-circular-progress-bar-label-padding-medium: 0px;
2337
2349
  --wds-circular-progress-bar-size-large: 102px;
2338
2350
  --wds-circular-progress-bar-size-medium: 54px;
2339
2351
  --wds-circular-progress-bar-size-small: 30px;
package/component.st.css CHANGED
@@ -262,10 +262,16 @@
262
262
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
263
263
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
264
264
  @property st-global(--wds-circular-progress-bar-background-fill-success);
265
+ @property st-global(--wds-circular-progress-bar-border-width);
265
266
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
266
267
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
267
268
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
268
269
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
270
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
271
+ @property st-global(--wds-circular-progress-bar-label-font-size);
272
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
273
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
274
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
269
275
  @property st-global(--wds-circular-progress-bar-size-large);
270
276
  @property st-global(--wds-circular-progress-bar-size-medium);
271
277
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -1581,10 +1587,16 @@
1581
1587
  --wds-circular-progress-bar-background-fill-premium: #e3c3f4;
1582
1588
  --wds-circular-progress-bar-background-fill-standard: #d6e6fe;
1583
1589
  --wds-circular-progress-bar-background-fill-success: #c8e8d6;
1590
+ --wds-circular-progress-bar-border-width: 4px;
1584
1591
  --wds-circular-progress-bar-foreground-fill-error: #e62214;
1585
1592
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
1586
1593
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
1587
1594
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
1595
+ --wds-circular-progress-bar-label-font-line-height: 18px;
1596
+ --wds-circular-progress-bar-label-font-size: 10px;
1597
+ --wds-circular-progress-bar-label-font-weight: 700;
1598
+ --wds-circular-progress-bar-label-padding-large: 0px;
1599
+ --wds-circular-progress-bar-label-padding-medium: 0px;
1588
1600
  --wds-circular-progress-bar-size-large: 102px;
1589
1601
  --wds-circular-progress-bar-size-medium: 54px;
1590
1602
  --wds-circular-progress-bar-size-small: 30px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/design-system-tokens",
3
- "version": "1.132.0",
3
+ "version": "1.133.0",
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": "23e1888561fc2a3576cbe58b0ef0fde68ec19705e1d26a28e93c4e66"
36
+ "falconPackageHash": "9811deb3d08ec2e20e8e231c0932bbe0c89827a258258d6b8900cd4d"
37
37
  }
package/studio/all.css CHANGED
@@ -349,6 +349,8 @@
349
349
  --wds-composer-sidebar-end-max-width: 240px;
350
350
  --wds-composer-sidebar-bottom-width: 88px;
351
351
  --wds-color-picker-width: 236px;
352
+ --wds-circular-progress-bar-label-font-line-height: 18px;
353
+ --wds-circular-progress-bar-border-width: 4px;
352
354
  --wds-button-icon-offset-tiny: 12px;
353
355
  --wds-button-icon-offset-small: 12px;
354
356
  --wds-button-icon-offset-medium: 18px;
@@ -1334,6 +1336,10 @@
1334
1336
  --wds-circular-progress-bar-size-small: var(--wds-space-600);
1335
1337
  --wds-circular-progress-bar-size-medium: var(--wds-space-1300);
1336
1338
  --wds-circular-progress-bar-size-large: var(--wds-space-2400);
1339
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1340
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1341
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1342
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1337
1343
  --wds-circular-progress-bar-background-fill-success: var(--wds-color-fill-success-secondary-disabled);
1338
1344
  --wds-circular-progress-bar-background-fill-standard: var(--wds-color-fill-standard-secondary-disabled);
1339
1345
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary-disabled);
package/studio/all.scss CHANGED
@@ -324,6 +324,8 @@
324
324
  --wds-color-black-100-transparent-5: rgba(19, 23, 32, .05);
325
325
  --wds-color-black-100-transparent-0: rgba(19, 23, 32, 0);
326
326
  --wds-color-black-100: #131720;
327
+ --wds-circular-progress-bar-label-font-line-height: 18px;
328
+ --wds-circular-progress-bar-border-width: 4px;
327
329
  --wds-button-icon-offset-tiny: 12px;
328
330
  --wds-button-icon-offset-small: 12px;
329
331
  --wds-button-icon-offset-medium: 18px;
@@ -1326,6 +1328,10 @@
1326
1328
  --wds-circular-progress-bar-size-small: var(--wds-space-600);
1327
1329
  --wds-circular-progress-bar-size-medium: var(--wds-space-1300);
1328
1330
  --wds-circular-progress-bar-size-large: var(--wds-space-2400);
1331
+ --wds-circular-progress-bar-label-padding-medium: var(--wds-space-0);
1332
+ --wds-circular-progress-bar-label-padding-large: var(--wds-space-0);
1333
+ --wds-circular-progress-bar-label-font-weight: var(--wds-font-weight-bold);
1334
+ --wds-circular-progress-bar-label-font-size: var(--wds-font-size-100);
1329
1335
  --wds-circular-progress-bar-background-fill-success: var(--wds-color-fill-success-secondary-disabled);
1330
1336
  --wds-circular-progress-bar-background-fill-standard: var(--wds-color-fill-standard-secondary-disabled);
1331
1337
  --wds-circular-progress-bar-background-fill-premium: var(--wds-color-fill-premium-secondary-disabled);
package/studio/all.st.css CHANGED
@@ -294,10 +294,16 @@
294
294
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
295
295
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
296
296
  @property st-global(--wds-circular-progress-bar-background-fill-success);
297
+ @property st-global(--wds-circular-progress-bar-border-width);
297
298
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
298
299
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
299
300
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
300
301
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
302
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
303
+ @property st-global(--wds-circular-progress-bar-label-font-size);
304
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
305
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
306
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
301
307
  @property st-global(--wds-circular-progress-bar-size-large);
302
308
  @property st-global(--wds-circular-progress-bar-size-medium);
303
309
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -2321,10 +2327,16 @@
2321
2327
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
2322
2328
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
2323
2329
  --wds-circular-progress-bar-background-fill-success: #e5e5e5;
2330
+ --wds-circular-progress-bar-border-width: 4px;
2324
2331
  --wds-circular-progress-bar-foreground-fill-error: #ee4437;
2325
2332
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
2326
2333
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
2327
2334
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
2335
+ --wds-circular-progress-bar-label-font-line-height: 18px;
2336
+ --wds-circular-progress-bar-label-font-size: 11px;
2337
+ --wds-circular-progress-bar-label-font-weight: 700;
2338
+ --wds-circular-progress-bar-label-padding-large: 0px;
2339
+ --wds-circular-progress-bar-label-padding-medium: 0px;
2328
2340
  --wds-circular-progress-bar-size-large: 96px;
2329
2341
  --wds-circular-progress-bar-size-medium: 52px;
2330
2342
  --wds-circular-progress-bar-size-small: 24px;
package/studio/component.st.css CHANGED
@@ -261,10 +261,16 @@
261
261
  @property st-global(--wds-circular-progress-bar-background-fill-premium);
262
262
  @property st-global(--wds-circular-progress-bar-background-fill-standard);
263
263
  @property st-global(--wds-circular-progress-bar-background-fill-success);
264
+ @property st-global(--wds-circular-progress-bar-border-width);
264
265
  @property st-global(--wds-circular-progress-bar-foreground-fill-error);
265
266
  @property st-global(--wds-circular-progress-bar-foreground-fill-premium);
266
267
  @property st-global(--wds-circular-progress-bar-foreground-fill-standard);
267
268
  @property st-global(--wds-circular-progress-bar-foreground-fill-success);
269
+ @property st-global(--wds-circular-progress-bar-label-font-line-height);
270
+ @property st-global(--wds-circular-progress-bar-label-font-size);
271
+ @property st-global(--wds-circular-progress-bar-label-font-weight);
272
+ @property st-global(--wds-circular-progress-bar-label-padding-large);
273
+ @property st-global(--wds-circular-progress-bar-label-padding-medium);
268
274
  @property st-global(--wds-circular-progress-bar-size-large);
269
275
  @property st-global(--wds-circular-progress-bar-size-medium);
270
276
  @property st-global(--wds-circular-progress-bar-size-small);
@@ -1576,10 +1582,16 @@
1576
1582
  --wds-circular-progress-bar-background-fill-premium: #e5e5e5;
1577
1583
  --wds-circular-progress-bar-background-fill-standard: #e5e5e5;
1578
1584
  --wds-circular-progress-bar-background-fill-success: #e5e5e5;
1585
+ --wds-circular-progress-bar-border-width: 4px;
1579
1586
  --wds-circular-progress-bar-foreground-fill-error: #ee4437;
1580
1587
  --wds-circular-progress-bar-foreground-fill-premium: #9a27d5;
1581
1588
  --wds-circular-progress-bar-foreground-fill-standard: #116dff;
1582
1589
  --wds-circular-progress-bar-foreground-fill-success: #25a55a;
1590
+ --wds-circular-progress-bar-label-font-line-height: 18px;
1591
+ --wds-circular-progress-bar-label-font-size: 11px;
1592
+ --wds-circular-progress-bar-label-font-weight: 700;
1593
+ --wds-circular-progress-bar-label-padding-large: 0px;
1594
+ --wds-circular-progress-bar-label-padding-medium: 0px;
1583
1595
  --wds-circular-progress-bar-size-large: 96px;
1584
1596
  --wds-circular-progress-bar-size-medium: 52px;
1585
1597
  --wds-circular-progress-bar-size-small: 24px;