@wix/design-system-tokens 1.101.1 → 1.102.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.
- package/CHANGELOG.md +6 -0
- package/all.css +25 -0
- package/all.st.css +50 -0
- package/component.st.css +48 -0
- package/foundation.st.css +2 -0
- package/package.json +2 -2
- package/studio/all.css +32 -7
- package/studio/all.st.css +57 -7
- package/studio/component.st.css +53 -5
- package/studio/foundation.st.css +3 -1
- package/studio/semantic.st.css +1 -1
- package/wixel/all.css +25 -0
- package/wixel/all.st.css +50 -0
- package/wixel/component.st.css +48 -0
- package/wixel/foundation.st.css +2 -0
package/CHANGELOG.md
CHANGED
package/all.css
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
--wds-shadow-y-300: 0;
|
|
34
34
|
--wds-shadow-y-200: 0;
|
|
35
35
|
--wds-shadow-y-100: 0;
|
|
36
|
+
--wds-shadow-y-0: 0;
|
|
36
37
|
--wds-shadow-blur-400: 24px;
|
|
37
38
|
--wds-shadow-blur-200: 18px;
|
|
38
39
|
--wds-shadow-blur-150: 6px;
|
|
@@ -1402,6 +1403,30 @@
|
|
|
1402
1403
|
--wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
|
|
1403
1404
|
--wds-info-icon-fill-hover: var(--wds-color-text-primary);
|
|
1404
1405
|
--wds-info-icon-fill: var(--wds-color-text-primary);
|
|
1406
|
+
--wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1407
|
+
--wds-icon-button-color-text-standard-tertiary-active: var(--wds-color-fill-standard-primary-active);
|
|
1408
|
+
--wds-icon-button-color-text-standard-tertiary: var(--wds-color-text-primary);
|
|
1409
|
+
--wds-icon-button-color-text-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
|
|
1410
|
+
--wds-icon-button-color-text-standard-secondary-active: var(--wds-color-text-standard-primary-light);
|
|
1411
|
+
--wds-icon-button-color-text-standard-secondary: var(--wds-color-text-primary);
|
|
1412
|
+
--wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary-light);
|
|
1413
|
+
--wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary-light);
|
|
1414
|
+
--wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary-light);
|
|
1415
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: var(--wds-color-fill-standard-tertiary);
|
|
1416
|
+
--wds-icon-button-color-fill-standard-tertiary-active: var(--wds-color-fill-standard-tertiary);
|
|
1417
|
+
--wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-standard-tertiary);
|
|
1418
|
+
--wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1419
|
+
--wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-secondary-active);
|
|
1420
|
+
--wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
|
|
1421
|
+
--wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1422
|
+
--wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
|
|
1423
|
+
--wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
|
|
1424
|
+
--wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1425
|
+
--wds-icon-button-color-border-standard-secondary-active: var(--wds-color-fill-standard-secondary-active);
|
|
1426
|
+
--wds-icon-button-color-border-standard-secondary: var(--wds-color-border-standard-secondary);
|
|
1427
|
+
--wds-icon-button-color-border-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1428
|
+
--wds-icon-button-color-border-standard-primary-active: var(--wds-color-fill-standard-primary-active);
|
|
1429
|
+
--wds-icon-button-color-border-standard-primary: var(--wds-color-fill-standard-primary);
|
|
1405
1430
|
--wds-form-field-label-font-size-tiny: var(--wds-font-size-body-tiny);
|
|
1406
1431
|
--wds-form-field-label-font-size-small: var(--wds-font-size-body-small);
|
|
1407
1432
|
--wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
|
package/all.st.css
CHANGED
|
@@ -798,6 +798,30 @@
|
|
|
798
798
|
@property st-global(--wds-gallery-item-padding-right-small);
|
|
799
799
|
@property st-global(--wds-gallery-item-padding-vertical-medium);
|
|
800
800
|
@property st-global(--wds-gallery-item-padding-vertical-small);
|
|
801
|
+
@property st-global(--wds-icon-button-color-border-standard-primary);
|
|
802
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-active);
|
|
803
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-hover);
|
|
804
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary);
|
|
805
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-active);
|
|
806
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-hover);
|
|
807
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary);
|
|
808
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-active);
|
|
809
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-hover);
|
|
810
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary);
|
|
811
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-active);
|
|
812
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-hover);
|
|
813
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary);
|
|
814
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
|
|
815
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
|
|
816
|
+
@property st-global(--wds-icon-button-color-text-standard-primary);
|
|
817
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-active);
|
|
818
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-hover);
|
|
819
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary);
|
|
820
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-active);
|
|
821
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-hover);
|
|
822
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary);
|
|
823
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-active);
|
|
824
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
|
|
801
825
|
@property st-global(--wds-image-border-radius-default);
|
|
802
826
|
@property st-global(--wds-image-border-radius-none);
|
|
803
827
|
@property st-global(--wds-info-icon-fill);
|
|
@@ -1152,6 +1176,7 @@
|
|
|
1152
1176
|
@property st-global(--wds-shadow-surface-overlay);
|
|
1153
1177
|
@property st-global(--wds-shadow-surface-overlay-dark);
|
|
1154
1178
|
@property st-global(--wds-shadow-surface-raised);
|
|
1179
|
+
@property st-global(--wds-shadow-y-0);
|
|
1155
1180
|
@property st-global(--wds-shadow-y-100);
|
|
1156
1181
|
@property st-global(--wds-shadow-y-200);
|
|
1157
1182
|
@property st-global(--wds-shadow-y-300);
|
|
@@ -2326,6 +2351,30 @@
|
|
|
2326
2351
|
--wds-gallery-item-padding-right-small: 18px;
|
|
2327
2352
|
--wds-gallery-item-padding-vertical-medium: 18px;
|
|
2328
2353
|
--wds-gallery-item-padding-vertical-small: 12px;
|
|
2354
|
+
--wds-icon-button-color-border-standard-primary: #116dff;
|
|
2355
|
+
--wds-icon-button-color-border-standard-primary-active: #084ebd;
|
|
2356
|
+
--wds-icon-button-color-border-standard-primary-hover: #0f62e6;
|
|
2357
|
+
--wds-icon-button-color-border-standard-secondary: #d6e6fe;
|
|
2358
|
+
--wds-icon-button-color-border-standard-secondary-active: #5999ff;
|
|
2359
|
+
--wds-icon-button-color-border-standard-secondary-hover: #0f62e6;
|
|
2360
|
+
--wds-icon-button-color-fill-standard-primary: #116dff;
|
|
2361
|
+
--wds-icon-button-color-fill-standard-primary-active: #084ebd;
|
|
2362
|
+
--wds-icon-button-color-fill-standard-primary-hover: #0f62e6;
|
|
2363
|
+
--wds-icon-button-color-fill-standard-secondary: #ffffff;
|
|
2364
|
+
--wds-icon-button-color-fill-standard-secondary-active: #5999ff;
|
|
2365
|
+
--wds-icon-button-color-fill-standard-secondary-hover: #0f62e6;
|
|
2366
|
+
--wds-icon-button-color-fill-standard-tertiary: #ffffff;
|
|
2367
|
+
--wds-icon-button-color-fill-standard-tertiary-active: #ffffff;
|
|
2368
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: #ffffff;
|
|
2369
|
+
--wds-icon-button-color-text-standard-primary: #ffffff;
|
|
2370
|
+
--wds-icon-button-color-text-standard-primary-active: #ffffff;
|
|
2371
|
+
--wds-icon-button-color-text-standard-primary-hover: #ffffff;
|
|
2372
|
+
--wds-icon-button-color-text-standard-secondary: #116dff;
|
|
2373
|
+
--wds-icon-button-color-text-standard-secondary-active: #ffffff;
|
|
2374
|
+
--wds-icon-button-color-text-standard-secondary-hover: #ffffff;
|
|
2375
|
+
--wds-icon-button-color-text-standard-tertiary: #116dff;
|
|
2376
|
+
--wds-icon-button-color-text-standard-tertiary-active: #084ebd;
|
|
2377
|
+
--wds-icon-button-color-text-standard-tertiary-hover: #0f62e6;
|
|
2329
2378
|
--wds-image-border-radius-default: 8px;
|
|
2330
2379
|
--wds-image-border-radius-none: 0;
|
|
2331
2380
|
--wds-info-icon-fill: #116dff;
|
|
@@ -2680,6 +2729,7 @@
|
|
|
2680
2729
|
--wds-shadow-surface-overlay: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
|
|
2681
2730
|
--wds-shadow-surface-overlay-dark: 0 0 18px rgba(0, 6, 36, .1), 0 6px 6px rgba(0, 6, 36, .05);
|
|
2682
2731
|
--wds-shadow-surface-raised: 0 0 6px rgba(0, 6, 36, .1), 0 2px 4px rgba(0, 6, 36, .1);
|
|
2732
|
+
--wds-shadow-y-0: 0;
|
|
2683
2733
|
--wds-shadow-y-100: 0;
|
|
2684
2734
|
--wds-shadow-y-200: 0;
|
|
2685
2735
|
--wds-shadow-y-300: 0;
|
package/component.st.css
CHANGED
|
@@ -263,6 +263,30 @@
|
|
|
263
263
|
@property st-global(--wds-gallery-item-padding-right-small);
|
|
264
264
|
@property st-global(--wds-gallery-item-padding-vertical-medium);
|
|
265
265
|
@property st-global(--wds-gallery-item-padding-vertical-small);
|
|
266
|
+
@property st-global(--wds-icon-button-color-border-standard-primary);
|
|
267
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-active);
|
|
268
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-hover);
|
|
269
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary);
|
|
270
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-active);
|
|
271
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-hover);
|
|
272
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary);
|
|
273
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-active);
|
|
274
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-hover);
|
|
275
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary);
|
|
276
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-active);
|
|
277
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-hover);
|
|
278
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary);
|
|
279
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
|
|
280
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
|
|
281
|
+
@property st-global(--wds-icon-button-color-text-standard-primary);
|
|
282
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-active);
|
|
283
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-hover);
|
|
284
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary);
|
|
285
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-active);
|
|
286
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-hover);
|
|
287
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary);
|
|
288
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-active);
|
|
289
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
|
|
266
290
|
@property st-global(--wds-image-border-radius-default);
|
|
267
291
|
@property st-global(--wds-image-border-radius-none);
|
|
268
292
|
@property st-global(--wds-info-icon-fill);
|
|
@@ -1166,6 +1190,30 @@
|
|
|
1166
1190
|
--wds-gallery-item-padding-right-small: 18px;
|
|
1167
1191
|
--wds-gallery-item-padding-vertical-medium: 18px;
|
|
1168
1192
|
--wds-gallery-item-padding-vertical-small: 12px;
|
|
1193
|
+
--wds-icon-button-color-border-standard-primary: #116dff;
|
|
1194
|
+
--wds-icon-button-color-border-standard-primary-active: #084ebd;
|
|
1195
|
+
--wds-icon-button-color-border-standard-primary-hover: #0f62e6;
|
|
1196
|
+
--wds-icon-button-color-border-standard-secondary: #d6e6fe;
|
|
1197
|
+
--wds-icon-button-color-border-standard-secondary-active: #5999ff;
|
|
1198
|
+
--wds-icon-button-color-border-standard-secondary-hover: #0f62e6;
|
|
1199
|
+
--wds-icon-button-color-fill-standard-primary: #116dff;
|
|
1200
|
+
--wds-icon-button-color-fill-standard-primary-active: #084ebd;
|
|
1201
|
+
--wds-icon-button-color-fill-standard-primary-hover: #0f62e6;
|
|
1202
|
+
--wds-icon-button-color-fill-standard-secondary: #ffffff;
|
|
1203
|
+
--wds-icon-button-color-fill-standard-secondary-active: #5999ff;
|
|
1204
|
+
--wds-icon-button-color-fill-standard-secondary-hover: #0f62e6;
|
|
1205
|
+
--wds-icon-button-color-fill-standard-tertiary: #ffffff;
|
|
1206
|
+
--wds-icon-button-color-fill-standard-tertiary-active: #ffffff;
|
|
1207
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: #ffffff;
|
|
1208
|
+
--wds-icon-button-color-text-standard-primary: #ffffff;
|
|
1209
|
+
--wds-icon-button-color-text-standard-primary-active: #ffffff;
|
|
1210
|
+
--wds-icon-button-color-text-standard-primary-hover: #ffffff;
|
|
1211
|
+
--wds-icon-button-color-text-standard-secondary: #116dff;
|
|
1212
|
+
--wds-icon-button-color-text-standard-secondary-active: #ffffff;
|
|
1213
|
+
--wds-icon-button-color-text-standard-secondary-hover: #ffffff;
|
|
1214
|
+
--wds-icon-button-color-text-standard-tertiary: #116dff;
|
|
1215
|
+
--wds-icon-button-color-text-standard-tertiary-active: #084ebd;
|
|
1216
|
+
--wds-icon-button-color-text-standard-tertiary-hover: #0f62e6;
|
|
1169
1217
|
--wds-image-border-radius-default: 8px;
|
|
1170
1218
|
--wds-image-border-radius-none: 0;
|
|
1171
1219
|
--wds-info-icon-fill: #116dff;
|
package/foundation.st.css
CHANGED
|
@@ -165,6 +165,7 @@
|
|
|
165
165
|
@property st-global(--wds-shadow-inner-400-right);
|
|
166
166
|
@property st-global(--wds-shadow-inner-400-top);
|
|
167
167
|
@property st-global(--wds-shadow-inner-400-vertical);
|
|
168
|
+
@property st-global(--wds-shadow-y-0);
|
|
168
169
|
@property st-global(--wds-shadow-y-100);
|
|
169
170
|
@property st-global(--wds-shadow-y-200);
|
|
170
171
|
@property st-global(--wds-shadow-y-300);
|
|
@@ -367,6 +368,7 @@
|
|
|
367
368
|
--wds-shadow-inner-400-right: -32px 0 24px -24px rgba(0, 6, 36, .2) inset, -8px 0 6px -6px rgba(0, 6, 36, .05) inset;
|
|
368
369
|
--wds-shadow-inner-400-top: 0 32px 24px -24px rgba(0, 6, 36, .2) inset, 0 8px 6px -6px rgba(0, 6, 36, .05) inset;
|
|
369
370
|
--wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset, 0 -22px 18px -18px rgba(0, 6, 36, .1) inset, 0 -8px 6px -6px rgba(0, 6, 36, .05) inset;
|
|
371
|
+
--wds-shadow-y-0: 0;
|
|
370
372
|
--wds-shadow-y-100: 0;
|
|
371
373
|
--wds-shadow-y-200: 0;
|
|
372
374
|
--wds-shadow-y-300: 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/design-system-tokens",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.102.1",
|
|
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": "
|
|
36
|
+
"falconPackageHash": "fb3a9a23cd3519ed16da2811a16cf71517b84f96cd97934270aae5d9"
|
|
37
37
|
}
|
package/studio/all.css
CHANGED
|
@@ -33,9 +33,10 @@
|
|
|
33
33
|
--wds-shadow-y-300: 0;
|
|
34
34
|
--wds-shadow-y-200: 0;
|
|
35
35
|
--wds-shadow-y-100: 0;
|
|
36
|
+
--wds-shadow-y-0: 0;
|
|
36
37
|
--wds-shadow-blur-400: 24;
|
|
37
38
|
--wds-shadow-blur-200: 18;
|
|
38
|
-
--wds-shadow-blur-150:
|
|
39
|
+
--wds-shadow-blur-150: 12;
|
|
39
40
|
--wds-shadow-blur-100: 4;
|
|
40
41
|
--wds-shadow-blur-50: 4;
|
|
41
42
|
--wds-font-weight-semi-bold: 600;
|
|
@@ -332,6 +333,7 @@
|
|
|
332
333
|
--wds-button-icon-offset-medium: 18px;
|
|
333
334
|
--wds-button-icon-offset-large: 18px;
|
|
334
335
|
--wds-avatar-group-gap-condensed: -2px;
|
|
336
|
+
--wds-accordion-title-font-line-height-small: 18px;
|
|
335
337
|
--wds-width-default-2: var(--wds-border-width-100);
|
|
336
338
|
--wds-width-default: var(--wds-border-width-100);
|
|
337
339
|
--wds-border-width-default: var(--wds-border-width-100);
|
|
@@ -353,6 +355,7 @@
|
|
|
353
355
|
--wds-space-padding-horizontal-small: var(--wds-space-400);
|
|
354
356
|
--wds-space-padding-horizontal-medium: var(--wds-space-500);
|
|
355
357
|
--wds-space-padding-horizontal-large: var(--wds-space-600);
|
|
358
|
+
--wds-shadow-surface-overlay-dark: var(--wds-shadow-y-0) 0 var(--wds-shadow-blur-150) 0 var(--wds-color-black-100-transparent-20);
|
|
356
359
|
--wds-shadow-focus-warning: 0 0 0 3px var(--wds-color-yellow-400);
|
|
357
360
|
--wds-shadow-focus-standard: 0 0 0 3px var(--wds-color-blue-300);
|
|
358
361
|
--wds-shadow-focus-inner-warning: 0 0 0 3px var(--wds-color-yellow-400) inset;
|
|
@@ -699,10 +702,10 @@
|
|
|
699
702
|
--wds-vertical-tabs-action-padding-horizontal-tiny: var(--wds-space-600);
|
|
700
703
|
--wds-vertical-tabs-action-padding-horizontal-small: var(--wds-space-600);
|
|
701
704
|
--wds-vertical-tabs-action-padding-horizontal-medium: var(--wds-space-600);
|
|
702
|
-
--wds-tooltip-padding-vertical-small: var(--wds-space-
|
|
703
|
-
--wds-tooltip-padding-vertical-medium: var(--wds-space-
|
|
705
|
+
--wds-tooltip-padding-vertical-small: var(--wds-space-200);
|
|
706
|
+
--wds-tooltip-padding-vertical-medium: var(--wds-space-300);
|
|
704
707
|
--wds-tooltip-padding-horizontal-small: var(--wds-space-200);
|
|
705
|
-
--wds-tooltip-padding-horizontal-medium: var(--wds-space-
|
|
708
|
+
--wds-tooltip-padding-horizontal-medium: var(--wds-space-300);
|
|
706
709
|
--wds-tooltip-border-radius-small: var(--wds-border-radius-400);
|
|
707
710
|
--wds-tooltip-border-radius-medium: var(--wds-border-radius-400);
|
|
708
711
|
--wds-tooltip-border-radius: var(--wds-border-radius-200);
|
|
@@ -1241,10 +1244,9 @@
|
|
|
1241
1244
|
--wds-add-item-padding-horizontal-tiny: var(--wds-space-300);
|
|
1242
1245
|
--wds-add-item-padding-horizontal-large: var(--wds-space-700);
|
|
1243
1246
|
--wds-add-item-border-radius: var(--wds-border-radius-200);
|
|
1244
|
-
--wds-accordion-title-font-weight-small: var(--wds-font-weight-
|
|
1247
|
+
--wds-accordion-title-font-weight-small: var(--wds-font-weight-bold);
|
|
1245
1248
|
--wds-accordion-title-font-weight: var(--wds-font-weight-medium);
|
|
1246
1249
|
--wds-shadow-surface-raised: var(--wds-shadow-200);
|
|
1247
|
-
--wds-shadow-surface-overlay-dark: var(--wds-shadow-300);
|
|
1248
1250
|
--wds-shadow-surface-overlay: var(--wds-shadow-300);
|
|
1249
1251
|
--wds-shadow-surface-modal: var(--wds-shadow-400);
|
|
1250
1252
|
--wds-shadow-inner-400-vertical: var(--wds-shadow-inner-300-top), var(--wds-shadow-inner-300-bottom);
|
|
@@ -1409,6 +1411,30 @@
|
|
|
1409
1411
|
--wds-input-background-fill-default: var(--wds-color-fill-standard-tertiary);
|
|
1410
1412
|
--wds-info-icon-fill-hover: var(--wds-color-text-primary);
|
|
1411
1413
|
--wds-info-icon-fill: var(--wds-color-text-placeholder);
|
|
1414
|
+
--wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1415
|
+
--wds-icon-button-color-text-standard-tertiary-active: var(--wds-color-fill-standard-primary-active);
|
|
1416
|
+
--wds-icon-button-color-text-standard-tertiary: var(--wds-color-text-primary);
|
|
1417
|
+
--wds-icon-button-color-text-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
|
|
1418
|
+
--wds-icon-button-color-text-standard-secondary-active: var(--wds-color-text-standard-primary-light);
|
|
1419
|
+
--wds-icon-button-color-text-standard-secondary: var(--wds-color-text-primary);
|
|
1420
|
+
--wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary-light);
|
|
1421
|
+
--wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary-light);
|
|
1422
|
+
--wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary-light);
|
|
1423
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: var(--wds-color-fill-standard-tertiary);
|
|
1424
|
+
--wds-icon-button-color-fill-standard-tertiary-active: var(--wds-color-fill-standard-tertiary);
|
|
1425
|
+
--wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-standard-tertiary);
|
|
1426
|
+
--wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1427
|
+
--wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-secondary-active);
|
|
1428
|
+
--wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
|
|
1429
|
+
--wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1430
|
+
--wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
|
|
1431
|
+
--wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
|
|
1432
|
+
--wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1433
|
+
--wds-icon-button-color-border-standard-secondary-active: var(--wds-color-fill-standard-secondary-active);
|
|
1434
|
+
--wds-icon-button-color-border-standard-secondary: var(--wds-color-border-standard-secondary);
|
|
1435
|
+
--wds-icon-button-color-border-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1436
|
+
--wds-icon-button-color-border-standard-primary-active: var(--wds-color-fill-standard-primary-active);
|
|
1437
|
+
--wds-icon-button-color-border-standard-primary: var(--wds-color-fill-standard-primary);
|
|
1412
1438
|
--wds-form-field-label-font-size-tiny: var(--wds-font-size-body-extra-tiny);
|
|
1413
1439
|
--wds-form-field-label-font-size-small: var(--wds-font-size-body-tiny);
|
|
1414
1440
|
--wds-form-field-label-fill: var(--wds-color-text-standard-secondary);
|
|
@@ -1516,6 +1542,5 @@
|
|
|
1516
1542
|
--wds-announcement-modal-text-font-line-height: var(--wds-font-line-height-body-small);
|
|
1517
1543
|
--wds-add-item-title-font-line-height-tiny: var(--wds-font-line-height-body-tiny);
|
|
1518
1544
|
--wds-add-item-title-font-line-height-medium: var(--wds-font-line-height-body-small);
|
|
1519
|
-
--wds-accordion-title-font-line-height-small: var(--wds-font-line-height-body-tiny);
|
|
1520
1545
|
--wds-accordion-title-font-line-height-medium: var(--wds-font-line-height-body-small);
|
|
1521
1546
|
}
|
package/studio/all.st.css
CHANGED
|
@@ -794,6 +794,30 @@
|
|
|
794
794
|
@property st-global(--wds-gallery-item-padding-right-small);
|
|
795
795
|
@property st-global(--wds-gallery-item-padding-vertical-medium);
|
|
796
796
|
@property st-global(--wds-gallery-item-padding-vertical-small);
|
|
797
|
+
@property st-global(--wds-icon-button-color-border-standard-primary);
|
|
798
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-active);
|
|
799
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-hover);
|
|
800
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary);
|
|
801
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-active);
|
|
802
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-hover);
|
|
803
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary);
|
|
804
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-active);
|
|
805
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-hover);
|
|
806
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary);
|
|
807
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-active);
|
|
808
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-hover);
|
|
809
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary);
|
|
810
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
|
|
811
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
|
|
812
|
+
@property st-global(--wds-icon-button-color-text-standard-primary);
|
|
813
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-active);
|
|
814
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-hover);
|
|
815
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary);
|
|
816
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-active);
|
|
817
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-hover);
|
|
818
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary);
|
|
819
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-active);
|
|
820
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
|
|
797
821
|
@property st-global(--wds-image-border-radius-default);
|
|
798
822
|
@property st-global(--wds-image-border-radius-none);
|
|
799
823
|
@property st-global(--wds-info-icon-fill);
|
|
@@ -1140,6 +1164,7 @@
|
|
|
1140
1164
|
@property st-global(--wds-shadow-surface-overlay);
|
|
1141
1165
|
@property st-global(--wds-shadow-surface-overlay-dark);
|
|
1142
1166
|
@property st-global(--wds-shadow-surface-raised);
|
|
1167
|
+
@property st-global(--wds-shadow-y-0);
|
|
1143
1168
|
@property st-global(--wds-shadow-y-100);
|
|
1144
1169
|
@property st-global(--wds-shadow-y-200);
|
|
1145
1170
|
@property st-global(--wds-shadow-y-300);
|
|
@@ -1526,11 +1551,11 @@
|
|
|
1526
1551
|
--wds-accordion-title-fill: #131720;
|
|
1527
1552
|
--wds-accordion-title-fill-hover: #131720;
|
|
1528
1553
|
--wds-accordion-title-font-line-height-medium: 20px;
|
|
1529
|
-
--wds-accordion-title-font-line-height-small:
|
|
1554
|
+
--wds-accordion-title-font-line-height-small: 18px;
|
|
1530
1555
|
--wds-accordion-title-font-size-medium: 14px;
|
|
1531
1556
|
--wds-accordion-title-font-size-small: 12px;
|
|
1532
1557
|
--wds-accordion-title-font-weight: 500;
|
|
1533
|
-
--wds-accordion-title-font-weight-small:
|
|
1558
|
+
--wds-accordion-title-font-weight-small: 700;
|
|
1534
1559
|
--wds-add-item-border-radius: 4px;
|
|
1535
1560
|
--wds-add-item-padding-horizontal-large: 28px;
|
|
1536
1561
|
--wds-add-item-padding-horizontal-tiny: 12px;
|
|
@@ -2315,6 +2340,30 @@
|
|
|
2315
2340
|
--wds-gallery-item-padding-right-small: 18px;
|
|
2316
2341
|
--wds-gallery-item-padding-vertical-medium: 18px;
|
|
2317
2342
|
--wds-gallery-item-padding-vertical-small: 12px;
|
|
2343
|
+
--wds-icon-button-color-border-standard-primary: #116dff;
|
|
2344
|
+
--wds-icon-button-color-border-standard-primary-active: #116dff;
|
|
2345
|
+
--wds-icon-button-color-border-standard-primary-hover: #0f62e6;
|
|
2346
|
+
--wds-icon-button-color-border-standard-secondary: #e2e3ea;
|
|
2347
|
+
--wds-icon-button-color-border-standard-secondary-active: #dce9ff;
|
|
2348
|
+
--wds-icon-button-color-border-standard-secondary-hover: #0f62e6;
|
|
2349
|
+
--wds-icon-button-color-fill-standard-primary: #116dff;
|
|
2350
|
+
--wds-icon-button-color-fill-standard-primary-active: #116dff;
|
|
2351
|
+
--wds-icon-button-color-fill-standard-primary-hover: #0f62e6;
|
|
2352
|
+
--wds-icon-button-color-fill-standard-secondary: #ffffff;
|
|
2353
|
+
--wds-icon-button-color-fill-standard-secondary-active: #dce9ff;
|
|
2354
|
+
--wds-icon-button-color-fill-standard-secondary-hover: #0f62e6;
|
|
2355
|
+
--wds-icon-button-color-fill-standard-tertiary: #ffffff;
|
|
2356
|
+
--wds-icon-button-color-fill-standard-tertiary-active: #ffffff;
|
|
2357
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: #ffffff;
|
|
2358
|
+
--wds-icon-button-color-text-standard-primary: #ffffff;
|
|
2359
|
+
--wds-icon-button-color-text-standard-primary-active: #ffffff;
|
|
2360
|
+
--wds-icon-button-color-text-standard-primary-hover: #ffffff;
|
|
2361
|
+
--wds-icon-button-color-text-standard-secondary: #116dff;
|
|
2362
|
+
--wds-icon-button-color-text-standard-secondary-active: #ffffff;
|
|
2363
|
+
--wds-icon-button-color-text-standard-secondary-hover: #ffffff;
|
|
2364
|
+
--wds-icon-button-color-text-standard-tertiary: #116dff;
|
|
2365
|
+
--wds-icon-button-color-text-standard-tertiary-active: #116dff;
|
|
2366
|
+
--wds-icon-button-color-text-standard-tertiary-hover: #0f62e6;
|
|
2318
2367
|
--wds-image-border-radius-default: 4px;
|
|
2319
2368
|
--wds-image-border-radius-none: 0;
|
|
2320
2369
|
--wds-info-icon-fill: #868aa5;
|
|
@@ -2624,7 +2673,7 @@
|
|
|
2624
2673
|
--wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
|
|
2625
2674
|
--wds-shadow-blur-50: 4;
|
|
2626
2675
|
--wds-shadow-blur-100: 4;
|
|
2627
|
-
--wds-shadow-blur-150:
|
|
2676
|
+
--wds-shadow-blur-150: 12;
|
|
2628
2677
|
--wds-shadow-blur-200: 18;
|
|
2629
2678
|
--wds-shadow-blur-400: 24;
|
|
2630
2679
|
--wds-shadow-fill-primary-modal: rgba(19, 23, 32, .2);
|
|
@@ -2659,8 +2708,9 @@
|
|
|
2659
2708
|
--wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
|
|
2660
2709
|
--wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
|
|
2661
2710
|
--wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
|
|
2662
|
-
--wds-shadow-surface-overlay-dark: 0
|
|
2711
|
+
--wds-shadow-surface-overlay-dark: 0 0 12 0 rgba(19, 23, 32, .2);
|
|
2663
2712
|
--wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
|
|
2713
|
+
--wds-shadow-y-0: 0;
|
|
2664
2714
|
--wds-shadow-y-100: 0;
|
|
2665
2715
|
--wds-shadow-y-200: 0;
|
|
2666
2716
|
--wds-shadow-y-300: 0;
|
|
@@ -2959,10 +3009,10 @@
|
|
|
2959
3009
|
--wds-tooltip-border-radius: 4px;
|
|
2960
3010
|
--wds-tooltip-border-radius-medium: 8px;
|
|
2961
3011
|
--wds-tooltip-border-radius-small: 8px;
|
|
2962
|
-
--wds-tooltip-padding-horizontal-medium:
|
|
3012
|
+
--wds-tooltip-padding-horizontal-medium: 12px;
|
|
2963
3013
|
--wds-tooltip-padding-horizontal-small: 8px;
|
|
2964
|
-
--wds-tooltip-padding-vertical-medium:
|
|
2965
|
-
--wds-tooltip-padding-vertical-small:
|
|
3014
|
+
--wds-tooltip-padding-vertical-medium: 12px;
|
|
3015
|
+
--wds-tooltip-padding-vertical-small: 8px;
|
|
2966
3016
|
--wds-tooltip-text-fill: #131720;
|
|
2967
3017
|
--wds-vertical-tabs-action-padding-horizontal-medium: 24px;
|
|
2968
3018
|
--wds-vertical-tabs-action-padding-horizontal-small: 24px;
|
package/studio/component.st.css
CHANGED
|
@@ -263,6 +263,30 @@
|
|
|
263
263
|
@property st-global(--wds-gallery-item-padding-right-small);
|
|
264
264
|
@property st-global(--wds-gallery-item-padding-vertical-medium);
|
|
265
265
|
@property st-global(--wds-gallery-item-padding-vertical-small);
|
|
266
|
+
@property st-global(--wds-icon-button-color-border-standard-primary);
|
|
267
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-active);
|
|
268
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-hover);
|
|
269
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary);
|
|
270
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-active);
|
|
271
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-hover);
|
|
272
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary);
|
|
273
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-active);
|
|
274
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-hover);
|
|
275
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary);
|
|
276
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-active);
|
|
277
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-hover);
|
|
278
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary);
|
|
279
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
|
|
280
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
|
|
281
|
+
@property st-global(--wds-icon-button-color-text-standard-primary);
|
|
282
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-active);
|
|
283
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-hover);
|
|
284
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary);
|
|
285
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-active);
|
|
286
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-hover);
|
|
287
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary);
|
|
288
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-active);
|
|
289
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
|
|
266
290
|
@property st-global(--wds-image-border-radius-default);
|
|
267
291
|
@property st-global(--wds-image-border-radius-none);
|
|
268
292
|
@property st-global(--wds-info-icon-fill);
|
|
@@ -905,11 +929,11 @@
|
|
|
905
929
|
--wds-accordion-title-fill: #131720;
|
|
906
930
|
--wds-accordion-title-fill-hover: #131720;
|
|
907
931
|
--wds-accordion-title-font-line-height-medium: 20px;
|
|
908
|
-
--wds-accordion-title-font-line-height-small:
|
|
932
|
+
--wds-accordion-title-font-line-height-small: 18px;
|
|
909
933
|
--wds-accordion-title-font-size-medium: 14px;
|
|
910
934
|
--wds-accordion-title-font-size-small: 12px;
|
|
911
935
|
--wds-accordion-title-font-weight: 500;
|
|
912
|
-
--wds-accordion-title-font-weight-small:
|
|
936
|
+
--wds-accordion-title-font-weight-small: 700;
|
|
913
937
|
--wds-add-item-border-radius: 4px;
|
|
914
938
|
--wds-add-item-padding-horizontal-large: 28px;
|
|
915
939
|
--wds-add-item-padding-horizontal-tiny: 12px;
|
|
@@ -1163,6 +1187,30 @@
|
|
|
1163
1187
|
--wds-gallery-item-padding-right-small: 18px;
|
|
1164
1188
|
--wds-gallery-item-padding-vertical-medium: 18px;
|
|
1165
1189
|
--wds-gallery-item-padding-vertical-small: 12px;
|
|
1190
|
+
--wds-icon-button-color-border-standard-primary: #116dff;
|
|
1191
|
+
--wds-icon-button-color-border-standard-primary-active: #116dff;
|
|
1192
|
+
--wds-icon-button-color-border-standard-primary-hover: #0f62e6;
|
|
1193
|
+
--wds-icon-button-color-border-standard-secondary: #e2e3ea;
|
|
1194
|
+
--wds-icon-button-color-border-standard-secondary-active: #dce9ff;
|
|
1195
|
+
--wds-icon-button-color-border-standard-secondary-hover: #0f62e6;
|
|
1196
|
+
--wds-icon-button-color-fill-standard-primary: #116dff;
|
|
1197
|
+
--wds-icon-button-color-fill-standard-primary-active: #116dff;
|
|
1198
|
+
--wds-icon-button-color-fill-standard-primary-hover: #0f62e6;
|
|
1199
|
+
--wds-icon-button-color-fill-standard-secondary: #ffffff;
|
|
1200
|
+
--wds-icon-button-color-fill-standard-secondary-active: #dce9ff;
|
|
1201
|
+
--wds-icon-button-color-fill-standard-secondary-hover: #0f62e6;
|
|
1202
|
+
--wds-icon-button-color-fill-standard-tertiary: #ffffff;
|
|
1203
|
+
--wds-icon-button-color-fill-standard-tertiary-active: #ffffff;
|
|
1204
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: #ffffff;
|
|
1205
|
+
--wds-icon-button-color-text-standard-primary: #ffffff;
|
|
1206
|
+
--wds-icon-button-color-text-standard-primary-active: #ffffff;
|
|
1207
|
+
--wds-icon-button-color-text-standard-primary-hover: #ffffff;
|
|
1208
|
+
--wds-icon-button-color-text-standard-secondary: #116dff;
|
|
1209
|
+
--wds-icon-button-color-text-standard-secondary-active: #ffffff;
|
|
1210
|
+
--wds-icon-button-color-text-standard-secondary-hover: #ffffff;
|
|
1211
|
+
--wds-icon-button-color-text-standard-tertiary: #116dff;
|
|
1212
|
+
--wds-icon-button-color-text-standard-tertiary-active: #116dff;
|
|
1213
|
+
--wds-icon-button-color-text-standard-tertiary-hover: #0f62e6;
|
|
1166
1214
|
--wds-image-border-radius-default: 4px;
|
|
1167
1215
|
--wds-image-border-radius-none: 0;
|
|
1168
1216
|
--wds-info-icon-fill: #868aa5;
|
|
@@ -1719,10 +1767,10 @@
|
|
|
1719
1767
|
--wds-tooltip-border-radius: 4px;
|
|
1720
1768
|
--wds-tooltip-border-radius-medium: 8px;
|
|
1721
1769
|
--wds-tooltip-border-radius-small: 8px;
|
|
1722
|
-
--wds-tooltip-padding-horizontal-medium:
|
|
1770
|
+
--wds-tooltip-padding-horizontal-medium: 12px;
|
|
1723
1771
|
--wds-tooltip-padding-horizontal-small: 8px;
|
|
1724
|
-
--wds-tooltip-padding-vertical-medium:
|
|
1725
|
-
--wds-tooltip-padding-vertical-small:
|
|
1772
|
+
--wds-tooltip-padding-vertical-medium: 12px;
|
|
1773
|
+
--wds-tooltip-padding-vertical-small: 8px;
|
|
1726
1774
|
--wds-tooltip-text-fill: #131720;
|
|
1727
1775
|
--wds-vertical-tabs-action-padding-horizontal-medium: 24px;
|
|
1728
1776
|
--wds-vertical-tabs-action-padding-horizontal-small: 24px;
|
package/studio/foundation.st.css
CHANGED
|
@@ -165,6 +165,7 @@
|
|
|
165
165
|
@property st-global(--wds-shadow-inner-400-right);
|
|
166
166
|
@property st-global(--wds-shadow-inner-400-top);
|
|
167
167
|
@property st-global(--wds-shadow-inner-400-vertical);
|
|
168
|
+
@property st-global(--wds-shadow-y-0);
|
|
168
169
|
@property st-global(--wds-shadow-y-100);
|
|
169
170
|
@property st-global(--wds-shadow-y-200);
|
|
170
171
|
@property st-global(--wds-shadow-y-300);
|
|
@@ -348,7 +349,7 @@
|
|
|
348
349
|
--wds-shadow-400: 0 5px 18px rgba(19, 23, 32, .2);
|
|
349
350
|
--wds-shadow-blur-50: 4;
|
|
350
351
|
--wds-shadow-blur-100: 4;
|
|
351
|
-
--wds-shadow-blur-150:
|
|
352
|
+
--wds-shadow-blur-150: 12;
|
|
352
353
|
--wds-shadow-blur-200: 18;
|
|
353
354
|
--wds-shadow-blur-400: 24;
|
|
354
355
|
--wds-shadow-inner-100: 1px 1px 2px rgba(19, 23, 32, .1) inset, 1px 1px 2px rgba(255, 255, 255, .1);
|
|
@@ -367,6 +368,7 @@
|
|
|
367
368
|
--wds-shadow-inner-400-right: -32px 0 24px -24px rgba(19, 23, 32, .2) inset, -8px 0 6px -6px rgba(19, 23, 32, .05) inset;
|
|
368
369
|
--wds-shadow-inner-400-top: 0 32px 24px -24px rgba(19, 23, 32, .2) inset, 0 8px 6px -6px rgba(19, 23, 32, .05) inset;
|
|
369
370
|
--wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset, 0 -22px 18px -18px rgba(19, 23, 32, .1) inset, 0 -8px 6px -6px rgba(19, 23, 32, .05) inset;
|
|
371
|
+
--wds-shadow-y-0: 0;
|
|
370
372
|
--wds-shadow-y-100: 0;
|
|
371
373
|
--wds-shadow-y-200: 0;
|
|
372
374
|
--wds-shadow-y-300: 0;
|
package/studio/semantic.st.css
CHANGED
|
@@ -826,7 +826,7 @@
|
|
|
826
826
|
--wds-shadow-focus-warning: 0 0 0 3px #fdead2;
|
|
827
827
|
--wds-shadow-surface-modal: 0 5px 18px rgba(19, 23, 32, .2);
|
|
828
828
|
--wds-shadow-surface-overlay: 0 12px 20px rgba(19, 23, 32, .1);
|
|
829
|
-
--wds-shadow-surface-overlay-dark: 0
|
|
829
|
+
--wds-shadow-surface-overlay-dark: 0 0 12 0 rgba(19, 23, 32, .2);
|
|
830
830
|
--wds-shadow-surface-raised: 0 0 12px rgba(19, 23, 32, .2);
|
|
831
831
|
--wds-space-padding-horizontal-large: 24px;
|
|
832
832
|
--wds-space-padding-horizontal-medium: 20px;
|
package/wixel/all.css
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
--wds-shadow-y-300: 10px;
|
|
34
34
|
--wds-shadow-y-200: 2px;
|
|
35
35
|
--wds-shadow-y-100: 1px;
|
|
36
|
+
--wds-shadow-y-0: 0;
|
|
36
37
|
--wds-shadow-blur-400: 30px;
|
|
37
38
|
--wds-shadow-blur-200: 18px;
|
|
38
39
|
--wds-shadow-blur-150: 6px;
|
|
@@ -1425,6 +1426,30 @@
|
|
|
1425
1426
|
--wds-input-background-fill-default: var(--wds-color-fill-standard-secondary);
|
|
1426
1427
|
--wds-info-icon-fill-hover: var(--wds-color-text-primary);
|
|
1427
1428
|
--wds-info-icon-fill: var(--wds-color-text-primary);
|
|
1429
|
+
--wds-icon-button-color-text-standard-tertiary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1430
|
+
--wds-icon-button-color-text-standard-tertiary-active: var(--wds-color-fill-standard-primary-active);
|
|
1431
|
+
--wds-icon-button-color-text-standard-tertiary: var(--wds-color-text-primary);
|
|
1432
|
+
--wds-icon-button-color-text-standard-secondary-hover: var(--wds-color-text-standard-primary-light);
|
|
1433
|
+
--wds-icon-button-color-text-standard-secondary-active: var(--wds-color-text-standard-primary-light);
|
|
1434
|
+
--wds-icon-button-color-text-standard-secondary: var(--wds-color-text-primary);
|
|
1435
|
+
--wds-icon-button-color-text-standard-primary-hover: var(--wds-color-text-standard-primary-light);
|
|
1436
|
+
--wds-icon-button-color-text-standard-primary-active: var(--wds-color-text-standard-primary-light);
|
|
1437
|
+
--wds-icon-button-color-text-standard-primary: var(--wds-color-text-standard-primary-light);
|
|
1438
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: var(--wds-color-fill-standard-tertiary);
|
|
1439
|
+
--wds-icon-button-color-fill-standard-tertiary-active: var(--wds-color-fill-standard-tertiary);
|
|
1440
|
+
--wds-icon-button-color-fill-standard-tertiary: var(--wds-color-fill-standard-tertiary);
|
|
1441
|
+
--wds-icon-button-color-fill-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1442
|
+
--wds-icon-button-color-fill-standard-secondary-active: var(--wds-color-fill-standard-secondary-active);
|
|
1443
|
+
--wds-icon-button-color-fill-standard-secondary: var(--wds-color-fill-standard-tertiary);
|
|
1444
|
+
--wds-icon-button-color-fill-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1445
|
+
--wds-icon-button-color-fill-standard-primary-active: var(--wds-color-fill-standard-primary-active);
|
|
1446
|
+
--wds-icon-button-color-fill-standard-primary: var(--wds-color-fill-standard-primary);
|
|
1447
|
+
--wds-icon-button-color-border-standard-secondary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1448
|
+
--wds-icon-button-color-border-standard-secondary-active: var(--wds-color-fill-standard-secondary-active);
|
|
1449
|
+
--wds-icon-button-color-border-standard-secondary: var(--wds-color-border-standard-secondary);
|
|
1450
|
+
--wds-icon-button-color-border-standard-primary-hover: var(--wds-color-fill-standard-primary-hover);
|
|
1451
|
+
--wds-icon-button-color-border-standard-primary-active: var(--wds-color-fill-standard-primary-active);
|
|
1452
|
+
--wds-icon-button-color-border-standard-primary: var(--wds-color-fill-standard-primary);
|
|
1428
1453
|
--wds-form-field-label-font-size-tiny: var(--wds-font-size-body-tiny);
|
|
1429
1454
|
--wds-form-field-label-font-size-small: var(--wds-font-size-body-small);
|
|
1430
1455
|
--wds-form-field-label-fill: var(--wds-color-text-standard-primary);
|
package/wixel/all.st.css
CHANGED
|
@@ -795,6 +795,30 @@
|
|
|
795
795
|
@property st-global(--wds-gallery-item-padding-right-small);
|
|
796
796
|
@property st-global(--wds-gallery-item-padding-vertical-medium);
|
|
797
797
|
@property st-global(--wds-gallery-item-padding-vertical-small);
|
|
798
|
+
@property st-global(--wds-icon-button-color-border-standard-primary);
|
|
799
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-active);
|
|
800
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-hover);
|
|
801
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary);
|
|
802
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-active);
|
|
803
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-hover);
|
|
804
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary);
|
|
805
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-active);
|
|
806
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-hover);
|
|
807
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary);
|
|
808
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-active);
|
|
809
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-hover);
|
|
810
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary);
|
|
811
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
|
|
812
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
|
|
813
|
+
@property st-global(--wds-icon-button-color-text-standard-primary);
|
|
814
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-active);
|
|
815
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-hover);
|
|
816
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary);
|
|
817
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-active);
|
|
818
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-hover);
|
|
819
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary);
|
|
820
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-active);
|
|
821
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
|
|
798
822
|
@property st-global(--wds-image-border-radius-default);
|
|
799
823
|
@property st-global(--wds-image-border-radius-none);
|
|
800
824
|
@property st-global(--wds-info-icon-fill);
|
|
@@ -1150,6 +1174,7 @@
|
|
|
1150
1174
|
@property st-global(--wds-shadow-surface-overlay);
|
|
1151
1175
|
@property st-global(--wds-shadow-surface-overlay-dark);
|
|
1152
1176
|
@property st-global(--wds-shadow-surface-raised);
|
|
1177
|
+
@property st-global(--wds-shadow-y-0);
|
|
1153
1178
|
@property st-global(--wds-shadow-y-100);
|
|
1154
1179
|
@property st-global(--wds-shadow-y-200);
|
|
1155
1180
|
@property st-global(--wds-shadow-y-300);
|
|
@@ -2328,6 +2353,30 @@
|
|
|
2328
2353
|
--wds-gallery-item-padding-right-small: 18px;
|
|
2329
2354
|
--wds-gallery-item-padding-vertical-medium: 18px;
|
|
2330
2355
|
--wds-gallery-item-padding-vertical-small: 12px;
|
|
2356
|
+
--wds-icon-button-color-border-standard-primary: #526cff;
|
|
2357
|
+
--wds-icon-button-color-border-standard-primary-active: #4a2ae9;
|
|
2358
|
+
--wds-icon-button-color-border-standard-primary-hover: #4c49fb;
|
|
2359
|
+
--wds-icon-button-color-border-standard-secondary: #d6dcff;
|
|
2360
|
+
--wds-icon-button-color-border-standard-secondary-active: #bac5ff;
|
|
2361
|
+
--wds-icon-button-color-border-standard-secondary-hover: #4c49fb;
|
|
2362
|
+
--wds-icon-button-color-fill-standard-primary: #526cff;
|
|
2363
|
+
--wds-icon-button-color-fill-standard-primary-active: #4a2ae9;
|
|
2364
|
+
--wds-icon-button-color-fill-standard-primary-hover: #4c49fb;
|
|
2365
|
+
--wds-icon-button-color-fill-standard-secondary: #ffffff;
|
|
2366
|
+
--wds-icon-button-color-fill-standard-secondary-active: #bac5ff;
|
|
2367
|
+
--wds-icon-button-color-fill-standard-secondary-hover: #4c49fb;
|
|
2368
|
+
--wds-icon-button-color-fill-standard-tertiary: #ffffff;
|
|
2369
|
+
--wds-icon-button-color-fill-standard-tertiary-active: #ffffff;
|
|
2370
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: #ffffff;
|
|
2371
|
+
--wds-icon-button-color-text-standard-primary: #ffffff;
|
|
2372
|
+
--wds-icon-button-color-text-standard-primary-active: #ffffff;
|
|
2373
|
+
--wds-icon-button-color-text-standard-primary-hover: #ffffff;
|
|
2374
|
+
--wds-icon-button-color-text-standard-secondary: #526cff;
|
|
2375
|
+
--wds-icon-button-color-text-standard-secondary-active: #ffffff;
|
|
2376
|
+
--wds-icon-button-color-text-standard-secondary-hover: #ffffff;
|
|
2377
|
+
--wds-icon-button-color-text-standard-tertiary: #526cff;
|
|
2378
|
+
--wds-icon-button-color-text-standard-tertiary-active: #4a2ae9;
|
|
2379
|
+
--wds-icon-button-color-text-standard-tertiary-hover: #4c49fb;
|
|
2331
2380
|
--wds-image-border-radius-default: 4px;
|
|
2332
2381
|
--wds-image-border-radius-none: 0;
|
|
2333
2382
|
--wds-info-icon-fill: #526cff;
|
|
@@ -2683,6 +2732,7 @@
|
|
|
2683
2732
|
--wds-shadow-surface-overlay: 0 2px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
|
|
2684
2733
|
--wds-shadow-surface-overlay-dark: 0 10px 18px rgba(38, 37, 36, 0.1000), 0 6px 6px rgba(38, 37, 36, 0.0000);
|
|
2685
2734
|
--wds-shadow-surface-raised: 0 1px 4px rgba(38, 37, 36, 0.3000), 0 2px 4px rgba(38, 37, 36, 0.0000);
|
|
2735
|
+
--wds-shadow-y-0: 0;
|
|
2686
2736
|
--wds-shadow-y-100: 1px;
|
|
2687
2737
|
--wds-shadow-y-200: 2px;
|
|
2688
2738
|
--wds-shadow-y-300: 10px;
|
package/wixel/component.st.css
CHANGED
|
@@ -260,6 +260,30 @@
|
|
|
260
260
|
@property st-global(--wds-gallery-item-padding-right-small);
|
|
261
261
|
@property st-global(--wds-gallery-item-padding-vertical-medium);
|
|
262
262
|
@property st-global(--wds-gallery-item-padding-vertical-small);
|
|
263
|
+
@property st-global(--wds-icon-button-color-border-standard-primary);
|
|
264
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-active);
|
|
265
|
+
@property st-global(--wds-icon-button-color-border-standard-primary-hover);
|
|
266
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary);
|
|
267
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-active);
|
|
268
|
+
@property st-global(--wds-icon-button-color-border-standard-secondary-hover);
|
|
269
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary);
|
|
270
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-active);
|
|
271
|
+
@property st-global(--wds-icon-button-color-fill-standard-primary-hover);
|
|
272
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary);
|
|
273
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-active);
|
|
274
|
+
@property st-global(--wds-icon-button-color-fill-standard-secondary-hover);
|
|
275
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary);
|
|
276
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-active);
|
|
277
|
+
@property st-global(--wds-icon-button-color-fill-standard-tertiary-hover);
|
|
278
|
+
@property st-global(--wds-icon-button-color-text-standard-primary);
|
|
279
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-active);
|
|
280
|
+
@property st-global(--wds-icon-button-color-text-standard-primary-hover);
|
|
281
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary);
|
|
282
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-active);
|
|
283
|
+
@property st-global(--wds-icon-button-color-text-standard-secondary-hover);
|
|
284
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary);
|
|
285
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-active);
|
|
286
|
+
@property st-global(--wds-icon-button-color-text-standard-tertiary-hover);
|
|
263
287
|
@property st-global(--wds-image-border-radius-default);
|
|
264
288
|
@property st-global(--wds-image-border-radius-none);
|
|
265
289
|
@property st-global(--wds-info-icon-fill);
|
|
@@ -1168,6 +1192,30 @@
|
|
|
1168
1192
|
--wds-gallery-item-padding-right-small: 18px;
|
|
1169
1193
|
--wds-gallery-item-padding-vertical-medium: 18px;
|
|
1170
1194
|
--wds-gallery-item-padding-vertical-small: 12px;
|
|
1195
|
+
--wds-icon-button-color-border-standard-primary: #526cff;
|
|
1196
|
+
--wds-icon-button-color-border-standard-primary-active: #4a2ae9;
|
|
1197
|
+
--wds-icon-button-color-border-standard-primary-hover: #4c49fb;
|
|
1198
|
+
--wds-icon-button-color-border-standard-secondary: #d6dcff;
|
|
1199
|
+
--wds-icon-button-color-border-standard-secondary-active: #bac5ff;
|
|
1200
|
+
--wds-icon-button-color-border-standard-secondary-hover: #4c49fb;
|
|
1201
|
+
--wds-icon-button-color-fill-standard-primary: #526cff;
|
|
1202
|
+
--wds-icon-button-color-fill-standard-primary-active: #4a2ae9;
|
|
1203
|
+
--wds-icon-button-color-fill-standard-primary-hover: #4c49fb;
|
|
1204
|
+
--wds-icon-button-color-fill-standard-secondary: #ffffff;
|
|
1205
|
+
--wds-icon-button-color-fill-standard-secondary-active: #bac5ff;
|
|
1206
|
+
--wds-icon-button-color-fill-standard-secondary-hover: #4c49fb;
|
|
1207
|
+
--wds-icon-button-color-fill-standard-tertiary: #ffffff;
|
|
1208
|
+
--wds-icon-button-color-fill-standard-tertiary-active: #ffffff;
|
|
1209
|
+
--wds-icon-button-color-fill-standard-tertiary-hover: #ffffff;
|
|
1210
|
+
--wds-icon-button-color-text-standard-primary: #ffffff;
|
|
1211
|
+
--wds-icon-button-color-text-standard-primary-active: #ffffff;
|
|
1212
|
+
--wds-icon-button-color-text-standard-primary-hover: #ffffff;
|
|
1213
|
+
--wds-icon-button-color-text-standard-secondary: #526cff;
|
|
1214
|
+
--wds-icon-button-color-text-standard-secondary-active: #ffffff;
|
|
1215
|
+
--wds-icon-button-color-text-standard-secondary-hover: #ffffff;
|
|
1216
|
+
--wds-icon-button-color-text-standard-tertiary: #526cff;
|
|
1217
|
+
--wds-icon-button-color-text-standard-tertiary-active: #4a2ae9;
|
|
1218
|
+
--wds-icon-button-color-text-standard-tertiary-hover: #4c49fb;
|
|
1171
1219
|
--wds-image-border-radius-default: 4px;
|
|
1172
1220
|
--wds-image-border-radius-none: 0;
|
|
1173
1221
|
--wds-info-icon-fill: #526cff;
|
package/wixel/foundation.st.css
CHANGED
|
@@ -165,6 +165,7 @@
|
|
|
165
165
|
@property st-global(--wds-shadow-inner-400-right);
|
|
166
166
|
@property st-global(--wds-shadow-inner-400-top);
|
|
167
167
|
@property st-global(--wds-shadow-inner-400-vertical);
|
|
168
|
+
@property st-global(--wds-shadow-y-0);
|
|
168
169
|
@property st-global(--wds-shadow-y-100);
|
|
169
170
|
@property st-global(--wds-shadow-y-200);
|
|
170
171
|
@property st-global(--wds-shadow-y-300);
|
|
@@ -367,6 +368,7 @@
|
|
|
367
368
|
--wds-shadow-inner-400-right: -32px 0 24px -24px rgba(38, 37, 36, 0.2000) inset, -8px 0 6px -6px rgba(38, 37, 36, 0.0500) inset;
|
|
368
369
|
--wds-shadow-inner-400-top: 0 32px 24px -24px rgba(38, 37, 36, 0.2000) inset, 0 8px 6px -6px rgba(38, 37, 36, 0.0500) inset;
|
|
369
370
|
--wds-shadow-inner-400-vertical: 0 22px 18px -18px rgba(38, 37, 36, 0.1000) inset, 0 -8px 6px -6px rgba(38, 37, 36, 0.0500) inset, 0 -22px 18px -18px rgba(38, 37, 36, 0.1000) inset, 0 -8px 6px -6px rgba(38, 37, 36, 0.0500) inset;
|
|
371
|
+
--wds-shadow-y-0: 0;
|
|
370
372
|
--wds-shadow-y-100: 1px;
|
|
371
373
|
--wds-shadow-y-200: 2px;
|
|
372
374
|
--wds-shadow-y-300: 10px;
|